@sixthshift/design-system 0.7.0 → 0.8.0

package/src/components/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+
+/**
+ * Geometry only. Every colour reads an `--image-gallery-*` component token
+ * whose value is decided by src/components/ImageGallery/image-gallery.recipe.css.
+ *
+ * `ratio` is the frame's shape, not the images': every slide is cropped to it
+ * with `object-cover`, so a mixed set of uploads still produces a steady
+ * frame that does not jump as you swipe. `portrait` is 4:5, the tallest crop
+ * Instagram allows in a feed — photography shot for the feed lands on it
+ * uncropped.
+ */
+const frameVariants = cva("relative overflow-hidden rounded-lg bg-(--image-gallery-bg)", {
+  variants: {
+    ratio: {
+      square: "aspect-square",
+      portrait: "aspect-[4/5]",
+      landscape: "aspect-[4/3]",
+      wide: "aspect-video",
+    },
+  },
+  defaultVariants: {
+    ratio: "square",
+  },
+});
+
+export type ImageGalleryRatio = NonNullable<VariantProps<typeof frameVariants>["ratio"]>;
+
+export type ImageGalleryImage = {
+  src: string;
+  /** Required: describe the photo. The gallery adds position ("2 of 5") on its own. */
+  alt: string;
+  srcSet?: string;
+  sizes?: string;
+  width?: number;
+  height?: number;
+};
+
+export type ImageGalleryProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange"> &
+  VariantProps<typeof frameVariants> & {
+    images: readonly ImageGalleryImage[];
+    /** Controlled index of the image shown. */
+    index?: number;
+    /** Initial index in uncontrolled mode. */
+    defaultIndex?: number;
+    /** Called when the shown image changes — by swipe, arrow, key or thumbnail. */
+    onIndexChange?: (index: number) => void;
+    /**
+     * What sits under the frame: a strip of `thumbnails`, a row of `dots`, or
+     * `none`. Only rendered when there is more than one image.
+     */
+    indicator?: "thumbnails" | "dots" | "none";
+    /** Accessible name for the carousel, e.g. the product's name. */
+    label?: string;
+    /** Accessible name for the previous-image button. */
+    previousLabel?: string;
+    /** Accessible name for the next-image button. */
+    nextLabel?: string;
+    /** Shown in the frame when `images` is empty. */
+    placeholder?: React.ReactNode;
+  };
+
+function prefersReducedMotion(): boolean {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+
+/**
+ * A product photo carousel: one frame, swipeable on touch, with previous/next
+ * buttons, arrow-key navigation and an optional thumbnail strip or dots.
+ *
+ * Swiping is native scrolling — a horizontal `scroll-snap` track, not a
+ * pointer-event reimplementation — so it has the platform's own momentum and
+ * edge behaviour on phones. The shown index follows the scroll position, and
+ * setting the index (by button, key, thumbnail or a controlled `index`)
+ * scrolls the track. Both directions meet at one rule: the effect only scrolls
+ * when the track is not already showing the index, so a swipe that updates
+ * the index never fights itself.
+ *
+ * Controlled or uncontrolled through `index`/`defaultIndex`/`onIndexChange`.
+ *
+ * Follows the WAI-ARIA carousel pattern: the root is a `<section>` with
+ * `aria-roledescription="carousel"` (a landmark region once `label` names
+ * it), each slide a group named "n of total", and slides out of view are
+ * `aria-hidden`. The first image loads eagerly and
+ * the rest lazily, so a gallery of ten costs one download up front.
+ */
+export const ImageGallery = React.forwardRef<HTMLElement, ImageGalleryProps>(
+  (
+    {
+      className,
+      images,
+      index: controlledIndex,
+      defaultIndex = 0,
+      onIndexChange,
+      ratio = "square",
+      indicator = "thumbnails",
+      label,
+      previousLabel = "Previous image",
+      nextLabel = "Next image",
+      placeholder,
+      onKeyDown,
+      ...props
+    },
+    ref
+  ) => {
+    const count = images.length;
+    const [rawIndex, setIndex] = useControllableState({
+      value: controlledIndex,
+      defaultValue: defaultIndex,
+      onChange: onIndexChange,
+    });
+    const index = count === 0 ? 0 : Math.min(Math.max(rawIndex, 0), count - 1);
+
+    const trackRef = React.useRef<HTMLDivElement | null>(null);
+    // The slide a programmatic scroll is heading for. While set, the slides it
+    // passes on the way are not reported — jumping from 1 to 4 reports 4, not
+    // 2, 3 and 4. Any touch, wheel or pointer on the track hands control back.
+    const scrollTargetRef = React.useRef<number | null>(null);
+
+    // Index → scroll. Skipped when the track already shows `index`, which is
+    // always the case right after a swipe reported it.
+    React.useEffect(() => {
+      const track = trackRef.current;
+      if (!track || track.clientWidth === 0) return;
+      if (Math.round(track.scrollLeft / track.clientWidth) === index) return;
+      scrollTargetRef.current = index;
+      track.scrollTo({ left: index * track.clientWidth, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    }, [index]);
+
+    // Scroll → index. Rounds, so the index flips at the halfway point of a swipe.
+    const handleScroll = () => {
+      const track = trackRef.current;
+      if (!track || track.clientWidth === 0) return;
+      const shown = Math.round(track.scrollLeft / track.clientWidth);
+      if (scrollTargetRef.current !== null) {
+        if (shown !== scrollTargetRef.current) return;
+        scrollTargetRef.current = null;
+      }
+      if (shown !== index && shown >= 0 && shown < count) setIndex(shown);
+    };
+
+    const releaseScroll = () => {
+      scrollTargetRef.current = null;
+    };
+
+    const go = (next: number) => {
+      if (next >= 0 && next < count && next !== index) setIndex(next);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const targets: Record<string, number> = { ArrowLeft: index - 1, ArrowRight: index + 1, Home: 0, End: count - 1 };
+      const target = targets[event.key];
+      if (target === undefined) return;
+      event.preventDefault();
+      go(target);
+    };
+
+    const controlClass =
+      "image-gallery-control focus-visible:ring-(color:--image-gallery-control-ring) absolute top-1/2 flex size-9 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-(--image-gallery-control-bg) text-(--image-gallery-control-fg) shadow transition-opacity hover:bg-(--image-gallery-control-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-0 max-sm:hidden [&_svg]:size-5";
+
+    return (
+      <section
+        ref={ref}
+        aria-roledescription="carousel"
+        aria-label={label}
+        className={cn("image-gallery flex flex-col gap-3", className)}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className={frameVariants({ ratio })}>
+          {count === 0 ? (
+            <div className="flex h-full w-full items-center justify-center text-(--image-gallery-placeholder-fg) text-sm">{placeholder}</div>
+          ) : (
+            <div
+              ref={trackRef}
+              onScroll={handleScroll}
+              onPointerDown={releaseScroll}
+              onTouchStart={releaseScroll}
+              onWheel={releaseScroll}
+              // Focusable so the arrow keys work without first reaching a button,
+              // and because a scrollable region must be keyboard-reachable.
+              // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable regions must be focusable (axe `scrollable-region-focusable`)
+              tabIndex={0}
+              className="focus-visible:ring-(color:--image-gallery-control-ring) flex h-full w-full snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset [&::-webkit-scrollbar]:hidden"
+            >
+              {images.map((image, i) => (
+                // biome-ignore lint/a11y/useSemanticElements: the WAI-ARIA carousel pattern names each slide a `group`; a <fieldset> is for form controls
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: slides are positional — "2 of 5" is their identity, and the same photo may appear twice
+                  key={i}
+                  role="group"
+                  aria-roledescription="slide"
+                  aria-label={`${i + 1} of ${count}`}
+                  aria-hidden={i !== index}
+                  className="h-full w-full shrink-0 snap-center snap-always"
+                >
+                  <img
+                    src={image.src}
+                    srcSet={image.srcSet}
+                    sizes={image.sizes}
+                    width={image.width}
+                    height={image.height}
+                    alt={image.alt}
+                    loading={i === 0 ? "eager" : "lazy"}
+                    decoding="async"
+                    draggable={false}
+                    className="h-full w-full select-none object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+          {count > 1 && (
+            <>
+              <button type="button" aria-label={previousLabel} disabled={index === 0} onClick={() => go(index - 1)} className={cn(controlClass, "left-2")}>
+                <ChevronLeft aria-hidden="true" />
+              </button>
+              <button type="button" aria-label={nextLabel} disabled={index === count - 1} onClick={() => go(index + 1)} className={cn(controlClass, "right-2")}>
+                <ChevronRight aria-hidden="true" />
+              </button>
+            </>
+          )}
+        </div>
+
+        {count > 1 && indicator === "thumbnails" && (
+          <div className="flex gap-2 overflow-x-auto p-0.5">
+            {images.map((image, i) => (
+              <button
+                // biome-ignore lint/suspicious/noArrayIndexKey: slides are positional — "2 of 5" is their identity, and the same photo may appear twice
+                key={i}
+                type="button"
+                aria-label={`Show image ${i + 1} of ${count}`}
+                aria-current={i === index ? "true" : undefined}
+                data-selected={i === index}
+                onClick={() => go(i)}
+                className="image-gallery-thumb border-(color:--image-gallery-thumb-border) focus-visible:ring-(color:--image-gallery-control-ring) hover:border-(color:--image-gallery-thumb-border-hovered) size-16 shrink-0 cursor-pointer overflow-hidden rounded-md border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2"
+              >
+                <img
+                  src={image.src}
+                  srcSet={image.srcSet}
+                  sizes="64px"
+                  alt=""
+                  loading="lazy"
+                  decoding="async"
+                  draggable={false}
+                  className="h-full w-full object-cover"
+                />
+              </button>
+            ))}
+          </div>
+        )}
+
+        {count > 1 && indicator === "dots" && (
+          <div className="flex justify-center gap-1.5">
+            {images.map((_, i) => (
+              <button
+                // biome-ignore lint/suspicious/noArrayIndexKey: slides are positional — "2 of 5" is their identity, and the same photo may appear twice
+                key={i}
+                type="button"
+                aria-label={`Show image ${i + 1} of ${count}`}
+                aria-current={i === index ? "true" : undefined}
+                data-selected={i === index}
+                onClick={() => go(i)}
+                className="image-gallery-dot focus-visible:ring-(color:--image-gallery-control-ring) flex size-6 cursor-pointer items-center justify-center rounded-full focus-visible:outline-hidden focus-visible:ring-2"
+              >
+                <span aria-hidden="true" className="block size-2 rounded-full bg-(--image-gallery-dot-bg) transition-colors" />
+              </button>
+            ))}
+          </div>
+        )}
+      </section>
+    );
+  }
+);
+ImageGallery.displayName = "ImageGallery";
+
+export { frameVariants as imageGalleryFrameVariants };

package/src/components/ImageGallery/image-gallery.recipe.css

@@ -0,0 +1,50 @@
+/**
+ * ImageGallery recipe — the component-token layer for ImageGallery.
+ *
+ * No variant/intent axis. The one selectable cell is `data-selected` on a
+ * thumbnail or dot, the same shape tabs.css uses for its selected trigger.
+ *
+ * The grammar is `--image-gallery-[{part}-]{context}[-{state}]`. Parts:
+ *
+ *   control      the previous/next buttons floating over the photo. They sit
+ *                on arbitrary imagery, so they take the page's resting surface
+ *                with an elevation shadow rather than a transparent ghost —
+ *                legible over a white cake and a chocolate one alike.
+ *   thumb        a thumbnail button's frame.
+ *   dot          a dot indicator's fill.
+ *   placeholder  the text shown when there are no images.
+ *
+ * `--image-gallery-bg` shows while a lazy image loads and behind an empty
+ * gallery, so it is the subtle surface, not the page's.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  .image-gallery {
+    --image-gallery-bg: var(--bg-subtle);
+    --image-gallery-placeholder-fg: var(--fg-subtle);
+    --image-gallery-control-bg: var(--bg-normal);
+    --image-gallery-control-bg-hovered: var(--bg-normal-hovered);
+    --image-gallery-control-fg: var(--fg-normal);
+    --image-gallery-control-ring: var(--focus-ring);
+  }
+
+  .image-gallery-thumb {
+    --image-gallery-thumb-border: transparent;
+    --image-gallery-thumb-border-hovered: var(--border-strong);
+  }
+
+  .image-gallery-thumb[data-selected="true"] {
+    --image-gallery-thumb-border: var(--border-brand);
+    --image-gallery-thumb-border-hovered: var(--image-gallery-thumb-border);
+  }
+
+  .image-gallery-dot {
+    --image-gallery-dot-bg: var(--border-strong);
+  }
+
+  .image-gallery-dot[data-selected="true"] {
+    --image-gallery-dot-bg: var(--bg-brand);
+  }
+}

package/src/components/ImageGallery/index.ts

@@ -0,0 +1,7 @@
+export {
+  ImageGallery,
+  type ImageGalleryImage,
+  type ImageGalleryProps,
+  type ImageGalleryRatio,
+  imageGalleryFrameVariants,
+} from "./ImageGallery";

package/src/components/NumberStepper/NumberStepper.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+
+/**
+ * Geometry only. Every colour reads a `--number-stepper-*` component token
+ * whose value is decided by src/components/NumberStepper/number-stepper.recipe.css.
+ *
+ * `size` tracks Input's and Button's heights (`sm` 32px, `md` 36px, `lg`
+ * 40px) so a stepper sits on the same baseline as the fields beside it.
+ */
+const numberStepperVariants = cva(
+  // One literal, deliberately — see Button.tsx for why a `+` concatenation is a trap.
+  "number-stepper border-(color:--number-stepper-border) focus-within:ring-(color:--number-stepper-ring) inline-flex w-fit items-stretch overflow-hidden rounded-md border bg-(--number-stepper-bg) text-(--number-stepper-fg) shadow-xs transition-colors focus-within:ring-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs [&_svg]:size-3.5",
+        md: "h-9 text-sm [&_svg]:size-4",
+        lg: "h-10 text-sm [&_svg]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+/** Button width per size — square against the field's height. */
+const buttonGeometry: Record<string, string> = {
+  sm: "w-8",
+  md: "w-9",
+  lg: "w-10",
+};
+
+/** Input width per size — room for three digits before it grows. */
+const inputGeometry: Record<string, string> = {
+  sm: "w-10",
+  md: "w-12",
+  lg: "w-14",
+};
+
+export type NumberStepperSize = NonNullable<VariantProps<typeof numberStepperVariants>["size"]>;
+
+export type NumberStepperProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step" | "type"
+> &
+  VariantProps<typeof numberStepperVariants> & {
+    /** Controlled value. */
+    value?: number;
+    /** Initial value in uncontrolled mode. Defaults to `min`, or `0` without one. */
+    defaultValue?: number;
+    /** Called with the new, already-clamped value. */
+    onValueChange?: (value: number) => void;
+    /** Lowest reachable value. Defaults to `0` — quantities are the common case. */
+    min?: number;
+    /** Highest reachable value. Unbounded when omitted. */
+    max?: number;
+    /** Increment for the buttons and arrow keys. `PageUp`/`PageDown` move ten of them. */
+    step?: number;
+    /** Accessible name for the decrement button. */
+    decrementLabel?: string;
+    /** Accessible name for the increment button. */
+    incrementLabel?: string;
+    /** Extra classes for the inner `<input>`; `className` styles the surrounding group. */
+    inputClassName?: string;
+  };
+
+function clamp(value: number, min: number, max: number | undefined): number {
+  const floored = Math.max(min, value);
+  return max === undefined ? floored : Math.min(max, floored);
+}
+
+/**
+ * A whole-number field with decrement and increment buttons — a cart
+ * quantity, a guest count, a per-day capacity.
+ *
+ * Implements the WAI-ARIA spinbutton pattern on the `<input>` itself:
+ * `role="spinbutton"` with `aria-valuenow`/`min`/`max`, `ArrowUp`/`ArrowDown`
+ * step, `PageUp`/`PageDown` step by ten, and `Home`/`End` jump to the bounds
+ * that exist. The two buttons are pointer affordances and stay out of the tab
+ * order, so the field is one tab stop — the same reason RadioButtonGroup is.
+ *
+ * Typing is free-form while focused and committed on blur or `Enter`: the
+ * draft is parsed, rounded to the nearest `step` from `min`, and clamped.
+ * Anything unparseable reverts to the last committed value rather than
+ * reporting `NaN`. Every value `onValueChange` receives is in range.
+ *
+ * Controlled or uncontrolled through the `value`/`defaultValue`/
+ * `onValueChange` triad. `name` submits the committed value with a form, since
+ * the input is a real `<input>`. The ref and every unlisted prop land on that
+ * input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
+ * — while `className` styles the surrounding group.
+ */
+export const NumberStepper = React.forwardRef<HTMLInputElement, NumberStepperProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size = "md",
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      min = 0,
+      max,
+      step = 1,
+      disabled = false,
+      readOnly = false,
+      decrementLabel = "Decrease",
+      incrementLabel = "Increase",
+      onKeyDown,
+      onBlur,
+      onFocus,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue: clamp(defaultValue ?? min, min, max),
+      onChange: onValueChange,
+    });
+
+    // The text being typed, or `null` when the field shows the committed value.
+    const [draft, setDraft] = React.useState<string | null>(null);
+
+    const commit = (next: number) => {
+      const snapped = min + Math.round((next - min) / step) * step;
+      const clamped = clamp(snapped, min, max);
+      if (clamped !== value) setValue(clamped);
+    };
+
+    const commitDraft = () => {
+      if (draft === null) return;
+      const parsed = Number.parseFloat(draft);
+      setDraft(null);
+      if (Number.isFinite(parsed)) commit(parsed);
+    };
+
+    const interactive = !disabled && !readOnly;
+    const atMin = value <= min;
+    const atMax = max !== undefined && value >= max;
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || !interactive) return;
+
+      const moves: Record<string, (() => number) | undefined> = {
+        ArrowUp: () => value + step,
+        ArrowDown: () => value - step,
+        PageUp: () => value + step * 10,
+        PageDown: () => value - step * 10,
+        Home: () => min,
+        End: max === undefined ? undefined : () => max,
+      };
+      const move = moves[event.key];
+
+      if (event.key === "Enter") {
+        commitDraft();
+        return;
+      }
+      if (!move) return;
+
+      event.preventDefault();
+      setDraft(null);
+      commit(move());
+    };
+
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+      commitDraft();
+      onBlur?.(event);
+    };
+
+    const stepBy = (direction: 1 | -1) => {
+      setDraft(null);
+      commit(value + step * direction);
+    };
+
+    const buttonClass = cn(
+      "number-stepper-button flex shrink-0 cursor-pointer items-center justify-center text-(--number-stepper-button-fg) transition-colors enabled:active:bg-(--number-stepper-button-bg-pressed) enabled:hover:bg-(--number-stepper-button-bg-hovered) disabled:cursor-not-allowed disabled:text-(--number-stepper-button-fg-disabled)",
+      buttonGeometry[size ?? "md"]
+    );
+
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: a <fieldset> brings a border, min-width and legend semantics this inline control does not want; role="group" only ties the buttons to the field
+      <div role="group" data-disabled={disabled} className={numberStepperVariants({ size, className })}>
+        <button type="button" tabIndex={-1} aria-label={decrementLabel} disabled={!interactive || atMin} onClick={() => stepBy(-1)} className={buttonClass}>
+          <Minus aria-hidden="true" />
+        </button>
+        <input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          role="spinbutton"
+          autoComplete="off"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          disabled={disabled}
+          readOnly={readOnly}
+          value={draft ?? String(value)}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          onFocus={onFocus}
+          className={cn(
+            "border-(color:--number-stepper-divider-border) min-w-0 border-x bg-transparent text-center text-[length:inherit] tabular-nums outline-hidden disabled:cursor-not-allowed",
+            inputGeometry[size ?? "md"],
+            inputClassName
+          )}
+          {...props}
+        />
+        <button type="button" tabIndex={-1} aria-label={incrementLabel} disabled={!interactive || atMax} onClick={() => stepBy(1)} className={buttonClass}>
+          <Plus aria-hidden="true" />
+        </button>
+      </div>
+    );
+  }
+);
+NumberStepper.displayName = "NumberStepper";
+
+export { numberStepperVariants };

package/src/components/NumberStepper/index.ts

@@ -0,0 +1 @@
+export { NumberStepper, type NumberStepperProps, type NumberStepperSize, numberStepperVariants } from "./NumberStepper";

package/src/components/NumberStepper/number-stepper.recipe.css

@@ -0,0 +1,31 @@
+/**
+ * NumberStepper recipe — the component-token layer for NumberStepper.
+ *
+ * No variant/intent axis: a stepper is a form field, and like Input every
+ * colour is a fixed semantic token. The field surface deliberately mirrors
+ * input.css's values (bg-normal, border-normal, focus-ring) so a stepper next
+ * to a text input reads as the same kind of control — but through its own
+ * tokens, so a consumer can re-point one without the other.
+ *
+ * The grammar is `--number-stepper-[{part}-]{context}[-{state}]`. Parts are
+ * `button` (the two step buttons) and `divider` (the rules either side of the
+ * value). `--number-stepper-button-fg-disabled` is the colour a button takes
+ * at a bound; the whole group dims via opacity only when the field itself is
+ * disabled, the same way Input does.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  .number-stepper {
+    --number-stepper-bg: var(--bg-normal);
+    --number-stepper-fg: var(--fg-normal);
+    --number-stepper-border: var(--border-normal);
+    --number-stepper-ring: var(--focus-ring);
+    --number-stepper-divider-border: var(--border-normal);
+    --number-stepper-button-fg: var(--fg-normal);
+    --number-stepper-button-fg-disabled: var(--fg-normal-disabled);
+    --number-stepper-button-bg-hovered: var(--bg-normal-hovered);
+    --number-stepper-button-bg-pressed: var(--bg-normal-pressed);
+  }
+}