@thalassic/themes 22.15.2 → 22.16.0

package/package.json

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

package/themes/thalassic/components/date-time-picker/_time-picker.scss

@@ -31,6 +31,36 @@
     padding-bottom: var(--spacing-2);
   }
 
+  &__day-period {
+    position: relative;
+
+    min-width: var(--spacing-11);
+
+    margin-inline-start: var(--spacing-2);
+    padding: var(--spacing-1) var(--spacing-2);
+
+    border: none;
+    border-radius: var(--radius-2xl);
+
+    background-color: var(--color-surface-container-high);
+
+    font-size: var(--font-label-large-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+
+    @include mixins.touch-target(var(--spacing-7));
+
+    &:hover {
+      background-color: var(--color-surface-container-highest);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+  }
+
   &__arrow {
     display: flex;
     align-items: center;

package/themes/thalassic/components/dialog/_dialog-size.scss

@@ -16,8 +16,8 @@
   }
 
   &.tls-dialog--wide {
+    // The height cap comes from the base `.tls-dialog` rule.
     --tls-dialog-width: calc(100svw - var(--spacing-12));
-    max-height: calc(100dvh - var(--spacing-12));
   }
 
   &.tls-dialog--full {

package/themes/thalassic/components/dialog/_dialog.scss

@@ -10,12 +10,18 @@
   --tls-dialog-border-radius: var(--radius-xl);
   --tls-dialog-shadow: var(--shadow-lg);
   --tls-dialog-padding: var(--spacing-6);
+  // Glyph size, distinct from the button's hit area below.
   --tls-dialog-close-size: 16px;
+  --tls-dialog-close-button-size: var(--control-height-sm);
   --tls-dialog-close-padding: var(--spacing-4);
 
   position: relative;
 
   width: var(--tls-dialog-width);
+  // Never taller than the visible viewport, so a long dialog scrolls in its
+  // body rather than running off screen. `dvh` tracks mobile browser chrome as
+  // it collapses, which is what an overlay pinned to the visible area wants.
+  max-height: calc(100dvh - var(--spacing-12));
 
   display: flex;
   flex-direction: column;
@@ -27,41 +33,65 @@
   color: var(--tls-dialog-color);
   box-shadow: var(--tls-dialog-shadow);
 
+  // The portal inserts the consumer's content component as the dialog's only
+  // content child, so that host — not the header/body/footer inside it — is
+  // this flex column's item. Make it a flex column in turn, or the body cannot
+  // claim the leftover height and never scrolls. A type selector is unavoidable
+  // here: the element belongs to the consumer, so it carries no class of ours.
+  > *:not(.tls-dialog__close) {
+    min-height: 0;
+
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
   &__close {
     position: absolute;
     top: var(--tls-dialog-close-padding);
     inset-inline-end: var(--tls-dialog-close-padding);
     z-index: 1;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: var(--tls-dialog-close-size);
-    height: var(--tls-dialog-close-size);
-
-    color: var(--color-outline);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-
-    transition: color var(--motion-fast) var(--motion-ease-in-out);
+    // Closing is a neutral affordance, not a themed action, so it must not
+    // inherit whatever default color an app configures for buttons. The text
+    // variant derives its rest, hover and active treatment from this one
+    // property, so overriding it recolors all three.
+    //
+    // It is set on the inner control rather than the host because that is
+    // where `.tls-button--<color>` lands; matching that selector's specificity
+    // is enough only because `dialog` is forwarded after `button` in
+    // `components/index.scss` — keep that order.
+    .tls-button {
+      --tls-button-color: var(--color-outline);
+    }
 
-    &:hover {
-      color: var(--color-on-surface);
+    &:hover .tls-button {
+      --tls-button-color: var(--color-on-surface);
     }
 
     .tls-icon {
-      width: 100%;
-      height: 100%;
+      width: var(--tls-dialog-close-size);
+      height: var(--tls-dialog-close-size);
     }
   }
 
   &__header {
-    padding: var(--tls-dialog-padding) var(--tls-dialog-padding) 0;
+    // The close button is absolutely positioned over this corner, so the
+    // header reserves its inset plus its width plus a gutter, keeping a long
+    // title clear of it.
+    padding: var(--tls-dialog-padding)
+      calc(
+        var(--tls-dialog-close-padding) + var(--tls-dialog-close-button-size) +
+          var(--spacing-2)
+      )
+      0 var(--tls-dialog-padding);
+
+    display: block;
   }
 
   &__title {
+    display: block;
+
     font-size: var(--font-title-large-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--font-title-large-line-height);
@@ -69,8 +99,16 @@
   }
 
   &__body {
-    flex: 1;
+    // `min-height: 0` lets the body shrink below its content so `overflow-y`
+    // actually engages; without it a flex item floors at its content height
+    // and the dialog grows past the viewport instead of scrolling.
+    min-height: 0;
+
     padding: var(--spacing-4) var(--tls-dialog-padding);
+
+    display: block;
+    flex: 1;
+
     overflow-y: auto;
   }
 
@@ -79,7 +117,22 @@
 
     display: flex;
     align-items: center;
-    justify-content: flex-end;
     gap: var(--spacing-3);
+
+    &--start {
+      justify-content: flex-start;
+    }
+
+    &--center {
+      justify-content: center;
+    }
+
+    &--end {
+      justify-content: flex-end;
+    }
+
+    &--space-between {
+      justify-content: space-between;
+    }
   }
 }

package/themes/thalassic/components/index.scss

@@ -44,6 +44,7 @@
 @forward 'radio-button';
 @forward 'rich-text-editor';
 @forward 'skeleton';
+@forward 'slider';
 @forward 'splitter';
 @forward 'table';
 @forward 'toggle-button';

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

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

package/themes/thalassic/components/slider/_slider-color.scss

@@ -0,0 +1,50 @@
+.tls-slider {
+  &.tls-slider--primary {
+    --tls-slider-fill-color: var(--color-primary);
+    --tls-slider-thumb-color: var(--color-primary);
+    --tls-slider-tooltip-color: var(--color-primary);
+    --tls-slider-tooltip-on-color: var(--color-on-primary);
+  }
+
+  &.tls-slider--secondary {
+    --tls-slider-fill-color: var(--color-secondary);
+    --tls-slider-thumb-color: var(--color-secondary);
+    --tls-slider-tooltip-color: var(--color-secondary);
+    --tls-slider-tooltip-on-color: var(--color-on-secondary);
+  }
+
+  &.tls-slider--tertiary {
+    --tls-slider-fill-color: var(--color-tertiary);
+    --tls-slider-thumb-color: var(--color-tertiary);
+    --tls-slider-tooltip-color: var(--color-tertiary);
+    --tls-slider-tooltip-on-color: var(--color-on-tertiary);
+  }
+
+  &.tls-slider--success {
+    --tls-slider-fill-color: var(--color-success);
+    --tls-slider-thumb-color: var(--color-success);
+    --tls-slider-tooltip-color: var(--color-success);
+    --tls-slider-tooltip-on-color: var(--color-on-success);
+  }
+
+  &.tls-slider--info {
+    --tls-slider-fill-color: var(--color-info);
+    --tls-slider-thumb-color: var(--color-info);
+    --tls-slider-tooltip-color: var(--color-info);
+    --tls-slider-tooltip-on-color: var(--color-on-info);
+  }
+
+  &.tls-slider--warning {
+    --tls-slider-fill-color: var(--color-warning);
+    --tls-slider-thumb-color: var(--color-warning);
+    --tls-slider-tooltip-color: var(--color-warning);
+    --tls-slider-tooltip-on-color: var(--color-on-warning);
+  }
+
+  &.tls-slider--danger {
+    --tls-slider-fill-color: var(--color-danger);
+    --tls-slider-thumb-color: var(--color-danger);
+    --tls-slider-tooltip-color: var(--color-danger);
+    --tls-slider-tooltip-on-color: var(--color-on-danger);
+  }
+}

package/themes/thalassic/components/slider/_slider-size.scss

@@ -0,0 +1,16 @@
+.tls-slider {
+  &.tls-slider--sm {
+    --tls-slider-track-height: 3px;
+    --tls-slider-thumb-size: 12px;
+  }
+
+  &.tls-slider--md {
+    --tls-slider-track-height: 4px;
+    --tls-slider-thumb-size: 16px;
+  }
+
+  &.tls-slider--lg {
+    --tls-slider-track-height: 6px;
+    --tls-slider-thumb-size: 20px;
+  }
+}

package/themes/thalassic/components/slider/_slider.scss

@@ -0,0 +1,216 @@
+@use '../../mixins' as mixins;
+
+.tls-slider {
+  --tls-slider-track-height: 4px;
+  --tls-slider-thumb-size: 16px;
+  --tls-slider-thumb-border-width: 2px;
+  --tls-slider-thumb-active-scale: 1.25;
+
+  // Bound by the component as the filled share of the track, unitless 0–1.
+  --tls-slider-fill: 0;
+  --tls-slider-fill-direction: to right;
+
+  // The thumb's centre travels only across `track − thumb`, inset by half a thumb
+  // at each end, so the fill has to stop on that travel line rather than at a raw
+  // share of the track — otherwise the colour edge drifts off the thumb by up to
+  // half a thumb width toward the extremes. The value bubble rides the same line.
+  --tls-slider-fill-position: calc(
+    var(--tls-slider-fill) * (100% - var(--tls-slider-thumb-size)) +
+      (var(--tls-slider-thumb-size) / 2)
+  );
+
+  --tls-slider-track-color: var(--color-surface-variant);
+  --tls-slider-fill-color: var(--color-primary);
+  --tls-slider-thumb-color: var(--color-primary);
+  --tls-slider-thumb-border-color: var(--color-surface);
+  --tls-slider-tooltip-color: var(--color-primary);
+  --tls-slider-tooltip-on-color: var(--color-on-primary);
+  --tls-slider-tooltip-offset: var(--spacing-2);
+  // Centers the bubble on the thumb; RTL anchors from the opposite edge.
+  --tls-slider-tooltip-translate: -50%;
+
+  // The filled portion is painted as a hard-stop gradient on the track itself,
+  // so no extra element is needed and the fill never lags the native thumb.
+  --tls-slider-track-image: linear-gradient(
+    var(--tls-slider-fill-direction),
+    var(--tls-slider-fill-color) var(--tls-slider-fill-position),
+    var(--tls-slider-track-color) var(--tls-slider-fill-position)
+  );
+
+  .tls-slider-input {
+    // Positioning context for the touch-target expansion below.
+    position: relative;
+
+    // The input box is the thumb's height; the track is centered inside it.
+    height: var(--tls-slider-thumb-size);
+
+    margin: 0;
+
+    appearance: none;
+
+    background-color: transparent;
+
+    cursor: pointer;
+
+    // Grows the grabbable band vertically to the accessible minimum without
+    // thickening the track. Taps in the expansion still reach the input, so the
+    // value follows the finger from anywhere in the band.
+    @include mixins.touch-target(var(--tls-slider-thumb-size));
+
+    // The ring belongs on the thumb, not the full-width input box.
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible::-webkit-slider-thumb {
+      @include mixins.focus-ring;
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      @include mixins.focus-ring;
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: var(--tls-slider-track-height);
+
+      border-radius: var(--radius-sm);
+
+      background-image: var(--tls-slider-track-image);
+    }
+
+    &::-moz-range-track {
+      height: var(--tls-slider-track-height);
+
+      border-radius: var(--radius-sm);
+
+      background-image: var(--tls-slider-track-image);
+    }
+
+    &::-webkit-slider-thumb {
+      width: var(--tls-slider-thumb-size);
+      height: var(--tls-slider-thumb-size);
+
+      // WebKit lays the thumb out from the track's top edge, so it has to be
+      // pulled back up by half their size difference to sit centered on it.
+      margin-block-start: calc(
+        (var(--tls-slider-track-height) - var(--tls-slider-thumb-size)) / 2
+      );
+
+      appearance: none;
+
+      border: var(--tls-slider-thumb-border-width) solid var(--tls-slider-thumb-border-color);
+      border-radius: 50%;
+
+      background-color: var(--tls-slider-thumb-color);
+      box-shadow: var(--shadow-xs);
+
+      cursor: inherit;
+
+      @include mixins.motion {
+        transition: transform var(--motion-fast) var(--motion-ease-spring);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: var(--tls-slider-thumb-size);
+      height: var(--tls-slider-thumb-size);
+
+      box-sizing: border-box;
+
+      border: var(--tls-slider-thumb-border-width) solid var(--tls-slider-thumb-border-color);
+      border-radius: 50%;
+
+      background-color: var(--tls-slider-thumb-color);
+      box-shadow: var(--shadow-xs);
+
+      cursor: inherit;
+
+      @include mixins.motion {
+        transition: transform var(--motion-fast) var(--motion-ease-spring);
+      }
+    }
+  }
+
+  // A bare label rather than the `tls-tooltip` overlay: it tracks the thumb
+  // continuously during a drag, which an anchored overlay would lag behind.
+  .tls-slider-tooltip {
+    position: absolute;
+    inset-inline-start: var(--tls-slider-fill-position);
+    inset-block-end: calc(100% + var(--tls-slider-tooltip-offset));
+
+    padding: var(--spacing-1) var(--spacing-2);
+
+    border-radius: var(--radius-sm);
+
+    background-color: var(--tls-slider-tooltip-color);
+
+    font-size: var(--font-label-small-size);
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--tls-slider-tooltip-on-color);
+
+    opacity: 0;
+    // Never intercepts a drag that starts on the thumb underneath it.
+    pointer-events: none;
+    transform: translateX(var(--tls-slider-tooltip-translate)) scale(0.9);
+
+    @include mixins.motion {
+      transition:
+        opacity var(--motion-fast) var(--motion-ease-out),
+        transform var(--motion-fast) var(--motion-ease-spring);
+    }
+  }
+
+  &:hover .tls-slider-tooltip,
+  &:active .tls-slider-tooltip,
+  &:focus-within .tls-slider-tooltip {
+    opacity: 1;
+    transform: translateX(var(--tls-slider-tooltip-translate)) scale(1);
+  }
+
+  &:not(.tls-slider--disabled) .tls-slider-input:hover::-webkit-slider-thumb {
+    box-shadow: var(--shadow-sm);
+  }
+
+  &:not(.tls-slider--disabled) .tls-slider-input:hover::-moz-range-thumb {
+    box-shadow: var(--shadow-sm);
+  }
+
+  // Grows the thumb under the finger/cursor while the value is being dragged.
+  // The scale itself is ungated so the state still reads at every motion level;
+  // only the easing into it is (see the thumb rules above).
+  &:not(.tls-slider--disabled):not(.tls-slider--readonly)
+    .tls-slider-input:active::-webkit-slider-thumb {
+    transform: scale(var(--tls-slider-thumb-active-scale));
+  }
+
+  &:not(.tls-slider--disabled):not(.tls-slider--readonly)
+    .tls-slider-input:active::-moz-range-thumb {
+    transform: scale(var(--tls-slider-thumb-active-scale));
+  }
+
+  // The browser mirrors the thumb's travel under `dir="rtl"`, but a gradient
+  // direction and a centering translate are physical and have to be flipped.
+  :root[dir='rtl'] & {
+    --tls-slider-fill-direction: to left;
+    --tls-slider-tooltip-translate: 50%;
+  }
+
+  // Form control
+  &.tls-slider--disabled .tls-slider-input {
+    cursor: not-allowed;
+    filter: brightness(0.9);
+  }
+
+  &.tls-slider--readonly .tls-slider-input {
+    cursor: default;
+  }
+
+  &:not(.tls-slider--disabled).tls-slider--show-error {
+    --tls-slider-fill-color: var(--color-danger);
+    --tls-slider-thumb-color: var(--color-danger);
+    --tls-slider-tooltip-color: var(--color-danger);
+    --tls-slider-tooltip-on-color: var(--color-on-danger);
+  }
+}