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

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,238 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   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 {
+  /* Track + thumb are one step up from the smallest scale so the compact slider
+     stays grabbable; the label/detent text keeps the compact field-family size. */
+  --a1-slider-track-height: var(--base-spacing-8);
+  --a1-slider-thumb-size: var(--base-spacing-20);
+  --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);
+  --a1-slider-active-color: var(--semantic-color-text-muted);
+}
+
+.a1-slider--disabled .a1-slider__input,
+.a1-slider--disabled .a1-slider__track,
+.a1-slider--disabled .a1-slider__ticks {
+  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;

package/src/components/split-button/SplitButton.jsx

@@ -0,0 +1,94 @@
+import "./split-button.css";
+import { useRef, useState } from "react";
+import { Button } from "../button/Button.jsx";
+import { Menu, MenuItem } from "../menu/Menu.jsx";
+import { Icon } from "../icon/Icon.jsx";
+
+const variants = ["primary", "secondary", "tertiary", "destructive", "success"];
+const sizes = ["sm", "md", "lg"];
+
+/**
+ * SplitButton — a primary action with an attached caret target that opens a Menu
+ * of related/secondary actions. The main button runs the default action; the
+ * toggle (caret) on its inline-end opens the menu. Built from the A1 `Button` and
+ * `Menu`, so styling, keyboard, and focus come from those components.
+ *
+ * `actions` is `{ id, label, icon?, disabled?, onClick? }[]`.
+ */
+export function SplitButton({
+  children,
+  onClick,
+  variant = "primary",
+  size = "md",
+  icon,
+  iconPosition = "start",
+  loading = false,
+  disabled = false,
+  actions = [],
+  menuLabel = "More actions",
+  toggleLabel = "More actions",
+  className = "",
+  ...rest
+}) {
+  const [open, setOpen] = useState(false);
+  const toggleRef = useRef(null);
+  const rootRef = useRef(null);
+
+  const resolvedVariant = variants.includes(variant) ? variant : "primary";
+  const resolvedSize = sizes.includes(size) ? size : "md";
+  const isInert = disabled || loading;
+
+  // The toggle reuses the Button class layer (variant/size design tokens) on a
+  // raw <button> so it can be ref'd as the menu anchor (Button doesn't forward refs).
+  const toggleClasses = [
+    "a1-button",
+    `a1-button--${resolvedVariant}`,
+    resolvedSize !== "md" && `a1-button--${resolvedSize}`,
+    "a1-split-button__toggle",
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div
+      ref={rootRef}
+      className={["a1-split-button", isInert && "a1-split-button--disabled", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      <Button
+        className="a1-split-button__main"
+        variant={resolvedVariant}
+        size={resolvedSize}
+        icon={icon}
+        iconPosition={iconPosition}
+        loading={loading}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {children}
+      </Button>
+      <button
+        ref={toggleRef}
+        type="button"
+        className={toggleClasses}
+        aria-label={toggleLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={isInert}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <Icon name="arrow_drop_down" className="a1-split-button__caret" aria-hidden="true" />
+      </button>
+      <Menu open={open} onClose={() => setOpen(false)} anchorRef={rootRef} aria-label={menuLabel}>
+        {actions.map((action) => (
+          <MenuItem
+            key={action.id}
+            icon={action.icon}
+            disabled={action.disabled}
+            onClick={() => { action.onClick?.(); setOpen(false); }}
+          >
+            {action.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Split Button — a primary action joined to a caret toggle that opens a Menu.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.a1-split-button {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+/* The two targets sit flush; the main rounds its inline-start corners, the
+   toggle rounds its inline-end corners, so together they read as one pill. */
+.a1-split-button__main {
+  --a1-button-border-radius: var(--component-button-border-radius) 0 0 var(--component-button-border-radius);
+}
+
+.a1-split-button__toggle {
+  --a1-button-border-radius: 0 var(--component-button-border-radius) var(--component-button-border-radius) 0;
+  /* A snug caret target rather than a full text button's inline padding. */
+  --a1-button-padding-inline: var(--base-spacing-8);
+  position: relative;
+}
+
+/* Hairline divider between the two targets, drawn in the button's own foreground
+   so it reads on every variant. */
+.a1-split-button__toggle::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--base-spacing-8);
+  inset-inline-start: 0;
+  inline-size: var(--component-divider-size-sm);
+  background: color-mix(in srgb, var(--a1-button-foreground) 35%, transparent);
+}
+
+.a1-split-button__caret {
+  font-size: var(--component-button-icon-size);
+}
+
+.a1-split-button--disabled {
+  cursor: not-allowed;
+}

package/src/components/tabs/tabs.css

@@ -64,6 +64,9 @@
 .a1-tab-list--scrollable {
   flex: 1;
   overflow-x: auto;
+  /* Setting overflow-x alone makes the browser compute overflow-y to `auto`,
+     which lets a sub-pixel of height add a stray vertical scroll. Pin it. */
+  overflow-y: hidden;
   scrollbar-width: none;
 }