@threadlabs/looma 0.1.0

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

@@ -0,0 +1,247 @@
+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: '5182efff607bcf9add3f0981ce2af3a42bd356b8', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: '2889bc2abecddf3e7cf81cd54053bdd608559dfc' })));
+    }
+    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

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

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

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

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

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

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