import { t as SigveloTooltip } from "./tooltip-VyMg30Ew.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;
  formDisabledCallback(): void;
  private updateDragging;
  updated(changedProperties: PropertyValues<this>): 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 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 };