@sandlada/mdc/build/components/expressive-slider/expressive-slider.style.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * @license
 * Copyright 2026 Kai-Orion & Sandlada
 * SPDX-License-Identifier: MIT
 *
 * @fileoverview
 * Styles for `mdc-expressive-slider` — Material Design 3 Expressive slider.
 *
 * Locked to the Figma prototype (node-id `58008:10353`):
 *
 * | Size          | Track h | Handle h | Rounded end |
 * | ------------- | ------- | -------- | ----------- |
 * | extra-small   | 16      | 44       | 16          |
 * | small         | 24      | 44       | 8           |
 * | medium        | 40      | 52       | 12          |
 * | large         | 56      | 68       | 16          |
 * | extra-large   | 96      | 108      | 28          |
 *
 * Three behavioral types — `standard`, `centered`, `range` — render through
 * shared CSS via `data-active` / `data-position` attributes. Two directions —
 * `horizontal` (default), `vertical` — swap flex direction and per-track
 * `inline-size` / `block-size`.
 *
 * ── Edge inset ────────────────────────────────────────────────────────
 * The visible track is inset by `--_edge-inset` (= `handleWidth / 2`) on
 * each side so the handle's interaction center is offset from the slider
 * edge at extremes and the edge-tick / edge-stop-indicator dots all line
 * up with the visible track edges. See expressive-slider.ts for the
 * per-segment inline-style math that uses this inset.
 *
 * Centered mode mirrors the same inset on each side of the 50% midpoint
 * (`--_center-inset`) so the active overlay has a center gap and rounded
 * ends on BOTH sides (per MD3E / Compose Material3 spec).
 *
 * @link https://m3.material.io/components/sliders/specs
 */
export declare const ExpressiveSliderStyles: import("lit").CSSResult[];
//# sourceMappingURL=expressive-slider.style.d.ts.map