@vialiq/web-components 0.2.0 → 0.4.0

package/button/vi-button.js

@@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 
-const buttonStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vi-spacing-xs, 8px);border:var(--vi-border-width-thin, 1px) solid transparent;border-radius:var(--vi-button-shape-border-radius, var(--vi-border-radius-md, 4px));padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px)) var(--vi-button-spacing-padding-inline, var(--vi-spacing-md, 24px));font-size:var(--vi-button-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-button-typography-font-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-line-height-tight, 1.2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity var(--vi-button-effect-transition-duration, .16s) ease,box-shadow var(--vi-button-effect-transition-duration, .16s) ease,transform var(--vi-button-effect-transition-duration, .16s) ease}}:host{display:inline-block}:host([size=xs]){--vi-button-spacing-padding-block: 2px;--vi-button-spacing-padding-inline: 8px;--vi-button-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-button-spacing-padding-block: 4px;--vi-button-spacing-padding-inline: 12px;--vi-button-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-button-spacing-padding-block: 12px;--vi-button-spacing-padding-inline: 24px;--vi-button-typography-font-size: var(--vi-font-size-lg, 18px)}:host([full-width]){display:block}:host([full-width]) .button{width:100%}:host([icon-only]) .button{aspect-ratio:1/1;padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px));justify-content:center}:host([icon-only]) .label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([variant=primary]) .button{background-color:var(--vi-button-surface-primary-background-color, var(--vi-color-primary, #3676d0));color:var(--vi-button-surface-primary-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=secondary]) .button{background-color:var(--vi-button-surface-secondary-background-color, var(--vi-color-secondary, #f0f4f8));color:var(--vi-button-surface-secondary-text-color, var(--vi-color-foreground, #111827));border-color:var(--vi-color-border, #e5e7eb)}:host([variant=danger]) .button{background-color:var(--vi-button-surface-danger-background-color, var(--vi-color-error, #ef4444));color:var(--vi-button-surface-danger-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=success]) .button{background-color:var(--vi-button-surface-success-background-color, var(--vi-color-success, #489167));color:var(--vi-button-surface-success-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=info]) .button{background-color:var(--vi-button-surface-info-background-color, var(--vi-color-info, #3676d0));color:var(--vi-button-surface-info-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=ghost]) .button{background-color:var(--vi-button-surface-ghost-background-color, transparent);color:var(--vi-button-surface-ghost-text-color, var(--vi-color-primary, #3676d0))}:host([disabled]) .button,.button:disabled{opacity:.6;cursor:not-allowed}.button:not(:disabled){box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08))}.button:hover:not(:disabled){opacity:.92;box-shadow:var(--vi-button-effect-shadow-hover, inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .1));transform:translateY(-1px)}.button:active:not(:disabled){box-shadow:var(--vi-button-effect-shadow-pressed, inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .06));transform:translateY(1px);opacity:1}:host([variant=ghost]) .button:hover:not(:disabled){background-color:#0000000a;text-decoration:underline;opacity:1}:host([variant=ghost]) .button:not(:disabled){box-shadow:none}:host([variant=ghost]) .button:active:not(:disabled){box-shadow:inset 0 1px 3px #00000024;transform:translateY(0)}.button:focus-visible:not(:disabled){outline:var(--vi-border-width-base, 2px) solid var(--vi-button-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:3px;box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08)),0 0 0 3px var(--vi-button-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}@media(prefers-reduced-motion:reduce){.button{transform:none!important;transition-property:color,background-color,border-color,box-shadow,opacity!important}}.icon{order:-1;display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}:host([icon-placement=end]) .icon{order:1}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}.label{flex:1 1 auto;min-width:0}";
+const buttonStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vi-spacing-xs, 8px);border:var(--vi-border-width-thin, 1px) solid transparent;border-radius:var(--vi-button-shape-border-radius, var(--vi-border-radius-md, 4px));padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px)) var(--vi-button-spacing-padding-inline, var(--vi-spacing-md, 24px));font-size:var(--vi-button-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-button-typography-font-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-line-height-tight, 1.2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity var(--vi-button-effect-transition-duration, .16s) ease,box-shadow var(--vi-button-effect-transition-duration, .16s) ease,transform var(--vi-button-effect-transition-duration, .16s) ease}}:host{display:inline-block}:host([size=xs]){--vi-button-spacing-padding-block: 2px;--vi-button-spacing-padding-inline: 8px;--vi-button-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-button-spacing-padding-block: 4px;--vi-button-spacing-padding-inline: 12px;--vi-button-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-button-spacing-padding-block: 12px;--vi-button-spacing-padding-inline: 24px;--vi-button-typography-font-size: var(--vi-font-size-lg, 18px)}:host([full-width]){display:block}:host([full-width]) .button{width:100%}:host([icon-only]) .button{aspect-ratio:1/1;padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px));justify-content:center}:host([icon-only]) .label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([variant=primary]) .button{background-color:var(--vi-button-surface-primary-background-color, var(--vi-color-primary, #3676d0));color:var(--vi-button-surface-primary-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=secondary]) .button{background-color:var(--vi-button-surface-secondary-background-color, var(--vi-color-secondary, #f0f4f8));color:var(--vi-button-surface-secondary-text-color, var(--vi-color-foreground, #111827));border-color:var(--vi-color-border, #e5e7eb)}:host([variant=danger]) .button{background-color:var(--vi-button-surface-danger-background-color, var(--vi-color-error, #ef4444));color:var(--vi-button-surface-danger-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=success]) .button{background-color:var(--vi-button-surface-success-background-color, var(--vi-color-success, #489167));color:var(--vi-button-surface-success-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=info]) .button{background-color:var(--vi-button-surface-info-background-color, var(--vi-color-info, #3676d0));color:var(--vi-button-surface-info-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=ghost]) .button{background-color:var(--vi-button-surface-ghost-background-color, transparent);color:var(--vi-button-surface-ghost-text-color, var(--vi-color-primary, #3676d0))}:host([disabled]) .button,.button:disabled{opacity:.6;cursor:not-allowed}.button:not(:disabled){box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08))}.button:hover:not(:disabled){opacity:.92;box-shadow:var(--vi-button-effect-shadow-hover, inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .1));transform:translateY(-1px)}.button:active:not(:disabled){box-shadow:var(--vi-button-effect-shadow-pressed, inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .06));transform:translateY(1px);opacity:1}:host([variant=ghost]) .button:hover:not(:disabled){background-color:#0000000a;text-decoration:underline;opacity:1}:host([variant=ghost]) .button:not(:disabled){box-shadow:none}:host([variant=ghost]) .button:active:not(:disabled){box-shadow:inset 0 1px 3px #00000024;transform:translateY(0)}.button:focus-visible:not(:disabled){outline:var(--vi-border-width-base, 2px) solid var(--vi-button-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:3px;box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08)),0 0 0 3px var(--vi-button-focus-ring-glow, var(--vi-color-primary, #3676d0))}@media(prefers-reduced-motion:reduce){.button{transform:none!important;transition-property:color,background-color,border-color,box-shadow,opacity!important}}.icon{order:-1;display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}:host([icon-placement=end]) .icon{order:1}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}.label{flex:1 1 auto;min-width:0}";
 
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {

package/index.d.ts

@@ -4,8 +4,14 @@ export type { ControlStatus } from './base/validity-mixin.js';
 export { ViButton } from './button/vi-button.js';
 export type { ButtonVariant, ButtonSize, ButtonIconPlacement } from './button/vi-button.js';
 export { ViInput } from './input/vi-input.js';
-export type { InputType } from './input/vi-input.js';
+export type { InputType, InputSize } 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 type { RadioSize } from './radio/vi-radio.js';
+export { ViRadioGroup } from './radio/vi-radio-group.js';
+export type { RadioGroupOrientation } from './radio/vi-radio-group.js';
+export { ViCheckbox } from './checkbox/vi-checkbox.js';
+export type { CheckboxSize } from './checkbox/vi-checkbox.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -3,3 +3,6 @@ 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';
+export { ViCheckbox } from './checkbox/vi-checkbox.js';

package/input/index.d.ts

@@ -1,3 +1,3 @@
 export { ViInput } from './vi-input.js';
-export type { InputType } from './vi-input.js';
+export type { InputType, InputSize } from './vi-input.js';
 //# sourceMappingURL=index.d.ts.map

package/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/input/vi-input.d.ts

@@ -8,6 +8,7 @@ import { ViElement } from '../base/vi-element.js';
  * separate components.
  */
 export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface);
 /**
  * vi-input
@@ -66,6 +67,8 @@ export declare class ViInput extends ViInput_base {
     accessor value: string;
     /** When true, disables the input and removes it from the tab order. */
     accessor disabled: boolean;
+    /** Size scale — controls padding and font-size. */
+    accessor size: InputSize;
     /** When true, the value cannot be edited but is still submitted. */
     accessor readonly: boolean;
     protected _testValidity(): Partial<ValidityStateFlags>;

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,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,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
  *
@@ -280,7 +66,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  *     - The binding is to a custom element property — use .prop=${val} instead
  */ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
 
-const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-red-700, #db231b);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-green-700, #265a3d);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}";
+const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
 
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -657,9 +443,9 @@ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
 function _identity(x) {
     return x;
 }
-var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, // ── ValidityMixin contract — must be declared as @property —————————————
+var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, // ── ValidityMixin contract — must be declared as @property —————————————
 _init_status, _init_required, _init_validityMessage, // ── Public API ─────────────────────────────────────────────────────────────
-/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, _initProto;
+/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** Size scale — controls padding and font-size. */ _init_size, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, _initProto;
 let _ViInput;
 _dec = customElement('vi-input'), _dec1 = property({
     reflect: true
@@ -673,6 +459,9 @@ _dec = customElement('vi-input'), _dec1 = property({
     type: Boolean,
     reflect: true
 }), _dec9 = property({
+    type: String,
+    reflect: true
+}), _dec10 = property({
     type: Boolean,
     reflect: true
 });
@@ -683,7 +472,7 @@ new class extends _identity {
     static{
         class ViInput extends (_ValidityMixin = ValidityMixin(FocusableMixin(ViElement))) {
             static{
-                ({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_readonly, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
+                ({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_size, _init_readonly, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
                     [
                         _dec1,
                         1,
@@ -727,6 +516,11 @@ new class extends _identity {
                     [
                         _dec9,
                         1,
+                        "size"
+                    ],
+                    [
+                        _dec10,
+                        1,
                         "readonly"
                     ]
                 ], [
@@ -797,12 +591,19 @@ new class extends _identity {
             set disabled(_v) {
                 this.#___private_disabled_8 = _v;
             }
-            #___private_readonly_9 = _init_readonly(this, false);
+            #___private_size_9 = _init_size(this, 'md');
+            get size() {
+                return this.#___private_size_9;
+            }
+            set size(_v) {
+                this.#___private_size_9 = _v;
+            }
+            #___private_readonly_10 = _init_readonly(this, false);
             get readonly() {
-                return this.#___private_readonly_9;
+                return this.#___private_readonly_10;
             }
             set readonly(_v) {
-                this.#___private_readonly_9 = _v;
+                this.#___private_readonly_10 = _v;
             }
             // ── ValidityMixin hook ─────────────────────────────────────────────────────
             // _testValidity is declared protected in ValidityInterface, but TypeScript's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.2.0",
+  "version": "0.4.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.3.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 };