@thalassic/themes 22.16.0 → 22.17.0

package/themes/thalassic/components/drawer/_drawer-side.scss

@@ -27,20 +27,85 @@
     max-height: 100dvh;
   }
 
+  // Sized by content along the main axis, capped so a short panel hugs its content
+  // while a tall one still scrolls instead of filling the viewport.
+  &--auto {
+    &.tls-drawer--start,
+    &.tls-drawer--end {
+      width: fit-content;
+      max-width: 90dvw;
+    }
+
+    &.tls-drawer--top,
+    &.tls-drawer--bottom {
+      height: fit-content;
+      max-height: 90dvh;
+    }
+  }
+
+  // Each side pins the grabber to the panel's inner edge (the one facing the
+  // viewport), centered along the cross axis. Logical insets keep the side panels'
+  // placement correct in RTL, where the physical edges swap.
   &--start {
     --tls-drawer-offset: translateX(-100%);
+
+    .tls-drawer__grabber {
+      inset-inline-end: var(--tls-drawer-grabber-inset);
+      inset-block: 0;
+
+      width: var(--tls-drawer-grabber-thickness);
+      height: var(--tls-drawer-grabber-length);
+
+      margin-block: auto;
+    }
   }
 
   &--end {
     --tls-drawer-offset: translateX(100%);
+
+    .tls-drawer__grabber {
+      inset-inline-start: var(--tls-drawer-grabber-inset);
+      inset-block: 0;
+
+      width: var(--tls-drawer-grabber-thickness);
+      height: var(--tls-drawer-grabber-length);
+
+      margin-block: auto;
+    }
   }
 
   &--top {
     --tls-drawer-offset: translateY(-100%);
+
+    // Keeps the content clear of a device cutout on the pinned edge.
+    padding-top: env(safe-area-inset-top);
+
+    .tls-drawer__grabber {
+      bottom: var(--tls-drawer-grabber-inset);
+      inset-inline: 0;
+
+      width: var(--tls-drawer-grabber-length);
+      height: var(--tls-drawer-grabber-thickness);
+
+      margin-inline: auto;
+    }
   }
 
   &--bottom {
     --tls-drawer-offset: translateY(100%);
+
+    // Keeps the content clear of the home indicator on the pinned edge.
+    padding-bottom: env(safe-area-inset-bottom);
+
+    .tls-drawer__grabber {
+      top: var(--tls-drawer-grabber-inset);
+      inset-inline: 0;
+
+      width: var(--tls-drawer-grabber-length);
+      height: var(--tls-drawer-grabber-thickness);
+
+      margin-inline: auto;
+    }
   }
 
   // Rounds the inner edge only (the two corners facing the viewport). Opt-in; the

package/themes/thalassic/components/drawer/_drawer.scss

@@ -34,6 +34,9 @@
   --tls-drawer-padding: var(--spacing-6);
   --tls-drawer-close-size: 16px;
   --tls-drawer-close-padding: var(--spacing-4);
+  --tls-drawer-grabber-length: 36px;
+  --tls-drawer-grabber-thickness: 5px;
+  --tls-drawer-grabber-inset: var(--spacing-2);
 
   position: relative;
 
@@ -93,6 +96,17 @@
     }
   }
 
+  // Grabber pill, the visual affordance of a sheet-style panel. Placement along the
+  // panel's inner edge is side-dependent and lives with the side modifiers.
+  &__grabber {
+    position: absolute;
+    z-index: 1;
+
+    border-radius: calc(var(--tls-drawer-grabber-thickness) / 2);
+
+    background-color: var(--color-outline-variant);
+  }
+
   &__header {
     padding: var(--tls-drawer-padding) var(--tls-drawer-padding) 0;
   }
@@ -108,6 +122,8 @@
     flex: 1;
     padding: var(--spacing-4) var(--tls-drawer-padding);
     overflow-y: auto;
+    // Scrolling the drawer's content must not chain into scrolling the page behind it.
+    overscroll-behavior: contain;
   }
 
   &__footer {

package/themes/thalassic/components/index.scss

@@ -41,7 +41,9 @@
 @forward 'input-number';
 @forward 'pin-input';
 @forward 'popover';
+@forward 'progress';
 @forward 'radio-button';
+@forward 'rating';
 @forward 'rich-text-editor';
 @forward 'skeleton';
 @forward 'slider';
@@ -49,3 +51,4 @@
 @forward 'table';
 @forward 'toggle-button';
 @forward 'toggle-group';
+@forward 'virtual-scroll';

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;
+          }
         }
       }
     }