@vialiq/web-components 0.1.3 → 0.2.0

package/button/vi-button.d.ts

@@ -0,0 +1,68 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+/**
+ * Button visual variant.
+ * Defined here, not in ViElement — each component owns its variant type
+ * (functional composition, not inheritance). Different components may
+ * support different subsets of these values.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'ghost';
+/**
+ * Button size scale. Controls padding and font-size via CSS custom properties.
+ * xs → sm → md (default) → lg
+ */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Icon placement relative to the label.
+ * 'start' (default) places the icon before the text; 'end' places it after.
+ * Controlled via CSS `order` — no extra wrapper elements needed.
+ */
+export type ButtonIconPlacement = 'start' | 'end';
+declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface);
+/**
+ * vi-button
+ * Self-styled button component using Flux UI token fallbacks.
+ *
+ * @element vi-button
+ * @attr variant        - Visual variant: primary | secondary | danger | success | info
+ * @attr size           - Size scale: xs | sm | md | lg (default: md)
+ * @attr icon-placement - Icon slot position: start | end (default: start)
+ * @attr disabled       - Disables the button
+ * @attr full-width     - Stretches button to fill its container
+ * @attr icon-only      - Styles the button for an icon-only layout
+ *
+ * @slot           - Button label (text / content)
+ * @slot icon      - A single icon (vi-icon or any inline SVG)
+ *
+ * @csspart button - The inner <button> element
+ * @csspart icon   - The icon slot wrapper
+ * @csspart label  - The label span
+ */
+export declare class ViButton extends ViButton_base {
+    static styles: import("lit").CSSResult;
+    protected get _focusableElement(): HTMLButtonElement | null;
+    /** Visual variant. */
+    accessor variant: ButtonVariant;
+    /** Size scale — controls padding and font-size. */
+    accessor size: ButtonSize;
+    /** Icon placement: 'start' (before label) or 'end' (after label). CSS order handles it — no DOM changes on toggle. */
+    accessor iconPlacement: ButtonIconPlacement;
+    /** When true, stretches the button to fill the width of its container. */
+    accessor fullWidth: boolean;
+    /** When true, styles the button for an icon-only layout (typically square with equal padding). */
+    accessor iconOnly: boolean;
+    /** Disables the button. */
+    accessor disabled: boolean;
+    private accessor _hasIcon;
+    updated(changed: PropertyValues): void;
+    private onIconSlotChange;
+    private onClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-button': ViButton;
+    }
+}
+export {};
+//# sourceMappingURL=vi-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vi-button.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/button/vi-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9F;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,QAAS,SAAQ,aAAyB;IACrD,OAAgB,MAAM,0BAAmC;IAEzD,cAAuB,iBAAiB,IAAI,iBAAiB,GAAG,IAAI,CAEnE;IAED,sBAAsB;IACqB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAa;IAEvF,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAQ;IAE5E,sHAAsH;IAC9C,QAAQ,CAAC,aAAa,EAAE,mBAAmB,CAAW;IAE9H,0EAA0E;IACL,QAAQ,CAAC,SAAS,UAAS;IAEhG,kGAAkG;IAC9B,QAAQ,CAAC,QAAQ,UAAS;IAE9F,2BAA2B;IACiB,QAAQ,CAAC,QAAQ,UAAS;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAe/C,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,OAAO;IAON,MAAM,IAAI,cAAc;CAuBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/button/vi-button.js

@@ -1,158 +1,9 @@
 import { unsafeCSS, css, html } from 'lit';
 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';
 
-/**
- * FocusableMixin
- *
- * Applies to all interactive Vi components. Provides:
- *
- *  1. `delegatesFocus: true` on the shadow root — when the host is Tab-focused
- *     or `.focus()` is called on it, the browser routes focus to the inner
- *     native control. Also activates `:focus` and `:focus-within` on the host.
- *
- *  2. A `focus()` override that delegates to `_focusableElement` so callers
- *     can do `myInput.focus()` and it Just Works without knowing shadow internals.
- *
- * ─────────────────────────────────────────────────────────────────────────
- * ARCHITECTURE: host is the tab stop
- * ─────────────────────────────────────────────────────────────────────────
- *
- *   Host:          tabIndex = 0   ← consumer-visible tab stop
- *   Inner element: tabindex="-1" ← NOT directly in tab order; only reachable
- *                                   via host delegation
- *   delegatesFocus: true          ← routes host focus → inner element
- *
- * This means:
- *   - Tab → lands on host → delegatesFocus → inner element gets visual focus
- *   - `:host(:focus)` and `:host(:focus-within)` both work correctly
- *   - `element.focus()` calls our override → inner element focused explicitly
- *   - Consumer sets tabindex="-1" on host to remove from tab order entirely
- *   - Consumer sets tabindex="2" for explicit positioning — just works
- *
- * CRITICAL: Every component using this mixin MUST set tabindex="-1" on its
- * inner native element in render() to prevent double-tab. Failing to do so
- * creates two tab stops for a single logical control.
- *
- * DISABLED: When the `disabled` prop changes, the component MUST sync the
- * host's tabIndex:
- *
- *   override updated(changed: PropertyValues) {
- *     super.updated(changed);
- *     if (changed.has('disabled')) {
- *       this.tabIndex = this.disabled ? -1 : (previous tabIndex value or 0);
- *     }
- *   }
- *
- * Usage:
- *   class ViInput extends FocusableMixin(ViElement) {
- *     protected override get _focusableElement() {
- *       return this.shadowRoot?.querySelector('input') ?? null;
- *     }
- *   }
- */ function FocusableMixin(Base) {
-    class FocusableMixinClass extends Base {
-        /**
-     * Spread existing shadow root options so we don't clobber `mode: 'open'`
-     * or any other options already set by a base class or another mixin.
-     * `override` is omitted: TypeScript cannot verify the static side of the
-     * generic `Base` constructor has `shadowRootOptions`, so we re-declare
-     * without override (the property is still inherited at runtime).
-     */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        static shadowRootOptions = {
-            ...Base.shadowRootOptions,
-            delegatesFocus: true
-        };
-        /**
-     * The tabIndex to restore when transitioning from disabled → enabled.
-     * Snapshotted in connectedCallback and updated whenever we save before
-     * disabling, so we can honour custom consumer tabindex values (e.g. 2)
-     * rather than blindly restoring to 0.
-     */ _savedTabIndex = 0;
-        connectedCallback() {
-            super.connectedCallback();
-            // The host is the user-visible tab stop. Custom elements are NOT in the
-            // tab order by default (tabIndex = -1), so we must explicitly opt in.
-            // Only set the default if the consumer hasn't already specified a value.
-            // `tabIndex` is a reflected IDL attribute — both attribute sets and
-            // programmatic sets (`element.tabIndex = 2`) always reflect to the
-            // `tabindex` attribute, so `hasAttribute` is a complete guard for both.
-            //   tabindex="-1"  → remove from tab order entirely (e.g. inside a focus trap)
-            //   tabindex="0"   → participate (same as our default)
-            //   tabindex="2"   → explicit ordering position
-            // Note: connectedCallback is used (not constructor) to avoid the
-            // "DOMException: The result must not have attributes" error during upgrade.
-            if (!this.hasAttribute('tabindex')) {
-                this.tabIndex = 0;
-            }
-            // Snapshot the current effective tabIndex so _setHostFocusable(true)
-            // can restore it rather than blindly resetting to 0.
-            this._savedTabIndex = this.tabIndex;
-        }
-        /**
-     * Centralizes the tabIndex policy for enabled/disabled state.
-     *
-     * enabled=true  → restore the tabIndex that was in effect before disabling
-     *                  (respects consumer tabindex="2", tabindex="-1", etc.)
-     * enabled=false → tabIndex = -1 (host skipped by Tab; whole component unreachable)
-     *
-     * The pre-disable tabIndex is saved so that a consumer who set tabindex="2"
-     * gets back tabindex="2" after re-enabling, not a hardcoded 0.
-     *
-     * All components with a `disabled` prop MUST call this in `updated()`:
-     *
-     *   if (changed.has('disabled')) this._setHostFocusable(!this.disabled);
-     */ _setHostFocusable(enabled) {
-            if (enabled) {
-                this.tabIndex = this._savedTabIndex;
-            } else {
-                // Only snapshot when we are actually in an enabled state; if this is
-                // called repeatedly while disabled (tabIndex already -1) we must not
-                // overwrite the real saved value with -1.
-                if (this.tabIndex !== -1) {
-                    this._savedTabIndex = this.tabIndex;
-                }
-                this.tabIndex = -1;
-            }
-        }
-        /**
-     * Subclasses MUST override this getter to return the specific inner element
-     * that should receive programmatic focus.
-     * Returning `null` before first render is safe — `focus()` no-ops.
-     */ get _focusableElement() {
-            return null;
-        }
-        /**
-     * Public focus() override.
-     *
-     * Explicitly delegates to `_focusableElement` when available. While `delegatesFocus: true`
-     * handles click routing, relying solely on native programmatic focus hands control
-     * to the browser, which blindly targets the *first* focusable element in
-     * shadow DOM order — not necessarily the intended one.
-     *
-     * Example: a vi-input might render a "Clear" <button> before the <input>
-     * in the DOM. Native focus would land on the clear button; this explicit
-     * call guarantees focus lands on the <input> regardless of DOM order.
-     * 
-     * If called before the first render (when `_focusableElement` is null), 
-     * it safely falls back to `super.focus()`.
-     */ focus(options) {
-            const target = this._focusableElement;
-            if (target) {
-                target.focus(options);
-            } else {
-                // Fallback to native behavior if called before first render
-                super.focus(options);
-            }
-        }
-    }
-    // Cast required: TypeScript cannot reconcile LitElement's private fields
-    // with the anonymous class return type. `as unknown as` is the standard
-    // pattern recommended by both the TypeScript and Lit teams for mixins.
-    return FocusableMixinClass;
-}
-
-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}}: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)}@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-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}";
 
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -686,7 +537,7 @@ new class extends _identity {
         class="button"
         part="button"
         type="button"
-        tabindex="-1"
+        tabindex="0"
         ?disabled=${disabled}
         @click=${onClick}
       >

package/focusable-mixin-CmxOyPX5.js

@@ -0,0 +1,155 @@
+/**
+ * FocusableMixin
+ *
+ * Applies to all interactive Vi components. Provides:
+ *
+ *  1. `delegatesFocus: true` on the shadow root — when the host is Tab-focused
+ *     or `.focus()` is called on it, the browser routes focus to the inner
+ *     native control. Also activates `:focus` and `:focus-within` on the host.
+ *
+ *  2. A `focus()` override that delegates to `_focusableElement` so callers
+ *     can do `myInput.focus()` and it Just Works without knowing shadow internals.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * ARCHITECTURE: host is the tab stop
+ * ─────────────────────────────────────────────────────────────────────────
+ *
+ *   Host:          tabIndex = 0   ← consumer-visible light-DOM tab stop
+ *   Inner element: tabindex="0"   ← participates in shadow root's own tab
+ *                                   order so :focus-visible fires reliably
+ *   delegatesFocus: true          ← routes host focus → inner element
+ *
+ * This means:
+ *   - Tab → lands on host → delegatesFocus → inner element gets visual focus
+ *   - `:host(:focus)` and `:host(:focus-within)` both activate correctly
+ *   - `:focus-visible` on the inner element fires reliably for all browsers
+ *     (keyboard vs mouse distinction works without browser-specific hacks)
+ *   - `element.focus()` calls our override → inner element focused explicitly
+ *   - Consumer sets tabindex="-1" on host to remove from tab order entirely
+ *   - Consumer sets tabindex="2" for explicit ordering — just works
+ *
+ * NOTE: tabindex="0" on the inner element does NOT create a second light-DOM
+ * tab stop. Shadow DOM children only participate in the shadow root's local
+ * tab order; the host remains the single entry point from the outer document.
+ * The difference from tabindex="-1" is that :focus-visible propagation through
+ * delegatesFocus is more consistent when the delegated target is a proper
+ * sequential-focus participant.
+ *
+ * DISABLED: When the `disabled` prop changes, the component MUST sync the
+ * host's tabIndex:
+ *
+ *   override updated(changed: PropertyValues) {
+ *     super.updated(changed);
+ *     if (changed.has('disabled')) {
+ *       this.tabIndex = this.disabled ? -1 : (previous tabIndex value or 0);
+ *     }
+ *   }
+ *
+ * Usage:
+ *   class ViInput extends FocusableMixin(ViElement) {
+ *     protected override get _focusableElement() {
+ *       return this.shadowRoot?.querySelector('input') ?? null;
+ *     }
+ *   }
+ */ function FocusableMixin(Base) {
+    class FocusableMixinClass extends Base {
+        /**
+     * Spread existing shadow root options so we don't clobber `mode: 'open'`
+     * or any other options already set by a base class or another mixin.
+     * `override` is omitted: TypeScript cannot verify the static side of the
+     * generic `Base` constructor has `shadowRootOptions`, so we re-declare
+     * without override (the property is still inherited at runtime).
+     */ static shadowRootOptions = {
+            ...Base.shadowRootOptions,
+            delegatesFocus: true
+        };
+        /**
+     * The tabIndex to restore when transitioning from disabled → enabled.
+     * Snapshotted in connectedCallback and updated whenever we save before
+     * disabling, so we can honour custom consumer tabindex values (e.g. 2)
+     * rather than blindly restoring to 0.
+     */ _savedTabIndex = 0;
+        connectedCallback() {
+            super.connectedCallback();
+            // The host is the user-visible tab stop. Custom elements are NOT in the
+            // tab order by default (tabIndex = -1), so we must explicitly opt in.
+            // Only set the default if the consumer hasn't already specified a value.
+            // `tabIndex` is a reflected IDL attribute — both attribute sets and
+            // programmatic sets (`element.tabIndex = 2`) always reflect to the
+            // `tabindex` attribute, so `hasAttribute` is a complete guard for both.
+            //   tabindex="-1"  → remove from tab order entirely (e.g. inside a focus trap)
+            //   tabindex="0"   → participate (same as our default)
+            //   tabindex="2"   → explicit ordering position
+            // Note: connectedCallback is used (not constructor) to avoid the
+            // "DOMException: The result must not have attributes" error during upgrade.
+            if (!this.hasAttribute('tabindex')) {
+                this.tabIndex = 0;
+            }
+            // Snapshot the current effective tabIndex so _setHostFocusable(true)
+            // can restore it rather than blindly resetting to 0.
+            this._savedTabIndex = this.tabIndex;
+        }
+        /**
+     * Centralizes the tabIndex policy for enabled/disabled state.
+     *
+     * enabled=true  → restore the tabIndex that was in effect before disabling
+     *                  (respects consumer tabindex="2", tabindex="-1", etc.)
+     * enabled=false → tabIndex = -1 (host skipped by Tab; whole component unreachable)
+     *
+     * The pre-disable tabIndex is saved so that a consumer who set tabindex="2"
+     * gets back tabindex="2" after re-enabling, not a hardcoded 0.
+     *
+     * All components with a `disabled` prop MUST call this in `updated()`:
+     *
+     *   if (changed.has('disabled')) this._setHostFocusable(!this.disabled);
+     */ _setHostFocusable(enabled) {
+            if (enabled) {
+                this.tabIndex = this._savedTabIndex;
+            } else {
+                // Only snapshot when we are actually in an enabled state; if this is
+                // called repeatedly while disabled (tabIndex already -1) we must not
+                // overwrite the real saved value with -1.
+                if (this.tabIndex !== -1) {
+                    this._savedTabIndex = this.tabIndex;
+                }
+                this.tabIndex = -1;
+            }
+        }
+        /**
+     * Subclasses MUST override this getter to return the specific inner element
+     * that should receive programmatic focus.
+     * Returning `null` before first render is safe — `focus()` no-ops.
+     */ get _focusableElement() {
+            return null;
+        }
+        /**
+     * Public focus() override.
+     *
+     * Explicitly delegates to `_focusableElement` when available. While `delegatesFocus: true`
+     * handles click routing, relying solely on native programmatic focus hands control
+     * to the browser, which blindly targets the *first* focusable element in
+     * shadow DOM order — not necessarily the intended one.
+     *
+     * Example: a vi-input might render a "Clear" <button> before the <input>
+     * in the DOM. Native focus would land on the clear button; this explicit
+     * call guarantees focus lands on the <input> regardless of DOM order.
+     * 
+     * If called before the first render (when `_focusableElement` is null), 
+     * it safely falls back to `super.focus()`.
+     */ focus(options) {
+            const target = this._focusableElement;
+            if (target) {
+                target.focus(options);
+            } else {
+                // Fallback to native behavior if called before first render
+                super.focus(options);
+            }
+        }
+    }
+    // Cast required: TypeScript cannot reconcile LitElement's private fields
+    // with the anonymous class return type. `as unknown as` is the standard
+    // pattern recommended by both the TypeScript and Lit teams for mixins.
+    return FocusableMixinClass;
+}
+
+export { FocusableMixin as F };

package/icons/registry.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Icon Registry
+ *
+ * A Map-based store for SvgIconDef objects sourced from @vialiq/icons.
+ * Icons must be explicitly registered before <vi-icon> can render them.
+ * Only the icons you register end up in your bundle — full tree-shaking.
+ *
+ * Usage:
+ *   import { registerIcons } from '@vialiq/web-components';
+ *   import { checkIcon } from '@vialiq/icons/check';
+ *
+ *   registerIcons([checkIcon]);
+ *   // <vi-icon name="check"></vi-icon>
+ */
+export interface SvgIconDef {
+    name: string;
+    data: string;
+}
+/**
+ * Register one or more icons. Call this before using <vi-icon>.
+ *
+ * @param icons - Icon definitions from @vialiq/icons (trusted source only).
+ */
+export declare function registerIcons(icons: SvgIconDef | SvgIconDef[]): void;
+/**
+ * Look up a registered icon by name.
+ */
+export declare function getIcon(name: string): SvgIconDef | undefined;
+//# sourceMappingURL=registry.d.ts.map

package/icons/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/icons/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAyBD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,CAMpE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAE5D"}

package/icons/vi-icon.d.ts

@@ -0,0 +1,47 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+/**
+ * vi-icon
+ *
+ * Renders a named SVG icon from the registry. Icons must be registered first
+ * by importing their definition from @vialiq/icons and calling registerIcons():
+ *
+ *   import { checkIcon } from '@vialiq/icons/check';
+ *   import { registerIcons } from '@vialiq/web-components';
+ *   registerIcons([checkIcon]);
+ *   // <vi-icon name="check"></vi-icon>
+ *
+ * @element vi-icon
+ * @attr name  - The icon name to render (must be registered)
+ * @attr size  - Width/height in px (default: 24)
+ * @attr label - Accessible label; omit for decorative icons
+ */
+export declare class ViIcon extends ViElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The registered icon name to render.
+     * @attr
+     */
+    accessor name: string;
+    /**
+     * Size in pixels applied as a CSS custom property.
+     * @attr
+     */
+    accessor size: number;
+    /**
+     * Accessible label. When set the SVG gets role="img" + aria-label.
+     * When omitted the icon is treated as decorative (aria-hidden).
+     * @attr
+     */
+    accessor label: string;
+    private accessor _icon;
+    updated(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-icon': ViIcon;
+    }
+}
+//# sourceMappingURL=vi-icon.d.ts.map

package/icons/vi-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vi-icon.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/icons/vi-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,0BAkBpB;IAEF;;;OAGG;IACwC,QAAQ,CAAC,IAAI,SAAM;IAE9D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,SAAM;IAE/C;;;;OAIG;IACyB,QAAQ,CAAC,KAAK,SAAM;IAEvC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqC;IAE3D,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAiBhD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAQrD,MAAM,IAAI,cAAc;CAoBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/index.d.ts

@@ -0,0 +1,11 @@
+export { ViElement } from './base/vi-element.js';
+export type { ViSize, ViStatus } from './base/vi-element.js';
+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 { ViIcon } from './icons/vi-icon.js';
+export { registerIcons, getIcon } from './icons/registry.js';
+export type { SvgIconDef } from './icons/registry.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,4 +1,5 @@
 export { V as ViElement } from './vi-element-C6GfDPs3.js';
 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';

package/input/index.d.ts

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

package/input/index.d.ts.map

@@ -0,0 +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"}

package/input/vi-input.d.ts

@@ -0,0 +1,89 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { type ControlStatus } from '../base/validity-mixin.js';
+import { ViElement } from '../base/vi-element.js';
+/**
+ * Supported input types.
+ * Constrained to the subset that renders as a single-line text field —
+ * multi-line (textarea) and specialised pickers (date, color, file) are
+ * separate components.
+ */
+export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+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
+ * Form-associated single-line text input using Flux UI token fallbacks.
+ *
+ * @element vi-input
+ *
+ * @attr {InputType} type         - Input type (default: text)
+ * @attr {string}    placeholder  - Native input placeholder
+ * @attr {string}    name         - Form field name
+ * @attr {string}    value        - Current value
+ * @attr {boolean}   disabled     - Disables the input (reflected)
+ * @attr {boolean}   readonly     - Makes the input read-only (reflected)
+ * @attr {boolean}   required     - Marks the field as required (reflected)
+ * @attr {ControlStatus} status     - Visual state: 'default' | 'valid' | 'invalid' (reflected)
+ *
+ * @slot helper - Helper text shown below the input.
+ *
+ * @fires {CustomEvent<{value:string}>} vialiq-input  - Every keystroke. Bubbles, composed.
+ * @fires {CustomEvent<{value:string}>} vialiq-change - Value committed (blur). Bubbles, composed.
+ * @fires {Event}                       invalid        - Cancelable; fires when checkValidity() fails.
+ *
+ * @csspart field      - The outer `<div>` wrapper
+ * @csspart input      - The native `<input>` element
+ * @csspart helper     - The persistent helper slot wrapper
+ * @csspart validation - The validation message span (error or success)
+ *
+ * @cssprop [--vi-input-border-color]              - Border colour (default: `$color-border` token)
+ * @cssprop [--vi-input-focus-ring-color]          - Focus ring colour (default: `$color-primary`)
+ * @cssprop [--vi-input-background-color]          - Background (default: `$color-background`)
+ * @cssprop [--vi-input-text-color]                - Text colour (default: `$color-foreground`)
+ * @cssprop [--vi-input-placeholder-color]         - Placeholder colour (default: `$color-grey-400`)
+ * @cssprop [--vi-input-helper-color]              - Helper text colour (default: `$color-grey-500`)
+ * @cssprop [--vi-input-error-color]               - Error text colour (default: `$color-error`)
+ * @cssprop [--vi-input-success-color]             - Success message colour (default: `$color-success`)
+ * @cssprop [--vi-input-shape-border-radius]       - Border radius (default: `$border-radius-md`)
+ * @cssprop [--vi-input-spacing-padding-block]     - Vertical padding (default: `$spacing-xs`)
+ * @cssprop [--vi-input-spacing-padding-inline]    - Horizontal padding (default: `$spacing-sm`)
+ * @cssprop [--vi-input-typography-font-size]      - Font size (default: `$font-size-base`)
+ */
+export declare class ViInput extends ViInput_base {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    protected readonly _internals: ElementInternals;
+    protected get _focusableElement(): HTMLInputElement | null;
+    accessor status: ControlStatus;
+    accessor required: boolean;
+    accessor validityMessage: string;
+    /** Input type. Controls the keyboard/picker on mobile and browser validation hints. */
+    accessor type: InputType;
+    /** Native input placeholder text. */
+    accessor placeholder: string;
+    /** Form field name. Submitted with the form when set. */
+    accessor name: string;
+    /** Current value. Synced to ElementInternals for form participation. */
+    accessor value: string;
+    /** When true, disables the input and removes it from the tab order. */
+    accessor disabled: boolean;
+    /** When true, the value cannot be edited but is still submitted. */
+    accessor readonly: boolean;
+    protected _testValidity(): Partial<ValidityStateFlags>;
+    updated(changed: PropertyValues): void;
+    /** Resets value and validation state when the associated form resets. */
+    formResetCallback(): void;
+    /** Keeps disabled in sync when a containing fieldset or form is disabled. */
+    formDisabledCallback(disabled: boolean): void;
+    private _onInput;
+    private _onChange;
+    private get _helperContent();
+    private get _validationMessage();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-input': ViInput;
+    }
+}
+export {};
+//# sourceMappingURL=vi-input.d.ts.map

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

@@ -0,0 +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"}