@thalassic/themes 22.15.3 → 22.16.0

package/package.json

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

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