@santi020k/lumen-elements 1.6.0 → 1.7.0

package/README.md

@@ -10,19 +10,32 @@ This package registers standards-based custom elements for the shared Lumen prim
 pnpm add @santi020k/lumen-elements
 ```
 
+The adapter also exposes Lumen's discovery and diagnostics CLI:
+
+```bash
+pnpm exec lumen show Tabs
+pnpm exec lumen doctor
+```
+
 Load the shared stylesheet once from your app entry or global CSS.
 
 ```css
 @import "@santi020k/lumen-elements/styles.css";
 ```
 
+Pair granular registrations with `@santi020k/lumen-elements/styles/critical.css` when the product
+uses only the essential forms, feedback, tabs, dialogs, calendar, and data-table surface. Use the
+complete stylesheet for the full element catalog.
+
 The stylesheet defaults `--ui-font` to `"Montserrat", "Avenir Next", "Segoe UI", sans-serif`.
 It declares the family stack but does not bundle or load font files. Load Montserrat once through
 your preferred delivery path, or override `--ui-font` in application CSS.
 
 ## Usage
 
-Register the elements once, then use `lumen-*` tags anywhere HTML is valid.
+Register the elements once per custom-element registry, then use `lumen-*` tags anywhere HTML is
+valid. Repeated calls are idempotent, and an explicitly supplied scoped registry is populated
+independently from the document registry.
 
 ```html
 <script type="module">
@@ -38,6 +51,60 @@ Register the elements once, then use `lumen-*` tags anywhere HTML is valid.
 </lumen-card>
 ```
 
+To limit registration to the tags a scoped surface owns, pass their catalog names before an
+optional custom registry:
+
+```ts
+import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+defineLumenElements(['Card', 'Input', 'Button'])
+```
+
+The component-name list is typed, duplicate names are ignored, already-registered tags are
+preserved, and omitting it retains complete-catalog registration. This controls registry scope, but
+the `define` module still contains the complete implementation.
+
+For a small surface that uses only Badge, Button, Card, and Combobox, import their implementation-level
+entrypoints instead:
+
+```ts
+import { defineLumenBadge } from '@santi020k/lumen-elements/components/badge'
+import { defineLumenButton } from '@santi020k/lumen-elements/components/button'
+import { defineLumenCard } from '@santi020k/lumen-elements/components/card'
+import { defineLumenCombobox } from '@santi020k/lumen-elements/components/combobox'
+
+defineLumenBadge()
+defineLumenButton()
+defineLumenCard()
+defineLumenCombobox()
+```
+
+Each function accepts an optional custom-element registry, is idempotent, and registers the exact
+constructor used by the complete catalog. The Combobox entrypoint includes its filtering, keyboard,
+selection, dismissal, and focus behavior without importing the complete catalog. Other components
+still use `defineLumenElements`; do not replace the full entrypoint when the application needs a
+behavior-backed element that does not yet have a granular module.
+
+Foundation-only pages can register fifteen layout, composition, and accessibility elements as one
+small implementation-level bundle:
+
+```ts
+import { defineLumenFoundations } from '@santi020k/lumen-elements/components/foundations'
+
+defineLumenFoundations()
+```
+
+This bundle contains the Card compound parts, Container, Direction, Grid, Label, Separator,
+Skeleton, Spinner, Stack, Typography, and VisuallyHidden. It does not import the complete catalog.
+
+`lumen-phone-input` can generate its complete country and telephone controls. It exposes `value`,
+`valid`, and `e164`, and emits `ui:phone-change` with the normalized phone model. Country names and
+calling codes remain visible so the flag is never the only identifier.
+
+```html
+<lumen-phone-input country="CO" locale="en-US" name="hospitalPhone"></lumen-phone-input>
+```
+
 ## Language selection
 
 `lumen-language-toggle` cycles through an ordered JSON `locales` list and generates visible
@@ -88,8 +155,7 @@ internal native control provides the same contract when `ElementInternals` is un
 ```
 
 `lumen-input` forwards the numeric `size` attribute to its internal native input. Use
-`visual-size="sm"` or `visual-size="lg"` for presentation. The pre-1.0 `size="sm|lg"` visual alias
-remains available for incremental migrations.
+`visual-size="sm"` or `visual-size="lg"` for presentation.
 
 ```html
 <lumen-input name="code" size="12" visual-size="sm"></lumen-input>
@@ -167,8 +233,8 @@ attribute form is useful for static HTML and server output.
 ></lumen-line-chart>
 ```
 
-`lumen-sparkline` also accepts comma-separated or JSON `values`. Bar, line, and pie charts include
-a revealable semantic table unless `show-table="false"` is set. `lumen-pie-chart` uses the first
+`lumen-sparkline` also accepts comma-separated or JSON `values`. Every data chart includes a
+revealable semantic table unless `show-table="false"` is set. `lumen-pie-chart` uses the first
 serialized series and defaults to `variant="donut"`.
 
 ## Optimized images
@@ -222,6 +288,8 @@ their registered custom elements; no Astro runtime or host controller is require
 Rich text controls may provide `data-ui-editor-value` for commands such as `formatBlock` and
 `createLink`; editable surfaces emit `ui:editor-change` with both HTML and plain text, support common
 formatting shortcuts, and keep toggle controls synchronized through `aria-pressed`.
+`lumen-tabs` keeps the selected trigger visible in narrow horizontal lists and emits
+`ui:tabs-change`; import `LumenTabsChangeDetail` or `LumenTabsChangeEvent` for its typed detail.
 
 `<lumen-kanban-board>` and `<lumen-kanban-column value="…">` provide the same controlled board
 contract. Mark ordinary card items with `data-ui-kanban-item` and put `data-ui-kanban-handle` on a
@@ -254,6 +322,13 @@ You can also use the shared document events: dispatch `ui:toast` to create, `ui:
 update, and `ui:toast-dismiss` to dismiss runtime toasts. Toast actions emit `ui:toast-action`
 unless an action supplies a custom event name.
 
+Use `<lumen-error-state>` when a region or page cannot show its primary content. Keep its visible
+heading, explanation, optional safe reference, and recovery actions in light DOM, label the region
+with `aria-labelledby`, and use the documented `data-slot="error-state-*"` hooks. Lumen presents the
+failure; application code owns exception capture, logging, and retry policy. See the repository
+[Web Components error-handling guide](../../docs/error-handling.md#web-components) for the complete
+light-DOM structure, ARIA ownership, retry boundary, and verification guidance.
+
 ## Motion
 
 The elements adapter exposes the same motion vocabulary as Astro and React. Use

package/bin/lumen.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '@santi020k/lumen/cli'

package/dist/components/badge.d.ts

@@ -0,0 +1,21 @@
+import { type LumenCustomElementRegistry } from '../element-base.js';
+export declare const lumenBadgeElementConfig: {
+    readonly attributeClasses: {
+        readonly variant: {
+            readonly default: "ui-badge--default";
+            readonly destructive: "ui-badge--destructive";
+            readonly outline: "ui-badge--outline";
+            readonly secondary: "ui-badge--secondary";
+            readonly success: "ui-badge--success";
+            readonly warning: "ui-badge--warning";
+        };
+    };
+    readonly baseClassName: "ui-badge";
+    readonly defaults: {
+        readonly variant: "default";
+    };
+    readonly tagName: "lumen-badge";
+};
+export declare const LumenBadgeElement: import("../element-base.js").LumenElementConstructor;
+export declare const defineLumenBadge: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;CAcG,CAAA;AAEvC,eAAO,MAAM,iBAAiB,sDAE7B,CAAA;AAED,eAAO,MAAM,gBAAgB,GAC3B,WAAW,0BAA0B,KACpC,IAEF,CAAA"}

package/dist/components/badge.js

@@ -0,0 +1,20 @@
+import { createLumenElementClass, defineLumenElement } from '../element-base.js';
+export const lumenBadgeElementConfig = {
+    attributeClasses: {
+        variant: {
+            default: 'ui-badge--default',
+            destructive: 'ui-badge--destructive',
+            outline: 'ui-badge--outline',
+            secondary: 'ui-badge--secondary',
+            success: 'ui-badge--success',
+            warning: 'ui-badge--warning'
+        }
+    },
+    baseClassName: 'ui-badge',
+    defaults: { variant: 'default' },
+    tagName: 'lumen-badge'
+};
+export const LumenBadgeElement = createLumenElementClass(lumenBadgeElementConfig);
+export const defineLumenBadge = (registry) => {
+    defineLumenElement(lumenBadgeElementConfig, LumenBadgeElement, registry);
+};

package/dist/components/button.d.ts

@@ -0,0 +1,38 @@
+import { type LumenCustomElementRegistry } from '../element-base.js';
+export declare const lumenButtonElementConfig: {
+    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";
+};
+export declare const LumenButtonElement: import("../element-base.js").LumenElementConstructor;
+export declare const defineLumenButton: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/button.js

@@ -0,0 +1,35 @@
+import { createLumenElementClass, defineLumenElement } from '../element-base.js';
+export const lumenButtonElementConfig = {
+    attributeClasses: {
+        variant: {
+            default: 'ui-button--default',
+            destructive: 'ui-button--destructive',
+            ghost: 'ui-button--ghost',
+            link: 'ui-button--link',
+            outline: 'ui-button--outline',
+            secondary: 'ui-button--secondary'
+        },
+        size: {
+            default: 'ui-button--default-size',
+            icon: 'ui-button--icon',
+            lg: 'ui-button--lg',
+            sm: 'ui-button--sm'
+        },
+        disabled: { true: 'ui-button--disabled' },
+        loading: { true: 'ui-button--loading' }
+    },
+    baseClassName: 'ui-button',
+    defaults: {
+        'data-slot': 'button',
+        role: 'button',
+        size: 'default',
+        tabindex: '0',
+        variant: 'default'
+    },
+    role: 'button',
+    tagName: 'lumen-button'
+};
+export const LumenButtonElement = createLumenElementClass(lumenButtonElementConfig);
+export const defineLumenButton = (registry) => {
+    defineLumenElement(lumenButtonElementConfig, LumenButtonElement, registry);
+};

package/dist/components/card.d.ts

@@ -0,0 +1,25 @@
+import { type LumenCustomElementRegistry } from '../element-base.js';
+export declare const lumenCardElementConfig: {
+    readonly attributeClasses: {
+        readonly glass: {
+            readonly strong: "ui-card--glass ui-glass-strong";
+            readonly subtle: "ui-card--glass ui-glass-subtle";
+            readonly true: "ui-card--glass";
+        };
+        readonly variant: {
+            readonly glass: "ui-card--glass";
+            readonly interactive: "ui-card--interactive";
+            readonly muted: "ui-card--muted";
+            readonly unstyled: "ui-card--unstyled";
+        };
+    };
+    readonly baseClassName: "ui-card";
+    readonly defaults: {
+        readonly 'data-slot': "card";
+        readonly variant: "default";
+    };
+    readonly tagName: "lumen-card";
+};
+export declare const LumenCardElement: import("../element-base.js").LumenElementConstructor;
+export declare const defineLumenCard: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/card.js

@@ -0,0 +1,23 @@
+import { createLumenElementClass, defineLumenElement } from '../element-base.js';
+export const lumenCardElementConfig = {
+    attributeClasses: {
+        glass: {
+            strong: 'ui-card--glass ui-glass-strong',
+            subtle: 'ui-card--glass ui-glass-subtle',
+            true: 'ui-card--glass'
+        },
+        variant: {
+            glass: 'ui-card--glass',
+            interactive: 'ui-card--interactive',
+            muted: 'ui-card--muted',
+            unstyled: 'ui-card--unstyled'
+        }
+    },
+    baseClassName: 'ui-card',
+    defaults: { 'data-slot': 'card', variant: 'default' },
+    tagName: 'lumen-card'
+};
+export const LumenCardElement = createLumenElementClass(lumenCardElementConfig);
+export const defineLumenCard = (registry) => {
+    defineLumenElement(lumenCardElementConfig, LumenCardElement, registry);
+};

package/dist/components/combobox.d.ts

@@ -0,0 +1,23 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenComboboxElementConfig: {
+    readonly baseClassName: "ui-combobox";
+    readonly defaults: {
+        readonly 'data-ui-combobox': "";
+    };
+    readonly tagName: "lumen-combobox";
+};
+export declare class LumenComboboxElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-combobox";
+        readonly defaults: {
+            readonly 'data-ui-combobox': "";
+        };
+        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

@@ -0,0 +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"}

package/dist/components/combobox.js

@@ -0,0 +1,138 @@
+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;
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof document === 'undefined')
+            return;
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.setupCombobox(this.abortController.signal);
+    }
+    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 });
+    }
+}
+export const defineLumenCombobox = (registry) => {
+    defineLumenElement(lumenComboboxElementConfig, LumenComboboxElement, registry);
+};

package/dist/components/foundations.d.ts

@@ -0,0 +1,161 @@
+import { type LumenCustomElementRegistry } from '../element-base.js';
+export declare const lumenCardContentElementConfig: {
+    readonly baseClassName: "ui-card__content";
+    readonly defaults: {
+        readonly 'data-slot': "card-content";
+    };
+    readonly tagName: "lumen-card-content";
+};
+export declare const lumenCardDescriptionElementConfig: {
+    readonly baseClassName: "ui-card__description";
+    readonly defaults: {
+        readonly 'data-slot': "card-description";
+    };
+    readonly tagName: "lumen-card-description";
+};
+export declare const lumenCardFooterElementConfig: {
+    readonly baseClassName: "ui-card__footer";
+    readonly defaults: {
+        readonly 'data-slot': "card-footer";
+    };
+    readonly tagName: "lumen-card-footer";
+};
+export declare const lumenCardHeaderElementConfig: {
+    readonly baseClassName: "ui-card__header";
+    readonly defaults: {
+        readonly 'data-slot': "card-header";
+    };
+    readonly tagName: "lumen-card-header";
+};
+export declare const lumenCardTitleElementConfig: {
+    readonly baseClassName: "ui-card__title";
+    readonly defaults: {
+        readonly 'data-slot': "card-title";
+    };
+    readonly tagName: "lumen-card-title";
+};
+export declare const lumenContainerElementConfig: {
+    readonly attributeClasses: {
+        readonly size: {
+            readonly full: "ui-container--full";
+            readonly lg: "ui-container--lg";
+            readonly md: "ui-container--md";
+            readonly sm: "ui-container--sm";
+        };
+    };
+    readonly baseClassName: "ui-container";
+    readonly defaults: {
+        readonly 'data-ui-container': "";
+        readonly size: "lg";
+    };
+    readonly tagName: "lumen-container";
+};
+export declare const lumenDirectionElementConfig: {
+    readonly baseClassName: "ui-direction";
+    readonly defaults: {
+        readonly dir: "ltr";
+    };
+    readonly tagName: "lumen-direction";
+};
+export declare const lumenGridElementConfig: {
+    readonly attributeClasses: {
+        readonly columns: {
+            readonly 1: "ui-grid--columns-1";
+            readonly 2: "ui-grid--columns-2";
+            readonly 3: "ui-grid--columns-3";
+            readonly 4: "ui-grid--columns-4";
+            readonly 6: "ui-grid--columns-6";
+            readonly 12: "ui-grid--columns-12";
+            readonly auto: "ui-grid--columns-auto";
+        };
+        readonly gap: {
+            readonly lg: "ui-grid--gap-lg";
+            readonly md: "ui-grid--gap-md";
+            readonly none: "ui-grid--gap-none";
+            readonly sm: "ui-grid--gap-sm";
+            readonly xl: "ui-grid--gap-xl";
+        };
+    };
+    readonly baseClassName: "ui-grid";
+    readonly defaults: {
+        readonly 'data-ui-grid': "";
+        readonly columns: "auto";
+        readonly gap: "md";
+    };
+    readonly tagName: "lumen-grid";
+};
+export declare const lumenLabelElementConfig: {
+    readonly baseClassName: "ui-label";
+    readonly tagName: "lumen-label";
+};
+export declare const lumenSeparatorElementConfig: {
+    readonly attributeClasses: {
+        readonly orientation: {
+            readonly horizontal: "ui-separator--horizontal";
+            readonly vertical: "ui-separator--vertical";
+        };
+    };
+    readonly baseClassName: "ui-separator";
+    readonly defaults: {
+        readonly orientation: "horizontal";
+    };
+    readonly tagName: "lumen-separator";
+};
+export declare const lumenSkeletonElementConfig: {
+    readonly baseClassName: "ui-skeleton";
+    readonly tagName: "lumen-skeleton";
+};
+export declare const lumenSpinnerElementConfig: {
+    readonly baseClassName: "ui-spinner";
+    readonly tagName: "lumen-spinner";
+};
+export declare const lumenStackElementConfig: {
+    readonly attributeClasses: {
+        readonly direction: {
+            readonly horizontal: "ui-stack--horizontal";
+            readonly vertical: "ui-stack--vertical";
+        };
+        readonly gap: {
+            readonly lg: "ui-stack--gap-lg";
+            readonly md: "ui-stack--gap-md";
+            readonly none: "ui-stack--gap-none";
+            readonly sm: "ui-stack--gap-sm";
+            readonly xl: "ui-stack--gap-xl";
+        };
+    };
+    readonly baseClassName: "ui-stack";
+    readonly defaults: {
+        readonly 'data-ui-stack': "";
+        readonly direction: "vertical";
+        readonly gap: "md";
+    };
+    readonly tagName: "lumen-stack";
+};
+export declare const lumenTypographyElementConfig: {
+    readonly baseClassName: "ui-typography";
+    readonly tagName: "lumen-typography";
+};
+export declare const lumenVisuallyHiddenElementConfig: {
+    readonly baseClassName: "ui-visually-hidden";
+    readonly defaults: {
+        readonly 'data-ui-visually-hidden': "";
+    };
+    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 defineLumenFoundations: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=foundations.d.ts.map

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

@@ -0,0 +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"}