material-inspired-component-library 9.1.0 → 9.1.2

package/components/slider/README.md

@@ -35,13 +35,18 @@ This will initialize any Slider component, including those that will be added to
 A live example of the [Slider component](https://henkpb.github.io/micl/slider.html) is available to interact with.
 
 ## Variants
-Sliders come in **five different sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To set a specific size, append the appropriate postfix to the `micl-slider` CSS class name:
+Sliders come in **five different sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To set a specific size, append the appropriate size suffix to the `micl-slider` CSS class name:
 
 ```HTML
 <input type="range" class="micl-slider-s" min="1" max="10" step="1" value="6">
 ```
 
-Add a `<datalist>` element to suggest predefined values. The slider will show tick marks for these values.
+By default, the slider is displayed **horizontally**. To display the slider **vertically**, add the `micl-slider--vertical` CSS class.
+
+Adding the `disabled` boolean attribute to the `input` element causes the slider to be displayed in a disabled state.
+
+Every slider shows a **stop indicator** at the end of its track. Add a `<datalist>` element and reference it with the `list` attribute to get a discrete slider, which shows a stop indicator at each listed value. The values do not have to be evenly spaced.
+
 ```HTML
 <input type="range" class="micl-slider-l" min="0" max="100" value="25" step="25" list="markers">
 <datalist id="markers">
@@ -53,7 +58,20 @@ Add a `<datalist>` element to suggest predefined values. The slider will show ti
 </datalist>
 ```
 
-By default, the slider is displayed **horizontally**. To display the slider **vertically**, add the `micl-slider--vertical` CSS class.
+> [!NOTE]
+> The listed values are suggestions, not stopping points: browsers move the value by `step` and do not snap to the datalist. Give the slider a `step` that matches the listed values if users should only be able to select those.
+> The datalist is read once, when the slider is initialized. The script mirrors the slider's value on every `input` event. When a slider's value is changed programmatically or via a form reset, you must manually dispatch an `input` event so the track and value indicator update to reflect the new value:
+>
+> ```JavaScript
+> slider.value = 40;
+> slider.dispatchEvent(new Event("input", { bubbles: true }));
+> ```
+
+By default, a slider relies on the browser's default dimensions. You can adjust its length by setting the CSS `inline-size` property (this controls the width of a horizontal slider or the height of a vertical one).
+
+```HTML
+<input type="range" class="micl-slider-m micl-slider--vertical" style="inline-size:240px" aria-label="Volume">
+```
 
 For displaying an icon inside a medium-, large- or extra large-sized slider, wrap the icon and the slider inside a slider container:
 
@@ -64,8 +82,6 @@ For displaying an icon inside a medium-, large- or extra large-sized slider, wra
 </div>
 ```
 
-Adding the `disabled` boolean attribute to the `input` element causes the slider to be displayed in a disabled state.
-
 The Slider component is aware of the `dir` global attribute that indicates the directionality of text.
 
 ## Theming
@@ -79,7 +95,8 @@ Each slider can be themed with CSS custom properties that follow the Material De
 | `--md-comp-slider-active-track-color` | The color of the active (filled) part of the track | `--md-sys-color-primary` |
 | `--md-comp-slider-inactive-track-color` | The color of the inactive part of the track | `--md-sys-color-secondary-container` |
 | `--md-comp-slider-handle-color` | The color of the handle | `--md-sys-color-primary` |
-| `--md-comp-slider-stop-indicator-color` | The color of the tick marks (blended with the track) | `--md-sys-color-on-primary` |
+| `--md-comp-slider-active-stop-indicator-container-color` | The color of the stop indicators on the active track | `--md-sys-color-on-primary` |
+| `--md-comp-slider-inactive-stop-indicator-container-color` | The color of the stop indicators on the inactive track | `--md-sys-color-on-secondary-container` |
 | `--md-comp-slider-value-indicator-container-color` | The background color of the value indicator | `--md-sys-color-inverse-surface` |
 | `--md-comp-slider-value-indicator-label-text-color` | The text color of the value indicator | `--md-sys-color-inverse-on-surface` |
 
@@ -89,13 +106,22 @@ Each slider can be themed with CSS custom properties that follow the Material De
 <input type="range" class="micl-slider-m" style="--md-comp-slider-active-track-color:var(--md-sys-color-tertiary)">
 ```
 
+## Accessibility
+The slider is a native `<input type="range">`, so keyboard operation and the announced value come from the browser. Give every slider an accessible name, either with a `<label for>` element or with an `aria-label` attribute. The value indicator is purely visual; if the raw value is not meaningful to users, add `aria-valuetext` and keep it updated.
+
+```HTML
+<label for="volume">Volume</label>
+<input type="range" class="micl-slider-m" id="volume" min="0" max="100" value="60">
+```
+
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+This component relies on the `:has()` pseudo-class, typed `attr()` values, CSS anchor positioning, the `color-mix()` function, and `writing-mode: sideways-lr` for vertical sliders. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility) for details.
 
 > [!NOTE]
-> **Gecko browsers** The Slider component uses the `::after` pseudo-element to display the value indicator. For this to work on **Gecko** browsers, like Mozilla Firefox, wrap the Slider component inside a slider container:
+> **Gecko browsers** The value indicator of a standalone slider is drawn with the `::after` pseudo-element, which **Gecko** browsers like Mozilla Firefox do not render on `<input>` elements. To show the value indicator in these browsers, wrap the slider inside a slider container; the indicator then works in every browser and any layout:
 > ```HTML
 > <div class="micl-slider__container">
->   <input type="range" class="micl-slider-l" value="0">
+>   <input type="range" class="micl-slider-l" value="0" aria-label="Brightness">
 > </div>
 > ```
+> The container positions the value indicator from the size custom properties, so set `--md-comp-slider-track-height` and `--md-comp-slider-handle-height` on the container or an ancestor rather than on the `input` element.

package/components/slider/index.scss

@@ -37,75 +37,38 @@
 @include motion.duration('medium2');
 @include motion.duration('long2');
 
-@mixin slider-track() {
+@mixin slider-inactive() {
     block-size: var(--_track-height);
-    border-radius: var(--_track-shape);
-    background-color: inherit;
-    background-image: linear-gradient(
-        var(--_direction),
-        var(--_active-track-color) var(--_thumb-position),
-        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
-        var(--_inactive-track-color) calc(var(--_thumb-position) + 16px)
-    );
+    clip-path: var(--_inactive-clip);
+    color: var(--_inactive-stop-color);
+    background-color: var(--_inactive-track-color);
+    background-image: var(--_end-stop), var(--_stops);
 }
-@mixin slider-track-disabled() {
-    background-image: linear-gradient(
-        var(--_direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent) var(--_thumb-position),
-        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(var(--_thumb-position) + 16px)
-    );
+@mixin slider-active() {
+    block-size: var(--_track-height);
+    clip-path: var(--_active-clip);
+    color: var(--_active-stop-color);
+    background-color: var(--_active-track-color);
+    background-image: var(--_stops);
 }
 @mixin slider-thumb() {
     appearance: none;
     box-sizing: content-box;
     position: relative;
-    inline-size: 16px;
+    inline-size: calc(4px - 2 * var(--_handle-inset));
     block-size: var(--_handle-height);
     inset: 0;
     inset-block-start: calc(-1 * (var(--_handle-height) - var(--_track-height) + 8px) / 2);
     padding-block: 4px;
+    padding-inline: calc(6px + var(--_handle-inset));
     border: none;
-    border-radius: 8px;
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent var(--_thumb-space),
-        var(--_handle-color) var(--_thumb-space),
-        var(--_handle-color) 10px,
-        transparent 10px,
-        transparent 16px
-    );
+    border-radius: var(--_handle-radius);
+    outline: var(--_handle-outline);
+    background-color: var(--_handle-color);
     background-clip: content-box;
-    cursor: pointer;
+    cursor: var(--_cursor);
     z-index: 2;
 }
-@mixin slider-thumb-disabled() {
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent var(--_thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) var(--_thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) 10px,
-        transparent 10px,
-        transparent 16px
-    );
-    cursor: default;
-}
-// The 4px wide handle narrows to 2px while pressed.
-@mixin slider-thumb-active() {
-    background-image: linear-gradient(
-        var(--_direction),
-        transparent 0px,
-        transparent calc(var(--_thumb-space) + 1px),
-        var(--_handle-color) calc(var(--_thumb-space) + 1px),
-        var(--_handle-color) calc(var(--_thumb-space) + 3px),
-        transparent calc(var(--_thumb-space) + 3px),
-        transparent calc(2 * var(--_thumb-space) + 4px)
-    );
-    outline: none;
-    cursor: grabbing;
-}
 @mixin slider-tip() {
     @include typography.label-large;
     --_tip-space: 4px;
@@ -116,9 +79,7 @@
     inline-size: fit-content;
     min-inline-size: 48px;
     block-size: 40px;
-    inset: 0;
-    inset-block-start: calc(-1 * ((var(--_handle-height) - var(--_track-height)) / 2) - 40px - var(--_tip-space));
-    inset-inline-start: calc(-16px + (100% - 16px) * var(--_fraction));
+    inset: auto;
     padding-block: 12px;
     padding-inline: 16px;
     border-radius: 20px;
@@ -129,80 +90,137 @@
     z-index: 3;
     transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
 }
-@mixin slider-progress() {
-    block-size: var(--_track-height);
+@mixin slider-tip-visible() {
+    opacity: 1;
+    transition: opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate;
 }
 
-input[type=range].micl-slider-xs {
+input[type=range].micl-slider-xs,
+.micl-slider__container:has(> .micl-slider-xs) {
     --_handle-height: var(--md-comp-slider-handle-height, 44px);
     --_track-height: var(--md-comp-slider-track-height, 16px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
-input[type=range].micl-slider-s {
+input[type=range].micl-slider-s,
+.micl-slider__container:has(> .micl-slider-s) {
     --_handle-height: var(--md-comp-slider-handle-height, 44px);
     --_track-height: var(--md-comp-slider-track-height, 24px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
-input[type=range].micl-slider-m {
+input[type=range].micl-slider-m,
+.micl-slider__container:has(> .micl-slider-m) {
     --_handle-height: var(--md-comp-slider-handle-height, 52px);
     --_track-height: var(--md-comp-slider-track-height, 40px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-medium));
 }
-input[type=range].micl-slider-l {
+input[type=range].micl-slider-l,
+.micl-slider__container:has(> .micl-slider-l) {
     --_handle-height: var(--md-comp-slider-handle-height, 68px);
     --_track-height: var(--md-comp-slider-track-height, 56px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-large));
 }
-input[type=range].micl-slider-xl {
+input[type=range].micl-slider-xl,
+.micl-slider__container:has(> .micl-slider-xl) {
     --_handle-height: var(--md-comp-slider-handle-height, 108px);
     --_track-height: var(--md-comp-slider-track-height, 96px);
     --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-extra-large));
 }
 
 input[type=range][class*=micl-slider-] {
-    --_thumb-space: 6px;
-    --_direction: to right;
-    --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+    --_min: var(--micl-slider-min, attr(min type(<number>), 0));
+    --_max: var(--micl-slider-max, attr(max type(<number>), 100));
+    --_value: var(--micl-slider-value, attr(value type(<number>), calc((var(--_min) + var(--_max)) / 2)));
+    --_fraction: calc((var(--_value) - var(--_min)) / (var(--_max) - var(--_min)));
     --_thumb-position: calc(var(--_fraction) * (100% - 16px));
+    --_handle-inset: 0px;
+    --_handle-outline: none;
+    --_cursor: pointer;
     --_active-track-color: var(--md-comp-slider-active-track-color, var(--md-sys-color-primary));
     --_inactive-track-color: var(--md-comp-slider-inactive-track-color, var(--md-sys-color-secondary-container));
     --_handle-color: var(--md-comp-slider-handle-color, var(--md-sys-color-primary));
+    --_active-stop-color: var(--md-comp-slider-active-stop-indicator-container-color, var(--md-sys-color-on-primary));
+    --_inactive-stop-color: var(--md-comp-slider-inactive-stop-indicator-container-color, var(--md-sys-color-on-secondary-container));
+    --_direction: to right;
+    --_handle-radius: 8px / calc(6px - var(--_handle-inset));
+    --_kx: 1;
+    --_cx: 0px;
+    --_ky: 0;
+    --_cy: 50%;
+    --_stops: var(--micl-slider-stops, none);
+    --_stops-progress: var(--micl-slider-stops-progress, none);
+    --_end-stop: radial-gradient(
+        circle 2px at
+        calc(var(--_kx) * (100% - 8px) + var(--_cx))
+        calc(var(--_ky) * (100% - 8px) + var(--_cy)),
+        currentColor 100%,
+        transparent 0
+    );
+    --_active-fill: linear-gradient(var(--_direction), var(--_active-track-color) calc(var(--_thumb-position) - 2px), transparent 0);
+    --_corner-offset: calc(var(--_fraction) * (100% - 12px) - 4px);
+    --_corner-direction: to bottom;
+    --_corner-start: 2px 100%;
+    --_corner-end: 2px 0;
+    --_corner-image:
+        linear-gradient(var(--_corner-direction), transparent 2px, var(--_active-track-color) 0 calc(100% - 2px), transparent 0),
+        radial-gradient(circle 2px at var(--_corner-start), var(--_active-track-color) 100%, transparent 0),
+        radial-gradient(circle 2px at var(--_corner-end), var(--_active-track-color) 100%, transparent 0);
+    --_corner-size: 4px 100%, 4px 2px, 4px 2px;
+    --_corner-position: left var(--_corner-offset) center, left var(--_corner-offset) top 0, left var(--_corner-offset) bottom 0;
+    --_inactive-clip: inset(0 0 0 calc(var(--_thumb-position) + 16px) round 2px var(--_track-shape) var(--_track-shape) 2px);
+    --_active-clip: inset(0 calc(100% - var(--_thumb-position)) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));
+    --_progress-inset: calc(16px * var(--_fraction));
+    --_progress-radius: calc(2px + 16px * var(--_fraction)) 2px;
 
     appearance: none;
     position: relative;
     block-size: var(--_track-height);
     margin: 0;
     outline: none;
-    color: var(--md-sys-color-surface-container-low);
-    background-color: inherit;
+    border-radius: var(--_track-shape);
+    background-color: transparent;
+    background-image: var(--_corner-image), var(--_active-fill);
+    background-size: var(--_corner-size), auto;
+    background-position: var(--_corner-position), 0 0;
+    background-repeat: no-repeat;
     accent-color: var(--md-sys-color-primary);
 
     &::before {
-        content: attr(data-miclsliderticks);
-        box-sizing: border-box;
+        @include slider-inactive;
+
+        content: "";
         position: absolute;
-        inline-size: 100%;
-        max-inline-size: 100%;
-        block-size: var(--_track-height);
-        line-height: var(--_track-height);
-        padding: 0 4px;
         inset: 0;
-        color: var(--md-comp-slider-stop-indicator-color, var(--md-sys-color-on-primary));
-        mix-blend-mode: difference;
-        text-align: end;
-        text-wrap-mode: nowrap;
     }
-    &::after {
+    &:not(:disabled)::after {
         @include slider-tip;
+
+        inset-block-start: calc(-1 * ((var(--_handle-height) - var(--_track-height)) / 2) - 40px - var(--_tip-space));
+        inset-inline-start: calc(-16px + (100% - 16px) * var(--_fraction));
     }
-    &::-webkit-slider-container {
-        background-color: inherit;
+    &:disabled::after {
+        @include slider-active;
+
+        content: "";
+        position: absolute;
+        inset: 0;
     }
     &::-webkit-slider-runnable-track {
-        @include slider-track;
+        block-size: var(--_track-height);
+        color: var(--_active-stop-color);
+        background-color: transparent;
+        background-image: var(--_stops);
     }
     &::-moz-range-track {
-        @include slider-track;
+        @include slider-inactive;
+    }
+    &::-moz-range-progress {
+        box-sizing: border-box;
+        block-size: var(--_track-height);
+        border-inline-end: var(--_progress-inset) solid transparent;
+        color: var(--_active-stop-color);
+        background-clip: padding-box;
+        background-color: transparent;
+        background-image: var(--_stops-progress);
     }
     &::-webkit-slider-thumb {
         @include slider-thumb;
@@ -210,72 +228,92 @@ input[type=range][class*=micl-slider-] {
     &::-moz-range-thumb {
         @include slider-thumb;
     }
-    &::-moz-range-progress {
-        @include slider-progress;
-    }
     &:disabled {
+        --_active-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent);
+        --_inactive-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+        --_handle-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface));
+        --_active-stop-color: var(--md-sys-color-inverse-on-surface);
+        --_inactive-stop-color: var(--md-sys-color-on-surface);
+        --_cursor: default;
+
+        background-image: none;
+
         &::-webkit-slider-runnable-track {
-            @include slider-track-disabled;
+            background-image: none;
         }
-        &::-moz-range-track {
-            @include slider-track-disabled;
+        &::-moz-range-progress {
+            border-start-start-radius: var(--_track-shape);
+            border-end-start-radius: var(--_track-shape);
+            border-start-end-radius: var(--_progress-radius);
+            border-end-end-radius: var(--_progress-radius);
+            background-color: var(--_active-track-color);
         }
-        &::-webkit-slider-thumb {
-            @include slider-thumb-disabled;
+    }
+    &:not(:disabled) {
+        &:is(:active, :focus)::after {
+            @include slider-tip-visible;
         }
-        &::-moz-range-thumb {
-            @include slider-thumb-disabled;
+        // The 4px wide handle narrows to 2px while focused or pressed.
+        &:focus-visible {
+            --_handle-inset: 1px;
+            --_handle-outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+        }
+        &:active {
+            --_handle-inset: 1px;
+            --_handle-outline: none;
+            --_cursor: grabbing;
         }
     }
     &.micl-slider--vertical {
         --_direction: to top;
+        --_kx: 0;
+        --_cx: 50%;
+        --_ky: -1;
+        --_cy: 100%;
+        --_handle-radius: calc(6px - var(--_handle-inset)) / 8px;
+        --_corner-direction: to right;
+        --_corner-start: 100% 2px;
+        --_corner-end: 0 2px;
+        --_corner-size: 100% 4px, 2px 4px, 2px 4px;
+        --_corner-position: center bottom var(--_corner-offset), left 0 bottom var(--_corner-offset), right 0 bottom var(--_corner-offset);
+        --_inactive-clip: inset(0 0 calc(var(--_thumb-position) + 16px) 0 round var(--_track-shape) var(--_track-shape) 2px 2px);
+        --_active-clip: inset(calc(100% - var(--_thumb-position)) 0 0 0 round 2px 2px var(--_track-shape) var(--_track-shape));
+        --_progress-radius: 2px calc(2px + 16px * var(--_fraction));
 
         writing-mode: sideways-lr;
 
-        &::after {
+        &:not(:disabled)::after {
             --_tip-space: 8px;
 
             transform: rotate(90deg);
         }
     }
-    &:not(:disabled) {
-        &:active::after,
-        &:focus::after,
-        &:focus-visible::after {
-            opacity: 1;
-            transition: opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate;
-        }
-        &:focus-visible {
-            &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            }
-            &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            }
-        }
-        &:active {
-            &::-webkit-slider-thumb {
-                @include slider-thumb-active;
-            }
-            &::-moz-range-thumb {
-                @include slider-thumb-active;
-            }
-        }
+    &:dir(rtl):not(.micl-slider--vertical) {
+        --_direction: to left;
+        --_kx: -1;
+        --_cx: 100%;
+        --_corner-start: calc(100% - 2px) 100%;
+        --_corner-end: calc(100% - 2px) 0;
+        --_corner-position: right var(--_corner-offset) center, right var(--_corner-offset) top 0, right var(--_corner-offset) bottom 0;
+        --_inactive-clip: inset(0 calc(var(--_thumb-position) + 16px) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));
+        --_active-clip: inset(0 0 0 calc(100% - var(--_thumb-position)) round 2px var(--_track-shape) var(--_track-shape) 2px);
     }
 }
 
 .micl-slider__container {
+    --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+
     display: grid;
     grid-template-areas: "slider-icon";
+    position: relative;
     flex-shrink: 0;
     align-items: center;
     justify-items: flex-start;
-    background-color: inherit;
+    anchor-scope: --micl-slider;
 
     &:has(> .micl-slider-m,> .micl-slider-l,> .micl-slider-xl) {
         .micl-slider__icon {
             grid-area: slider-icon;
-            inset: 0;
             margin: 6px;
             font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
@@ -284,52 +322,43 @@ input[type=range][class*=micl-slider-] {
     }
     &> input[type=range] {
         grid-area: slider-icon;
+        anchor-name: --micl-slider;
+
+        &:not(:disabled)::after {
+            content: none;
+        }
     }
     .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
     input[type=range].micl-slider-xl + .micl-slider__icon {
         margin: 8px;
         font-size: 32px;
     }
-}
-
-// Gecko does not render generated content on <input>: the value indicator is
-// repeated on the container, which mirrors the slider variables (see index.ts).
-@supports (-moz-appearance:none) {
-    .micl-slider__container {
-        &:has(> input[type=range]) {
-            --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+    &::after {
+        @include slider-tip;
 
-            position: relative;
+        position-anchor: --micl-slider;
+        inset-block-start: calc(anchor(start) - (var(--_handle-height) - var(--_track-height)) / 2 - 40px - var(--_tip-space));
+        inset-inline-start: calc(anchor(start) - 16px + (anchor-size(inline) - 16px) * var(--_fraction));
+    }
+    &:has(> input[type=range]:not(:disabled):is(:active, :focus))::after {
+        @include slider-tip-visible;
+    }
+    &:has(> .micl-slider--vertical) {
+        writing-mode: sideways-lr;
 
-            &::after {
-                @include slider-tip;
-            }
-        }
-        &:has(> input[type=range]:not(:disabled):active)::after,
-        &:has(> input[type=range]:not(:disabled):focus)::after,
-        &:has(> input[type=range]:not(:disabled):focus-visible)::after {
-            opacity: 1;
-        }
-        &:has(> input[type=range].micl-slider--vertical) {
-            --_direction: to top;
-            writing-mode: sideways-lr;
+        &::after {
+            --_tip-space: 8px;
 
-            &::after {
-                --_tip-space: 8px;
-                transform: rotate(90deg);
-            }
+            transform: rotate(90deg);
         }
     }
 }
 
 input[type=range].micl-slider--vertical:dir(rtl),
-.micl-slider__container:dir(rtl):has(> input[type=range].micl-slider--vertical) {
+.micl-slider__container:dir(rtl):has(> .micl-slider--vertical) {
     writing-mode: sideways-rl;
-
-    &::after {
-        transform: rotate(-90deg);
-    }
 }
-input[type=range][class*=micl-slider-]:dir(rtl):not(.micl-slider--vertical) {
-    --_direction: to left;
+input[type=range].micl-slider--vertical:dir(rtl):not(:disabled)::after,
+.micl-slider__container:dir(rtl):has(> .micl-slider--vertical)::after {
+    transform: rotate(-90deg);
 }