@gtivr4/a1-design-system-react 0.13.3 → 0.15.0

package/src/components/section/section.css

@@ -13,7 +13,15 @@
   --a1-section-border-size: 0;
   --a1-section-border-style: solid;
   --a1-section-border-color: transparent;
-  border: var(--a1-section-border-size) var(--a1-section-border-style) var(--a1-section-border-color);
+  /* Per-side widths default to the full border size (all sides). The sided
+     modifier zeroes them so individual sides can be opted back in. */
+  --a1-section-border-top: var(--a1-section-border-size);
+  --a1-section-border-right: var(--a1-section-border-size);
+  --a1-section-border-bottom: var(--a1-section-border-size);
+  --a1-section-border-left: var(--a1-section-border-size);
+  border-style: var(--a1-section-border-style);
+  border-color: var(--a1-section-border-color);
+  border-width: var(--a1-section-border-top) var(--a1-section-border-right) var(--a1-section-border-bottom) var(--a1-section-border-left);
 }
 
 .a1-section.a1-inverse {
@@ -42,6 +50,18 @@
 .a1-section--border-strong { --a1-section-border-color: var(--semantic-color-border-strong); }
 .a1-section--border-accent { --a1-section-border-color: var(--semantic-color-text-accent); }
 
+/* Per-side borders: start from no sides, then opt each chosen side back in. */
+.a1-section--border-sided {
+  --a1-section-border-top: 0;
+  --a1-section-border-right: 0;
+  --a1-section-border-bottom: 0;
+  --a1-section-border-left: 0;
+}
+.a1-section--border-side-top    { --a1-section-border-top: var(--a1-section-border-size); }
+.a1-section--border-side-right  { --a1-section-border-right: var(--a1-section-border-size); }
+.a1-section--border-side-bottom { --a1-section-border-bottom: var(--a1-section-border-size); }
+.a1-section--border-side-left   { --a1-section-border-left: var(--a1-section-border-size); }
+
 /* ── Radius ────────────────────────────────────────────────────────────────── */
 
 .a1-section--radius-none { border-radius: 0; }
@@ -92,21 +112,24 @@
 
 /* ── Content gap ──────────────────────────────────────────────────────────── */
 
-.a1-section--gap-xs,
-.a1-section--gap-sm,
-.a1-section--gap-md,
-.a1-section--gap-lg,
-.a1-section--gap-xl {
-  display: grid;
-  justify-items: var(--a1-section-justify-items);
-}
-
+/* A gap is the grid gap only when the section is a grid — i.e. when it is
+   aligned (or height-hero). Without alignment the section flows as block
+   (block children fill the width; inline content keeps its natural size) and
+   the gap becomes vertical rhythm via margins, since `gap` has no effect on
+   display:block. This keeps natural-width content (a Button, a Badge) from
+   being stretched by the grid when no alignment is requested. */
 .a1-section--gap-xs { gap: var(--semantic-spacing-gap-xs); }
 .a1-section--gap-sm { gap: var(--semantic-spacing-gap-sm); }
 .a1-section--gap-md { gap: var(--semantic-spacing-gap-md); }
 .a1-section--gap-lg { gap: var(--semantic-spacing-gap-lg); }
 .a1-section--gap-xl { gap: var(--semantic-spacing-gap-xl); }
 
+.a1-section--gap-xs:not([class*="-align-"]):not(.a1-section--height-hero) > * + * { margin-block-start: var(--semantic-spacing-gap-xs); }
+.a1-section--gap-sm:not([class*="-align-"]):not(.a1-section--height-hero) > * + * { margin-block-start: var(--semantic-spacing-gap-sm); }
+.a1-section--gap-md:not([class*="-align-"]):not(.a1-section--height-hero) > * + * { margin-block-start: var(--semantic-spacing-gap-md); }
+.a1-section--gap-lg:not([class*="-align-"]):not(.a1-section--height-hero) > * + * { margin-block-start: var(--semantic-spacing-gap-lg); }
+.a1-section--gap-xl:not([class*="-align-"]):not(.a1-section--height-hero) > * + * { margin-block-start: var(--semantic-spacing-gap-xl); }
+
 /* ── Height ────────────────────────────────────────────────────────────────── */
 
 .a1-section--height-screen {

package/src/components/slider/Slider.d.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+
+/**
+ * A detent (snap stop): a bare value, or a value with an optional display `label`
+ * and/or `icon` (a Material Symbols name shown in the label row instead of text).
+ * Provide a `label` alongside an `icon` to give screen readers a text alternative.
+ */
+export type SliderDetent = number | { value: number; label?: React.ReactNode; icon?: string };
+
+export interface SliderProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue" | "onChange" | "min" | "max" | "step"
+  > {
+  /** Controlled value (in the value domain — a detent value when `detents` is set). */
+  value?: number;
+  /** Uncontrolled initial value. Defaults to the first detent, or `min`. */
+  defaultValue?: number;
+  /** Called with the new value on every change. */
+  onChange?: (value: number) => void;
+  /** Minimum (continuous mode). Default: 0 */
+  min?: number;
+  /** Maximum (continuous mode). Default: 100 */
+  max?: number;
+  /** Step granularity (continuous mode). Default: 1 */
+  step?: number;
+  /**
+   * Optional snap stops. Pass numbers, or `{ value, label }` to show labels under
+   * the track (e.g. `[{value:0,label:'None'},{value:1,label:'XS'},…]`). The thumb
+   * snaps between detents and the keyboard moves one detent at a time.
+   */
+  detents?: SliderDetent[];
+  /**
+   * Visible field label rendered above the control and associated with it (also
+   * the accessible name). Sized to match the field family per `size`. Use
+   * `aria-label` / `aria-labelledby` instead for an invisible name.
+   */
+  label?: React.ReactNode;
+  /**
+   * Density, matching the field family. Default: "default". Scales the label,
+   * detent labels, track, and thumb so a Slider sits naturally beside fields.
+   */
+  size?: "compact" | "default" | "comfortable";
+  /**
+   * Selection colour. "default" uses the action colour; "subtle" uses neutrals
+   * for the fill, thumb, and active detent. Default: "default"
+   */
+  variant?: "default" | "subtle";
+  /** Show the floating value bubble while dragging/focused. Default: true */
+  showValue?: boolean;
+  /** Preferred bubble side; it flips to stay in the viewport. Default: "above" */
+  valuePosition?: "above" | "below";
+  /** Format the bubble + `aria-valuetext`. Defaults to the detent label or the number. */
+  formatValue?: (value: number) => React.ReactNode;
+  /**
+   * An alternate label shown in the value bubble (visual only — `aria-valuetext`
+   * is unchanged). A node is used as-is; a function receives the current value
+   * and the active detent. When omitted, the bubble keeps its current content
+   * (the formatted value, detent label/icon, or the raw value). Useful for a
+   * longer spoken-out size name (e.g. "Small") while the detent stays "SM".
+   */
+  bubbleLabel?: React.ReactNode | ((value: number, detent: { value: number; label?: React.ReactNode; icon?: string } | null) => React.ReactNode);
+  /** Disable the slider. Default: false */
+  disabled?: boolean;
+  /** Form field name. */
+  name?: string;
+  id?: string;
+  className?: string;
+}
+
+export declare function Slider(props: SliderProps): React.ReactElement;

package/src/components/slider/Slider.jsx

@@ -0,0 +1,243 @@
+import "./slider.css";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Icon } from "../icon/Icon.jsx";
+
+// Density sizes mirror the field family so a Slider sits naturally beside fields.
+const VALID_SLIDER_SIZES = ["compact", "default", "comfortable"];
+
+/** Normalize the `detents` prop to `{ value, label, icon }[]` (or null when absent). */
+function normalizeDetents(detents) {
+  if (!Array.isArray(detents) || detents.length === 0) return null;
+  return detents.map((d) =>
+    typeof d === "number"
+      ? { value: d, label: undefined, icon: undefined }
+      : { value: d.value, label: d.label, icon: d.icon },
+  );
+}
+
+/** Index of the detent closest to `value`. */
+function nearestDetentIndex(detents, value) {
+  let best = 0;
+  let bestDist = Infinity;
+  detents.forEach((d, i) => {
+    const dist = Math.abs(d.value - value);
+    if (dist < bestDist) { bestDist = dist; best = i; }
+  });
+  return best;
+}
+
+/** Position (and the matching CSS for ticks/labels) of a thumb at fraction `p`
+ *  (0–1), accounting for the thumb's width so it tracks the real thumb centre. */
+function thumbLeft(p) {
+  return `calc(var(--a1-slider-thumb-size) / 2 + ${p} * (100% - var(--a1-slider-thumb-size)))`;
+}
+
+/**
+ * Slider — a range input with an optional set of **detents** (labeled stops the
+ * thumb snaps to, e.g. None / XS / SM / LG) and a value bubble that follows the
+ * thumb while you drag or focus it, flipping above/below to stay in the viewport.
+ *
+ * Built on a native `<input type="range">`, so keyboard support (arrows, Home/End,
+ * Page Up/Down), focus, touch, and form semantics come for free. The accessible
+ * value is announced via `aria-valuetext` (the detent label when present).
+ */
+export function Slider({
+  value,
+  defaultValue,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  detents,
+  label,
+  size = "default",
+  variant = "default",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  showValue = true,
+  valuePosition = "above",
+  formatValue,
+  bubbleLabel,
+  disabled = false,
+  name,
+  id,
+  className = "",
+  ...rest
+}) {
+  const reactId = useId();
+  const sliderId = id ?? `a1-slider-${reactId}`;
+  const dets = normalizeDetents(detents);
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(() =>
+    defaultValue !== undefined ? defaultValue : dets ? dets[0].value : min,
+  );
+  const current = isControlled ? value : internal;
+
+  // In detent mode the native input works in index space (0..n-1, step 1).
+  const detentIndex = dets ? nearestDetentIndex(dets, current) : null;
+  const inputMin = dets ? 0 : min;
+  const inputMax = dets ? dets.length - 1 : max;
+  const inputStep = dets ? 1 : step;
+  const inputValue = dets ? detentIndex : current;
+  const pct = inputMax === inputMin ? 0 : (inputValue - inputMin) / (inputMax - inputMin);
+
+  const controlRef = useRef(null);
+  const [interacting, setInteracting] = useState(false);
+  const [placement, setPlacement] = useState(valuePosition);
+
+  function commit(next) {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  }
+
+  function handleInput(e) {
+    const raw = Number(e.target.value);
+    commit(dets ? dets[Math.round(raw)].value : raw);
+  }
+
+  const activeDetent = dets ? dets[detentIndex] : null;
+  const formatted = formatValue ? formatValue(current) : null;
+
+  // Accessible value text — always a string (an icon detent falls back to its
+  // label, then its numeric value, so screen readers still announce something).
+  const ariaValueText =
+    typeof formatted === "string" ? formatted
+      : activeDetent?.label != null ? String(activeDetent.label)
+        : activeDetent ? String(activeDetent.value)
+          : String(current);
+
+  // Optional bubble-specific label (visual only; aria-valuetext is unchanged).
+  // A function receives the current value and active detent; a node is used as-is.
+  const resolvedBubbleLabel =
+    typeof bubbleLabel === "function" ? bubbleLabel(current, activeDetent)
+      : bubbleLabel != null ? bubbleLabel
+        : null;
+
+  // Visual bubble content — the explicit bubble label wins, then a formatted
+  // value, then the active detent (label, icon, or value), then the raw value.
+  const bubbleContent =
+    resolvedBubbleLabel != null ? resolvedBubbleLabel
+      : formatted != null ? formatted
+        : activeDetent
+          ? (activeDetent.label != null
+              ? activeDetent.label
+              : activeDetent.icon
+                ? <Icon name={activeDetent.icon} size="sm" color="inverse" />
+                : String(activeDetent.value))
+          : String(current);
+
+  // Keep the bubble in the viewport: honor `valuePosition`, but flip if the
+  // chosen side would clip the top/bottom edge.
+  const updatePlacement = useCallback(() => {
+    const el = controlRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const MARGIN = 56;
+    if (valuePosition === "above" && rect.top < MARGIN) setPlacement("below");
+    else if (valuePosition === "below" && rect.bottom > window.innerHeight - MARGIN) setPlacement("above");
+    else setPlacement(valuePosition);
+  }, [valuePosition]);
+
+  useLayoutEffect(() => {
+    if (interacting) updatePlacement();
+  }, [interacting, current, updatePlacement]);
+
+  useEffect(() => {
+    if (!interacting) return undefined;
+    const onMove = () => updatePlacement();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  }, [interacting, updatePlacement]);
+
+  const showBubble = showValue && interacting && !disabled;
+  const hasLabelRow = !!dets && dets.some((d) => d.label != null || d.icon != null);
+
+  const resolvedSize = VALID_SLIDER_SIZES.includes(size) ? size : "default";
+
+  const classes = [
+    "a1-slider",
+    resolvedSize !== "default" && `a1-slider--${resolvedSize}`,
+    variant === "subtle" && "a1-slider--subtle",
+    dets && "a1-slider--detents",
+    disabled && "a1-slider--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} style={{ "--a1-slider-pct": pct }}>
+      {label != null && (
+        <label className="a1-slider__field-label" htmlFor={sliderId}>{label}</label>
+      )}
+      <div className="a1-slider__control" ref={controlRef}>
+        {showBubble && (
+          <span className={`a1-slider__bubble a1-slider__bubble--${placement}`} aria-hidden="true">
+            {bubbleContent}
+          </span>
+        )}
+        <input
+          type="range"
+          id={sliderId}
+          name={name}
+          className="a1-slider__input"
+          min={inputMin}
+          max={inputMax}
+          step={inputStep}
+          value={inputValue}
+          disabled={disabled}
+          // The visible `<label htmlFor>` names the input; only fall back to
+          // aria-label when there's no visible label.
+          aria-label={label != null ? ariaLabel : (ariaLabel ?? undefined)}
+          aria-labelledby={ariaLabelledBy}
+          aria-valuetext={ariaValueText}
+          onChange={handleInput}
+          onFocus={() => setInteracting(true)}
+          onBlur={() => setInteracting(false)}
+          onPointerDown={() => setInteracting(true)}
+          onPointerUp={() => setInteracting(false)}
+          onPointerCancel={() => setInteracting(false)}
+          {...rest}
+        />
+        {dets && (
+          <div className="a1-slider__ticks" aria-hidden="true">
+            {dets.map((d, i) => {
+              const p = dets.length === 1 ? 0 : i / (dets.length - 1);
+              return (
+                <span
+                  key={i}
+                  className="a1-slider__tick"
+                  data-active={p <= pct || undefined}
+                  style={{ left: thumbLeft(p) }}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {hasLabelRow && (
+        <div className="a1-slider__labels" aria-hidden="true">
+          {dets.map((d, i) => {
+            const p = dets.length === 1 ? 0 : i / (dets.length - 1);
+            const transform =
+              i === 0 ? "translateX(0)" : i === dets.length - 1 ? "translateX(-100%)" : "translateX(-50%)";
+            return (
+              <span
+                key={i}
+                className="a1-slider__label"
+                data-active={i === detentIndex || undefined}
+                style={{ left: thumbLeft(p), transform }}
+              >
+                {d.icon ? <Icon name={d.icon} size="sm" /> : (d.label ?? d.value)}
+              </span>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/slider/slider.css

@@ -0,0 +1,230 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Slider
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.a1-slider {
+  /* Variant layer — every value resolves to a Style Dictionary token. */
+  --a1-slider-track-height: var(--base-spacing-8);
+  --a1-slider-thumb-size: var(--base-spacing-20);
+  --a1-slider-track-color: var(--semantic-color-border-subtle);
+  --a1-slider-fill-color: var(--semantic-color-action-background);
+  --a1-slider-thumb-color: var(--semantic-color-action-background);
+  --a1-slider-thumb-ring: var(--semantic-color-surface-page);
+  --a1-slider-active-color: var(--semantic-color-text-accent);
+  /* Label + detent sizing mirror the field family so a Slider matches fields. */
+  --a1-slider-label-size: var(--semantic-font-size-form-label-default);
+  --a1-slider-label-weight: var(--component-field-label-font-weight);
+  --a1-slider-detent-size: var(--semantic-font-size-body-sm);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-4);
+  inline-size: 100%;
+}
+
+/* ── Sizes (match the field family: compact / default / comfortable) ─────────── */
+
+.a1-slider--compact {
+  --a1-slider-track-height: var(--base-spacing-6);
+  --a1-slider-thumb-size: var(--base-spacing-16);
+  --a1-slider-label-size: var(--semantic-font-size-form-label-compact);
+  --a1-slider-label-weight: var(--component-field-compact-label-font-weight);
+  --a1-slider-detent-size: var(--semantic-font-size-body-xs);
+}
+
+.a1-slider--comfortable {
+  --a1-slider-track-height: var(--base-spacing-12);
+  --a1-slider-thumb-size: var(--base-spacing-24);
+  --a1-slider-label-size: var(--semantic-font-size-form-label-comfortable);
+}
+
+/* Subtle variant — neutral fill/thumb/active instead of the action colour. */
+.a1-slider--subtle {
+  --a1-slider-fill-color: var(--semantic-color-text-default);
+  --a1-slider-thumb-color: var(--semantic-color-text-default);
+  --a1-slider-active-color: var(--semantic-color-text-default);
+}
+
+/* ── Field label ─────────────────────────────────────────────────────────────── */
+
+.a1-slider__field-label {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-slider-label-size);
+  font-weight: var(--a1-slider-label-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+/* ── Control (track + thumb + bubble + ticks) ──────────────────────────────── */
+
+.a1-slider__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  block-size: var(--a1-slider-thumb-size);
+}
+
+.a1-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  inline-size: 100%;
+  block-size: var(--a1-slider-thumb-size);
+  background: transparent;
+  cursor: pointer;
+}
+
+.a1-slider__input:focus-visible {
+  outline: none;
+}
+
+/* Track — WebKit/Blink. Fill is drawn as a gradient up to --a1-slider-pct. */
+.a1-slider__input::-webkit-slider-runnable-track {
+  block-size: var(--a1-slider-track-height);
+  border-radius: var(--base-radius-pill);
+  background: linear-gradient(
+    to right,
+    var(--a1-slider-fill-color) 0%,
+    var(--a1-slider-fill-color) calc(var(--a1-slider-pct) * 100%),
+    var(--a1-slider-track-color) calc(var(--a1-slider-pct) * 100%),
+    var(--a1-slider-track-color) 100%
+  );
+}
+
+/* Track — Firefox. */
+.a1-slider__input::-moz-range-track {
+  block-size: var(--a1-slider-track-height);
+  border-radius: var(--base-radius-pill);
+  background: var(--a1-slider-track-color);
+}
+.a1-slider__input::-moz-range-progress {
+  block-size: var(--a1-slider-track-height);
+  border-radius: var(--base-radius-pill);
+  background: var(--a1-slider-fill-color);
+}
+
+/* Thumb — WebKit/Blink. margin-top centers it on the thinner track. */
+.a1-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  inline-size: var(--a1-slider-thumb-size);
+  block-size: var(--a1-slider-thumb-size);
+  margin-block-start: calc((var(--a1-slider-track-height) - var(--a1-slider-thumb-size)) / 2);
+  border-radius: var(--base-radius-pill);
+  background: var(--a1-slider-thumb-color);
+  border: var(--base-spacing-2) solid var(--a1-slider-thumb-ring);
+  box-shadow: var(--component-switch-thumb-shadow);
+}
+
+/* Thumb — Firefox. */
+.a1-slider__input::-moz-range-thumb {
+  inline-size: var(--a1-slider-thumb-size);
+  block-size: var(--a1-slider-thumb-size);
+  border-radius: var(--base-radius-pill);
+  background: var(--a1-slider-thumb-color);
+  border: var(--base-spacing-2) solid var(--a1-slider-thumb-ring);
+  box-shadow: var(--component-switch-thumb-shadow);
+}
+
+/* Focus ring on the thumb (base shadow + accent ring). */
+.a1-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--component-switch-thumb-shadow), 0 0 0 var(--component-button-focus-ring-width) var(--component-field-focus-ring-color);
+}
+.a1-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow: var(--component-switch-thumb-shadow), 0 0 0 var(--component-button-focus-ring-width) var(--component-field-focus-ring-color);
+}
+
+/* ── Detent ticks ──────────────────────────────────────────────────────────── */
+
+.a1-slider__ticks {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: 0;
+  pointer-events: none;
+}
+
+.a1-slider__tick {
+  position: absolute;
+  inline-size: var(--base-spacing-4);
+  block-size: var(--base-spacing-4);
+  border-radius: var(--base-radius-pill);
+  background: var(--semantic-color-border-default);
+  transform: translate(-50%, -50%);
+}
+
+.a1-slider__tick[data-active] {
+  background: var(--semantic-color-surface-page);
+}
+
+/* ── Value bubble ──────────────────────────────────────────────────────────── */
+
+.a1-slider__bubble {
+  position: absolute;
+  left: calc(var(--a1-slider-thumb-size) / 2 + var(--a1-slider-pct) * (100% - var(--a1-slider-thumb-size)));
+  /* Anchor by progress so the bubble never spills past the control: left-aligned
+     at the start (0%), centered mid-track (-50%), right-aligned at the end
+     (-100%) — mirrors the detent-label end alignment. */
+  transform: translateX(calc(var(--a1-slider-pct) * -100%));
+  padding-block: var(--base-spacing-2);
+  padding-inline: var(--base-spacing-8);
+  border-radius: var(--base-radius-md);
+  background: var(--semantic-color-surface-inverse);
+  color: var(--semantic-color-text-inverse);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  line-height: var(--semantic-font-line-height-body);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.a1-slider__bubble--above { inset-block-end: calc(100% + var(--base-spacing-4)); }
+.a1-slider__bubble--below { inset-block-start: calc(100% + var(--base-spacing-4)); }
+
+/* Little caret pointing at the thumb. As the bubble is anchored by progress, the
+   caret tracks the thumb position within the bubble (0% → 100%). */
+.a1-slider__bubble::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(var(--a1-slider-pct) * 100%);
+  inline-size: var(--base-spacing-8);
+  block-size: var(--base-spacing-8);
+  background: var(--semantic-color-surface-inverse);
+  transform: translateX(-50%) rotate(45deg);
+}
+.a1-slider__bubble--above::after { inset-block-start: calc(100% - var(--base-spacing-4)); }
+.a1-slider__bubble--below::after { inset-block-end: calc(100% - var(--base-spacing-4)); }
+
+/* ── Detent labels ─────────────────────────────────────────────────────────── */
+
+.a1-slider__labels {
+  position: relative;
+  block-size: var(--a1-slider-detent-size);
+}
+
+.a1-slider__label {
+  position: absolute;
+  inset-block-start: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-slider-detent-size);
+  line-height: 1;
+  color: var(--semantic-color-text-muted);
+  white-space: nowrap;
+}
+
+.a1-slider__label[data-active] {
+  color: var(--a1-slider-active-color);
+}
+
+/* ── Disabled ──────────────────────────────────────────────────────────────── */
+
+.a1-slider--disabled {
+  --a1-slider-fill-color: var(--semantic-color-border-default);
+  --a1-slider-thumb-color: var(--semantic-color-border-default);
+  opacity: 0.6;
+}
+
+.a1-slider--disabled .a1-slider__input {
+  cursor: not-allowed;
+}

package/src/components/split-button/SplitButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+/** A secondary action shown in the split button's menu. */
+export interface SplitButtonAction {
+  id: string;
+  label: React.ReactNode;
+  /** Optional Material Symbols icon name. */
+  icon?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export interface SplitButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** Main button label. */
+  children?: React.ReactNode;
+  /** Main (default) action. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Visual style, shared by both targets. Default: "primary". */
+  variant?: "primary" | "secondary" | "tertiary" | "destructive" | "success";
+  /** Size, shared by both targets. Default: "md". */
+  size?: "sm" | "md" | "lg";
+  /** Optional Material Symbols icon on the main button. */
+  icon?: string;
+  /** Icon position on the main button. Default: "start". */
+  iconPosition?: "start" | "end";
+  /** Show a spinner on the main button and make both targets inert. Default: false. */
+  loading?: boolean;
+  /** Disable both targets. Default: false. */
+  disabled?: boolean;
+  /** Secondary actions shown in the dropdown menu. */
+  actions?: SplitButtonAction[];
+  /** Accessible name for the menu. Default: "More actions". */
+  menuLabel?: string;
+  /** Accessible name for the caret toggle. Default: "More actions". */
+  toggleLabel?: string;
+  className?: string;
+}
+
+export declare function SplitButton(props: SplitButtonProps): React.ReactElement;