luxen-ui 0.1.0

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

@@ -0,0 +1,238 @@
+@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[appearance='rounded']) {
+    :scope {
+      gap: 0.25rem;
+    }
+
+    button {
+      border: 1px solid var(--_border-color);
+      border-radius: var(--radius-full);
+      background-color: var(--l-color-surface);
+    }
+
+    @media (hover: hover) {
+      button:hover:not(:disabled) {
+        border-color: var(--l-color-text-primary);
+        background-color: transparent;
+      }
+    }
+
+    button:active:not(:disabled) {
+      border-color: var(--l-color-text-primary);
+      background-color: var(--_button-bg-active);
+    }
+
+    button:disabled {
+      border-color: var(--l-color-border-disabled);
+    }
+  }
+}

package/dist/css/elements/kbd.css

@@ -0,0 +1,21 @@
+@layer components {
+  kbd:has(> .l-kbd) {
+    font: inherit;
+  }
+
+  .l-kbd {
+    display: inline-block;
+    padding-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 2);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+    color: var(--l-color-text-primary);
+    background-color: var(--l-color-bg-fill-neutral-soft);
+    border: 1px solid var(--l-color-border-interactive);
+    border-bottom-width: 2px;
+    border-radius: var(--radius-md);
+  }
+}

package/dist/css/elements/progress.css

@@ -0,0 +1,114 @@
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+
+@keyframes progress-indeterminate-bounce {
+  0% {
+    transform: translateX(0%) scaleX(0.9);
+  }
+
+  25% {
+    transform: translateX(100%) scaleX(1.1);
+  }
+
+  50% {
+    transform: translateX(0%) scaleX(0.9);
+  }
+
+  75% {
+    transform: translateX(100%) scaleX(1.1);
+  }
+
+  100% {
+    transform: translateX(0%) scaleX(0.9);
+  }
+}
+
+@keyframes progress-indeterminate-bounce-vertical {
+  0% {
+    transform: translateY(-20%);
+  }
+
+  50% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(-20%);
+  }
+}
+
+@layer components {
+  .l-progress {
+    --size: 4px;
+    --track-color: rgba(5, 114, 206, 0.2);
+    --indicator-color: rgb(5, 114, 206);
+    --indeterminate-animation: progress-indeterminate;
+    /*--indeterminate-animation: attr(data-indeterminate-animation type(<custom-ident>), progress-indeterminate);*/
+
+    position: relative;
+    display: block;
+    width: 100%;
+    height: var(--size);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .l-progress::-moz-progress-bar {
+    background-color: var(--indicator-color);
+  }
+
+  .l-progress::-webkit-progress-bar {
+    background-color: var(--track-color);
+  }
+
+  .l-progress::-webkit-progress-value {
+    background-color: var(--indicator-color);
+  }
+
+  .l-progress:indeterminate::-moz-progress-bar {
+    animation: var(--indeterminate-animation) 1s infinite linear;
+    transform-origin: 0% 50%;
+  }
+
+  /*
+    -webkit-progress-value do not accept @keyframes outside the shadow-root
+    https://issues.chromium.org/issues/40417491
+  */
+  .l-progress:indeterminate::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--indicator-color);
+    animation: var(--indeterminate-animation) 1s infinite linear;
+    transform-origin: 0% 50%;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆄🅸: vertical
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-progress[data-orientation='vertical'] {
+    --indeterminate-animation: progress-indeterminate-bounce-vertical;
+
+    width: var(--size);
+    height: 100%;
+  }
+
+  .l-progress[data-orientation='vertical']:indeterminate::after {
+    height: 50%;
+  }
+}

package/dist/css/elements/select.css

@@ -0,0 +1,71 @@
+@layer components {
+  .l-select {
+    --radius: 4px;
+    --border-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+
+    &,
+    &::picker(select) {
+      appearance: base-select;
+    }
+
+    &::picker-icon {
+      display: none;
+    }
+
+    &::picker(select) {
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      min-width: 180px;
+      margin-block-start: 0.25rem;
+      padding: 4px;
+    }
+
+    /* enable transitions in the drop down */
+    &::picker(select) {
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s var(--ease-out-3, cubic-bezier(0, 0, 0.3, 1)),
+        display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete;
+    }
+
+    /* set the off stage styles */
+    &:not(:open)::picker(select) {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+
+    /* set the on stage styles */
+    &:open::picker(select) {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .l-select-item {
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding-inline: 8px;
+    padding-block: 6px;
+    isolation: isolate;
+    cursor: pointer;
+    border-radius: var(--radius);
+
+    &::checkmark {
+      background-color: currentColor;
+      block-size: 20px;
+      inline-size: 20px;
+      /* https://lucide.dev/icons/check-check */
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>')
+        center no-repeat;
+      mask-size: 16px;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-blue-50);
+      }
+    }
+  }
+}

package/dist/css/elements/skeleton.css

@@ -0,0 +1,89 @@
+@layer components {
+  l-skeleton {
+    --_fill: light-dark(var(--color-gray-200), var(--color-gray-700));
+    --_shimmer: light-dark(var(--color-gray-100), var(--color-gray-600));
+
+    position: relative;
+    overflow: hidden;
+    display: block;
+    width: var(--width, 100%);
+    height: var(--height, 1.2em);
+    background-color: var(--_fill);
+    border-radius: var(--radius-sm);
+
+    > * {
+      visibility: hidden;
+    }
+
+    &:not(:empty) {
+      max-width: fit-content;
+      height: auto;
+    }
+
+    /* Shapes */
+
+    &[shape='circle'] {
+      border-radius: var(--radius-full);
+    }
+
+    &[shape='text'] {
+      height: auto;
+      transform: scale(1, 0.6);
+      transform-origin: 0 60%;
+
+      &:empty::before {
+        content: '\00a0';
+      }
+    }
+
+    /* Animations — pulse is default */
+
+    &:not([animation]),
+    &[animation='pulse'] {
+      animation: l-skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) 0.5s infinite;
+      animation-fill-mode: backwards;
+    }
+
+    &[animation='wave']::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: linear-gradient(
+        270deg,
+        var(--_fill) 0%,
+        var(--_shimmer) 51%,
+        var(--_fill) 100%
+      );
+      animation: l-skeleton-wave 2s ease-in-out infinite;
+      z-index: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &,
+      &::after {
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes l-skeleton-pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes l-skeleton-wave {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}

package/dist/css/elements/tabs/enclosed.css

@@ -0,0 +1,148 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Base
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-tabs {
+    display: block;
+  }
+
+  l-tabs [role='tablist'] {
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: flex;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+      transform: translateX(var(--_indicator-left, 0));
+      width: var(--_indicator-width, 0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-tabs [role='tablist'] {
+      --_duration: 0ms;
+    }
+
+    l-tabs [role='tab'] {
+      transition-duration: 0ms;
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Tab trigger
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-tabs [role='tab'] {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    height: var(--l-size-control-xl);
+    white-space: nowrap;
+    font-family: inherit;
+    font-weight: 500;
+    font-size: var(--text-sm);
+    line-height: 1;
+    color: var(--l-color-text-secondary);
+    transition: color 150ms;
+    -webkit-tap-highlight-color: transparent;
+
+    &[aria-selected='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-selected='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Tab panel
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-tabs [role='tabpanel'] {
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: 2px;
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-tabs[full-width] [role='tablist'] {
+    width: 100%;
+  }
+
+  l-tabs[full-width] [role='tab'] {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Variant: enclosed
+   A pill-shaped tablist with a sliding background indicator behind the active tab.
+   Visual reference: https://ui.shadcn.com/docs/components/radix/tabs
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-tabs[variant='enclosed'] {
+    & [role='tablist'] {
+      background: var(--l-color-bg-fill-neutral-subtle);
+      border-radius: var(--radius-lg);
+      padding: calc(var(--spacing) * 1);
+      gap: calc(var(--spacing) * 1);
+      box-shadow: inset 0 0 0 1px var(--l-color-divider);
+
+      &::before {
+        background: var(--l-color-surface);
+        border-radius: var(--radius-md);
+        box-shadow:
+          0 1px 3px 0 rgb(0 0 0 / 0.08),
+          0 1px 2px -1px rgb(0 0 0 / 0.08);
+        inset-block: calc(var(--spacing) * 1);
+        z-index: 0;
+      }
+    }
+
+    & [role='tab'] {
+      position: relative;
+      z-index: 1;
+      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+      border-radius: var(--radius-md);
+    }
+  }
+}