@thalassic/themes 22.16.1 → 22.17.0

package/themes/thalassic/components/multi-select/_multi-select-panel.scss

@@ -23,6 +23,27 @@
   list-style: none;
 
   @include mixins.panel-open;
+
+  &--virtual {
+    // The virtual-scroll viewport inside is the scroll container; the panel only clips
+    // to its rounded corners.
+    overflow: hidden;
+
+    // Windowing positions every row at a fixed offset, so each row must occupy exactly
+    // the item size the viewport publishes — a taller custom option template is clipped
+    // rather than allowed to drift the rows out of place.
+    .tls-multi-select__option {
+      height: var(--tls-virtual-scroll-item-size);
+
+      box-sizing: border-box;
+
+      overflow: hidden;
+    }
+
+    .tls-multi-select__option-button {
+      height: 100%;
+    }
+  }
 }
 
 .tls-multi-select__option {

package/themes/thalassic/components/pagination/_pagination.scss

@@ -4,7 +4,7 @@
   --tls-pagination-gap: 16px;
   --tls-pagination-color: var(--color-secondary);
   --tls-pagination-radius: 4px;
-  --tls-pagination-hover-outline: 1px solid var(--color-lines);
+  --tls-pagination-hover-outline: 1px solid var(--color-outline-variant);
 
   --tls-pagination-item-border-color: var(--color-outline-variant);
 

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

@@ -0,0 +1,3 @@
+@forward 'progress';
+@forward 'progress-color';
+@forward 'progress-size';

package/themes/thalassic/components/progress/_progress-color.scss

@@ -0,0 +1,5 @@
+@use '../../mixins' as mixins;
+
+.tls-progress {
+  @include mixins.color-variants('tls-progress');
+}

package/themes/thalassic/components/progress/_progress-size.scss

@@ -0,0 +1,13 @@
+.tls-progress {
+  &.tls-progress--sm {
+    --tls-progress-height: 4px;
+  }
+
+  &.tls-progress--md {
+    --tls-progress-height: 8px;
+  }
+
+  &.tls-progress--lg {
+    --tls-progress-height: 12px;
+  }
+}

package/themes/thalassic/components/progress/_progress.scss

@@ -0,0 +1,38 @@
+@use '../../mixins' as mixins;
+
+.tls-progress {
+  --tls-progress-track-color: var(--color-surface-variant);
+
+  // A track piece: the single full-width bar in continuous mode, one pill per
+  // step in segmented mode. Fully rounded ends at every height.
+  .tls-progress-segment {
+    height: var(--tls-progress-height);
+
+    flex: 1 1 0;
+
+    border-radius: var(--radius-xl);
+
+    background-color: var(--tls-progress-track-color);
+
+    overflow: hidden;
+
+    @include mixins.motion {
+      transition: flex-grow var(--motion-fast) var(--motion-ease-out);
+    }
+  }
+
+  // The filled share of a segment, clipped by the segment's rounding. Anchored
+  // to inline-start so the bar grows from the leading edge in both layout
+  // directions.
+  .tls-progress-fill {
+    height: 100%;
+
+    border-radius: inherit;
+
+    background-color: var(--tls-progress-color);
+
+    @include mixins.motion {
+      transition: inline-size var(--motion-fast) var(--motion-ease-out);
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+@forward 'rating';
+@forward 'rating-size';
+@forward 'rating-color';

package/themes/thalassic/components/rating/_rating-color.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+
+@use '../../../../palettes' as common-palettes;
+
+.tls-rating {
+  &.tls-rating--primary {
+    --tls-rating-fill-color: var(--color-primary);
+  }
+
+  &.tls-rating--secondary {
+    --tls-rating-fill-color: var(--color-secondary);
+  }
+
+  &.tls-rating--tertiary {
+    --tls-rating-fill-color: var(--color-tertiary);
+  }
+
+  &.tls-rating--success {
+    --tls-rating-fill-color: var(--color-success);
+  }
+
+  &.tls-rating--info {
+    --tls-rating-fill-color: var(--color-info);
+  }
+
+  &.tls-rating--warning {
+    --tls-rating-fill-color: var(--color-warning);
+  }
+
+  &.tls-rating--danger {
+    --tls-rating-fill-color: var(--color-danger);
+  }
+
+  // Classic star gold, straight from the yellow palette rather than the
+  // `warning` semantic (whose light-mode value is a dark olive, not gold).
+  &.tls-rating--golden {
+    --tls-rating-fill-color: #{map.get(common-palettes.$yellow, 70)};
+
+    :root.tls-dark & {
+      --tls-rating-fill-color: #{map.get(common-palettes.$yellow, 80)};
+    }
+  }
+}

package/themes/thalassic/components/rating/_rating-size.scss

@@ -0,0 +1,13 @@
+.tls-rating {
+  &.tls-rating--sm {
+    --tls-rating-star-size: 16px;
+  }
+
+  &.tls-rating--md {
+    --tls-rating-star-size: 20px;
+  }
+
+  &.tls-rating--lg {
+    --tls-rating-star-size: 24px;
+  }
+}

package/themes/thalassic/components/rating/_rating.scss

@@ -0,0 +1,144 @@
+@use '../../mixins' as mixins;
+
+.tls-rating {
+  --tls-rating-star-size: 20px;
+  --tls-rating-hover-scale: 1.15;
+  --tls-rating-pop-scale: 1.25;
+
+  // Fallback only — the component always emits a `--<color>` modifier, and the
+  // default `golden` value lives in the color partial alongside the others.
+  --tls-rating-fill-color: var(--color-primary);
+  --tls-rating-empty-color: var(--color-surface-variant);
+  // Ghost rendering of the hover preview's delta: the fill color, mostly transparent.
+  --tls-rating-preview-color: color-mix(in srgb, var(--tls-rating-fill-color) 45%, transparent);
+
+  .tls-rating-star {
+    position: relative;
+
+    display: inline-flex;
+  }
+
+  .tls-rating-icons {
+    position: relative;
+
+    display: inline-flex;
+
+    border-radius: var(--radius-sm);
+
+    color: var(--tls-rating-empty-color);
+
+    @include mixins.motion {
+      transition: transform var(--motion-fast) var(--motion-ease-spring);
+    }
+  }
+
+  // The star box: a fixed square holding either the built-in icon or a
+  // consumer template, whose content is centered and sized to the star.
+  .tls-rating-icon {
+    width: var(--tls-rating-star-size);
+    height: var(--tls-rating-star-size);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    font-size: var(--tls-rating-star-size);
+    line-height: 1;
+
+    .tls-icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // The filled layer sits over the outline star, clipped to the displayed
+  // value's share of the box. Anchored to inline-start so the visible part is
+  // the leading side and the clipped part the trailing side in both layout
+  // directions; the inner icon keeps the star's full size so clipping narrows
+  // the window, not the drawing.
+  .tls-rating-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    overflow: hidden;
+    color: var(--tls-rating-fill-color);
+
+    &--ghost {
+      color: var(--tls-rating-preview-color);
+    }
+  }
+
+  // The radios are the real targets: invisible, laid over their slice of the
+  // star and stretched across half the surrounding gap on each side, so the row
+  // is one continuous hit surface with no dead zones between stars.
+  .tls-rating-input {
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(var(--tls-rating-gap) / -2);
+
+    margin: 0;
+
+    appearance: none;
+
+    opacity: 0;
+
+    cursor: pointer;
+
+    &--start {
+      inset-inline-end: 50%;
+    }
+
+    &--end {
+      inset-inline-start: 50%;
+    }
+
+    // Tap-target expansion on the block axis only, mirroring the touch-target
+    // mixin's gating. The mixin's symmetric overflow cannot apply here: growing
+    // the inline axis would overlap the adjacent option's hit area and steal its
+    // edge taps, so the inline extent stays the option's own slice.
+    @media (pointer: coarse) {
+      :root:not([data-touch-targets='off']) & {
+        inset-block: min(
+          0px,
+          calc((var(--tls-rating-star-size) - var(--control-touch-target)) / 2)
+        );
+      }
+    }
+  }
+
+  .tls-rating-star:has(.tls-rating-input:focus-visible) .tls-rating-icons {
+    @include mixins.focus-ring;
+  }
+
+  .tls-rating-star--pop .tls-rating-icons {
+    @include mixins.pop(var(--tls-rating-pop-scale));
+  }
+
+  // Grows the star under the pointer. The scale itself is ungated so the state
+  // still reads at every motion level; only the easing into it is (see the
+  // icons rule above).
+  &:not(.tls-rating--disabled):not(.tls-rating--readonly) .tls-rating-star:hover .tls-rating-icons {
+    transform: scale(var(--tls-rating-hover-scale));
+  }
+
+  // Form control
+  &.tls-rating--disabled {
+    .tls-rating-input {
+      cursor: not-allowed;
+    }
+
+    .tls-rating-icons {
+      filter: brightness(0.9);
+    }
+  }
+
+  &.tls-rating--readonly .tls-rating-input {
+    cursor: default;
+  }
+
+  &:not(.tls-rating--disabled).tls-rating--show-error {
+    --tls-rating-fill-color: var(--color-danger);
+  }
+}

package/themes/thalassic/components/select/_select-panel.scss

@@ -23,6 +23,27 @@
   list-style: none;
 
   @include mixins.panel-open;
+
+  &--virtual {
+    // The virtual-scroll viewport inside is the scroll container; the panel only clips
+    // to its rounded corners.
+    overflow: hidden;
+
+    // Windowing positions every row at a fixed offset, so each row must occupy exactly
+    // the item size the viewport publishes — a taller custom option template is clipped
+    // rather than allowed to drift the rows out of place.
+    .tls-select__option {
+      height: var(--tls-virtual-scroll-item-size);
+
+      box-sizing: border-box;
+
+      overflow: hidden;
+    }
+
+    .tls-select__option-button {
+      height: 100%;
+    }
+  }
 }
 
 .tls-select__option {

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

@@ -1,3 +1,4 @@
 @forward 'stepper';
 @forward 'stepper-color';
+@forward 'stepper-label-position';
 @forward 'stepper-orientation';

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

@@ -1,3 +1,5 @@
+@use '../../mixins/color-variants' as color-variants;
+
 .tls-stepper {
   @mixin _disabled-reset {
     --tls-stepper-label-color: var(--color-outline);
@@ -8,159 +10,39 @@
   }
 
   .tls-stepper-header {
-    // Item
+    // Item — the states of one hue share a specificity level, so within each
+    // hue block order encodes precedence: active < completed < invalid <
+    // disabled, the later state overriding the earlier ones when combined.
     &__item {
-      // Primary
-      &.tls-stepper-header--primary {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-primary);
-          --tls-stepper-index-border-color: var(--color-primary);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-primary);
-          --tls-stepper-index-background-color: var(--color-primary);
-          --tls-stepper-index-border-color: var(--color-primary);
-          --tls-stepper-divider-color: var(--color-primary);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Secondary
-      &.tls-stepper-header--secondary {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-secondary);
-          --tls-stepper-index-border-color: var(--color-secondary);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-secondary);
-          --tls-stepper-index-background-color: var(--color-secondary);
-          --tls-stepper-index-border-color: var(--color-secondary);
-          --tls-stepper-divider-color: var(--color-secondary);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Tertiary
-      &.tls-stepper-header--tertiary {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-tertiary);
-          --tls-stepper-index-border-color: var(--color-tertiary);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-tertiary);
-          --tls-stepper-index-background-color: var(--color-tertiary);
-          --tls-stepper-index-border-color: var(--color-tertiary);
-          --tls-stepper-divider-color: var(--color-tertiary);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Success
-      &.tls-stepper-header--success {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-success);
-          --tls-stepper-index-border-color: var(--color-success);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-success);
-          --tls-stepper-index-background-color: var(--color-success);
-          --tls-stepper-index-border-color: var(--color-success);
-          --tls-stepper-divider-color: var(--color-success);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Info
-      &.tls-stepper-header--info {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-info);
-          --tls-stepper-index-border-color: var(--color-info);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-info);
-          --tls-stepper-index-background-color: var(--color-info);
-          --tls-stepper-index-border-color: var(--color-info);
-          --tls-stepper-divider-color: var(--color-info);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Warning
-      &.tls-stepper-header--warning {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-warning);
-          --tls-stepper-index-border-color: var(--color-warning);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-warning);
-          --tls-stepper-index-background-color: var(--color-warning);
-          --tls-stepper-index-border-color: var(--color-warning);
-          --tls-stepper-divider-color: var(--color-warning);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
-        }
-      }
-
-      // Danger
-      &.tls-stepper-header--danger {
-        // Active
-        &.tls-stepper-header__item--active {
-          --tls-stepper-label-color: var(--color-danger);
-          --tls-stepper-index-border-color: var(--color-danger);
-        }
-
-        // Completed
-        &.tls-stepper-header__item--completed {
-          --tls-stepper-index-on-color: var(--color-on-danger);
-          --tls-stepper-index-background-color: var(--color-danger);
-          --tls-stepper-index-border-color: var(--color-danger);
-          --tls-stepper-divider-color: var(--color-danger);
-        }
-
-        // Disabled overrides color states
-        &.tls-stepper-header__item--disabled {
-          @include _disabled-reset;
+      @each $color in color-variants.$colors {
+        &.tls-stepper-header__item--#{$color} {
+          // Active
+          &.tls-stepper-header__item--active {
+            --tls-stepper-label-color: var(--color-#{$color});
+            --tls-stepper-index-border-color: var(--color-#{$color});
+          }
+
+          // Completed
+          &.tls-stepper-header__item--completed {
+            --tls-stepper-index-on-color: var(--color-on-#{$color});
+            --tls-stepper-index-background-color: var(--color-#{$color});
+            --tls-stepper-index-border-color: var(--color-#{$color});
+            --tls-stepper-divider-color: var(--color-#{$color});
+          }
+
+          // Invalid — always the danger hue, regardless of the step's own
+          // color, so validation state reads over decoration.
+          &.tls-stepper-header__item--invalid {
+            --tls-stepper-label-color: var(--color-danger);
+            --tls-stepper-index-on-color: var(--color-danger);
+            --tls-stepper-index-background-color: var(--color-surface);
+            --tls-stepper-index-border-color: var(--color-danger);
+          }
+
+          // Disabled
+          &.tls-stepper-header__item--disabled {
+            @include _disabled-reset;
+          }
         }
       }
     }

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 {