@vialiq/web-components 0.9.0 → 0.10.0

package/base/validity-mixin.d.ts

@@ -1,5 +1,9 @@
 import { LitElement } from 'lit';
 type Constructor<T = object> = new (...args: any[]) => T;
+/**
+ * Generic shape of value types supported by form controls.
+ */
+export type DefaultValueType = string | string[] | number | boolean | File | FileList | unknown;
 /**
  * Tri-state visual status for form controls.
  *
@@ -7,35 +11,14 @@ type Constructor<T = object> = new (...args: any[]) => T;
  * - `'invalid'`  — red border, error colours; set by the form when validation fails
  * - `'valid'`    — green border, success colours; set explicitly by the parent when
  *                  it wants to confirm a correct value (independent of message)
- *
- * Designed to be driven from outside (Angular binding, React prop, plain JS) so
- * the component never decides on its own that it is "valid" — that is always an
- * explicit, intentional signal from the consuming code.
  */
 export type ControlStatus = 'default' | 'valid' | 'invalid';
 /**
  * Type-only declaration of the shape ValidityMixin adds to a class.
  * `declare class` emits no runtime code — it is a TS-only contract.
- *
- * Properties listed here (invalid, required, validityMessage, value) must be
- * declared as reactive `@property` accessors on the subclass. The mixin reads
- * and writes them but cannot create them — they must exist on the concrete class
- * for Lit's reactivity system to pick them up.
- *
- * _internals must be set via `this.attachInternals()` on the subclass.
- * The class must also declare `static formAssociated = true`.
  */
-export declare class ValidityInterface {
-    /**
-     * Visual/validation state of the control. Reflects as the `[status]` attribute.
-     * - `'default'` — no validation styling
-     * - `'invalid'`  — red border / error colours
-     * - `'valid'`    — green border / success colours
-     *
-     * Set by the mixin's constraint-validation methods AND by the consuming
-     * code/framework. The parent always controls this — the component never
-     * auto-promotes itself to `'valid'`.
-     */
+export declare class ValidityInterface<V = DefaultValueType> {
+    /** Visual/validation state of the control. Reflects as the `[status]` attribute. */
     get status(): ControlStatus;
     set status(value: ControlStatus);
     /** Whether a value is required. Drives the valueMissing validity flag. */
@@ -45,187 +28,55 @@ export declare class ValidityInterface {
     get validityMessage(): string;
     set validityMessage(value: string);
     /** The current component value. Read by _testValidity for required check. */
-    get value(): string;
-    set value(v: string);
-    /**
-     * ElementInternals instance. Subclass MUST declare:
-     *   protected readonly _internals = this.attachInternals();
-     * and set:
-     *   static formAssociated = true;
-     */
+    get value(): V;
+    set value(v: V);
+    /** ElementInternals instance created by the mixin. */
     protected readonly _internals: ElementInternals;
-    /**
-     * Checks if the current value satisfies all constraints.
-     * Fires a cancelable 'invalid' event (bubbles: false) if invalid.
-     * Does NOT show browser validation tooltip.
-     * Returns true if valid.
-     */
+    /** Checks if the current value satisfies all constraints. Does NOT mutate visual status. */
     checkValidity(): boolean;
-    /**
-     * Checks validity AND triggers the browser's built-in validation UI
-     * (tooltip near the field). Delegates to ElementInternals.reportValidity().
-     * Returns true if valid.
-     */
+    /** Checks validity, updates visual status, AND triggers the browser's built-in validation UI. */
     reportValidity(): boolean;
+    /** Sets an arbitrary custom validation message. */
+    setCustomValidity(message: string): void;
+    /** Returns the ValidityState object from ElementInternals. */
+    get validity(): ValidityState;
+    /** Returns the current validation message from ElementInternals. */
+    get validationMessage(): string;
     /**
-     * Sets an arbitrary custom validation message.
-     * Pass an empty string to clear the custom error and restore validity.
-     * Syncs immediately to ElementInternals so native form constraint API works.
+     * Whether this element will be validated when the form is submitted.
+     * Returns `false` when the element is disabled.
      */
-    setCustomValidity(message: string): void;
+    get willValidate(): boolean;
     /**
-     * Returns the set of ValidityStateFlags describing why the value is invalid.
-     * Return {} (empty object) when the value is valid.
-     *
-     * The base implementation returns {} (always valid).
-     * Subclasses override this to add component-specific checks.
-     *
-     * Standard flags (all optional, all boolean):
-     *   valueMissing   — required field has no value
-     *   tooShort       — value is shorter than minlength
-     *   tooLong        — value exceeds maxlength
-     *   rangeUnderflow — numeric value < min
-     *   rangeOverflow  — numeric value > max
-     *   patternMismatch— value doesn't match pattern
-     *   typeMismatch   — value not well-formed for type (email, url, etc.)
-     *   badInput       — user input cannot be converted to a value at all
-     *   customError    — setCustomValidity() was called with a non-empty string
-     *   stepMismatch   — value doesn't conform to step
+     * Returns the ValidityStateFlags describing why the value is invalid.
+     * Subclasses MUST override this to provide component-specific validation logic.
      */
     protected _testValidity(): Partial<ValidityStateFlags>;
+    /**
+     * Returns the element that the browser validation popup should point at.
+     * Override in subclasses that wrap a native control (input, textarea, etc.).
+     */
+    protected _getValidationAnchor(): HTMLElement | undefined;
+    /** Called when the associated form is reset. Resets status and validityMessage. */
+    formResetCallback(): void;
+    /** Called when the form or parent fieldset disabled state changes. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Called when the browser restores form state (bfcache, autofill). */
+    formStateRestoreCallback(state: string | File | FormData | null, reason: string): void;
 }
 /**
  * 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
- * ─────────────────────────────────────────────────────────────────────────
+ * Adds the full WHATWG Constraint Validation API and form-associated lifecycle
+ * to any Lit element. Consumers only need to:
  *
- *   ValidityMixin should wrap FocusableMixin (outermost):
- *     ValidityMixin(FocusableMixin(ViElement))
+ *   1. Override `_testValidity()` to return component-specific validity flags.
+ *   2. Declare `value`, `name`, and `disabled` as `@property`.
+ *   3. Call `_internals.setFormValue()` in their `updated()` lifecycle.
  *
- *   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.
+ * The mixin owns: `static formAssociated`, `_internals`, `status`, `required`,
+ * `validityMessage`, and all form lifecycle callbacks.
  */
-export declare function ValidityMixin<T extends Constructor<LitElement>>(Base: T): T & Constructor<ValidityInterface>;
+export declare function ValidityMixin<V = DefaultValueType, T extends Constructor<LitElement> = Constructor<LitElement>>(Base: T): T & Constructor<ValidityInterface<V>>;
 export {};
 //# sourceMappingURL=validity-mixin.d.ts.map

package/base/validity-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validity-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/validity-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,iBAAiB;IAOpC;;;;;;;;;OASG;IACH,IAAI,MAAM,IAAI,aAAa,CAAC;IAC5B,IAAI,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE;IAEjC,0EAA0E;IAC1E,IAAI,QAAQ,IAAI,OAAO,CAAC;IACxB,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IAE7B,2EAA2E;IAC3E,IAAI,eAAe,IAAI,MAAM,CAAC;IAC9B,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE;IAEnC,6EAA6E;IAC7E,IAAI,KAAK,IAAI,MAAM,CAAC;IACpB,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE;IAIrB;;;;;OAKG;IACH,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IAIhD;;;;;OAKG;IACH,aAAa,IAAI,OAAO;IAExB;;;;OAIG;IACH,cAAc,IAAI,OAAO;IAEzB;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC;;;;;;;;;;;;;;;;;;OAkBG;IAKH,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC7D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CA0FpC"}
+{"version":3,"file":"validity-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/validity-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAItD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhG;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,iBAAiB,CAAC,CAAC,GAAG,gBAAgB;IACzD,oFAAoF;IACpF,IAAI,MAAM,IAAI,aAAa,CAAC;IAC5B,IAAI,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE;IAEjC,0EAA0E;IAC1E,IAAI,QAAQ,IAAI,OAAO,CAAC;IACxB,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IAE7B,2EAA2E;IAC3E,IAAI,eAAe,IAAI,MAAM,CAAC;IAC9B,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE;IAEnC,6EAA6E;IAC7E,IAAI,KAAK,IAAI,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE;IAEhB,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IAEhD,4FAA4F;IAC5F,aAAa,IAAI,OAAO;IAExB,iGAAiG;IACjG,cAAc,IAAI,OAAO;IAEzB,mDAAmD;IACnD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAExC,8DAA8D;IAC9D,IAAI,QAAQ,IAAI,aAAa,CAAC;IAE9B,oEAAoE;IACpE,IAAI,iBAAiB,IAAI,MAAM,CAAC;IAEhC;;;OAGG;IACH,IAAI,YAAY,IAAI,OAAO,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAEtD;;;OAGG;IACH,SAAS,CAAC,oBAAoB,IAAI,WAAW,GAAG,SAAS;IAEzD,mFAAmF;IACnF,iBAAiB,IAAI,IAAI;IAEzB,sEAAsE;IACtE,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAE7C,uEAAuE;IACvE,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CACvF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,CAAC,GAAG,gBAAgB,EACpB,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC,UAAU,CAAC,EAE3D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAqPvC"}

package/checkbox/vi-checkbox.d.ts

@@ -2,7 +2,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 import { type ControlStatus } from '../base/validity-mixin.js';
 import { ViElement } from '../base/vi-element.js';
 export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
-declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface);
+declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface<unknown>);
 /**
  * vi-checkbox
  * Form-associated checkbox control using Flux UI tokens.
@@ -29,9 +29,7 @@ declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => impor
  * @csspart label - The label text wrapper.
  */
 export declare class ViCheckbox extends ViCheckbox_base {
-    static formAssociated: boolean;
     static styles: import("lit").CSSResult;
-    protected readonly _internals: ElementInternals;
     private _initialChecked;
     protected get _focusableElement(): HTMLInputElement | null;
     accessor status: ControlStatus;

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

@@ -1 +1 @@
-{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.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,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IACvD,OAAO,CAAC,eAAe,CAAS;IAEhC,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,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.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,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,OAAgB,MAAM,0BAEpB;IAEF,OAAO,CAAC,eAAe,CAAS;IAEhC,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,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/checkbox/vi-checkbox.js

@@ -1,7 +1,7 @@
 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 ValidityMixin } from '../validity-mixin-H4aOFJEr.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -461,12 +461,10 @@ new class extends _identity {
                     _dec
                 ], _ValidityMixin));
             }
-            static formAssociated = true;
             static styles = css`
     ${unsafeCSS(checkboxStyles)}
   `;
-            _internals = (_initProto(this), this.attachInternals());
-            _initialChecked = false;
+            _initialChecked = (_initProto(this), false);
             get _focusableElement() {
                 return this.shadowRoot?.querySelector('input') ?? null;
             }

package/index.d.ts

@@ -25,4 +25,7 @@ export { ViBadge } from './badge/vi-badge.js';
 export type { BadgeVariant, BadgeSize } from './badge/vi-badge.js';
 export { ViAlert } from './alert/vi-alert.js';
 export type { AlertVariant } from './alert/vi-alert.js';
+export { ViChip } from './chip/vi-chip.js';
+export type { ChipVariant, ChipSize } from './chip/vi-chip.js';
+export { ViChipGroup } from './chip/vi-chip-group.js';
 //# sourceMappingURL=index.d.ts.map