@mcp-b/web-components 0.2.0

package/dist/slider-B0FVsV1o.d.ts

@@ -0,0 +1,921 @@
+import { t as SigveloTooltip } from "./tooltip-ahFthek8.js";
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/slider/slider.d.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>
+ * ```
+ */
+declare class SigveloSlider extends SigveloFormControlElement {
+  static formAssociated: boolean;
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  private draggableTrack?;
+  private draggableThumbMin;
+  private draggableThumbMax;
+  private localize;
+  private trackBoundingClientRect;
+  private valueWhenDraggingStarted;
+  private activeThumb;
+  private lastTrackPosition;
+  private defaultValue;
+  protected get focusableAnchor(): HTMLElement;
+  slider: HTMLElement;
+  thumb: HTMLElement;
+  thumbMin: HTMLElement;
+  thumbMax: HTMLElement;
+  track: HTMLElement;
+  tooltip: SigveloTooltip;
+  tooltipMin: SigveloTooltip;
+  tooltipMax: SigveloTooltip;
+  isInvalid: boolean;
+  hadUserInteraction: boolean;
+  wasSubmitted: boolean;
+  /**
+   * The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /**
+   * The slider's description. If you need to provide HTML in the description, use the `description` slot instead.
+   */
+  description: string;
+  /** The name of the slider. This will be submitted with the form as a name/value pair. */
+  name: string;
+  /** The slider's value. Pass a two-number array to render a range slider. */
+  value: number | readonly number[];
+  /** Get if this is a range slider */
+  get isRange(): boolean;
+  private get singleValue();
+  private set singleValue(value);
+  private get rangeStart();
+  private set rangeStart(value);
+  private get rangeEnd();
+  private set rangeEnd(value);
+  /** Disables the slider. */
+  disabled: boolean;
+  /** Makes the slider a read-only field. */
+  readonly: boolean;
+  /** The orientation of the slider. */
+  orientation: "horizontal" | "vertical";
+  /** The slider's size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /** The starting value from which to draw the slider's fill, which is based on its current value. */
+  indicatorOffset: number;
+  /**
+   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
+   * this attribute must be an ID of a form in the same document or shadow root.
+   */
+  form: string;
+  /** The minimum value allowed. */
+  min: number;
+  /** The maximum value allowed. */
+  max: number;
+  /** The granularity the value must adhere to when incrementing and decrementing. */
+  step: number;
+  /** Tells the browser to focus the slider when the page loads or a dialog is shown. */
+  autofocus: boolean;
+  /** The distance of the tooltip from the slider's thumb. */
+  tooltipDistance: number;
+  /** The placement of the tooltip in reference to the slider's thumb. */
+  tooltipPlacement: "top" | "right" | "bottom" | "left";
+  /** Draws markers at each step along the slider. */
+  withMarkers: boolean;
+  /** Draws a tooltip above the thumb when the control has focus or is dragged. */
+  withTooltip: boolean;
+  /**
+   * A custom formatting function to apply to the value. This will be shown in the tooltip and announced by screen
+   * readers. Must be set with JavaScript. Property only.
+   */
+  valueFormatter: (value: number) => string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  private stopDragging;
+  private setupDragging;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** @internal Called when a containing fieldset is disabled. */
+  formDisabledCallback(isDisabled: boolean): void;
+  /** @internal Called when the form is reset. */
+  formResetCallback(): void;
+  /** Clamps a number to min/max while ensuring it's a valid step interval. */
+  private clampAndRoundToStep;
+  /** Given a value, returns its percentage within a range of min/max. */
+  private getPercentageFromValue;
+  /** Converts coordinates to slider value */
+  private getValueFromCoordinates;
+  private handleBlur;
+  private handleFocus;
+  private handleHostInvalid;
+  private handleKeyDown;
+  private handleLabelPointerDown;
+  private setValueFromCoordinates;
+  private setThumbValueFromCoordinates;
+  private showTooltip;
+  private hideTooltip;
+  private showRangeTooltips;
+  private hideRangeTooltips;
+  /** Updates the form value submission for range sliders */
+  private updateFormValue;
+  /** Sets the form control's validity */
+  private updateValidity;
+  /** Sets focus to the slider. */
+  focus(): void;
+  /** Removes focus from the slider. */
+  blur(): void;
+  /**
+   * 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(): void;
+  /**
+   * 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(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-slider": SigveloSlider;
+  }
+}
+//#endregion
+export { SigveloSlider as t };