luxen-ui 0.6.2 → 0.8.0

package/dist/elements/avatar/avatar.d.ts

@@ -2,6 +2,11 @@ import { LuxenElement } from '../../shared/luxen-element.js';
 /**
  * @summary An avatar component for displaying user images, initials, or a default icon.
  * @customElement l-avatar
+ *
+ * @cssproperty --color - Background fill color for initials and the default icon.
+ * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).
+ *
+ * @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.
  */
 export declare class Avatar extends LuxenElement {
     static styles: import("lit").CSSResult[];

package/dist/elements/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;GAGG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAGrC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,IAAI,SAAQ;IAGZ,KAAK,SAAK;IAGV,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;GAQG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAGrC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,IAAI,SAAQ;IAGZ,KAAK,SAAK;IAGV,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IASP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IA6BN,OAAO,CAAC,QAAQ,CAEd;CACH"}

package/dist/elements/avatar/avatar.js

@@ -25,6 +25,11 @@ const defaultIcon = svg `<svg class="icon" viewBox="0 0 24 24" fill="currentColo
 /**
  * @summary An avatar component for displaying user images, initials, or a default icon.
  * @customElement l-avatar
+ *
+ * @cssproperty --color - Background fill color for initials and the default icon.
+ * @cssproperty --appearance - Set to `circle` for a fully circular avatar (default is a rounded square).
+ *
+ * @cssClass .l-avatar-group - Flex wrapper that overlaps a row of stacked avatars.
  */
 export class Avatar extends LuxenElement {
     constructor() {

package/dist/elements/button/button.meta.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @summary Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.
+ *
+ * @nativeElement button
+ * @selector .l-button
+ *
+ * @cssClass .l-button - Base button style.
+ *
+ * @attribute disabled - Disables the button.
+ * @attribute command - Invoker command (`show-modal`, `close`, `show-popover`, etc.).
+ * @attribute commandfor - ID of the target element for `command`.
+ * @attribute data-variant - primary | destructive — Visual variant. Default is the secondary style.
+ * @attribute data-size - sm | lg | xl — Control size. Default is md.
+ * @attribute data-icon-only - Icon-only mode (square button, width equals height). Auto-detected for a single icon child.
+ * @attribute data-press-effect - Press effect (scale + translate on active).
+ *
+ * @cssproperty [--height=32px] - Button height (md size).
+ * @cssproperty [--padding-inline=0.625rem] - Horizontal padding.
+ * @cssproperty --background-color - Background color.
+ * @cssproperty --background-color-hover - Background color on hover.
+ * @cssproperty --background-color-active - Background color on press.
+ * @cssproperty --text-color - Text color.
+ * @cssproperty --text-color-hover - Text color on hover.
+ * @cssproperty --border-color - Border color.
+ * @cssproperty --border-color-hover - Border color on hover.
+ * @cssproperty --font-size - Font size.
+ *
+ * @example Primary
+ * <button class="l-button" data-variant="primary">Save</button>
+ */
+export declare class ButtonMeta {
+}
+//# sourceMappingURL=button.meta.d.ts.map

package/dist/elements/button/button.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/button/button.meta.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,qBAAa,UAAU;CAAG"}

package/dist/elements/button/button.meta.js

@@ -0,0 +1,44 @@
+/*
+ * Metadata sidecar for the native <button> element (CSS-only, styled via
+ * `.l-button`). It carries no runtime code — the JSDoc below is the single
+ * source of truth for the button's reference docs and the generated skill,
+ * read by the `native-meta` CEM plugin (see scripts/cem-plugins/native-meta.js)
+ * and emitted into dist/metadata/button.json by normalize-metadata.mjs.
+ *
+ * Keep this in sync with src/css/elements/button.css.
+ */
+/**
+ * @summary Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.
+ *
+ * @nativeElement button
+ * @selector .l-button
+ *
+ * @cssClass .l-button - Base button style.
+ *
+ * @attribute disabled - Disables the button.
+ * @attribute command - Invoker command (`show-modal`, `close`, `show-popover`, etc.).
+ * @attribute commandfor - ID of the target element for `command`.
+ * @attribute data-variant - primary | destructive — Visual variant. Default is the secondary style.
+ * @attribute data-size - sm | lg | xl — Control size. Default is md.
+ * @attribute data-icon-only - Icon-only mode (square button, width equals height). Auto-detected for a single icon child.
+ * @attribute data-press-effect - Press effect (scale + translate on active).
+ *
+ * @cssproperty [--height=32px] - Button height (md size).
+ * @cssproperty [--padding-inline=0.625rem] - Horizontal padding.
+ * @cssproperty --background-color - Background color.
+ * @cssproperty --background-color-hover - Background color on hover.
+ * @cssproperty --background-color-active - Background color on press.
+ * @cssproperty --text-color - Text color.
+ * @cssproperty --text-color-hover - Text color on hover.
+ * @cssproperty --border-color - Border color.
+ * @cssproperty --border-color-hover - Border color on hover.
+ * @cssproperty --font-size - Font size.
+ *
+ * @example Primary
+ * <button class="l-button" data-variant="primary">Save</button>
+ */
+// JSDoc-only metadata carrier — the CEM analyzer reads the doc comment above; the
+// class body is intentionally empty.
+// oxlint-disable-next-line typescript/no-extraneous-class
+export class ButtonMeta {
+}

package/dist/elements/carousel/carousel.d.ts

@@ -34,6 +34,12 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
  * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
+ *
+ * @event select - Fired when the active slide changes. Detail: `{ index: number }`.
+ * @event slides-in-view - Fired when the set of slides in view changes. Detail: `{ indexes: number[] }`.
+ * @event fullscreen - Fired when the fullscreen button is activated.
+ *
+ * @customElement l-carousel
  */
 export declare class Carousel extends LuxenElement {
     static styles: CSSResultGroup;

package/dist/elements/carousel/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/carousel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel/carousel.ts"],"names":[],"mappings":"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"}

package/dist/elements/carousel/carousel.js

@@ -54,6 +54,12 @@ const styles = unsafeCSS(rawStyles);
  * @cssproperty --dot-color-active - Color of active dot.
  * @cssproperty --dot-margin - Margin around dots container.
  * @cssproperty --dot-edge-scale - Scale factor applied to edge dots that signal more dots exist beyond the visible window (default `0.5`).
+ *
+ * @event select - Fired when the active slide changes. Detail: `{ index: number }`.
+ * @event slides-in-view - Fired when the set of slides in view changes. Detail: `{ indexes: number[] }`.
+ * @event fullscreen - Fired when the fullscreen button is activated.
+ *
+ * @customElement l-carousel
  */
 export class Carousel extends LuxenElement {
     constructor() {

package/dist/elements/carousel-item/carousel-item.d.ts

@@ -4,6 +4,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * A single slide inside an `<l-carousel>`.
  *
  * @cssproperty --aspect-ratio - Aspect ratio of the slide.
+ *
+ * @customElement l-carousel-item
  */
 export declare class CarouselItem extends LuxenElement {
     static styles: CSSResultGroup;

package/dist/elements/carousel-item/carousel-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/carousel-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAM7D;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAErD,iBAAiB;IAKjB,MAAM;CAGhB"}
+{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/carousel-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAM7D;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAErD,iBAAiB;IAKjB,MAAM;CAGhB"}

package/dist/elements/carousel-item/carousel-item.js

@@ -7,6 +7,8 @@ const styles = unsafeCSS(rawStyles);
  * A single slide inside an `<l-carousel>`.
  *
  * @cssproperty --aspect-ratio - Aspect ratio of the slide.
+ *
+ * @customElement l-carousel-item
  */
 export class CarouselItem extends LuxenElement {
     connectedCallback() {

package/dist/elements/close-button/close-button.meta.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @summary A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.
+ *
+ * @nativeElement button
+ * @selector .l-close
+ *
+ * @attribute data-appearance - ring | square | circle — Visual appearance (matches the imported appearance CSS).
+ * @attribute command - Invoker command (typically `close`).
+ * @attribute commandfor - ID of the target element to close.
+ *
+ * @cssClass .l-close - Base close button with X icon via CSS mask.
+ *
+ * @cssproperty [--size=36px] - Button size.
+ * @cssproperty --icon-color - Icon color.
+ * @cssproperty [--icon-size=24px] - Icon size.
+ * @cssproperty --ring-color - Hover ring color (`ring` appearance only).
+ * @cssproperty --ring-tickness - Hover ring thickness (`ring` appearance only).
+ *
+ * @example Ring appearance
+ * <button class="l-close" data-appearance="ring" aria-label="Close"></button>
+ */
+export declare class CloseButtonMeta {
+}
+//# sourceMappingURL=close-button.meta.d.ts.map

package/dist/elements/close-button/close-button.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-button.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/close-button/close-button.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,qBAAa,eAAe;CAAG"}

package/dist/elements/close-button/close-button.meta.js

@@ -0,0 +1,30 @@
+/*
+ * Metadata sidecar for the native close button (CSS-only, styled via `.l-close`
+ * on a native `<button>`). JSDoc-only — read by the `native-meta` CEM plugin and
+ * emitted into dist/metadata/close-button.json. Keep in sync with
+ * src/css/elements/close-button/ (_base.css + ring/square/circle appearances).
+ */
+/**
+ * @summary A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.
+ *
+ * @nativeElement button
+ * @selector .l-close
+ *
+ * @attribute data-appearance - ring | square | circle — Visual appearance (matches the imported appearance CSS).
+ * @attribute command - Invoker command (typically `close`).
+ * @attribute commandfor - ID of the target element to close.
+ *
+ * @cssClass .l-close - Base close button with X icon via CSS mask.
+ *
+ * @cssproperty [--size=36px] - Button size.
+ * @cssproperty --icon-color - Icon color.
+ * @cssproperty [--icon-size=24px] - Icon size.
+ * @cssproperty --ring-color - Hover ring color (`ring` appearance only).
+ * @cssproperty --ring-tickness - Hover ring thickness (`ring` appearance only).
+ *
+ * @example Ring appearance
+ * <button class="l-close" data-appearance="ring" aria-label="Close"></button>
+ */
+// oxlint-disable-next-line typescript/no-extraneous-class -- JSDoc-only metadata carrier.
+export class CloseButtonMeta {
+}

package/dist/elements/dialog/dialog.css

@@ -87,6 +87,21 @@ dialog {
   padding: var(--footer-padding);
 }
 
+/* Collapse the footer row when nothing is slotted into it, so an empty
+   dialog/drawer reserves no space at the bottom. `data-empty` is toggled by the
+   HasSlotController in dialog.ts: `:host(:has(...))` can't be used because
+   `:has()` is invalid inside `:host()` and the whole rule is dropped by the
+   browser. */
+[part='footer'][data-empty] {
+  display: none;
+}
+
+/* With the footer collapsed, the body has to provide its own block-end padding
+   (normally inherited visually from the footer padding below it). */
+[part='body']:has(~ [part='footer'][data-empty]) {
+  padding-block-end: var(--padding);
+}
+
 /* Without a header, the body has to provide its own block-start padding
    (normally inherited visually from the header padding above it). */
 :host([without-header]) [part='body'] {

package/dist/elements/dialog/dialog.d.ts

@@ -17,18 +17,23 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @csspart body - The body wrapper around the default slot.
  * @csspart footer - The footer wrapper around the footer slot.
  *
- * @cssproperty --width - Dialog width. Default `31rem`.
- * @cssproperty --border-radius - Dialog border radius. Default `6px`.
- * @cssproperty --padding - Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
- * @cssproperty --show-duration - Open transition duration. Default `200ms`.
- * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty [--width=31rem] - Dialog width.
+ * @cssproperty [--border-radius=6px] - Dialog border radius.
+ * @cssproperty [--padding=1.5rem] - Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
+ * @cssproperty [--show-duration=200ms] - Open transition duration.
+ * @cssproperty [--hide-duration=200ms] - Close transition duration.
  * @cssproperty --backdrop - Backdrop color.
- * @cssproperty --backdrop-blur - Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.
+ * @cssproperty [--backdrop-blur=0] - Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
  *
  * @event show - Fired when the dialog opens. Not cancelable.
  * @event after-show - Fired after the open animation completes.
  * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
+ *
+ * @command --show - Sets `open = true`.
+ * @command --hide - Sets `open = false`.
+ *
+ * @customElement l-dialog
  */
 export declare class Dialog extends LuxenElement {
     static styles: import("lit").CSSResult[];
@@ -40,6 +45,7 @@ export declare class Dialog extends LuxenElement {
     lightDismiss: boolean;
     /** Hide the header entirely (title and close slot). */
     withoutHeader: boolean;
+    private _slots;
     dialog: HTMLDialogElement;
     protected _modalKind: 'centered' | 'edge';
     private _mouseDownTarget;

package/dist/elements/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAgC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAErB,uDAAuD;IAEvD,aAAa,UAAS;IAGtB,MAAM,EAAG,iBAAiB,CAAC;IAI3B,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAc;IAEvD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CA0BP"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAiC7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAErB,uDAAuD;IAEvD,aAAa,UAAS;IAMtB,OAAO,CAAC,MAAM,CAAyC;IAGvD,MAAM,EAAG,iBAAiB,CAAC;IAI3B,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAAc;IAEvD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CA6BP"}

package/dist/elements/dialog/dialog.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { LuxenElement } from '../../shared/luxen-element.js';
+import { HasSlotController } from '../../shared/controllers/has-slot-controller.js';
 import hostStyles from '../../shared/styles/host.styles.js';
 import styles from './dialog.styles.js';
 const supportsClosedBy = typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;
@@ -46,18 +47,23 @@ if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
  * @csspart body - The body wrapper around the default slot.
  * @csspart footer - The footer wrapper around the footer slot.
  *
- * @cssproperty --width - Dialog width. Default `31rem`.
- * @cssproperty --border-radius - Dialog border radius. Default `6px`.
- * @cssproperty --padding - Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
- * @cssproperty --show-duration - Open transition duration. Default `200ms`.
- * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty [--width=31rem] - Dialog width.
+ * @cssproperty [--border-radius=6px] - Dialog border radius.
+ * @cssproperty [--padding=1.5rem] - Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
+ * @cssproperty [--show-duration=200ms] - Open transition duration.
+ * @cssproperty [--hide-duration=200ms] - Close transition duration.
  * @cssproperty --backdrop - Backdrop color.
- * @cssproperty --backdrop-blur - Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.
+ * @cssproperty [--backdrop-blur=0] - Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
  *
  * @event show - Fired when the dialog opens. Not cancelable.
  * @event after-show - Fired after the open animation completes.
  * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
+ *
+ * @command --show - Sets `open = true`.
+ * @command --hide - Sets `open = false`.
+ *
+ * @customElement l-dialog
  */
 export class Dialog extends LuxenElement {
     constructor() {
@@ -70,6 +76,11 @@ export class Dialog extends LuxenElement {
         this.lightDismiss = false;
         /** Hide the header entirely (title and close slot). */
         this.withoutHeader = false;
+        // Tracks whether the footer slot has content, so the footer row can collapse
+        // when empty (toggles `data-empty` below). A controller drives this because
+        // `:host(:has(> [slot='footer']))` is invalid — `:has()` can't be nested in
+        // `:host()`, so browsers drop the whole rule.
+        this._slots = new HasSlotController(this, 'footer');
         // Drives the scroll-lock stylesheet: `centered` reserves the scrollbar
         // gutter (no page shift); `edge` skips it (drawers sit flush to the edge).
         this._modalKind = 'centered';
@@ -203,7 +214,10 @@ export class Dialog extends LuxenElement {
         <div part="body">
           <slot></slot>
         </div>
-        <footer part="footer">
+        <footer
+          part="footer"
+          ?data-empty=${!this._slots.test('footer')}
+        >
           <slot name="footer"></slot>
         </footer>
       </dialog>

package/dist/elements/disclosure/disclosure.meta.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @summary A headless, animated disclosure built on native `<details>`/`<summary>`.
+ *
+ * @nativeElement details
+ * @selector .l-disclosure
+ *
+ * @attribute open - Native attribute — starts the disclosure expanded.
+ * @attribute name - Native attribute — groups disclosures into an exclusive accordion.
+ * @attribute data-marker - arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+ * @attribute data-variant - bordered — Adds border, background, and border-radius.
+ * @attribute disabled - Disables interaction (set on `<details>` or `<summary>`).
+ *
+ * @event toggle - Fires when the disclosure opens or closes (`e.newState` is `"open"` or `"closed"`).
+ *
+ * @cssClass .l-disclosure - Headless base — layout, animation, and marker behavior only.
+ *
+ * @cssproperty [--marker-size=20px] - Marker icon size.
+ * @cssproperty --marker-color - Marker icon color (default `var(--l-color-text-tertiary)`).
+ *
+ * @example Bordered with arrow marker
+ * <details class="l-disclosure" data-variant="bordered" data-marker="arrow">
+ *   <summary>Details</summary>
+ *   <div>Content</div>
+ * </details>
+ */
+export declare class DisclosureMeta {
+}
+//# sourceMappingURL=disclosure.meta.d.ts.map

package/dist/elements/disclosure/disclosure.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/disclosure/disclosure.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,cAAc;CAAG"}

package/dist/elements/disclosure/disclosure.meta.js

@@ -0,0 +1,34 @@
+/*
+ * Metadata sidecar for the native disclosure (CSS-only, styled via `.l-disclosure`
+ * on a native `<details>`/`<summary>`). JSDoc-only — read by the `native-meta`
+ * CEM plugin and emitted into dist/metadata/disclosure.json. Keep in sync with
+ * src/css/elements/disclosure.css.
+ */
+/**
+ * @summary A headless, animated disclosure built on native `<details>`/`<summary>`.
+ *
+ * @nativeElement details
+ * @selector .l-disclosure
+ *
+ * @attribute open - Native attribute — starts the disclosure expanded.
+ * @attribute name - Native attribute — groups disclosures into an exclusive accordion.
+ * @attribute data-marker - arrow | plus — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
+ * @attribute data-variant - bordered — Adds border, background, and border-radius.
+ * @attribute disabled - Disables interaction (set on `<details>` or `<summary>`).
+ *
+ * @event toggle - Fires when the disclosure opens or closes (`e.newState` is `"open"` or `"closed"`).
+ *
+ * @cssClass .l-disclosure - Headless base — layout, animation, and marker behavior only.
+ *
+ * @cssproperty [--marker-size=20px] - Marker icon size.
+ * @cssproperty --marker-color - Marker icon color (default `var(--l-color-text-tertiary)`).
+ *
+ * @example Bordered with arrow marker
+ * <details class="l-disclosure" data-variant="bordered" data-marker="arrow">
+ *   <summary>Details</summary>
+ *   <div>Content</div>
+ * </details>
+ */
+// oxlint-disable-next-line typescript/no-extraneous-class -- JSDoc-only metadata carrier.
+export class DisclosureMeta {
+}

package/dist/elements/divider/divider.d.ts

@@ -6,7 +6,7 @@ export type DividerOrientation = 'horizontal' | 'vertical';
  * @example <l-divider></l-divider>
  *
  * @cssproperty --color - The color of the divider line.
- * @cssproperty --width - The thickness of the divider line.
+ * @cssproperty --thickness - The thickness of the divider line.
  * @cssproperty --spacing - The spacing between the divider and its neighboring elements.
  *
  * @customElement l-divider

package/dist/elements/divider/divider.js

@@ -12,7 +12,7 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @example <l-divider></l-divider>
  *
  * @cssproperty --color - The color of the divider line.
- * @cssproperty --width - The thickness of the divider line.
+ * @cssproperty --thickness - The thickness of the divider line.
  * @cssproperty --spacing - The spacing between the divider and its neighboring elements.
  *
  * @customElement l-divider

package/dist/elements/drawer/drawer.d.ts

@@ -25,6 +25,11 @@ import { Dialog } from '../dialog/dialog.js';
  * @event after-show - Fired after the open animation completes.
  * @event hide - Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
+ *
+ * @command --show - Sets `open = true`.
+ * @command --hide - Sets `open = false`.
+ *
+ * @customElement l-drawer
  */
 export declare class Drawer extends Dialog {
     static styles: import("lit").CSSResult[];

package/dist/elements/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/drawer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,MAAM;IAChC,OAAgB,MAAM,4BAA4C;IAIlE,UAAmB,UAAU,EAAG,MAAM,CAAU;IAEhD,iFAAiF;IAEjF,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/drawer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAAa,MAAO,SAAQ,MAAM;IAChC,OAAgB,MAAM,4BAA4C;IAIlE,UAAmB,UAAU,EAAG,MAAM,CAAU;IAEhD,iFAAiF;IAEjF,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC"}

package/dist/elements/drawer/drawer.js

@@ -37,6 +37,11 @@ const drawerStyles = unsafeCSS(rawDrawerStyles);
  * @event after-show - Fired after the open animation completes.
  * @event hide - Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
+ *
+ * @command --show - Sets `open = true`.
+ * @command --hide - Sets `open = false`.
+ *
+ * @customElement l-drawer
  */
 export class Drawer extends Dialog {
     constructor() {

package/dist/elements/dropdown/dropdown.d.ts

@@ -23,6 +23,8 @@ import type { Placement } from '@floating-ui/dom';
  * @event hide - Fired before the dropdown closes. Cancelable.
  * @event after-hide - Fired after the close animation completes.
  * @event select - Fired when an item is selected. Detail: `{ item: DropdownItem }`.
+ *
+ * @customElement l-dropdown
  */
 export declare class Dropdown extends LuxenElement {
     static styles: import("lit").CSSResult[];

package/dist/elements/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAwBhB"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAwBhB"}

package/dist/elements/dropdown/dropdown.js

@@ -46,6 +46,8 @@ const styles = unsafeCSS(rawStyles);
  * @event hide - Fired before the dropdown closes. Cancelable.
  * @event after-hide - Fired after the close animation completes.
  * @event select - Fired when an item is selected. Detail: `{ item: DropdownItem }`.
+ *
+ * @customElement l-dropdown
  */
 export class Dropdown extends LuxenElement {
     constructor() {

package/dist/elements/dropdown-item/dropdown-item.d.ts

@@ -7,6 +7,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @slot suffix - Trailing content.
  *
  * @cssproperty --color - Text color.
+ *
+ * @customElement l-dropdown-item
  */
 export declare class DropdownItem extends LuxenElement {
     static styles: import("lit").CSSResult[];

package/dist/elements/dropdown-item/dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAO7D;;;;;;;;GAQG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAIb,MAAM;CAuChB"}
+{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAO7D;;;;;;;;;;GAUG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAIb,MAAM;CAuChB"}

package/dist/elements/dropdown-item/dropdown-item.js

@@ -30,6 +30,8 @@ const styles = unsafeCSS(rawStyles);
  * @slot suffix - Trailing content.
  *
  * @cssproperty --color - Text color.
+ *
+ * @customElement l-dropdown-item
  */
 export class DropdownItem extends LuxenElement {
     constructor() {

package/dist/elements/input-otp/input-otp.d.ts

@@ -8,6 +8,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @summary Stripe-style OTP input with visual digit cells over a hidden native input.
  * @customElement l-input-otp
  *
+ * @attribute size - sm | lg — Cell size. Default is md.
+ *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
  * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
  * @cssproperty --cell-gap - Space between cells (default: 0.5rem).

package/dist/elements/input-otp/input-otp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-otp/input-otp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IAC/B,gBAAgB;IAIzB,sFAAsF;IAEtF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB;IAKjB,oBAAoB;IAO7B,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;CACH"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-otp/input-otp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IAC/B,gBAAgB;IAIzB,sFAAsF;IAEtF,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB;IAKjB,oBAAoB;IAO7B,OAAO,CAAC,MAAM;IA4Dd,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,oBAAoB,CAE1B;CACH"}

package/dist/elements/input-otp/input-otp.js

@@ -15,6 +15,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @summary Stripe-style OTP input with visual digit cells over a hidden native input.
  * @customElement l-input-otp
  *
+ * @attribute size - sm | lg — Cell size. Default is md.
+ *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
  * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
  * @cssproperty --cell-gap - Space between cells (default: 0.5rem).

package/dist/elements/input-stepper/input-stepper.d.ts

@@ -17,6 +17,8 @@ export type InputStepperSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  *
  * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.
  * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.
+ *
+ * @customElement l-input-stepper
  */
 export declare class InputStepper extends LuxenElement {
     createRenderRoot(): this;

package/dist/elements/input-stepper/input-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IACnC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}
+{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IACnC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}

package/dist/elements/input-stepper/input-stepper.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property } from 'lit/decorators.js';
 import { LuxenElement } from '../../shared/luxen-element.js';
+import { tagName } from '../../registry.js';
 /**
  * A stepper control that enhances a native `<input type="number">` with
  * decrement/increment buttons and an optional animated number track.
@@ -23,6 +24,8 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  *
  * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.
  * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.
+ *
+ * @customElement l-input-stepper
  */
 export class InputStepper extends LuxenElement {
     constructor() {
@@ -148,7 +151,8 @@ export class InputStepper extends LuxenElement {
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.setAttribute('aria-label', label);
-        btn.innerHTML = `<l-icon name="${icon}"></l-icon>`;
+        const iconTag = tagName('icon');
+        btn.innerHTML = `<${iconTag} name="${icon}"></${iconTag}>`;
         return btn;
     }
     _buildTrack() {