luxen-ui 0.6.0 → 0.6.2

package/dist/elements/dialog/dialog.css

@@ -2,6 +2,8 @@
   --width: 31rem;
   --border-radius: 6px;
   --padding: 1.5rem;
+  --header-padding: var(--padding);
+  --footer-padding: var(--padding);
   --show-duration: 200ms;
   --hide-duration: 200ms;
   --backdrop: var(--l-backdrop);
@@ -59,7 +61,7 @@ dialog {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  padding: var(--padding);
+  padding: var(--header-padding);
 }
 
 [part='title'] {
@@ -82,7 +84,7 @@ dialog {
   display: flex;
   place-content: end;
   gap: 0.5rem;
-  padding: var(--padding);
+  padding: var(--footer-padding);
 }
 
 /* Without a header, the body has to provide its own block-start padding

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

@@ -41,6 +41,7 @@ export declare class Dialog extends LuxenElement {
     /** Hide the header entirely (title and close slot). */
     withoutHeader: boolean;
     dialog: HTMLDialogElement;
+    protected _modalKind: 'centered' | 'edge';
     private _mouseDownTarget;
     private _commandListener;
     connectedCallback(): void;

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;AAwB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;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"}
+{"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"}

package/dist/elements/dialog/dialog.js

@@ -14,10 +14,18 @@ const supportsClosedBy = typeof HTMLDialogElement !== 'undefined' && 'closedBy'
 // `:has()` to freeze the root scroll container whenever any modal l-dialog
 // is open. Purely declarative — no manual lock/unlock bookkeeping.
 // Symbol guard makes the injection idempotent across HMR reloads.
+//
+// `scrollbar-gutter: stable` only applies to centered modals — it prevents
+// the page behind from shifting horizontally when the scrollbar disappears.
+// Edge-attached modals (drawers) opt out via `data-modal="edge"`: a reserved
+// gutter would push the drawer off the actual viewport edge.
 const SCROLL_LOCK_SHEET = Symbol.for('luxen-dialog-scroll-lock');
 if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
     const sheet = new CSSStyleSheet();
-    sheet.replaceSync(`html:has([data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`);
+    sheet.replaceSync(`
+    html:has([data-modal]) { overflow: hidden; }
+    html:has([data-modal="centered"]) { scrollbar-gutter: stable; }
+  `);
     document.adoptedStyleSheets.push(sheet);
     Object.defineProperty(document, SCROLL_LOCK_SHEET, { value: sheet });
 }
@@ -62,6 +70,9 @@ export class Dialog extends LuxenElement {
         this.lightDismiss = false;
         /** Hide the header entirely (title and close slot). */
         this.withoutHeader = false;
+        // 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';
         this._mouseDownTarget = null;
         this._commandListener = {
             handleEvent: (e) => this._onCommand(e),
@@ -90,7 +101,7 @@ export class Dialog extends LuxenElement {
         if (this.open && !this.dialog.open) {
             // Opening — not cancelable.
             this.emit('show');
-            this.toggleAttribute('data-modal', true);
+            this.setAttribute('data-modal', this._modalKind);
             this.dialog.showModal();
             this._focusAutofocusTarget();
             void this._emitAfter('after-show');

package/dist/elements/drawer/drawer.css

@@ -1,6 +1,6 @@
 :host {
   --size: 320px;
-  --border-radius: 0.75rem;
+  --border-radius: 0.375rem;
 }
 
 /* Override dialog's opacity fade with a slide from the inline-start edge. */

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

@@ -16,7 +16,7 @@ import { Dialog } from '../dialog/dialog.js';
  * @csspart footer - The footer wrapper around the footer slot.
  *
  * @cssproperty --size - Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`.
- * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.75rem`.
+ * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.375rem`.
  * @cssproperty --show-duration - Open transition duration. Default `200ms`.
  * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
  * @cssproperty --backdrop - Backdrop color.
@@ -28,6 +28,7 @@ import { Dialog } from '../dialog/dialog.js';
  */
 export declare class Drawer extends Dialog {
     static styles: import("lit").CSSResult[];
+    protected _modalKind: "edge";
     /** Edge the drawer slides in from. Defaults to the start (inline-start) edge. */
     placement?: 'start' | 'end' | 'bottom';
 }

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;IAElE,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;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/elements/drawer/drawer.js

@@ -28,7 +28,7 @@ const drawerStyles = unsafeCSS(rawDrawerStyles);
  * @csspart footer - The footer wrapper around the footer slot.
  *
  * @cssproperty --size - Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`.
- * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.75rem`.
+ * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.375rem`.
  * @cssproperty --show-duration - Open transition duration. Default `200ms`.
  * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
  * @cssproperty --backdrop - Backdrop color.
@@ -39,6 +39,12 @@ const drawerStyles = unsafeCSS(rawDrawerStyles);
  * @event after-hide - Fired after the close animation completes.
  */
 export class Drawer extends Dialog {
+    constructor() {
+        super(...arguments);
+        // Edge-attached: opt out of the centered modal's stable scrollbar gutter,
+        // which would otherwise push the drawer off the actual viewport edge.
+        this._modalKind = 'edge';
+    }
 }
 Drawer.styles = [hostStyles, dialogStyles, drawerStyles];
 __decorate([

package/dist/templates/elements/close-button.md

@@ -19,7 +19,14 @@ Pick a visual style via `data-appearance`. Each appearance has its own CSS impor
 
 #### Ring
 
-<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;ring&quot; aria-label=&quot;Close&quot;></button>'" />
+```html
+<button
+  type="button"
+  class="l-close"
+  data-appearance="ring"
+  aria-label="Close"
+></button>
+```
 
 ```css
 @import 'luxen-ui/css/close-button/ring';
@@ -27,7 +34,14 @@ Pick a visual style via `data-appearance`. Each appearance has its own CSS impor
 
 #### Square
 
-<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;square&quot; aria-label=&quot;Close&quot;></button>'" />
+```html
+<button
+  type="button"
+  class="l-close"
+  data-appearance="square"
+  aria-label="Close"
+></button>
+```
 
 ```css
 @import 'luxen-ui/css/close-button/square';
@@ -35,7 +49,14 @@ Pick a visual style via `data-appearance`. Each appearance has its own CSS impor
 
 #### Circle
 
-<ComponentWrapper :html="'<button type=&quot;button&quot; class=&quot;l-close&quot; data-appearance=&quot;circle&quot; aria-label=&quot;Close&quot;></button>'" />
+```html
+<button
+  type="button"
+  class="l-close"
+  data-appearance="circle"
+  aria-label="Close"
+></button>
+```
 
 ```css
 @import 'luxen-ui/css/close-button/circle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",
@@ -34,6 +34,7 @@
     "elements.json",
     "vite-plugin.ts",
     "postcss-plugin-prefix.js",
+    "postcss-plugin-prefix.d.ts",
     "README.md",
     "LICENSE"
   ],
@@ -140,7 +141,7 @@
   "scripts": {
     "dev": "WATCH=true DEV=true vp build --config vite.config.css.ts",
     "dev:elements": "vp dev",
-    "build": "vp build --config vite.config.css.ts && tsc && node scripts/copy-styles.mjs && vp build && pnpm run manifest && node scripts/copy-cdn-assets.mjs && node scripts/build-standalone.mjs && vp build --config vite.config.cdn-standalone.ts && node scripts/prepare-skill-templates.mjs",
+    "build": "vp build --config vite.config.css.ts && tsc && tsc -p tsconfig.tooling.json && node scripts/copy-styles.mjs && vp build && pnpm run manifest && node scripts/copy-cdn-assets.mjs && node scripts/build-standalone.mjs && vp build --config vite.config.cdn-standalone.ts && node scripts/prepare-skill-templates.mjs",
     "build:css": "vp build --config vite.config.css.ts",
     "build:standalone": "node scripts/build-standalone.mjs && vp build --config vite.config.cdn-standalone.ts",
     "build:skill-templates": "node scripts/prepare-skill-templates.mjs",

package/postcss-plugin-prefix.d.ts

@@ -0,0 +1,9 @@
+declare const plugin: {
+  (opts?: { elementPrefix?: string; cssPrefix?: string }): {
+    postcssPlugin: string;
+    Once: (root: unknown) => void;
+  };
+  postcss: true;
+};
+
+export default plugin;

package/vite-plugin.ts

@@ -136,7 +136,7 @@ export default function luxen(options: LuxenOptions = {}): Plugin {
 
 function isLuxenRegistry(id: string): boolean {
   // Normalise for Windows + strip Vite query params (`?import`, `?used`, …)
-  const path = id.replace(/\\/g, '/').split('?')[0];
+  const path = id.replace(/\\/g, '/').split('?')[0] ?? '';
   return /\/luxen-ui\/(?:dist|src\/html)\/registry\.(?:js|ts)$/.test(path);
 }