luxen-ui 0.2.1 → 0.4.0

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/elements/select.css

@@ -1,6 +1,6 @@
 @layer components {
   .l-select {
-    --radius: 4px;
+    --border-radius: 4px;
     --border-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 
     &,
@@ -14,7 +14,7 @@
 
     &::picker(select) {
       border: 1px solid var(--border-color);
-      border-radius: var(--radius);
+      border-radius: var(--border-radius);
       min-width: 180px;
       margin-block-start: 0.25rem;
       padding: 4px;
@@ -50,7 +50,7 @@
     padding-block: 6px;
     isolation: isolate;
     cursor: pointer;
-    border-radius: var(--radius);
+    border-radius: var(--border-radius);
 
     &::checkmark {
       background-color: currentColor;

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/divider.css

@@ -52,6 +52,13 @@
     padding-inline: var(--spacing-2, 0.5rem);
   }
 
+  /* Compact form when slotted into <l-dropdown>: bleed to panel edges, tighten spacing. */
+  l-dropdown l-divider:not([orientation='vertical']) {
+    margin-block: var(--padding, 0.25rem);
+    margin-inline: calc(var(--padding, 0.25rem) * -1);
+    width: auto;
+  }
+
   /*
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    vertical

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/elements/select.css

@@ -1,6 +1,6 @@
 @layer components {
   .l-select {
-    --radius: 4px;
+    --border-radius: 4px;
     --border-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 
     &,
@@ -14,7 +14,7 @@
 
     &::picker(select) {
       border: 1px solid var(--border-color);
-      border-radius: var(--radius);
+      border-radius: var(--border-radius);
       min-width: 180px;
       margin-block-start: 0.25rem;
       padding: 4px;
@@ -50,7 +50,7 @@
     padding-block: 6px;
     isolation: isolate;
     cursor: pointer;
-    border-radius: var(--radius);
+    border-radius: var(--border-radius);
 
     &::checkmark {
       background-color: currentColor;

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