@thalassic/themes 22.6.0 → 22.7.0

package/package.json

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

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.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