@thalassic/themes 22.6.0 → 22.8.0

package/package.json

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

package/themes/thalassic/components/_file-input.scss

@@ -1,3 +1,4 @@
+@use '../functions' as functions;
 @use '../mixins' as mixins;
 
 .tls-file-input {
@@ -67,14 +68,14 @@
     &--dragging {
       --tls-file-input-border-color: var(--color-primary);
 
-      background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      background-color: functions.tint(var(--color-primary), 8%);
     }
 
     &--rejected {
       --tls-file-input-border-color: var(--color-danger);
 
       color: var(--color-danger);
-      background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
+      background-color: functions.tint(var(--color-danger), 8%);
     }
 
     &--disabled {

package/themes/thalassic/components/badge/_badge.scss

@@ -59,4 +59,8 @@
 
     padding-inline: 0;
   }
+
+  &--inset &__indicator {
+    --tls-badge-offset: 0px;
+  }
 }

package/themes/thalassic/components/image-compare/_image-compare-orientation.scss

@@ -0,0 +1,47 @@
+.tls-image-compare {
+  // Horizontal: the divider is vertical and wipes along the inline axis. The
+  // inline slide mirrors in RTL, where the layout-start edge sits on the
+  // opposite physical side.
+  &--horizontal {
+    // The whole component is grabbable — a pointer-down anywhere drags the
+    // divider — so the resize cursor lives on the host, not just the handle.
+    cursor: ew-resize;
+
+    > .tls-image-compare__handle {
+      inset-block: 0;
+
+      transform: translateX(-50%);
+
+      :root[dir='rtl'] & {
+        transform: translateX(50%);
+      }
+
+      // Vertical divider line down the centre of the handle.
+      &::before {
+        inset-block: 0;
+        inset-inline-start: calc(50% - var(--tls-image-compare-line-thickness) / 2);
+
+        width: var(--tls-image-compare-line-thickness);
+      }
+    }
+  }
+
+  // Vertical: the divider is horizontal and wipes along the block axis.
+  &--vertical {
+    cursor: ns-resize;
+
+    > .tls-image-compare__handle {
+      inset-inline: 0;
+
+      transform: translateY(-50%);
+
+      // Horizontal divider line across the centre of the handle.
+      &::before {
+        inset-inline: 0;
+        inset-block-start: calc(50% - var(--tls-image-compare-line-thickness) / 2);
+
+        height: var(--tls-image-compare-line-thickness);
+      }
+    }
+  }
+}

package/themes/thalassic/components/image-compare/_image-compare.scss

@@ -0,0 +1,115 @@
+@use '../../mixins' as mixins;
+
+.tls-image-compare {
+  // Divider line running the full length of the component.
+  --tls-image-compare-line-color: var(--color-surface);
+  --tls-image-compare-line-thickness: 2px;
+
+  // Circular grab handle centred on the divider.
+  --tls-image-compare-handle-size: var(--spacing-8);
+  --tls-image-compare-handle-color: var(--color-surface);
+  --tls-image-compare-handle-border: var(--tls-image-compare-line-thickness);
+
+  position: relative;
+
+  width: 100%;
+
+  display: block;
+
+  overflow: hidden;
+
+  // A pointer-down anywhere drags the divider, so suppress native pan/zoom
+  // gestures across the whole component (not just the handle) — otherwise a
+  // touch drag over the image scrolls the page and cancels the pointer.
+  touch-action: none;
+
+  &--dragging {
+    user-select: none;
+  }
+
+  &__layer {
+    // Projected media never captures the pointer or gets dragged as an image.
+    > * {
+      display: block;
+
+      user-select: none;
+      -webkit-user-drag: none;
+    }
+  }
+
+  // The `after` layer sits in normal flow: its media's natural aspect ratio
+  // gives the whole component its height.
+  &__after {
+    > * {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // The `before` layer overlays the `after` layer at the same box and is clipped
+  // to the divider band; its media is stretched to cover that box so the two
+  // images register pixel-for-pixel.
+  &__before {
+    position: absolute;
+    inset: 0;
+
+    > * {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
+  }
+
+  &__handle {
+    position: absolute;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+
+      .tls-image-compare__grip {
+        border-color: var(--color-primary);
+      }
+    }
+
+    &:hover {
+      .tls-image-compare__grip {
+        border-color: var(--color-primary);
+      }
+    }
+
+    // Divider line. Axis-specific sizing/insets live in the orientation partial.
+    &::before {
+      content: '';
+
+      position: absolute;
+
+      background-color: var(--tls-image-compare-line-color);
+    }
+  }
+
+  &__grip {
+    // Lifts the handle above the divider line in paint order.
+    position: relative;
+
+    width: var(--tls-image-compare-handle-size);
+    height: var(--tls-image-compare-handle-size);
+
+    border: var(--tls-image-compare-handle-border) solid transparent;
+    border-radius: 50%;
+
+    background-color: var(--tls-image-compare-handle-color);
+    box-shadow: var(--shadow-sm);
+
+    @include mixins.motion(essential) {
+      transition: border-color var(--motion-fast);
+    }
+  }
+}

package/themes/thalassic/components/image-compare/_index.scss

@@ -0,0 +1,2 @@
+@forward 'image-compare';
+@forward 'image-compare-orientation';

package/themes/thalassic/components/index.scss

@@ -28,6 +28,7 @@
 @forward 'file-input';
 @forward 'form-item';
 @forward 'icon';
+@forward 'image-compare';
 @forward 'menu';
 @forward 'odometer';
 @forward 'password';
@@ -36,5 +37,6 @@
 @forward 'popover';
 @forward 'radio-button';
 @forward 'skeleton';
+@forward 'splitter';
 @forward 'table';
 @forward 'toggle-group';

package/themes/thalassic/components/splitter/_index.scss

@@ -0,0 +1,2 @@
+@forward 'splitter';
+@forward 'splitter-orientation';

package/themes/thalassic/components/splitter/_splitter-orientation.scss

@@ -0,0 +1,61 @@
+.tls-splitter {
+  // Horizontal: panels sit side by side, separated by vertical gutters. The
+  // direct-child selector stops these rules from leaking into a nested splitter
+  // of the opposite orientation.
+  &--horizontal {
+    flex-direction: row;
+
+    > .tls-splitter-gutter {
+      inset-block: 0;
+
+      width: var(--tls-splitter-gutter-size);
+
+      cursor: col-resize;
+
+      // Centre the gutter on the seam. The inline slide mirrors in RTL, where
+      // the logical start edge sits on the opposite physical side.
+      transform: translateX(-50%);
+
+      --tls-splitter-handle-inline: var(--tls-splitter-handle-thickness);
+      --tls-splitter-handle-block: var(--tls-splitter-handle-length);
+
+      :root[dir='rtl'] & {
+        transform: translateX(50%);
+      }
+
+      // Vertical seam line down the centre of the gutter.
+      &::before {
+        inset-block: 0;
+        inset-inline-start: calc(50% - var(--tls-splitter-line-thickness) / 2);
+
+        width: var(--tls-splitter-line-thickness);
+      }
+    }
+  }
+
+  // Vertical: panels stack, separated by horizontal gutters.
+  &--vertical {
+    flex-direction: column;
+
+    > .tls-splitter-gutter {
+      inset-inline: 0;
+
+      height: var(--tls-splitter-gutter-size);
+
+      cursor: row-resize;
+
+      transform: translateY(-50%);
+
+      --tls-splitter-handle-inline: var(--tls-splitter-handle-length);
+      --tls-splitter-handle-block: var(--tls-splitter-handle-thickness);
+
+      // Horizontal seam line across the centre of the gutter.
+      &::before {
+        inset-inline: 0;
+        inset-block-start: calc(50% - var(--tls-splitter-line-thickness) / 2);
+
+        height: var(--tls-splitter-line-thickness);
+      }
+    }
+  }
+}

package/themes/thalassic/components/splitter/_splitter.scss

@@ -0,0 +1,96 @@
+@use '../../mixins' as mixins;
+
+.tls-splitter {
+  // Draggable hit area straddling the seam; larger than the visible line/handle.
+  --tls-splitter-gutter-size: var(--spacing-4);
+
+  // Thin seam line running the full length of the gutter.
+  --tls-splitter-line-color: var(--color-outline-variant);
+  --tls-splitter-line-thickness: 1px;
+
+  // Grab handle centred on the seam.
+  --tls-splitter-handle-color: var(--color-outline);
+  --tls-splitter-handle-hover-color: var(--color-primary);
+  --tls-splitter-handle-thickness: 4px;
+  --tls-splitter-handle-length: var(--spacing-8);
+  --tls-splitter-handle-radius: var(--radius-sm);
+
+  // Handle box, resolved per orientation on the gutter (see the orientation
+  // partial) and inherited by the handle. Defaults suit a horizontal splitter.
+  --tls-splitter-handle-inline: var(--tls-splitter-handle-thickness);
+  --tls-splitter-handle-block: var(--tls-splitter-handle-length);
+
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+
+  overflow: hidden;
+
+  &--resizing {
+    user-select: none;
+  }
+
+  .tls-splitter-panel {
+    position: relative;
+
+    min-width: 0;
+    min-height: 0;
+
+    overflow: auto;
+  }
+
+  .tls-splitter-gutter {
+    position: absolute;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+
+    touch-action: none;
+
+    &:focus-visible {
+      outline: none;
+
+      .tls-splitter-gutter__handle {
+        background-color: var(--tls-splitter-handle-hover-color);
+      }
+    }
+
+    &:hover {
+      .tls-splitter-gutter__handle {
+        background-color: var(--tls-splitter-handle-hover-color);
+      }
+    }
+
+    // Seam line. Axis-specific sizing/insets live in the orientation partial.
+    &::before {
+      content: '';
+
+      position: absolute;
+
+      background-color: var(--tls-splitter-line-color);
+    }
+
+    &__handle {
+      // Lifts the handle above the seam line in paint order.
+      position: relative;
+
+      width: var(--tls-splitter-handle-inline);
+      height: var(--tls-splitter-handle-block);
+
+      border-radius: var(--tls-splitter-handle-radius);
+
+      background-color: var(--tls-splitter-handle-color);
+
+      @include mixins.motion(essential) {
+        transition: background-color var(--motion-fast);
+      }
+    }
+  }
+}

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

@@ -1,4 +1,12 @@
 .tls-tabs {
+  // Horizontal
+  &.tls-tabs--horizontal {
+    .tls-tabs-header {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+  }
+
   // Vertical
   &.tls-tabs--vertical {
     display: flex;
@@ -7,6 +15,9 @@
     .tls-tabs-header {
       flex-direction: column;
 
+      overflow-x: hidden;
+      overflow-y: auto;
+
       border-color: var(--tls-tabs-border-color);
     }
 

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

@@ -1,6 +1,11 @@
+@use '../../functions' as functions;
+
 .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;
@@ -14,21 +19,28 @@
         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.
-        &:hover {
+        // 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);
-
-          // 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's excluded here.
-          &:not(.tls-tabs-header__item--active) {
-            border-bottom-color: var(--tls-tabs-border-color);
-          }
+          border-bottom-color: var(--tls-tabs-border-color);
         }
       }
     }
@@ -72,4 +84,41 @@
       }
     }
   }
+
+  // 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

@@ -24,7 +24,19 @@
 
     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);
@@ -53,6 +65,8 @@
       }
 
       &-button {
+        width: 100%;
+
         padding: var(--spacing-3) var(--spacing-6);
 
         // TODO: use mixin

package/themes/thalassic/functions/_index.scss

@@ -0,0 +1 @@
+@forward 'tint';

package/themes/thalassic/functions/_tint.scss

@@ -0,0 +1,13 @@
+// Produces a translucent wash of a color by mixing it with `transparent`.
+// `$amount` is the share of the color that stays opaque (e.g. 8% → the color
+// at 8% alpha), the rest being transparent. Ideal for state layers — hover,
+// active, selected fills — laid over any background.
+//
+// Works with custom-property colors (`tint(var(--color-primary), 8%)`), which
+// `rgba()` cannot, since the token is not raw channel values.
+//
+// `$space` is the mixing color space; srgb blends the intuitive "normal RGB"
+// way. Override to `oklab` for a perceptually even blend when needed.
+@function tint($color, $amount, $space: srgb) {
+  @return color-mix(in $space, #{$color} $amount, transparent);
+}

package/themes/thalassic/index.scss

@@ -1,4 +1,5 @@
 @forward 'components';
+@forward 'functions';
 @forward 'mixins';
 @forward 'semantic';