@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/slider/Slider.svelte

@@ -1,716 +0,0 @@
-<!--
-  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>