@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/components/Tabs/Tabs.module.css

@@ -0,0 +1,688 @@
+@layer components {.Tabs {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--segmented-control-gap);
+  font-size: var(--segmented-control-font-size);
+  font-weight: var(--segmented-control-font-weight);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+  .Tabs::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .Tabs::-webkit-scrollbar-track,
+  .Tabs::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  /* =============================================
+    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"]:not([data-pill])) {
+    --segmented-control-option-radius: calc(
+      var(--segmented-control-radius) - var(--segmented-control-gutter)
+    );
+  }
+
+  .Tabs:where([data-variant="segmented"][data-pill]) {
+    border-radius: var(--radius-full);
+    --segmented-control-option-radius: var(--radius-full);
+  }
+
+  .Tabs:where([data-variant="segmented"][data-block]) {
+    overflow: hidden;
+    display: flex;
+    width: 100%;
+    white-space: normal;
+  }
+
+  /* =============================================
+    Variant: Underline
+  ============================================= */
+  .Tabs:where([data-variant="underline"]) {
+    --segmented-control-option-radius: 0;
+
+    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;
+  }
+
+  /* =============================================
+    Variant: Underline flush
+  ============================================= */
+  .Tabs:where([data-variant="underline"][data-flush]) {
+    gap: var(--segmented-control-option-gutter);
+    border-bottom: none;
+  }
+
+  .Tabs:where([data-variant="underline"][data-flush][data-block]) {
+    gap: 0;
+  }
+
+  /* =============================================
+    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%;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="segmented"][data-pill]) {
+    border-radius: calc(var(--segmented-control-size) / 2);
+    --segmented-control-option-radius: calc(var(--segmented-control-size) / 2);
+  }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .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);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-xs);
+    --segmented-control-content-gap: var(--button-gap-sm);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-2xs */
+    --option-badge-size: var(--badge-size-2xs);
+    --option-badge-gutter: var(--badge-gutter-2xs);
+    --option-badge-font-size: var(--badge-font-size-2xs);
+    --option-badge-font-weight: var(--badge-font-weight-2xs);
+    --option-badge-tracking: var(--badge-tracking-2xs);
+    --option-badge-radius: var(--badge-radius-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);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-sm);
+    --segmented-control-content-gap: var(--button-gap-md);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-2xs */
+    --option-badge-size: var(--badge-size-2xs);
+    --option-badge-gutter: var(--badge-gutter-2xs);
+    --option-badge-font-size: var(--badge-font-size-2xs);
+    --option-badge-font-weight: var(--badge-font-weight-2xs);
+    --option-badge-tracking: var(--badge-tracking-2xs);
+    --option-badge-radius: var(--badge-radius-2xs);
+  }
+
+  .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);
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-sm);
+    --segmented-control-content-gap: var(--button-gap-md);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-xs */
+    --option-badge-size: var(--badge-size-xs);
+    --option-badge-gutter: var(--badge-gutter-xs);
+    --option-badge-font-size: var(--badge-font-size-xs);
+    --option-badge-font-weight: var(--badge-font-weight-xs);
+    --option-badge-tracking: var(--badge-tracking-xs);
+    --option-badge-radius: var(--badge-radius-xs);
+  }
+
+  .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-sm);
+    --segmented-control-option-gutter: var(--control-gutter-sm);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-md);
+    --segmented-control-content-gap: var(--button-gap-md);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-sm */
+    --option-badge-size: var(--badge-size-sm);
+    --option-badge-gutter: var(--badge-gutter-sm);
+    --option-badge-font-size: var(--badge-font-size-sm);
+    --option-badge-font-weight: var(--badge-font-weight-sm);
+    --option-badge-tracking: var(--badge-tracking-sm);
+    --option-badge-radius: var(--badge-radius-sm);
+  }
+
+  .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);
+    --segmented-control-option-gutter: var(--control-gutter-md);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-md);
+    --segmented-control-content-gap: var(--button-gap-lg);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-md */
+    --option-badge-size: var(--badge-size-md);
+    --option-badge-gutter: var(--badge-gutter-md);
+    --option-badge-font-size: var(--badge-font-size-md);
+    --option-badge-font-weight: var(--badge-font-weight-md);
+    --option-badge-tracking: var(--badge-tracking-md);
+    --option-badge-radius: var(--badge-radius-md);
+  }
+
+  .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-lg);
+    --segmented-control-option-gutter: var(--control-gutter-md);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-md);
+    --segmented-control-content-gap: var(--button-gap-lg);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-md */
+    --option-badge-size: var(--badge-size-md);
+    --option-badge-gutter: var(--badge-gutter-md);
+    --option-badge-font-size: var(--badge-font-size-md);
+    --option-badge-font-weight: var(--badge-font-weight-md);
+    --option-badge-tracking: var(--badge-tracking-md);
+    --option-badge-radius: var(--badge-radius-md);
+  }
+
+  .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-xl);
+    --segmented-control-option-gutter: var(--control-gutter-lg);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-md);
+    --segmented-control-content-gap: var(--button-gap-lg);
+    --segmented-control-icon-offset: -1px;
+    --segmented-control-badge-offset: -1px;
+    /* Badge tokens — inherited from badge-size-md */
+    --option-badge-size: var(--badge-size-md);
+    --option-badge-gutter: var(--badge-gutter-md);
+    --option-badge-font-size: var(--badge-font-size-md);
+    --option-badge-font-weight: var(--badge-font-weight-md);
+    --option-badge-tracking: var(--badge-tracking-md);
+    --option-badge-radius: var(--badge-radius-md);
+  }
+
+  .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);
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-lg);
+    --segmented-control-content-gap: var(--button-gap-lg);
+    --segmented-control-icon-offset: -2px;
+    --segmented-control-badge-offset: -2px;
+    /* Badge tokens — inherited from badge-size-lg */
+    --option-badge-size: var(--badge-size-lg);
+    --option-badge-gutter: var(--badge-gutter-lg);
+    --option-badge-font-size: var(--badge-font-size-lg);
+    --option-badge-font-weight: var(--badge-font-weight-lg);
+    --option-badge-tracking: var(--badge-tracking-lg);
+    --option-badge-radius: var(--badge-radius-lg);
+  }
+
+  .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);
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+    /* Icon and content */
+    --segmented-control-icon-size: var(--control-icon-size-lg);
+    --segmented-control-content-gap: var(--button-gap-lg);
+    --segmented-control-icon-offset: -2px;
+    --segmented-control-badge-offset: -2px;
+    /* Badge tokens — inherited from badge-size-lg */
+    --option-badge-size: var(--badge-size-lg);
+    --option-badge-gutter: var(--badge-gutter-lg);
+    --option-badge-font-size: var(--badge-font-size-lg);
+    --option-badge-font-weight: var(--badge-font-weight-lg);
+    --option-badge-tracking: var(--badge-tracking-lg);
+    --option-badge-radius: var(--badge-radius-lg);
+  }
+
+  /* =============================================
+    Gutter sizes (segmented variant only)
+  ============================================= */
+  .Tabs:where([data-gutter-size="2xs"]) {
+    --segmented-control-option-gutter: var(--control-gutter-2xs);
+  }
+
+  .Tabs:where([data-gutter-size="xs"]) {
+    --segmented-control-option-gutter: var(--control-gutter-xs);
+  }
+
+  .Tabs:where([data-gutter-size="sm"]) {
+    --segmented-control-option-gutter: var(--control-gutter-sm);
+  }
+
+  .Tabs:where([data-gutter-size="md"]) {
+    --segmented-control-option-gutter: var(--control-gutter-md);
+  }
+
+  .Tabs:where([data-gutter-size="lg"]) {
+    --segmented-control-option-gutter: var(--control-gutter-lg);
+  }
+
+  .Tabs:where([data-gutter-size="xl"]) {
+    --segmented-control-option-gutter: var(--control-gutter-xl);
+  }/* =============================================
+  Tab (trigger item)
+============================================= */.Tab {
+  position: relative;
+  padding: 0 var(--segmented-control-option-gutter);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  line-height: 1;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, background-color, color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .Tab:focus {
+    outline: 0;
+  }
+
+  /* =============================================
+    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(.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));
+  }
+
+  /* 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);
+    background: var(--segmented-control-option-highlight-background-color);
+    content: "";
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1);
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, transform;
+    transition-timing-function: var(--transition-ease-basic);
+    will-change: transform;
+  }
+
+  :where(.Tabs[data-variant="segmented"]) .Tab:active::before {
+    transform: scale(var(--scale), 0.97);
+  }
+    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
+      color: var(--color-text);
+}
+
+      :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover::before {
+        opacity: 0.5;
+      }
+}
+
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
+      color: var(--color-text);
+      outline: 2px solid var(--color-ring);
+    }
+
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):active::before {
+      opacity: 0.75;
+    }
+
+  /* =============================================
+    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;
+    }
+
+  /* Flush underline variant — Tab styles */
+  :where(.Tabs[data-variant="underline"][data-flush]) .Tab {
+    padding: 0;
+  }
+
+  /* =============================================
+    Vertical orientation — Tab styles
+  ============================================= */
+  :where(.Tabs[data-orientation="vertical"]) .Tab {
+    justify-content: flex-start;
+    width: 100%;
+    height: var(--segmented-control-size);
+  }
+
+  :where(.Tabs[data-orientation="vertical"][data-block]) .Tab {
+    flex: none;
+  }
+
+  /* =============================================
+    Shared states
+  ============================================= */
+  .Tab[data-state="on"] {
+    color: var(--color-text);
+  }
+
+  .Tab[data-state="on"]:focus-visible {
+    outline: 2px solid var(--color-ring);
+  }
+
+  .Tab[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    .Tab[data-disabled]::before {
+      opacity: 0 !important;
+    }
+
+  .Tab svg {
+    display: block;
+  }/* =============================================
+  Thumb (animated indicator)
+============================================= */.TabsThumb {
+  position: absolute;
+  pointer-events: none;
+  will-change: transform;
+}
+
+  /* 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;
+  }
+
+  /* Flush underline horizontal: 1px line, no radius */
+  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="horizontal"]) .TabsThumb {
+    height: 1px;
+    border-radius: 0;
+  }
+
+  /* Flush underline vertical: 1px line, no radius */
+  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="vertical"]) .TabsThumb {
+    width: 1px;
+    border-radius: 0;
+  }/* =============================================
+  Tab Content (icon + text + badge layout)
+============================================= */.TabContent {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--segmented-control-content-gap);
+}
+
+  /* Icon auto-sizing (same as Button) */
+  .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 */
+  .TabContent svg:where(:first-child:not(:only-child)) {
+    margin-left: var(--segmented-control-icon-offset);
+  }/* =============================================
+  Tab Badge (CSS-only, no Badge component)
+============================================= */.TabBadge {
+  display: inline-flex;
+  align-items: center;
+  height: var(--option-badge-size);
+  padding: 0 var(--option-badge-gutter);
+  border-radius: var(--option-badge-radius);
+  background-color: var(--option-badge-bg);
+  color: var(--option-badge-color);
+  font-size: var(--option-badge-font-size);
+  font-weight: var(--option-badge-font-weight);
+  letter-spacing: var(--option-badge-tracking);
+  white-space: nowrap;
+  margin-right: var(--segmented-control-badge-offset);
+}
+
+  /* =============================================
+    Soft variant (default)
+  ============================================= */
+    .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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+  /* =============================================
+    Solid variant
+  ============================================= */
+    .TabBadge[data-variant="solid"]:where([data-color="secondary"]) {
+      --option-badge-bg: var(--color-background-secondary-solid);
+      --option-badge-color: var(--color-text-secondary-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="success"]) {
+      --option-badge-bg: var(--color-background-success-solid);
+      --option-badge-color: var(--color-text-success-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="warning"]) {
+      --option-badge-bg: var(--color-background-warning-solid);
+      --option-badge-color: var(--color-text-warning-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="danger"]) {
+      --option-badge-bg: var(--color-background-danger-solid);
+      --option-badge-color: var(--color-text-danger-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="info"]) {
+      --option-badge-bg: var(--color-background-info-solid);
+      --option-badge-color: var(--color-text-info-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="discovery"]) {
+      --option-badge-bg: var(--color-background-discovery-solid);
+      --option-badge-color: var(--color-text-discovery-solid);
+    }
+
+    .TabBadge[data-variant="solid"]:where([data-color="caution"]) {
+      --option-badge-bg: var(--color-background-caution-solid);
+      --option-badge-color: var(--color-text-caution-solid);
+    }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .TabBadge[data-variant="outline"] {
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--option-badge-border) inset;
+  }
+
+    .TabBadge[data-variant="outline"]:where([data-color="secondary"]) {
+      --option-badge-border: var(--color-border-secondary-outline);
+      --option-badge-color: var(--color-text-secondary-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="success"]) {
+      --option-badge-border: var(--color-border-success-outline);
+      --option-badge-color: var(--color-text-success-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="warning"]) {
+      --option-badge-border: var(--color-border-warning-outline);
+      --option-badge-color: var(--color-text-warning-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="danger"]) {
+      --option-badge-border: var(--color-border-danger-outline);
+      --option-badge-color: var(--color-text-danger-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="info"]) {
+      --option-badge-border: var(--color-border-info-outline);
+      --option-badge-color: var(--color-text-info-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="discovery"]) {
+      --option-badge-border: var(--color-border-discovery-outline);
+      --option-badge-color: var(--color-text-discovery-outline);
+    }
+
+    .TabBadge[data-variant="outline"]:where([data-color="caution"]) {
+      --option-badge-border: var(--color-border-caution-outline);
+      --option-badge-color: var(--color-text-caution-outline);
+    }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .TabBadge[data-pill] {
+    border-radius: var(--radius-full);
+    padding: 0 calc(var(--option-badge-gutter) * var(--control-gutter-pill-scaling));
+  }/* =============================================
+  overflow="menu": tabs that do not fit move into a menu at the end
+============================================= */.OverflowHost {
+  display: contents;
+}/* The strip stays within its container and is measured against it */.Tabs[data-overflow="menu"] {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}/* Name and chevron of the menu button, in one row */.OverflowLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--segmented-control-content-gap);
+}/* A hidden tab's count, next to its name in the menu */.OverflowBadge {
+  margin-inline-start: auto;
+  padding-inline-start: calc(var(--spacing) * 3);
+  color: var(--color-text-secondary);
+}
+}