@plexui/ui 0.2.1 → 0.4.0

package/dist/es/components/{SegmentedControl/SegmentedControl.module.css → Tabs/Tabs.module.css}

@@ -1,47 +1,100 @@
-@layer components {.SegmentedControl {
-  --segmented-control-option-radius: calc(
-    var(--segmented-control-radius) - var(--segmented-control-gutter)
-  );
-
+@layer components {.Tabs {
   position: relative;
-  overflow: auto;
   display: inline-flex;
   flex-wrap: nowrap;
   gap: var(--segmented-control-gap);
-  height: var(--segmented-control-size);
-  padding: var(--segmented-control-gutter);
-  border-radius: var(--segmented-control-radius);
-  background: var(--segmented-control-background);
   font-size: var(--segmented-control-font-size);
   font-weight: var(--segmented-control-font-weight);
   -ms-overflow-style: none;
   scrollbar-width: none;
-  /* Remove inline-flex baseline gap */
   vertical-align: middle;
   white-space: nowrap;
 }
 
-  .SegmentedControl::-webkit-scrollbar {
+  .Tabs::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
 
-  .SegmentedControl::-webkit-scrollbar-track,
-  .SegmentedControl::-webkit-scrollbar-thumb {
+  .Tabs::-webkit-scrollbar-track,
+  .Tabs::-webkit-scrollbar-thumb {
     background: transparent;
   }
 
-  .SegmentedControl:where([data-block]) {
+  /* =============================================
+    Variant: Segmented (default — existing behavior)
+  ============================================= */
+  .Tabs:where([data-variant="segmented"]) {
+    overflow: auto;
+    height: var(--segmented-control-size);
+    padding: var(--segmented-control-gutter);
+    border-radius: var(--segmented-control-radius);
+    background: var(--segmented-control-background);
+  }
+
+  .Tabs:where([data-variant="segmented"][data-block]) {
     overflow: hidden;
     display: flex;
     width: 100%;
     white-space: normal;
   }
 
+  .Tabs:where([data-variant="segmented"][data-pill]) {
+    --segmented-control-radius: var(--radius-full);
+    --segmented-control-option-radius: var(--radius-full);
+  }
+
+  /* =============================================
+    Variant: Underline
+  ============================================= */
+  .Tabs:where([data-variant="underline"]) {
+    overflow: auto;
+    height: var(--segmented-control-size);
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    gap: 0;
+    border-bottom: 1px solid var(--tabs-underline-border-color);
+  }
+
+  .Tabs:where([data-variant="underline"][data-block]) {
+    overflow: hidden;
+    display: flex;
+    width: 100%;
+    white-space: normal;
+  }
+
+  /* =============================================
+    Vertical orientation
+  ============================================= */
+  .Tabs:where([data-orientation="vertical"]) {
+    flex-direction: column;
+    height: auto;
+    width: -moz-fit-content;
+    width: fit-content;
+    white-space: nowrap;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="segmented"]) {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="underline"]) {
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-bottom: none;
+    border-left: 1px solid var(--tabs-underline-border-color);
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-block]) {
+    width: 100%;
+  }
+
   /* =============================================
     Sizes
   ============================================= */
-  .SegmentedControl:where([data-size="3xs"]) {
+  .Tabs:where([data-size="3xs"]) {
     --segmented-control-size: var(--control-size-3xs);
     --segmented-control-font-size: var(--control-font-size-sm);
     --segmented-control-radius: var(--control-radius-sm);
@@ -60,7 +113,7 @@
     --option-badge-radius: var(--badge-radius-2xs);
   }
 
-  .SegmentedControl:where([data-size="2xs"]) {
+  .Tabs:where([data-size="2xs"]) {
     --segmented-control-size: var(--control-size-2xs);
     --segmented-control-font-size: var(--control-font-size-sm);
     --segmented-control-radius: var(--control-radius-sm);
@@ -79,7 +132,7 @@
     --option-badge-radius: var(--badge-radius-2xs);
   }
 
-  .SegmentedControl:where([data-size="xs"]) {
+  .Tabs:where([data-size="xs"]) {
     --segmented-control-size: var(--control-size-xs);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-sm);
@@ -98,7 +151,7 @@
     --option-badge-radius: var(--badge-radius-xs);
   }
 
-  .SegmentedControl:where([data-size="sm"]) {
+  .Tabs:where([data-size="sm"]) {
     --segmented-control-size: var(--control-size-sm);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -117,7 +170,7 @@
     --option-badge-radius: var(--badge-radius-sm);
   }
 
-  .SegmentedControl:where([data-size="md"]) {
+  .Tabs:where([data-size="md"]) {
     --segmented-control-size: var(--control-size-md);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -136,7 +189,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="lg"]) {
+  .Tabs:where([data-size="lg"]) {
     --segmented-control-size: var(--control-size-lg);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -155,7 +208,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="xl"]) {
+  .Tabs:where([data-size="xl"]) {
     --segmented-control-size: var(--control-size-xl);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-lg);
@@ -174,7 +227,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="2xl"]) {
+  .Tabs:where([data-size="2xl"]) {
     --segmented-control-size: var(--control-size-2xl);
     --segmented-control-font-size: var(--control-font-size-lg);
     --segmented-control-radius: var(--control-radius-xl);
@@ -193,7 +246,7 @@
     --option-badge-radius: var(--badge-radius-lg);
   }
 
-  .SegmentedControl:where([data-size="3xl"]) {
+  .Tabs:where([data-size="3xl"]) {
     --segmented-control-size: var(--control-size-3xl);
     --segmented-control-font-size: var(--control-font-size-lg);
     --segmented-control-radius: var(--control-radius-xl);
@@ -213,42 +266,43 @@
   }
 
   /* =============================================
-    Gutter sizes
+    Gutter sizes (segmented variant only)
   ============================================= */
-  .SegmentedControl:where([data-gutter-size="2xs"]) {
+  .Tabs:where([data-gutter-size="2xs"]) {
     --segmented-control-option-gutter: var(--control-gutter-2xs);
   }
 
-  .SegmentedControl:where([data-gutter-size="xs"]) {
+  .Tabs:where([data-gutter-size="xs"]) {
     --segmented-control-option-gutter: var(--control-gutter-xs);
   }
 
-  .SegmentedControl:where([data-gutter-size="sm"]) {
+  .Tabs:where([data-gutter-size="sm"]) {
     --segmented-control-option-gutter: var(--control-gutter-sm);
   }
 
-  .SegmentedControl:where([data-gutter-size="md"]) {
+  .Tabs:where([data-gutter-size="md"]) {
     --segmented-control-option-gutter: var(--control-gutter-md);
   }
 
-  .SegmentedControl:where([data-gutter-size="lg"]) {
+  .Tabs:where([data-gutter-size="lg"]) {
     --segmented-control-option-gutter: var(--control-gutter-lg);
   }
 
-  .SegmentedControl:where([data-gutter-size="xl"]) {
+  .Tabs:where([data-gutter-size="xl"]) {
     --segmented-control-option-gutter: var(--control-gutter-xl);
-  }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .SegmentedControl:where([data-pill]) {
-    --segmented-control-radius: var(--radius-full);
-    --segmented-control-option-radius: var(--radius-full);
-  }.SegmentedControlOption {
+  }/* =============================================
+  Option radius (computed from parent for segmented)
+============================================= */.Tabs:where([data-variant="segmented"]) {
+  --segmented-control-option-radius: calc(
+    var(--segmented-control-radius) - var(--segmented-control-gutter)
+  );
+}.Tabs:where([data-variant="underline"]) {
+  --segmented-control-option-radius: 0;
+}/* =============================================
+  Tab (trigger item)
+============================================= */.Tab {
   position: relative;
   padding: 0 var(--segmented-control-option-gutter);
-  border-radius: var(--segmented-control-option-radius);
   color: var(--color-text-secondary);
   cursor: pointer;
   line-height: 1;
@@ -261,24 +315,28 @@
   transition-timing-function: var(--transition-ease-basic);
 }
 
-  .SegmentedControlOption:focus {
+  .Tab:focus {
     outline: 0;
   }
 
-  :where(.SegmentedControl[data-block]) .SegmentedControlOption {
+  /* =============================================
+    Segmented variant — Tab styles
+  ============================================= */
+  :where(.Tabs[data-variant="segmented"]) .Tab {
+    border-radius: var(--segmented-control-option-radius);
+  }
+
+  :where(.Tabs[data-variant="segmented"][data-block]) .Tab {
     flex: 1;
   }
 
-  :where(.SegmentedControl[data-pill]) .SegmentedControlOption {
+  :where(.Tabs[data-variant="segmented"][data-pill]) .Tab {
     min-width: calc(var(--segmented-control-size) - 2 * var(--segmented-control-gutter));
     padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling));
   }
 
-  .SegmentedControlOption[data-state="on"]:focus-visible {
-    outline: 2px solid var(--color-ring);
-  }
-
-  .SegmentedControlOption::before {
+  /* Hover highlight pseudo-element (segmented only) */
+  :where(.Tabs[data-variant="segmented"]) .Tab::before {
     position: absolute;
     inset: var(--segmented-control-option-highlight-gutter);
     border-radius: var(--segmented-control-option-radius);
@@ -293,55 +351,131 @@
     will-change: transform;
   }
 
-  .SegmentedControlOption:active::before {
+  :where(.Tabs[data-variant="segmented"]) .Tab:active::before {
     transform: scale(var(--scale), 0.97);
   }
-
-  .SegmentedControlOption svg {
-    display: block;
-  }
-    @media (hover: hover) and (pointer: fine) {.SegmentedControlOption[data-state="off"]:where(:not([disabled])):hover {
+    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
       color: var(--color-text);
 }
 
-      .SegmentedControlOption[data-state="off"]:where(:not([disabled])):hover::before {
+      :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover::before {
         opacity: 0.5;
       }
 }
 
-    .SegmentedControlOption[data-state="off"]:where(:not([disabled])):focus-visible {
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
       color: var(--color-text);
       outline: 2px solid var(--color-ring);
     }
 
-    .SegmentedControlOption[data-state="off"]:where(:not([disabled])):active::before {
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):active::before {
       opacity: 0.75;
     }
 
-  .SegmentedControlOption[data-state="on"] {
+  /* =============================================
+    Underline variant — Tab styles
+  ============================================= */
+  :where(.Tabs[data-variant="underline"]) .Tab {
+    border-radius: 0;
+  }
+
+  :where(.Tabs[data-variant="underline"][data-block]) .Tab {
+    flex: 1;
+  }
+    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
+      color: var(--color-text);
+}
+}
+
+    :where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
+      color: var(--color-text);
+      outline: 2px solid var(--color-ring);
+      outline-offset: -2px;
+    }
+
+  /* =============================================
+    Vertical orientation — Tab styles
+  ============================================= */
+  :where(.Tabs[data-orientation="vertical"]) .Tab {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  :where(.Tabs[data-orientation="vertical"][data-block]) .Tab {
+    flex: none;
+  }
+
+  /* =============================================
+    Shared states
+  ============================================= */
+  .Tab[data-state="on"] {
     color: var(--color-text);
   }
 
-  .SegmentedControlOption[data-disabled] {
+  .Tab[data-state="on"]:focus-visible {
+    outline: 2px solid var(--color-ring);
+  }
+
+  .Tab[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-    .SegmentedControlOption[data-disabled]::before {
+    .Tab[data-disabled]::before {
       opacity: 0 !important;
-    }.SegmentedControlThumb {
+    }
+
+  .Tab svg {
+    display: block;
+  }/* =============================================
+  Thumb (animated indicator)
+============================================= */.TabsThumb {
   position: absolute;
-  top: var(--segmented-control-gutter);
-  bottom: var(--segmented-control-gutter);
-  left: 0;
-  border-radius: var(--segmented-control-option-radius);
-  background: var(--segmented-control-thumb-background);
-  box-shadow: var(--segmented-control-thumb-shadow);
   pointer-events: none;
   will-change: transform;
-}/* =============================================
-  Option Content (icon + text + badge layout)
-============================================= */.SegmentedControlOptionContent {
+}
+
+  /* Segmented horizontal: background highlight */
+  :where(.Tabs[data-variant="segmented"][data-orientation="horizontal"]) .TabsThumb {
+    top: var(--segmented-control-gutter);
+    bottom: var(--segmented-control-gutter);
+    left: 0;
+    border-radius: var(--segmented-control-option-radius);
+    background: var(--segmented-control-thumb-background);
+    box-shadow: var(--segmented-control-thumb-shadow);
+  }
+
+  /* Segmented vertical: background highlight */
+  :where(.Tabs[data-variant="segmented"][data-orientation="vertical"]) .TabsThumb {
+    left: var(--segmented-control-gutter);
+    right: var(--segmented-control-gutter);
+    top: 0;
+    border-radius: var(--segmented-control-option-radius);
+    background: var(--segmented-control-thumb-background);
+    box-shadow: var(--segmented-control-thumb-shadow);
+  }
+
+  /* Underline horizontal: thin line at the bottom */
+  :where(.Tabs[data-variant="underline"][data-orientation="horizontal"]) .TabsThumb {
+    bottom: 0;
+    left: 0;
+    height: var(--tabs-underline-indicator-height);
+    border-radius: calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0 0;
+    background: var(--tabs-underline-indicator-color);
+    box-shadow: none;
+  }
+
+  /* Underline vertical: thin line on the left */
+  :where(.Tabs[data-variant="underline"][data-orientation="vertical"]) .TabsThumb {
+    left: 0;
+    top: 0;
+    width: var(--tabs-underline-indicator-height);
+    border-radius: 0 calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0;
+    background: var(--tabs-underline-indicator-color);
+    box-shadow: none;
+  }/* =============================================
+  Tab Content (icon + text + badge layout)
+============================================= */.TabContent {
   position: relative;
   display: flex;
   align-items: center;
@@ -349,17 +483,17 @@
 }
 
   /* Icon auto-sizing (same as Button) */
-  .SegmentedControlOptionContent svg:where(:not([data-no-autosize])) {
+  .TabContent svg:where(:not([data-no-autosize])) {
     width: var(--segmented-control-icon-size);
     height: var(--segmented-control-icon-size);
   }
 
   /* Negative margin for icon when followed by text */
-  .SegmentedControlOptionContent svg:where(:first-child:not(:only-child)) {
+  .TabContent svg:where(:first-child:not(:only-child)) {
     margin-left: var(--segmented-control-icon-offset);
   }/* =============================================
-  Option Badge (CSS-only, no Badge component)
-============================================= */.OptionBadge {
+  Tab Badge (CSS-only, no Badge component)
+============================================= */.TabBadge {
   display: inline-flex;
   align-items: center;
   height: var(--option-badge-size);
@@ -377,37 +511,37 @@
   /* =============================================
     Soft variant (default)
   ============================================= */
-    .OptionBadge[data-variant="soft"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="secondary"]) {
       --option-badge-bg: var(--color-background-secondary-soft-alpha);
       --option-badge-color: var(--color-text-secondary-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="success"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="success"]) {
       --option-badge-bg: var(--color-background-success-soft-alpha);
       --option-badge-color: var(--color-text-success-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="warning"]) {
       --option-badge-bg: var(--color-background-warning-soft-alpha);
       --option-badge-color: var(--color-text-warning-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="danger"]) {
       --option-badge-bg: var(--color-background-danger-soft-alpha);
       --option-badge-color: var(--color-text-danger-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="info"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="info"]) {
       --option-badge-bg: var(--color-background-info-soft-alpha);
       --option-badge-color: var(--color-text-info-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="discovery"]) {
       --option-badge-bg: var(--color-background-discovery-soft-alpha);
       --option-badge-color: var(--color-text-discovery-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="caution"]) {
       --option-badge-bg: var(--color-background-caution-soft-alpha);
       --option-badge-color: var(--color-text-caution-soft);
     }
@@ -415,37 +549,37 @@
   /* =============================================
     Solid variant
   ============================================= */
-    .OptionBadge[data-variant="solid"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="secondary"]) {
       --option-badge-bg: var(--color-background-secondary-solid);
       --option-badge-color: var(--color-text-secondary-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="success"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="success"]) {
       --option-badge-bg: var(--color-background-success-solid);
       --option-badge-color: var(--color-text-success-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="warning"]) {
       --option-badge-bg: var(--color-background-warning-solid);
       --option-badge-color: var(--color-text-warning-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="danger"]) {
       --option-badge-bg: var(--color-background-danger-solid);
       --option-badge-color: var(--color-text-danger-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="info"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="info"]) {
       --option-badge-bg: var(--color-background-info-solid);
       --option-badge-color: var(--color-text-info-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="discovery"]) {
       --option-badge-bg: var(--color-background-discovery-solid);
       --option-badge-color: var(--color-text-discovery-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="caution"]) {
       --option-badge-bg: var(--color-background-caution-solid);
       --option-badge-color: var(--color-text-caution-solid);
     }
@@ -453,42 +587,42 @@
   /* =============================================
     Outline variant
   ============================================= */
-  .OptionBadge[data-variant="outline"] {
+  .TabBadge[data-variant="outline"] {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--option-badge-border) inset;
   }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="secondary"]) {
       --option-badge-border: var(--color-border-secondary-outline);
       --option-badge-color: var(--color-text-secondary-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="success"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="success"]) {
       --option-badge-border: var(--color-border-success-outline);
       --option-badge-color: var(--color-text-success-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="warning"]) {
       --option-badge-border: var(--color-border-warning-outline);
       --option-badge-color: var(--color-text-warning-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="danger"]) {
       --option-badge-border: var(--color-border-danger-outline);
       --option-badge-color: var(--color-text-danger-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="info"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="info"]) {
       --option-badge-border: var(--color-border-info-outline);
       --option-badge-color: var(--color-text-info-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="discovery"]) {
       --option-badge-border: var(--color-border-discovery-outline);
       --option-badge-color: var(--color-text-discovery-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="caution"]) {
       --option-badge-border: var(--color-border-caution-outline);
       --option-badge-color: var(--color-text-caution-outline);
     }
@@ -496,7 +630,7 @@
   /* =============================================
     Pill
   ============================================= */
-  .OptionBadge[data-pill] {
+  .TabBadge[data-pill] {
     border-radius: var(--radius-full);
     padding: 0 calc(var(--option-badge-gutter) * var(--control-gutter-pill-scaling));
   }

package/dist/es/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Tabs } from \"./Tabs\"\nexport type {\n  TabsBadgeProp,\n  TabsOrientation,\n  TabsProps,\n  TabsVariant,\n  TabProps,\n  SizeVariant,\n} from \"./Tabs\"\n"]}

package/dist/es/styles/variables-components.css

@@ -111,6 +111,11 @@
     --field-error-margin-bottom: calc(var(--spacing) * 3);
     --field-error-padding-inline: 0;
 
+    /* =============================================
+      Field
+    ============================================= */
+    --field-label-horizontal-min-width: 120px;
+
     /* =============================================
       FloatingLabelInput
     ============================================= */
@@ -211,6 +216,13 @@
     --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
     --segmented-control-option-highlight-gutter: 1px;
 
+    /* =============================================
+      Tabs — Underline variant
+    ============================================= */
+    --tabs-underline-indicator-height: 2px;
+    --tabs-underline-indicator-color: var(--color-background-primary-solid);
+    --tabs-underline-border-color: var(--color-border);
+
     /* =============================================
       SelectControl
     ============================================= */