@santi020k/lumen-elements 3.0.1 → 4.1.0

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);
+};

package/dist/components/foundations.d.ts

@@ -1,4 +1,4 @@
-import { type LumenCustomElementRegistry } from '../element-base.js';
+import { type LumenCustomElementRegistry, type LumenElementConstructor } from '../element-base.js';
 export declare const lumenCardContentElementConfig: {
     readonly baseClassName: "ui-card__content";
     readonly defaults: {
@@ -69,6 +69,12 @@ export declare const lumenGridElementConfig: {
             readonly auto: "ui-grid--columns-auto";
         };
         readonly gap: {
+            readonly '2xl': "ui-grid--gap-2xl";
+            readonly '3xl': "ui-grid--gap-3xl";
+            readonly group: "ui-grid--gap-group";
+            readonly related: "ui-grid--gap-related";
+            readonly section: "ui-grid--gap-section";
+            readonly xs: "ui-grid--gap-xs";
             readonly lg: "ui-grid--gap-lg";
             readonly md: "ui-grid--gap-md";
             readonly none: "ui-grid--gap-none";
@@ -80,7 +86,7 @@ export declare const lumenGridElementConfig: {
     readonly defaults: {
         readonly 'data-ui-grid': "";
         readonly columns: "auto";
-        readonly gap: "md";
+        readonly gap: "group";
     };
     readonly tagName: "lumen-grid";
 };
@@ -102,20 +108,54 @@ export declare const lumenSeparatorElementConfig: {
     readonly tagName: "lumen-separator";
 };
 export declare const lumenSkeletonElementConfig: {
+    readonly attributeClasses: {
+        readonly animation: {
+            readonly none: "ui-skeleton--static";
+            readonly pulse: "ui-skeleton--pulse";
+        };
+        readonly shape: {
+            readonly circle: "ui-skeleton--circle";
+            readonly text: "ui-skeleton--text";
+        };
+    };
     readonly baseClassName: "ui-skeleton";
+    readonly observedAttributes: readonly ["animation", "height", "shape", "width", "aria-hidden", "aria-label", "aria-labelledby", "role"];
     readonly tagName: "lumen-skeleton";
 };
 export declare const lumenSpinnerElementConfig: {
     readonly baseClassName: "ui-spinner";
+    readonly observedAttributes: readonly ["aria-hidden", "aria-label", "aria-labelledby", "role"];
     readonly tagName: "lumen-spinner";
 };
 export declare const lumenStackElementConfig: {
     readonly attributeClasses: {
+        readonly align: {
+            readonly center: "ui-stack--align-center";
+            readonly end: "ui-stack--align-end";
+            readonly start: "ui-stack--align-start";
+            readonly stretch: "ui-stack--align-stretch";
+        };
         readonly direction: {
             readonly horizontal: "ui-stack--horizontal";
             readonly vertical: "ui-stack--vertical";
         };
+        readonly justify: {
+            readonly between: "ui-stack--justify-between";
+            readonly center: "ui-stack--justify-center";
+            readonly end: "ui-stack--justify-end";
+            readonly start: "ui-stack--justify-start";
+        };
+        readonly wrap: {
+            readonly '': "ui-stack--wrap";
+            readonly true: "ui-stack--wrap";
+        };
         readonly gap: {
+            readonly '2xl': "ui-stack--gap-2xl";
+            readonly '3xl': "ui-stack--gap-3xl";
+            readonly group: "ui-stack--gap-group";
+            readonly related: "ui-stack--gap-related";
+            readonly section: "ui-stack--gap-section";
+            readonly xs: "ui-stack--gap-xs";
             readonly lg: "ui-stack--gap-lg";
             readonly md: "ui-stack--gap-md";
             readonly none: "ui-stack--gap-none";
@@ -127,7 +167,7 @@ export declare const lumenStackElementConfig: {
     readonly defaults: {
         readonly 'data-ui-stack': "";
         readonly direction: "vertical";
-        readonly gap: "md";
+        readonly gap: "group";
     };
     readonly tagName: "lumen-stack";
 };
@@ -142,20 +182,20 @@ export declare const lumenVisuallyHiddenElementConfig: {
     };
     readonly tagName: "lumen-visually-hidden";
 };
-export declare const LumenCardContentElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenCardDescriptionElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenCardFooterElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenCardHeaderElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenCardTitleElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenContainerElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenDirectionElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenGridElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenLabelElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenSeparatorElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenSkeletonElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenSpinnerElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenStackElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenTypographyElement: import("../element-base.js").LumenElementConstructor;
-export declare const LumenVisuallyHiddenElement: import("../element-base.js").LumenElementConstructor;
+export declare const LumenCardContentElement: LumenElementConstructor;
+export declare const LumenCardDescriptionElement: LumenElementConstructor;
+export declare const LumenCardFooterElement: LumenElementConstructor;
+export declare const LumenCardHeaderElement: LumenElementConstructor;
+export declare const LumenCardTitleElement: LumenElementConstructor;
+export declare const LumenContainerElement: LumenElementConstructor;
+export declare const LumenDirectionElement: LumenElementConstructor;
+export declare const LumenGridElement: LumenElementConstructor;
+export declare const LumenLabelElement: LumenElementConstructor;
+export declare const LumenSeparatorElement: LumenElementConstructor;
+export declare const LumenSkeletonElement: LumenElementConstructor;
+export declare const LumenSpinnerElement: LumenElementConstructor;
+export declare const LumenStackElement: LumenElementConstructor;
+export declare const LumenTypographyElement: LumenElementConstructor;
+export declare const LumenVisuallyHiddenElement: LumenElementConstructor;
 export declare const defineLumenFoundations: (registry?: LumenCustomElementRegistry) => void;
 //# sourceMappingURL=foundations.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/components/foundations.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAO3B,eAAO,MAAM,6BAA6B;;;;;;CAIH,CAAA;AAEvC,eAAO,MAAM,iCAAiC;;;;;;CAIP,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;CAYD,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBI,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;CAGG,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;CAUD,CAAA;AAEvC,eAAO,MAAM,0BAA0B;;;CAGA,CAAA;AAEvC,eAAO,MAAM,yBAAyB;;;CAGC,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;CAiBG,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;CAGF,CAAA;AAEvC,eAAO,MAAM,gCAAgC;;;;;;CAIN,CAAA;AAkBvC,eAAO,MAAM,uBAAuB,sDAAsB,CAAA;AAC1D,eAAO,MAAM,2BAA2B,sDAA0B,CAAA;AAClE,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,gBAAgB,sDAAe,CAAA;AAC5C,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,oBAAoB,sDAAmB,CAAA;AACpD,eAAO,MAAM,mBAAmB,sDAAkB,CAAA;AAClD,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,0BAA0B,sDAAyB,CAAA;AAoBhE,eAAO,MAAM,sBAAsB,GACjC,WAAW,0BAA0B,KACpC,IAIF,CAAA"}
+{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/components/foundations.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,0BAA0B,EAG/B,KAAK,uBAAuB,EAC7B,MAAM,oBAAoB,CAAA;AAuK3B,eAAO,MAAM,6BAA6B;;;;;;CAIH,CAAA;AAEvC,eAAO,MAAM,iCAAiC;;;;;;CAIP,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;CAYD,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BI,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;CAGG,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;CAUD,CAAA;AAEvC,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;CAQA,CAAA;AAEvC,eAAO,MAAM,yBAAyB;;;;CAIC,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCG,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;CAGF,CAAA;AAEvC,eAAO,MAAM,gCAAgC;;;;;;CAIN,CAAA;AA+BvC,eAAO,MAAM,uBAAuB,yBAAsB,CAAA;AAC1D,eAAO,MAAM,2BAA2B,yBAA0B,CAAA;AAClE,eAAO,MAAM,sBAAsB,yBAAqB,CAAA;AACxD,eAAO,MAAM,sBAAsB,yBAAqB,CAAA;AACxD,eAAO,MAAM,qBAAqB,yBAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,yBAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,yBAAoB,CAAA;AACtD,eAAO,MAAM,gBAAgB,yBAAe,CAAA;AAC5C,eAAO,MAAM,iBAAiB,yBAAgB,CAAA;AAC9C,eAAO,MAAM,qBAAqB,yBAAoB,CAAA;AACtD,eAAO,MAAM,oBAAoB,yBAAmB,CAAA;AACpD,eAAO,MAAM,mBAAmB,yBAAkB,CAAA;AAClD,eAAO,MAAM,iBAAiB,yBAAgB,CAAA;AAC9C,eAAO,MAAM,sBAAsB,yBAAqB,CAAA;AACxD,eAAO,MAAM,0BAA0B,yBAAyB,CAAA;AAoBhE,eAAO,MAAM,sBAAsB,GACjC,WAAW,0BAA0B,KACpC,IAIF,CAAA"}