luxen-ui 0.1.2 → 0.2.1

package/dist/elements/popover/popover.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenPopover_for_accessor_storage, _LuxenPopover_placement_accessor_storage, _LuxenPopover_distance_accessor_storage, _LuxenPopover_open_accessor_storage, _LuxenPopover_withoutArrow_accessor_storage, _LuxenPopover_trigger_accessor_storage;
+var _LuxenPopover_for_accessor_storage, _LuxenPopover_placement_accessor_storage, _LuxenPopover_distance_accessor_storage, _LuxenPopover_open_accessor_storage, _LuxenPopover_withoutArrow_accessor_storage, _LuxenPopover_fullWidth_accessor_storage, _LuxenPopover_trigger_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element';
 import { property } from 'lit/decorators.js';
@@ -35,7 +35,7 @@ const styles = unsafeCSS(rawStyles);
  *
  * @cssproperty --background - Background color. Default: `Canvas`.
  * @cssproperty --color - Text color. Default: inherited.
- * @cssproperty --radius - Border radius. Default `8px`.
+ * @cssproperty --border-radius - Border radius. Default `8px`.
  * @cssproperty --max-width - Maximum width. Default `320px`.
  * @cssproperty --shadow - Box shadow.
  * @cssproperty --arrow-size - Arrow size. Default `8px`.
@@ -59,6 +59,7 @@ export class LuxenPopover extends LuxenElement {
         _LuxenPopover_distance_accessor_storage.set(this, 8);
         _LuxenPopover_open_accessor_storage.set(this, false);
         _LuxenPopover_withoutArrow_accessor_storage.set(this, false);
+        _LuxenPopover_fullWidth_accessor_storage.set(this, false);
         _LuxenPopover_trigger_accessor_storage.set(this, 'click');
         // --- Trigger event handlers ---
         this._onPointerEnter = () => {
@@ -113,6 +114,9 @@ export class LuxenPopover extends LuxenElement {
     /** Hide the directional arrow. */
     get withoutArrow() { return __classPrivateFieldGet(this, _LuxenPopover_withoutArrow_accessor_storage, "f"); }
     set withoutArrow(value) { __classPrivateFieldSet(this, _LuxenPopover_withoutArrow_accessor_storage, value, "f"); }
+    /** Stretch the popover to the viewport width. Useful for mega menus. */
+    get fullWidth() { return __classPrivateFieldGet(this, _LuxenPopover_fullWidth_accessor_storage, "f"); }
+    set fullWidth(value) { __classPrivateFieldSet(this, _LuxenPopover_fullWidth_accessor_storage, value, "f"); }
     /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */
     get trigger() { return __classPrivateFieldGet(this, _LuxenPopover_trigger_accessor_storage, "f"); }
     set trigger(value) { __classPrivateFieldSet(this, _LuxenPopover_trigger_accessor_storage, value, "f"); }
@@ -164,7 +168,11 @@ export class LuxenPopover extends LuxenElement {
         const popover = this._popoverEl;
         if (!popover)
             return;
-        const posOpts = { placement: this.placement, distance: this.distance };
+        const posOpts = {
+            placement: this.placement,
+            distance: this.distance,
+            fullWidth: this.fullWidth,
+        };
         if (this.open) {
             popover.showPopover();
             await this._floating.updatePosition(posOpts);
@@ -222,7 +230,7 @@ export class LuxenPopover extends LuxenElement {
     `;
     }
 }
-_LuxenPopover_for_accessor_storage = new WeakMap(), _LuxenPopover_placement_accessor_storage = new WeakMap(), _LuxenPopover_distance_accessor_storage = new WeakMap(), _LuxenPopover_open_accessor_storage = new WeakMap(), _LuxenPopover_withoutArrow_accessor_storage = new WeakMap(), _LuxenPopover_trigger_accessor_storage = new WeakMap();
+_LuxenPopover_for_accessor_storage = new WeakMap(), _LuxenPopover_placement_accessor_storage = new WeakMap(), _LuxenPopover_distance_accessor_storage = new WeakMap(), _LuxenPopover_open_accessor_storage = new WeakMap(), _LuxenPopover_withoutArrow_accessor_storage = new WeakMap(), _LuxenPopover_fullWidth_accessor_storage = new WeakMap(), _LuxenPopover_trigger_accessor_storage = new WeakMap();
 LuxenPopover.styles = [hostStyles, styles];
 __decorate([
     property()
@@ -239,6 +247,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'without-arrow' })
 ], LuxenPopover.prototype, "withoutArrow", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], LuxenPopover.prototype, "fullWidth", null);
 __decorate([
     property()
 ], LuxenPopover.prototype, "trigger", null);

package/dist/shared/controllers/popover.d.ts

@@ -9,6 +9,7 @@ export interface PopoverControllerConfig {
 export interface PositionOptions {
     placement: Placement;
     distance: number;
+    fullWidth?: boolean;
 }
 type TriggerHandlers = {
     onPointerEnter?: (e: PointerEvent) => void;

package/dist/shared/controllers/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAoN1B,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAM;gBAEnB,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,MAAM,EAAE,uBAAuB;IAMvF,aAAa;IAEb,gBAAgB;IAMhB,IAAI,gBAAgB,WAEnB;IAIK,cAAc,CAAC,OAAO,EAAE,eAAe;IAyC7C,gBAAgB,CAAC,OAAO,EAAE,eAAe;IASzC,eAAe;IAOf,kBAAkB,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,IAAI;IAiDtD,kBAAkB;IAOlB,mBAAmB,CAAC,QAAQ,EAAE,eAAe;IAoB7C,sBAAsB,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI;IAyBrD,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;IAYrE,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;CAW5E"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAoN1B,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,qBAAa,iBAAkB,YAAW,kBAAkB;IAC1D,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,SAAS,CAAC,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAM;gBAEnB,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,MAAM,EAAE,uBAAuB;IAMvF,aAAa;IAEb,gBAAgB;IAMhB,IAAI,gBAAgB,WAEnB;IAIK,cAAc,CAAC,OAAO,EAAE,eAAe;IA0C7C,gBAAgB,CAAC,OAAO,EAAE,eAAe;IASzC,eAAe;IAOf,kBAAkB,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,IAAI;IAiDtD,kBAAkB;IAOlB,mBAAmB,CAAC,QAAQ,EAAE,eAAe;IAoB7C,sBAAsB,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI;IAyBrD,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;IAYrE,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE;CAW5E"}

package/dist/shared/controllers/popover.js

@@ -223,8 +223,9 @@ export class PopoverController {
         });
         Object.assign(floating.style, {
             position: 'fixed',
-            left: `${x}px`,
+            left: options.fullWidth ? '0px' : `${x}px`,
             top: `${y}px`,
+            width: options.fullWidth ? '100vw' : '',
         });
         if (placement !== this._currentPlacement) {
             this._currentPlacement = placement;

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.1.2",
+  "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",
@@ -35,7 +35,8 @@
   "sideEffects": [
     "*.css",
     "**/define.js",
-    "**/registry.js"
+    "**/registry.js",
+    "**/elements/*/index.js"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",