@gtivr4/a1-design-system-react 0.14.0 → 0.18.0

package/src/components/icon-button/icon-button.css

@@ -37,12 +37,22 @@
   --a1-icon-opsz: var(--a1-icon-button-icon-opsz, var(--component-icon-button-icon-optical-size));
 }
 
+/* ── Size: small ─────────────────────────────────────────────────────────── */
+/* 24×24px total — the WCAG 2.2 target-size (AA) minimum; for dense toolbars. */
+
+.a1-icon-button--small {
+  --a1-icon-button-size:      var(--base-spacing-24);
+  --a1-icon-button-icon-size: var(--base-spacing-16);
+}
+
 /* ── Size: large ─────────────────────────────────────────────────────────── */
 /* Touch target matches Button lg (3.5rem); icon matches Button lg's icon. */
 
 .a1-icon-button--large {
   --a1-icon-button-size:      var(--component-button-large-height);
-  --a1-icon-button-icon-size: var(--component-button-icon-size);
+  /* Icon is two steps up the icon scale (20 → 24 → 32px) so it reads at the
+     larger touch target. */
+  --a1-icon-button-icon-size: var(--base-spacing-32);
   --a1-icon-button-icon-opsz: var(--component-button-icon-optical-size);
 }
 

package/src/components/menu/Menu.jsx

@@ -81,6 +81,18 @@ export function Menu({
     el.style.setProperty("--a1-menu-top", `${Math.round(top)}px`);
     el.style.setProperty("--a1-menu-left", `${Math.round(left)}px`);
     el.style.setProperty("--a1-menu-max-height", `${Math.floor(maxHeight)}px`);
+
+    // `position: fixed` resolves against the nearest transformed/filtered
+    // ancestor's box, not the viewport — e.g. an `overlay` Toolbar positioned
+    // with a CSS transform. Measure where the menu actually landed and correct
+    // by the containing-block offset so it stays anchored to the viewport.
+    const placed = el.getBoundingClientRect();
+    const dx = left - placed.left;
+    const dy = top - placed.top;
+    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+      el.style.setProperty("--a1-menu-left", `${Math.round(left + dx)}px`);
+      el.style.setProperty("--a1-menu-top", `${Math.round(top + dy)}px`);
+    }
   }, [anchorRef]);
 
   const openDialog = useCallback(() => {

package/src/components/menu/menu.css

@@ -104,16 +104,27 @@
   background: transparent;
 }
 
-/* Active / current-page indicator */
+/* Active / current-page indicator — matches the TreeMenu selected pattern:
+   a solid action-background fill for a clear, unambiguous highlight. */
 .a1-menu-item--active {
-  color: var(--semantic-color-text-default);
-  background: var(--semantic-color-action-surface);
-  border-inline-start: 2px solid var(--semantic-color-action-background);
-  padding-inline-start: calc(var(--base-spacing-8) - 2px);
+  color: var(--semantic-color-action-foreground);
+  background: var(--semantic-color-action-background);
+}
+
+.a1-menu-item--active:hover {
+  background: var(--semantic-color-action-background-hover);
+}
+
+.a1-menu-item--active:active {
+  background: var(--semantic-color-action-background-pressed);
+}
+
+.a1-menu-item--active:focus-visible {
+  outline-color: var(--semantic-color-action-foreground);
 }
 
 .a1-menu-item--active .a1-menu-item__icon {
-  color: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-foreground);
 }
 
 /* Destructive variant */

package/src/components/page-layout/page-layout.css

@@ -117,10 +117,16 @@
   overflow-y: hidden;
 }
 
-.a1-page-layout--viewport-height .a1-page-layout__sidebar .a1-side-nav {
-  position: relative;
-  top: auto;
-  height: 100%;
+/* Only at lg+ is the sidebar persistent and in flow; pin the SideNav to fill the
+   sidebar height so its footer stays anchored. At md and below the SideNav must
+   keep its fixed-overlay behaviour (see side-nav.css) so the sidebar slot
+   collapses and the main column expands to fill the freed space. */
+@media (--bp-lg-up) {
+  .a1-page-layout--viewport-height .a1-page-layout__sidebar .a1-side-nav {
+    position: relative;
+    top: auto;
+    height: 100%;
+  }
 }
 
 .a1-page-layout--viewport-height .a1-page-layout__content {

package/src/components/page-nav/PageNav.jsx

@@ -2,6 +2,22 @@ import { useEffect, useRef, useState } from "react";
 import { Card } from "../card/Card.jsx";
 import "./page-nav.css";
 
+// Find the nearest scrollable ancestor of a node, or null when the page scrolls
+// on the document/window itself. Needed because the host may scroll a nested
+// container (e.g. a viewport-height PageLayout) rather than the window — in which
+// case window scroll never fires and the progress/active state would freeze.
+function getScrollParent(node) {
+  let el = node?.parentElement;
+  while (el && el !== document.body && el !== document.documentElement) {
+    const overflowY = getComputedStyle(el).overflowY;
+    if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return null;
+}
+
 export function PageNav({
   sections = [],
   label = "On this page",
@@ -12,22 +28,27 @@ export function PageNav({
   const [progress, setProgress] = useState(0);
   const intersectingIds = useRef(new Set());
 
-  // Reading progress: track document scroll position
+  // Reading progress: track the scroll position of the actual scroll container
+  // (the window, or a nested scrollable ancestor like a viewport-height layout).
   useEffect(() => {
+    const scroller = getScrollParent(sections.length ? document.getElementById(sections[0].id) : null);
+    const target = scroller ?? window;
     function update() {
-      const el = document.documentElement;
+      const el = scroller ?? document.documentElement;
       const total = el.scrollHeight - el.clientHeight;
       setProgress(total > 0 ? (el.scrollTop / total) * 100 : 0);
     }
-    window.addEventListener("scroll", update, { passive: true });
+    target.addEventListener("scroll", update, { passive: true });
     update();
-    return () => window.removeEventListener("scroll", update);
-  }, []);
+    return () => target.removeEventListener("scroll", update);
+  }, [sections]);
 
-  // Active section: observe each section element entering/leaving the viewport
+  // Active section: observe each section element entering/leaving the scroll
+  // container (root = the nested scroller, or the viewport when null).
   useEffect(() => {
     if (!sections.length) return;
 
+    const scroller = getScrollParent(document.getElementById(sections[0].id));
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -43,9 +64,9 @@ export function PageNav({
         if (first) setActiveId(first.id);
       },
       // -8% top offset keeps the active section stable once it clears the
-      // header; -88% bottom offset means only the top 12% of the viewport
+      // header; -88% bottom offset means only the top 12% of the scroll area
       // is treated as "current".
-      { rootMargin: "-8% 0px -88% 0px", threshold: 0 }
+      { root: scroller ?? null, rootMargin: "-8% 0px -88% 0px", threshold: 0 }
     );
 
     sections.forEach(({ id }) => {

package/src/components/page-nav/page-nav.css

@@ -163,3 +163,16 @@
     border-color: var(--semantic-color-action-background);
   }
 }
+
+/* ── Desktop: stick within its column as the reader scrolls ────────────────── */
+/* `--a1-page-nav-top` lets a consumer offset for a sticky header (default 16px);
+   a long nav scrolls internally rather than running past the viewport. */
+@media (min-width: 769px) {
+  .a1-page-nav.a1-card {
+    position: sticky;
+    top: var(--a1-page-nav-top, var(--base-spacing-16));
+    align-self: start;
+    max-block-size: calc(100vh - var(--a1-page-nav-top, var(--base-spacing-16)) - var(--base-spacing-16));
+    overflow: hidden auto;
+  }
+}

package/src/components/paragraph/Paragraph.d.ts

@@ -17,6 +17,8 @@ export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElemen
   textWrap?: "balance";
   /** Horizontal text alignment. "start"/"end" are logical aliases for LTR/RTL-safe alignment. */
   align?: "left" | "center" | "right" | "start" | "end";
+  /** Font weight. Omit to inherit the body default. */
+  weight?: "regular" | "medium" | "semibold" | "bold";
   children?: React.ReactNode;
 }
 

package/src/components/paragraph/Paragraph.jsx

@@ -5,6 +5,7 @@ const colors = ["default", "muted"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 const textWraps = ["balance"];
 const aligns = ["left", "center", "right", "start", "end"];
+const weights = ["regular", "medium", "semibold", "bold"];
 
 function isResponsiveSize(size) {
   return size && typeof size === "object" && !Array.isArray(size);
@@ -31,6 +32,7 @@ export function Paragraph({
   color = "default",
   textWrap,
   align,
+  weight,
   className = "",
   style,
   ...props
@@ -39,6 +41,7 @@ export function Paragraph({
   const resolvedColor = colors.includes(color) ? color : "default";
   const resolvedTextWrap = textWraps.includes(textWrap) ? textWrap : null;
   const resolvedAlign = aligns.includes(align) ? align : null;
+  const resolvedWeight = weights.includes(weight) ? weight : null;
   const responsiveStyle = getResponsiveSizeStyle(size);
   const resolvedStyle = Object.keys(responsiveStyle).length
     ? { ...responsiveStyle, ...style }
@@ -50,6 +53,7 @@ export function Paragraph({
     resolvedColor !== "default" && `a1-paragraph--${resolvedColor}`,
     resolvedTextWrap && `a1-paragraph--wrap-${resolvedTextWrap}`,
     resolvedAlign && `a1-paragraph--align-${resolvedAlign}`,
+    resolvedWeight && `a1-paragraph--weight-${resolvedWeight}`,
     className
   ]
     .filter(Boolean)

package/src/components/paragraph/paragraph.css

@@ -2,7 +2,7 @@
   margin: 0;
   font-family: var(--component-paragraph-font-family);
   font-size: var(--a1-paragraph-responsive-size, var(--a1-paragraph-size));
-  font-weight: var(--component-paragraph-font-weight);
+  font-weight: var(--a1-paragraph-weight, var(--component-paragraph-font-weight));
   line-height: var(--component-paragraph-font-line-height);
   color: var(--a1-paragraph-color, var(--semantic-color-text-default));
 }
@@ -39,6 +39,11 @@
 
 .a1-paragraph--muted { --a1-paragraph-color: var(--semantic-color-text-muted); }
 
+.a1-paragraph--weight-regular  { --a1-paragraph-weight: var(--base-font-weight-regular); }
+.a1-paragraph--weight-medium   { --a1-paragraph-weight: var(--base-font-weight-medium); }
+.a1-paragraph--weight-semibold { --a1-paragraph-weight: var(--base-font-weight-semibold); }
+.a1-paragraph--weight-bold     { --a1-paragraph-weight: var(--base-font-weight-bold); }
+
 /* Text wrap */
 .a1-paragraph--wrap-balance { text-wrap: balance; }
 
@@ -48,8 +53,3 @@
 .a1-paragraph--align-right  { text-align: end;    }
 .a1-paragraph--align-start  { text-align: start;  }
 .a1-paragraph--align-end    { text-align: end;    }
-
-.a1-paragraph + .a1-paragraph,
-.a1-paragraph + .a1-heading {
-  margin-top: 1.5em;
-}

package/src/components/section/Section.d.ts

@@ -33,6 +33,12 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   borderStyle?: "solid" | "dashed" | "dotted";
   /** Border color tone. Uses the same variants as Divider. Default: "subtle" */
   borderVariant?: "subtle" | "strong" | "accent";
+  /**
+   * Which sides the border is drawn on (requires `borderSize`). `"all"` (default)
+   * draws all four sides; pass an array to draw only those sides, e.g.
+   * `["top", "bottom"]`. An empty array draws no border.
+   */
+  borderSides?: "all" | ("top" | "right" | "bottom" | "left")[];
   /** Border radius scale. */
   radius?: "none" | "sm" | "md" | "lg" | "xl";
   children?: React.ReactNode;

package/src/components/section/Section.jsx

@@ -23,8 +23,19 @@ const VALID_ALIGNMENTS = ["left", "center", "right"];
 const VALID_BORDER_SIZES = ["xs", "sm", "md", "lg"];
 const VALID_BORDER_STYLES = ["solid", "dashed", "dotted"];
 const VALID_BORDER_VARIANTS = ["subtle", "strong", "accent"];
+const VALID_BORDER_SIDES = ["top", "right", "bottom", "left"];
 const VALID_RADII = ["none", "sm", "md", "lg", "xl"];
 
+// Resolve which sides get the border. `null` means all sides (the default);
+// an array means only those sides (an empty array means no border).
+function resolveBorderSides(borderSides) {
+  if (borderSides == null || borderSides === "all") return null;
+  const arr = Array.isArray(borderSides) ? borderSides : [borderSides];
+  const sides = VALID_BORDER_SIDES.filter((side) => arr.includes(side));
+  if (sides.length === VALID_BORDER_SIDES.length) return null; // all four = all
+  return sides;
+}
+
 export function Section({
   as: Component = "section",
   padding = "md",
@@ -39,6 +50,7 @@ export function Section({
   borderSize,
   borderStyle = "solid",
   borderVariant = "subtle",
+  borderSides,
   radius,
   className = "",
   children,
@@ -98,6 +110,13 @@ export function Section({
 
   if (borderSize && VALID_BORDER_SIZES.includes(borderSize)) {
     classes.push(`a1-section--border-${borderSize}`);
+
+    // Per-side borders. Omitted / "all" draws all four sides (default).
+    const sides = resolveBorderSides(borderSides);
+    if (sides) {
+      classes.push("a1-section--border-sided");
+      sides.forEach((side) => classes.push(`a1-section--border-side-${side}`));
+    }
   }
 
   if (borderStyle && VALID_BORDER_STYLES.includes(borderStyle)) {

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/segmented-control/SegmentedControl.d.ts

@@ -18,6 +18,14 @@ export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivEleme
   fullWidth?: boolean;
   /** Height scale. Default: "md" */
   size?: "sm" | "md" | "lg";
+  /**
+   * Label display. `"all"` (default) shows every option's label. `"selected"`
+   * shows the label only on the selected option; the rest render icon-only
+   * (using each option's `ariaLabel`/`label` for its accessible name). Options
+   * without an icon always show their label so they never render blank.
+   * "none" hides every label (fully icon-only).
+   */
+  labelMode?: "all" | "selected" | "none";
 }
 
 export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;

package/src/components/segmented-control/SegmentedControl.jsx

@@ -11,6 +11,7 @@ export function SegmentedControl({
   onChange,
   fullWidth = false,
   size,
+  labelMode = "all",
   ...props
 }) {
   const items = options.map(normalize);
@@ -52,8 +53,20 @@ export function SegmentedControl({
       onKeyDown={handleKeyDown}
     >
       {items.map((opt) => {
-        const iconOnly = Boolean(opt.icon) && !opt.label;
         const isSelected = value === opt.value;
+        // labelMode controls which segments show their text label:
+        //   "all" (default) — every segment.
+        //   "selected"      — only the selected segment.
+        //   "none"          — none of them (fully icon-only).
+        // An option with no icon always shows its label so it never goes blank.
+        const wantsLabel =
+          Boolean(opt.label) &&
+          (labelMode === "none"
+            ? !opt.icon
+            : labelMode === "selected"
+              ? (isSelected || !opt.icon)
+              : true);
+        const iconOnly = Boolean(opt.icon) && !wantsLabel;
 
         return (
           <button
@@ -61,7 +74,7 @@ export function SegmentedControl({
             role="radio"
             type="button"
             aria-checked={isSelected}
-            aria-label={iconOnly ? (opt.ariaLabel ?? opt.value) : undefined}
+            aria-label={iconOnly ? (opt.ariaLabel ?? opt.label ?? opt.value) : undefined}
             tabIndex={isSelected ? 0 : -1}
             className={[
               "a1-segment",
@@ -72,7 +85,7 @@ export function SegmentedControl({
             onClick={() => onChange?.(opt.value)}
           >
             {opt.icon && <Icon name={opt.icon} className="a1-segment__icon" />}
-            {opt.label}
+            {wantsLabel ? opt.label : null}
           </button>
         );
       })}

package/src/components/segmented-control/segmented.css

@@ -13,6 +13,9 @@
 
 .a1-segmented--full-width {
   display: flex;
+  /* Fill the container so the equal-width segments actually stretch — `display:
+     flex` alone leaves it content-width inside a centering flex/grid parent. */
+  inline-size: 100%;
 }
 
 /* ─── Segment button ──────────────────────────────────────────────────────── */
@@ -58,10 +61,27 @@
   font-size: var(--semantic-font-size-body-sm);
 }
 
+/* Small: tighter padding and a font size one step down from the default. */
+.a1-segmented--sm .a1-segment {
+  padding: var(--component-segmented-segment-padding-block-sm)
+           var(--component-segmented-segment-padding-inline-sm);
+  font-size: var(--semantic-font-size-body-xs);
+  /* Tighter icon↔label gap at sm. */
+  gap: var(--base-spacing-4);
+}
+
+/* Large: roomier padding and a font size one step up. */
+.a1-segmented--lg .a1-segment {
+  padding: var(--component-segmented-segment-padding-block-lg)
+           var(--component-segmented-segment-padding-inline-lg);
+  font-size: var(--semantic-font-size-body-md);
+}
+
 /* ─── Icon ────────────────────────────────────────────────────────────────── */
 
 .a1-segment__icon {
-  font-size: 1em;
+  /* One step larger than the label so the glyph reads clearly at the md/lg sizes. */
+  font-size: 1.25em;
 }
 
 /* Icon-only: match inline padding to block padding so the segment is square */
@@ -69,6 +89,16 @@
   padding-inline: var(--component-segmented-segment-padding-block);
 }
 
+/* Small: a larger icon and tighter horizontal padding per segment (so an
+   icon-only sm strip stays compact). */
+.a1-segmented--sm .a1-segment__icon {
+  font-size: 1.5em;
+}
+
+.a1-segmented--sm .a1-segment--icon-only {
+  padding-inline: var(--component-segmented-segment-padding-block-sm);
+}
+
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .a1-theme-dark .a1-segment:not([aria-checked="true"]),

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;