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

package/src/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,131 @@
+import * as React from "react";
+
+/** Standard icon name for a "none" selection. */
+export declare const TOOLBAR_NONE_ICON: string;
+
+/**
+ * Whether a tool's label is shown. Pass a boolean, or a breakpoint object to
+ * vary it responsively (cascades xs → xl, e.g. `{ xs: false, lg: true }` shows
+ * labels only from the `lg` breakpoint up). When labels can be hidden at any
+ * breakpoint the tool keeps an `aria-label`, so the accessible name is stable.
+ */
+export type ToolbarShowLabel =
+  | boolean
+  | { xs?: boolean; sm?: boolean; md?: boolean; lg?: boolean; xl?: boolean };
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Accessible name for the toolbar (ignored when `label` is set). */
+  "aria-label"?: string;
+  /**
+   * Optional visible caption rendered above the bar, styled to match the compact
+   * ChoiceGroup label. When set it also provides the toolbar's accessible name.
+   */
+  label?: React.ReactNode;
+  /**
+   * Lift the bar into a floating, elevated surface (shadow + border) for a
+   * toolbar that hovers over page content (e.g. a selection formatting bar).
+   * The consumer is responsible for positioning. Default: false
+   */
+  overlay?: boolean;
+  /**
+   * Stretch the bar to fill its container, with the tools growing to share the
+   * available width (dividers keep their natural size). When false the bar is
+   * `fit-content` wide. Default: false
+   */
+  fullWidth?: boolean;
+  children?: React.ReactNode;
+}
+/** A compact container grouping related editing controls on one subtle surface. */
+export declare function Toolbar(props: ToolbarProps): React.ReactElement;
+
+/** Visual separator between tools within a Toolbar. */
+export declare function ToolbarDivider(): React.ReactElement;
+
+export interface ToolbarToggleProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Material Symbols icon name. */
+  icon?: string;
+  /** A colour swatch (any CSS color) shown inside the tool. */
+  swatch?: string;
+  /** Accessible name (and tooltip); shown as text when `showLabel`. */
+  label?: string;
+  /** Pressed (on) state. */
+  pressed?: boolean;
+  /** Called with the next pressed state when clicked. */
+  onChange?: (pressed: boolean) => void;
+  /** Show the label as visible text; boolean or a responsive breakpoint object. Default: false */
+  showLabel?: ToolbarShowLabel;
+  disabled?: boolean;
+}
+/** A two-state toggle button (e.g. bold on/off). */
+export declare function ToolbarToggle(props: ToolbarToggleProps): React.ReactElement;
+
+export interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: string;
+  /** A colour swatch (any CSS color) shown inside the tool. */
+  swatch?: string;
+  /** Accessible name (and tooltip); shown as text when `showLabel`. */
+  label?: string;
+  /** Show the label as visible text; boolean or a responsive breakpoint object. Default: false */
+  showLabel?: ToolbarShowLabel;
+}
+/** A plain action button inside a Toolbar (no pressed state). */
+export declare function ToolbarButton(props: ToolbarButtonProps): React.ReactElement;
+
+export interface ToolbarMenuItem {
+  value: string | number;
+  label?: React.ReactNode;
+  /** Material Symbols icon name shown beside the menu item. */
+  icon?: string;
+  disabled?: boolean;
+}
+export interface ToolbarMenuProps {
+  /** Button icon. Defaults to the active item's icon when `value` matches one. */
+  icon?: string;
+  /** Accessible name (and tooltip); shown as text when `showLabel`. */
+  label?: string;
+  /** Currently selected value — marks the matching item active. */
+  value?: string | number;
+  /** Called with the chosen item value. */
+  onChange?: (value: string | number) => void;
+  items?: ToolbarMenuItem[];
+  /** Show the label as visible text; boolean or a responsive breakpoint object. Default: false */
+  showLabel?: ToolbarShowLabel;
+  disabled?: boolean;
+  "aria-label"?: string;
+  className?: string;
+}
+/** A toolbar button that opens a dropdown Menu of choices (e.g. list types). */
+export declare function ToolbarMenu(props: ToolbarMenuProps): React.ReactElement;
+
+export interface ToolbarGroupOption {
+  value: string | number;
+  label?: React.ReactNode;
+  /** Material Symbols icon name (rendered instead of the label in icon-only mode). */
+  icon?: string;
+  /** A colour swatch (any CSS color) shown inside the option. */
+  swatch?: string;
+  disabled?: boolean;
+}
+export interface ToolbarGroupProps {
+  value?: string | number;
+  /** Called with the newly selected option value. */
+  onChange?: (value: string | number) => void;
+  options?: ToolbarGroupOption[];
+  /** Lay the options out as a `columns`-wide grid (e.g. 3 for a 3×3 picker). */
+  columns?: number;
+  /** Show option labels as text; boolean or a responsive breakpoint object. Default: false (icon-only) */
+  showLabels?: ToolbarShowLabel;
+  /**
+   * `"all"` (default) honours `showLabels` for every option. `"selected"` shows
+   * the label only on the currently selected option; the rest render icon/swatch-only
+   * and a `"none"`/empty value falls back to the standard none icon. Use it for a
+   * swatch picker where only the chosen swatch is named (e.g. Section surface/gradient).
+   */
+  labelMode?: "all" | "selected";
+  "aria-label"?: string;
+  disabled?: boolean;
+  className?: string;
+}
+/** A single-select button group (radio semantics); set `columns` for a grid. */
+export declare function ToolbarGroup(props: ToolbarGroupProps): React.ReactElement;

package/src/components/toolbar/Toolbar.jsx

@@ -0,0 +1,335 @@
+import "./toolbar.css";
+import { useId, useRef, useState } from "react";
+import { Icon } from "../icon/Icon.jsx";
+import { Menu, MenuItem } from "../menu/Menu.jsx";
+
+/** Standard icon for a "none" selection (no alignment, no size, …). */
+export const TOOLBAR_NONE_ICON = "block";
+
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+function isNoneValue(v) {
+  return v === "none" || v === null || v === "";
+}
+
+/** A responsive `showLabel`/`showLabels` value: `{ xs?, sm?, … }` of booleans. */
+function isResponsive(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+
+/** Is the label shown for any breakpoint? (decides whether the span renders). */
+function labelEverShown(showLabel) {
+  if (isResponsive(showLabel)) return BREAKPOINTS.some((bp) => showLabel[bp]);
+  return !!showLabel;
+}
+
+/** Are labels shown at every breakpoint? (decides icon-only fallbacks/aria). */
+function labelAlwaysShown(showLabel) {
+  return showLabel === true;
+}
+
+/** Cascade per-breakpoint visibility classes for the label span (xs → xl). */
+function labelVisibilityClasses(showLabel) {
+  if (!isResponsive(showLabel)) return [];
+  let last = false;
+  return BREAKPOINTS.map((bp) => {
+    if (typeof showLabel[bp] === "boolean") last = showLabel[bp];
+    return `a1-toolbar__label--${last ? "show" : "hide"}-${bp}`;
+  });
+}
+
+/**
+ * Accessible name for a tool button. When labels are always visible the visible
+ * text is the name (no aria-label). When they're hidden — or responsively
+ * toggled — fall back to an explicit `aria-label` so the name is stable.
+ */
+function toolAriaLabel(showLabel, label) {
+  return labelAlwaysShown(showLabel) ? undefined : label;
+}
+
+/**
+ * Toolbar — a compact container that groups related editing controls (toggles,
+ * single-select button groups, action buttons, selects, menus) on one subtle
+ * surface. Think a text-editor toolbar, or the controls in the component
+ * configurator. Compose it from the `Toolbar*` sub-components, separating tools
+ * with `<ToolbarDivider />`.
+ *
+ * Pass `label` to render an optional caption above the bar — styled to match the
+ * compact ChoiceGroup label so toolbars sit naturally alongside form controls.
+ * Pass `overlay` to lift the bar into a floating, elevated surface (shadow +
+ * border) for a toolbar that hovers over page content — e.g. a selection
+ * formatting bar. The consumer positions the overlay (the bar itself does not
+ * choose a location).
+ *
+ * By default the bar is `fit-content` wide. Pass `fullWidth` to stretch it to
+ * fill its container, with the tools growing to share the available space
+ * (dividers keep their natural size).
+ */
+export function Toolbar({
+  label,
+  overlay = false,
+  fullWidth = false,
+  "aria-label": ariaLabel,
+  className = "",
+  children,
+  ...rest
+}) {
+  const labelId = useId();
+  const bar = (
+    <div
+      role="toolbar"
+      aria-label={label ? undefined : ariaLabel}
+      aria-labelledby={label ? labelId : undefined}
+      aria-orientation="horizontal"
+      className={cx(
+        "a1-toolbar",
+        overlay && "a1-toolbar--overlay",
+        fullWidth && "a1-toolbar--full-width",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+
+  if (!label) return bar;
+
+  return (
+    <div className="a1-toolbar-field">
+      <span className="a1-toolbar-field__label" id={labelId}>{label}</span>
+      {bar}
+    </div>
+  );
+}
+
+/** Visual separator between tools within a Toolbar. */
+export function ToolbarDivider({ className = "", ...rest }) {
+  return <span className={cx("a1-toolbar__divider", className)} role="separator" aria-orientation="vertical" {...rest} />;
+}
+
+function ToolButtonContent({ icon, label, showLabel, swatch }) {
+  const renderLabel = label != null && labelEverShown(showLabel);
+  const labelClass = cx("a1-toolbar__label", ...labelVisibilityClasses(showLabel));
+  return (
+    <>
+      {swatch ? <span className="a1-toolbar__swatch" style={{ background: swatch }} aria-hidden="true" /> : null}
+      {icon ? <Icon name={icon} size="sm" /> : null}
+      {renderLabel ? <span className={labelClass}>{label}</span> : null}
+    </>
+  );
+}
+
+/** A two-state toggle button (e.g. bold on/off). */
+export function ToolbarToggle({
+  icon,
+  label,
+  swatch,
+  pressed = false,
+  onChange,
+  showLabel = false,
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  return (
+    <button
+      type="button"
+      className={cx("a1-toolbar__button", className)}
+      aria-pressed={pressed}
+      aria-label={toolAriaLabel(showLabel, label)}
+      title={label}
+      disabled={disabled}
+      onClick={() => onChange?.(!pressed)}
+      {...rest}
+    >
+      <ToolButtonContent icon={icon} label={label} showLabel={showLabel} swatch={swatch} />
+    </button>
+  );
+}
+
+/** A plain action button inside a Toolbar (no pressed state). */
+export function ToolbarButton({
+  icon,
+  label,
+  swatch,
+  onClick,
+  showLabel = false,
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  return (
+    <button
+      type="button"
+      className={cx("a1-toolbar__button", className)}
+      aria-label={toolAriaLabel(showLabel, label)}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+      {...rest}
+    >
+      <ToolButtonContent icon={icon} label={label} showLabel={showLabel} swatch={swatch} />
+    </button>
+  );
+}
+
+/**
+ * A toolbar button that opens a dropdown `Menu` of choices (e.g. a list-type
+ * picker: none / bulleted / numbered / checklist, or a text-size picker). The
+ * button carries a small
+ * caret to signal that it opens a menu. When `value` is set, the matching item
+ * is marked active and — unless an explicit `icon` is given — the button shows
+ * that item's icon so the toolbar reflects the current selection.
+ */
+export function ToolbarMenu({
+  icon,
+  label,
+  value,
+  onChange,
+  items = [],
+  showLabel = false,
+  disabled = false,
+  "aria-label": ariaLabel,
+  className = "",
+  ...rest
+}) {
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef(null);
+  const active = items.find((it) => it.value === value);
+  const buttonIcon = icon ?? active?.icon;
+  const name = ariaLabel ?? label;
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        className={cx("a1-toolbar__button", "a1-toolbar__menu-button", className)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel ?? toolAriaLabel(showLabel, label)}
+        title={label}
+        disabled={disabled}
+        onClick={() => setOpen((o) => !o)}
+        {...rest}
+      >
+        <ToolButtonContent icon={buttonIcon} label={label} showLabel={showLabel} />
+        <Icon name="arrow_drop_down" size="sm" className="a1-toolbar__caret" />
+      </button>
+      <Menu open={open} onClose={() => setOpen(false)} anchorRef={btnRef} aria-label={name}>
+        {items.map((it) => (
+          <MenuItem
+            key={String(it.value)}
+            icon={it.icon}
+            active={it.value === value}
+            disabled={it.disabled}
+            onClick={() => { onChange?.(it.value); setOpen(false); }}
+          >
+            {it.label ?? String(it.value)}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+/**
+ * A single-select button group (radio semantics) — e.g. text alignment, or a
+ * compact `columns`-wide grid like a 3×3 crop-direction picker. Mutually
+ * exclusive options with clearly highlighted selection, in far less space than a
+ * ChoiceGroup.
+ */
+export function ToolbarGroup({
+  value,
+  onChange,
+  options = [],
+  columns,
+  showLabels = false,
+  labelMode = "all",
+  "aria-label": ariaLabel,
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  const btnRefs = useRef([]);
+  const grid = typeof columns === "number" && columns > 0;
+  const selectedIndex = options.findIndex((o) => o.value === value);
+
+  function move(index, select = true) {
+    const n = options.length;
+    const idx = ((index % n) + n) % n;
+    btnRefs.current[idx]?.focus();
+    if (select) onChange?.(options[idx].value);
+  }
+
+  function handleKeyDown(e, i) {
+    const n = options.length;
+    let next = null;
+    let clampVertical = false;
+    switch (e.key) {
+      case "ArrowRight": next = i + 1; break;
+      case "ArrowLeft": next = i - 1; break;
+      case "ArrowDown": next = grid ? i + columns : i + 1; clampVertical = grid; break;
+      case "ArrowUp": next = grid ? i - columns : i - 1; clampVertical = grid; break;
+      case "Home": next = 0; break;
+      case "End": next = n - 1; break;
+      default: return;
+    }
+    e.preventDefault();
+    // Vertical moves in a grid clamp (don't wrap to a wrong column); everything
+    // else wraps around the linear order.
+    if (clampVertical) {
+      if (next < 0 || next >= n) return;
+      move(next);
+    } else {
+      move(next);
+    }
+  }
+
+  const style = grid ? { "--a1-toolbar-grid-columns": columns } : undefined;
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cx("a1-toolbar__group", grid && "a1-toolbar__group--grid", className)}
+      style={style}
+      {...rest}
+    >
+      {options.map((opt, i) => {
+        const selected = i === selectedIndex;
+        // Roving tabindex: the selected option (or the first, when none is
+        // selected) is the single tab stop for the group.
+        const tabIndex = selected || (selectedIndex === -1 && i === 0) ? 0 : -1;
+        const optLabel = opt.label ?? String(opt.value);
+        // `labelMode="selected"` shows the label only on the selected option;
+        // the rest fall back to icon/swatch-only (and "none" to its icon).
+        const optShowLabel = labelMode === "selected" ? selected : showLabels;
+        const icon = opt.icon ?? (!labelAlwaysShown(optShowLabel) && isNoneValue(opt.value) ? TOOLBAR_NONE_ICON : undefined);
+        return (
+          <button
+            key={String(opt.value)}
+            ref={(el) => { btnRefs.current[i] = el; }}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={toolAriaLabel(optShowLabel, optLabel)}
+            title={optLabel}
+            tabIndex={tabIndex}
+            disabled={disabled || opt.disabled}
+            className="a1-toolbar__button"
+            onClick={() => onChange?.(opt.value)}
+            onKeyDown={(e) => handleKeyDown(e, i)}
+          >
+            <ToolButtonContent icon={icon} label={opt.label} showLabel={optShowLabel} swatch={opt.swatch} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/toolbar/toolbar.css

@@ -0,0 +1,229 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Toolbar
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Labelled field wrapper ────────────────────────────────────────────────── */
+/* Optional caption above the bar — matches the compact ChoiceGroup label so a
+   Toolbar sits naturally next to form controls. */
+.a1-toolbar-field {
+  display: flex;
+  flex-direction: column;
+  /* Keep the label and bar at their natural width so a stretching flex parent
+     (e.g. a column Stack with the default `align-items: stretch`) doesn't force
+     the bar to full width. A `fullWidth` bar still fills (it sets its own
+     `inline-size: 100%`). */
+  align-items: flex-start;
+  gap: var(--component-choice-group-compact-group-gap);
+}
+
+.a1-toolbar-field__label {
+  font-family: var(--component-paragraph-font-family);
+  /* The smallest body step. */
+  font-size: var(--semantic-font-size-body-xs);
+  font-weight: var(--component-field-label-font-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-toolbar {
+  /* Variant layer — every value resolves to a Style Dictionary token. */
+  --a1-toolbar-item-size: var(--base-spacing-32);
+  --a1-toolbar-bg: var(--semantic-color-surface-raised);
+  /* Unselected tools sit back in muted text; the selected tool steps forward
+     with default text on a darker neutral background — low-contrast, neutral. */
+  --a1-toolbar-fg: var(--semantic-color-text-muted);
+  --a1-toolbar-hover-bg: color-mix(in srgb, var(--semantic-color-text-default) 8%, transparent);
+  --a1-toolbar-selected-bg: color-mix(in srgb, var(--semantic-color-text-default) 16%, transparent);
+  --a1-toolbar-selected-fg: var(--semantic-color-text-default);
+  /* No boundary by default; the accessible theme and high-contrast modes raise
+     it so the bar is clearly delimited against the page surface. */
+  --a1-toolbar-border-width: 0;
+  --a1-toolbar-border-color: var(--semantic-color-border-default);
+
+  display: inline-flex;
+  align-items: center;
+  /* Tools wrap onto new rows when they run out of width — never overflow the
+     container and never scroll horizontally. */
+  flex-wrap: wrap;
+  max-inline-size: 100%;
+  gap: var(--base-spacing-2);
+  padding: var(--base-spacing-2);
+  background: var(--a1-toolbar-bg);
+  border: var(--a1-toolbar-border-width) solid var(--a1-toolbar-border-color);
+  border-radius: var(--base-radius-md);
+}
+
+/* Accessible theme: add a clear boundary at high contrast. */
+[data-theme='accessible'] .a1-toolbar {
+  --a1-toolbar-border-width: var(--component-divider-size-sm);
+}
+
+/* OS high-contrast / forced-colors: add the same boundary. */
+@media (prefers-contrast: more) {
+  .a1-toolbar {
+    --a1-toolbar-border-width: var(--component-divider-size-sm);
+  }
+}
+
+@media (forced-colors: active) {
+  .a1-toolbar {
+    --a1-toolbar-border-width: var(--component-divider-size-sm);
+  }
+}
+
+/* ── Full width (fill container, tools share the space) ────────────────────── */
+.a1-toolbar--full-width {
+  display: flex;
+  inline-size: 100%;
+}
+
+/* Tools grow to share the available space; dividers keep their natural size. */
+.a1-toolbar--full-width > :not(.a1-toolbar__divider) {
+  flex: 1 1 0;
+}
+
+/* A stretched (non-grid) group distributes its own buttons across its share. */
+.a1-toolbar--full-width .a1-toolbar__group:not(.a1-toolbar__group--grid) > .a1-toolbar__button {
+  flex: 1 1 0;
+}
+
+/* ── Overlay (floating, elevated bar over page content) ────────────────────── */
+.a1-toolbar--overlay {
+  background: var(--semantic-color-surface-card);
+  border: var(--component-divider-size-xs) solid var(--semantic-color-border-default);
+  box-shadow: var(--semantic-shadow-lg);
+}
+
+/* ── Buttons (toggle / action / group items) ───────────────────────────────── */
+
+.a1-toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--base-spacing-4);
+  min-inline-size: var(--a1-toolbar-item-size);
+  block-size: var(--a1-toolbar-item-size);
+  padding-inline: var(--base-spacing-6);
+  margin: 0;
+  border: none;
+  border-radius: var(--base-radius-sm);
+  background: transparent;
+  color: var(--a1-toolbar-fg);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-xs);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.a1-toolbar__button:hover {
+  background: var(--a1-toolbar-hover-bg);
+}
+
+.a1-toolbar__button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--component-button-focus-ring-width) var(--component-field-focus-ring-color);
+}
+
+/* Selected state for toggles (aria-pressed) and group items (aria-checked) —
+   default text on a darker neutral fill. */
+.a1-toolbar__button[aria-pressed="true"],
+.a1-toolbar__button[aria-checked="true"] {
+  background: var(--a1-toolbar-selected-bg);
+  color: var(--a1-toolbar-selected-fg);
+}
+
+/* A toggle (aria-pressed) can be turned off, so it keeps hover feedback when on.
+   A radio group item (aria-checked) can't be deselected, so it shows no hover or
+   active change — clicking it does nothing. */
+.a1-toolbar__button[aria-pressed="true"]:hover {
+  background: color-mix(in srgb, var(--semantic-color-text-default) 22%, transparent);
+}
+
+.a1-toolbar__button[aria-checked="true"]:hover,
+.a1-toolbar__button[aria-checked="true"]:active {
+  background: var(--a1-toolbar-selected-bg);
+}
+
+.a1-toolbar__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.a1-toolbar__label {
+  white-space: nowrap;
+}
+
+/* Colour swatch shown inside a tool to preview a specific colour. The border
+   keeps a light swatch from bleeding into the toolbar surface. */
+.a1-toolbar__swatch {
+  flex: none;
+  inline-size: var(--base-spacing-16);
+  block-size: var(--base-spacing-16);
+  border-radius: var(--base-radius-sm);
+  border: var(--component-divider-size-xs) solid var(--semantic-color-border-default);
+}
+
+/* Responsive label visibility (showLabel/showLabels as a breakpoint object).
+   The component emits one cascading class per breakpoint (xs → xl); the last
+   matching media query wins, mirroring Divider's responsive pattern. */
+.a1-toolbar__label--hide-xs { display: none; }
+.a1-toolbar__label--show-xs { display: inline; }
+
+@media (--bp-sm-up) {
+  .a1-toolbar__label--hide-sm { display: none; }
+  .a1-toolbar__label--show-sm { display: inline; }
+}
+
+@media (--bp-md-up) {
+  .a1-toolbar__label--hide-md { display: none; }
+  .a1-toolbar__label--show-md { display: inline; }
+}
+
+@media (--bp-lg-up) {
+  .a1-toolbar__label--hide-lg { display: none; }
+  .a1-toolbar__label--show-lg { display: inline; }
+}
+
+@media (--bp-xl) {
+  .a1-toolbar__label--hide-xl { display: none; }
+  .a1-toolbar__label--show-xl { display: inline; }
+}
+
+/* ── Menu button (opens a dropdown Menu) ───────────────────────────────────── */
+
+.a1-toolbar__menu-button {
+  inline-size: auto;
+}
+
+.a1-toolbar__caret {
+  /* Pull the caret tight to the icon/label so the menu button stays compact. */
+  margin-inline-start: calc(-1 * var(--base-spacing-2));
+}
+
+/* ── Group (segmented) + grid ──────────────────────────────────────────────── */
+
+.a1-toolbar__group {
+  display: inline-flex;
+  align-items: center;
+  /* A wide single group wraps its own buttons rather than overflowing the bar. */
+  flex-wrap: wrap;
+  gap: var(--base-spacing-2);
+}
+
+.a1-toolbar__group--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--a1-toolbar-grid-columns, 3), var(--a1-toolbar-item-size));
+  gap: var(--base-spacing-2);
+}
+
+/* ── Divider ───────────────────────────────────────────────────────────────── */
+
+.a1-toolbar__divider {
+  align-self: stretch;
+  inline-size: var(--component-divider-size-xs);
+  min-block-size: var(--a1-toolbar-item-size);
+  margin-inline: var(--base-spacing-2);
+  background: var(--semantic-color-border-default);
+  border-radius: var(--base-radius-pill);
+}
+

package/src/components/top-header/top-header.css

@@ -144,6 +144,8 @@
 }
 
 .a1-top-header__nav-submenu-trigger {
+  min-inline-size: 24px;
+  min-block-size: 24px;
   padding-inline: var(--base-spacing-8);
 }