luxen-ui 0.2.1 → 0.3.0

package/cdn/custom-elements.json

@@ -2240,7 +2240,7 @@
         {
           "kind": "variable",
           "name": "r",
-          "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),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(`blur`,this._clearCells)}_teardown(){this._initialized&&=(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(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
+          "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)},this._scheduleUpdateCells=()=>{requestAnimationFrame(this._updateCells)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),this._input.addEventListener(`input`,this._updateCells),this._input.addEventListener(`click`,this._updateCells),this._input.addEventListener(`keyup`,this._updateCells),this._input.addEventListener(`focus`,this._scheduleUpdateCells),this._input.addEventListener(`blur`,this._clearCells)}_teardown(){this._initialized&&=(this._input.removeEventListener(`input`,this._updateCells),this._input.removeEventListener(`click`,this._updateCells),this._input.removeEventListener(`keyup`,this._updateCells),this._input.removeEventListener(`focus`,this._scheduleUpdateCells),this._input.removeEventListener(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
         }
       ],
       "exports": [
@@ -4638,11 +4638,31 @@
             },
             {
               "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
-              "name": "--size"
+              "name": "--cell-size"
             },
             {
               "description": "Space between cells (default: 0.5rem).",
-              "name": "--gap"
+              "name": "--cell-gap"
+            },
+            {
+              "description": "Cell background color.",
+              "name": "--cell-bg-color"
+            },
+            {
+              "description": "Cell border color.",
+              "name": "--cell-border-color"
+            },
+            {
+              "description": "Cell border-radius.",
+              "name": "--cell-border-radius"
+            },
+            {
+              "description": "Border + ring color of the active (focused) cell.",
+              "name": "--cell-focus-color"
+            },
+            {
+              "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
+              "name": "--cell-focus-ring"
             }
           ],
           "members": [
@@ -4686,6 +4706,10 @@
               "kind": "field",
               "name": "_clearCells"
             },
+            {
+              "kind": "field",
+              "name": "_scheduleUpdateCells"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -10762,11 +10786,31 @@
             },
             {
               "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
-              "name": "--size"
+              "name": "--cell-size"
             },
             {
               "description": "Space between cells (default: 0.5rem).",
-              "name": "--gap"
+              "name": "--cell-gap"
+            },
+            {
+              "description": "Cell background color.",
+              "name": "--cell-bg-color"
+            },
+            {
+              "description": "Cell border color.",
+              "name": "--cell-border-color"
+            },
+            {
+              "description": "Cell border-radius.",
+              "name": "--cell-border-radius"
+            },
+            {
+              "description": "Border + ring color of the active (focused) cell.",
+              "name": "--cell-focus-color"
+            },
+            {
+              "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
+              "name": "--cell-focus-ring"
             }
           ],
           "members": [
@@ -10843,6 +10887,11 @@
               "name": "_clearCells",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scheduleUpdateCells",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "emit",

package/cdn/elements/dialog/dialog.styles.js

@@ -1,2 +1,2 @@
-import{c as e}from"../../chunks/lit.js";var t=e(`:host{--width:31rem;--border-radius:6px;--padding:1.5rem;--show-duration:.2s;--hide-duration:.2s;--backdrop:var(--l-backdrop);--backdrop-blur:0;display:contents}dialog{box-sizing:border-box;width:var(--width);max-inline-size:min(90vw, var(--width));border-radius:var(--border-radius);background-color:var(--l-color-surface-overlay);max-block-size:min(80dvb,100%);color:var(--l-color-text-primary);opacity:0;transition-property:opacity,display,overlay;transition-duration:var(--hide-duration);transition-behavior:allow-discrete;border:0;margin:auto;padding:0;position:fixed;inset:0}dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur))}dialog[open]{opacity:1;transition-duration:var(--show-duration);grid-template-rows:auto minmax(0,1fr) auto;display:grid}@starting-style{dialog[open]{opacity:0}}[part=header]{padding:var(--padding);justify-content:space-between;align-items:center;gap:1rem;display:flex}[part=title]{margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}[part=body]{padding-inline:var(--padding);overflow-y:auto}[part=footer]{padding:var(--padding);place-content:end;gap:.5rem;display:flex}::slotted(menu[slot=footer]){display:contents}@media (prefers-reduced-motion:reduce){:host{--show-duration:0s;--hide-duration:0s}}`);export{t as default};
+import{c as e}from"../../chunks/lit.js";var t=e(`:host{--width:31rem;--border-radius:6px;--padding:1.5rem;--show-duration:.2s;--hide-duration:.2s;--backdrop:var(--l-backdrop);--backdrop-blur:0;display:contents}dialog{box-sizing:border-box;width:var(--width);max-inline-size:min(90vw, var(--width));border-radius:var(--border-radius);background-color:var(--l-color-surface-overlay);max-block-size:min(80dvb,100%);color:var(--l-color-text-primary);opacity:0;transition-property:opacity,display,overlay;transition-duration:var(--hide-duration);transition-behavior:allow-discrete;border:0;margin:auto;padding:0;position:fixed;inset:0}dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur))}dialog[open]{opacity:1;transition-duration:var(--show-duration);grid-template-rows:auto minmax(0,1fr) auto;display:grid}@starting-style{dialog[open]{opacity:0}}[part=header]{padding:var(--padding);justify-content:space-between;align-items:center;gap:1rem;display:flex}[part=title]{margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}[part=body]{padding-inline:var(--padding);grid-row:2;overflow-y:auto}[part=footer]{padding:var(--padding);grid-row:3;place-content:end;gap:.5rem;display:flex}:host([without-header]) [part=body]{padding-block-start:var(--padding)}::slotted(menu[slot=footer]){display:contents}@media (prefers-reduced-motion:reduce){:host{--show-duration:0s;--hide-duration:0s}}`);export{t as default};
 //# sourceMappingURL=dialog.styles.js.map

package/cdn/elements/dialog/dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.css?inline","../../../src/html/elements/dialog/dialog.styles.ts"],"sourcesContent":[":host {\n  --width: 31rem;\n  --border-radius: 6px;\n  --padding: 1.5rem;\n  --show-duration: 200ms;\n  --hide-duration: 200ms;\n  --backdrop: var(--l-backdrop);\n  --backdrop-blur: 0;\n\n  display: contents;\n}\n\ndialog {\n  position: fixed;\n  inset: 0;\n  box-sizing: border-box;\n  width: var(--width);\n  max-inline-size: min(90vw, var(--width));\n  max-block-size: min(80dvb, 100%);\n  margin: auto;\n  padding: 0;\n  border: 0;\n  border-radius: var(--border-radius);\n  background-color: var(--l-color-surface-overlay);\n  color: var(--l-color-text-primary);\n\n  /* EXIT STATE */\n  opacity: 0;\n\n  transition-property: opacity, display, overlay;\n  transition-duration: var(--hide-duration);\n  transition-behavior: allow-discrete;\n\n  &::backdrop {\n    background: var(--backdrop);\n    backdrop-filter: blur(var(--backdrop-blur));\n  }\n\n  /* OPEN STATE */\n  /* grid layout pins header/footer; the middle row (body) scrolls via\n     overflow on [part='body'] and minmax(0, 1fr) allowing it to shrink. */\n  &[open] {\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n    opacity: 1;\n    transition-duration: var(--show-duration);\n  }\n\n  /* BEFORE-OPEN STATE */\n  @starting-style {\n    &[open] {\n      opacity: 0;\n    }\n  }\n}\n\n[part='header'] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  padding: var(--padding);\n}\n\n[part='title'] {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n[part='body'] {\n  padding-inline: var(--padding);\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: var(--padding);\n}\n\n::slotted(menu[slot='footer']) {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --show-duration: 0ms;\n    --hide-duration: 0ms;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport raw from './dialog.css?inline';\n\n/**\n * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.\n * `unsafeCSS()` is called once here so both importers share the same\n * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).\n */\nexport default unsafeCSS(raw);\n"],"mappings":"wCCQA,IAAA,EAAe,mzCAAc"}
+{"version":3,"file":"dialog.styles.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.css?inline","../../../src/html/elements/dialog/dialog.styles.ts"],"sourcesContent":[":host {\n  --width: 31rem;\n  --border-radius: 6px;\n  --padding: 1.5rem;\n  --show-duration: 200ms;\n  --hide-duration: 200ms;\n  --backdrop: var(--l-backdrop);\n  --backdrop-blur: 0;\n\n  display: contents;\n}\n\ndialog {\n  position: fixed;\n  inset: 0;\n  box-sizing: border-box;\n  width: var(--width);\n  max-inline-size: min(90vw, var(--width));\n  max-block-size: min(80dvb, 100%);\n  margin: auto;\n  padding: 0;\n  border: 0;\n  border-radius: var(--border-radius);\n  background-color: var(--l-color-surface-overlay);\n  color: var(--l-color-text-primary);\n\n  /* EXIT STATE */\n  opacity: 0;\n\n  transition-property: opacity, display, overlay;\n  transition-duration: var(--hide-duration);\n  transition-behavior: allow-discrete;\n\n  &::backdrop {\n    background: var(--backdrop);\n    backdrop-filter: blur(var(--backdrop-blur));\n  }\n\n  /* OPEN STATE */\n  /* grid layout pins header/footer; the middle row (body) scrolls via\n     overflow on [part='body'] and minmax(0, 1fr) allowing it to shrink. */\n  &[open] {\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n    opacity: 1;\n    transition-duration: var(--show-duration);\n  }\n\n  /* BEFORE-OPEN STATE */\n  @starting-style {\n    &[open] {\n      opacity: 0;\n    }\n  }\n}\n\n[part='header'] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  padding: var(--padding);\n}\n\n[part='title'] {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n/* Pin body and footer so the layout stays correct when [without-header]\n   removes the header and only two children auto-place into the grid. */\n[part='body'] {\n  grid-row: 2;\n  padding-inline: var(--padding);\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  grid-row: 3;\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: var(--padding);\n}\n\n/* Without a header, the body has to provide its own block-start padding\n   (normally inherited visually from the header padding above it). */\n:host([without-header]) [part='body'] {\n  padding-block-start: var(--padding);\n}\n\n::slotted(menu[slot='footer']) {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --show-duration: 0ms;\n    --hide-duration: 0ms;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport raw from './dialog.css?inline';\n\n/**\n * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.\n * `unsafeCSS()` is called once here so both importers share the same\n * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).\n */\nexport default unsafeCSS(raw);\n"],"mappings":"wCCQA,IAAA,EAAe,g5CAAc"}

package/cdn/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/cdn/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/cdn/elements/input-otp/input-otp.js

@@ -1,2 +1,2 @@
-import{LuxenElement as e}from"../../shared/luxen-element.js";import{a as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),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(`blur`,this._clearCells)}_teardown(){this._initialized&&=(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(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}};n([t({type:Number,reflect:!0,attribute:`separator-after`})],r.prototype,`separatorAfter`,void 0);export{r as LuxenInputOtp};
+import{LuxenElement as e}from"../../shared/luxen-element.js";import{a as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)},this._scheduleUpdateCells=()=>{requestAnimationFrame(this._updateCells)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),this._input.addEventListener(`input`,this._updateCells),this._input.addEventListener(`click`,this._updateCells),this._input.addEventListener(`keyup`,this._updateCells),this._input.addEventListener(`focus`,this._scheduleUpdateCells),this._input.addEventListener(`blur`,this._clearCells)}_teardown(){this._initialized&&=(this._input.removeEventListener(`input`,this._updateCells),this._input.removeEventListener(`click`,this._updateCells),this._input.removeEventListener(`keyup`,this._updateCells),this._input.removeEventListener(`focus`,this._scheduleUpdateCells),this._input.removeEventListener(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}};n([t({type:Number,reflect:!0,attribute:`separator-after`})],r.prototype,`separatorAfter`,void 0);export{r as LuxenInputOtp};
 //# sourceMappingURL=input-otp.js.map

package/cdn/elements/input-otp/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../../src/html/elements/input-otp/input-otp.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\n/**\n * Enhances a child `<input>` with visual digit cells (Stripe-style OTP input).\n *\n * A single hidden `<input>` handles keyboard, paste, and autocomplete.\n * Visual cells are rendered as real DOM elements with individual borders and focus ring.\n *\n * @summary Stripe-style OTP input with visual digit cells over a hidden native input.\n * @customElement l-input-otp\n *\n * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.\n * @cssproperty --size - Cell width and height (default: 2.75rem). Font size scales automatically.\n * @cssproperty --gap - Space between cells (default: 0.5rem).\n */\nexport class LuxenInputOtp extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Position after which to insert a visual separator (e.g., 3 for a 3-3 grouping). */\n  @property({ type: Number, reflect: true, attribute: 'separator-after' })\n  separatorAfter?: number;\n\n  private _input!: HTMLInputElement;\n  private _container!: HTMLDivElement;\n  private _cells: HTMLDivElement[] = [];\n  private _separatorEl: HTMLSpanElement | null = null;\n  private _initialized = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const input = this.querySelector<HTMLInputElement>('input');\n    if (!input) return;\n\n    this._input = input;\n\n    // Derive digit count from --digits CSS custom property (default 6)\n    const digits = Number(getComputedStyle(this).getPropertyValue('--digits').trim()) || 6;\n\n    // Set sensible defaults — author can still override via HTML attributes\n    const defaults: Record<string, string> = {\n      type: 'text',\n      inputmode: 'numeric',\n      autocomplete: 'one-time-code',\n      maxlength: String(digits),\n      pattern: String.raw`\\d{${digits}}`,\n    };\n    for (const [attr, value] of Object.entries(defaults)) {\n      if (!this._input.hasAttribute(attr)) {\n        this._input.setAttribute(attr, value);\n      }\n    }\n\n    // Build visual cells container\n    this._container = document.createElement('div');\n    this._container.className = 'l-input-otp-cells';\n    this._container.setAttribute('aria-hidden', 'true');\n\n    for (let i = 0; i < digits; i++) {\n      const cell = document.createElement('div');\n      cell.className = 'l-input-otp-cell';\n      cell.appendChild(document.createElement('span'));\n      this._cells.push(cell);\n      this._container.appendChild(cell);\n\n      // Insert separator after the specified position\n      if (this.separatorAfter && i === this.separatorAfter - 1 && i < digits - 1) {\n        this._separatorEl = document.createElement('span');\n        this._separatorEl.className = 'l-input-otp-separator';\n        this._container.appendChild(this._separatorEl);\n      }\n    }\n\n    // Wrap: insert container before input, then move input inside\n    this._input.replaceWith(this._container);\n    this._container.appendChild(this._input);\n    this._initialized = true;\n\n    // Populate cells if input already has a value (e.g. disabled with prefilled value)\n    this._updateCells();\n\n    // Events\n    this._input.addEventListener('input', this._updateCells);\n    this._input.addEventListener('click', this._updateCells);\n    this._input.addEventListener('keyup', this._updateCells);\n    this._input.addEventListener('focus', this._updateCells);\n    this._input.addEventListener('blur', this._clearCells);\n  }\n\n  private _teardown() {\n    if (!this._initialized) return;\n\n    this._input.removeEventListener('input', this._updateCells);\n    this._input.removeEventListener('click', this._updateCells);\n    this._input.removeEventListener('keyup', this._updateCells);\n    this._input.removeEventListener('focus', this._updateCells);\n    this._input.removeEventListener('blur', this._clearCells);\n\n    // Restore input to direct child\n    this._container.replaceWith(this._input);\n    this._separatorEl?.remove();\n\n    this._cells = [];\n    this._separatorEl = null;\n    this._initialized = false;\n  }\n\n  // --- Cell updates ---\n\n  private _updateCells = (): void => {\n    const value = this._input.value;\n    const maxLen = this._input.maxLength || 6;\n    const pos = Math.min(this._input.selectionStart ?? 0, maxLen - 1);\n    const isFocused = document.activeElement === this._input;\n\n    for (let i = 0; i < this._cells.length; i++) {\n      const cell = this._cells[i];\n      const span = cell.firstElementChild as HTMLSpanElement;\n      const char = value[i] ?? '';\n\n      span.textContent = char;\n\n      if (char) {\n        cell.setAttribute('data-filled', '');\n      } else {\n        cell.removeAttribute('data-filled');\n      }\n\n      if (isFocused && i === pos) {\n        cell.setAttribute('data-active', '');\n      } else {\n        cell.removeAttribute('data-active');\n      }\n    }\n  };\n\n  private _clearCells = (): void => {\n    for (const cell of this._cells) {\n      cell.removeAttribute('data-active');\n    }\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../src/html/elements/input-otp/input-otp.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\n/**\n * Enhances a child `<input>` with visual digit cells (Stripe-style OTP input).\n *\n * A single hidden `<input>` handles keyboard, paste, and autocomplete.\n * Visual cells are rendered as real DOM elements with individual borders and focus ring.\n *\n * @summary Stripe-style OTP input with visual digit cells over a hidden native input.\n * @customElement l-input-otp\n *\n * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.\n * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.\n * @cssproperty --cell-gap - Space between cells (default: 0.5rem).\n * @cssproperty --cell-bg-color - Cell background color.\n * @cssproperty --cell-border-color - Cell border color.\n * @cssproperty --cell-border-radius - Cell border-radius.\n * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.\n * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).\n */\nexport class LuxenInputOtp extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Position after which to insert a visual separator (e.g., 3 for a 3-3 grouping). */\n  @property({ type: Number, reflect: true, attribute: 'separator-after' })\n  separatorAfter?: number;\n\n  private _input!: HTMLInputElement;\n  private _container!: HTMLDivElement;\n  private _cells: HTMLDivElement[] = [];\n  private _separatorEl: HTMLSpanElement | null = null;\n  private _initialized = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const input = this.querySelector<HTMLInputElement>('input');\n    if (!input) return;\n\n    this._input = input;\n\n    // Derive digit count from --digits CSS custom property (default 6)\n    const digits = Number(getComputedStyle(this).getPropertyValue('--digits').trim()) || 6;\n\n    // Set sensible defaults — author can still override via HTML attributes\n    const defaults: Record<string, string> = {\n      type: 'text',\n      inputmode: 'numeric',\n      autocomplete: 'one-time-code',\n      maxlength: String(digits),\n      pattern: String.raw`\\d{${digits}}`,\n    };\n    for (const [attr, value] of Object.entries(defaults)) {\n      if (!this._input.hasAttribute(attr)) {\n        this._input.setAttribute(attr, value);\n      }\n    }\n\n    // Build visual cells container\n    this._container = document.createElement('div');\n    this._container.className = 'l-input-otp-cells';\n    this._container.setAttribute('aria-hidden', 'true');\n\n    for (let i = 0; i < digits; i++) {\n      const cell = document.createElement('div');\n      cell.className = 'l-input-otp-cell';\n      cell.appendChild(document.createElement('span'));\n      this._cells.push(cell);\n      this._container.appendChild(cell);\n\n      // Insert separator after the specified position\n      if (this.separatorAfter && i === this.separatorAfter - 1 && i < digits - 1) {\n        this._separatorEl = document.createElement('span');\n        this._separatorEl.className = 'l-input-otp-separator';\n        this._container.appendChild(this._separatorEl);\n      }\n    }\n\n    // Wrap: insert container before input, then move input inside\n    this._input.replaceWith(this._container);\n    this._container.appendChild(this._input);\n    this._initialized = true;\n\n    // Populate cells if input already has a value (e.g. disabled with prefilled value)\n    this._updateCells();\n\n    // Events — focus is deferred so it runs after the click that triggered it\n    // (otherwise selectionStart is stale and the active cell flickers).\n    this._input.addEventListener('input', this._updateCells);\n    this._input.addEventListener('click', this._updateCells);\n    this._input.addEventListener('keyup', this._updateCells);\n    this._input.addEventListener('focus', this._scheduleUpdateCells);\n    this._input.addEventListener('blur', this._clearCells);\n  }\n\n  private _teardown() {\n    if (!this._initialized) return;\n\n    this._input.removeEventListener('input', this._updateCells);\n    this._input.removeEventListener('click', this._updateCells);\n    this._input.removeEventListener('keyup', this._updateCells);\n    this._input.removeEventListener('focus', this._scheduleUpdateCells);\n    this._input.removeEventListener('blur', this._clearCells);\n\n    // Restore input to direct child\n    this._container.replaceWith(this._input);\n    this._separatorEl?.remove();\n\n    this._cells = [];\n    this._separatorEl = null;\n    this._initialized = false;\n  }\n\n  // --- Cell updates ---\n\n  private _updateCells = (): void => {\n    const value = this._input.value;\n    const maxLen = this._input.maxLength || 6;\n    const pos = Math.min(this._input.selectionStart ?? 0, maxLen - 1);\n    const isFocused = document.activeElement === this._input;\n\n    for (let i = 0; i < this._cells.length; i++) {\n      const cell = this._cells[i];\n      const span = cell.firstElementChild as HTMLSpanElement;\n      const char = value[i] ?? '';\n\n      span.textContent = char;\n\n      if (char) {\n        cell.setAttribute('data-filled', '');\n      } else {\n        cell.removeAttribute('data-filled');\n      }\n\n      if (isFocused && i === pos) {\n        cell.setAttribute('data-active', '');\n      } else {\n        cell.removeAttribute('data-active');\n      }\n    }\n  };\n\n  private _clearCells = (): void => {\n    for (const cell of this._cells) {\n      cell.removeAttribute('data-active');\n    }\n  };\n\n  private _scheduleUpdateCells = (): void => {\n    requestAnimationFrame(this._updateCells);\n  };\n}\n"],"mappings":"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"}

package/cdn/styles/elements/input-otp.css

@@ -15,13 +15,14 @@
 
   l-input-otp {
     --digits: 6;
-    --size: 2.75rem;
-    --_font-size: calc(var(--size) * 0.45);
-    --_bg: color-mix(in oklab, var(--l-color-text-primary) 4%, var(--l-color-surface));
-    --_border-color: var(--l-color-border);
-    --_highlight-color: var(--l-focus-ring);
+    --cell-size: 2.75rem;
+    --cell-bg-color: color-mix(in oklab, var(--l-color-text-primary) 4%, var(--l-color-surface));
+    --cell-border-color: var(--l-color-border);
+    --cell-border-radius: var(--radius-md);
+    --cell-focus-color: var(--l-focus-ring);
+    --cell-focus-ring: 0 0 0 1px var(--cell-focus-color);
 
-    display: inline-flex;
+    display: inline-block;
     position: relative;
   }
 
@@ -34,7 +35,7 @@
   .l-input-otp-cells {
     display: inline-flex;
     align-items: center;
-    gap: var(--gap, 0.5rem);
+    gap: var(--cell-gap, 0.5rem);
     position: relative;
   }
 
@@ -48,15 +49,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: var(--size);
-    block-size: var(--size);
-    border: 1px solid var(--_border-color);
-    border-radius: var(--radius-md);
-    background: var(--_bg);
+    inline-size: var(--cell-size);
+    block-size: var(--cell-size);
+    border: 1px solid var(--cell-border-color);
+    border-radius: var(--cell-border-radius);
+    background: var(--cell-bg-color);
     font-family:
       ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
       monospace;
-    font-size: var(--_font-size);
+    font-size: calc(var(--cell-size) * 0.45);
     font-variant-numeric: tabular-nums;
     line-height: 1;
     color: var(--l-color-text-primary);
@@ -73,8 +74,37 @@
   */
 
   l-input-otp:focus-within .l-input-otp-cell[data-active] {
-    border-color: var(--_highlight-color);
-    box-shadow: 0 0 0 1px var(--_highlight-color);
+    border-color: var(--cell-focus-color);
+    box-shadow: var(--cell-focus-ring);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅰🆁🅴🆃 (fake blinking caret in active empty cell)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  The native caret is hidden via `caret-color: transparent`; this stand-in
+  gives the missing point-of-insertion cue inside the active cell. Only
+  visible while empty — once a digit is typed, it replaces the caret.
+  */
+
+  l-input-otp:focus-within .l-input-otp-cell[data-active]:not([data-filled])::after {
+    content: '';
+    inline-size: 1px;
+    block-size: 1em;
+    background: currentColor;
+    animation: l-input-otp-caret 1s steps(2, jump-none) infinite;
+  }
+
+  @keyframes l-input-otp-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-input-otp:focus-within .l-input-otp-cell[data-active]:not([data-filled])::after {
+      animation: none;
+    }
   }
 
   /*
@@ -122,11 +152,11 @@
   */
 
   l-input-otp[size='sm'] {
-    --size: 2rem;
+    --cell-size: 2rem;
   }
 
   l-input-otp[size='lg'] {
-    --size: 3.5rem;
+    --cell-size: 3.5rem;
   }
 
   /*
@@ -145,20 +175,24 @@
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    🅿🆁🅾🅶🆁🅴🆂🆂🅸🆅🅴 🅴🅽🅷🅰🅽🅲🅴🅼🅴🅽🆃 🅵🅰🅻🅻🅱🅰🅲🅺
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-  Before JS loads, the raw input is visible and usable.
+  Pre-upgrade reserves the exact box the cells will occupy — width scales
+  with --digits / --cell-size / --cell-gap so layout doesn't shift on hydration.
+  Single soft-tinted rectangle (not per-cell): matches any custom appearance
+  cleanly since it doesn't pretend to redraw the cell layout.
   */
 
-  l-input-otp:not(:defined) > input {
-    all: unset;
+  l-input-otp:not(:defined) {
     display: inline-block;
-    border: 1px solid var(--l-color-border);
-    border-radius: var(--radius-md);
-    padding: 0.5rem 0.75rem;
-    font-family:
-      ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
-      monospace;
-    font-size: 1.25rem;
-    letter-spacing: 0.5ch;
-    color: var(--l-color-text-primary);
+    flex-shrink: 0;
+    inline-size: calc(
+      var(--cell-size) * var(--digits) + var(--cell-gap, 0.5rem) * (var(--digits) - 1)
+    );
+    block-size: var(--cell-size);
+    background: var(--cell-bg-color);
+    border-radius: var(--cell-border-radius);
+  }
+
+  l-input-otp:not(:defined) > input {
+    display: none;
   }
 }

package/cdn/styles/index.css

@@ -707,6 +707,16 @@ In dark mode, mixes the base color with black (default 15% black).
     white-space: nowrap;
     border: 0;
   }
+
+  /* Hide Shadow-DOM overlay elements until their custom element upgrades.
+     Without this, slotted/inner content flashes inline before the upgrade. */
+  l-dialog:not(:defined),
+  l-drawer:not(:defined),
+  l-dropdown:not(:defined),
+  l-popover:not(:defined),
+  l-tooltip:not(:defined) {
+    display: none;
+  }
 }
 
 /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */

package/dist/css/elements/input-otp.css

@@ -15,13 +15,14 @@
 
   l-input-otp {
     --digits: 6;
-    --size: 2.75rem;
-    --_font-size: calc(var(--size) * 0.45);
-    --_bg: color-mix(in oklab, var(--l-color-text-primary) 4%, var(--l-color-surface));
-    --_border-color: var(--l-color-border);
-    --_highlight-color: var(--l-focus-ring);
+    --cell-size: 2.75rem;
+    --cell-bg-color: color-mix(in oklab, var(--l-color-text-primary) 4%, var(--l-color-surface));
+    --cell-border-color: var(--l-color-border);
+    --cell-border-radius: var(--radius-md);
+    --cell-focus-color: var(--l-focus-ring);
+    --cell-focus-ring: 0 0 0 1px var(--cell-focus-color);
 
-    display: inline-flex;
+    display: inline-block;
     position: relative;
   }
 
@@ -34,7 +35,7 @@
   .l-input-otp-cells {
     display: inline-flex;
     align-items: center;
-    gap: var(--gap, 0.5rem);
+    gap: var(--cell-gap, 0.5rem);
     position: relative;
   }
 
@@ -48,15 +49,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: var(--size);
-    block-size: var(--size);
-    border: 1px solid var(--_border-color);
-    border-radius: var(--radius-md);
-    background: var(--_bg);
+    inline-size: var(--cell-size);
+    block-size: var(--cell-size);
+    border: 1px solid var(--cell-border-color);
+    border-radius: var(--cell-border-radius);
+    background: var(--cell-bg-color);
     font-family:
       ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
       monospace;
-    font-size: var(--_font-size);
+    font-size: calc(var(--cell-size) * 0.45);
     font-variant-numeric: tabular-nums;
     line-height: 1;
     color: var(--l-color-text-primary);
@@ -73,8 +74,37 @@
   */
 
   l-input-otp:focus-within .l-input-otp-cell[data-active] {
-    border-color: var(--_highlight-color);
-    box-shadow: 0 0 0 1px var(--_highlight-color);
+    border-color: var(--cell-focus-color);
+    box-shadow: var(--cell-focus-ring);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅰🆁🅴🆃 (fake blinking caret in active empty cell)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  The native caret is hidden via `caret-color: transparent`; this stand-in
+  gives the missing point-of-insertion cue inside the active cell. Only
+  visible while empty — once a digit is typed, it replaces the caret.
+  */
+
+  l-input-otp:focus-within .l-input-otp-cell[data-active]:not([data-filled])::after {
+    content: '';
+    inline-size: 1px;
+    block-size: 1em;
+    background: currentColor;
+    animation: l-input-otp-caret 1s steps(2, jump-none) infinite;
+  }
+
+  @keyframes l-input-otp-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-input-otp:focus-within .l-input-otp-cell[data-active]:not([data-filled])::after {
+      animation: none;
+    }
   }
 
   /*
@@ -122,11 +152,11 @@
   */
 
   l-input-otp[size='sm'] {
-    --size: 2rem;
+    --cell-size: 2rem;
   }
 
   l-input-otp[size='lg'] {
-    --size: 3.5rem;
+    --cell-size: 3.5rem;
   }
 
   /*
@@ -145,20 +175,24 @@
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    🅿🆁🅾🅶🆁🅴🆂🆂🅸🆅🅴 🅴🅽🅷🅰🅽🅲🅴🅼🅴🅽🆃 🅵🅰🅻🅻🅱🅰🅲🅺
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-  Before JS loads, the raw input is visible and usable.
+  Pre-upgrade reserves the exact box the cells will occupy — width scales
+  with --digits / --cell-size / --cell-gap so layout doesn't shift on hydration.
+  Single soft-tinted rectangle (not per-cell): matches any custom appearance
+  cleanly since it doesn't pretend to redraw the cell layout.
   */
 
-  l-input-otp:not(:defined) > input {
-    all: unset;
+  l-input-otp:not(:defined) {
     display: inline-block;
-    border: 1px solid var(--l-color-border);
-    border-radius: var(--radius-md);
-    padding: 0.5rem 0.75rem;
-    font-family:
-      ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
-      monospace;
-    font-size: 1.25rem;
-    letter-spacing: 0.5ch;
-    color: var(--l-color-text-primary);
+    flex-shrink: 0;
+    inline-size: calc(
+      var(--cell-size) * var(--digits) + var(--cell-gap, 0.5rem) * (var(--digits) - 1)
+    );
+    block-size: var(--cell-size);
+    background: var(--cell-bg-color);
+    border-radius: var(--cell-border-radius);
+  }
+
+  l-input-otp:not(:defined) > input {
+    display: none;
   }
 }

package/dist/css/index.css

@@ -707,6 +707,16 @@ In dark mode, mixes the base color with black (default 15% black).
     white-space: nowrap;
     border: 0;
   }
+
+  /* Hide Shadow-DOM overlay elements until their custom element upgrades.
+     Without this, slotted/inner content flashes inline before the upgrade. */
+  l-dialog:not(:defined),
+  l-drawer:not(:defined),
+  l-dropdown:not(:defined),
+  l-popover:not(:defined),
+  l-tooltip:not(:defined) {
+    display: none;
+  }
 }
 
 /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */

package/dist/custom-elements.json

@@ -2240,7 +2240,7 @@
         {
           "kind": "variable",
           "name": "r",
-          "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),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(`blur`,this._clearCells)}_teardown(){this._initialized&&=(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(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
+          "default": "class extends e{constructor(...e){super(...e),this._cells=[],this._separatorEl=null,this._initialized=!1,this._updateCells=()=>{let e=this._input.value,t=this._input.maxLength||6,n=Math.min(this._input.selectionStart??0,t-1),r=document.activeElement===this._input;for(let t=0;t<this._cells.length;t++){let i=this._cells[t],a=i.firstElementChild,o=e[t]??``;a.textContent=o,o?i.setAttribute(`data-filled`,``):i.removeAttribute(`data-filled`),r&&t===n?i.setAttribute(`data-active`,``):i.removeAttribute(`data-active`)}},this._clearCells=()=>{for(let e of this._cells)e.removeAttribute(`data-active`)},this._scheduleUpdateCells=()=>{requestAnimationFrame(this._updateCells)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_setup(){let e=this.querySelector(`input`);if(!e)return;this._input=e;let t=Number(getComputedStyle(this).getPropertyValue(`--digits`).trim())||6,n={type:`text`,inputmode:`numeric`,autocomplete:`one-time-code`,maxlength:String(t),pattern:String.raw`\\d{${t}}`};for(let[e,t]of Object.entries(n))this._input.hasAttribute(e)||this._input.setAttribute(e,t);this._container=document.createElement(`div`),this._container.className=`l-input-otp-cells`,this._container.setAttribute(`aria-hidden`,`true`);for(let e=0;e<t;e++){let n=document.createElement(`div`);n.className=`l-input-otp-cell`,n.appendChild(document.createElement(`span`)),this._cells.push(n),this._container.appendChild(n),this.separatorAfter&&e===this.separatorAfter-1&&e<t-1&&(this._separatorEl=document.createElement(`span`),this._separatorEl.className=`l-input-otp-separator`,this._container.appendChild(this._separatorEl))}this._input.replaceWith(this._container),this._container.appendChild(this._input),this._initialized=!0,this._updateCells(),this._input.addEventListener(`input`,this._updateCells),this._input.addEventListener(`click`,this._updateCells),this._input.addEventListener(`keyup`,this._updateCells),this._input.addEventListener(`focus`,this._scheduleUpdateCells),this._input.addEventListener(`blur`,this._clearCells)}_teardown(){this._initialized&&=(this._input.removeEventListener(`input`,this._updateCells),this._input.removeEventListener(`click`,this._updateCells),this._input.removeEventListener(`keyup`,this._updateCells),this._input.removeEventListener(`focus`,this._scheduleUpdateCells),this._input.removeEventListener(`blur`,this._clearCells),this._container.replaceWith(this._input),this._separatorEl?.remove(),this._cells=[],this._separatorEl=null,!1)}}"
         }
       ],
       "exports": [
@@ -4638,11 +4638,31 @@
             },
             {
               "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
-              "name": "--size"
+              "name": "--cell-size"
             },
             {
               "description": "Space between cells (default: 0.5rem).",
-              "name": "--gap"
+              "name": "--cell-gap"
+            },
+            {
+              "description": "Cell background color.",
+              "name": "--cell-bg-color"
+            },
+            {
+              "description": "Cell border color.",
+              "name": "--cell-border-color"
+            },
+            {
+              "description": "Cell border-radius.",
+              "name": "--cell-border-radius"
+            },
+            {
+              "description": "Border + ring color of the active (focused) cell.",
+              "name": "--cell-focus-color"
+            },
+            {
+              "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
+              "name": "--cell-focus-ring"
             }
           ],
           "members": [
@@ -4686,6 +4706,10 @@
               "kind": "field",
               "name": "_clearCells"
             },
+            {
+              "kind": "field",
+              "name": "_scheduleUpdateCells"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -10762,11 +10786,31 @@
             },
             {
               "description": "Cell width and height (default: 2.75rem). Font size scales automatically.",
-              "name": "--size"
+              "name": "--cell-size"
             },
             {
               "description": "Space between cells (default: 0.5rem).",
-              "name": "--gap"
+              "name": "--cell-gap"
+            },
+            {
+              "description": "Cell background color.",
+              "name": "--cell-bg-color"
+            },
+            {
+              "description": "Cell border color.",
+              "name": "--cell-border-color"
+            },
+            {
+              "description": "Cell border-radius.",
+              "name": "--cell-border-radius"
+            },
+            {
+              "description": "Border + ring color of the active (focused) cell.",
+              "name": "--cell-focus-color"
+            },
+            {
+              "description": "`box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).",
+              "name": "--cell-focus-ring"
             }
           ],
           "members": [
@@ -10843,6 +10887,11 @@
               "name": "_clearCells",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scheduleUpdateCells",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "emit",

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/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/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
@@ -392,6 +460,14 @@ import 'luxen-ui/dialog';
 
 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`' },

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