luxen-ui 0.6.1 → 0.6.2

package/cdn/styles/elements/close-button/square.css

@@ -48,11 +48,6 @@
     --background-color: transparent;
     --background-color-hover: light-dark(var(--l-color-gray-100), var(--l-color-gray-700));
 
-    /*
-    Accessibility: the overall size should be at least 44 pixels in height and width
-    https://www.benjystanton.co.uk/blog/accessible-close-buttons/
-    */
-    padding: var(--l-spacing-2);
     border-radius: var(--l-radius-sm);
     background-color: var(--background-color);
 

package/dist/css/elements/close-button/square.css

@@ -48,11 +48,6 @@
     --background-color: transparent;
     --background-color-hover: light-dark(var(--l-color-gray-100), var(--l-color-gray-700));
 
-    /*
-    Accessibility: the overall size should be at least 44 pixels in height and width
-    https://www.benjystanton.co.uk/blog/accessible-close-buttons/
-    */
-    padding: var(--l-spacing-2);
     border-radius: var(--l-radius-sm);
     background-color: var(--background-color);
 

package/dist/custom-elements.json

@@ -2322,6 +2322,14 @@
               "description": "Hide the header entirely (title and close slot).",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_modalKind",
+              "type": {
+                "text": "string"
+              },
+              "default": "'centered'"
+            },
             {
               "kind": "field",
               "name": "_mouseDownTarget",
@@ -2547,7 +2555,7 @@
               "name": "--size"
             },
             {
-              "description": "Drawer border radius on the inner edges. Default `0.75rem`.",
+              "description": "Drawer border radius on the inner edges. Default `0.375rem`.",
               "name": "--border-radius",
               "inheritedFrom": {
                 "name": "Dialog",
@@ -2679,99 +2687,20 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "Fired when the drawer opens. Not cancelable.",
-              "name": "show",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Fired after the open animation completes.",
-              "name": "after-show",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
-              "name": "hide",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "description": "Fired after the close animation completes.",
-              "name": "after-hide",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "Dialog",
-            "module": "/dist/elements/dialog/dialog.js"
-          },
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Dialog title rendered in the header.",
-              "fieldName": "title",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the dialog is open.",
-              "fieldName": "open",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            },
+          "members": [
             {
-              "name": "light-dismiss",
+              "kind": "field",
+              "name": "_modalKind",
               "type": {
-                "text": "boolean"
+                "text": "'centered' | 'edge'"
               },
-              "default": "false",
-              "description": "Close when the backdrop is clicked.",
-              "fieldName": "lightDismiss",
+              "privacy": "protected",
+              "default": "'edge'",
               "inheritedFrom": {
                 "name": "Dialog",
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
-            {
-              "name": "without-header",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the header entirely (title and close slot).",
-              "fieldName": "withoutHeader",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/html/elements/dialog/dialog.ts"
-              }
-            }
-          ],
-          "members": [
             {
               "kind": "field",
               "name": "title",
@@ -3006,6 +2935,98 @@
                 "module": "src/html/shared/luxen-element.ts"
               }
             }
+          ],
+          "events": [
+            {
+              "description": "Fired when the drawer opens. Not cancelable.",
+              "name": "show",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Fired after the open animation completes.",
+              "name": "after-show",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
+              "name": "hide",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "description": "Fired after the close animation completes.",
+              "name": "after-hide",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Dialog",
+            "module": "/dist/elements/dialog/dialog.js"
+          },
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Dialog title rendered in the header.",
+              "fieldName": "title",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the dialog is open.",
+              "fieldName": "open",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "name": "light-dismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Close when the backdrop is clicked.",
+              "fieldName": "lightDismiss",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
+            {
+              "name": "without-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "fieldName": "withoutHeader",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            }
           ]
         }
       ],
@@ -8049,7 +8070,7 @@
         {
           "kind": "variable",
           "name": "u",
-          "default": "class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this.withoutHeader=!1,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e` <dialog part=\"dialog\" closedby=${this.lightDismiss&&c?`any`:t} > ${this.withoutHeader?t:e` <header part=\"header\"> <slot name=\"title\"> ${this.title?e`<h2 part=\"title\">${this.title}</h2>`:t} </slot> <slot name=\"close\"></slot> </header> `} <div part=\"body\"> <slot></slot> </div> <footer part=\"footer\"> <slot name=\"footer\"></slot> </footer> </dialog> `}}"
+          "default": "class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this.withoutHeader=!1,this._modalKind=`centered`,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.setAttribute(`data-modal`,this._modalKind),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e` <dialog part=\"dialog\" closedby=${this.lightDismiss&&c?`any`:t} > ${this.withoutHeader?t:e` <header part=\"header\"> <slot name=\"title\"> ${this.title?e`<h2 part=\"title\">${this.title}</h2>`:t} </slot> <slot name=\"close\"></slot> </header> `} <div part=\"body\"> <slot></slot> </div> <footer part=\"footer\"> <slot name=\"footer\"></slot> </footer> </dialog> `}}"
         }
       ],
       "exports": [
@@ -8123,7 +8144,7 @@
         {
           "kind": "variable",
           "name": "s",
-          "default": "class extends a{static{this.styles=[r,i,o]}}"
+          "default": "class extends a{constructor(...e){super(...e),this._modalKind=`edge`}static{this.styles=[r,i,o]}}"
         }
       ],
       "exports": [
@@ -10390,6 +10411,15 @@
                 "text": "HTMLDialogElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "_modalKind",
+              "type": {
+                "text": "'centered' | 'edge'"
+              },
+              "privacy": "protected",
+              "default": "'centered'"
+            },
             {
               "kind": "field",
               "name": "_mouseDownTarget",
@@ -10747,7 +10777,7 @@
               "name": "--size"
             },
             {
-              "description": "Drawer border radius on the inner edges. Default `0.75rem`.",
+              "description": "Drawer border radius on the inner edges. Default `0.375rem`.",
               "name": "--border-radius",
               "inheritedFrom": {
                 "name": "Dialog",
@@ -10880,6 +10910,19 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "_modalKind",
+              "type": {
+                "text": "'centered' | 'edge'"
+              },
+              "privacy": "protected",
+              "default": "'edge'",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "placement",

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.1",
+  "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",