luxen-ui 0.2.0 → 0.3.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/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 */
@@ -757,8 +767,8 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces. */
   --l-backdrop: light-dark(oklch(46% 0.01 260 / 33%), oklch(15% 0.01 260 / 60%));
 
-  /* Default border for form controls, secondary buttons, inputs, and selects. */
-  --l-color-border: light-dark(var(--color-gray-400), var(--color-gray-800));
+  /* Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content. */
+  --l-color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
 
   /* Subtle divider line for separating content sections, list items, and card groups. Lighter than --l-color-border to avoid visual competition with interactive element borders. */
   --l-color-divider: light-dark(var(--color-gray-200), var(--color-gray-700));
@@ -766,6 +776,9 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Subtle border or ring for interactive elements like close buttons, toggles, and icon buttons on hover. Provides low-contrast visual feedback without competing with primary content. */
   --l-color-border-interactive: light-dark(var(--color-gray-300), var(--color-gray-600));
 
+  /* Border for floating surfaces like popovers, dropdowns, menus, tooltips, and combobox listboxes. Aliases --l-color-border so overlays stay visually consistent with form controls, but exposed as a separate semantic so consumers can soften overlay borders independently if needed. Pairs with --l-color-surface-overlay. */
+  --l-color-border-overlay: var(--l-color-border);
+
   /* Border color for disabled form controls, buttons, and interactive elements. Faded to signal non-interactivity. */
   --l-color-border-disabled: light-dark(var(--color-gray-300), var(--color-gray-700));
 

package/dist/css/elements/button.css

@@ -24,7 +24,7 @@
       var(--l-color-text-primary)
     );
     --background-color-hover: var(--background-color-active);
-    --font-size: var(--text-md);
+    --font-size: var(--text-sm);
     --text-color: var(--l-color-text-primary);
     --text-color-hover: var(--text-color);
     --border-color: var(--l-color-border);

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 */
@@ -757,8 +767,8 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces. */
   --l-backdrop: light-dark(oklch(46% 0.01 260 / 33%), oklch(15% 0.01 260 / 60%));
 
-  /* Default border for form controls, secondary buttons, inputs, and selects. */
-  --l-color-border: light-dark(var(--color-gray-400), var(--color-gray-800));
+  /* Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content. */
+  --l-color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
 
   /* Subtle divider line for separating content sections, list items, and card groups. Lighter than --l-color-border to avoid visual competition with interactive element borders. */
   --l-color-divider: light-dark(var(--color-gray-200), var(--color-gray-700));
@@ -766,6 +776,9 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Subtle border or ring for interactive elements like close buttons, toggles, and icon buttons on hover. Provides low-contrast visual feedback without competing with primary content. */
   --l-color-border-interactive: light-dark(var(--color-gray-300), var(--color-gray-600));
 
+  /* Border for floating surfaces like popovers, dropdowns, menus, tooltips, and combobox listboxes. Aliases --l-color-border so overlays stay visually consistent with form controls, but exposed as a separate semantic so consumers can soften overlay borders independently if needed. Pairs with --l-color-surface-overlay. */
+  --l-color-border-overlay: var(--l-color-border);
+
   /* Border color for disabled form controls, buttons, and interactive elements. Faded to signal non-interactivity. */
   --l-color-border-disabled: light-dark(var(--color-gray-300), var(--color-gray-700));