@thalassic/themes 22.11.0 → 22.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "22.11.0",
+  "version": "22.13.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^22.0.0",

package/themes/thalassic/_typography.scss

@@ -62,12 +62,12 @@
 
   --font-title-medium-size: 1.125rem;
   --font-title-medium-weight: var(--font-weight-medium);
-  --font-title-medium-line-height: 1.6875rem;
+  --font-title-medium-line-height: 1.4375rem;
   --font-title-medium-letter-spacing: var(--letter-spacing-wide);
 
   --font-title-small-size: 1rem;
   --font-title-small-weight: var(--font-weight-medium);
-  --font-title-small-line-height: 1.4375rem;
+  --font-title-small-line-height: 1.3125rem;
   --font-title-small-letter-spacing: var(--letter-spacing-wide);
 
   // Body styles (main content)
@@ -89,7 +89,7 @@
   // Label styles (buttons, tabs, form labels)
   --font-label-large-size: 1rem;
   --font-label-large-weight: var(--font-weight-medium);
-  --font-label-large-line-height: 1.4375rem;
+  --font-label-large-line-height: 1.25rem;
   --font-label-large-letter-spacing: var(--letter-spacing-wide);
 
   --font-label-medium-size: 0.875rem;
@@ -99,6 +99,6 @@
 
   --font-label-small-size: 0.8125rem;
   --font-label-small-weight: var(--font-weight-medium);
-  --font-label-small-line-height: 1.125rem;
+  --font-label-small-line-height: 1rem;
   --font-label-small-letter-spacing: var(--letter-spacing-wider);
 }

package/themes/thalassic/components/chip/_chip-size.scss

@@ -3,7 +3,7 @@
   padding-inline: var(--tls-chip-padding-inline);
 
   font-size: var(--tls-chip-font-size);
-  font-weight: var(--tls-chip-font-weight);
+  font-weight: var(--font-weight-regular);
   line-height: var(--tls-chip-line-height);
   letter-spacing: var(--tls-chip-letter-spacing);
 
@@ -17,12 +17,24 @@
     }
   }
 
+  &.tls-chip--xs {
+    --tls-chip-height: 24px;
+    --tls-chip-padding-inline: var(--spacing-2);
+
+    --tls-chip-font-size: 0.75rem;
+    --tls-chip-line-height: 1rem;
+    --tls-chip-letter-spacing: var(--letter-spacing-wider);
+
+    &.tls-chip--rounded {
+      --tls-chip-border-radius: var(--radius-lg);
+    }
+  }
+
   &.tls-chip--sm {
     --tls-chip-height: var(--control-height-sm);
-    --tls-chip-padding-inline: var(--spacing-2);
+    --tls-chip-padding-inline: var(--spacing-3);
 
     --tls-chip-font-size: var(--font-label-small-size);
-    --tls-chip-font-weight: var(--font-label-small-weight);
     --tls-chip-line-height: var(--font-label-small-line-height);
     --tls-chip-letter-spacing: var(--font-label-small-letter-spacing);
 
@@ -33,10 +45,9 @@
 
   &.tls-chip--md {
     --tls-chip-height: var(--control-height-md);
-    --tls-chip-padding-inline: var(--spacing-3);
+    --tls-chip-padding-inline: var(--spacing-4);
 
     --tls-chip-font-size: var(--font-label-medium-size);
-    --tls-chip-font-weight: var(--font-label-medium-weight);
     --tls-chip-line-height: var(--font-label-medium-line-height);
     --tls-chip-letter-spacing: var(--font-label-medium-letter-spacing);
 
@@ -47,10 +58,9 @@
 
   &.tls-chip--lg {
     --tls-chip-height: var(--control-height-lg);
-    --tls-chip-padding-inline: var(--spacing-4);
+    --tls-chip-padding-inline: var(--spacing-5);
 
     --tls-chip-font-size: var(--font-label-large-size);
-    --tls-chip-font-weight: var(--font-label-large-weight);
     --tls-chip-line-height: var(--font-label-large-line-height);
     --tls-chip-letter-spacing: var(--font-label-large-letter-spacing);
 

package/themes/thalassic/components/form-control-group/_form-control-addon.scss

@@ -1,6 +1,9 @@
 @use '../../mixins' as mixins;
 
 .tls-form-control-addon {
+  display: inline-flex;
+  align-items: center;
+
   // Addons are secondary to the control's value (icons, unit labels, toggles).
   color: var(--color-on-surface-variant);
 

package/themes/thalassic/components/form-control-group/_form-control-group-size.scss

@@ -42,4 +42,21 @@
     --tls-form-control-group-line-height: var(--font-label-large-line-height);
     --tls-form-control-group-letter-spacing: var(--font-label-large-letter-spacing);
   }
+
+  // The group is the single source of size: each inner control renders its own
+  // size class, so map the group's resolved size onto the control's own vars.
+  // This lets a consumer set size once on the group instead of on every child.
+  &.tls-form-control-group--sm,
+  &.tls-form-control-group--md,
+  &.tls-form-control-group--lg {
+    .tls-form-control {
+      --tls-form-control-height: var(--tls-form-control-group-height);
+      --tls-form-control-padding-inline: var(--tls-form-control-group-padding-inline);
+
+      --tls-form-control-font-size: var(--tls-form-control-group-font-size);
+      --tls-form-control-font-weight: var(--tls-form-control-group-font-weight);
+      --tls-form-control-line-height: var(--tls-form-control-group-line-height);
+      --tls-form-control-letter-spacing: var(--tls-form-control-group-letter-spacing);
+    }
+  }
 }

package/themes/thalassic/components/form-control-group/_form-control-group.scss

@@ -20,7 +20,10 @@
   }
 
   &:has(input.tls-form-control:focus),
-  &:has(.tls-select__trigger:focus) {
+  &:has(.tls-select__trigger:focus),
+  &:has(.tls-multi-select__trigger:focus),
+  &:has(.tls-autocomplete__trigger:focus),
+  &:has(.tls-date-time-picker__trigger:focus) {
     border: 1px solid var(--color-primary);
     box-shadow: 0 0 3px -1px var(--color-primary);
   }
@@ -44,10 +47,13 @@
   }
 
   // The group border is the single focus indicator — suppress each control's own
-  // focus border/shadow (base input :focus, select :focus-within) so it never doubles up.
+  // focus border/shadow (base input :focus, trigger controls :focus-within) so it never doubles up.
   input.tls-form-control:focus,
   textarea.tls-form-control:focus,
-  .tls-select.tls-form-control:focus-within {
+  .tls-select.tls-form-control:focus-within,
+  .tls-multi-select.tls-form-control:focus-within,
+  .tls-autocomplete.tls-form-control:focus-within,
+  .tls-date-time-picker.tls-form-control:focus-within {
     border: none;
     box-shadow: none;
   }
@@ -55,11 +61,15 @@
   // Inline padding lives on the element that actually renders the value, so the padded
   // area is interactive (no dead zone) and never stacks with a neighbour:
   //  - leaf controls: the <input>/<textarea> itself
-  //  - tls-select: its inner trigger button (the host only wraps it)
+  //  - trigger controls (select, multi-select, autocomplete, date-time-picker):
+  //    the inner trigger button/input (the host only wraps it)
   // Pad the inline-start only; the trailing outer edge is added on the last child below.
   input.tls-form-control,
   textarea.tls-form-control,
   .tls-select__trigger,
+  .tls-multi-select__trigger,
+  .tls-autocomplete__trigger,
+  .tls-date-time-picker__trigger,
   .tls-form-control-addon {
     padding-block: 0;
     padding-inline-start: var(--tls-form-control-group-padding-inline);
@@ -70,6 +80,9 @@
   > :last-child input.tls-form-control,
   > :last-child textarea.tls-form-control,
   > :last-child .tls-select__trigger,
+  > :last-child .tls-multi-select__trigger,
+  > :last-child .tls-autocomplete__trigger,
+  > :last-child .tls-date-time-picker__trigger,
   > .tls-form-control-addon:last-child {
     padding-inline-end: var(--tls-form-control-group-padding-inline);
   }

package/themes/thalassic/components/index.scss

@@ -19,6 +19,7 @@
 @forward 'form-control-group';
 @forward 'stepper';
 @forward 'switch';
+@forward 'tab-header';
 @forward 'tabs';
 @forward 'textarea';
 @forward 'toast';

package/themes/thalassic/components/tab-header/_index.scss

@@ -0,0 +1,4 @@
+@forward 'tab-header';
+@forward 'tab-header-variant';
+@forward 'tab-header-orientation';
+@forward 'tab-header-divider';

package/themes/thalassic/components/tab-header/_tab-header-divider.scss

@@ -0,0 +1,85 @@
+// Separators between the strip's items, drawn when the strip carries the
+// `--divided` modifier (e.g. a `tls-tab-nav` grouping its links visually).
+// Rendered as non-interactive lines so they never affect an item's box or the
+// active-indicator border, and inset along the cross axis so they read as short
+// dividers rather than full edges. Orientation picks the axis; the segmented
+// variant nudges the line into the middle of its inter-item gap.
+//
+// A separator belongs to the *boundary* between two items, not to either item,
+// so a disabled item must not fade the line beside it. The boundary before an
+// item is normally its leading `::before`; when that item is disabled its
+// opacity would fade the line, so the boundary is drawn on the preceding
+// item's trailing `::after` — an element that is not faded — keeping it at full
+// strength. Each boundary is therefore drawn exactly once.
+.tls-tab-header--divided {
+  .tls-tab-header__item {
+    position: relative;
+  }
+
+  .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before,
+  .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+    content: '';
+
+    position: absolute;
+
+    background-color: var(--tls-tab-header-border-color);
+
+    pointer-events: none;
+  }
+
+  &.tls-tab-header--horizontal {
+    .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before,
+    .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+      inset-block: var(--spacing-2);
+
+      width: var(--tls-tab-header-border-width);
+    }
+
+    .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before {
+      inset-inline-start: 0;
+    }
+
+    .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+      inset-inline-end: 0;
+    }
+  }
+
+  &.tls-tab-header--vertical {
+    .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before,
+    .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+      inset-inline: var(--spacing-4);
+
+      height: var(--tls-tab-header-border-width);
+    }
+
+    .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before {
+      inset-block-start: 0;
+    }
+
+    .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+      inset-block-end: 0;
+    }
+  }
+
+  &.tls-tab-header--segmented {
+    &.tls-tab-header--horizontal {
+      .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before {
+        inset-inline-start: calc(var(--tls-tab-header-padding) / -2);
+      }
+
+      .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+        inset-inline-end: calc(var(--tls-tab-header-padding) / -2);
+      }
+    }
+
+    &.tls-tab-header--vertical {
+      .tls-tab-header__item:not(:first-child):not(.tls-tab-header__item--disabled)::before {
+        inset-block-start: calc(var(--tls-tab-header-padding) / -2);
+      }
+
+      .tls-tab-header__item:has(+ .tls-tab-header__item--disabled)::after {
+        inset-block-end: calc(var(--tls-tab-header-padding) / -2);
+      }
+    }
+  }
+}

package/themes/thalassic/components/tab-header/_tab-header-orientation.scss

@@ -0,0 +1,60 @@
+.tls-tab-header {
+  // Horizontal
+  &.tls-tab-header--horizontal {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  // Vertical
+  &.tls-tab-header--vertical {
+    flex-direction: column;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    // Flat
+    &.tls-tab-header--flat {
+      border-bottom-width: 0;
+      border-inline-end-width: var(--tls-tab-header-border-width);
+      border-inline-end-style: solid;
+
+      .tls-tab-header__item {
+        margin-bottom: 0;
+        margin-inline-end: -1px;
+
+        border-bottom-width: 0;
+        border-inline-end-width: var(--tls-tab-header-active-border-width);
+        border-inline-end-style: solid;
+
+        // See the flat variant's own hover rule for why this is needed:
+        // it keeps the divider line visible under the hover fill.
+        &:hover:not(.tls-tab-header__item--active) {
+          border-inline-end-color: var(--tls-tab-header-border-color);
+        }
+      }
+    }
+
+    // Outlined
+    &.tls-tab-header--outlined {
+      border-bottom-width: 0;
+      border-inline-end-width: var(--tls-tab-header-border-width);
+      border-inline-end-style: solid;
+
+      .tls-tab-header__item {
+        margin-bottom: 0;
+        margin-inline-end: -1px;
+
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
+        border-block-start-width: var(--tls-tab-header-active-border-width);
+        border-block-end-width: var(--tls-tab-header-active-border-width);
+        border-style: solid;
+
+        &:first-child {
+          border-inline-start-width: 0;
+          border-block-start-width: 0;
+        }
+      }
+    }
+  }
+}

package/themes/thalassic/components/tab-header/_tab-header-variant.scss

@@ -0,0 +1,118 @@
+@use '../../functions' as functions;
+
+.tls-tab-header {
+  // Flat
+  &.tls-tab-header--flat {
+    --tls-tab-header-active-background-color: #{functions.tint(var(--color-primary), 8%)};
+    --tls-tab-header-active-hover-background-color: #{functions.tint(var(--color-primary), 12%)};
+
+    border-bottom-width: var(--tls-tab-header-border-width);
+    border-bottom-style: solid;
+
+    .tls-tab-header__item {
+      margin-bottom: -1px;
+
+      // Border is always reserved at the active width and toggles only
+      // border-color (transparent to active) so switching tabs never
+      // changes the item's box height and shifts the label.
+      border-bottom-width: var(--tls-tab-header-active-border-width);
+      border-bottom-style: solid;
+
+      &.tls-tab-header__item--active {
+        background-color: var(--tls-tab-header-active-background-color);
+
+        &:hover {
+          background-color: var(--tls-tab-header-active-hover-background-color);
+        }
+      }
+
+      // Hover fill sits on the item, not the control, so it paints under
+      // the item's border and reaches the divider line instead of
+      // stopping short and leaving a gap. Excludes the active item so
+      // its primary tint is not replaced by the neutral hover fill.
+      //
+      // The item's border overlaps the strip's divider line by
+      // `--tls-tab-header-border-width` (see `margin-bottom: -1px` above).
+      // Made opaque only while hovering, it paints over the hover
+      // fill and keeps that shared pixel visible instead of the
+      // fill covering it. The active item already has an opaque
+      // border, so it needs neither of these.
+      &:hover:not(.tls-tab-header__item--active) {
+        background-color: var(--color-surface-container);
+        border-bottom-color: var(--tls-tab-header-border-color);
+      }
+    }
+  }
+
+  // Outlined
+  &.tls-tab-header--outlined {
+    --tls-tab-header-background-color: var(--color-surface-container);
+    --tls-tab-header-active-background-color: var(--color-surface);
+    --tls-tab-header-active-border-width: 1px;
+    --tls-tab-header-active-border-color: var(--tls-tab-header-border-color);
+
+    border-bottom-width: var(--tls-tab-header-border-width);
+    border-bottom-style: solid;
+
+    background-color: var(--tls-tab-header-background-color);
+
+    .tls-tab-header__item {
+      margin-bottom: -1px;
+
+      border-width: 0;
+      border-inline-start-width: var(--tls-tab-header-active-border-width);
+      border-inline-end-width: var(--tls-tab-header-active-border-width);
+      border-style: solid;
+
+      &:hover {
+        color: var(--tls-tab-header-active-label-color);
+      }
+
+      &:first-child {
+        border-inline-start-width: 0;
+      }
+
+      &.tls-tab-header__item--active {
+        background-color: var(--tls-tab-header-active-background-color);
+      }
+    }
+  }
+
+  // Segmented
+  &.tls-tab-header--segmented {
+    --tls-tab-header-border-radius: var(--radius-lg);
+    --tls-tab-header-pill-radius: var(--radius-md);
+    --tls-tab-header-background-color: var(--color-surface-container);
+    --tls-tab-header-pill-background-color: var(--color-surface);
+    --tls-tab-header-padding: var(--spacing-2);
+    --tls-tab-header-active-label-color: var(--color-on-surface);
+
+    padding: var(--tls-tab-header-padding);
+    gap: var(--tls-tab-header-padding);
+
+    border-radius: var(--tls-tab-header-border-radius);
+
+    background-color: var(--tls-tab-header-background-color);
+
+    .tls-tab-header__item {
+      border: none;
+      border-radius: var(--tls-tab-header-pill-radius);
+
+      &:hover:not(.tls-tab-header__item--active) {
+        background-color: var(--color-surface-container-high);
+      }
+
+      &.tls-tab-header__item--active {
+        background-color: var(--tls-tab-header-pill-background-color);
+        box-shadow: var(--shadow-xs);
+      }
+
+      // Both shapes of the interactive element: a child control (the
+      // button inside `tls-tabs`) or the item itself (the nav anchor).
+      &.tls-tab-header__item-control,
+      .tls-tab-header__item-control {
+        padding: var(--spacing-2) var(--spacing-5);
+      }
+    }
+  }
+}

package/themes/thalassic/components/tab-header/_tab-header.scss

@@ -0,0 +1,89 @@
+// Shared tab-strip visuals used by two components: the header row inside
+// `tls-tabs` (buttons driving tabpanels) and the standalone `tls-tab-nav`
+// (router links styled as tabs). The block carries its own variant /
+// orientation modifiers so it renders identically in both hosts.
+//
+// Structure: the block is the strip, `__item` is one tab slot (an `<li>` in
+// `tls-tabs`, the anchor itself in `tls-tab-nav`) and `__item-control` is the
+// interactive element (the `<button>`, or again the anchor — an element may
+// carry both classes when it plays both roles).
+.tls-tab-header {
+  --tls-tab-header-label-color: var(--color-outline);
+  --tls-tab-header-active-label-color: var(--color-primary);
+  --tls-tab-header-border-color: var(--color-outline-variant);
+  --tls-tab-header-border-width: 1px;
+  --tls-tab-header-active-border-color: var(--color-primary);
+  --tls-tab-header-active-border-width: 2px;
+  --tls-tab-header-disabled-opacity: 0.38;
+
+  flex-shrink: 0;
+  display: flex;
+
+  border-color: var(--tls-tab-header-border-color);
+
+  // Tabs that exceed the strip's extent scroll instead of shrinking
+  // (e.g. a horizontal strip on a narrow viewport). The scrollbar is
+  // hidden so it never covers the active-tab indicator line, while
+  // wheel/touch/keyboard scrolling stays available.
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__item {
+    flex-shrink: 0;
+
+    display: flex;
+
+    border-color: transparent;
+
+    color: var(--tls-tab-header-label-color);
+
+    transition: color var(--motion-fast),
+    border-color var(--motion-fast),
+    background-color var(--motion-theme);
+
+    // The control fills its item only when it is a separate child element
+    // (the button inside `tls-tabs`); a nav anchor is the item itself and
+    // is sized by its own content.
+    > .tls-tab-header__item-control {
+      width: 100%;
+    }
+
+    &.tls-tab-header__item--active {
+      color: var(--tls-tab-header-active-label-color);
+      border-color: var(--tls-tab-header-active-border-color);
+    }
+
+    &.tls-tab-header__item--disabled {
+      opacity: var(--tls-tab-header-disabled-opacity);
+
+      &,
+      .tls-tab-header__item-control {
+        cursor: not-allowed;
+      }
+    }
+
+    &-control {
+      padding: var(--spacing-3) var(--spacing-6);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing-2);
+
+      // TODO: use mixin
+      font-size: var(--font-label-large-size);
+      font-weight: var(--font-label-large-weight);
+      line-height: var(--font-label-large-line-height);
+      letter-spacing: var(--font-label-large-letter-spacing);
+      text-decoration: none;
+      color: inherit;
+
+      cursor: pointer;
+
+      transition: background-color var(--motion-fast);
+    }
+  }
+}

package/themes/thalassic/components/tabs/_tabs-header-position.scss

@@ -1,6 +1,9 @@
+// Header-position styles are a tabs-composite concern (the header's order and
+// divider edge relative to the content panel), so they stay here and reach
+// into the shared tab-header block from the container.
 .tls-tabs {
   &.tls-tabs--header-end {
-    .tls-tabs-header {
+    .tls-tab-header {
       order: 1;
     }
 
@@ -12,33 +15,33 @@
   // Horizontal: divider faces the content, so it moves from the header's
   // bottom edge to its top edge once the header trails the content.
   &.tls-tabs--horizontal.tls-tabs--header-end {
-    &.tls-tabs--flat .tls-tabs-header {
+    .tls-tab-header--flat {
       border-bottom-width: 0;
-      border-top-width: var(--tls-tabs-border-width);
+      border-top-width: var(--tls-tab-header-border-width);
       border-top-style: solid;
 
-      &__item {
+      .tls-tab-header__item {
         margin-bottom: 0;
         margin-top: -1px;
 
         border-bottom-width: 0;
-        border-top-width: var(--tls-tabs-active-border-width);
+        border-top-width: var(--tls-tab-header-active-border-width);
         border-top-style: solid;
 
         // See the flat variant's own hover rule for why this is needed:
         // it keeps the divider line visible under the hover fill.
-        &:hover:not(.tls-tabs-header__item--active) {
-          border-top-color: var(--tls-tabs-border-color);
+        &:hover:not(.tls-tab-header__item--active) {
+          border-top-color: var(--tls-tab-header-border-color);
         }
       }
     }
 
-    &.tls-tabs--outlined .tls-tabs-header {
+    .tls-tab-header--outlined {
       border-bottom-width: 0;
-      border-top-width: var(--tls-tabs-border-width);
+      border-top-width: var(--tls-tab-header-border-width);
       border-top-style: solid;
 
-      &__item {
+      .tls-tab-header__item {
         margin-bottom: 0;
         margin-top: -1px;
       }
@@ -48,33 +51,33 @@
   // Vertical: divider faces the content, so it moves from the header's
   // inline-end edge to its inline-start edge once the header trails the content.
   &.tls-tabs--vertical.tls-tabs--header-end {
-    &.tls-tabs--flat .tls-tabs-header {
+    .tls-tab-header--flat {
       border-inline-end-width: 0;
-      border-inline-start-width: var(--tls-tabs-border-width);
+      border-inline-start-width: var(--tls-tab-header-border-width);
       border-inline-start-style: solid;
 
-      &__item {
+      .tls-tab-header__item {
         margin-inline-end: 0;
         margin-inline-start: -1px;
 
         border-inline-end-width: 0;
-        border-inline-start-width: var(--tls-tabs-active-border-width);
+        border-inline-start-width: var(--tls-tab-header-active-border-width);
         border-inline-start-style: solid;
 
         // See the flat variant's own hover rule for why this is needed:
         // it keeps the divider line visible under the hover fill.
-        &:hover:not(.tls-tabs-header__item--active) {
-          border-inline-start-color: var(--tls-tabs-border-color);
+        &:hover:not(.tls-tab-header__item--active) {
+          border-inline-start-color: var(--tls-tab-header-border-color);
         }
       }
     }
 
-    &.tls-tabs--outlined .tls-tabs-header {
+    .tls-tab-header--outlined {
       border-inline-end-width: 0;
-      border-inline-start-width: var(--tls-tabs-border-width);
+      border-inline-start-width: var(--tls-tab-header-border-width);
       border-inline-start-style: solid;
 
-      &__item {
+      .tls-tab-header__item {
         margin-inline-end: 0;
         margin-inline-start: -1px;
       }

package/themes/thalassic/components/tabs/_tabs-orientation.scss

@@ -1,77 +1,13 @@
+// Orientation styles that concern the tabs container itself; the header
+// strip's orientation styles live in the shared tab-header block.
 .tls-tabs {
-  // Horizontal
-  &.tls-tabs--horizontal {
-    .tls-tabs-header {
-      overflow-x: auto;
-      overflow-y: hidden;
-    }
-  }
-
   // Vertical
   &.tls-tabs--vertical {
     display: flex;
     flex-direction: row;
 
-    .tls-tabs-header {
-      flex-direction: column;
-
-      overflow-x: hidden;
-      overflow-y: auto;
-
-      border-color: var(--tls-tabs-border-color);
-    }
-
     .tls-tabs-content {
       flex-grow: 1;
     }
-
-    // Flat
-    &.tls-tabs--flat {
-      .tls-tabs-header {
-        border-bottom-width: 0;
-        border-inline-end-width: var(--tls-tabs-border-width);
-        border-inline-end-style: solid;
-
-        &__item {
-          margin-bottom: 0;
-          margin-inline-end: -1px;
-
-          border-bottom-width: 0;
-          border-inline-end-width: var(--tls-tabs-active-border-width);
-          border-inline-end-style: solid;
-
-          // See the flat variant's own hover rule for why this is needed:
-          // it keeps the divider line visible under the hover fill.
-          &:hover:not(.tls-tabs-header__item--active) {
-            border-inline-end-color: var(--tls-tabs-border-color);
-          }
-        }
-      }
-    }
-
-    // Outlined
-    &.tls-tabs--outlined {
-      .tls-tabs-header {
-        border-bottom-width: 0;
-        border-inline-end-width: var(--tls-tabs-border-width);
-        border-inline-end-style: solid;
-
-        &__item {
-          margin-bottom: 0;
-          margin-inline-end: -1px;
-
-          border-inline-start-width: 0;
-          border-inline-end-width: 0;
-          border-block-start-width: var(--tls-tabs-active-border-width);
-          border-block-end-width: var(--tls-tabs-active-border-width);
-          border-style: solid;
-
-          &:first-child {
-            border-inline-start-width: 0;
-            border-block-start-width: 0;
-          }
-        }
-      }
-    }
   }
 }

package/themes/thalassic/components/tabs/_tabs-variant.scss

@@ -1,124 +1,13 @@
-@use '../../functions' as functions;
-
+// Variant styles that concern the tabs container itself; the header strip's
+// variant styles live in the shared tab-header block.
 .tls-tabs {
-  // Flat
-  &.tls-tabs--flat {
-    --tls-tabs-active-background-color: #{functions.tint(var(--color-primary), 8%)};
-    --tls-tabs-active-hover-background-color: #{functions.tint(var(--color-primary), 12%)};
-
-    .tls-tabs-header {
-      border-bottom-width: var(--tls-tabs-border-width);
-      border-bottom-style: solid;
-
-      &__item {
-        margin-bottom: -1px;
-
-        // Border is always reserved at the active width and toggles only
-        // border-color (transparent to active) so switching tabs never
-        // changes the item's box height and shifts the label.
-        border-bottom-width: var(--tls-tabs-active-border-width);
-        border-bottom-style: solid;
-
-        &.tls-tabs-header__item--active {
-          background-color: var(--tls-tabs-active-background-color);
-
-          &:hover {
-            background-color: var(--tls-tabs-active-hover-background-color);
-          }
-        }
-
-        // Hover fill sits on the item, not the button, so it paints under
-        // the item's border and reaches the divider line instead of
-        // stopping short and leaving a gap. Excludes the active item so
-        // its primary tint is not replaced by the neutral hover fill.
-        //
-        // The item's border overlaps the header's divider line by
-        // `--tls-tabs-border-width` (see `margin-bottom: -1px` above).
-        // Made opaque only while hovering, it paints over the hover
-        // fill and keeps that shared pixel visible instead of the
-        // fill covering it. The active item already has an opaque
-        // border, so it needs neither of these.
-        &:hover:not(.tls-tabs-header__item--active) {
-          background-color: var(--color-surface-container);
-          border-bottom-color: var(--tls-tabs-border-color);
-        }
-      }
-    }
-  }
-
   // Outlined
   &.tls-tabs--outlined {
+    --tls-tabs-border-color: var(--color-outline-variant);
+    --tls-tabs-border-width: 1px;
     --tls-tabs-border-radius: var(--radius-sm);
-    --tls-tabs-header-background-color: var(--color-surface-container);
-    --tls-tabs-active-border-width: 1px;
-    --tls-tabs-active-border-color: var(--tls-tabs-border-color);
 
     border: var(--tls-tabs-border-width) solid var(--tls-tabs-border-color);
     border-radius: var(--tls-tabs-border-radius);
-
-    .tls-tabs-header {
-      border-bottom-width: var(--tls-tabs-border-width);
-      border-bottom-style: solid;
-
-      background-color: var(--tls-tabs-header-background-color);
-
-      &__item {
-        margin-bottom: -1px;
-
-        border-width: 0;
-        border-inline-start-width: var(--tls-tabs-active-border-width);
-        border-inline-end-width: var(--tls-tabs-active-border-width);
-        border-style: solid;
-
-        &:hover {
-          color: var(--tls-tabs-active-label-color);
-        }
-
-        &:first-child {
-          border-inline-start-width: 0;
-        }
-
-        &.tls-tabs-header__item--active {
-          background-color: var(--tls-tabs-background-color);
-        }
-      }
-    }
-  }
-
-  // Segmented
-  &.tls-tabs--segmented {
-    --tls-tabs-border-radius: var(--radius-lg);
-    --tls-tabs-pill-radius: var(--radius-md);
-    --tls-tabs-header-background-color: var(--color-surface-container);
-    --tls-tabs-pill-background-color: var(--color-surface);
-    --tls-tabs-header-padding: var(--spacing-2);
-    --tls-tabs-active-label-color: var(--color-on-surface);
-
-    .tls-tabs-header {
-      padding: var(--tls-tabs-header-padding);
-      gap: var(--tls-tabs-header-padding);
-
-      border-radius: var(--tls-tabs-border-radius);
-
-      background-color: var(--tls-tabs-header-background-color);
-
-      &__item {
-        border: none;
-        border-radius: var(--tls-tabs-pill-radius);
-
-        &:hover:not(.tls-tabs-header__item--active) {
-          background-color: var(--color-surface-container-high);
-        }
-
-        &.tls-tabs-header__item--active {
-          background-color: var(--tls-tabs-pill-background-color);
-          box-shadow: var(--shadow-xs);
-        }
-
-        &-button {
-          padding: var(--spacing-2) var(--spacing-5);
-        }
-      }
-    }
   }
 }

package/themes/thalassic/components/tabs/_tabs.scss

@@ -1,87 +1,20 @@
+// Container-level styles for `tls-tabs` (background, layout, content panel).
+// The header strip itself is the shared `.tls-tab-header` block
+// (components/tab-header), which `tls-tabs` renders as its tablist and
+// `tls-tab-nav` renders as router links.
 .tls-tabs {
   --tls-tabs-background-color: var(--color-surface);
-  --tls-tabs-label-color: var(--color-outline);
-  --tls-tabs-active-label-color: var(--color-primary);
-  --tls-tabs-border-color: var(--color-outline-variant);
-  --tls-tabs-border-width: 1px;
-  --tls-tabs-active-border-color: var(--color-primary);
-  --tls-tabs-active-border-width: 2px;
-  --tls-tabs-disabled-opacity: 0.38;
   --tls-tabs-content-padding: var(--spacing-4);
 
-  background: var(--tls-tabs-background-color);
-
   display: flex;
   flex-direction: column;
 
-  transition: border-color var(--motion-theme),
-  background-color var(--motion-theme);
+  background: var(--tls-tabs-background-color);
 
   overflow: clip;
 
-  .tls-tabs-header {
-    flex-shrink: 0;
-    display: flex;
-
-    border-color: var(--tls-tabs-border-color);
-
-    // Tabs that exceed the header's extent scroll instead of shrinking
-    // (e.g. a horizontal strip on a narrow viewport). The scrollbar is
-    // hidden so it never covers the active-tab indicator line, while
-    // wheel/touch/keyboard scrolling stays available.
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &__item {
-      flex-shrink: 0;
-
-      display: flex;
-
-      color: var(--tls-tabs-label-color);
-
-      border-color: transparent;
-
-      transition: color var(--motion-fast),
-      border-color var(--motion-fast),
-      background-color var(--motion-theme);
-
-      &:has(&-link:hover, &-link:focus) {
-        background-color: var(--color-grey-95);
-      }
-
-      &.tls-tabs-header__item--active {
-        color: var(--tls-tabs-active-label-color);
-        border-color: var(--tls-tabs-active-border-color);
-      }
-
-      &.tls-tabs-header__item--disabled {
-        opacity: var(--tls-tabs-disabled-opacity);
-
-        .tls-tabs-header__item-button {
-          cursor: not-allowed;
-        }
-      }
-
-      &-button {
-        width: 100%;
-
-        padding: var(--spacing-3) var(--spacing-6);
-
-        // TODO: use mixin
-        font-size: var(--font-label-large-size);
-        font-weight: var(--font-label-large-weight);
-        line-height: var(--font-label-large-line-height);
-        letter-spacing: var(--font-label-large-letter-spacing);
-
-        cursor: pointer;
-
-        transition: background-color var(--motion-fast);
-      }
-    }
-  }
+  transition: border-color var(--motion-theme),
+  background-color var(--motion-theme);
 
   .tls-tabs-content {
     padding: var(--tls-tabs-content-padding);