@thalassic/themes 22.14.1 → 22.14.2

package/package.json

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

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

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

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

@@ -0,0 +1,53 @@
+// Alignment of the strip itself and of the tabs inside it. Both classes sit on
+// the strip element and both set properties the strip owns, so they live with
+// the shared block rather than in the tabs composite.
+//
+// The `--align-*` modifiers presume the strip is a flex item, which `tls-tabs`
+// guarantees by being a flex container. `tls-tab-nav` is a standalone strip
+// whose placement is its consumer's layout concern, so it carries only the
+// `--items-*` modifiers.
+.tls-tab-header {
+  // Placement along the container's cross axis: block when the tabs are
+  // vertical, inline when horizontal. Anything but `stretch` sizes the strip to
+  // its tabs rather than to the content panel's extent.
+  &--align-stretch {
+    align-self: stretch;
+  }
+
+  &--align-start {
+    align-self: flex-start;
+  }
+
+  &--align-center {
+    align-self: center;
+  }
+
+  &--align-end {
+    align-self: flex-end;
+  }
+
+  // Distribution of the tabs along the strip's main axis. These have nothing to
+  // distribute once the strip is sized to its tabs by a non-stretch
+  // `--align-*`.
+  &--items-start {
+    justify-content: flex-start;
+  }
+
+  &--items-center {
+    justify-content: center;
+  }
+
+  &--items-end {
+    justify-content: flex-end;
+  }
+
+  // Equal shares rather than a `justify-content` value: the base reserves each
+  // item at its content size (`flex-shrink: 0`), so growing the items is what
+  // splits the strip evenly. Tabs then shrink on a narrow strip instead of
+  // scrolling — the trade-off this value opts into.
+  &--items-stretch {
+    .tls-tab-header__item {
+      flex: 1;
+    }
+  }
+}

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

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 // 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 /
@@ -84,6 +86,19 @@
       cursor: pointer;
 
       transition: background-color var(--motion-fast);
+
+      // Focus is distinct from selection here: the strip is a roving-tabindex
+      // widget, so arrowing moves focus onto tabs that are not selected and
+      // the active-indicator color alone cannot stand in for a focus
+      // indicator. The ring is drawn inside the control's box — the strip
+      // clips on its cross axis (see the orientation overflow rules) and items
+      // sit flush against their neighbours, so an outset ring would be cut off
+      // on one edge and overlap the adjacent tab on the other.
+      &:focus-visible {
+        @include mixins.focus-ring;
+
+        outline-offset: calc(var(--control-focus-ring-offset) * -1);
+      }
     }
   }
 }

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

@@ -1,13 +1,27 @@
 // Variant styles that concern the tabs container itself; the header strip's
 // variant styles live in the shared tab-header block.
 .tls-tabs {
-  // Outlined
+  // Outlined — the one variant that is a container rather than a transparent
+  // layout primitive: the header sits flush against the card's edge (no gap)
+  // and the panel is padded away from the border. Its surface is also what the
+  // header's active item is filled with, so the item reads as a folder tab
+  // merging into the panel.
   &.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-background-color: var(--color-surface);
+    --tls-tabs-gap: 0;
+    --tls-tabs-content-padding: var(--spacing-4);
 
     border: var(--tls-tabs-border-width) solid var(--tls-tabs-border-color);
     border-radius: var(--tls-tabs-border-radius);
+
+    background: var(--tls-tabs-background-color);
+
+    overflow: clip;
+
+    transition: border-color var(--motion-theme),
+    background-color var(--motion-theme);
   }
 }

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

@@ -1,20 +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.
+// Container-level styles for `tls-tabs` (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.
+//
+// The container is a transparent layout primitive: it paints no surface of its
+// own and pads no content, so a panel holding its own card, table or list sits
+// flush and owns its spacing. The header and the content panel are separated by
+// `--tls-tabs-gap` alone. The `outlined` variant is the exception — it is a card
+// and reinstates both the surface and the content padding.
 .tls-tabs {
-  --tls-tabs-background-color: var(--color-surface);
-  --tls-tabs-content-padding: var(--spacing-4);
+  --tls-tabs-gap: var(--spacing-4);
+  --tls-tabs-content-padding: 0;
 
   display: flex;
   flex-direction: column;
-
-  background: var(--tls-tabs-background-color);
-
-  overflow: clip;
-
-  transition: border-color var(--motion-theme),
-  background-color var(--motion-theme);
+  gap: var(--tls-tabs-gap);
 
   .tls-tabs-content {
     padding: var(--tls-tabs-content-padding);