@vialiq/web-components 0.2.0 → 0.3.0

package/index.d.ts

@@ -8,4 +8,7 @@ export type { InputType } from './input/vi-input.js';
 export { ViIcon } from './icons/vi-icon.js';
 export { registerIcons, getIcon } from './icons/registry.js';
 export type { SvgIconDef } from './icons/registry.js';
+export { ViRadio } from './radio/vi-radio.js';
+export { ViRadioGroup } from './radio/vi-radio-group.js';
+export type { RadioGroupOrientation } from './radio/vi-radio-group.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -3,3 +3,5 @@ export { ViButton } from './button/vi-button.js';
 export { ViInput } from './input/vi-input.js';
 export { ViIcon } from './icons/vi-icon.js';
 export { getIcon, registerIcons } from './icons/registry.js';
+export { ViRadio } from './radio/vi-radio.js';
+export { ViRadioGroup } from './radio/vi-radio-group.js';

package/input/vi-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAOtE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAmC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAkClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAOtE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAmC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAkClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/input/vi-input.js

@@ -1,224 +1,10 @@
 import { unsafeCSS, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
+import { V as ValidityMixin } from '../validity-mixin-BjmXwgWk.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-/**
- * ValidityMixin
- *
- * Adds the standard form validation API (`checkValidity`, `reportValidity`,
- * `setCustomValidity`) to any form-associated Lit element.
- *
- * Backed by the native `ElementInternals` API so the component participates
- * in `HTMLFormElement` constraint validation, `.elements`, and browser
- * validation UI — exactly like a native `<input>`.
- *
- * ─────────────────────────────────────────────────────────────────────────
- * MINIMUM SUBCLASS REQUIREMENTS
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   1. Declare static formAssociated = true;
- *      Makes the browser register this element as a form participant.
- *
- *   2. Attach ElementInternals:
- *        protected readonly _internals = this.attachInternals();
- *      Must be a field initializer (runs after super() in the constructor).
- *
- *   3. Declare reactive properties (MUST be @property so Lit tracks changes):
- *        @property({ reflect: true }) accessor status: ControlStatus = 'default';
- *        @property({ type: Boolean, reflect: true }) accessor required = false;
- *        @property() accessor validityMessage = '';
- *        @property() accessor value = '';
- *
- *   4. Sync value to internals on every value change:
- *        override updated(changed: PropertyValues): void {
- *          super.updated(changed);
- *          if (changed.has('value')) {
- *            this._internals.setFormValue(this.value);
- *          }
- *        }
- *
- *   5. Handle form reset:
- *        formResetCallback(): void {
- *          this.value = this.getAttribute('value') ?? '';
- *          this.status = 'default';
- *          this.validityMessage = '';
- *        }
- *
- *   6. Handle fieldset/form disable:
- *        formDisabledCallback(disabled: boolean): void {
- *          this.disabled = disabled;
- *        }
- *
- * ─────────────────────────────────────────────────────────────────────────
- * OVERRIDE _testValidity() FOR CUSTOM CONSTRAINTS
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   protected override _testValidity(): Partial<ValidityStateFlags> {
- *     if (this.required && !this.value) return { valueMissing: true };
- *     return {};
- *   }
- *
- *   Chain constraints for components with multiple rules (e.g. vi-input[type="number"]):
- *
- *   protected override _testValidity(): Partial<ValidityStateFlags> {
- *     if (this.required && !this.value)     return { valueMissing: true };
- *     if (this.minlength && this.value.length < this.minlength)
- *                                           return { tooShort: true };
- *     if (this.maxlength && this.value.length > this.maxlength)
- *                                           return { tooLong: true };
- *     return {};
- *   }
- *
- * ─────────────────────────────────────────────────────────────────────────
- * FULL USAGE EXAMPLE — vi-input
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   import { property } from 'lit/decorators.js';
- *   import { ValidityMixin } from '../base/validity-mixin.js';
- *   import { FocusableMixin } from '../base/focusable-mixin.js';
- *   import { ViElement } from '../base/vi-element.js';
- *
- *   @customElement('vi-input')
- *   export class ViInput extends ValidityMixin(FocusableMixin(ViElement)) {
- *     static override formAssociated = true;
- *     protected readonly _internals = this.attachInternals();
- *
-   *     @property({ reflect: true }) accessor status: ControlStatus = 'default';
- *     @property({ type: Boolean, reflect: true }) accessor required = false;
- *     @property() accessor validityMessage = '';
- *     @property() accessor value = '';
- *
- *     protected override _testValidity(): Partial<ValidityStateFlags> {
- *       if (this.required && !this.value) return { valueMissing: true };
- *       return {};
- *     }
- *
- *     override updated(changed: PropertyValues): void {
- *       super.updated(changed);
- *       if (changed.has('value')) this._internals.setFormValue(this.value);
- *     }
- *
- *     formResetCallback(): void {
- *       this.value = this.getAttribute('value') ?? '';
- *       this.status = 'default';
- *       this.validityMessage = '';
- *     }
- *
- *     formDisabledCallback(disabled: boolean): void {
- *       this.disabled = disabled;
- *     }
- *   }
- *
- * ─────────────────────────────────────────────────────────────────────────
- * INVALID EVENT BEHAVIOUR
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   checkValidity() fires a cancelable 'invalid' event when validation fails.
- *   The event does NOT bubble (matches native form element behaviour).
- *   Consumer can suppress the default UI by calling event.preventDefault().
- *
- *   Example:
- *     myInput.addEventListener('invalid', (e) => {
- *       e.preventDefault(); // suppress browser tooltip
- *       showMyCustomError(myInput.validityMessage);
- *     });
- *
- * ─────────────────────────────────────────────────────────────────────────
- * MIXIN COMPOSITION ORDER
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   ValidityMixin should wrap FocusableMixin (outermost):
- *     ValidityMixin(FocusableMixin(ViElement))
- *
- *   Reason: ValidityMixin only adds methods (checkValidity etc.). It does not
- *   touch shadowRootOptions or focus delegation, so order has no side-effects.
- *   Convention is: functionality mixins wrap infrastructure mixins.
- */ function ValidityMixin(Base) {
-    class ValidityMixinClass extends Base {
-        /**
-     * Base implementation — always valid.
-     * Subclass overrides this to return flags like { valueMissing: true }.
-     */ _testValidity() {
-            return {};
-        }
-        checkValidity() {
-            const flags = this._testValidity();
-            const isValid = !Object.values(flags).some(Boolean);
-            // Sync to ElementInternals so native form API (formElement.checkValidity,
-            // :invalid CSS pseudo-class, browser tooltip) reflects the same state.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const internals = this._internals;
-            if (internals) {
-                if (isValid) {
-                    internals.setValidity({}, '');
-                } else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const msg = this.validityMessage || 'Invalid value';
-                    internals.setValidity(flags, msg);
-                }
-            }
-            if (isValid) {
-                // Only clear status if it was previously set to 'invalid' by the constraint
-                // API. Do not override an explicit 'valid' set by the parent/framework.
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if (this.status === 'invalid') {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.status = 'default';
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.validityMessage = '';
-                }
-            } else {
-                // Fire cancelable 'invalid' — mirrors native form element behaviour.
-                // Cancelable so consumers can suppress browser tooltip and show their own.
-                // bubbles: false — matches native <input> 'invalid' event.
-                // composed: false — stays within the document, does not cross shadow boundaries.
-                const proceed = this.dispatchEvent(new Event('invalid', {
-                    bubbles: false,
-                    cancelable: true,
-                    composed: false
-                }));
-                if (proceed) {
-                    // Only set status='invalid' if the event was not cancelled.
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.status = 'invalid';
-                }
-            }
-            return isValid;
-        }
-        reportValidity() {
-            // Prefer ElementInternals.reportValidity() — it triggers native browser UI
-            // (tooltip near the field). Falls back to checkValidity() if internals not set.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const internals = this._internals;
-            if (internals) {
-                // Must sync validity state first so the browser has something to show.
-                this.checkValidity();
-                return internals.reportValidity();
-            }
-            return this.checkValidity();
-        }
-        setCustomValidity(message) {
-            const hasError = Boolean(message);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.status = hasError ? 'invalid' : 'default';
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.validityMessage = message;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const internals = this._internals;
-            if (internals) {
-                internals.setValidity(hasError ? {
-                    customError: true
-                } : {}, hasError ? message : '');
-            }
-        }
-    }
-    // Cast required: TypeScript cannot reconcile LitElement's private fields
-    // with the anonymous class return type. Same pattern as FocusableMixin.
-    return ValidityMixinClass;
-}
-
 /**
  * ifNonEmpty — conditional attribute directive
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -35,10 +35,22 @@
     "./input": {
       "types": "./input/vi-input.d.ts",
       "default": "./input/vi-input.js"
+    },
+    "./radio/vi-radio": {
+      "types": "./radio/vi-radio.d.ts",
+      "default": "./radio/vi-radio.js"
+    },
+    "./radio/vi-radio-group": {
+      "types": "./radio/vi-radio-group.d.ts",
+      "default": "./radio/vi-radio-group.js"
+    },
+    "./radio": {
+      "types": "./radio/index.d.ts",
+      "default": "./radio/index.js"
     }
   },
   "peerDependencies": {
-    "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
+    "@vialiq/flux-ui": "^0.2.0",
     "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },

package/validity-mixin-BjmXwgWk.js

@@ -0,0 +1,216 @@
+/**
+ * ValidityMixin
+ *
+ * Adds the standard form validation API (`checkValidity`, `reportValidity`,
+ * `setCustomValidity`) to any form-associated Lit element.
+ *
+ * Backed by the native `ElementInternals` API so the component participates
+ * in `HTMLFormElement` constraint validation, `.elements`, and browser
+ * validation UI — exactly like a native `<input>`.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * MINIMUM SUBCLASS REQUIREMENTS
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   1. Declare static formAssociated = true;
+ *      Makes the browser register this element as a form participant.
+ *
+ *   2. Attach ElementInternals:
+ *        protected readonly _internals = this.attachInternals();
+ *      Must be a field initializer (runs after super() in the constructor).
+ *
+ *   3. Declare reactive properties (MUST be @property so Lit tracks changes):
+ *        @property({ reflect: true }) accessor status: ControlStatus = 'default';
+ *        @property({ type: Boolean, reflect: true }) accessor required = false;
+ *        @property() accessor validityMessage = '';
+ *        @property() accessor value = '';
+ *
+ *   4. Sync value to internals on every value change:
+ *        override updated(changed: PropertyValues): void {
+ *          super.updated(changed);
+ *          if (changed.has('value')) {
+ *            this._internals.setFormValue(this.value);
+ *          }
+ *        }
+ *
+ *   5. Handle form reset:
+ *        formResetCallback(): void {
+ *          this.value = this.getAttribute('value') ?? '';
+ *          this.status = 'default';
+ *          this.validityMessage = '';
+ *        }
+ *
+ *   6. Handle fieldset/form disable:
+ *        formDisabledCallback(disabled: boolean): void {
+ *          this.disabled = disabled;
+ *        }
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * OVERRIDE _testValidity() FOR CUSTOM CONSTRAINTS
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   protected override _testValidity(): Partial<ValidityStateFlags> {
+ *     if (this.required && !this.value) return { valueMissing: true };
+ *     return {};
+ *   }
+ *
+ *   Chain constraints for components with multiple rules (e.g. vi-input[type="number"]):
+ *
+ *   protected override _testValidity(): Partial<ValidityStateFlags> {
+ *     if (this.required && !this.value)     return { valueMissing: true };
+ *     if (this.minlength && this.value.length < this.minlength)
+ *                                           return { tooShort: true };
+ *     if (this.maxlength && this.value.length > this.maxlength)
+ *                                           return { tooLong: true };
+ *     return {};
+ *   }
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * FULL USAGE EXAMPLE — vi-input
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   import { property } from 'lit/decorators.js';
+ *   import { ValidityMixin } from '../base/validity-mixin.js';
+ *   import { FocusableMixin } from '../base/focusable-mixin.js';
+ *   import { ViElement } from '../base/vi-element.js';
+ *
+ *   @customElement('vi-input')
+ *   export class ViInput extends ValidityMixin(FocusableMixin(ViElement)) {
+ *     static override formAssociated = true;
+ *     protected readonly _internals = this.attachInternals();
+ *
+   *     @property({ reflect: true }) accessor status: ControlStatus = 'default';
+ *     @property({ type: Boolean, reflect: true }) accessor required = false;
+ *     @property() accessor validityMessage = '';
+ *     @property() accessor value = '';
+ *
+ *     protected override _testValidity(): Partial<ValidityStateFlags> {
+ *       if (this.required && !this.value) return { valueMissing: true };
+ *       return {};
+ *     }
+ *
+ *     override updated(changed: PropertyValues): void {
+ *       super.updated(changed);
+ *       if (changed.has('value')) this._internals.setFormValue(this.value);
+ *     }
+ *
+ *     formResetCallback(): void {
+ *       this.value = this.getAttribute('value') ?? '';
+ *       this.status = 'default';
+ *       this.validityMessage = '';
+ *     }
+ *
+ *     formDisabledCallback(disabled: boolean): void {
+ *       this.disabled = disabled;
+ *     }
+ *   }
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * INVALID EVENT BEHAVIOUR
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   checkValidity() fires a cancelable 'invalid' event when validation fails.
+ *   The event does NOT bubble (matches native form element behaviour).
+ *   Consumer can suppress the default UI by calling event.preventDefault().
+ *
+ *   Example:
+ *     myInput.addEventListener('invalid', (e) => {
+ *       e.preventDefault(); // suppress browser tooltip
+ *       showMyCustomError(myInput.validityMessage);
+ *     });
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * MIXIN COMPOSITION ORDER
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   ValidityMixin should wrap FocusableMixin (outermost):
+ *     ValidityMixin(FocusableMixin(ViElement))
+ *
+ *   Reason: ValidityMixin only adds methods (checkValidity etc.). It does not
+ *   touch shadowRootOptions or focus delegation, so order has no side-effects.
+ *   Convention is: functionality mixins wrap infrastructure mixins.
+ */ function ValidityMixin(Base) {
+    class ValidityMixinClass extends Base {
+        /**
+     * Base implementation — always valid.
+     * Subclass overrides this to return flags like { valueMissing: true }.
+     */ _testValidity() {
+            return {};
+        }
+        checkValidity() {
+            const flags = this._testValidity();
+            const isValid = !Object.values(flags).some(Boolean);
+            // Sync to ElementInternals so native form API (formElement.checkValidity,
+            // :invalid CSS pseudo-class, browser tooltip) reflects the same state.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const internals = this._internals;
+            if (internals) {
+                if (isValid) {
+                    internals.setValidity({}, '');
+                } else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const msg = this.validityMessage || 'Invalid value';
+                    internals.setValidity(flags, msg);
+                }
+            }
+            if (isValid) {
+                // Only clear status if it was previously set to 'invalid' by the constraint
+                // API. Do not override an explicit 'valid' set by the parent/framework.
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.status === 'invalid') {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.status = 'default';
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.validityMessage = '';
+                }
+            } else {
+                // Fire cancelable 'invalid' — mirrors native form element behaviour.
+                // Cancelable so consumers can suppress browser tooltip and show their own.
+                // bubbles: false — matches native <input> 'invalid' event.
+                // composed: false — stays within the document, does not cross shadow boundaries.
+                const proceed = this.dispatchEvent(new Event('invalid', {
+                    bubbles: false,
+                    cancelable: true,
+                    composed: false
+                }));
+                if (proceed) {
+                    // Only set status='invalid' if the event was not cancelled.
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.status = 'invalid';
+                }
+            }
+            return isValid;
+        }
+        reportValidity() {
+            // Prefer ElementInternals.reportValidity() — it triggers native browser UI
+            // (tooltip near the field). Falls back to checkValidity() if internals not set.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const internals = this._internals;
+            if (internals) {
+                // Must sync validity state first so the browser has something to show.
+                this.checkValidity();
+                return internals.reportValidity();
+            }
+            return this.checkValidity();
+        }
+        setCustomValidity(message) {
+            const hasError = Boolean(message);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.status = hasError ? 'invalid' : 'default';
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.validityMessage = message;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const internals = this._internals;
+            if (internals) {
+                internals.setValidity(hasError ? {
+                    customError: true
+                } : {}, hasError ? message : '');
+            }
+        }
+    }
+    // Cast required: TypeScript cannot reconcile LitElement's private fields
+    // with the anonymous class return type. Same pattern as FocusableMixin.
+    return ValidityMixinClass;
+}
+
+export { ValidityMixin as V };