@threadlabs/looma 0.1.0

package/dist/esm/ui-radio-group.entry.js

@@ -0,0 +1,132 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const uiRadioGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2)}:host([data-orientation='vertical']){display:inline-grid;justify-items:start}`;
+
+const UIRadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    value = '';
+    name = '';
+    orientation = 'horizontal';
+    disabled = false;
+    required = false;
+    internalValue = '';
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncToRadios() {
+        const radios = this.getRadios();
+        radios.forEach((radio) => {
+            radio.checked =
+                (radio.getAttribute('value') ?? '') === this.internalValue;
+            radio.name = this.name || this.groupId;
+            if (this.disabled) {
+                radio.setAttribute('aria-disabled', 'true');
+                radio.setAttribute('data-disabled', 'true');
+            }
+            else {
+                radio.removeAttribute('aria-disabled');
+                radio.removeAttribute('data-disabled');
+            }
+        });
+        this.updateRovingTabindex();
+    }
+    groupId = `ui-radio-group-${Math.random().toString(36).slice(2, 9)}`;
+    componentDidLoad() {
+        this.syncFromProp();
+        this.syncToRadios();
+        this.host.addEventListener('change', this.onRadioChange);
+        this.host.addEventListener('keydown', this.onKeydown);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('change', this.onRadioChange);
+        this.host.removeEventListener('keydown', this.onKeydown);
+    }
+    componentDidUpdate() {
+        this.syncToRadios();
+    }
+    getRadios() {
+        return Array.from(this.host.querySelectorAll('ui-radio'));
+    }
+    updateRovingTabindex() {
+        const radios = this.getRadios();
+        const currentIndex = radios.findIndex((r) => (r.getAttribute('value') ?? '') === this.internalValue);
+        radios.forEach((r, i) => {
+            const input = r.querySelector('input[type="radio"]');
+            if (input) {
+                input.tabIndex = i === (currentIndex >= 0 ? currentIndex : 0) ? 0 : -1;
+            }
+        });
+    }
+    setValue(newValue, trigger) {
+        const prev = this.internalValue;
+        this.internalValue = newValue;
+        this.syncToRadios();
+        dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev, trigger });
+        dispatchDetail(this.host, 'change', {
+            checked: true,
+            value: newValue,
+            trigger,
+        });
+    }
+    onRadioChange = (e) => {
+        const target = e.target.closest?.('ui-radio');
+        if (!target || target.getRootNode() !== this.host.getRootNode())
+            return;
+        const value = target.getAttribute('value') ?? '';
+        if (value && value !== this.internalValue) {
+            this.setValue(value, eventToTrigger(e));
+        }
+    };
+    onKeydown = (e) => {
+        const radios = this.getRadios();
+        if (radios.length === 0)
+            return;
+        const currentIndex = radios.findIndex((r) => (r.getAttribute('value') ?? '') === this.internalValue);
+        const axis = this.orientation === 'vertical' ? 'vertical' : 'horizontal';
+        const isPrev = axis === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';
+        const isNext = axis === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';
+        if (!isPrev && !isNext)
+            return;
+        e.preventDefault();
+        let nextIndex;
+        if (isNext) {
+            nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, radios.length - 1);
+        }
+        else {
+            nextIndex = currentIndex <= 0 ? radios.length - 1 : currentIndex - 1;
+        }
+        const nextRadio = radios[nextIndex];
+        const nextValue = nextRadio?.getAttribute('value') ?? '';
+        if (nextValue) {
+            this.setValue(nextValue, 'keyboard');
+            nextRadio?.querySelector('input[type="radio"]')?.focus();
+        }
+    };
+    render() {
+        return (h(Host, { key: '5182efff607bcf9add3f0981ce2af3a42bd356b8', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '2889bc2abecddf3e7cf81cd54053bdd608559dfc' })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncFromProp": 0
+            }],
+        "internalValue": [{
+                "syncToRadios": 0
+            }],
+        "name": [{
+                "syncToRadios": 0
+            }],
+        "orientation": [{
+                "syncToRadios": 0
+            }],
+        "disabled": [{
+                "syncToRadios": 0
+            }]
+    }; }
+};
+UIRadioGroup.style = uiRadioGroupCss();
+
+export { UIRadioGroup as ui_radio_group };

package/dist/esm/ui-radio.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const uiRadioCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([data-disabled='true']),:host([aria-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='radio']){accent-color:var(--ui-accent-solid);cursor:pointer}::slotted(input[type='radio']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
+
+const UIRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    checked = false;
+    defaultChecked = false;
+    disabled = false;
+    name = '';
+    required = false;
+    value = 'on';
+    slotRef;
+    syncToInput() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        this.host.dataset.disabled = this.disabled ? 'true' : '';
+        input.checked = this.checked;
+        input.disabled = this.disabled;
+        input.name = this.name;
+        input.required = this.required;
+        input.value = this.value;
+    }
+    componentDidLoad() {
+        if (!this.checked && this.defaultChecked) {
+            this.checked = true;
+        }
+        this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
+        this.syncToInput();
+        const input = this.getInput();
+        input?.addEventListener('change', this.onInputChange);
+    }
+    disconnectedCallback() {
+        const input = this.getInput();
+        input?.removeEventListener('change', this.onInputChange);
+    }
+    componentDidUpdate() {
+        this.syncToInput();
+    }
+    getInput() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+        return nodes.find((el) => el instanceof HTMLInputElement && el.type === 'radio') ?? null;
+    }
+    onInputChange = (e) => {
+        const input = e.target;
+        if (!input || !input.checked)
+            return;
+        dispatchDetail(this.host, 'change', {
+            checked: true,
+            value: this.value,
+            trigger: eventToTrigger(e),
+        });
+    };
+    render() {
+        return (h(Host, { key: '85a3e7f7903c910f6ccbc324ab38bf94ebaf93e0', role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '9117391004b9ed10cb4e819a629f66d32661d7d3', ref: (el) => (this.slotRef = el) })));
+    }
+    static get watchers() { return {
+        "checked": [{
+                "syncToInput": 0
+            }],
+        "disabled": [{
+                "syncToInput": 0
+            }],
+        "name": [{
+                "syncToInput": 0
+            }],
+        "required": [{
+                "syncToInput": 0
+            }],
+        "value": [{
+                "syncToInput": 0
+            }]
+    }; }
+};
+UIRadio.style = uiRadioCss();
+
+export { UIRadio as ui_radio };

package/dist/esm/ui-search-result-row.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, h, H as Host } from './index-CEeiinfk.js';
+
+const uiSearchResultRowCss = () => `:host{display:block}.search-result-row{appearance:none;inline-size:100%;min-block-size:var(--ui-search-result-row-min-height, 56px);margin:0;padding-block:var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));padding-inline:var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));display:flex;align-items:flex-start;gap:var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));background:var(--ui-search-result-row-bg, transparent);border:none;border-block-end:1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));color:inherit;cursor:pointer;text-align:left;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}:host(:last-child) .search-result-row{border-block-end:none}.search-result-row:hover:enabled{background:var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))}:host([selected]) .search-result-row{background:var(     --ui-search-result-row-selected-bg,     var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))   )}.search-result-row:focus-visible{outline:2px solid var(--ui-focus-ring, #2563eb);outline-offset:-2px}.search-result-row:disabled,:host([disabled]) .search-result-row{opacity:0.6;cursor:not-allowed}.search-result-row__leading,.search-result-row__trailing{display:inline-flex;align-items:flex-start;flex-shrink:0}.search-result-row__content{min-inline-size:0;flex:1;display:flex;flex-direction:column}.search-result-row__title,.search-result-row__meta,.search-result-row__excerpt{display:block;min-inline-size:0}[hidden]{display:none}::slotted([slot='title']),::slotted([slot='meta']),::slotted([slot='excerpt']){display:block;margin:0}`;
+
+function slotHasContent(slot) {
+    if (!slot) {
+        return false;
+    }
+    return slot.assignedNodes({ flatten: true }).some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return Boolean(node.textContent?.trim());
+        }
+        return true;
+    });
+}
+const UISearchResultRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    disabled = false;
+    selected = false;
+    hasLeading = false;
+    hasMeta = false;
+    hasExcerpt = false;
+    hasTrailing = false;
+    leadingSlot;
+    metaSlot;
+    excerptSlot;
+    trailingSlot;
+    componentDidLoad() {
+        this.syncSlots();
+    }
+    syncSlots = () => {
+        this.hasLeading = slotHasContent(this.leadingSlot);
+        this.hasMeta = slotHasContent(this.metaSlot);
+        this.hasExcerpt = slotHasContent(this.excerptSlot);
+        this.hasTrailing = slotHasContent(this.trailingSlot);
+    };
+    render() {
+        return (h(Host, { key: 'abd055ed3b7a9140f024181377fd6c0e9b270578' }, h("button", { key: 'af6758ec890a63d11e11180f3cccfd94112b9804', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: 'e7321d522ac45566e836382d525463825c855afc', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: '90f578306f8b9c321128f705369531b64d54cca2', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '37a8ab0b4b19215d1a4c79d92646b18e010be8a0', class: "search-result-row__content", part: "content" }, h("span", { key: '1728598d9e9578cf6f04f13c1691e333b7d5ca25', class: "search-result-row__title", part: "title" }, h("slot", { key: '556b9da285b7e64298527870a970ef8c02e71988', name: "title" })), h("span", { key: 'ed47e52ad83968ca763e01ae7d9d3d66d444145a', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: 'c374d6328951530227892eec688edd60514e7e04', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '17965c7934d9256ce243a1d3a3e880716fcd42e1', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: '67cad2d2ea2310944cdf5a7685a1f4e3f537e683', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '43cb13c90187851fc30cc0c29847658f9f4cb069', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: '2b262ad21cb605daea5e4ade8c377a60820a1f11', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
+    }
+};
+UISearchResultRow.style = uiSearchResultRowCss();
+
+export { UISearchResultRow as ui_search_result_row };

package/dist/esm/ui-search-shell.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, h } from './index-CEeiinfk.js';
+
+const uiSearchShellCss = () => `:host{position:fixed;inset:0;z-index:var(--ui-search-shell-z-index, 400);display:block}.search-shell{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-block-start:var(--ui-search-shell-padding-top, 10vh)}.search-shell__panel{position:relative;inline-size:min(     calc(100% - (var(--ui-search-shell-margin-inline, var(--ui-space-4, 1rem)) * 2)),     var(--ui-search-shell-max-width, 640px)   );max-block-size:var(--ui-search-shell-max-height, 80vh);display:flex;flex-direction:column;overflow:hidden;background:var(--ui-search-shell-bg, var(--ui-surface, #ffffff));border:1px solid var(--ui-search-shell-border, var(--ui-border, #e5e7eb));border-radius:var(--ui-search-shell-radius, var(--ui-radius-xl, 1rem));box-shadow:var(--ui-search-shell-shadow, var(--ui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)))}.search-shell__search,.search-shell__status,.search-shell__footer{flex-shrink:0}.search-shell__body{flex:1;min-block-size:0}[hidden]{display:none}@media (max-width: 767px){.search-shell{padding-block-start:0;align-items:stretch}.search-shell__panel{inline-size:100%;max-block-size:100dvh;border-radius:0;border-inline:none;border-block-start:none}}`;
+
+function slotHasContent(slot) {
+    if (!slot) {
+        return false;
+    }
+    return slot.assignedNodes({ flatten: true }).some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return Boolean(node.textContent?.trim());
+        }
+        return true;
+    });
+}
+const UISearchShell = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    hasStatus = false;
+    hasFooter = false;
+    statusSlot;
+    footerSlot;
+    componentDidLoad() {
+        this.syncSlots();
+    }
+    syncSlots = () => {
+        this.hasStatus = slotHasContent(this.statusSlot);
+        this.hasFooter = slotHasContent(this.footerSlot);
+    };
+    render() {
+        return (h("div", { key: '3e8fb4f419a588c441abd5bd137093ba2f730b76', class: "search-shell", part: "base" }, h("slot", { key: '4772932f9e077b0e4f68c50657945f3ea30afb8d', name: "backdrop" }), h("div", { key: 'c7877bb3ade588797d8419b3c7efc0680ac32b78', class: "search-shell__panel", part: "panel" }, h("div", { key: 'd1e7c16a031896187550181be63a1ca14a04b127', class: "search-shell__search", part: "search" }, h("slot", { key: 'b61475159d7e18a623246a2872d4897e1ff8388a', name: "search" })), h("div", { key: '877a9847bb453d026b5e6c117ffa8ad44562195a', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: '6b46e668586fa97a30e2d02fc7d46d53483ecdb5', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '41622e5fe3b02d8c842a6d07b66119ac68f22bc0', class: "search-shell__body", part: "body" }, h("slot", { key: 'f36dc433657d95bb7afa1191351bbbbeaed4f6ed', name: "body" })), h("div", { key: 'bcbf35d5e37c0fe48b29dde935745ea792722646', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '02f99e3442476dbefc57b3a38dc5a4ad0f3e9f00', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
+    }
+};
+UISearchShell.style = uiSearchShellCss();
+
+export { UISearchShell as ui_search_shell };

package/dist/esm/ui-select.entry.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const uiSelectCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(select){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background-color:var(--ui-surface-default);color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding-block:var(--ui-select-padding-block, var(--ui-space-2));padding-inline-start:var(--ui-select-padding-inline-start, var(--ui-space-3));padding-inline-end:var(--ui-select-padding-inline-end, calc(var(--ui-space-6) + var(--ui-space-3)));margin:0;background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),     linear-gradient(135deg, currentColor 50%, transparent 50%);background-position:calc(100% - 1rem) calc(50% - 2px),     calc(100% - 0.7rem) calc(50% - 2px);background-size:0.35rem 0.35rem, 0.35rem 0.35rem;background-repeat:no-repeat;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(select:hover:not(:focus):not(:disabled)){border-color:var(--ui-border-strong)}::slotted(select:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(select),::slotted(select[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(select:disabled){background-color:var(--ui-surface-muted);color:var(--ui-text-muted);cursor:not-allowed}::slotted(select:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(select[multiple]),::slotted(select[size]:not([size='1'])){background-image:none;padding-inline-end:var(--ui-select-padding-inline-start, var(--ui-space-3))}`;
+
+const UISelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    value = '';
+    defaultValue = '';
+    disabled = false;
+    invalid = false;
+    required = false;
+    internalValue = '';
+    slotRef;
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncToSelect() {
+        const select = this.getSelect();
+        if (!select)
+            return;
+        this.host.dataset.invalid = this.invalid ? 'true' : '';
+        select.value = this.internalValue || this.defaultValue;
+        select.disabled = this.disabled;
+        select.required = this.required;
+        select.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.slotRef?.addEventListener('slotchange', () => this.syncToSelect());
+        this.syncToSelect();
+        const select = this.getSelect();
+        select?.addEventListener('input', this.onInput);
+        select?.addEventListener('change', this.onChange);
+    }
+    disconnectedCallback() {
+        const select = this.getSelect();
+        select?.removeEventListener('input', this.onInput);
+        select?.removeEventListener('change', this.onChange);
+    }
+    componentDidUpdate() {
+        this.syncToSelect();
+    }
+    getSelect() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+        return nodes.find((el) => el.tagName === 'SELECT') ?? null;
+    }
+    onInput = (e) => {
+        const select = e.target;
+        if (!select)
+            return;
+        this.internalValue = select.value;
+        dispatchDetail(this.host, 'input', {
+            value: this.internalValue,
+            trigger: eventToTrigger(e),
+        });
+    };
+    onChange = (e) => {
+        const select = this.getSelect();
+        if (!select)
+            return;
+        this.internalValue = select.value;
+        dispatchDetail(this.host, 'change', {
+            value: this.internalValue,
+            trigger: eventToTrigger(e),
+        });
+    };
+    render() {
+        return (h(Host, { key: 'eebea3f7fafafba901e5bd33cbd711565feb251e', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'bbb49202d8298fac0912accb3848c8450cab00c9', ref: (el) => (this.slotRef = el) })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncFromProp": 0
+            }],
+        "internalValue": [{
+                "syncToSelect": 0
+            }],
+        "defaultValue": [{
+                "syncToSelect": 0
+            }],
+        "disabled": [{
+                "syncToSelect": 0
+            }],
+        "invalid": [{
+                "syncToSelect": 0
+            }],
+        "required": [{
+                "syncToSelect": 0
+            }]
+    }; }
+};
+UISelect.style = uiSelectCss();
+
+export { UISelect as ui_select };

package/dist/esm/ui-switch.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail } from './events-JwSoedEO.js';
+
+const uiSwitchCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}:host([role='switch']){cursor:pointer}:host input[type='checkbox']{appearance:none;-webkit-appearance:none;display:block;position:relative;width:2.25rem;height:1.25rem;padding:0;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host input[type='checkbox']::after{content:'';position:absolute;top:2px;left:2px;width:0.875rem;height:0.875rem;border-radius:999px;background:var(--ui-surface-default);border:1px solid var(--ui-border-default);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}:host input[type='checkbox']:checked{background:var(--ui-accent-solid);border-color:var(--ui-accent-solid)}:host input[type='checkbox']:checked::after{transform:translateX(calc(2.25rem - 0.875rem - 4px));background:var(--ui-text-on-accent);border-color:var(--ui-text-on-accent)}:host input[type='checkbox']:focus-visible{outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
+
+const UISwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    checked = false;
+    defaultChecked = false;
+    disabled = false;
+    required = false;
+    value = 'on';
+    internalChecked = false;
+    syncFromProp() {
+        this.internalChecked = this.checked;
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        this.internalChecked = this.internalChecked || this.defaultChecked;
+    }
+    toggle = (trigger) => {
+        if (this.disabled)
+            return;
+        this.internalChecked = !this.internalChecked;
+        dispatchDetail(this.host, 'change', {
+            checked: this.internalChecked,
+            value: this.value,
+            trigger,
+        });
+    };
+    onKeydown = (e) => {
+        if (e.key !== ' ' || this.disabled)
+            return;
+        e.preventDefault();
+        this.toggle('keyboard');
+    };
+    onClick = (e) => {
+        if (e.target === this.host?.shadowRoot?.querySelector('input'))
+            return;
+        this.toggle('pointer');
+    };
+    render() {
+        return (h(Host, { key: 'd4e39c8865afa98414dbedcbbff5bdeeef7f4478', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, h("input", { key: '498774428224b9d09a8657924d4d8b6a2196fddf', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
+                this.internalChecked = e.target.checked;
+                dispatchDetail(this.host, 'change', {
+                    checked: this.internalChecked,
+                    value: this.value,
+                    trigger: 'pointer',
+                });
+            } }), h("slot", { key: 'b8f8c3947a9dd058e12270b9afdfe2a654164987' })));
+    }
+    static get watchers() { return {
+        "checked": [{
+                "syncFromProp": 0
+            }]
+    }; }
+};
+UISwitch.style = uiSwitchCss();
+
+export { UISwitch as ui_switch };

package/dist/esm/ui-tabs.entry.js

@@ -0,0 +1,115 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
+
+const UITabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    value = '';
+    defaultValue = '';
+    orientation = 'horizontal';
+    internalValue = '';
+    syncFromProp() {
+        this.internalValue = this.value;
+    }
+    syncState() {
+        const tabs = this.getTabs();
+        if (tabs.length === 0)
+            return;
+        tabs.forEach((tab) => {
+            const tabId = tab.id ?? tab.getAttribute('aria-controls') ?? '';
+            const isSelected = tabId === this.internalValue;
+            tab.setAttribute('aria-selected', String(isSelected));
+            tab.tabIndex = isSelected ? 0 : -1;
+            const controlsId = tab.getAttribute('aria-controls');
+            if (controlsId) {
+                const panel = this.host.querySelector(`#${CSS.escape(controlsId)}`) ?? document.getElementById(controlsId);
+                if (panel) {
+                    panel.hidden = !isSelected;
+                }
+            }
+        });
+    }
+    componentDidLoad() {
+        this.syncFromProp();
+        if (!this.internalValue && this.defaultValue) {
+            this.internalValue = this.defaultValue;
+        }
+        if (!this.internalValue) {
+            const tabs = this.getTabs();
+            if (tabs.length > 0) {
+                this.internalValue = tabs[0]?.id ?? tabs[0]?.getAttribute('aria-controls') ?? '';
+            }
+        }
+        this.syncState();
+        this.host.addEventListener('keydown', this.onKeydown);
+        this.host.addEventListener('click', this.onClick);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('keydown', this.onKeydown);
+        this.host.removeEventListener('click', this.onClick);
+    }
+    componentDidUpdate() {
+        this.syncState();
+    }
+    getTabs() {
+        return Array.from(this.host.querySelectorAll('[role="tab"]'));
+    }
+    setValueFromTab(tab, trigger) {
+        const newValue = tab.id ?? tab.getAttribute('aria-controls') ?? '';
+        if (!newValue)
+            return;
+        const prev = this.internalValue;
+        this.internalValue = newValue;
+        this.syncState();
+        dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev || undefined, trigger });
+    }
+    onClick = (e) => {
+        const tab = e.target.closest?.('[role="tab"]');
+        if (!tab || !this.host.contains(tab))
+            return;
+        this.setValueFromTab(tab, eventToTrigger(e));
+    };
+    onKeydown = (e) => {
+        const tab = e.target.closest?.('[role="tab"]');
+        if (!tab || !this.host.contains(tab))
+            return;
+        const tabs = this.getTabs();
+        if (tabs.length === 0)
+            return;
+        const currentIndex = tabs.indexOf(tab);
+        const isVertical = this.orientation === 'vertical';
+        const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        if (e.key === nextKey || e.key === prevKey) {
+            e.preventDefault();
+            const nextIndex = e.key === nextKey
+                ? Math.min(currentIndex + 1, tabs.length - 1)
+                : currentIndex <= 0
+                    ? tabs.length - 1
+                    : currentIndex - 1;
+            this.setValueFromTab(tabs[nextIndex], 'keyboard');
+            tabs[nextIndex].focus();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'd73e97facf3ffa020f349642bc6c0136f39fc463', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: 'a7bd47a4b48780ddf1f21a917fd1cb747376640b' })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncFromProp": 0
+            }],
+        "internalValue": [{
+                "syncState": 0
+            }],
+        "orientation": [{
+                "syncState": 0
+            }]
+    }; }
+};
+UITabs.style = uiTabsCss();
+
+export { UITabs as ui_tabs };