@thalassic/themes 22.16.0 → 22.17.0

package/themes/thalassic/components/stepper/_stepper-label-position.scss

@@ -0,0 +1,41 @@
+.tls-stepper {
+  // Bottom labels — a horizontal-only layout: every step takes an equal
+  // column with its index centered and text underneath, and each connector
+  // runs from a step's index to the next column's, so the rail reads
+  // symmetrically edge to edge. A vertical stepper keeps the end placement.
+  &.tls-stepper--horizontal.tls-stepper--label-bottom {
+    .tls-stepper-header {
+      &__item {
+        width: auto;
+
+        flex: 1 1 0;
+
+        &:last-child {
+          width: auto;
+
+          flex: 1 1 0;
+        }
+
+        .tls-stepper-header-button {
+          width: 100%;
+
+          align-items: center;
+
+          text-align: center;
+        }
+      }
+
+      &__divider {
+        // Runs from this column's index to the next one's: the inline insets
+        // resolve against the item's width, and the columns are equal, so
+        // half a width beyond the box lands exactly on the neighbouring
+        // column's center. The index radius plus a small gap keeps the run
+        // clear of both circles.
+        inset-inline-start: calc(50% + var(--tls-stepper-index-size) / 2 + var(--spacing-1));
+        inset-inline-end: calc(-50% + var(--tls-stepper-index-size) / 2 + var(--spacing-1));
+
+        width: auto;
+      }
+    }
+  }
+}

package/themes/thalassic/components/stepper/_stepper-orientation.scss

@@ -5,8 +5,13 @@
       &__item {
         width: 100%;
 
+        // The last step needs no room for a trailing divider: it keeps its
+        // natural width, and never shrinks below it — otherwise the flexbox
+        // would squeeze it to min-content and wrap its label.
         &:last-child {
           width: auto;
+
+          flex-shrink: 0;
         }
       }
 
@@ -19,11 +24,13 @@
     }
   }
 
-  // Vertical
+  // Vertical — header and content sit side by side, overriding the base
+  // column layout that stacks a horizontal header above the content.
   &.tls-stepper--vertical {
     height: 100%;
 
     display: flex;
+    flex-direction: row;
 
     .tls-stepper-header {
       flex-direction: column;
@@ -31,8 +38,13 @@
       &__item {
         height: 100%;
 
+        // Keeps a visible run of divider between step buttons when the
+        // container does not stretch the header.
+        min-height: 64px;
+
         &:last-child {
           height: auto;
+          min-height: 0;
         }
 
         .tls-stepper-header-button {

package/themes/thalassic/components/stepper/_stepper.scss

@@ -1,6 +1,7 @@
+@use '../../mixins' as mixins;
+
 .tls-stepper {
   --tls-stepper-label-color: var(--color-outline);
-  --tls-stepper-background-color: var(--color-surface);
 
   --tls-stepper-content-gap: var(--spacing-4);
 
@@ -8,6 +9,8 @@
   --tls-stepper-index-size: calc(32px - var(--tls-stepper-index-border-width) * 2);
 
   --tls-stepper-index-on-color: var(--color-on-surface);
+  // The index circle is opaque so the divider running behind it stays masked;
+  // it matches the surface the stepper sits on, which itself stays transparent.
   --tls-stepper-index-background-color: var(--color-surface);
   --tls-stepper-index-border-color: var(--color-outline-variant);
 
@@ -17,15 +20,10 @@
   --tls-stepper-divider-color: var(--color-outline-variant);
   --tls-stepper-divider-width: 2px;
 
-  background: var(--tls-stepper-background-color);
-
   display: flex;
   flex-direction: column;
   gap: var(--tls-stepper-content-gap);
 
-  transition: border-color var(--motion-theme),
-  background-color var(--motion-theme);
-
   &.tls-stepper--completed {
     .tls-stepper-content {
       .tls-step {
@@ -69,14 +67,33 @@
         position: relative;
         z-index: 1;
 
+        padding: 0;
+
         display: flex;
         flex-direction: column;
         gap: var(--spacing-2);
 
+        border: none;
+
+        background: none;
+
+        font: inherit;
+        text-align: start;
         color: var(--tls-stepper-label-color);
 
-        transition: color var(--motion-fast),
-        background-color var(--motion-fast);
+        cursor: pointer;
+
+        @include mixins.motion {
+          transition: color var(--motion-fast);
+        }
+
+        @include mixins.touch-target(var(--tls-stepper-index-size));
+
+        &:focus-visible {
+          @include mixins.focus-ring;
+
+          border-radius: var(--radius-sm);
+        }
 
         // The header is a tablist: it resolves the clicked step from
         // `event.target` and ignores any target that is not an `HTMLElement`,
@@ -101,13 +118,15 @@
           color: var(--tls-stepper-index-on-color);
           background-color: var(--tls-stepper-index-background-color);
 
-          transition: background-color var(--motion-fast);
+          @include mixins.motion {
+            transition: background-color var(--motion-fast), border-color var(--motion-fast);
+          }
         }
 
         &__text {
           display: flex;
           flex-direction: column;
-          gap: 0.25rem;
+          gap: var(--spacing-1);
 
           .tls-stepper-header-button__label {
             font-size: var(--font-label-large-size);
@@ -123,6 +142,11 @@
             letter-spacing: var(--font-label-medium-letter-spacing);
           }
         }
+
+        // State text (completed / invalid) for assistive technology only.
+        &__state {
+          @include mixins.visually-hidden;
+        }
       }
 
       .tls-stepper-header__divider {
@@ -130,7 +154,9 @@
 
         background-color: var(--tls-stepper-divider-color);
 
-        transition: background-color var(--motion-fast);
+        @include mixins.motion {
+          transition: background-color var(--motion-fast);
+        }
       }
     }
   }

package/themes/thalassic/components/toast/_toast.scss

@@ -138,15 +138,16 @@
   &__title {
     margin: 0;
 
-    font-size: var(--font-size-sm);
+    font-size: var(--font-body-small-size);
     font-weight: var(--font-weight-semibold);
+    line-height: var(--font-body-small-line-height);
   }
 
   &__message {
     margin: 0;
 
-    font-size: var(--font-size-sm);
-    line-height: 1.4;
+    font-size: var(--font-body-small-size);
+    line-height: var(--font-body-small-line-height);
     overflow-wrap: anywhere;
   }
 

package/themes/thalassic/mixins/_index.scss

@@ -2,5 +2,7 @@
 @forward 'focus-ring';
 @forward 'motion';
 @forward 'panel-open';
+@forward 'pop';
 @forward 'touch-target';
 @forward 'variant-treatment';
+@forward 'visually-hidden';

package/themes/thalassic/mixins/_pop.scss

@@ -0,0 +1,26 @@
+@use 'motion';
+
+// A quick grow-and-settle acknowledging a just-committed selection: the element
+// scales up to `--tls-pop-scale` and springs back. Only the peak is keyframed —
+// the edges fill in from the element's underlying transform, so the pop rides
+// on top of whatever scale the element already has (e.g. a hover grow) instead
+// of snapping it back to 1 first.
+@keyframes tls-pop {
+  50% {
+    transform: scale(var(--tls-pop-scale, 1.3));
+  }
+}
+
+@mixin pop(
+  $scale: 1.3,
+  $duration: var(--motion-default),
+  $easing: var(--motion-ease-spring)
+) {
+  // Selection feedback is expressive — the committed state already reads
+  // without it — so the pop belongs to the `full` tier only.
+  @include motion.motion(full) {
+    --tls-pop-scale: #{$scale};
+
+    animation: tls-pop $duration $easing;
+  }
+}

package/themes/thalassic/mixins/_visually-hidden.scss

@@ -0,0 +1,19 @@
+// Removes an element from the visual layout while leaving it in the accessibility tree, so the
+// text keeps naming its control for assistive technology. Use it instead of `display: none`
+// whenever hiding content would otherwise strip a control's accessible name.
+@mixin visually-hidden {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  margin: -1px;
+  padding: 0;
+
+  border: 0;
+
+  white-space: nowrap;
+  overflow: hidden;
+
+  clip-path: inset(50%);
+}