luxen-ui 0.1.2 → 0.2.1

package/cdn/styles/elements/input-stepper/default.css

@@ -30,8 +30,8 @@
 
     :scope {
       --_button-size: var(--l-size-control-md);
-      --_border-color: var(--l-color-border);
-      --_border-radius: var(--border-radius, var(--radius-md));
+      --border-color: var(--l-color-border);
+      --border-radius: var(--radius-md);
       --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
       --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
 
@@ -45,7 +45,7 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    Reserve button space before JS loads. Native spin buttons remain as fallback.
+    Reserve button space before JS loads to avoid layout shift when buttons mount.
     */
 
     :scope:not(:defined) {
@@ -56,12 +56,6 @@
       padding-inline: 0;
     }
 
-    input::-webkit-inner-spin-button,
-    input::-webkit-outer-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
     /*
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
     */
 
     input {
-      appearance: none;
+      appearance: textfield;
       box-sizing: border-box;
       font-family: inherit;
       font-size: inherit;
@@ -205,23 +199,32 @@
       color: var(--l-color-text-disabled);
     }
   }
+
+  /* Hide native spinners — kept outside @scope because Safari ignores
+     ::-webkit-*-spin-button rules nested inside @scope blocks. */
+  l-input-stepper input::-webkit-inner-spin-button,
+  l-input-stepper input::-webkit-outer-spin-button {
+    appearance: none;
+    display: none;
+    margin: 0;
+  }
 }
 
 @layer components {
   @scope (l-input-stepper:not([appearance]), l-input-stepper[appearance='default']) {
     :scope {
-      border: 1px solid var(--_border-color);
-      border-radius: var(--_border-radius);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
       background-color: var(--l-color-surface);
       min-height: var(--_button-size);
     }
 
     button:first-of-type {
-      border-radius: var(--_border-radius) 0 0 var(--_border-radius);
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
     }
 
     button:last-of-type {
-      border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
     }
 
     :scope:has(input:disabled) {
@@ -236,8 +239,8 @@
      since no buttons exist to push the content area beyond min-height. */
   @scope (l-input-stepper:not(:defined):not([appearance]), l-input-stepper:not(:defined)[appearance='default']) {
     :scope {
-      border: 1px solid var(--_border-color);
-      border-radius: var(--_border-radius);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
       background-color: var(--l-color-surface);
       min-height: calc(var(--_button-size) + 2px);
     }

package/cdn/styles/elements/input-stepper/rounded.css

@@ -30,8 +30,8 @@
 
     :scope {
       --_button-size: var(--l-size-control-md);
-      --_border-color: var(--l-color-border);
-      --_border-radius: var(--border-radius, var(--radius-md));
+      --border-color: var(--l-color-border);
+      --border-radius: var(--radius-md);
       --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
       --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
 
@@ -45,7 +45,7 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    Reserve button space before JS loads. Native spin buttons remain as fallback.
+    Reserve button space before JS loads to avoid layout shift when buttons mount.
     */
 
     :scope:not(:defined) {
@@ -56,12 +56,6 @@
       padding-inline: 0;
     }
 
-    input::-webkit-inner-spin-button,
-    input::-webkit-outer-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
     /*
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
     */
 
     input {
-      appearance: none;
+      appearance: textfield;
       box-sizing: border-box;
       font-family: inherit;
       font-size: inherit;
@@ -205,6 +199,15 @@
       color: var(--l-color-text-disabled);
     }
   }
+
+  /* Hide native spinners — kept outside @scope because Safari ignores
+     ::-webkit-*-spin-button rules nested inside @scope blocks. */
+  l-input-stepper input::-webkit-inner-spin-button,
+  l-input-stepper input::-webkit-outer-spin-button {
+    appearance: none;
+    display: none;
+    margin: 0;
+  }
 }
 
 @layer components {
@@ -214,7 +217,7 @@
     }
 
     button {
-      border: 1px solid var(--_border-color);
+      border: 1px solid var(--border-color);
       border-radius: var(--radius-full);
       background-color: var(--l-color-surface);
     }

package/cdn/styles/index.css

@@ -757,8 +757,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 +766,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-stepper/default.css

@@ -30,8 +30,8 @@
 
     :scope {
       --_button-size: var(--l-size-control-md);
-      --_border-color: var(--l-color-border);
-      --_border-radius: var(--border-radius, var(--radius-md));
+      --border-color: var(--l-color-border);
+      --border-radius: var(--radius-md);
       --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
       --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
 
@@ -45,7 +45,7 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    Reserve button space before JS loads. Native spin buttons remain as fallback.
+    Reserve button space before JS loads to avoid layout shift when buttons mount.
     */
 
     :scope:not(:defined) {
@@ -56,12 +56,6 @@
       padding-inline: 0;
     }
 
-    input::-webkit-inner-spin-button,
-    input::-webkit-outer-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
     /*
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
     */
 
     input {
-      appearance: none;
+      appearance: textfield;
       box-sizing: border-box;
       font-family: inherit;
       font-size: inherit;
@@ -205,23 +199,32 @@
       color: var(--l-color-text-disabled);
     }
   }
+
+  /* Hide native spinners — kept outside @scope because Safari ignores
+     ::-webkit-*-spin-button rules nested inside @scope blocks. */
+  l-input-stepper input::-webkit-inner-spin-button,
+  l-input-stepper input::-webkit-outer-spin-button {
+    appearance: none;
+    display: none;
+    margin: 0;
+  }
 }
 
 @layer components {
   @scope (l-input-stepper:not([appearance]), l-input-stepper[appearance='default']) {
     :scope {
-      border: 1px solid var(--_border-color);
-      border-radius: var(--_border-radius);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
       background-color: var(--l-color-surface);
       min-height: var(--_button-size);
     }
 
     button:first-of-type {
-      border-radius: var(--_border-radius) 0 0 var(--_border-radius);
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
     }
 
     button:last-of-type {
-      border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
     }
 
     :scope:has(input:disabled) {
@@ -236,8 +239,8 @@
      since no buttons exist to push the content area beyond min-height. */
   @scope (l-input-stepper:not(:defined):not([appearance]), l-input-stepper:not(:defined)[appearance='default']) {
     :scope {
-      border: 1px solid var(--_border-color);
-      border-radius: var(--_border-radius);
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
       background-color: var(--l-color-surface);
       min-height: calc(var(--_button-size) + 2px);
     }

package/dist/css/elements/input-stepper/rounded.css

@@ -30,8 +30,8 @@
 
     :scope {
       --_button-size: var(--l-size-control-md);
-      --_border-color: var(--l-color-border);
-      --_border-radius: var(--border-radius, var(--radius-md));
+      --border-color: var(--l-color-border);
+      --border-radius: var(--radius-md);
       --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
       --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
 
@@ -45,7 +45,7 @@
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    Reserve button space before JS loads. Native spin buttons remain as fallback.
+    Reserve button space before JS loads to avoid layout shift when buttons mount.
     */
 
     :scope:not(:defined) {
@@ -56,12 +56,6 @@
       padding-inline: 0;
     }
 
-    input::-webkit-inner-spin-button,
-    input::-webkit-outer-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
     /*
     ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
     */
 
     input {
-      appearance: none;
+      appearance: textfield;
       box-sizing: border-box;
       font-family: inherit;
       font-size: inherit;
@@ -205,6 +199,15 @@
       color: var(--l-color-text-disabled);
     }
   }
+
+  /* Hide native spinners — kept outside @scope because Safari ignores
+     ::-webkit-*-spin-button rules nested inside @scope blocks. */
+  l-input-stepper input::-webkit-inner-spin-button,
+  l-input-stepper input::-webkit-outer-spin-button {
+    appearance: none;
+    display: none;
+    margin: 0;
+  }
 }
 
 @layer components {
@@ -214,7 +217,7 @@
     }
 
     button {
-      border: 1px solid var(--_border-color);
+      border: 1px solid var(--border-color);
       border-radius: var(--radius-full);
       background-color: var(--l-color-surface);
     }

package/dist/css/index.css

@@ -757,8 +757,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 +766,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));