luxen-ui 0.2.0 → 0.3.0

package/dist/elements/dialog/dialog.css

@@ -69,18 +69,28 @@ dialog {
   line-height: 1.4;
 }
 
+/* Pin body and footer so the layout stays correct when [without-header]
+   removes the header and only two children auto-place into the grid. */
 [part='body'] {
+  grid-row: 2;
   padding-inline: var(--padding);
   overflow-y: auto;
 }
 
 [part='footer'] {
+  grid-row: 3;
   display: flex;
   place-content: end;
   gap: 0.5rem;
   padding: 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'] {
+  padding-block-start: var(--padding);
+}
+
 ::slotted(menu[slot='footer']) {
   display: contents;
 }

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

@@ -7,6 +7,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * Invoker commands). There are no public `show()` / `close()` methods.
  *
  * @slot - Body content.
+ * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property.
  * @slot close - Close button (typically `<button class="l-close">`).
  * @slot footer - Footer actions.
  *
@@ -37,6 +38,8 @@ export declare class LuxenDialog extends LuxenElement {
     open: boolean;
     /** Close when the backdrop is clicked. */
     lightDismiss: boolean;
+    /** Hide the header entirely (title and close slot). */
+    withoutHeader: boolean;
     dialog: HTMLDialogElement;
     private _mouseDownTarget;
     private _commandListener;

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,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAGrB,MAAM,EAAG,iBAAiB,CAAC;IAE3B,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;CAoBP"}
+{"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,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,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;IAE3B,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"}

package/dist/elements/dialog/dialog.js

@@ -28,6 +28,7 @@ if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
  * Invoker commands). There are no public `show()` / `close()` methods.
  *
  * @slot - Body content.
+ * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property.
  * @slot close - Close button (typically `<button class="l-close">`).
  * @slot footer - Footer actions.
  *
@@ -59,6 +60,8 @@ export class LuxenDialog extends LuxenElement {
         this.open = false;
         /** Close when the backdrop is clicked. */
         this.lightDismiss = false;
+        /** Hide the header entirely (title and close slot). */
+        this.withoutHeader = false;
         this._mouseDownTarget = null;
         this._commandListener = {
             handleEvent: (e) => this._onCommand(e),
@@ -176,10 +179,16 @@ export class LuxenDialog extends LuxenElement {
         part="dialog"
         closedby=${closedby}
       >
-        <header part="header">
-          <h2 part="title">${this.title}</h2>
-          <slot name="close"></slot>
-        </header>
+        ${this.withoutHeader
+            ? nothing
+            : html `
+              <header part="header">
+                <slot name="title">
+                  ${this.title ? html `<h2 part="title">${this.title}</h2>` : nothing}
+                </slot>
+                <slot name="close"></slot>
+              </header>
+            `}
         <div part="body">
           <slot></slot>
         </div>
@@ -200,6 +209,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })
 ], LuxenDialog.prototype, "lightDismiss", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'without-header' })
+], LuxenDialog.prototype, "withoutHeader", void 0);
 __decorate([
     query('dialog')
 ], LuxenDialog.prototype, "dialog", void 0);

package/dist/elements/dropdown/dropdown.css

@@ -1,7 +1,7 @@
 :host {
   --background: var(--l-color-bg-surface, Canvas);
-  --radius: 8px;
-  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --radius: 6px;
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --show-duration: 150;
   --hide-duration: 150;
 
@@ -19,9 +19,9 @@
   box-sizing: border-box;
   width: max-content;
   min-width: anchor-size(width);
-  padding: 4px 0;
+  padding: 0.25rem;
   margin: 0;
-  border: 1px solid var(--l-color-border, light-dark(#e5e7eb, #374151));
+  border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
   border-radius: var(--radius);
   background: var(--background);
   color: var(--l-color-text-primary, CanvasText);

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

@@ -11,9 +11,10 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 16px;
+  padding: 0.375rem 0.5rem;
   cursor: pointer;
   outline: none;
+  border-radius: 4px;
   font-size: 0.875rem;
   line-height: 1.5;
   color: var(--l-color-text-primary, CanvasText);

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

@@ -9,8 +9,13 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @customElement l-input-otp
  *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
- * @cssproperty --size - Cell width and height (default: 2.75rem). Font size scales automatically.
- * @cssproperty --gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
+ * @cssproperty --cell-gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-bg-color - Cell background color.
+ * @cssproperty --cell-border-color - Cell border color.
+ * @cssproperty --cell-border-radius - Cell border-radius.
+ * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.
+ * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).
  */
 export declare class LuxenInputOtp extends LuxenElement {
     createRenderRoot(): this;
@@ -27,5 +32,6 @@ export declare class LuxenInputOtp extends LuxenElement {
     private _teardown;
     private _updateCells;
     private _clearCells;
+    private _scheduleUpdateCells;
 }
 //# sourceMappingURL=input-otp.d.ts.map

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,4BAA4B,CAAC;AAE1D;;;;;;;;;;;;GAYG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,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;IA2Dd,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,WAAW,CAIjB;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,4BAA4B,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,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

@@ -16,8 +16,13 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @customElement l-input-otp
  *
  * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.
- * @cssproperty --size - Cell width and height (default: 2.75rem). Font size scales automatically.
- * @cssproperty --gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.
+ * @cssproperty --cell-gap - Space between cells (default: 0.5rem).
+ * @cssproperty --cell-bg-color - Cell background color.
+ * @cssproperty --cell-border-color - Cell border color.
+ * @cssproperty --cell-border-radius - Cell border-radius.
+ * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.
+ * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).
  */
 export class LuxenInputOtp extends LuxenElement {
     constructor() {
@@ -55,6 +60,9 @@ export class LuxenInputOtp extends LuxenElement {
                 cell.removeAttribute('data-active');
             }
         };
+        this._scheduleUpdateCells = () => {
+            requestAnimationFrame(this._updateCells);
+        };
     }
     createRenderRoot() {
         return this;
@@ -111,11 +119,12 @@ export class LuxenInputOtp extends LuxenElement {
         this._initialized = true;
         // Populate cells if input already has a value (e.g. disabled with prefilled value)
         this._updateCells();
-        // Events
+        // Events — focus is deferred so it runs after the click that triggered it
+        // (otherwise selectionStart is stale and the active cell flickers).
         this._input.addEventListener('input', this._updateCells);
         this._input.addEventListener('click', this._updateCells);
         this._input.addEventListener('keyup', this._updateCells);
-        this._input.addEventListener('focus', this._updateCells);
+        this._input.addEventListener('focus', this._scheduleUpdateCells);
         this._input.addEventListener('blur', this._clearCells);
     }
     _teardown() {
@@ -124,7 +133,7 @@ export class LuxenInputOtp extends LuxenElement {
         this._input.removeEventListener('input', this._updateCells);
         this._input.removeEventListener('click', this._updateCells);
         this._input.removeEventListener('keyup', this._updateCells);
-        this._input.removeEventListener('focus', this._updateCells);
+        this._input.removeEventListener('focus', this._scheduleUpdateCells);
         this._input.removeEventListener('blur', this._clearCells);
         // Restore input to direct child
         this._container.replaceWith(this._input);

package/dist/elements/popover/popover.css

@@ -1,14 +1,14 @@
 :host {
   --background: var(--l-color-bg-surface, Canvas);
   --color: inherit;
-  --border-radius: 8px;
+  --border-radius: 6px;
   --max-width: 320px;
-  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --arrow-size: 8px;
   --show-duration: 150ms;
   --hide-duration: 150ms;
 
-  --_border-color: var(--l-color-border, light-dark(#e5e7eb, #374151));
+  --_border-color: var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
 
   display: contents;
 }
@@ -20,7 +20,6 @@
   box-sizing: border-box;
   width: max-content;
   max-width: var(--max-width);
-  padding: 12px 16px;
   border: 1px solid var(--_border-color);
   border-radius: var(--border-radius);
   background: var(--background);

package/dist/skills/luxen-ui/references/dialog.md

@@ -345,6 +345,74 @@ Add `autofocus` to any focusable element inside the dialog to focus it automatic
 </l-dialog>
 ```
 
+### Without header
+
+Add `without-header` to drop the header row entirely (title and close slot). Useful for confirmation prompts where the body already carries the heading. Provide an accessible heading inside the body and rely on `Escape` or a footer action to close.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="dialog-without-header"
+>
+  Delete account
+</button>
+
+<l-dialog
+  id="dialog-without-header"
+  without-header
+>
+  <div class="grid justify-items-center gap-3 pb-2 text-center">
+    <span
+      class="flex size-12 items-center justify-center rounded-full bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300"
+    >
+      <svg
+        class="size-6"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 9v4" />
+        <path d="M12 17h.01" />
+        <path
+          d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+        />
+      </svg>
+    </span>
+    <h2 class="text-lg font-semibold">Delete your account?</h2>
+    <p class="text-sm">
+      This action is permanent and cannot be undone. All your data, including projects and billing
+      history, will be erased.
+    </p>
+  </div>
+  <menu slot="footer">
+    <button
+      autofocus
+      type="button"
+      class="l-button"
+      command="--hide"
+      commandfor="dialog-without-header"
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="l-button"
+      data-variant="destructive"
+      command="--hide"
+      commandfor="dialog-without-header"
+    >
+      Delete account
+    </button>
+  </menu>
+</l-dialog>
+```
+
 ## Accessibility
 
 ### Criteria
@@ -352,7 +420,7 @@ Add `autofocus` to any focusable element inside the dialog to focus it automatic
 | Check | Description |
 |-------|-------------|
 | Role | Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics |
-| Accessible name | The `title` property is rendered as an `<h2>` inside the dialog header |
+| Accessible name | The `title` property renders as an `<h2>` in the header, or provide a custom heading via `slot="title"` |
 | Focus management | Focus is trapped inside the modal; moves to the first focusable element on open |
 | Focus restoration | Focus returns to the trigger element when the dialog closes |
 | Close button | Consumer provides the close button via `slot="close"` with `aria-label="Close"` |
@@ -385,12 +453,21 @@ import 'luxen-ui/dialog';
   { Attribute: 'title', Description: 'Dialog title rendered in the header as an `<h2>`' },
   { Attribute: 'open', Description: 'Whether the dialog is open. Reflects to attribute' },
   { Attribute: 'light-dismiss', Description: 'Close when the backdrop is clicked' },
+  { Attribute: 'without-header', Description: 'Hide the header entirely (title and close slot)' },
 ]" />
 
 ### Commands
 
 Open and close the dialog by toggling its `open` property, or via the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) from any light-DOM button. Custom commands must start with `--`.
 
+>
+> The Invoker Commands API is [✓ Baseline Newly Available (since 2025-12-12)](https://web-platform-dx.github.io/web-features-explorer/features/invoker-commands/). For older browser versions, load the [`invokers-polyfill`](https://npmx.dev/package/invokers-polyfill) once at app startup:
+> 
+> ```js
+> import 'invokers-polyfill';
+> ```
+> 
+
 <ApiTable :data="[
   { Command: '--show', Description: 'Sets `open = true`' },
   { Command: '--hide', Description: 'Sets `open = false`' },
@@ -409,6 +486,7 @@ Open and close the dialog by toggling its `open` property, or via the [Invoker C
 
 <ApiTable :data="[
   { Slot: '(default)', Description: 'Body content' },
+  { Slot: 'title', Description: 'Custom heading element. Overrides the default `<h2>` rendered from the `title` property' },
   { Slot: 'close', Description: 'Close button (typically `<button class=&quot;l-close&quot;>`)' },
   { Slot: 'footer', Description: 'Footer actions' },
 ]" />

package/dist/skills/luxen-ui/references/drawer.md

@@ -357,6 +357,14 @@ import 'luxen-ui/drawer';
 
 Open and close the drawer by toggling its `open` property, or via the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) from any light-DOM button. Custom commands must start with `--`.
 
+>
+> The Invoker Commands API is [✓ Baseline Newly Available (since 2025-12-12)](https://web-platform-dx.github.io/web-features-explorer/features/invoker-commands/). For older browser versions, load the [`invokers-polyfill`](https://npmx.dev/package/invokers-polyfill) once at app startup:
+> 
+> ```js
+> import 'invokers-polyfill';
+> ```
+> 
+
 <ApiTable :data="[
   { Command: '--show', Description: 'Sets `open = true`' },
   { Command: '--hide', Description: 'Sets `open = false`' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",