@mcp-b/web-components 0.2.0

package/dist/slider-B90Il7x3.js

@@ -0,0 +1,1744 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./tooltip-DbyoPFNe.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+import { DraggableElement } from "@mcp-b/wc-support/utilities/drag";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/slider/slider.styles.ts
+var slider_styles_default = css`
+  :host {
+    --track-size: 0.5em;
+    --thumb-width: 1.4em;
+    --thumb-height: 1.4em;
+    --marker-width: 0.1875em;
+    --marker-height: 0.1875em;
+  }
+
+  :host([orientation="vertical"]) {
+    width: auto;
+  }
+
+  #label:has(~ .vertical) {
+    display: block;
+    order: 2;
+    max-width: none;
+    text-align: center;
+  }
+
+  #description:has(~ .vertical) {
+    order: 3;
+    text-align: center;
+  }
+
+  #slider {
+    touch-action: none;
+
+    /* Orientation */
+    &.horizontal {
+      margin-block-start: 0.5em;
+    }
+
+    &.vertical {
+      margin-block-end: 0.5em;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible:not(.disabled) #thumb,
+    &:focus-visible:not(.disabled) #thumb-min,
+    &:focus-visible:not(.disabled) #thumb-max {
+      outline: var(--sigvelo-focus-ring);
+      /* intentionally no offset due to border */
+    }
+  }
+
+  #track {
+    position: relative;
+    border-radius: var(--sigvelo-radius-full);
+    background: var(--sigvelo-color-neutral-bg-muted);
+    isolation: isolate;
+  }
+
+  /* Orientation */
+  .horizontal #track {
+    height: var(--track-size);
+  }
+
+  .vertical #track {
+    order: 1;
+    width: var(--track-size);
+    height: 200px;
+  }
+
+  /* Disabled */
+  .disabled #track {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Indicator */
+  #indicator {
+    position: absolute;
+    border-radius: inherit;
+    background-color: var(--sigvelo-color-primary-bg);
+
+    &:dir(ltr) {
+      right: calc(100% - max(var(--start), var(--end)));
+      left: min(var(--start), var(--end));
+    }
+
+    &:dir(rtl) {
+      right: min(var(--start), var(--end));
+      left: calc(100% - max(var(--start), var(--end)));
+    }
+  }
+
+  .horizontal #indicator {
+    top: 0;
+    height: 100%;
+  }
+
+  .vertical #indicator {
+    top: calc(100% - var(--end));
+    bottom: var(--start);
+    left: 0;
+    width: 100%;
+  }
+
+  /* Thumbs */
+  #thumb,
+  #thumb-min,
+  #thumb-max {
+    z-index: 3;
+    position: absolute;
+    width: var(--thumb-width);
+    height: var(--thumb-height);
+    border: solid 0.125em var(--sigvelo-color-canvas);
+    border-radius: var(--sigvelo-radius-circle);
+    background-color: var(--sigvelo-color-primary-bg);
+    cursor: pointer;
+  }
+
+  .disabled #thumb,
+  .disabled #thumb-min,
+  .disabled #thumb-max {
+    cursor: inherit;
+  }
+
+  .horizontal #thumb,
+  .horizontal #thumb-min,
+  .horizontal #thumb-max {
+    top: calc(50% - var(--thumb-height) / 2);
+
+    &:dir(ltr) {
+      right: auto;
+      left: calc(var(--position) - var(--thumb-width) / 2);
+    }
+
+    &:dir(rtl) {
+      right: calc(var(--position) - var(--thumb-width) / 2);
+      left: auto;
+    }
+  }
+
+  .vertical #thumb,
+  .vertical #thumb-min,
+  .vertical #thumb-max {
+    bottom: calc(var(--position) - var(--thumb-height) / 2);
+    left: calc(50% - var(--thumb-width) / 2);
+  }
+
+  /* Range-specific thumb styles */
+  #thumb-min:focus-visible,
+  #thumb-max:focus-visible {
+    z-index: 4; /* Ensure focused thumb appears on top */
+    outline: var(--sigvelo-focus-ring);
+    /* intentionally no offset due to border */
+  }
+
+  /* Markers */
+  #markers {
+    pointer-events: none;
+  }
+
+  .marker {
+    z-index: 2;
+    position: absolute;
+    width: var(--marker-width);
+    height: var(--marker-height);
+    border-radius: var(--sigvelo-radius-circle);
+    background-color: light-dark(white, black);
+  }
+
+  .marker:first-of-type,
+  .marker:last-of-type {
+    display: none;
+  }
+
+  .horizontal .marker {
+    top: calc(50% - var(--marker-height) / 2);
+    left: calc(var(--position) - var(--marker-width) / 2);
+  }
+
+  .vertical .marker {
+    top: calc(var(--position) - var(--marker-height) / 2);
+    left: calc(50% - var(--marker-width) / 2);
+  }
+
+  /* Marker labels */
+  #references {
+    position: relative;
+
+    slot {
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+    }
+
+    ::slotted(*) {
+      color: var(--sigvelo-color-text-muted);
+      font-size: 0.875em;
+      line-height: 1;
+    }
+  }
+
+  .horizontal {
+    #references {
+      margin-block-start: 0.5em;
+    }
+  }
+
+  .vertical {
+    display: flex;
+    margin-inline: auto;
+
+    #track {
+      order: 1;
+    }
+
+    #references {
+      order: 2;
+      width: min-content;
+      margin-inline-start: 0.75em;
+
+      slot {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .vertical #references slot {
+    flex-direction: column;
+  }
+`;
+//#endregion
+//#region src/components/slider/slider.ts
+/**
+* <sigvelo-slider>
+*
+* @summary Allows users to select numeric values within a given range by moving a thumb along a track.
+* @tag sigvelo-slider
+* @documentation https://design-system.sigvelo.com/docs/components/slider
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-tooltip
+*
+* @slot label - The slider's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The slider's description. For plain-text descriptions, you can use the `description` attribute
+*  instead.
+* @slot reference - One or more reference labels to show visually below the slider.
+*
+* @event sigvelo-blur - Emitted when the slider loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the slider's value.
+* @event sigvelo-focus - Emitted when the slider receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the slider receives input.
+*
+* @csspart label - The element that contains the sliders's label.
+* @csspart description - The element that contains the slider's description.
+* @csspart slider - The focusable element with `role="slider"`. Contains the track and reference slot.
+* @csspart track - The slider's track.
+* @csspart indicator - The colored indicator that shows from the start of the slider to the current value.
+* @csspart markers - The container that holds all the markers when `with-markers` is used.
+* @csspart marker - The individual markers that are shown when `with-markers` is used.
+* @csspart references - The container that holds references that get slotted in.
+* @csspart thumb - The slider's thumb.
+* @csspart thumb-min - The min value thumb in a range slider.
+* @csspart thumb-max - The max value thumb in a range slider.
+* @csspart tooltip - The tooltip, a `<sigvelo-tooltip>` element.
+* @csspart tooltip__tooltip - The tooltip's `tooltip` part.
+* @csspart tooltip__content - The tooltip's `content` part.
+* @csspart tooltip__arrow - The tooltip's `arrow` part.
+*
+* @cssstate disabled - Applied when the slider is disabled.
+* @cssstate dragging - Applied when the slider is being dragged.
+* @cssstate focused - Applied when the slider has focus.
+* @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it.
+*
+* @cssproperty [--track-size=0.75em] - The height or width of the slider's track.
+* @cssproperty [--marker-width=0.1875em] - The width of each individual marker.
+* @cssproperty [--marker-height=0.1875em] - The height of each individual marker.
+* @cssproperty [--thumb-width=1.25em] - The width of the thumb.
+* @cssproperty [--thumb-height=1.25em] - The height of the thumb.
+*
+* @example Default
+* ```html
+* <sigvelo-slider
+*   label="Number of cats"
+*   description="Limit six per household"
+*   name="value"
+*   value="3"
+*   min="0"
+*   max="6"
+*   with-markers
+*   with-tooltip
+* >
+*   <span slot="reference">Less</span>
+*   <span slot="reference">More</span>
+* </sigvelo-slider>
+* ```
+*
+* @example Showing tooltips
+* Add the `with-tooltip` attribute to show a tooltip when the slider has focus or is dragged.
+*
+* ```html
+* <sigvelo-slider
+*   label="Quality"
+*   name="quality"
+*   min="0"
+*   max="100"
+*   value="50"
+*   with-tooltip
+* ></sigvelo-slider>
+* ```
+*
+* @example Setting min, max, and step
+* Use the `min` and `max` attributes to set a minimum and maximum value for the slider. Use the `step` attribute to change the granularity the value must adhere to.
+*
+* ```html
+* <sigvelo-slider
+*   label="Between zero and one"
+*   min="0"
+*   max="1"
+*   step="0.1"
+*   value="0.5"
+*   with-tooltip
+* ></sigvelo-slider>
+* ```
+*
+* @example Showing markers
+* Add the `with-markers` attribute to show visual markers at each step. Markers work best with sliders that have shorter ranges.
+*
+* ```html
+* <sigvelo-slider
+*   label="Size"
+*   name="size"
+*   min="0"
+*   max="8"
+*   value="4"
+*   with-markers
+* ></sigvelo-slider>
+* ```
+*
+* @example Adding references
+* Use the `reference` slot to add visual references below the slider. By default, references are positioned with `space-between`, making it easy to align them with starting, ending, and center markers.
+*
+* ```html
+* <sigvelo-slider
+*   label="Speed"
+*   name="speed"
+*   min="1"
+*   max="5"
+*   value="3"
+*   with-markers
+* >
+*   <span slot="reference">Slow</span>
+*   <span slot="reference">Medium</span>
+*   <span slot="reference">Fast</span>
+* </sigvelo-slider>
+* ```
+*
+* **Note:** If you want to show a reference next to a specific marker, you can add `position: absolute` to it and set the `left`, `right`, `top`, or `bottom` property to a percentage that corresponds to the marker's position.
+*
+* @example Formatting the value
+* You can format the value that gets shown in tooltips and/or announced by screen readers with the `valueFormatter` property. Using JavaScript, set the property to a function that accepts a numeric value and returns a string. The `Intl.FormatNumber API` can be really useful here.
+*
+* ```html
+* <!-- Percent -->
+* <sigvelo-slider
+*   id="slider__percent"
+*   label="Percentage"
+*   name="percentage"
+*   value="0.5"
+*   min="0"
+*   max="1"
+*   step=".01"
+*   with-tooltip
+* ></sigvelo-slider><br>
+*
+* <script>
+*   const slider = document.getElementById('slider__percent');
+*   const formatter = new Intl.NumberFormat('en-US', { style: 'percent' });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+* <\/script>
+*
+* <!-- Duration -->
+* <sigvelo-slider
+*   id="slider__duration"
+*   label="Duration"
+*   name="duration"
+*   value="12"
+*   min="0"
+*   max="24"
+*   with-tooltip
+* ></sigvelo-slider><br>
+*
+* <script>
+*   const slider = document.getElementById('slider__duration');
+*   const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'hour', unitDisplay: 'long' });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+* <\/script>
+*
+* <!-- Angle -->
+* <sigvelo-slider
+*   id="slider__angle"
+*   label="Angle"
+*   name="angle"
+*   min="0"
+*   max="360"
+*   value="180"
+*   with-tooltip
+* ></sigvelo-slider><br>
+*
+* <script>
+*   const slider = document.getElementById('slider__angle');
+*   const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'degree', unitDisplay: 'narrow' });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+* <\/script>
+*
+* <!-- Currency -->
+* <sigvelo-slider
+*   id="slider__currency"
+*   label="Currency"
+*   name="currency"
+*   min="0"
+*   max="100"
+*   value="50"
+*   with-tooltip
+* ></sigvelo-slider>
+*
+* <script>
+*   const slider = document.getElementById('slider__currency');
+*   const formatter = new Intl.NumberFormat('en-US', {
+*     style: 'currency',
+*     currency: 'USD',
+*     currencyDisplay: 'symbol',
+*     maximumFractionDigits: 0
+*   });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+* <\/script>
+* ```
+*
+* @example Range selection
+* Set `value` to a two-number array to create a slider with two thumbs for selecting a range of values.
+*
+* ```html
+* <sigvelo-slider
+*   label="Price Range"
+*   description="Select minimum and maximum price"
+*   name="price"
+*   min="0"
+*   max="100"
+*   with-tooltip
+*   id="slider__range"
+* >
+*   <span slot="reference">$0</span>
+*   <span slot="reference">$50</span>
+*   <span slot="reference">$100</span>
+* </sigvelo-slider>
+*
+* <script>
+*   const slider = document.getElementById('slider__range');
+*   const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     slider.value = [20, 80];
+*     slider.valueFormatter = value => formatter.format(value);
+*   });
+* <\/script>
+* ```
+*
+* For range sliders, the two entries in `value` represent the current thumb positions. When the form is submitted, both values will be included as separate entries with the same name.
+*
+* ```ts
+* const slider = document.querySelector('sigvelo-slider');
+*
+* // Get the current values
+* console.log(`Min value: ${slider.value[0]}, Max value: ${slider.value[1]}`);
+*
+* // Set the values programmatically
+* slider.value = [30, 70];
+* ```
+*
+* @example Changing the orientation
+* To make a vertical slider, set the `orientation` attribute to `vertical`. Vertical sliders are centered and will span 100% of the available space by default.
+*
+* ```html
+* <div style="display: flex; gap: 1rem;">
+*   <sigvelo-slider
+*     orientation="vertical"
+*     label="Volume"
+*     name="volume"
+*     value="65"
+*     style="width: 80px"
+*   ></sigvelo-slider>
+*
+*   <sigvelo-slider
+*     orientation="vertical"
+*     label="Bass"
+*     name="bass"
+*     value="50"
+*     style="width: 80px"
+*   ></sigvelo-slider>
+*
+*   <sigvelo-slider
+*     orientation="vertical"
+*     label="Treble"
+*     name="treble"
+*     value="40"
+*     style="width: 80px"
+*   ></sigvelo-slider>
+* </div>
+* ```
+*
+* Range sliders can also be vertical.
+*
+* ```html
+* <div style="height: 300px; display: flex; align-items: center; gap: 2rem;">
+*   <sigvelo-slider
+*     label="Temperature Range"
+*     orientation="vertical"
+*     min="0"
+*     max="100"
+*     with-tooltip
+*     tooltip-placement="right"
+*     id="slider__vertical-range"
+*   >
+*   </sigvelo-slider>
+* </div>
+*
+* <script>
+*   const slider = document.getElementById('slider__vertical-range');
+*   slider.value = [30, 70];
+*   slider.valueFormatter = value => {
+*     return new Intl.NumberFormat('en', {
+*       style: 'unit',
+*       unit: 'fahrenheit',
+*       unitDisplay: 'short',
+*       minimumFractionDigits: 0,
+*       maximumFractionDigits: 1
+*     }).format(value);
+*   };
+* <\/script>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the slider's size.
+*
+* ```html
+* <sigvelo-slider size="xs" value="50" label="Extra small"></sigvelo-slider><br>
+* <sigvelo-slider size="sm" value="50" label="Small"></sigvelo-slider><br>
+* <sigvelo-slider size="md" value="50" label="Medium"></sigvelo-slider><br>
+* <sigvelo-slider size="lg" value="50" label="Large"></sigvelo-slider><br>
+* <sigvelo-slider size="xl" value="50" label="Extra large"></sigvelo-slider>
+* ```
+*
+* @example Changing the indicator's offset
+* To make the selection more obvious, a filled indicator representing the current value is drawn from the minimum value of the slider. To change the offset from which the indicator is drawn, set the `indicator-offset` attribute to another value along the slider.
+*
+* ```html
+* <sigvelo-slider
+*   label="Cat playfulness"
+*   description="Energy level during playtime"
+*   name="value"
+*   value="0"
+*   min="-5"
+*   max="5"
+*   indicator-offset="0"
+*   with-markers
+*   with-tooltip
+* >
+*   <span slot="reference">Lazy</span>
+*   <span slot="reference">Zoomies</span>
+* </sigvelo-slider>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the slider.
+*
+* ```html
+* <sigvelo-slider label="Disabled" value="50" disabled></sigvelo-slider>
+* ```
+*
+* @example Using custom validation
+* Sliders don't have built-in validation attributes like many other form controls. However, you can Use the `setCustomValidity()` method to make the slider invalid and show a custom error message on submit. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="slider__custom-validation">
+*   <sigvelo-slider
+*     name="value"
+*     label="Select a value"
+*     description="This field will be invalid until custom validation is removed"
+*   ></sigvelo-slider>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('slider__custom-validation');
+*   const slider = form.querySelector('sigvelo-slider');
+*
+*   slider.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid sliders using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="slider__validation-pseudo">
+*   <sigvelo-slider
+*     name="value"
+*     label="Select a value"
+*     min="0"
+*     max="5"
+*     value="0"
+*     with-markers
+*     with-tooltip
+*   ></sigvelo-slider>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .slider__validation-pseudo {
+*     sigvelo-slider:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: 1rem;
+*     }
+*
+*     sigvelo-slider:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: 1rem;
+*     }
+*   }
+* </style>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.querySelector('.slider__validation-pseudo');
+*   const slider = form.querySelector('sigvelo-slider');
+*   const validationMessage = 'Select a number greater than zero';
+*
+*   slider.setCustomValidity(validationMessage);
+*
+*   async function updateValidity() {
+*     await slider.updateComplete;
+*     slider.setCustomValidity(slider.value > 0 ? '' : validationMessage);
+*   }
+*
+*   slider.addEventListener('sigvelo-input', updateValidity);
+*   form.addEventListener('reset', updateValidity);
+* <\/script>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="slider__validation-custom">
+*   <sigvelo-slider
+*     name="value"
+*     label="Select a value"
+*     min="0"
+*     max="5"
+*     value="0"
+*     with-markers
+*     with-tooltip
+*   ></sigvelo-slider>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .slider__validation-custom {
+*     sigvelo-slider:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: 1rem;
+*     }
+*
+*     sigvelo-slider:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: 1rem;
+*     }
+*   }
+* </style>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.querySelector('.slider__validation-custom');
+*   const slider = form.querySelector('sigvelo-slider');
+*   const validationMessage = 'Select a number greater than zero';
+*
+*   slider.setCustomValidity(validationMessage);
+*
+*   async function updateValidity() {
+*     await slider.updateComplete;
+*     slider.setCustomValidity(slider.value > 0 ? '' : validationMessage);
+*   }
+*
+*   slider.addEventListener('sigvelo-input', updateValidity);
+*   form.addEventListener('reset', updateValidity);
+* <\/script>
+* ```
+*
+* @example Styling sliders
+* Sliders come with a simple, minimal appearance. Feel free to customize them with your own styles.
+*
+* ```html
+* <div style="display: flex; gap: 2rem;">
+*   <div class="slider__touch">
+*     <sigvelo-slider
+*       label="Brightness"
+*       orientation="vertical"
+*       name="value"
+*       min="0"
+*       max="1"
+*       step=".01"
+*       value="0.6"
+*     >
+*     </sigvelo-slider>
+*     <sigvelo-icon name="sun"></sigvelo-icon>
+*   </div>
+*
+*   <div class="slider__touch">
+*     <sigvelo-slider
+*       label="Volume"
+*       orientation="vertical"
+*       name="value"
+*       min="0"
+*       max="1"
+*       step=".01"
+*       value="0.4"
+*     ></sigvelo-slider>
+*     <sigvelo-icon name="volume"></sigvelo-icon>
+*   </div>
+* </div>
+*
+* <style>
+*   .slider__touch {
+*     position: relative;
+*     max-width: fit-content;
+*
+*     sigvelo-slider {
+*       --track-size: 4rem;
+*       max-width: fit-content;
+*
+*       &::part(track) {
+*         background-color: var(--sigvelo-color-neutral-bg-subtle);
+*         box-shadow: inset 0 1px 2px color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+*         cursor: pointer;
+*         overflow: hidden;
+*       }
+*
+*       &::part(indicator) {
+*         background-color: #22c55e;
+*         border-radius: 0;
+*       }
+*
+*       &::part(thumb) {
+*         opacity: 0;
+*       }
+*
+*       &::part(tooltip__arrow) {
+*         display: none;
+*       }
+*
+*       &::part(tooltip__content) {
+*         background-color: var(--sigvelo-color-neutral-bg-stronger);
+*         border: none;
+*         color: var(--sigvelo-color-primary-text-on-strong);
+*       }
+*
+*       &::part(slider):focus-visible {
+*         outline: var(--sigvelo-focus-ring);
+*         outline-offset: var(--sigvelo-focus-offset);
+*       }
+*     }
+*
+*     sigvelo-icon {
+*       position: absolute;
+*       bottom: 3.5rem;
+*       left: calc(50% - 1rem);
+*       font-size: 2rem;
+*       color: light-dark(black, white);
+*       pointer-events: none;
+*     }
+*   }
+* </style>
+* ```
+*
+* ```html
+* <sigvelo-slider
+*   id="slider__color"
+*   label="Color"
+*   name="color"
+*   min="0"
+*   max="359"
+*   with-tooltip
+*   style="--hue: hsl(0deg 100% 50%);"
+* ></sigvelo-slider>
+*
+* <br>
+*
+* <sigvelo-slider
+*   id="slider__opacity"
+*   label="Opacity"
+*   name="opacity"
+*   min="0"
+*   max="1"
+*   step=".01"
+*   with-tooltip
+*   style="--opacity: 0%;"
+* ></sigvelo-slider>
+*
+* <style>
+*   #slider__color,
+*   #slider__opacity {
+*     --track-size: 1.25em;
+*     --thumb-width: 1.5em;
+*     --thumb-height: 1.5em;
+*
+*     &::part(track) {
+*       box-shadow: inset 0 0 0 0.0625em color-mix(in oklab, black, transparent 90%);
+*       border-radius: var(--sigvelo-radius-md);
+*     }
+*
+*     &::part(thumb) {
+*       border: solid 0.0625em rgb(0 0 0 / 33%);
+*       border-radius: var(--sigvelo-radius-circle);
+*       transition: 100ms scale ease;
+*     }
+*
+*     &:state(dragging)::part(thumb),
+*     &::part(thumb):focus-visible {
+*       scale: 1.25;
+*     }
+*
+*     &::part(thumb)::after {
+*       content: '';
+*       position: absolute;
+*       top: 0;
+*       left: 0;
+*       width: 100%;
+*       height: 100%;
+*       border-radius: inherit;
+*       border: solid 0.125em white;
+*       box-shadow: inset 0 0 0 0.0625em rgb(0 0 0 / 33%);
+*     }
+*   }
+*
+*   #slider__color {
+*     &::part(track) {
+*       background-image:
+*         linear-gradient(
+*           to right,
+*           rgb(255, 0, 0) 0%,
+*           rgb(255, 255, 0) 17%,
+*           rgb(0, 255, 0) 33%,
+*           rgb(0, 255, 255) 50%,
+*           rgb(0, 0, 255) 67%,
+*           rgb(255, 0, 255) 83%,
+*           rgb(255, 0, 0) 100%
+*         );
+*     }
+*
+*     &::part(indicator) {
+*       display: none;
+*     }
+*
+*     &::part(thumb) {
+*       background-color: var(--hue);
+*     }
+*   }
+*
+*   #slider__opacity {
+*     &::part(track) {
+*       background-color: transparent;
+*       background-size: 0.5em 0.5em;
+*       background-position:
+*         0 0,
+*         0 0,
+*         -0.25em -0.25em,
+*         0.25em 0.25em;
+*       background-image: linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%),
+*         linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+*         linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+*         linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%);
+*     }
+*
+*     &::part(indicator) {
+*       width: 100% !important;
+*       background-color: transparent;
+*       background-image: linear-gradient(to right, #0000 0%, #000f 100%);
+*     }
+*
+*     &::part(thumb) {
+*       background-color: color-mix(in oklab, white, black var(--opacity));
+*     }
+*   }
+* </style>
+*
+* <script>
+*   const colorSlider = document.getElementById('slider__color');
+*   const opacitySlider = document.getElementById('slider__opacity');
+*   const degreeFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'degree', unitDisplay: 'narrow' });
+*   const percentFormatter = new Intl.NumberFormat('en-US', { style: 'percent' });
+*
+*   customElements.whenDefined('sigvelo-slider').then(() => {
+*     // Set formatters for screen readers
+*     colorSlider.valueFormatter = value => degreeFormatter.format(value);
+*     opacitySlider.valueFormatter = value => percentFormatter.format(value);
+*
+*     // Set the color slider's thumb color when the value changes
+*     colorSlider.addEventListener('input', () => {
+*       colorSlider.style.setProperty('--hue', `hsl(${colorSlider.value}deg 100% 50%)`);
+*     });
+*
+*     // Set the opacity slider's thumb color when the value changes
+*     opacitySlider.addEventListener('input', () => {
+*       opacitySlider.style.setProperty('--opacity', `${opacitySlider.value * 100}%`);
+*     });
+*   });
+* <\/script>
+* ```
+*
+* ```html
+* <sigvelo-slider
+*   id="slider__repeat"
+*   label="Key repeat rate"
+*   name="repeat"
+*   value="5"
+*   min="0"
+*   max="7"
+*   with-markers
+* >
+*   <span slot="reference">Off</span>
+*   <span slot="reference" class="repeat-slow">Slow</span>
+*   <span slot="reference">Fast</span>
+* </sigvelo-slider>
+*
+* <style>
+*   #slider__repeat {
+*     --thumb-width: 0.75em;
+*     --thumb-height: 1.5em;
+*     --marker-height: 0.5em;
+*
+*     &::part(track) {
+*       height: 1em;
+*       background: none;
+*     }
+*
+*     &::part(track)::after {
+*       content: '';
+*       position: absolute;
+*       top: calc(50% - .125em);
+*       left: 0;
+*       width: 100%;
+*       height: .25em;
+*       background-color: var(--sigvelo-color-neutral-bg-muted);
+*     }
+*
+*     &::part(indicator) {
+*       display: none;
+*     }
+*
+*     &::part(thumb) {
+*       border-radius: 0.25em;
+*       border: none;
+*       background-color: var(--sigvelo-color-neutral-bg-strong);
+*     }
+*
+*     &::part(marker) {
+*       display: initial;
+*       border-radius: 0.125em;
+*       background-color: var(--sigvelo-color-neutral-bg);
+*     }
+*
+*     .repeat-slow {
+*       position: absolute;
+*
+*       &:dir(ltr) {
+*         left: 14%;
+*       }
+*
+*       &:dir(rtl) {
+*         right: 14%;
+*       }
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSlider = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.draggableThumbMin = null;
+		this.draggableThumbMax = null;
+		this.localize = new Localize(this);
+		this.activeThumb = null;
+		this.lastTrackPosition = null;
+		this.defaultValue = 0;
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = 0;
+		this.disabled = false;
+		this.readonly = false;
+		this.orientation = "horizontal";
+		this.size = "md";
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.tooltipDistance = 8;
+		this.tooltipPlacement = "top";
+		this.withMarkers = false;
+		this.withTooltip = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			slider_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.isRange ? this.thumbMin || this.slider : this.slider;
+	}
+	/** Get if this is a range slider */
+	get isRange() {
+		return Array.isArray(this.value);
+	}
+	get singleValue() {
+		return typeof this.value === "number" ? this.value : this.value[0] ?? this.min;
+	}
+	set singleValue(value) {
+		this.value = value;
+	}
+	get rangeStart() {
+		return Array.isArray(this.value) ? this.value[0] ?? this.min : this.min;
+	}
+	set rangeStart(value) {
+		this.value = [value, this.rangeEnd];
+	}
+	get rangeEnd() {
+		return Array.isArray(this.value) ? this.value[1] ?? this.value[0] ?? this.max : this.max;
+	}
+	set rangeEnd(value) {
+		this.value = [this.rangeStart, value];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+		this.stopDragging();
+	}
+	firstUpdated() {
+		this.defaultValue = Array.isArray(this.value) ? [...this.value] : this.value;
+		this.setupDragging();
+	}
+	stopDragging() {
+		this.draggableTrack?.stop();
+		this.draggableThumbMin?.stop();
+		this.draggableThumbMax?.stop();
+		this.draggableTrack = void 0;
+		this.draggableThumbMin = null;
+		this.draggableThumbMax = null;
+	}
+	setupDragging() {
+		this.stopDragging();
+		if (this.isRange) {
+			this.draggableThumbMin = new DraggableElement(this.thumbMin, {
+				start: () => {
+					this.activeThumb = "min";
+					this.trackBoundingClientRect = this.track.getBoundingClientRect();
+					this.valueWhenDraggingStarted = this.rangeStart;
+					this.customStates.set("dragging", true);
+					this.showRangeTooltips();
+				},
+				move: (x, y) => {
+					this.setThumbValueFromCoordinates(x, y, "min");
+				},
+				stop: () => {
+					if (this.rangeStart !== this.valueWhenDraggingStarted) {
+						this.dispatchEvent(new SigveloChangeEvent());
+						this.dispatchEvent(new Event("change", {
+							bubbles: true,
+							composed: true
+						}));
+						this.hadUserInteraction = true;
+					}
+					this.hideRangeTooltips();
+					this.customStates.set("dragging", false);
+					this.valueWhenDraggingStarted = void 0;
+					this.activeThumb = null;
+					this.lastTrackPosition = null;
+				}
+			});
+			this.draggableThumbMax = new DraggableElement(this.thumbMax, {
+				start: () => {
+					this.activeThumb = "max";
+					this.trackBoundingClientRect = this.track.getBoundingClientRect();
+					this.valueWhenDraggingStarted = this.rangeEnd;
+					this.customStates.set("dragging", true);
+					this.showRangeTooltips();
+				},
+				move: (x, y) => {
+					this.setThumbValueFromCoordinates(x, y, "max");
+				},
+				stop: () => {
+					if (this.rangeEnd !== this.valueWhenDraggingStarted) {
+						this.dispatchEvent(new SigveloChangeEvent());
+						this.dispatchEvent(new Event("change", {
+							bubbles: true,
+							composed: true
+						}));
+						this.hadUserInteraction = true;
+					}
+					this.hideRangeTooltips();
+					this.customStates.set("dragging", false);
+					this.valueWhenDraggingStarted = void 0;
+					this.activeThumb = null;
+				}
+			});
+			this.draggableTrack = new DraggableElement(this.track, {
+				start: (x, y) => {
+					this.trackBoundingClientRect = this.track.getBoundingClientRect();
+					if (this.activeThumb) this.valueWhenDraggingStarted = this.activeThumb === "min" ? this.rangeStart : this.rangeEnd;
+					else {
+						const value = this.getValueFromCoordinates(x, y);
+						const minDistance = Math.abs(value - this.rangeStart);
+						const maxDistance = Math.abs(value - this.rangeEnd);
+						if (minDistance === maxDistance) if (value > this.rangeEnd) this.activeThumb = "max";
+						else if (value < this.rangeStart) this.activeThumb = "min";
+						else {
+							const isRtl = this.localize.dir() === "rtl";
+							const isVertical = this.orientation === "vertical";
+							const position = isVertical ? y : x;
+							const previousPosition = this.lastTrackPosition || position;
+							this.lastTrackPosition = position;
+							const movingForward = position > previousPosition !== isRtl && !isVertical || position < previousPosition && isVertical;
+							this.activeThumb = movingForward ? "max" : "min";
+						}
+						else this.activeThumb = minDistance <= maxDistance ? "min" : "max";
+						this.valueWhenDraggingStarted = this.activeThumb === "min" ? this.rangeStart : this.rangeEnd;
+					}
+					this.customStates.set("dragging", true);
+					this.setThumbValueFromCoordinates(x, y, this.activeThumb);
+					this.showRangeTooltips();
+				},
+				move: (x, y) => {
+					if (this.activeThumb) this.setThumbValueFromCoordinates(x, y, this.activeThumb);
+				},
+				stop: () => {
+					if (this.activeThumb) {
+						if ((this.activeThumb === "min" ? this.rangeStart : this.rangeEnd) !== this.valueWhenDraggingStarted) {
+							this.dispatchEvent(new SigveloChangeEvent());
+							this.dispatchEvent(new Event("change", {
+								bubbles: true,
+								composed: true
+							}));
+							this.hadUserInteraction = true;
+						}
+					}
+					this.hideRangeTooltips();
+					this.customStates.set("dragging", false);
+					this.valueWhenDraggingStarted = void 0;
+					this.activeThumb = null;
+				}
+			});
+		} else this.draggableTrack = new DraggableElement(this.slider, {
+			start: (x, y) => {
+				this.trackBoundingClientRect = this.track.getBoundingClientRect();
+				this.valueWhenDraggingStarted = this.singleValue;
+				this.customStates.set("dragging", true);
+				this.setValueFromCoordinates(x, y);
+				this.showTooltip();
+			},
+			move: (x, y) => {
+				this.setValueFromCoordinates(x, y);
+			},
+			stop: () => {
+				if (this.singleValue !== this.valueWhenDraggingStarted) {
+					this.dispatchEvent(new SigveloChangeEvent());
+					this.dispatchEvent(new Event("change", {
+						bubbles: true,
+						composed: true
+					}));
+					this.hadUserInteraction = true;
+				}
+				this.hideTooltip();
+				this.customStates.set("dragging", false);
+				this.valueWhenDraggingStarted = void 0;
+			}
+		});
+		const enabled = !(this.disabled || this.readonly);
+		this.draggableTrack?.toggle(enabled);
+		this.draggableThumbMin?.toggle(enabled);
+		this.draggableThumbMax?.toggle(enabled);
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("value")) {
+			this.tooltip?.reposition();
+			this.tooltipMin?.reposition();
+			this.tooltipMax?.reposition();
+			const previousValue = changedProperties.get("value");
+			if (previousValue !== void 0 && Array.isArray(previousValue) !== this.isRange) this.setupDragging();
+		}
+		if (changedProperties.has("value") || changedProperties.has("min") || changedProperties.has("max")) if (this.isRange) {
+			const start = clamp(this.rangeStart, this.min, this.max);
+			const end = clamp(this.rangeEnd, start, this.max);
+			if (start !== this.rangeStart || end !== this.rangeEnd) this.value = [start, end];
+			else this.updateFormValue();
+		} else {
+			const value = clamp(this.singleValue, this.min, this.max);
+			if (value !== this.singleValue) this.singleValue = value;
+			else this.internals.setFormValue(String(value));
+		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("disabled") || changedProperties.has("readonly")) {
+			const enabled = !(this.disabled || this.readonly);
+			if (this.isRange) {
+				if (this.draggableThumbMin) this.draggableThumbMin.toggle(enabled);
+				if (this.draggableThumbMax) this.draggableThumbMax.toggle(enabled);
+			}
+			if (this.draggableTrack) this.draggableTrack.toggle(enabled);
+		}
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.value = Array.isArray(this.defaultValue) ? [...this.defaultValue] : this.defaultValue;
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+	}
+	/** Clamps a number to min/max while ensuring it's a valid step interval. */
+	clampAndRoundToStep(value) {
+		const stepPrecision = (String(this.step).split(".")[1] || "").replace(/0+$/g, "").length;
+		value = Math.round(value / this.step) * this.step;
+		value = clamp(value, this.min, this.max);
+		return parseFloat(value.toFixed(stepPrecision));
+	}
+	/** Given a value, returns its percentage within a range of min/max. */
+	getPercentageFromValue(value) {
+		return (value - this.min) / (this.max - this.min) * 100;
+	}
+	/** Converts coordinates to slider value */
+	getValueFromCoordinates(x, y) {
+		const isRtl = this.localize.dir() === "rtl";
+		const isVertical = this.orientation === "vertical";
+		const { top, right, bottom, left, height, width } = this.trackBoundingClientRect;
+		const pointerPosition = isVertical ? y : x;
+		const sliderCoords = isVertical ? {
+			start: top,
+			end: bottom,
+			size: height
+		} : {
+			start: left,
+			end: right,
+			size: width
+		};
+		const percentage = (isVertical ? sliderCoords.end - pointerPosition : isRtl ? sliderCoords.end - pointerPosition : pointerPosition - sliderCoords.start) / sliderCoords.size;
+		return this.clampAndRoundToStep(this.min + (this.max - this.min) * percentage);
+	}
+	handleBlur() {
+		if (this.isRange) requestAnimationFrame(() => {
+			const focusedElement = this.shadowRoot?.activeElement;
+			if (!(focusedElement === this.thumbMin || focusedElement === this.thumbMax)) this.hideRangeTooltips();
+		});
+		else this.hideTooltip();
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleFocus(event) {
+		const target = event.target;
+		if (this.isRange) {
+			if (target === this.thumbMin) this.activeThumb = "min";
+			else if (target === this.thumbMax) this.activeThumb = "max";
+			this.showRangeTooltips();
+		} else this.showTooltip();
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleKeyDown(event) {
+		const isRtl = this.localize.dir() === "rtl";
+		const target = event.target;
+		if (this.disabled || this.readonly) return;
+		if (this.isRange) {
+			if (target === this.thumbMin) this.activeThumb = "min";
+			else if (target === this.thumbMax) this.activeThumb = "max";
+			if (!this.activeThumb) return;
+		}
+		const current = this.isRange ? this.activeThumb === "min" ? this.rangeStart : this.rangeEnd : this.singleValue;
+		let newValue = current;
+		switch (event.key) {
+			case "ArrowUp":
+			case isRtl ? "ArrowLeft" : "ArrowRight":
+				event.preventDefault();
+				newValue = this.clampAndRoundToStep(current + this.step);
+				break;
+			case "ArrowDown":
+			case isRtl ? "ArrowRight" : "ArrowLeft":
+				event.preventDefault();
+				newValue = this.clampAndRoundToStep(current - this.step);
+				break;
+			case "Home":
+				event.preventDefault();
+				newValue = this.isRange && this.activeThumb === "min" ? this.min : this.isRange ? this.rangeStart : this.min;
+				break;
+			case "End":
+				event.preventDefault();
+				newValue = this.isRange && this.activeThumb === "max" ? this.max : this.isRange ? this.rangeEnd : this.max;
+				break;
+			case "PageUp":
+				event.preventDefault();
+				const stepUp = Math.max(current + (this.max - this.min) / 10, current + this.step);
+				newValue = this.clampAndRoundToStep(stepUp);
+				break;
+			case "PageDown":
+				event.preventDefault();
+				const stepDown = Math.min(current - (this.max - this.min) / 10, current - this.step);
+				newValue = this.clampAndRoundToStep(stepDown);
+				break;
+			case "Enter":
+				if (this.internals.form) {
+					const submitter = [...this.internals.form.elements].find((el) => {
+						return ["button", "input"].includes(el.localName) && el.type === "submit";
+					});
+					this.internals.form.requestSubmit(submitter);
+				}
+				return;
+		}
+		if (newValue === current) return;
+		if (this.isRange) {
+			if (this.activeThumb === "min") if (newValue > this.rangeEnd) this.value = [newValue, newValue];
+			else this.rangeStart = Math.max(this.min, newValue);
+			else if (newValue < this.rangeStart) this.value = [newValue, newValue];
+			else this.rangeEnd = Math.min(this.max, newValue);
+			this.updateFormValue();
+		} else this.singleValue = clamp(newValue, this.min, this.max);
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+		this.hadUserInteraction = true;
+	}
+	handleLabelPointerDown(event) {
+		event.preventDefault();
+		if (!this.disabled) if (this.isRange) this.thumbMin?.focus();
+		else this.slider.focus();
+	}
+	setValueFromCoordinates(x, y) {
+		const oldValue = this.singleValue;
+		this.singleValue = this.getValueFromCoordinates(x, y);
+		if (this.singleValue !== oldValue) {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+		}
+	}
+	setThumbValueFromCoordinates(x, y, thumb) {
+		const value = this.getValueFromCoordinates(x, y);
+		const oldValue = thumb === "min" ? this.rangeStart : this.rangeEnd;
+		if (thumb === "min") if (value > this.rangeEnd) this.value = [value, value];
+		else this.rangeStart = Math.max(this.min, value);
+		else if (value < this.rangeStart) this.value = [value, value];
+		else this.rangeEnd = Math.min(this.max, value);
+		if (oldValue !== (thumb === "min" ? this.rangeStart : this.rangeEnd)) {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.updateFormValue();
+		}
+	}
+	showTooltip() {
+		if (this.withTooltip && this.tooltip) this.tooltip.open = true;
+	}
+	hideTooltip() {
+		if (this.withTooltip && this.tooltip) this.tooltip.open = false;
+	}
+	showRangeTooltips() {
+		if (!this.withTooltip) return;
+		if (this.activeThumb === "min") {
+			this.tooltipMin.open = true;
+			this.tooltipMax.open = false;
+		} else if (this.activeThumb === "max") {
+			this.tooltipMax.open = true;
+			this.tooltipMin.open = false;
+		}
+	}
+	hideRangeTooltips() {
+		if (!this.withTooltip) return;
+		this.tooltipMin.open = false;
+		this.tooltipMax.open = false;
+	}
+	/** Updates the form value submission for range sliders */
+	updateFormValue() {
+		if (this.isRange) {
+			const formData = new FormData();
+			formData.append(this.name || "", String(this.rangeStart));
+			formData.append(this.name || "", String(this.rangeEnd));
+			this.internals.setFormValue(formData);
+		}
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const validationMessage = this.getCustomValidity();
+		const flags = {
+			badInput: false,
+			customError: hasCustomValidity,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valueMissing: false
+		};
+		this.isInvalid = hasCustomValidity;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the slider. */
+	focus() {
+		if (this.isRange) this.thumbMin?.focus();
+		else this.slider.focus();
+	}
+	/** Removes focus from the slider. */
+	blur() {
+		if (this.isRange) {
+			if (document.activeElement === this.thumbMin) this.thumbMin.blur();
+			else if (document.activeElement === this.thumbMax) this.thumbMax.blur();
+		} else this.slider.blur();
+	}
+	/**
+	* Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+	* emitted when this is called.
+	*/
+	stepDown() {
+		if (this.isRange) {
+			const newValue = this.clampAndRoundToStep(this.rangeStart - this.step);
+			this.rangeStart = clamp(newValue, this.min, this.rangeEnd);
+			this.updateFormValue();
+		} else {
+			const newValue = this.clampAndRoundToStep(this.singleValue - this.step);
+			this.singleValue = newValue;
+		}
+	}
+	/**
+	* Increases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+	* emitted when this is called.
+	*/
+	stepUp() {
+		if (this.isRange) {
+			const newValue = this.clampAndRoundToStep(this.rangeEnd + this.step);
+			this.rangeEnd = clamp(newValue, this.rangeStart, this.max);
+			this.updateFormValue();
+		} else {
+			const newValue = this.clampAndRoundToStep(this.singleValue + this.step);
+			this.singleValue = newValue;
+		}
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		const sliderClasses = classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			horizontal: this.orientation === "horizontal",
+			vertical: this.orientation === "vertical",
+			disabled: this.disabled
+		});
+		const markers = [];
+		if (this.withMarkers) for (let i = this.min; i <= this.max; i += this.step) markers.push(this.getPercentageFromValue(i));
+		const labelAndDescription = html`
+      <label
+        id="label"
+        part="label"
+        for=${this.isRange ? "thumb-min" : "text-box"}
+        class=${classMap({ vh: !hasLabel })}
+        @pointerdown=${this.handleLabelPointerDown}
+      >
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+    `;
+		const markersTemplate = this.withMarkers ? html`
+          <div id="markers" part="markers">
+            ${markers.map((marker) => html`<span part="marker" class="marker" style="--position: ${marker}%"></span>`)}
+          </div>
+        ` : "";
+		const referencesTemplate = this.whenSlotted("reference", html`
+        <div id="references" part="references" aria-hidden="true">
+          <slot name="reference"></slot>
+        </div>
+      `);
+		const createTooltip = (thumbId, value) => this.withTooltip ? html`
+            <sigvelo-tooltip
+              id=${`tooltip${thumbId !== "thumb" ? "-" + thumbId : ""}`}
+              part="tooltip"
+              exportparts="
+              tooltip:tooltip__tooltip,
+              content:tooltip__content,
+              arrow:tooltip__arrow
+            "
+              distance=${this.tooltipDistance}
+              placement=${this.tooltipPlacement}
+              for=${thumbId}
+              activation="manual"
+              dir=${this.localize.dir()}
+              aria-label=${typeof this.valueFormatter === "function" ? this.valueFormatter(value) : String(value)}
+            >
+              <span aria-hidden="true">
+                ${typeof this.valueFormatter === "function" ? this.valueFormatter(value) : this.localize.number(value)}
+              </span>
+            </sigvelo-tooltip>
+          ` : "";
+		if (this.isRange) {
+			const minThumbPosition = clamp(this.getPercentageFromValue(this.rangeStart), 0, 100);
+			const maxThumbPosition = clamp(this.getPercentageFromValue(this.rangeEnd), 0, 100);
+			return html`
+        ${labelAndDescription}
+
+        <div id="slider" part="slider" class=${sliderClasses}>
+          <div id="track" part="track">
+            <div
+              id="indicator"
+              part="indicator"
+              style="--start: ${Math.min(minThumbPosition, maxThumbPosition)}%; --end: ${Math.max(minThumbPosition, maxThumbPosition)}%"
+            ></div>
+
+            ${markersTemplate}
+
+            <span
+              id="thumb-min"
+              part="thumb thumb-min"
+              style="--position: ${minThumbPosition}%"
+              role="slider"
+              aria-valuemin=${this.min}
+              aria-valuenow=${this.rangeStart}
+              aria-valuetext=${typeof this.valueFormatter === "function" ? this.valueFormatter(this.rangeStart) : this.localize.number(this.rangeStart)}
+              aria-valuemax=${this.rangeEnd}
+              aria-label="${this.label ? `${this.label} (minimum value)` : "Minimum value"}"
+              aria-describedby="description"
+              aria-orientation=${this.orientation}
+              aria-disabled=${this.disabled ? "true" : "false"}
+              aria-readonly=${this.readonly ? "true" : "false"}
+              tabindex=${this.disabled ? -1 : 0}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+              @keydown=${this.handleKeyDown}
+            ></span>
+
+            <span
+              id="thumb-max"
+              part="thumb thumb-max"
+              style="--position: ${maxThumbPosition}%"
+              role="slider"
+              aria-valuemin=${this.rangeStart}
+              aria-valuenow=${this.rangeEnd}
+              aria-valuetext=${typeof this.valueFormatter === "function" ? this.valueFormatter(this.rangeEnd) : this.localize.number(this.rangeEnd)}
+              aria-valuemax=${this.max}
+              aria-label="${this.label ? `${this.label} (maximum value)` : "Maximum value"}"
+              aria-describedby="description"
+              aria-orientation=${this.orientation}
+              aria-disabled=${this.disabled ? "true" : "false"}
+              aria-readonly=${this.readonly ? "true" : "false"}
+              tabindex=${this.disabled ? -1 : 0}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+              @keydown=${this.handleKeyDown}
+            ></span>
+          </div>
+
+          ${referencesTemplate}
+        </div>
+
+        ${createTooltip("thumb-min", this.rangeStart)} ${createTooltip("thumb-max", this.rangeEnd)}
+      `;
+		} else {
+			const thumbPosition = clamp(this.getPercentageFromValue(this.singleValue), 0, 100);
+			const indicatorOffsetPosition = clamp(this.getPercentageFromValue(typeof this.indicatorOffset === "number" ? this.indicatorOffset : this.min), 0, 100);
+			return html`
+        ${labelAndDescription}
+
+        <div
+          id="slider"
+          part="slider"
+          class=${sliderClasses}
+          role="slider"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-readonly=${this.readonly ? "true" : "false"}
+          aria-orientation=${this.orientation}
+          aria-valuemin=${this.min}
+          aria-valuenow=${this.singleValue}
+          aria-valuetext=${typeof this.valueFormatter === "function" ? this.valueFormatter(this.singleValue) : this.localize.number(this.singleValue)}
+          aria-valuemax=${this.max}
+          aria-labelledby="label"
+          aria-describedby="description"
+          tabindex=${this.disabled ? -1 : 0}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        >
+          <div id="track" part="track">
+            <div
+              id="indicator"
+              part="indicator"
+              style="--start: ${indicatorOffsetPosition}%; --end: ${thumbPosition}%"
+            ></div>
+
+            ${markersTemplate}
+            <span id="thumb" part="thumb" style="--position: ${thumbPosition}%"></span>
+          </div>
+
+          ${referencesTemplate}
+        </div>
+
+        ${createTooltip("thumb", this.singleValue)}
+      `;
+		}
+	}
+};
+__decorate([query("#slider")], SigveloSlider.prototype, "slider", void 0);
+__decorate([query("#thumb")], SigveloSlider.prototype, "thumb", void 0);
+__decorate([query("#thumb-min")], SigveloSlider.prototype, "thumbMin", void 0);
+__decorate([query("#thumb-max")], SigveloSlider.prototype, "thumbMax", void 0);
+__decorate([query("#track")], SigveloSlider.prototype, "track", void 0);
+__decorate([query("#tooltip")], SigveloSlider.prototype, "tooltip", void 0);
+__decorate([query("#tooltip-thumb-min")], SigveloSlider.prototype, "tooltipMin", void 0);
+__decorate([query("#tooltip-thumb-max")], SigveloSlider.prototype, "tooltipMax", void 0);
+__decorate([state()], SigveloSlider.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloSlider.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloSlider.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloSlider.prototype, "label", void 0);
+__decorate([property()], SigveloSlider.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloSlider.prototype, "name", void 0);
+__decorate([property({ type: Number })], SigveloSlider.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSlider.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSlider.prototype, "readonly", void 0);
+__decorate([property({ reflect: true })], SigveloSlider.prototype, "orientation", void 0);
+__decorate([property({ reflect: true })], SigveloSlider.prototype, "size", void 0);
+__decorate([property({
+	attribute: "indicator-offset",
+	type: Number
+})], SigveloSlider.prototype, "indicatorOffset", void 0);
+__decorate([property()], SigveloSlider.prototype, "form", void 0);
+__decorate([property({ type: Number })], SigveloSlider.prototype, "min", void 0);
+__decorate([property({ type: Number })], SigveloSlider.prototype, "max", void 0);
+__decorate([property({ type: Number })], SigveloSlider.prototype, "step", void 0);
+__decorate([property({ type: Boolean })], SigveloSlider.prototype, "autofocus", void 0);
+__decorate([property({
+	attribute: "tooltip-distance",
+	type: Number
+})], SigveloSlider.prototype, "tooltipDistance", void 0);
+__decorate([property({
+	attribute: "tooltip-placement",
+	reflect: true
+})], SigveloSlider.prototype, "tooltipPlacement", void 0);
+__decorate([property({
+	attribute: "with-markers",
+	type: Boolean
+})], SigveloSlider.prototype, "withMarkers", void 0);
+__decorate([property({
+	attribute: "with-tooltip",
+	type: Boolean
+})], SigveloSlider.prototype, "withTooltip", void 0);
+__decorate([property({ attribute: false })], SigveloSlider.prototype, "valueFormatter", void 0);
+customElements.define("sigvelo-slider", SigveloSlider);
+//#endregion
+export { SigveloSlider as t };