@chenzy-design/svelte 0.1.0

package/src/slider/Slider.svelte

@@ -0,0 +1,716 @@
+<!--
+  Slider — see specs/components/input/Slider.spec.md
+  Single / range slider. APG slider(-multithumb). Controlled / uncontrolled.
+  Dragging is IMPERATIVE: rail rect read once on pointerdown into a plain var,
+  document pointermove/up listeners added/removed by hand — no reactive
+  attachment reads DOM measurements (avoids re-subscribe loops). Variation only
+  via onChange; an optional local `dragValue` gives instant feedback while dragging.
+
+  Tooltip is a lightweight absolutely-positioned bubble above each handle, shown
+  on hover/focus/drag (or always via alwaysShowTip / forced via tooltipVisible).
+  No floating library is pulled in: percent layout already gives the position.
+-->
+<script lang="ts">
+  import { useLiveAnnouncer } from '@chenzy-design/core';
+  import { useLocale } from '../locale-provider/index.js';
+
+  type Size = 'small' | 'default' | 'large';
+  type Status = 'default' | 'warning' | 'error';
+  type Single = number;
+  type Pair = [number, number];
+  type SliderValue = Single | Pair;
+
+  interface Props {
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    min?: number;
+    max?: number;
+    step?: number | null;
+    range?: boolean;
+    marks?: Record<number, string>;
+    dots?: boolean;
+    included?: boolean;
+    vertical?: boolean;
+    verticalReverse?: boolean;
+    height?: number;
+    disabled?: boolean;
+    clickable?: boolean;
+    size?: Size;
+    status?: Status;
+    tooltipVisible?: boolean;
+    alwaysShowTip?: boolean;
+    tipFormatter?: (value: number) => string | null;
+    getAriaValueText?: (value: number, index: number) => string;
+    railStyle?: string;
+    handleStyle?: string;
+    id?: string;
+    ariaLabel?: string;
+    /** group 容器与各手柄的 aria-labelledby（指向外部 label 的 id）。 */
+    ariaLabelledby?: string;
+    onChange?: (v: SliderValue) => void;
+    /** 拖拽结束（pointerup）或键盘操作落定时触发，适合做请求节流。 */
+    onChangeComplete?: (v: SliderValue) => void;
+    /** 与 change 同步的低级输入信号（拖动中每次值变化实时触发，表单绑定用）。 */
+    onInput?: (v: SliderValue) => void;
+    /** 手柄获得焦点，附带手柄索引（0/1）。 */
+    onFocus?: (detail: { index: number }) => void;
+    /** 手柄失焦，附带手柄索引（0/1）。 */
+    onBlur?: (detail: { index: number }) => void;
+    /** 已选轨道段自定义样式（range 时为数组，各段对应一个样式对象） */
+    trackStyle?: Record<string, string> | Record<string, string>[];
+    /** range 模式下两手柄是否可相互推动（true=最小间距 0，number=最小间距值） */
+    pushable?: boolean | number;
+    /** range 模式下是否允许交叉（默认 true，false 时强制 left <= right） */
+    allowCross?: boolean;
+    /** 拖拽/点击结束时触发（onChangeComplete 的别名，语义更明确） */
+    onAfterChange?: (v: SliderValue) => void;
+  }
+
+  let {
+    value = $bindable(),
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    marks,
+    dots = false,
+    included = true,
+    vertical = false,
+    verticalReverse = false,
+    height = 200,
+    disabled = false,
+    clickable = true,
+    size = 'default',
+    status = 'default',
+    tooltipVisible = undefined,
+    alwaysShowTip = false,
+    tipFormatter = String,
+    getAriaValueText,
+    railStyle,
+    handleStyle,
+    id,
+    ariaLabel,
+    ariaLabelledby,
+    onChange,
+    onChangeComplete,
+    onInput,
+    onFocus,
+    onBlur,
+    trackStyle,
+    pushable = false,
+    allowCross = true,
+    onAfterChange,
+  }: Props = $props();
+
+  const loc = useLocale();
+  // 单例 live region（polite）：值到达 min/max 边界时播报一次（红线 #3：命令式、事件回调内）。
+  const announcer = useLiveAnnouncer();
+  // 节流：记住上次播报的边界，连续停在同一边界不重复播；离开后再回到才重播。
+  let lastBoundary: 'min' | 'max' | null = null;
+
+  // 任一手柄到达 min/max 时 polite 播报一次（拖拽落定 / 键盘步进后调用）。
+  function maybeAnnounceBoundary(v: SliderValue) {
+    const reachesMin = Array.isArray(v) ? v[0] <= min : v <= min;
+    const reachesMax = Array.isArray(v) ? v[1] >= max : v >= max;
+    const boundary: 'min' | 'max' | null = reachesMax ? 'max' : reachesMin ? 'min' : null;
+    if (boundary === null) {
+      lastBoundary = null;
+      return;
+    }
+    if (boundary === lastBoundary) return;
+    lastBoundary = boundary;
+    announcer.announce(
+      loc().t(boundary === 'max' ? 'Slider.maxReachedAnnounce' : 'Slider.minReachedAnnounce'),
+    );
+  }
+
+  const isControlled = $derived(value !== undefined);
+  let inner = $state<SliderValue>(getInitialValue());
+  // While dragging, a local override gives instant visual feedback without
+  // writing the controlled prop. null = not dragging.
+  let dragValue = $state<SliderValue | null>(null);
+  // Which handle (if any) the pointer is hovering / which has focus — drives the
+  // hover/focus tooltip without any imperative DOM measurement.
+  let hoverIndex = $state<number | null>(null);
+  let focusIndex = $state<number | null>(null);
+
+  const current = $derived<SliderValue>(
+    dragValue ?? (isControlled ? (value as SliderValue) : inner),
+  );
+
+  function getInitialValue(): SliderValue {
+    if (defaultValue !== undefined) return defaultValue;
+    return range ? [min, min] : min;
+  }
+
+  // Normalize to a pair for rendering; single mode uses index 1 (start = min).
+  const values = $derived<Pair>(
+    range ? (current as Pair) : ([min, current as number] as Pair),
+  );
+
+  const markKeys = $derived(
+    marks ? Object.keys(marks).map(Number).sort((a, b) => a - b) : [],
+  );
+
+  // Dot positions: every step between min and max (skip endpoints duplicates of marks not needed).
+  const dotValues = $derived.by<number[]>(() => {
+    if (!dots || step === null || step <= 0) return [];
+    const out: number[] = [];
+    for (let v = min; v <= max + 1e-9; v += step) {
+      out.push(Math.round(v * 1e6) / 1e6);
+    }
+    return out;
+  });
+
+  function clampToRange(n: number): number {
+    return Math.min(max, Math.max(min, n));
+  }
+
+  function snap(n: number): number {
+    const clamped = clampToRange(n);
+    if (step === null) {
+      if (markKeys.length === 0) return clamped;
+      return markKeys.reduce((best, k) =>
+        Math.abs(k - clamped) < Math.abs(best - clamped) ? k : best,
+      );
+    }
+    const stepped = Math.round((clamped - min) / step) * step + min;
+    // Avoid float drift.
+    const decimals = decimalsOf(step);
+    const factor = 10 ** decimals;
+    return clampToRange(Math.round(stepped * factor) / factor);
+  }
+
+  function decimalsOf(n: number): number {
+    const s = String(n);
+    const dot = s.indexOf('.');
+    return dot === -1 ? 0 : s.length - dot - 1;
+  }
+
+  function valueToPercent(n: number): number {
+    if (max === min) return 0;
+    return ((n - min) / (max - min)) * 100;
+  }
+
+  function commit(next: SliderValue, complete = false) {
+    // Controlled: never write the prop; propagate only via onChange.
+    if (!isControlled) inner = next;
+    onChange?.(next);
+    // onInput: low-level input signal, kept in sync with change.
+    onInput?.(next);
+    // onChangeComplete / onAfterChange: only when the interaction settles (pointerup / keyboard),
+    // for request throttling on the consumer side.
+    if (complete) {
+      onChangeComplete?.(next);
+      onAfterChange?.(next);
+      maybeAnnounceBoundary(next);
+    }
+  }
+
+  // Build the next value for a given handle index, honoring allowCross and pushable.
+  function withHandle(index: number, raw: number): SliderValue {
+    const snapped = snap(raw);
+    if (!range) return snapped;
+    const pair: Pair = [...(current as Pair)] as Pair;
+    pair[index] = snapped;
+
+    if (!allowCross) {
+      // Enforce left <= right; clamp instead of swap.
+      if (index === 0 && pair[0] > pair[1]) pair[0] = pair[1];
+      if (index === 1 && pair[1] < pair[0]) pair[1] = pair[0];
+    } else if (pushable !== false) {
+      // pushable: minimum gap between handles.
+      const minGap = typeof pushable === 'number' ? pushable : 0;
+      if (index === 0 && pair[0] > pair[1] - minGap) {
+        pair[1] = snap(pair[0] + minGap);
+        if (pair[1] > max) { pair[1] = max; pair[0] = snap(max - minGap); }
+      }
+      if (index === 1 && pair[1] < pair[0] + minGap) {
+        pair[0] = snap(pair[1] - minGap);
+        if (pair[0] < min) { pair[0] = min; pair[1] = snap(min + minGap); }
+      }
+    } else {
+      // Default: swap so handles never cross.
+      if (pair[0] > pair[1]) {
+        return [pair[1], pair[0]];
+      }
+    }
+    return pair;
+  }
+
+  // ---- Imperative pointer drag ----
+  // Plain (non-reactive) variables: rail rect is read once on pointerdown.
+  let railRect: DOMRect | null = null;
+  let activeIndex = 0;
+  let railElement: HTMLElement | null = null;
+
+  function ratioFromRect(rect: DOMRect, clientX: number, clientY: number): number {
+    let ratio: number;
+    if (vertical) {
+      // Default: bottom = min (value grows upward). verticalReverse flips it.
+      ratio = verticalReverse
+        ? (clientY - rect.top) / rect.height
+        : (rect.bottom - clientY) / rect.height;
+    } else {
+      const rtl = getComputedStyle(document.documentElement).direction === 'rtl';
+      const fromStart = (clientX - rect.left) / rect.width;
+      ratio = rtl ? 1 - fromStart : fromStart;
+    }
+    return Math.min(1, Math.max(0, ratio));
+  }
+
+  function rawFromClient(clientX: number, clientY: number): number {
+    if (!railRect) return min;
+    return min + ratioFromRect(railRect, clientX, clientY) * (max - min);
+  }
+
+  function nearestHandle(raw: number): number {
+    if (!range) return 0;
+    const [a, b] = current as Pair;
+    return Math.abs(raw - a) <= Math.abs(raw - b) ? 0 : 1;
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    const raw = rawFromClient(e.clientX, e.clientY);
+    const next = withHandle(activeIndex, raw);
+    // Fire onInput on every live value change during the drag; only emit when the
+    // value actually moved to avoid spamming identical values per pixel.
+    if (!sameValue(next, dragValue)) onInput?.(next);
+    dragValue = next;
+  }
+
+  function onPointerUp() {
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    if (dragValue !== null) {
+      const finalValue = dragValue;
+      dragValue = null;
+      // Drag settled: emit change + changeComplete (onInput already fired live).
+      if (!isControlled) inner = finalValue;
+      onChange?.(finalValue);
+      onChangeComplete?.(finalValue);
+      onAfterChange?.(finalValue);
+      maybeAnnounceBoundary(finalValue);
+    }
+    railRect = null;
+  }
+
+  function sameValue(a: SliderValue, b: SliderValue | null): boolean {
+    if (b === null) return false;
+    if (Array.isArray(a) && Array.isArray(b)) return a[0] === b[0] && a[1] === b[1];
+    return a === b;
+  }
+
+  function beginDrag(index: number, e: PointerEvent) {
+    if (disabled || !railElement) return;
+    activeIndex = index;
+    railRect = railElement.getBoundingClientRect();
+    dragValue = withHandle(index, rawFromClient(e.clientX, e.clientY));
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+  }
+
+  function handleHandlePointerDown(index: number, e: PointerEvent) {
+    if (disabled || !railElement) return;
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).focus();
+    beginDrag(index, e);
+  }
+
+  function handleRailPointerDown(e: PointerEvent) {
+    if (disabled || !railElement || !clickable) return;
+    const rect = railElement.getBoundingClientRect();
+    const raw = min + ratioFromRect(rect, e.clientX, e.clientY) * (max - min);
+    beginDrag(nearestHandle(raw), e);
+  }
+
+  // RTL detection for keyboard mapping (SSR-safe). Mirrors the pointer path which
+  // reads documentElement direction.
+  function isRtl(): boolean {
+    if (typeof document === 'undefined') return false;
+    return getComputedStyle(document.documentElement).direction === 'rtl';
+  }
+
+  // Map an arrow key to +1 / -1 / 0 (other) so the *visual* direction always
+  // matches increase/decrease, honoring vertical + verticalReverse + RTL.
+  // Horizontal: Right increases, Left decreases — flipped under RTL.
+  // Vertical: Up increases, Down decreases — flipped under verticalReverse.
+  // (The cross-axis arrows stay consistent with APG: Right/Up increase.)
+  function arrowDirection(key: string): -1 | 0 | 1 {
+    const rtl = isRtl();
+    switch (key) {
+      case 'ArrowUp':
+        return vertical && verticalReverse ? -1 : 1;
+      case 'ArrowDown':
+        return vertical && verticalReverse ? 1 : -1;
+      case 'ArrowRight':
+        return rtl ? -1 : 1;
+      case 'ArrowLeft':
+        return rtl ? 1 : -1;
+      default:
+        return 0;
+    }
+  }
+
+  function handleKeydown(index: number, e: KeyboardEvent) {
+    if (disabled) return;
+    const cur = handleValue(index);
+    const stepSize = step ?? 1;
+    const bigStep = stepSize * 10;
+    let next = cur;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        next = cur + arrowDirection(e.key) * stepSize;
+        break;
+      case 'PageUp':
+        next = cur + bigStep;
+        break;
+      case 'PageDown':
+        next = cur - bigStep;
+        break;
+      case 'Home':
+        next = min;
+        break;
+      case 'End':
+        next = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    // Keyboard step settles immediately: change + input + changeComplete.
+    commit(withHandle(index, next), true);
+  }
+
+  // Track geometry (percent) for the filled segment.
+  const trackStart = $derived(range ? valueToPercent(values[0]) : 0);
+  const trackEnd = $derived(valueToPercent(range ? values[1] : (current as number)));
+  const handleList = $derived(range ? ([0, 1] as const) : ([1] as const));
+
+  function handleValue(index: number): number {
+    if (!range) return current as number;
+    return (current as Pair)[index] ?? min;
+  }
+
+  // Per-handle aria-valuemin/max. In range mode the two handles must not report
+  // ranges that allow crossing: the low handle (0) caps its max at the high
+  // handle's current value, and the high handle (1) floors its min at the low
+  // handle's current value (防越界的可达性表达 — spec §6).
+  function handleMin(index: number): number {
+    if (range && index === 1) return (current as Pair)[0] ?? min;
+    return min;
+  }
+  function handleMax(index: number): number {
+    if (range && index === 0) return (current as Pair)[1] ?? max;
+    return max;
+  }
+
+  // A dot sits inside the filled segment (active) when between trackStart/End.
+  function dotActive(v: number): boolean {
+    const pct = valueToPercent(v);
+    return included && pct >= trackStart - 1e-9 && pct <= trackEnd + 1e-9;
+  }
+
+  // Should the value bubble show for a given handle?
+  function tipText(index: number): string | null {
+    return tipFormatter ? tipFormatter(handleValue(index)) : String(handleValue(index));
+  }
+  function tipShown(index: number): boolean {
+    if (tipText(index) === null) return false;
+    if (tooltipVisible !== undefined) return tooltipVisible;
+    if (alwaysShowTip) return true;
+    if (dragValue !== null && activeIndex === index) return true;
+    return hoverIndex === index || focusIndex === index;
+  }
+
+  function ariaValueText(index: number): string | undefined {
+    const v = handleValue(index);
+    if (getAriaValueText) return getAriaValueText(v, index);
+    const t = tipFormatter ? tipFormatter(v) : null;
+    return t ?? undefined;
+  }
+
+  // Position style for an element at a value percent, honoring direction.
+  function posStyle(pct: number): string {
+    if (vertical) {
+      return verticalReverse ? `inset-block-start: ${pct}%` : `inset-block-end: ${pct}%`;
+    }
+    return `inset-inline-start: ${pct}%`;
+  }
+
+  const cls = $derived(
+    [
+      'cd-slider',
+      `cd-slider--${size}`,
+      `cd-slider--${vertical ? 'vertical' : 'horizontal'}`,
+      vertical && verticalReverse && 'cd-slider--reverse',
+      status !== 'default' && `cd-slider--${status}`,
+      disabled && 'cd-slider--disabled',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  // Track segment style: anchor + size, honoring vertical reverse.
+  const trackSegStyle = $derived.by(() => {
+    const segSize = `${trackEnd - trackStart}%`;
+    if (vertical) {
+      return verticalReverse
+        ? `inset-block-start: ${trackStart}%; block-size: ${segSize}`
+        : `inset-block-end: ${trackStart}%; block-size: ${segSize}`;
+    }
+    return `inset-inline-start: ${trackStart}%; inline-size: ${segSize}`;
+  });
+
+  // trackStyle: merge user-provided custom track styles into the segment style string.
+  // In range mode trackStyle may be an array; index 0 applies to the single segment
+  // (the filled area between the two handles). Single mode uses index 0 or the object directly.
+  function getTrackStyleStr(segIndex: number): string {
+    if (!trackStyle) return '';
+    const styleObj = Array.isArray(trackStyle) ? trackStyle[segIndex] : trackStyle;
+    if (!styleObj) return '';
+    return Object.entries(styleObj).map(([k, v]) => `${k}: ${v}`).join('; ');
+  }
+</script>
+
+<div
+  {id}
+  class={cls}
+  class:cd-slider--vertical={vertical}
+  role="group"
+  aria-label={ariaLabelledby ? undefined : ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  aria-disabled={disabled || undefined}
+  style={vertical ? `block-size: ${height}px` : undefined}
+>
+  <div
+    class="cd-slider__rail"
+    role="presentation"
+    bind:this={railElement}
+    style={railStyle}
+    onpointerdown={handleRailPointerDown}
+  >
+    {#if included}
+      <div
+        class="cd-slider__track"
+        style={[trackSegStyle, getTrackStyleStr(0)].filter(Boolean).join('; ')}
+      ></div>
+    {/if}
+
+    {#each dotValues as dv (dv)}
+      {@const pct = valueToPercent(dv)}
+      <span
+        class="cd-slider__dot"
+        class:cd-slider__dot--active={dotActive(dv)}
+        style={posStyle(pct)}
+      ></span>
+    {/each}
+
+    {#each markKeys as mk (mk)}
+      {@const pct = valueToPercent(mk)}
+      <span class="cd-slider__mark" style={posStyle(pct)}>{marks?.[mk]}</span>
+    {/each}
+
+    {#each handleList as index (index)}
+      {@const hv = handleValue(index)}
+      {@const pct = valueToPercent(hv)}
+      <span
+        class="cd-slider__handle"
+        role="slider"
+        tabindex={disabled ? -1 : 0}
+        aria-label={ariaLabelledby ? undefined : ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        aria-orientation={vertical ? 'vertical' : 'horizontal'}
+        aria-valuemin={handleMin(index)}
+        aria-valuemax={handleMax(index)}
+        aria-valuenow={hv}
+        aria-valuetext={ariaValueText(index)}
+        aria-disabled={disabled || undefined}
+        style={`${posStyle(pct)};${handleStyle ?? ''}`}
+        onpointerdown={(e) => handleHandlePointerDown(index, e)}
+        onkeydown={(e) => handleKeydown(index, e)}
+        onpointerenter={() => (hoverIndex = index)}
+        onpointerleave={() => (hoverIndex = null)}
+        onfocus={() => {
+          focusIndex = index;
+          onFocus?.({ index });
+        }}
+        onblur={() => {
+          focusIndex = null;
+          onBlur?.({ index });
+        }}
+      >
+        {#if tipShown(index)}
+          <span class="cd-slider__tip" role="tooltip" aria-hidden="true">{tipText(index)}</span>
+        {/if}
+      </span>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .cd-slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    padding-block: var(--cd-spacing-2);
+    touch-action: none;
+  }
+  .cd-slider--vertical {
+    display: inline-flex;
+    inline-size: auto;
+    block-size: 200px;
+    padding-block: 0;
+    padding-inline: var(--cd-spacing-2);
+  }
+  .cd-slider__rail {
+    position: relative;
+    flex: 1 1 auto;
+    inline-size: 100%;
+    block-size: var(--cd-slider-rail-height);
+    background: var(--cd-slider-rail-bg);
+    border-radius: var(--cd-slider-radius);
+    cursor: pointer;
+  }
+  .cd-slider--vertical .cd-slider__rail {
+    inline-size: var(--cd-slider-rail-height);
+    block-size: 100%;
+  }
+  .cd-slider__track {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    background: var(--cd-slider-track-bg);
+    border-radius: var(--cd-slider-radius);
+  }
+  .cd-slider--vertical .cd-slider__track {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: 100%;
+  }
+  .cd-slider__handle {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--cd-slider-handle-size);
+    block-size: var(--cd-slider-handle-size);
+    background: var(--cd-slider-handle-bg);
+    border: 2px solid var(--cd-slider-handle-border);
+    border-radius: var(--cd-radius-full);
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    outline: none;
+    transition: box-shadow var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  .cd-slider--vertical .cd-slider__handle {
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    transform: translate(-50%, 50%);
+  }
+  /* Reverse vertical: handle anchored from the top, offset upward by half. */
+  .cd-slider--vertical.cd-slider--reverse .cd-slider__handle {
+    transform: translate(-50%, -50%);
+  }
+  .cd-slider__handle:hover {
+    box-shadow: var(--cd-shadow-1);
+  }
+  .cd-slider__handle:active {
+    cursor: grabbing;
+  }
+  .cd-slider__handle:focus-visible {
+    box-shadow: var(--cd-focus-ring);
+  }
+  /* Value bubble above the handle. */
+  .cd-slider__tip {
+    position: absolute;
+    inset-block-end: calc(100% + var(--cd-spacing-2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 2px var(--cd-spacing-2);
+    background: var(--cd-color-bg-inverse, rgba(0, 0, 0, 0.85));
+    color: var(--cd-color-text-inverse, #fff);
+    font-size: var(--cd-font-size-1);
+    line-height: 1.4;
+    white-space: nowrap;
+    border-radius: var(--cd-radius-1, 4px);
+    pointer-events: none;
+    z-index: 1;
+  }
+  .cd-slider--vertical .cd-slider__tip {
+    inset-block-end: 50%;
+    inset-inline-start: calc(100% + var(--cd-spacing-2));
+    transform: translateY(50%);
+  }
+  /* Step dots. */
+  .cd-slider__dot {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 8px;
+    block-size: 8px;
+    background: var(--cd-color-bg-0);
+    border: 2px solid var(--cd-slider-dot-color, var(--cd-color-border));
+    border-radius: var(--cd-radius-full);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+  .cd-slider__dot--active {
+    border-color: var(--cd-slider-dot-color-active, var(--cd-color-primary));
+  }
+  .cd-slider--vertical .cd-slider__dot {
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    transform: translate(-50%, 50%);
+  }
+  .cd-slider--vertical.cd-slider--reverse .cd-slider__dot {
+    transform: translate(-50%, -50%);
+  }
+  .cd-slider__mark {
+    position: absolute;
+    inset-block-start: calc(100% + var(--cd-spacing-2));
+    transform: translateX(-50%);
+    color: var(--cd-slider-mark-color);
+    font-size: var(--cd-font-size-1);
+    white-space: nowrap;
+  }
+  .cd-slider--vertical .cd-slider__mark {
+    inset-block-start: auto;
+    inset-inline-start: calc(100% + var(--cd-spacing-2));
+    transform: translateY(50%);
+  }
+  .cd-slider--vertical.cd-slider--reverse .cd-slider__mark {
+    transform: translateY(-50%);
+  }
+  .cd-slider--disabled {
+    opacity: 0.5;
+  }
+  .cd-slider--disabled .cd-slider__rail,
+  .cd-slider--disabled .cd-slider__handle {
+    cursor: not-allowed;
+  }
+  .cd-slider--disabled .cd-slider__track {
+    background: var(--cd-color-text-3);
+  }
+  /* 校验态：已选轨道段与手柄边框改用 warning/error 色调（disabled 优先）。 */
+  .cd-slider--warning:not(.cd-slider--disabled) .cd-slider__track {
+    background: var(--cd-slider-status-warning);
+  }
+  .cd-slider--warning:not(.cd-slider--disabled) .cd-slider__handle {
+    border-color: var(--cd-slider-status-warning);
+  }
+  .cd-slider--error:not(.cd-slider--disabled) .cd-slider__track {
+    background: var(--cd-slider-status-error);
+  }
+  .cd-slider--error:not(.cd-slider--disabled) .cd-slider__handle {
+    border-color: var(--cd-slider-status-error);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cd-slider__handle {
+      transition: none;
+    }
+  }
+</style>