chore: cleanup and align types/tests

packages/combobox/README.md

@@ -267,7 +267,7 @@ export const invokerButton = () => html`
 
 Validation can be used as normal, below is an example of a combobox with a `Required` validator.
 
-```js story
+```js preview-story
 export const validation = () => {
   loadDefaultFeedbackMessages();
   Required.getMessage = () => 'Please enter a value';
@@ -278,7 +278,6 @@ export const validation = () => {
           .validators="${[new Required()]}"
           name="favoriteMovie"
           label="Favorite movie"
-          autocomplete="both"
         >
           <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
           <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>

packages/combobox/src/LionCombobox.js

@@ -433,8 +433,8 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    *
    * @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
    */
-  _repropagationConditionFails(target) {
+  _repropagationCondition(target) {
-    return super._repropagationConditionFails(target) && this.formElements?.some(el => el.checked);
+    return super._repropagationCondition(target) || this.formElements.every(el => !el.checked);
   }
 
   /* eslint-disable no-param-reassign */
@@ -482,6 +482,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
       prevValue.length &&
       curValue.length &&
       prevValue[0].toLowerCase() !== curValue[0].toLowerCase();
+
     return userIsAddingChars || userStartsNewWord;
   }
 

packages/combobox/test/lion-combobox.test.js

@@ -450,22 +450,23 @@ describe('lion-combobox', () => {
       it('works with validation', async () => {
         const el = /** @type {LionCombobox} */ (await fixture(html`
           <lion-combobox name="foo" .validators=${[new Required()]}>
-            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
             <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
             <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
           </lion-combobox>
         `));
-
-        // open
-        el._comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
-
-        mimicUserTyping(el, 'art');
-        await el.updateComplete;
         expect(el.checkedIndex).to.equal(0);
 
-        mimicUserTyping(el, '');
+        // Simulate backspace deleting the char at the end of the string
+        el._inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace' }));
+        el._inputNode.dispatchEvent(new Event('input'));
+        const arr = el._inputNode.value.split('');
+        arr.splice(el._inputNode.value.length - 1, 1);
+        el._inputNode.value = arr.join('');
         await el.updateComplete;
+        el.dispatchEvent(new Event('blur'));
+
         expect(el.checkedIndex).to.equal(-1);
         await el.feedbackComplete;
         expect(el.hasFeedbackFor).to.include('error');

packages/form-core/src/FocusMixin.js

@@ -6,6 +6,7 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FocusMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   // eslint-disable-next-line no-unused-vars, max-len, no-shadow
   class FocusMixin extends FormControlMixin(superclass) {
     static get properties() {

packages/form-core/src/FormControlMixin.js

@@ -801,7 +801,7 @@ const FormControlMixinImplementation = superclass =>
       // We only send the checked changed up (not the unchecked). In this way a choice group
       // (radio-group, checkbox-group, select/listbox) acts as an 'endpoint' (a single Field)
       // just like the native <select>
-      if (this._repropagationConditionFails(target)) {
+      if (!this._repropagationCondition(target)) {
         return;
       }
 
@@ -828,8 +828,8 @@ const FormControlMixinImplementation = superclass =>
      * This will fix the types and reduce the need for ignores/expect-errors
      * @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
      */
-    _repropagationConditionFails(target) {
+    _repropagationCondition(target) {
-      return (
+      return !(
         this._repropagationRole === 'choice-group' &&
         // @ts-expect-error multipleChoice is not directly available but only as side effect
         !this.multipleChoice &&

packages/form-core/src/FormatMixin.js

@@ -57,6 +57,7 @@ import { ValidateMixin } from './validate/ValidateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FormatMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) {
     static get properties() {
       return {

packages/form-core/src/InteractionStateMixin.js

@@ -18,6 +18,7 @@ import { FormControlMixin } from './FormControlMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const InteractionStateMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class InteractionStateMixin extends FormControlMixin(superclass) {
     static get properties() {
       return {

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -15,6 +15,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const ChoiceGroupMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
     static get properties() {
       return {

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -21,6 +21,7 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const ChoiceInputMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class ChoiceInputMixin extends FormatMixin(superclass) {
     static get properties() {
       return {

packages/form-core/src/form-group/FormGroupMixin.js

@@ -29,6 +29,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 const FormGroupMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class FormGroupMixin extends FormRegistrarMixin(
     FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))),
   ) {

packages/form-core/src/validate/ValidateMixin.js

@@ -32,6 +32,7 @@ function arrayDiff(array1 = [], array2 = []) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 export const ValidateMixinImplementation = superclass =>
+  // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
   class extends FormControlMixin(
     SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))),
   ) {

packages/form-core/types/FormControlMixinTypes.d.ts

@@ -12,6 +12,27 @@ declare interface HTMLElementWithValue extends HTMLElement {
 
 export declare class FormControlHost {
   static get styles(): CSSResult | CSSResult[];
+  static get properties(): {
+    name: {
+      type: StringConstructor;
+      reflect: boolean;
+    };
+    readOnly: {
+      type: BooleanConstructor;
+      attribute: string;
+      reflect: boolean;
+    };
+    label: StringConstructor;
+    helpText: {
+      type: StringConstructor;
+      attribute: string;
+    };
+    modelValue: { attribute: boolean };
+    _ariaLabelledNodes: { attribute: boolean };
+    _ariaDescribedNodes: { attribute: boolean };
+    _repropagationRole: { attribute: boolean };
+    _isRepropagationEndpoint: { attribute: boolean };
+  };
   /**
    * A Boolean attribute which, if present, indicates that the user should not be able to edit
    * the value of the input. The difference between disabled and readonly is that read-only