@vialiq/flux-ui 0.19.0 → 0.21.0

package/README.md

@@ -380,6 +380,28 @@ Works with any JavaScript framework:
 - ✅ Focus states built-in
 - ✅ Semantic HTML patterns
 - ✅ Reduced motion support ready
+- ✅ Responsive `rem` scaling based on root font size
+
+### Responsive Typography & Rem Scaling
+Flux UI strictly uses `rem` units for typography and spacing to ensure accessibility. By default, it assumes a standard browser root font size of `16px`.
+
+If your application uses a custom root font size (such as the `62.5%` or `10px` hack), you must configure Flux UI to scale its internal calculations accordingly:
+
+```scss
+// In your application's main SCSS file:
+@use '@vialiq/flux-ui/styles' with (
+  $vi-rem-base: 10px
+);
+```
+This ensures that a component designed to be `16px` tall will correctly output `1.6rem`, rendering exactly 16 pixels at runtime against your custom 10px root.
+
+### CSS Unit Guidelines
+To maintain a robust, scalable, and accessible UI, Flux UI strictly adheres to the following unit rules:
+
+- **`rem`**: Used for **Typography**, **Spacing** (margin, padding, gap), and **Interactive Form Control Sizing** (button heights, input widths, etc.). This guarantees that everything defining the core layout grid and text hierarchy scales fluidly when a user changes their browser root font size for accessibility.
+- **`px`**: Reserved exclusively for rigid geometries that must never scale or blur. Used for **Borders** (`1px solid`), **Shadows** (offsets and blurs), small **Optical Adjustments** (e.g. `2px` focus outline offset), and **Visually Hidden Hacks** (e.g. `1px` clipping for screen readers).
+- **`dvh` / `dvw`** (with `vh` / `vw` fallback): Used for **Viewport-Relative Layouts**, such as full-screen modal overlays, drawer max-heights, or sticky banners that must span the entire screen regardless of the parent container size. Dynamic viewport units correctly account for mobile browser UI (like address bars) expanding and contracting.
+- **`%`**: Used for **Container-Relative Fluidity**, such as a button being `width: 100%` of its parent column, or grid layouts.
 
 ## Contributing
 

package/components/_accordion.scss

@@ -8,8 +8,8 @@ $accordion-border-radius: var(--vi-accordion-border-radius, tokens.$border-radiu
 $accordion-gap: var(--vi-accordion-gap, 0px);
 $accordion-animation-duration: var(--vi-accordion-animation-duration, 200ms);
 
-$accordion-item-header-padding: var(--vi-accordion-item-header-padding, 14px 16px);
-$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 16px 16px);
+$accordion-item-header-padding: var(--vi-accordion-item-header-padding, #{tokens.$spacing-sm} #{tokens.$spacing-md});
+$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 #{tokens.$spacing-md} #{tokens.$spacing-md});
 $accordion-item-header-bg: var(--vi-accordion-item-header-bg, transparent);
 $accordion-item-header-bg-hover: var(--vi-accordion-item-header-bg-hover, tokens.$layer-hover-01);
 $accordion-item-header-bg-open: var(--vi-accordion-item-header-bg-open, transparent);
@@ -43,8 +43,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   padding: $accordion-item-header-padding;
   background-color: $accordion-item-header-bg;
   color: $accordion-item-label-color;
-  font-family: tokens.$font-family-base;
-  font-size: var(--vi-accordion-item-header-font-size, tokens.$font-size-base);
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: var(--vi-accordion-item-header-font-size, #{tokens.$font-size-base});
   font-weight: $accordion-item-label-font-weight;
   text-align: left;
   border: none;
@@ -91,8 +91,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
   margin-inline-start: tokens.$spacing-xs;
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: #{tokens.$spacing-md};
+    height: #{tokens.$spacing-md};
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
@@ -112,9 +112,9 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion-panel-inner {
   padding: $accordion-item-body-padding;
-  font-family: tokens.$font-family-base;
-  font-size: tokens.$font-size-sm;
-  color: tokens.$text-secondary;
+  font-family: var(--vi-accordion-font-family, #{tokens.$font-family-base});
+  font-size: #{tokens.$font-size-sm};
+  color: #{tokens.$text-secondary};
   box-sizing: border-box;
 }
 
@@ -168,8 +168,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--sm,
 .accordion-item--sm {
-  --vi-accordion-item-header-padding: 10px 12px;
-  --vi-accordion-item-body-padding: 0 12px 12px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-xs} #{tokens.$spacing-sm};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-sm} #{tokens.$spacing-sm};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-sm};
 }
 
@@ -182,8 +182,8 @@ $accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$te
 
 .accordion--lg,
 .accordion-item--lg {
-  --vi-accordion-item-header-padding: 18px 20px;
-  --vi-accordion-item-body-padding: 0 20px 20px;
+  --vi-accordion-item-header-padding: #{tokens.$spacing-lg} #{tokens.$spacing-xl};
+  --vi-accordion-item-body-padding: 0 #{tokens.$spacing-xl} #{tokens.$spacing-xl};
   --vi-accordion-item-header-font-size: #{tokens.$font-size-lg};
 }
 

package/components/_alert.scss

@@ -15,15 +15,15 @@
     box-sizing: border-box;
     width: 100%;
 
-    border-radius: var(--vi-alert-border-radius, 6px);
-    padding: var(--vi-alert-padding, 12px 16px);
-    gap: var(--vi-alert-gap, 12px);
+    border-radius: var(--vi-alert-border-radius, #{tokens.$border-radius-lg});
+    padding: var(--vi-alert-padding, #{tokens.$spacing-xs} #{tokens.$spacing-md});
+    gap: var(--vi-alert-gap, #{tokens.$spacing-sm});
     border-width: var(--vi-alert-border-width, 1px);
     border-style: solid;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-sm;
-    line-height: tokens.$line-height-normal;
+    font-family: var(--vi-alert-font-family, #{tokens.$font-family-base});
+    font-size: #{tokens.$font-size-sm};
+    line-height: #{tokens.$line-height-normal};
   }
 
   .alert-icon {
@@ -45,7 +45,7 @@
 
   .alert-title {
     font-weight: tokens.$font-weight-semibold;
-    margin-bottom: 4px;
+    margin-bottom: #{tokens.$spacing-unit};
     display: block;
   }
 

package/components/_animation.scss

@@ -25,7 +25,7 @@
   --vi-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
   --vi-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  --vi-animation-expand-max-height: 100vh;
+  --vi-animation-expand-max-height: 100dvh;
   --vi-animation-expand-max-width: 100vw;
 }
 
@@ -186,11 +186,11 @@
 // Expand & Collapse Keyframes
 @keyframes vi-expand-vertical {
   from { max-height: 0; opacity: 0; }
-  to { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  to { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
 }
 
 @keyframes vi-collapse-vertical {
-  from { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
+  from { max-height: var(--vi-animation-expand-max-height, 100dvh); opacity: 1; }
   to { max-height: 0; opacity: 0; }
 }
 

package/components/_badge.scss

@@ -16,19 +16,21 @@
     white-space: nowrap;
     box-sizing: border-box;
 
-    font-size: var(--vi-badge-font-size, 11px);
+    // 20px = standard badge height (not on the spacing scale); kept explicit
+    height: var(--vi-badge-height, 20px);
+    font-size: var(--vi-badge-font-size, #{tokens.$font-size-xs});
     font-weight: var(--vi-badge-font-weight, #{tokens.$font-weight-semibold});
-    padding: var(--vi-badge-padding, 2px 8px);
-    border-radius: var(--vi-badge-border-radius, 9999px);
-    gap: var(--vi-badge-gap, 4px);
+    padding: var(--vi-badge-padding, 0 #{tokens.$spacing-xs});
+    border-radius: var(--vi-badge-border-radius, #{tokens.$border-radius-full});
+    gap: var(--vi-badge-gap, #{tokens.$spacing-unit});
 
     border: #{tokens.$border-width-thin} solid transparent;
   }
 
   .dot {
     display: inline-block;
-    width: var(--vi-badge-dot-size, 8px);
-    height: var(--vi-badge-dot-size, 8px);
+    width: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
+    height: var(--vi-badge-dot-size, #{tokens.$spacing-xs});
     border-radius: 50%;
     background-color: currentColor;
     flex-shrink: 0;

package/components/_checkbox.scss

@@ -7,12 +7,13 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   .checkbox-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-checkbox-label-gap, 8px);
+    gap: var(--vi-checkbox-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-checkbox-label-font-size, #{tokens.$font-size-base});
@@ -41,10 +42,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-checkbox-size, 18px);
-    height: var(--vi-checkbox-size, 18px);
+    width: var(--vi-checkbox-size, #{tokens.$spacing-md});
+    height: var(--vi-checkbox-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-checkbox-border-color, #{tokens.$outline});
-    border-radius: var(--vi-checkbox-border-radius, 3px);
+    border-radius: var(--vi-checkbox-border-radius, #{func.to-rem(4px)});
     background-color: var(--vi-checkbox-background-color, #{tokens.$color-background});
     transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
     flex-shrink: 0;

package/components/_chip.scss

@@ -12,13 +12,13 @@
     border-style: solid;
 
     // Tokens mapped directly from docs
-    height: var(--vi-chip-height, var(--vi-chip-height-md, 32px));
+    height: var(--vi-chip-height, var(--vi-chip-height-md, #{tokens.$spacing-xl}));
     padding: var(--vi-chip-padding, 0 10px);
-    border-radius: var(--vi-chip-border-radius, 999px);
+    border-radius: var(--vi-chip-border-radius, #{tokens.$border-radius-full});
     border-width: var(--vi-chip-border-width, 1px);
     gap: var(--vi-chip-gap, 6px);
-    font-size: var(--vi-chip-font-size, var(--vi-font-size-sm));
-    font-weight: var(--vi-chip-font-weight, var(--vi-font-weight-medium));
+    font-size: var(--vi-chip-font-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-chip-font-weight, #{tokens.$font-weight-medium});
     transition: all var(--vi-chip-transition, 100ms ease);
 
     // Color tokens to be overridden by vi-chip variant

package/components/_index.scss

@@ -18,4 +18,8 @@
 @forward 'switch';
 @forward 'select';
 @forward 'link';
-@forward 'focus';
+@forward 'focus';
+@forward 'tabs';
+@forward 'tab';
+@forward 'tab-panel';
+@forward 'spin';

package/components/_label.scss

@@ -14,8 +14,8 @@
     --vi-label-required-color: var(--vi-color-error, #{tokens.$color-error});
     // --vi-label-optional-color: var(--vi-text-helper)
     --vi-label-optional-color: var(--vi-text-helper, #{tokens.$text-helper});
-    // --vi-label-gap: 4px
-    --vi-label-gap: 4px;
+    // --vi-label-gap: $spacing-unit (4px)
+    --vi-label-gap: #{tokens.$spacing-unit};
   }
 
   .vi-label {
@@ -25,7 +25,7 @@
     font-size: var(--vi-label-font-size);
     font-weight: var(--vi-label-font-weight);
     color: var(--vi-label-color);
-    line-height: 1.5;
+    line-height: #{tokens.$line-height-normal};
     margin: 0;
 
     &.size-sm {

package/components/_modal.scss

@@ -25,14 +25,15 @@
     margin: auto;
     width: 100%;
     max-width: tokens.$modal-max-width-md;
-    max-height: 90vh; // Fallback max-height
+    max-height: 90vh;
+    max-height: 90dvh;
 
     z-index: tokens.$modal-z-index;
 
-    font-family: tokens.$font-family-base;
-    font-size: tokens.$font-size-base;
-    line-height: tokens.$line-height-normal;
-    color: tokens.$text-primary;
+    font-family: var(--vi-modal-font-family, #{tokens.$font-family-base});
+    font-size: var(--vi-modal-font-size, #{tokens.$font-size-base});
+    line-height: var(--vi-modal-line-height, #{tokens.$line-height-normal});
+    color: #{tokens.$text-primary};
 
     &[open] {
       display: flex;
@@ -230,6 +231,7 @@
       width: 100vw !important;
       width: 100dvw !important;
       max-height: 100vh !important;
+      max-height: 100dvh !important;
       height: 100vh !important;
       height: 100dvh !important;
       border-radius: 0 !important;

package/components/_radio.scss

@@ -34,7 +34,7 @@
 
   .radio-group-items {
     display: flex;
-    gap: var(--vi-radio-group-gap, 8px);
+    gap: var(--vi-radio-group-gap, #{tokens.$spacing-xs});
 
     &[orientation="vertical"] {
       flex-direction: column;
@@ -76,7 +76,7 @@
   .radio-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: var(--vi-radio-label-gap, 8px);
+    gap: var(--vi-radio-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-radio-label-font-size, #{tokens.$font-size-base});
@@ -104,8 +104,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--vi-radio-size, 18px);
-    height: var(--vi-radio-size, 18px);
+    width: var(--vi-radio-size, #{tokens.$spacing-md});
+    height: var(--vi-radio-size, #{tokens.$spacing-md});
     border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$outline});
     border-radius: 50%;
     background-color: var(--vi-radio-background-color, #{tokens.$color-background});
@@ -115,8 +115,9 @@
 
   .radio-dot {
     box-sizing: border-box;
-    width: var(--vi-radio-dot-size, 8px);
-    height: var(--vi-radio-dot-size, 8px);
+    // 8px dot is half of the 16px ($spacing-md) circle; this ratio is intentional
+    width: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
+    height: var(--vi-radio-dot-size, calc(#{tokens.$spacing-md} / 2));
     border-radius: 50%;
     background-color: var(--vi-radio-dot-color, #{tokens.$color-primary});
     transform: scale(0);

package/components/_select.scss

@@ -6,6 +6,7 @@
  */
 
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // -------------------------------------------------------------------------
@@ -38,14 +39,14 @@
     justify-content: space-between;
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--vi-select-sizing-min-height, 40px);
-    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-xs})
-             var(--vi-select-spacing-padding-inline, #{tokens.$spacing-sm});
+    min-height: var(--vi-select-sizing-min-height, #{tokens.$spacing-xl});
+    padding: var(--vi-select-spacing-padding-block, #{tokens.$spacing-unit})
+             var(--vi-select-spacing-padding-inline, #{func.to-rem(11px)});
     background-color: var(--vi-select-background-color, #{tokens.$color-background});
     border: var(--vi-select-border-width, #{tokens.$border-width-thin}) solid var(--vi-select-border-color, #{tokens.$border-03});
-    border-radius: var(--vi-select-shape-border-radius, #{tokens.$border-radius-lg});
+    border-radius: var(--vi-select-shape-border-radius, #{func.to-rem(6px)});
     font-family: inherit;
-    font-size: var(--vi-font-size-base, #{tokens.$font-size-base});
+    font-size: var(--vi-font-size-base, #{func.to-rem(14px)});
     color: var(--vi-select-text-color, #{tokens.$color-foreground});
     transition: border-color 150ms ease, box-shadow 150ms ease;
     cursor: pointer;

package/components/_switch.scss

@@ -1,4 +1,5 @@
 @use '../styles/variables' as tokens;
+@use '../styles/functions' as func;
 
 @layer components {
   // ── Wrapper ──────────────────────────────────────────────────────────────────
@@ -10,7 +11,7 @@
   .switch-wrapper {
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--vi-switch-label-gap, 8px);
+    gap: var(--vi-switch-label-gap, #{tokens.$spacing-xs});
     cursor: pointer;
     font-family: #{tokens.$font-family-base};
     font-size: var(--vi-switch-label-font-size, #{tokens.$font-size-base});
@@ -52,15 +53,15 @@
   .switch-track {
     box-sizing: border-box;
     position: relative;
-    width: var(--vi-switch-track-width, 44px);
-    height: var(--vi-switch-track-height, 24px);
+    width: var(--vi-switch-track-width, func.to-rem(44px));
+    height: var(--vi-switch-track-height, func.to-rem(22px));
     background-color: var(--vi-switch-track-color-off, #{tokens.$border-03});
-    border-radius: var(--vi-border-radius-full, 9999px);
+    border-radius: var(--vi-border-radius-full, #{tokens.$border-radius-full});
     transition: background-color var(--vi-switch-transition-duration, 150ms) ease;
     flex-shrink: 0;
     // Align track centre with first-line cap-height
     margin-top: calc(
-      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, 24px)) / 2
+      (1em * #{tokens.$line-height-normal} - var(--vi-switch-track-height, func.to-rem(24px))) / 2
     );
   }
 
@@ -69,10 +70,10 @@
   .switch-thumb {
     position: absolute;
     top: 50%;
-    left: var(--vi-switch-thumb-offset, 2px);
+    left: var(--vi-switch-thumb-offset, func.to-rem(2px));
     transform: translateY(-50%);
-    width: var(--vi-switch-thumb-size, 18px);
-    height: var(--vi-switch-thumb-size, 18px);
+    width: var(--vi-switch-thumb-size, func.to-rem(18px));
+    height: var(--vi-switch-thumb-size, func.to-rem(18px));
     background-color: var(--vi-switch-thumb-color, #{tokens.$text-primary-inverse});
     border-radius: 50%;
     box-shadow: var(--vi-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
@@ -86,7 +87,7 @@
 
     .switch-thumb {
       left: calc(
-        100% - var(--vi-switch-thumb-size, 18px) - var(--vi-switch-thumb-offset, 2px)
+        100% - var(--vi-switch-thumb-size, func.to-rem(18px)) - var(--vi-switch-thumb-offset, func.to-rem(2px))
       );
     }
   }
@@ -107,11 +108,11 @@
     opacity: var(--vi-switch-disabled-opacity, 0.5);
 
     .switch-track {
-      background-color: #{tokens.$border-03};
+      background-color: var(--vi-switch-track-color-disabled, #{tokens.$border-03});
     }
 
     .switch-input:checked ~ .switch-track {
-      background-color: #{tokens.$text-disabled};
+      background-color: var(--vi-switch-track-color-on-disabled, #{tokens.$text-disabled});
     }
   }
 

package/components/_tab-panel.scss

@@ -0,0 +1,20 @@
+@use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
+
+@layer components {
+
+
+// Hide inactive panels; keep them in DOM for lazy content preservation
+
+  [part='panel'] {
+    padding: var(--vi-tab-panel-padding, 16px 0);
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--vi-tabs-indicator-color, #{tokens.$color-primary});
+      outline-offset: 2px;
+      border-radius: #{func.to-rem(2px)};
+    }
+  }
+
+}

package/components/_tab.scss

@@ -0,0 +1,213 @@
+@use '@vialiq/flux-ui/styles/variables' as tokens;
+@use '../styles/functions' as func;
+
+@layer components {
+
+// ─────────────────────────────────────────────────────────────────────────────
+// vi-tab — Individual tab button
+//
+// The tab host is TRANSPARENT — the sliding cursor in vi-tabs handles all bg.
+// The tab itself is responsible for: typography, icon, badge, focus ring.
+//
+// Key decisions:
+//  • No background on :host — cursor does all surface work
+//  • Active: primary color + semibold + slight letterSpacing tightening
+//  • Hover: very soft inset highlight (8% opacity), scale-in animation
+//  • 48px height (M3 minimum) — tabs need body to feel clickable
+// ─────────────────────────────────────────────────────────────────────────────
+
+
+// ── Tab button core ───────────────────────────────────────────────────────────
+
+  .vi-tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--vi-tab-icon-gap, #{tokens.$spacing-xs});
+    padding: var(--vi-tab-padding, 0 20px);
+    min-width: var(--vi-tab-min-width, 90px);
+    max-width: var(--vi-tab-max-width, 240px);
+    min-height: var(--vi-tab-height, 40px);
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;   // Above the cursor element
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+
+    // Typography — clear nav-link feel, not body text
+    font-family: inherit;
+    font-size: var(--vi-tab-font-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-tab-font-weight, 500);
+    letter-spacing: 0.015em;
+    color: var(--vi-tab-color, #{tokens.$text-secondary});
+
+    transition:
+      color     180ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    // ── Hover highlight (inset bloom effect) ──────────────────────────────────
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 4px;
+      border-radius: #{func.to-rem(8px)};
+      background: currentColor;
+      opacity: 0;
+      transform: scale(0.85);
+      transition:
+        opacity   150ms cubic-bezier(0.4, 0, 0.2, 1),
+        transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+    }
+
+    // ── Hover ──────────────────────────────────────────────────────────────────
+
+    &:not(.vi-tab--disabled):not(.vi-tab--active):hover {
+      color: var(--vi-tab-color-hover, #{tokens.$text-primary});
+
+      &::before {
+        opacity: 0.06;
+        transform: scale(1);
+      }
+    }
+
+    // ── Selected ──────────────────────────────────────────────────────────────
+
+    &.vi-tab--active {
+      color: var(--vi-tab-color-active, #{tokens.$color-primary});
+      font-weight: var(--vi-tab-font-weight-active, 600);
+      letter-spacing: 0.01em;
+    }
+
+    // ── Focus visible ─────────────────────────────────────────────────────────
+
+    &:focus-visible {
+      outline: none;
+
+      &::before {
+        outline: 2px solid #{tokens.$color-primary};
+        outline-offset: 0;
+        opacity: 0.12;
+        transform: scale(1);
+      }
+    }
+
+    // ── Disabled ───────────────────────────────────────────────────────────────
+
+    &.vi-tab--disabled {
+      color: var(--vi-tab-color-disabled, #{tokens.$text-disabled});
+      cursor: not-allowed;
+      pointer-events: none;
+
+      &::before { display: none; }
+    }
+  }
+
+// ── Icon ──────────────────────────────────────────────────────────────────────
+
+  .vi-tab__icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: var(--vi-tab-icon-size, #{func.to-rem(15px)});
+    opacity: 0.6;
+    position: relative;
+    z-index: 1;
+    transition: opacity 180ms ease, transform 180ms ease;
+
+    .vi-tab--active & {
+      opacity: 1;
+      transform: scale(1.04);
+    }
+  }
+
+// ── Label ─────────────────────────────────────────────────────────────────────
+
+  .vi-tab__label {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+// ── Badge ─────────────────────────────────────────────────────────────────────
+
+  .vi-tab__badge {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--vi-tab-close-size, 18px);
+    height: var(--vi-tab-close-size, 18px);
+    padding: var(--vi-tab-badge-padding, 0 5px);
+    border-radius: #{func.to-rem(9px)};
+    font-size: #{func.to-rem(10px)};
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0;
+    background: var(--vi-tab-badge-bg, #{tokens.$color-primary});
+    color: var(--vi-tab-badge-color, #{tokens.$layer-01});
+    flex-shrink: 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+    animation: vi-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  }
+
+  @keyframes vi-badge-pop {
+    from { transform: scale(0.4); opacity: 0; }
+    to   { transform: scale(1);   opacity: 1; }
+  }
+
+// ── Close button ──────────────────────────────────────────────────────────────
+
+  .vi-tab__close {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--vi-tab-close-size, 18px);
+    height: var(--vi-tab-close-size, 18px);
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0;
+    margin-left: var(--vi-tab-close-margin-left, 2px);
+    flex-shrink: 0;
+    opacity: 0;                    // Hidden until tab is hovered
+    transform: scale(0.7);
+    transition:
+      opacity   150ms ease,
+      transform 150ms ease,
+      background-color 120ms ease;
+
+    svg { display: block; }
+  }
+
+// Show close button on tab hover or when the tab is active
+  .vi-tab:hover .vi-tab__close,
+  .vi-tab--active .vi-tab__close {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+
+  .vi-tab__close:hover {
+    opacity: 1 !important;
+    background: color-mix(in srgb, #{tokens.$text-primary} 8%, transparent);
+    transform: scale(1) !important;
+  }
+
+// ── Overflow hidden state (overflow=menu) ─────────────────────────────────────
+
+
+
+}