@threadlabs/looma 0.2.5 → 0.2.6

package/dist/collection/components/ui-radio-group/ui-radio-group.js

@@ -1,247 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger } from "../../utils/events";
-import { dispatchDetail } from "../../utils/events";
-export class UIRadioGroup {
-    host;
-    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: '9bdfe6b5209b5444cb27dde3226ec33866999c25', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'b81a2f1e4c49000cfb5357570b460564ced48d91' })));
-    }
-    static get is() { return "ui-radio-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-radio-group.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-radio-group.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "orientation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'horizontal' | 'vertical'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "orientation",
-                "defaultValue": "'horizontal'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalValue",
-                "methodName": "syncToRadios"
-            }, {
-                "propName": "name",
-                "methodName": "syncToRadios"
-            }, {
-                "propName": "orientation",
-                "methodName": "syncToRadios"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToRadios"
-            }];
-    }
-}

package/dist/collection/components/ui-search-result-row/ui-search-result-row.css

@@ -1,80 +0,0 @@
-: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;
-}

package/dist/collection/components/ui-search-result-row/ui-search-result-row.js

@@ -1,100 +0,0 @@
-import { Host, h } from "@stencil/core";
-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;
-    });
-}
-export class UISearchResultRow {
-    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: '923d7ac982594e39c06421b60f115acbb395f169' }, h("button", { key: 'c97e45ba33297a8aeaa4a9726402c71e3ca73a7b', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: 'dea0781519760f5dc2b46902ef86f9e72ccfa6df', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: 'e10026c17caaa3a21e9dd34c7faabfe9b97f2f5b', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: 'e8bb06b45aff7ddbaa9a51cc7c53d797e68e8746', class: "search-result-row__content", part: "content" }, h("span", { key: '6e1c2d49029e1c1fdc2519f513ddedbe304ddb3e', class: "search-result-row__title", part: "title" }, h("slot", { key: '9653efc0b61c49d36034c4c75a3e9b3d7a6f837b', name: "title" })), h("span", { key: 'b10885a7649c75f9e6903354f5804f459aa883b7', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: 'b3101183b0dfa0cc1ba8e62c1f8fc39ad865e1ae', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '430520c0e349344fc4c549cd36a0137d39fc8d24', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: '4a90cefa9b1d2b2378d1a8aa166aa8fdebfbca42', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '769ed2f62ead7ce32b13cdad93a7bbb981b13b3c', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: '86490f5fef29c6fa4d8ddf838de5f9aee8535db0', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
-    }
-    static get is() { return "ui-search-result-row"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-search-result-row.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-search-result-row.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "selected",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "hasLeading": {},
-            "hasMeta": {},
-            "hasExcerpt": {},
-            "hasTrailing": {}
-        };
-    }
-}

package/dist/collection/components/ui-search-shell/ui-search-shell.css

@@ -1,63 +0,0 @@
-: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%;
-    block-size: 100vh;
-    block-size: 100dvh;
-    max-block-size: none;
-    border-radius: 0;
-    border-inline: none;
-    border-block-start: none;
-  }
-}

package/dist/collection/components/ui-search-shell/ui-search-shell.js

@@ -1,46 +0,0 @@
-import { h } from "@stencil/core";
-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;
-    });
-}
-export class UISearchShell {
-    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: '049a6451f10f1906881efc8fc2cdeba656e68733', class: "search-shell", part: "base" }, h("slot", { key: 'e807b035ccb9ec9425651b59a0d137ebc54329aa', name: "backdrop" }), h("div", { key: '5d785a0d4dab1fed7f6750b82485b9e50edd62d9', class: "search-shell__panel", part: "panel" }, h("div", { key: 'b41c40485d61d9436504483759a5f42d96e5aad2', class: "search-shell__search", part: "search" }, h("slot", { key: 'b19058bca701cc26d286c8694c7cdc6306e100c4', name: "search" })), h("div", { key: '260164b95427e03329f28247e8dbda867506e672', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: '1d7c1e8c96e588b7c9c906cfaad91ba1cf77bf7c', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '49963c82e54aee2b5c4c4809ce2b152f770b4468', class: "search-shell__body", part: "body" }, h("slot", { key: 'ae32ec8c9ec89310ad1805f1c65bc8208ee12f29', name: "body" })), h("div", { key: 'f5fc9f356035e277e4c9bb0e188d7b4be3642c27', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: 'dbf1022e49a054eee1c5e70b675c71d1cf3488bf', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
-    }
-    static get is() { return "ui-search-shell"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-search-shell.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-search-shell.css"]
-        };
-    }
-    static get states() {
-        return {
-            "hasStatus": {},
-            "hasFooter": {}
-        };
-    }
-}

package/dist/collection/components/ui-select/ui-select.css

@@ -1,64 +0,0 @@
-:host {
-  display: inline-flex;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-}
-
-::slotted(select) {
-  width: 100%;
-  appearance: none;
-  min-block-size: var(--ui-control-min-block-size, 2.75rem);
-  border: 1px solid var(--ui-control-border, var(--ui-border-default));
-  border-radius: var(--ui-radius-2);
-  background-color: var(--ui-control-surface, 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-control-border-hover, var(--ui-border-strong));
-}
-
-::slotted(select:focus) {
-  border-color: var(--ui-control-focus, var(--ui-focus-ring));
-  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, 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-control-surface-disabled, 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));
-}