luxen-ui 0.1.0

package/dist/css/elements/disclosure.css

@@ -0,0 +1,137 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Base
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure {
+    --marker-size: 20px;
+    --marker-color: var(--l-color-text-tertiary);
+
+    --_duration: 200ms;
+    --_easing: cubic-bezier(0.44, 0.36, 0.04, 1);
+
+    interpolate-size: allow-keywords;
+
+    /* Hide default marker */
+    & summary::-webkit-details-marker {
+      display: none;
+    }
+
+    & summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+      font-weight: 600;
+      font-size: var(--text-base);
+      line-height: 1;
+      color: var(--l-color-text-primary);
+      list-style: none;
+      cursor: pointer;
+
+      &:hover {
+        background-color: color-mix(
+          in oklab,
+          var(--l-color-surface) 95%,
+          var(--l-color-text-primary)
+        );
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--l-focus-ring);
+        outline-offset: -2px;
+      }
+    }
+
+    & > :last-child:not(summary) {
+      padding: calc(var(--spacing) * 4);
+      color: var(--l-color-text-secondary);
+    }
+
+    /* Animate with ::details-content */
+    & ::details-content {
+      transition:
+        content-visibility var(--_duration) var(--_easing) allow-discrete,
+        block-size var(--_duration) var(--_easing);
+      block-size: 0;
+    }
+
+    &[open] ::details-content {
+      block-size: auto;
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   State: disabled
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure:has(summary[disabled]),
+  .l-disclosure[disabled] {
+    & summary {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.4;
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Variant: bordered
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure[data-variant='bordered'] {
+    --border-radius: var(--radius-md);
+    --border-color: var(--l-color-border);
+
+    background-color: var(--l-color-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    overflow: clip;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Marker
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-disclosure[data-marker] summary::after {
+    content: '';
+    display: block;
+    height: var(--marker-size);
+    width: var(--marker-size);
+    flex-shrink: 0;
+    transition: rotate var(--_duration) var(--_easing);
+  }
+
+  /* arrow */
+  .l-disclosure[data-marker='arrow'] summary::after {
+    background-color: var(--marker-color);
+    /* mdi:chevron-down */
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>')
+      center no-repeat;
+    rotate: 0deg;
+  }
+
+  .l-disclosure[data-marker='arrow'][open] summary::after {
+    rotate: 180deg;
+  }
+
+  /* plus */
+  .l-disclosure[data-marker='plus'] summary::after {
+    background-color: var(--marker-color);
+    /* mdi:plus */
+    mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/></svg>")
+      center no-repeat;
+    rotate: 0deg;
+  }
+
+  .l-disclosure[data-marker='plus'][open] summary::after {
+    rotate: 45deg;
+  }
+}

package/dist/css/elements/divider.css

@@ -0,0 +1,75 @@
+@layer components {
+  l-divider {
+    --color: var(--l-color-divider);
+    --thickness: 1px;
+    --spacing: var(--spacing-4, 1rem);
+
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* Line */
+  l-divider::before {
+    position: absolute;
+    display: block;
+    content: '';
+    background-color: var(--color);
+    z-index: 1;
+  }
+
+  /* Label text */
+  l-divider[label]::after {
+    content: attr(label);
+    position: relative;
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 600;
+    background-color: var(--l-color-surface);
+    color: var(--l-color-text-tertiary);
+    z-index: 2;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   horizontal (default)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-divider:not([orientation='vertical']) {
+    margin-block: var(--spacing);
+    width: 100%;
+  }
+
+  l-divider:not([orientation='vertical'])::before {
+    height: var(--thickness);
+    inset: calc(50% - var(--thickness) / 2) 0 0;
+  }
+
+  l-divider:not([orientation='vertical'])[label]::after {
+    padding-inline: var(--spacing-2, 0.5rem);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   vertical
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-divider[orientation='vertical'] {
+    padding: 0 4px;
+    margin-inline: var(--spacing);
+    height: 100%;
+  }
+
+  l-divider[orientation='vertical']::before {
+    width: var(--thickness);
+    inset: 0 0 0 calc(50% - var(--thickness) / 2);
+  }
+
+  l-divider[orientation='vertical'][label]::after {
+    padding-block: var(--spacing-2, 0.5rem);
+  }
+}

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

@@ -0,0 +1,164 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅸🅽🅿🆄🆃 🅾🆃🅿
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  Stripe-style OTP input: a single hidden <input> handles keyboard, paste,
+  and autocomplete while visual cells render each digit with individual borders.
+
+  Usage:
+    <l-input-otp>
+      <input type="text" inputmode="numeric"
+             autocomplete="one-time-code" maxlength="6" />
+    </l-input-otp>
+  */
+
+  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);
+
+    display: inline-flex;
+    position: relative;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅴🅻🅻🆂 🅲🅾🅽🆃🅰🅸🅽🅴🆁
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-input-otp-cells {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap, 0.5rem);
+    position: relative;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅴🅻🅻
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-input-otp-cell {
+    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);
+    font-family:
+      ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+      monospace;
+    font-size: var(--_font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    color: var(--l-color-text-primary);
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅰🅲🆃🅸🆅🅴 🅲🅴🅻🅻 (focus highlight)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  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);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🅴🅿🅰🆁🅰🆃🅾🆁
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-input-otp-separator {
+    display: flex;
+    align-items: center;
+    color: var(--l-color-text-tertiary);
+    padding-inline: 0.125rem;
+    pointer-events: none;
+
+    &::before {
+      content: '\2013'; /* en-dash */
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅷🅸🅳🅳🅴🅽 🅸🅽🅿🆄🆃
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  The native input covers the entire cell area so clicks focus it naturally.
+  It is visually transparent — the cells provide all visual feedback.
+  */
+
+  l-input-otp:defined .l-input-otp-cells > input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    opacity: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    caret-color: transparent;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🅸🆉🅴🆂
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-input-otp[size='sm'] {
+    --size: 2rem;
+  }
+
+  l-input-otp[size='lg'] {
+    --size: 3.5rem;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅳🅸🆂🅰🅱🅻🅴🅳
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-input-otp:has(input:disabled) .l-input-otp-cell {
+    opacity: 0.4;
+    cursor: not-allowed;
+    color: var(--l-color-text-disabled);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅿🆁🅾🅶🆁🅴🆂🆂🅸🆅🅴 🅴🅽🅷🅰🅽🅲🅴🅼🅴🅽🆃 🅵🅰🅻🅻🅱🅰🅲🅺
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  Before JS loads, the raw input is visible and usable.
+  */
+
+  l-input-otp:not(:defined) > input {
+    all: unset;
+    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);
+  }
+}

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

@@ -0,0 +1,245 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅸🅽🅿🆄🆃 🆂🆃🅴🅿🅿🅴🆁
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  - https://www.nngroup.com/articles/input-steppers/
+
+  @scope prevents external styles from leaking into internal elements
+  (button, input, divs) — important when Luxen is used in uncontrolled environments.
+  */
+
+  @scope (l-input-stepper) {
+    /* Reset — :where() keeps specificity at (0,0,0) so component rules always win.
+       Prevents global rules targeting `button`, `input`, `div` from breaking internals.
+       Custom properties are NOT affected by `all` — design tokens cascade through.
+       :scope is excluded — the host is a unique custom element name and gets its
+       styles from the base + appearance :scope blocks without interference. */
+    *:where(:not(img, svg, l-icon):not(svg *)),
+    *::before,
+    *::after {
+      all: unset;
+      display: revert;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅷🅾🆂🆃
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    :scope {
+      --_button-size: var(--l-size-control-md);
+      --_border-color: var(--l-color-border);
+      --_border-radius: var(--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);
+
+      display: inline-flex;
+      align-items: stretch;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    Reserve button space before JS loads. Native spin buttons remain as fallback.
+    */
+
+    :scope:not(:defined) {
+      padding-inline: var(--_button-size);
+    }
+
+    :scope:defined {
+      padding-inline: 0;
+    }
+
+    input::-webkit-inner-spin-button,
+    input::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆂🅸🆉🅴🆂
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    :scope[size='xs'] {
+      --_button-size: var(--l-size-control-xs);
+    }
+    :scope[size='sm'] {
+      --_button-size: var(--l-size-control-sm);
+    }
+    :scope[size='lg'] {
+      --_button-size: var(--l-size-control-lg);
+    }
+    :scope[size='xl'] {
+      --_button-size: var(--l-size-control-xl);
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅱🆄🆃🆃🅾🅽🆂
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    button {
+      padding: 0;
+      appearance: none;
+      background: none;
+      border: 0;
+      font-family: inherit;
+      font-size: inherit;
+      width: var(--_button-size);
+      aspect-ratio: 1;
+      cursor: pointer;
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    @media (hover: hover) {
+      button:hover:not(:disabled) {
+        background-color: var(--_button-bg-hover);
+      }
+    }
+
+    button:active:not(:disabled) {
+      background-color: var(--_button-bg-active);
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅸🅽🅿🆄🆃
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    input {
+      appearance: none;
+      box-sizing: border-box;
+      font-family: inherit;
+      font-size: inherit;
+      font-variant-numeric: tabular-nums;
+      border: 0;
+      text-align: center;
+      width: calc(3ch + var(--_button-size) * 2 / 3);
+      min-width: 0;
+      padding-inline: calc(var(--_button-size) / 3);
+      align-self: stretch;
+      background: transparent;
+      color: inherit;
+      caret-shape: underscore;
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+      color: var(--l-color-text-disabled);
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆃🆁🅰🅲🅺 (animated number display)
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    .l-input-stepper-value {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .l-input-stepper-track-display {
+      position: absolute;
+      inset: 0;
+      height: var(--_button-size);
+      overflow: hidden;
+      pointer-events: none;
+      font-variant-numeric: tabular-nums;
+      background: var(--_track-bg, var(--l-color-surface));
+    }
+
+    .l-input-stepper-track {
+      transition: translate 0.26s ease-out;
+    }
+
+    .l-input-stepper-track div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--_button-size);
+    }
+
+    .l-input-stepper-value:focus-within .l-input-stepper-track-display {
+      visibility: hidden;
+    }
+
+    :scope:not([with-roller]) .l-input-stepper-track-display {
+      display: none;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅳🅸🆂🅰🅱🅻🅴🅳
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    :scope:has(input:disabled) {
+      color: var(--l-color-text-disabled);
+    }
+  }
+}
+
+@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);
+      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);
+    }
+
+    button:last-of-type {
+      border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
+    }
+
+    :scope:has(input:disabled) {
+      --_track-bg: var(--l-color-bg-disabled);
+      border-color: var(--l-color-border-disabled);
+      background-color: var(--l-color-bg-disabled);
+    }
+  }
+
+  /* FOUCE: match visual appearance before JS loads.
+     min-height adds 2px to account for the 1px border on each side,
+     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);
+      background-color: var(--l-color-surface);
+      min-height: calc(var(--_button-size) + 2px);
+    }
+  }
+}