luxen-ui 0.2.0 → 0.2.1

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/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

@@ -352,7 +352,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,6 +385,7 @@ 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
@@ -409,6 +410,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/package.json

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