@vialiq/web-components 0.4.0 → 0.6.0

package/radio/vi-radio.d.ts

@@ -0,0 +1,47 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+export type RadioSize = 'xs' | 'sm' | 'md' | 'lg';
+declare const ViRadio_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface);
+/**
+ * vi-radio
+ * Individual radio option within a vi-radio-group.
+ *
+ * NOTE: For correct roving tabindex, form submission, and mutual exclusivity,
+ * vi-radio should be used inside a vi-radio-group. Standalone usage is supported (e.g. for
+ * custom layout structures), but keyboard navigation and form association must be handled manually.
+ *
+ * @element vi-radio
+ * @slot - Label text/content.
+ *
+ * @csspart circle - The visual outer circle wrapper.
+ * @csspart dot - The visual inner dot indicator.
+ * @csspart label - The label text span.
+ */
+export declare class ViRadio extends ViRadio_base {
+    static styles: import("lit").CSSResult;
+    protected get _focusableElement(): HTMLInputElement | null;
+    /** The value this radio represents. */
+    accessor value: string;
+    /** Selected state (managed by vi-radio-group). */
+    accessor checked: boolean;
+    /** Disabled state. */
+    accessor disabled: boolean;
+    /** Shared name for the radio group (synced by parent). */
+    accessor name: string;
+    /** Size scale. */
+    accessor size: RadioSize;
+    private get _group();
+    /** Computes the effective disabled state based on local state and parent group state. */
+    private get _isEffectiveDisabled();
+    updated(changed: PropertyValues): void;
+    protected _setHostFocusable(enabled: boolean): void;
+    private _onChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-radio': ViRadio;
+    }
+}
+export {};
+//# sourceMappingURL=vi-radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vi-radio.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/radio/vi-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAKlD;;;;;;;;;;;;;;GAcG;AACH,qBACa,OAAQ,SAAQ,YAAyB;IACpD,OAAgB,MAAM,0BAEpB;IAEF,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAED,uCAAuC;IACX,QAAQ,CAAC,KAAK,SAAM;IAEhD,kDAAkD;IACN,QAAQ,CAAC,OAAO,UAAS;IAErE,sBAAsB;IACsB,QAAQ,CAAC,QAAQ,UAAS;IAEtE,0DAA0D;IAC9B,QAAQ,CAAC,IAAI,SAAM;IAE/C,kBAAkB;IACyB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,OAAO,KAAK,MAAM,GAEjB;IAED,yFAAyF;IACzF,OAAO,KAAK,oBAAoB,GAE/B;IAEQ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;cAe5B,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAQ5D,OAAO,CAAC,SAAS;IAaR,MAAM,IAAI,cAAc;CAwBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/radio/vi-radio.js

@@ -0,0 +1,538 @@
+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 ViElement } from '../vi-element-C6GfDPs3.js';
+
+const radioStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-color-foreground, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-helper, #9e9e9e))}.radio-group-validation{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-validation-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-validation-color, var(--vi-text-helper, #9e9e9e));margin-block-start:var(--vi-radio-group-validation-margin-top, var(--vi-spacing-xs, 8px))}.radio-group-validation.radio-group-validation--invalid{color:var(--vi-radio-group-error-color, var(--vi-color-error, #ef4444))}.radio-group-validation.radio-group-validation--valid{color:var(--vi-radio-group-success-color, var(--vi-color-success, #489167))}.radio-wrapper{display:inline-flex;align-items:center;gap:var(--vi-radio-label-gap, 8px);cursor:pointer;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-label-font-size, var(--vi-font-size-base, 16px));line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-radio-label-color, var(--vi-color-foreground, #111827));position:relative;-webkit-user-select:none;user-select:none}.radio-input{position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}.radio-circle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--vi-radio-size, 18px);height:var(--vi-radio-size, 18px);border:var(--vi-border-width-base, 2px) solid var(--vi-radio-border-color, var(--vi-border-04, #bdbdbd));border-radius:50%;background-color:var(--vi-radio-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease;flex-shrink:0}.radio-dot{box-sizing:border-box;width:var(--vi-radio-dot-size, 8px);height:var(--vi-radio-dot-size, 8px);border-radius:50%;background-color:var(--vi-radio-dot-color, var(--vi-color-primary, #3676d0));transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s ease}.radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked, var(--vi-color-primary, #3676d0))}.radio-input:checked+.radio-circle .radio-dot{transform:scale(1);opacity:1}.radio-input:focus-visible+.radio-circle{outline:var(--vi-border-width-base, 2px) solid var(--vi-radio-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:2px;box-shadow:0 0 0 3px var(--vi-radio-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-circle{border-color:var(--vi-radio-border-color-hover, var(--vi-border-inverse-03, #757575))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked-hover, var(--vi-color-primary, #3676d0))}.radio-wrapper--disabled{cursor:not-allowed;opacity:var(--vi-radio-disabled-opacity, .5)}.radio-wrapper--disabled .radio-circle{background-color:var(--vi-layer-disabled, #f3f4f6);border-color:var(--vi-border-02, #eeeeee)}.radio-wrapper--disabled .radio-dot{background-color:var(--vi-text-disabled, #9e9e9e)}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}}:host{display:inline-block;outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}::slotted(*){font-family:inherit;font-size:inherit;color:inherit}:host([size=xs]){--vi-radio-size: 12px;--vi-radio-dot-size: 5px;--vi-radio-label-gap: 4px;--vi-radio-label-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-radio-size: 14px;--vi-radio-dot-size: 6px;--vi-radio-label-gap: 6px;--vi-radio-label-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-radio-size: 22px;--vi-radio-dot-size: 10px;--vi-radio-label-gap: 10px;--vi-radio-label-font-size: var(--vi-font-size-lg, 18px)}";
+
+function applyDecs2203RFactory() {
+    function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function addInitializer(initializer) {
+            assertNotFinished(decoratorFinishedRef, "addInitializer");
+            assertCallable(initializer, "An initializer");
+            initializers.push(initializer);
+        };
+    }
+    function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
+        var kindStr;
+        switch(kind){
+            case 1:
+                kindStr = "accessor";
+                break;
+            case 2:
+                kindStr = "method";
+                break;
+            case 3:
+                kindStr = "getter";
+                break;
+            case 4:
+                kindStr = "setter";
+                break;
+            default:
+                kindStr = "field";
+        }
+        var ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate,
+            metadata: metadata
+        };
+        var decoratorFinishedRef = {
+            v: false
+        };
+        ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
+        var get, set;
+        if (kind === 0) {
+            if (isPrivate) {
+                get = desc.get;
+                set = desc.set;
+            } else {
+                get = function() {
+                    return this[name];
+                };
+                set = function(v) {
+                    this[name] = v;
+                };
+            }
+        } else if (kind === 2) {
+            get = function() {
+                return desc.value;
+            };
+        } else {
+            if (kind === 1 || kind === 3) {
+                get = function() {
+                    return desc.get.call(this);
+                };
+            }
+            if (kind === 1 || kind === 4) {
+                set = function(v) {
+                    desc.set.call(this, v);
+                };
+            }
+        }
+        ctx.access = get && set ? {
+            get: get,
+            set: set
+        } : get ? {
+            get: get
+        } : {
+            set: set
+        };
+        try {
+            return dec(value, ctx);
+        } finally{
+            decoratorFinishedRef.v = true;
+        }
+    }
+    function assertNotFinished(decoratorFinishedRef, fnName) {
+        if (decoratorFinishedRef.v) {
+            throw new Error("attempted to call " + fnName + " after decoration was finished");
+        }
+    }
+    function assertCallable(fn, hint) {
+        if (typeof fn !== "function") {
+            throw new TypeError(hint + " must be a function");
+        }
+    }
+    function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (kind === 1) {
+            if (type !== "object" || value === null) {
+                throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+            }
+            if (value.get !== undefined) {
+                assertCallable(value.get, "accessor.get");
+            }
+            if (value.set !== undefined) {
+                assertCallable(value.set, "accessor.set");
+            }
+            if (value.init !== undefined) {
+                assertCallable(value.init, "accessor.init");
+            }
+        } else if (type !== "function") {
+            var hint;
+            if (kind === 0) {
+                hint = "field";
+            } else if (kind === 10) {
+                hint = "class";
+            } else {
+                hint = "method";
+            }
+            throw new TypeError(hint + " decorators must return a function or void 0");
+        }
+    }
+    function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
+        var decs = decInfo[0];
+        var desc, init, value;
+        if (isPrivate) {
+            if (kind === 0 || kind === 1) {
+                desc = {
+                    get: decInfo[3],
+                    set: decInfo[4]
+                };
+            } else if (kind === 3) {
+                desc = {
+                    get: decInfo[3]
+                };
+            } else if (kind === 4) {
+                desc = {
+                    set: decInfo[3]
+                };
+            } else {
+                desc = {
+                    value: decInfo[3]
+                };
+            }
+        } else if (kind !== 0) {
+            desc = Object.getOwnPropertyDescriptor(base, name);
+        }
+        if (kind === 1) {
+            value = {
+                get: desc.get,
+                set: desc.set
+            };
+        } else if (kind === 2) {
+            value = desc.value;
+        } else if (kind === 3) {
+            value = desc.get;
+        } else if (kind === 4) {
+            value = desc.set;
+        }
+        var newValue, get, set;
+        if (typeof decs === "function") {
+            newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+            if (newValue !== void 0) {
+                assertValidReturnValue(kind, newValue);
+                if (kind === 0) {
+                    init = newValue;
+                } else if (kind === 1) {
+                    init = newValue.init;
+                    get = newValue.get || value.get;
+                    set = newValue.set || value.set;
+                    value = {
+                        get: get,
+                        set: set
+                    };
+                } else {
+                    value = newValue;
+                }
+            }
+        } else {
+            for(var i = decs.length - 1; i >= 0; i--){
+                var dec = decs[i];
+                newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+                if (newValue !== void 0) {
+                    assertValidReturnValue(kind, newValue);
+                    var newInit;
+                    if (kind === 0) {
+                        newInit = newValue;
+                    } else if (kind === 1) {
+                        newInit = newValue.init;
+                        get = newValue.get || value.get;
+                        set = newValue.set || value.set;
+                        value = {
+                            get: get,
+                            set: set
+                        };
+                    } else {
+                        value = newValue;
+                    }
+                    if (newInit !== void 0) {
+                        if (init === void 0) {
+                            init = newInit;
+                        } else if (typeof init === "function") {
+                            init = [
+                                init,
+                                newInit
+                            ];
+                        } else {
+                            init.push(newInit);
+                        }
+                    }
+                }
+            }
+        }
+        if (kind === 0 || kind === 1) {
+            if (init === void 0) {
+                init = function(instance, init) {
+                    return init;
+                };
+            } else if (typeof init !== "function") {
+                var ownInitializers = init;
+                init = function(instance, init) {
+                    var value = init;
+                    for(var i = 0; i < ownInitializers.length; i++){
+                        value = ownInitializers[i].call(instance, value);
+                    }
+                    return value;
+                };
+            } else {
+                var originalInitializer = init;
+                init = function(instance, init) {
+                    return originalInitializer.call(instance, init);
+                };
+            }
+            ret.push(init);
+        }
+        if (kind !== 0) {
+            if (kind === 1) {
+                desc.get = value.get;
+                desc.set = value.set;
+            } else if (kind === 2) {
+                desc.value = value;
+            } else if (kind === 3) {
+                desc.get = value;
+            } else if (kind === 4) {
+                desc.set = value;
+            }
+            if (isPrivate) {
+                if (kind === 1) {
+                    ret.push(function(instance, args) {
+                        return value.get.call(instance, args);
+                    });
+                    ret.push(function(instance, args) {
+                        return value.set.call(instance, args);
+                    });
+                } else if (kind === 2) {
+                    ret.push(value);
+                } else {
+                    ret.push(function(instance, args) {
+                        return value.call(instance, args);
+                    });
+                }
+            } else {
+                Object.defineProperty(base, name, desc);
+            }
+        }
+    }
+    function applyMemberDecs(Class, decInfos, metadata) {
+        var ret = [];
+        var protoInitializers;
+        var staticInitializers;
+        var existingProtoNonFields = new Map();
+        var existingStaticNonFields = new Map();
+        for(var i = 0; i < decInfos.length; i++){
+            var decInfo = decInfos[i];
+            if (!Array.isArray(decInfo)) continue;
+            var kind = decInfo[1];
+            var name = decInfo[2];
+            var isPrivate = decInfo.length > 3;
+            var isStatic = kind >= 5;
+            var base;
+            var initializers;
+            if (isStatic) {
+                base = Class;
+                kind = kind - 5;
+                staticInitializers = staticInitializers || [];
+                initializers = staticInitializers;
+            } else {
+                base = Class.prototype;
+                protoInitializers = protoInitializers || [];
+                initializers = protoInitializers;
+            }
+            if (kind !== 0 && !isPrivate) {
+                var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
+                var existingKind = existingNonFields.get(name) || 0;
+                if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
+                    throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+                } else if (!existingKind && kind > 2) {
+                    existingNonFields.set(name, kind);
+                } else {
+                    existingNonFields.set(name, true);
+                }
+            }
+            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
+        }
+        pushInitializers(ret, protoInitializers);
+        pushInitializers(ret, staticInitializers);
+        return ret;
+    }
+    function pushInitializers(ret, initializers) {
+        if (initializers) {
+            ret.push(function(instance) {
+                for(var i = 0; i < initializers.length; i++){
+                    initializers[i].call(instance);
+                }
+                return instance;
+            });
+        }
+    }
+    function applyClassDecs(targetClass, classDecs, metadata) {
+        if (classDecs.length > 0) {
+            var initializers = [];
+            var newClass = targetClass;
+            var name = targetClass.name;
+            for(var i = classDecs.length - 1; i >= 0; i--){
+                var decoratorFinishedRef = {
+                    v: false
+                };
+                try {
+                    var nextNewClass = classDecs[i](newClass, {
+                        kind: "class",
+                        name: name,
+                        addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
+                        metadata
+                    });
+                } finally{
+                    decoratorFinishedRef.v = true;
+                }
+                if (nextNewClass !== undefined) {
+                    assertValidReturnValue(10, nextNewClass);
+                    newClass = nextNewClass;
+                }
+            }
+            return [
+                defineMetadata(newClass, metadata),
+                function() {
+                    for(var i = 0; i < initializers.length; i++){
+                        initializers[i].call(newClass);
+                    }
+                }
+            ];
+        }
+    }
+    function defineMetadata(Class, metadata) {
+        return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
+            configurable: true,
+            enumerable: true,
+            value: metadata
+        });
+    }
+    return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
+        if (parentClass !== void 0) {
+            var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
+        }
+        var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
+        var e = applyMemberDecs(targetClass, memberDecs, metadata);
+        if (!classDecs.length) defineMetadata(targetClass, metadata);
+        return {
+            e: e,
+            get c () {
+                return applyClassDecs(targetClass, classDecs, metadata);
+            }
+        };
+    };
+}
+function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
+}
+function _identity(x) {
+    return x;
+}
+var _dec, _initClass, _FocusableMixin, _dec1, _dec2, _dec3, _dec4, _dec5, /** The value this radio represents. */ _init_value, /** Selected state (managed by vi-radio-group). */ _init_checked, /** Disabled state. */ _init_disabled, /** Shared name for the radio group (synced by parent). */ _init_name, /** Size scale. */ _init_size, _initProto;
+let _ViRadio;
+_dec = customElement('vi-radio'), _dec1 = property({
+    type: String
+}), _dec2 = property({
+    type: Boolean,
+    reflect: true
+}), _dec3 = property({
+    type: Boolean,
+    reflect: true
+}), _dec4 = property({
+    type: String
+}), _dec5 = property({
+    type: String,
+    reflect: true
+});
+new class extends _identity {
+    constructor(){
+        super(_ViRadio), _initClass();
+    }
+    static{
+        class ViRadio extends (_FocusableMixin = FocusableMixin(ViElement)) {
+            static{
+                ({ e: [_init_value, _init_checked, _init_disabled, _init_name, _init_size, _initProto], c: [_ViRadio, _initClass] } = _apply_decs_2203_r(this, [
+                    [
+                        _dec1,
+                        1,
+                        "value"
+                    ],
+                    [
+                        _dec2,
+                        1,
+                        "checked"
+                    ],
+                    [
+                        _dec3,
+                        1,
+                        "disabled"
+                    ],
+                    [
+                        _dec4,
+                        1,
+                        "name"
+                    ],
+                    [
+                        _dec5,
+                        1,
+                        "size"
+                    ]
+                ], [
+                    _dec
+                ], _FocusableMixin));
+            }
+            static styles = css`
+    ${unsafeCSS(radioStyles)}
+  `;
+            get _focusableElement() {
+                return this.shadowRoot?.querySelector('input') ?? null;
+            }
+            #___private_value_1 = (_initProto(this), _init_value(this, ''));
+            get value() {
+                return this.#___private_value_1;
+            }
+            set value(_v) {
+                this.#___private_value_1 = _v;
+            }
+            #___private_checked_2 = _init_checked(this, false);
+            get checked() {
+                return this.#___private_checked_2;
+            }
+            set checked(_v) {
+                this.#___private_checked_2 = _v;
+            }
+            #___private_disabled_3 = _init_disabled(this, false);
+            get disabled() {
+                return this.#___private_disabled_3;
+            }
+            set disabled(_v) {
+                this.#___private_disabled_3 = _v;
+            }
+            #___private_name_4 = _init_name(this, '');
+            get name() {
+                return this.#___private_name_4;
+            }
+            set name(_v) {
+                this.#___private_name_4 = _v;
+            }
+            #___private_size_5 = _init_size(this, 'md');
+            get size() {
+                return this.#___private_size_5;
+            }
+            set size(_v) {
+                this.#___private_size_5 = _v;
+            }
+            get _group() {
+                return this.closest('vi-radio-group');
+            }
+            /** Computes the effective disabled state based on local state and parent group state. */ get _isEffectiveDisabled() {
+                return this.disabled || (this._group?.disabled ?? false);
+            }
+            updated(changed) {
+                super.updated(changed);
+                // If standalone, sync the host focusability with disabled state changes
+                if (!this._group && changed.has('disabled')) {
+                    this._setHostFocusable(!this.disabled);
+                }
+                // Sync inner input's tabindex with host's tabIndex (which is managed by parent vi-radio-group or FocusableMixin)
+                const input = this._focusableElement;
+                if (input && input.tabIndex !== this.tabIndex) {
+                    input.tabIndex = this.tabIndex;
+                }
+            }
+            _setHostFocusable(enabled) {
+                if (this._group) {
+                    // No-op: parent vi-radio-group manages host's tabIndex for roving tabindex compliance
+                    return;
+                }
+                super._setHostFocusable(enabled);
+            }
+            _onChange(e) {
+                e.stopPropagation();
+                if (this._isEffectiveDisabled) return;
+                this.checked = true;
+                this.dispatchEvent(new CustomEvent('vi-radio-checked', {
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            render() {
+                const isValDisabled = this._isEffectiveDisabled;
+                return html`
+      <label class="radio-wrapper ${isValDisabled ? 'radio-wrapper--disabled' : ''}">
+        <input
+          type="radio"
+          class="radio-input"
+          tabindex="0"
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${isValDisabled}
+          @change=${this._onChange}
+        />
+        <span part="circle" class="radio-circle" aria-hidden="true">
+          <span part="dot" class="radio-dot"></span>
+        </span>
+        <span part="label" class="radio-label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+            }
+        }
+    }
+}();
+
+export { _ViRadio as ViRadio };

package/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { ViTooltip } from './vi-tooltip.js';
+export type { TooltipPlacement, TooltipTrigger } from './vi-tooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}

package/tooltip/index.js

@@ -0,0 +1 @@
+export { ViTooltip } from './vi-tooltip.js';

package/tooltip/vi-tooltip.d.ts

@@ -0,0 +1,84 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { ViElement } from '../base/vi-element.js';
+import { type ComputePositionConfig } from '@floating-ui/dom';
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+export type TooltipTrigger = 'hover focus' | 'hover' | 'focus' | 'click';
+/**
+ * vi-tooltip
+ * A floating hint providing supplementary info on hover or focus using Floating UI.
+ *
+ * @element vi-tooltip
+ * @attr content - Plain text tooltip content
+ * @attr placement - Preferred position: top | top-start | top-end | bottom | bottom-start | bottom-end | left | right (default: top)
+ * @attr trigger - Events that trigger: hover focus | hover | focus | click (default: hover focus)
+ * @attr delay - Show delay in ms (default: 500)
+ * @attr hide-delay - Hide delay in ms (default: 100)
+ * @attr max-width - Max width of tooltip in px (default: 240)
+ * @attr disabled - Suppress display of tooltip
+ * @attr popper-options - Custom options passed directly to Floating UI's computePosition.
+ *
+ * @slot - Trigger element
+ * @slot content - Rich/interactive tooltip content
+ *
+ * @csspart tooltip - Floating tooltip panel
+ * @csspart content - Tooltip content container
+ * @csspart arrow - Arrow pointer
+ */
+export declare class ViTooltip extends ViElement {
+    static styles: import("lit").CSSResult;
+    accessor content: string;
+    accessor placement: TooltipPlacement;
+    accessor trigger: TooltipTrigger;
+    accessor delay: number;
+    accessor hideDelay: number;
+    accessor maxWidth: number;
+    accessor disabled: boolean;
+    /**
+     * Custom options passed directly to Floating UI's computePosition.
+     * Note: the `popper-options` attribute only supports JSON-serializable values;
+     * middleware functions must be set via the `popperOptions` property.
+    */
+    accessor popperOptions: Partial<ComputePositionConfig>;
+    private accessor _open;
+    private accessor _isInteractive;
+    private accessor _tooltipPanel;
+    private accessor _defaultSlot;
+    private accessor _contentSlot;
+    private _showTimeout?;
+    private _hideTimeout?;
+    private _triggerElement;
+    private _cleanupAutoUpdate?;
+    private _panelId;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    /** Force show the tooltip */
+    show(): void;
+    /** Force hide the tooltip */
+    hide(immediate?: boolean): void;
+    private _openTooltip;
+    private _closeTooltip;
+    private _clearTimeouts;
+    private _handleSlotChange;
+    private _updateTriggerElement;
+    private _hasInteractiveContent;
+    private _updateTriggerAria;
+    private _removeTriggerAria;
+    private _onPointerEnter;
+    private _onPointerLeave;
+    private _onFocusIn;
+    private _onFocusOut;
+    private _onClick;
+    private _onKeyDown;
+    private _handleDocumentClick;
+    private _positionTooltip;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vi-tooltip': ViTooltip;
+    }
+}
+//# sourceMappingURL=vi-tooltip.d.ts.map