@santi020k/lumen-elements 3.0.0 → 4.0.0

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import { type LumenCustomElementRegistry } from '../element-base.js';
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
 export declare const lumenButtonElementConfig: {
     readonly attributeClasses: {
         readonly variant: {
@@ -33,6 +33,55 @@ export declare const lumenButtonElementConfig: {
     readonly role: "button";
     readonly tagName: "lumen-button";
 };
-export declare const LumenButtonElement: import("../element-base.js").LumenElementConstructor;
+export declare class LumenButtonElement extends LumenElement {
+    static config: {
+        readonly attributeClasses: {
+            readonly variant: {
+                readonly default: "ui-button--default";
+                readonly destructive: "ui-button--destructive";
+                readonly ghost: "ui-button--ghost";
+                readonly link: "ui-button--link";
+                readonly outline: "ui-button--outline";
+                readonly secondary: "ui-button--secondary";
+            };
+            readonly size: {
+                readonly default: "ui-button--default-size";
+                readonly icon: "ui-button--icon";
+                readonly lg: "ui-button--lg";
+                readonly sm: "ui-button--sm";
+            };
+            readonly disabled: {
+                readonly true: "ui-button--disabled";
+            };
+            readonly loading: {
+                readonly true: "ui-button--loading";
+            };
+        };
+        readonly baseClassName: "ui-button";
+        readonly defaults: {
+            readonly 'data-slot': "button";
+            readonly role: "button";
+            readonly size: "default";
+            readonly tabindex: "0";
+            readonly variant: "default";
+        };
+        readonly role: "button";
+        readonly tagName: "lumen-button";
+    };
+    private spacePressed;
+    private managedDisabled;
+    private originalAriaDisabled;
+    private hasBlockingAttribute;
+    private syncDisabledSemantics;
+    private isBlocked;
+    private activateAfterDispatch;
+    private onKeyDown;
+    private onKeyUp;
+    private onBlur;
+    private onClick;
+    connectedCallback(): void;
+    attributeChangedCallback(name?: string, previousValue?: string | null, value?: string | null): void;
+    disconnectedCallback(): void;
+}
 export declare const defineLumenButton: (registry?: LumenCustomElementRegistry) => void;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BE,CAAA;AAEvC,eAAO,MAAM,kBAAkB,sDAE9B,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BE,CAAA;AAEvC,qBAAa,kBAAmB,SAAQ,YAAY;IAClD,OAAgB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAA2B;IACjD,OAAO,CAAC,YAAY,CAAQ;IAC5B,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,oBAAoB,CAAsB;IAElD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS,CAUhB;IAED,OAAO,CAAC,OAAO,CAQd;IAED,OAAO,CAAC,MAAM,CAEb;IAED,OAAO,CAAC,OAAO,CAMd;IAEQ,iBAAiB,IAAI,IAAI;IAczB,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMnG,oBAAoB,IAAI,IAAI;CAatC;AAED,eAAO,MAAM,iBAAiB,GAC5B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}

package/dist/components/button.js

@@ -1,4 +1,4 @@
-import { createLumenElementClass, defineLumenElement } from '../element-base.js';
+import { defineLumenElement, LumenElement } from '../element-base.js';
 export const lumenButtonElementConfig = {
     attributeClasses: {
         variant: {
@@ -29,7 +29,86 @@ export const lumenButtonElementConfig = {
     role: 'button',
     tagName: 'lumen-button'
 };
-export const LumenButtonElement = createLumenElementClass(lumenButtonElementConfig);
+export class LumenButtonElement extends LumenElement {
+    static config = lumenButtonElementConfig;
+    spacePressed = false;
+    managedDisabled = false;
+    originalAriaDisabled = null;
+    hasBlockingAttribute() {
+        return ['disabled', 'loading'].some(name => this.hasAttribute(name) && this.getAttribute(name) !== 'false');
+    }
+    syncDisabledSemantics() {
+        if (this.hasBlockingAttribute()) {
+            if (!this.managedDisabled)
+                this.originalAriaDisabled = this.getAttribute('aria-disabled');
+            this.managedDisabled = true;
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else if (this.managedDisabled) {
+            this.managedDisabled = false;
+            if (this.originalAriaDisabled === null)
+                this.removeAttribute('aria-disabled');
+            else
+                this.setAttribute('aria-disabled', this.originalAriaDisabled);
+        }
+    }
+    isBlocked() {
+        return this.hasBlockingAttribute() || this.getAttribute('aria-disabled') === 'true';
+    }
+    activateAfterDispatch(event) {
+        setTimeout(() => {
+            if (this.isConnected && !event.defaultPrevented && !this.isBlocked())
+                this.click();
+        }, 0);
+    }
+    onKeyDown = (event) => {
+        if (event.target !== this || event.defaultPrevented || event.repeat || event.isComposing || this.isBlocked())
+            return;
+        if (event.key === 'Enter')
+            this.activateAfterDispatch(event);
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.spacePressed = true;
+        }
+    };
+    onKeyUp = (event) => {
+        if (event.key !== ' ')
+            return;
+        const spacePressed = this.spacePressed;
+        this.spacePressed = false;
+        if (event.target === this && spacePressed && !event.isComposing)
+            this.activateAfterDispatch(event);
+    };
+    onBlur = () => {
+        this.spacePressed = false;
+    };
+    onClick = (event) => {
+        if (!this.isBlocked())
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncDisabledSemantics();
+        this.addEventListener('keydown', this.onKeyDown);
+        this.addEventListener('keyup', this.onKeyUp);
+        this.addEventListener('blur', this.onBlur);
+        this.addEventListener('click', this.onClick, true);
+    }
+    attributeChangedCallback(name, previousValue, value) {
+        super.attributeChangedCallback(name, previousValue, value);
+        this.syncDisabledSemantics();
+    }
+    disconnectedCallback() {
+        this.spacePressed = false;
+        this.removeEventListener('keydown', this.onKeyDown);
+        this.removeEventListener('keyup', this.onKeyUp);
+        this.removeEventListener('blur', this.onBlur);
+        this.removeEventListener('click', this.onClick, true);
+        super.disconnectedCallback();
+    }
+}
 export const defineLumenButton = (registry) => {
     defineLumenElement(lumenButtonElementConfig, LumenButtonElement, registry);
 };

package/dist/components/card.d.ts

@@ -1,6 +1,11 @@
 import { type LumenCustomElementRegistry } from '../element-base.js';
 export declare const lumenCardElementConfig: {
     readonly attributeClasses: {
+        readonly density: {
+            readonly comfortable: "ui-card--comfortable";
+            readonly compact: "ui-card--compact";
+            readonly spacious: "ui-card--spacious";
+        };
         readonly glass: {
             readonly strong: "ui-card--glass ui-glass-strong";
             readonly subtle: "ui-card--glass ui-glass-subtle";
@@ -16,6 +21,7 @@ export declare const lumenCardElementConfig: {
     readonly baseClassName: "ui-card";
     readonly defaults: {
         readonly 'data-slot': "card";
+        readonly density: "comfortable";
         readonly variant: "default";
     };
     readonly tagName: "lumen-card";

package/dist/components/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;CAiBI,CAAA;AAEvC,eAAO,MAAM,gBAAgB,sDAE5B,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBI,CAAA;AAEvC,eAAO,MAAM,gBAAgB,sDAE5B,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}

package/dist/components/card.js

@@ -1,6 +1,11 @@
 import { createLumenElementClass, defineLumenElement } from '../element-base.js';
 export const lumenCardElementConfig = {
     attributeClasses: {
+        density: {
+            comfortable: 'ui-card--comfortable',
+            compact: 'ui-card--compact',
+            spacious: 'ui-card--spacious'
+        },
         glass: {
             strong: 'ui-card--glass ui-glass-strong',
             subtle: 'ui-card--glass ui-glass-subtle',
@@ -14,7 +19,7 @@ export const lumenCardElementConfig = {
         }
     },
     baseClassName: 'ui-card',
-    defaults: { 'data-slot': 'card', variant: 'default' },
+    defaults: { 'data-slot': 'card', density: 'comfortable', variant: 'default' },
     tagName: 'lumen-card'
 };
 export const LumenCardElement = createLumenElementClass(lumenCardElementConfig);

package/dist/components/combobox.d.ts

@@ -7,6 +7,7 @@ export declare const lumenComboboxElementConfig: {
     readonly tagName: "lumen-combobox";
 };
 export declare class LumenComboboxElement extends LumenElement {
+    #private;
     static config: {
         readonly baseClassName: "ui-combobox";
         readonly defaults: {
@@ -14,10 +15,8 @@ export declare class LumenComboboxElement extends LumenElement {
         };
         readonly tagName: "lumen-combobox";
     };
-    private abortController;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private setupCombobox;
 }
 export declare const defineLumenCombobox: (registry?: LumenCustomElementRegistry) => void;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,0BAA0B;;;;;;CAIA,CAAA;AAyBvC,qBAAa,oBAAqB,SAAQ,YAAY;IACpD,OAAgB,MAAM;;;;;;MAA6B;IAEnD,OAAO,CAAC,eAAe,CAA6B;IAE3C,iBAAiB;IAYjB,oBAAoB;IAM7B,OAAO,CAAC,aAAa;CAmJtB;AAED,eAAO,MAAM,mBAAmB,GAC9B,WAAW,0BAA0B,KACpC,IAIF,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,0BAA0B;;;;;;CAIA,CAAA;AAEvC,qBAAa,oBAAqB,SAAQ,YAAY;;IACpD,OAAgB,MAAM;;;;;;MAA6B;IAsB1C,iBAAiB;IAcjB,oBAAoB;CAa9B;AAED,eAAO,MAAM,mBAAmB,GAC9B,WAAW,0BAA0B,KACpC,IAIF,CAAA"}

package/dist/components/combobox.js

@@ -1,136 +1,42 @@
+import { createLumenComboboxController } from '@santi020k/lumen-core';
 import { defineLumenElement, LumenElement } from '../element-base.js';
 export const lumenComboboxElementConfig = {
     baseClassName: 'ui-combobox',
     defaults: { 'data-ui-combobox': '' },
     tagName: 'lumen-combobox'
 };
-let comboboxId = 0;
-const createComboboxId = () => `ui-combobox-list-${++comboboxId}`;
-const getEventTarget = (event) => {
-    const target = event.composedPath()[0] ?? event.target;
-    return target instanceof Node ? target : null;
-};
-const getLoopedIndex = (key, currentIndex, itemCount) => {
-    if (key === 'Home')
-        return 0;
-    if (key === 'End')
-        return itemCount - 1;
-    if (key === 'ArrowDown')
-        return (currentIndex + 1) % itemCount;
-    return (currentIndex - 1 + itemCount) % itemCount;
-};
 export class LumenComboboxElement extends LumenElement {
     static config = lumenComboboxElementConfig;
-    abortController;
+    #controller;
+    #observer;
+    #input = null;
+    #list = null;
+    #bind() {
+        const input = this.querySelector('input[role="combobox"]');
+        const list = this.querySelector('[role="listbox"]');
+        if (input === this.#input && list === this.#list)
+            return;
+        this.#controller?.destroy();
+        this.#input = input;
+        this.#list = list;
+        this.#controller = input && list ? createLumenComboboxController(this) : undefined;
+    }
     connectedCallback() {
         super.connectedCallback();
-        if (typeof document === 'undefined')
-            return;
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        this.setupCombobox(this.abortController.signal);
+        this.#observer?.disconnect();
+        this.#bind();
+        this.#observer = new MutationObserver(() => {
+            this.#bind();
+        });
+        this.#observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
-        this.abortController?.abort();
-        this.abortController = undefined;
-    }
-    setupCombobox(signal) {
-        const input = this.querySelector('input[role="combobox"]');
-        const listbox = this.querySelector('[role="listbox"]');
-        if (!input || !listbox)
-            return;
-        const items = [...listbox.querySelectorAll('[role="option"]')];
-        if (!listbox.id)
-            listbox.id = createComboboxId();
-        input.setAttribute('aria-autocomplete', input.getAttribute('aria-autocomplete') ?? 'list');
-        input.setAttribute('aria-controls', listbox.id);
-        const getVisibleItems = () => items.filter(item => (!item.hidden && !item.hasAttribute('disabled') &&
-            item.getAttribute('aria-disabled') !== 'true'));
-        const close = () => {
-            input.setAttribute('aria-expanded', 'false');
-            listbox.hidden = true;
-            listbox.dataset.state = 'closed';
-        };
-        const open = () => {
-            input.setAttribute('aria-expanded', 'true');
-            listbox.hidden = false;
-            listbox.dataset.state = 'open';
-        };
-        const filter = () => {
-            const query = input.value.trim().toLowerCase();
-            for (const item of items) {
-                const value = item.getAttribute('data-value') ?? item.textContent.trim();
-                item.hidden = Boolean(query) && !value.toLowerCase().includes(query);
-            }
-        };
-        const select = (item) => {
-            input.value = item.getAttribute('data-value') ?? item.textContent.trim();
-            input.dispatchEvent(new Event('input', { bubbles: true }));
-            input.dispatchEvent(new Event('change', { bubbles: true }));
-            input.focus({ preventScroll: true });
-            close();
-        };
-        const focusItem = (item, key) => {
-            const visibleItems = getVisibleItems();
-            if (!visibleItems.length)
-                return;
-            const currentIndex = Math.max(0, visibleItems.indexOf(item));
-            visibleItems[getLoopedIndex(key, currentIndex, visibleItems.length)]?.focus();
-        };
-        close();
-        input.addEventListener('focus', open, { signal });
-        input.addEventListener('input', () => {
-            filter();
-            open();
-        }, { signal });
-        input.addEventListener('keydown', event => {
-            if (event.key === 'Escape') {
-                close();
-                return;
-            }
-            if (!['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key))
-                return;
-            const visibleItems = getVisibleItems();
-            if (!visibleItems.length)
-                return;
-            event.preventDefault();
-            open();
-            if (event.key === 'Enter') {
-                const firstVisibleItem = visibleItems.at(0);
-                if (firstVisibleItem)
-                    select(firstVisibleItem);
-                return;
-            }
-            const targetIndex = event.key === 'ArrowUp' ? visibleItems.length - 1 : 0;
-            visibleItems[targetIndex]?.focus();
-        }, { signal });
-        for (const item of items) {
-            item.tabIndex = -1;
-            item.addEventListener('click', () => {
-                select(item);
-            }, { signal });
-            item.addEventListener('keydown', event => {
-                if (event.key === 'Escape') {
-                    close();
-                    input.focus({ preventScroll: true });
-                    return;
-                }
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    select(item);
-                    return;
-                }
-                if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
-                    return;
-                event.preventDefault();
-                focusItem(item, event.key);
-            }, { signal });
-        }
-        document.addEventListener('pointerdown', event => {
-            const target = getEventTarget(event);
-            if (target && !this.contains(target))
-                close();
-        }, { signal });
+        this.#observer?.disconnect();
+        this.#observer = undefined;
+        this.#controller?.destroy();
+        this.#controller = undefined;
+        this.#input = null;
+        this.#list = null;
     }
 }
 export const defineLumenCombobox = (registry) => {

package/dist/components/dashboard.d.ts

@@ -0,0 +1,41 @@
+import { type LumenChangeSummaryItem } from '@santi020k/lumen-core';
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenChangeSummaryElementConfig: {
+    readonly baseClassName: "ui-change-summary";
+    readonly observedAttributes: readonly ["label", "summary", "before-label", "after-label", "changed-label", "unchanged-label"];
+    readonly role: "region";
+    readonly tagName: "lumen-change-summary";
+};
+export declare class LumenChangeSummaryElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-change-summary";
+        readonly observedAttributes: readonly ["label", "summary", "before-label", "after-label", "changed-label", "unchanged-label"];
+        readonly role: "region";
+        readonly tagName: "lumen-change-summary";
+    };
+    private records;
+    private content;
+    get items(): readonly LumenChangeSummaryItem[];
+    set items(value: readonly LumenChangeSummaryItem[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private renderRecord;
+    private render;
+}
+export declare const lumenFilterBarElementConfig: {
+    readonly baseClassName: "ui-filter-bar";
+    readonly observedAttributes: readonly [];
+    readonly role: "region";
+    readonly tagName: "lumen-filter-bar";
+};
+export declare class LumenFilterBarElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-filter-bar";
+        readonly observedAttributes: readonly [];
+        readonly role: "region";
+        readonly tagName: "lumen-filter-bar";
+    };
+}
+export declare const defineLumenChangeSummary: (registry?: LumenCustomElementRegistry) => void;
+export declare const defineLumenFilterBar: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/components/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/components/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAA+B,MAAM,uBAAuB,CAAA;AAEhG,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE/H,eAAO,MAAM,+BAA+B;;;;;CAKL,CAAA;AAYvC,qBAAa,yBAA0B,SAAQ,YAAY;IACzD,OAAgB,MAAM;;;;;MAAkC;IACxD,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,OAAO,CAA4B;IAE3C,IAAI,KAAK,IAAI,SAAS,sBAAsB,EAAE,CAE7C;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,sBAAsB,EAAE,EAIjD;IAEQ,iBAAiB,IAAI,IAAI;IAMzB,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,MAAM;CA0Bf;AAGD,eAAO,MAAM,2BAA2B;;;;;CAKD,CAAA;AAEvC,qBAAa,qBAAsB,SAAQ,YAAY;IACrD,OAAgB,MAAM;;;;;MAA8B;CACrD;AAED,eAAO,MAAM,wBAAwB,GAAI,WAAW,0BAA0B,KAAG,IAEhF,CAAA;AACD,eAAO,MAAM,oBAAoB,GAAI,WAAW,0BAA0B,KAAG,IAE5E,CAAA"}

package/dist/components/dashboard.js

@@ -0,0 +1,88 @@
+import { readLumenChangeSummaryItems } from '@santi020k/lumen-core';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenChangeSummaryElementConfig = {
+    baseClassName: 'ui-change-summary',
+    observedAttributes: ['label', 'summary', 'before-label', 'after-label', 'changed-label', 'unchanged-label'],
+    role: 'region',
+    tagName: 'lumen-change-summary'
+};
+const textNode = (document, tag, text, className) => {
+    const node = document.createElement(tag);
+    node.textContent = text;
+    if (className)
+        node.className = className;
+    return node;
+};
+export class LumenChangeSummaryElement extends LumenElement {
+    static config = lumenChangeSummaryElementConfig;
+    records = [];
+    content;
+    get items() {
+        return this.records.map(item => ({ ...item }));
+    }
+    set items(value) {
+        this.records = readLumenChangeSummaryItems(value);
+        if (this.isConnected)
+            this.render();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.render();
+    }
+    renderRecord(item) {
+        const document = this.ownerDocument;
+        const row = document.createElement('div');
+        const term = textNode(document, 'dt', item.label);
+        row.className = 'ui-change-summary__item';
+        row.dataset.changed = String(item.changed);
+        term.append(textNode(document, 'span', this.getAttribute(item.changed ? 'changed-label' : 'unchanged-label') ??
+            (item.changed ? 'Changed' : 'Unchanged'), 'ui-change-summary__state'));
+        row.append(term);
+        for (const [name, value] of [['before', item.before], ['after', item.after]]) {
+            const detail = document.createElement('dd');
+            detail.append(textNode(document, 'span', this.getAttribute(`${name}-label`) ??
+                (name === 'before' ? 'Before' : 'After'), 'ui-change-summary__value-label'), document.createTextNode(value));
+            row.append(detail);
+        }
+        return row;
+    }
+    render() {
+        const document = this.ownerDocument;
+        const label = this.getAttribute('label') ?? 'Changes';
+        const content = this.content ?? document.createElement('div');
+        const list = document.createElement('dl');
+        const heading = textNode(document, 'h3', label, 'ui-change-summary__heading');
+        const summary = this.getAttribute('summary');
+        content.className = 'ui-change-summary';
+        this.setAttribute('aria-label', label);
+        list.className = 'ui-change-summary__list';
+        list.append(...this.records.map(item => this.renderRecord(item)));
+        content.replaceChildren(heading);
+        if (summary)
+            content.append(textNode(document, 'p', summary, 'ui-change-summary__summary'));
+        content.append(list);
+        if (!this.content)
+            this.prepend(content);
+        this.content = content;
+    }
+}
+export const lumenFilterBarElementConfig = {
+    baseClassName: 'ui-filter-bar',
+    observedAttributes: [],
+    role: 'region',
+    tagName: 'lumen-filter-bar'
+};
+export class LumenFilterBarElement extends LumenElement {
+    static config = lumenFilterBarElementConfig;
+}
+export const defineLumenChangeSummary = (registry) => {
+    defineLumenElement(lumenChangeSummaryElementConfig, LumenChangeSummaryElement, registry);
+};
+export const defineLumenFilterBar = (registry) => {
+    defineLumenElement(lumenFilterBarElementConfig, LumenFilterBarElement, registry);
+};

package/dist/components/device-frame.d.ts

@@ -0,0 +1,31 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenDeviceFrameElementConfig: {
+    readonly baseClassName: "ui-device-frame";
+    readonly defaults: {
+        readonly 'data-device': "laptop";
+        readonly 'data-tone': "dark";
+    };
+    readonly observedAttributes: readonly ["device", "orientation", "tone", "color", "screen-width", "screen-height", "scroll"];
+    readonly tagName: "lumen-device-frame";
+};
+export declare class LumenDeviceFrameElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-device-frame";
+        readonly defaults: {
+            readonly 'data-device': "laptop";
+            readonly 'data-tone': "dark";
+        };
+        readonly observedAttributes: readonly ["device", "orientation", "tone", "color", "screen-width", "screen-height", "scroll"];
+        readonly tagName: "lumen-device-frame";
+    };
+    private screen;
+    private cleanup;
+    private colorOverride;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    private update;
+    private updateColor;
+}
+export declare const defineLumenDeviceFrame: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=device-frame.d.ts.map

package/dist/components/device-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-frame.d.ts","sourceRoot":"","sources":["../../src/components/device-frame.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAI/H,eAAO,MAAM,6BAA6B;;;;;;;;CAKH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;;MAAgC;IACtD,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,aAAa,CAAiD;IAE7D,iBAAiB,IAAI,IAAI;IAmDzB,wBAAwB,IAAI,IAAI;IAMhC,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,MAAM;IAiCd,OAAO,CAAC,WAAW;CAgBpB;AAED,eAAO,MAAM,sBAAsB,GAAI,WAAW,0BAA0B,KAAG,IAE9E,CAAA"}

package/dist/components/device-frame.js

@@ -0,0 +1,95 @@
+import { lumenDeviceFrameSizes, observeLumenDeviceFrame, resolveLumenDeviceFrame, resolveLumenDeviceFrameColor } from '@santi020k/lumen-core';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+const isDevice = (name) => name !== null && Object.hasOwn(lumenDeviceFrameSizes, name);
+export const lumenDeviceFrameElementConfig = {
+    baseClassName: 'ui-device-frame',
+    defaults: { 'data-device': 'laptop', 'data-tone': 'dark' },
+    observedAttributes: ['device', 'orientation', 'tone', 'color', 'screen-width', 'screen-height', 'scroll'],
+    tagName: 'lumen-device-frame'
+};
+export class LumenDeviceFrameElement extends LumenElement {
+    static config = lumenDeviceFrameElementConfig;
+    screen;
+    cleanup;
+    colorOverride;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.screen) {
+            const shell = this.ownerDocument.createElement('div');
+            const glass = this.ownerDocument.createElement('div');
+            const camera = this.ownerDocument.createElement('span');
+            const screen = this.ownerDocument.createElement('div');
+            const base = this.ownerDocument.createElement('span');
+            const hardware = this.ownerDocument.createElement('span');
+            hardware.className = 'ui-device-frame__hardware';
+            hardware.setAttribute('aria-hidden', 'true');
+            for (const part of ['action', 'volume-up', 'volume-down', 'power', 'rail-left', 'rail-right']) {
+                const detail = this.ownerDocument.createElement('span');
+                detail.className = `ui-device-frame__${part}`;
+                hardware.append(detail);
+            }
+            shell.className = 'ui-device-frame__shell';
+            glass.className = 'ui-device-frame__glass';
+            camera.className = 'ui-device-frame__camera';
+            camera.setAttribute('aria-hidden', 'true');
+            screen.className = 'ui-device-frame__screen';
+            base.className = 'ui-device-frame__base';
+            base.setAttribute('aria-hidden', 'true');
+            screen.append(...this.childNodes);
+            glass.append(camera, screen);
+            shell.append(hardware, glass);
+            this.append(shell, base);
+            this.screen = screen;
+        }
+        this.update();
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.update();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    update() {
+        const screen = this.screen;
+        if (!screen)
+            return;
+        const rawDevice = this.getAttribute('device');
+        const device = isDevice(rawDevice) ? rawDevice : 'laptop';
+        const rawOrientation = this.getAttribute('orientation');
+        const orientation = rawOrientation === 'portrait' || rawOrientation === 'landscape' ? rawOrientation : undefined;
+        const size = resolveLumenDeviceFrame(device, orientation, Number(this.getAttribute('screen-width')), Number(this.getAttribute('screen-height')));
+        this.dataset.device = device;
+        this.dataset.tone = this.getAttribute('tone') === 'light' ? 'light' : 'dark';
+        if (orientation)
+            this.dataset.orientation = orientation;
+        else
+            delete this.dataset.orientation;
+        this.updateColor();
+        screen.dataset.scroll = String(this.getAttribute('scroll') !== 'false');
+        screen.style.aspectRatio = `${size.width} / ${size.height}`;
+        screen.style.setProperty('--ui-device-frame-width', `${size.width}px`);
+        screen.style.setProperty('--ui-device-frame-height', `${size.height}px`);
+        this.cleanup?.();
+        this.cleanup = observeLumenDeviceFrame(screen, size.width);
+    }
+    updateColor() {
+        const color = resolveLumenDeviceFrameColor(this.getAttribute('color'));
+        if (color) {
+            this.colorOverride ??= {
+                value: this.style.getPropertyValue('--ui-device-color'),
+                priority: this.style.getPropertyPriority('--ui-device-color')
+            };
+            this.style.setProperty('--ui-device-color', color);
+        }
+        else if (this.colorOverride) {
+            this.style.setProperty('--ui-device-color', this.colorOverride.value, this.colorOverride.priority);
+            this.colorOverride = undefined;
+        }
+    }
+}
+export const defineLumenDeviceFrame = (registry) => {
+    defineLumenElement(lumenDeviceFrameElementConfig, LumenDeviceFrameElement, registry);
+};