@fairgarden/design 0.1.0-0.canary.0

package/navigation/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/navigation/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/navigation/tabs/index.js

@@ -0,0 +1,2 @@
+export * from './Tabs';
+//# sourceMappingURL=index.js.map

package/navigation/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/navigation/tabs/tabs.module.css

@@ -0,0 +1,339 @@
+/*
+ * Tabs (§9.5). Parts: `base` (the Root, the `tabs` container), `bar` (the
+ * non-scrolling row: the Scroll Area and the overflow button), `scroller`
+ * (the wide Scroll Area root, §10.19), `list` (the tablist and its
+ * baseline, inside the scroller), `tab`, `icon`, `label` (with `labelText` and the hidden
+ * weight-700 `labelSizer`), `indicator` (the current bar), `edge` /
+ * `edgeLine` (the disabled `line-dotted-fine` underline, true SVG dots),
+ * `overflow` (the › button), `panel` and `printLabel`. Colors are role
+ * variables only; local custom properties carry dimensions only:
+ *   --tab-inset        the tab's side inset; the bar and pressed line match the label
+ *   --tab-ring-offset  where the focus ring sits inside the hit area
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. Labels are caps wayfinding
+ * (`type-label`) [D165]; inactive labels are muted text [D170, D175]. */
+.label {
+  composes: typeLabel typeMuted from '../../utils/type.module.css';
+}
+
+.printLabel {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --tab-inset: var(--size-px-1);
+    --tab-ring-offset: calc(-1 * var(--border-size-2));
+
+    container: tabs / inline-size;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .bar {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  /*
+   * When 4–6 tabs overflow, the tablist scrolls sideways in a `wide` Scroll
+   * Area (§9.5, §10.19): the last tab clipped, a visible scrollbar under the
+   * row and the hard overflow edges, never a fade.
+   */
+  .scroller {
+    flex: 1 1 auto;
+  }
+
+  .list {
+    position: relative;
+    display: flex;
+    gap: calc(var(--size-px-5) - 2 * var(--tab-inset));
+  }
+
+  /* Each tab is at least --fgd-size-hit tall; it grows when the label wraps. */
+  .tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    min-block-size: var(--fgd-size-hit);
+    margin: 0;
+    padding-block: var(--size-px-2);
+    padding-inline: var(--tab-inset);
+    border: 0;
+    background: none;
+    color: var(--role-muted);
+    text-align: center;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* The pressed line, where the bar sits. */
+  .tab::after {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-inline: var(--tab-inset);
+    inset-block-end: 0;
+    border-block-end: var(--border-size-1-5) solid var(--primary12);
+  }
+
+  .icon {
+    color: inherit;
+  }
+
+  /* Label text and its weight-700 twin share one cell, so the width holds across states. */
+  .label {
+    display: inline-grid;
+    min-inline-size: 0;
+    text-wrap: balance;
+  }
+
+  .labelText,
+  .labelSizer {
+    grid-area: 1 / 1;
+  }
+
+  /*
+   * The bare-text hover underline's color, weight and offset (§9.5) [D181]:
+   * under the label, so its color and position tell it from the bar.
+   */
+  .labelText {
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .labelSizer {
+    visibility: hidden;
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The current bar: --border-size-2-25 in --primary12, placed from Base UI's active-tab variables. */
+  .indicator {
+    position: absolute;
+    inset-block-end: 0;
+    left: calc(var(--active-tab-left) + var(--tab-inset));
+    inline-size: calc(var(--active-tab-width) - 2 * var(--tab-inset));
+    border-block-end: var(--border-size-2-25) solid var(--primary12);
+    pointer-events: none;
+  }
+
+  /* Disabled underline host: true 1 px dots at 3 px (§4.6) [D36, D68]. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-inline-start: var(--tab-inset);
+    inset-block-end: 0;
+    inline-size: calc(100% - 2 * var(--tab-inset));
+    block-size: var(--fgd-dot-fine);
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  /* The › button, centred on a one-line tab row. */
+  .overflow {
+    flex: none;
+    margin-block-start: calc((var(--fgd-size-hit) - var(--size-px-7)) / 2);
+  }
+
+  .panel {
+    margin-block-start: var(--size-px-5);
+  }
+
+  .printLabel {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Hover transitions [D181]: --fgd-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .tab {
+      transition-property: background-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .labelText {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Underline: a --border-size-1 --role-rule baseline under the tablist, at
+   * least the container width; the bar and the pressed line cover it.
+   */
+  .underline .list {
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .underline .indicator,
+  .underline .tab::after {
+    inset-block-end: calc(-1 * var(--border-size-1));
+  }
+
+  /* Baseline: up to 3 equal cells with wrapping labels… */
+  .underline .tab {
+    flex: 1 1 0;
+  }
+
+  /* …4–6 tabs hug their labels on one scrolling line, the last one clipped. */
+  .underline .list:has(> .tab:nth-child(4)) .tab {
+    flex: none;
+    white-space: nowrap;
+  }
+
+  /* From 768 px: one row, tabs hugging their labels. Viewport fallback, then the container (§5.10.2). */
+  @media (min-width: 768px) {
+    .underline .tab {
+      flex: none;
+    }
+  }
+
+  @container tabs (width < 768px) {
+    .underline .tab {
+      flex: 1 1 0;
+    }
+  }
+
+  @container tabs (width >= 768px) {
+    .underline .tab {
+      flex: none;
+    }
+  }
+
+  /* Segmented: full-bleed equal cells with no dividers; the bar spans the cell bottom. */
+  .segmented {
+    --tab-inset: 0px;
+    --tab-ring-offset: calc(-2 * var(--border-size-2));
+  }
+
+  .segmented .list {
+    gap: 0;
+  }
+
+  .segmented .tab {
+    flex: 1 1 0;
+    padding: calc(var(--size-px-2) + var(--border-size-2));
+  }
+}
+
+@layer states {
+  /* Current (`data-active`): --primary12 label at --font-weight-7 beside the bar. */
+  .tab[data-active],
+  .tab[data-active] .label {
+    color: var(--primary12);
+  }
+
+  .tab[data-active] .label {
+    font-weight: var(--font-weight-7);
+  }
+
+  /*
+   * Hover (not disabled) [D181]: the label keeps its ink and takes the
+   * bare-text underline (--role-accent at --border-size-2, offset
+   * --size-px-1), told from the --border-size-2-25 --primary12 current bar by
+   * color and position, so hover never reads as current.
+   */
+  .tab:not([data-disabled]):hover .labelText {
+    text-decoration-line: underline;
+  }
+
+  /* Pressed: the bar at --border-size-2. */
+  .tab:not([data-disabled]):active::after {
+    display: block;
+    border-block-end-width: var(--border-size-2);
+  }
+
+  /* Focus: the 2 px --primary12 ring on the hit area, inside it so the scrolling row never clips it. */
+  .tab:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--tab-ring-offset);
+  }
+
+  /* Disabled: --role-muted label and the dotted underline; never dimmed [D16, D85]. */
+  .tab[data-disabled] {
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .tab[data-disabled] .edge {
+    display: block;
+  }
+
+  /*
+   * Filled segmented cell (light scopes only): its own ground, --role-select
+   * with a --role-select-edge edge and a --role-select-mark label; the bar
+   * stays --primary12. The edge's width comes out of the padding.
+   */
+  .filled .tab[data-active] {
+    padding: var(--size-px-2);
+    border: var(--border-size-2) solid var(--role-select-edge);
+    background-color: var(--role-select);
+    color: var(--role-select-mark);
+  }
+
+  .filled .tab[data-active] .label {
+    color: var(--role-select-mark);
+  }
+
+  /* Its hover moves the fill to --role-select-hover; label, bar and edge stay [D181]. */
+  .filled .tab[data-active]:not([data-disabled]):hover {
+    background-color: var(--role-select-hover);
+  }
+
+  .panel:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The list hides; every panel prints in order under its label over a --border-size-1 rule (§7.7). */
+    .bar {
+      display: none;
+    }
+
+    .panel,
+    .panel[hidden] {
+      display: block;
+      margin-block-start: var(--size-px-5);
+    }
+
+    .printLabel {
+      display: block;
+      margin: 0 0 var(--size-px-3);
+      padding-block-end: var(--size-px-2);
+      border-block-end: var(--border-size-1) solid var(--role-hairline);
+      color: var(--primary12);
+      break-after: avoid;
+    }
+  }
+}

package/navigation/toolbar/Toolbar.d.ts

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { type VariantProps } from 'class-variance-authority';
+import { type ButtonProps } from '../../actions/button';
+import { type LinkProps } from '../../actions/link';
+import { type MenuPopupProps } from '../../overlays/menu';
+export declare const toolbar: (props?: ({
+    kind?: "format" | "figure" | "list" | "context" | null | undefined;
+    docked?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The optional bottom rule (§9.11): `rule` governs a list or table; `hairline` where whitespace also separates. */
+export declare const toolbarBottomRule: (props?: ({
+    variant?: "hairline" | "rule" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToolbarVariants = VariantProps<typeof toolbar>;
+/** Props for Toolbar: Base UI Toolbar.Root props plus the kind, docked and color axes. */
+export type ToolbarProps = BaseToolbar.Root.Props & ToolbarVariants & {
+    /**
+     * `list` (default): a count, then its actions at the end ("Items (54)",
+     * "Add", "Sort By"). `format`: groups of icon toggles and buttons divided
+     * by vertical rules. `context`: a docked bar, tools at the start, a
+     * centered breadcrumb, a toggle at the end. `figure`: controls under a
+     * figure (zoom, full screen, download, a step pager).
+     */
+    kind?: ToolbarVariants['kind'];
+    /**
+     * The docked position: the top edge's one sticky bar, opaque on the
+     * band's ground, a --border-size-1 rule on the content side, on
+     * --layer-2. Swap it with the header; never stack the two. Default `false`.
+     */
+    docked?: ToolbarVariants['docked'];
+    /**
+     * Primary Radix scale: separators, rules, the count and the ring.
+     * Never defaulted; omitted, it inherits the band's scope [D133].
+     */
+    primary?: ToolbarVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared contract; items take their own props. */
+    secondary?: ToolbarVariants['secondary'];
+    /**
+     * The state the toolbar carries, printed as one `type-caption` line in
+     * its place ("54 items · Sorted by recently accessed"); the toolbar
+     * itself never prints.
+     */
+    caption?: React.ReactNode;
+};
+/**
+ * A Base UI Toolbar: one Tab stop enters it and arrow keys move within it.
+ * Compose ToolbarGroup, ToolbarSeparator, ToolbarButton, ToolbarLink,
+ * ToolbarCount and ToolbarMore; a Toggle or a Menu trigger joins through
+ * Base UI's `render`, e.g. `<ToolbarItem render={<Toggle … />} />`. The row
+ * takes the band's ground and has no face of its own. Avoid saturated
+ * grounds; on a photo, use media buttons.
+ */
+export declare function Toolbar(props: ToolbarProps): React.JSX.Element;
+/** Props for ToolbarGroup: Base UI Toolbar.Group props. */
+export type ToolbarGroupProps = BaseToolbar.Group.Props;
+/** Groups related items, `--size-px-1` apart (Base UI Toolbar.Group). `disabled` disables the whole group. */
+export declare function ToolbarGroup(props: ToolbarGroupProps): React.JSX.Element;
+/** Props for ToolbarSeparator: Base UI Toolbar.Separator props. */
+export type ToolbarSeparatorProps = BaseToolbar.Separator.Props;
+/**
+ * A vertical `--border-size-1` rule in `--role-rule`, `--size-px-4` tall
+ * with `--size-px-2` each side, announced to assistive technology. It takes
+ * the axis opposite the toolbar's and hides beside a pressed segment.
+ */
+export declare function ToolbarSeparator(props: ToolbarSeparatorProps): React.JSX.Element;
+/** Props for ToolbarItem: Base UI Toolbar.Button props; pass the control as `render`. */
+export type ToolbarItemProps = BaseToolbar.Button.Props;
+/**
+ * A roving-focus slot for a control that is not a ToolbarButton: a Toggle
+ * (§9.4) or a Menu trigger (§9.7), passed as `render`. Disabled items stay
+ * focusable by default.
+ */
+export declare function ToolbarItem(props: ToolbarItemProps): React.JSX.Element;
+/** Props for ToolbarButton: Button props plus the overflow priority. */
+export type ToolbarButtonProps = ButtonProps & {
+    /**
+     * Moves the item into ToolbarMore below 768 px of the toolbar's width;
+     * list it there too, as a MenuItem. Default `false`.
+     */
+    lowPriority?: boolean | null;
+};
+/**
+ * A Button (§9.2) in the toolbar's roving focus. Defaults: `variant="text"`,
+ * `size` `sm` (`md` when `iconOnly`). A `text` Button with an `icon` is
+ * icon-only below 768 px of the toolbar's width, its label kept as the
+ * accessible name and shown in a Tooltip; from 768 px the label returns.
+ * An `iconOnly` Button always carries the Tooltip. Disabled buttons stay
+ * focusable so their name can be read.
+ */
+export declare function ToolbarButton(props: ToolbarButtonProps): React.JSX.Element;
+/** Props for ToolbarLink: Link props. */
+export type ToolbarLinkProps = LinkProps;
+/**
+ * A Link (§9.3) in the toolbar's roving focus (Base UI Toolbar.Link).
+ * Default `kind="nav"`: no rest underline, Link's hover and ring.
+ */
+export declare function ToolbarLink(props: ToolbarLinkProps): React.JSX.Element;
+/** Props for ToolbarCount: `span` props. */
+export type ToolbarCountProps = React.ComponentPropsWithRef<'span'>;
+/** The list's count in mono `type-data`, `--primary12`, in parentheses: "Items (54)". */
+export declare function ToolbarCount(props: ToolbarCountProps): React.JSX.Element;
+/** Props for ToolbarMore: the overflow menu's items and popup options. */
+export type ToolbarMoreProps = Omit<MenuPopupProps, 'children'> & {
+    /** MenuItems mirroring the toolbar's `lowPriority` items, lowest priority last. */
+    children?: React.ReactNode;
+    /** The trigger's accessible name and tooltip. Default "More". */
+    label?: string;
+};
+/**
+ * The "…" overflow: an icon-only `more_horiz` `text` Button named "More"
+ * that opens a Menu. It shows only below 768 px of the toolbar's width,
+ * while the `lowPriority` items are hidden, so list those items here.
+ */
+export declare function ToolbarMore(props: ToolbarMoreProps): React.JSX.Element;
+/** Props for ToolbarBottomRule: `span` props plus the rule's role. */
+export type ToolbarBottomRuleProps = Omit<React.ComponentPropsWithRef<'span'>, 'children'> & VariantProps<typeof toolbarBottomRule> & {
+    /** `rule` (default) in `--role-rule`, governing a list or table; `hairline` in `--role-hairline`, where whitespace also separates. */
+    variant?: VariantProps<typeof toolbarBottomRule>['variant'];
+};
+/** The optional `--border-size-1` rule along the toolbar's bottom edge; place it last. Decorative. */
+export declare function ToolbarBottomRule(props: ToolbarBottomRuleProps): React.JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/navigation/toolbar/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}

package/navigation/toolbar/Toolbar.js

@@ -0,0 +1,174 @@
+'use client';
+import * as React from 'react';
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { cva } from 'class-variance-authority';
+import { Button } from '../../actions/button';
+import { Link } from '../../actions/link';
+import { Menu, MenuPopup, MenuTrigger } from '../../overlays/menu';
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from '../../overlays/tooltip';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './toolbar.module.css';
+/*
+ * Toolbar (§9.11): a compact row of tools acting on one object or region.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: toolbar.module.css; CVA functions `toolbar` (the row) and
+ *   `toolbarBottomRule` (the optional bottom rule).
+ * - Axes: `kind` → list | format | context | figure → list, format,
+ *   context, figure; `docked` → `docked`; `primary`, `secondary` → scales
+ *   module classes (the toolbar's own parts use only the primary).
+ *   Orientation is Base UI's own prop (`data-orientation`).
+ *   `toolbarBottomRule`: `variant` → rule | hairline.
+ * - Compound variants: none.
+ * - Defaults: kind list, docked false; color axes: none.
+ * - Color fallback: inherits the band's scope.
+ * - States: data-orientation on `base`, `group` and `separator` → the row
+ *   direction and the separator's axis; items are Buttons, Links, Toggles
+ *   and Menu triggers whose own modules draw hover, press, focus and
+ *   disabled (§9.2, §9.4, §9.7) [D181]; disabled items stay focusable
+ *   (`focusableWhenDisabled`); a separator beside a data-pressed item hides.
+ * - Parts: base (the row), group, separator, count, more, bottomRule; plus
+ *   collapsing / label (a ToolbarButton that is icon-only below 768 px, and
+ *   its label), lowPriority (an item that moves into "More") and caption
+ *   (the printed state line).
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `toolbar` (named, so a
+ *   toolbar inside a card answers to itself). Baseline: icon-only `text`
+ *   Buttons with names and Tooltips, low-priority items in "More"; viewport
+ *   fallback labels from --md-n-above; container from 768 px labels return
+ *   (§5.10.2). A toolbar never scrolls sideways and never wraps.
+ */
+export const toolbar = cva(styles.base, {
+    variants: {
+        kind: {
+            list: styles.list,
+            format: styles.format,
+            context: styles.context,
+            figure: styles.figure,
+        },
+        docked: {
+            true: styles.docked,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'list',
+        docked: false,
+    },
+});
+/** The optional bottom rule (§9.11): `rule` governs a list or table; `hairline` where whitespace also separates. */
+export const toolbarBottomRule = cva(styles.bottomRule, {
+    variants: {
+        variant: {
+            rule: styles.rule,
+            hairline: styles.hairline,
+        },
+    },
+    defaultVariants: {
+        variant: 'rule',
+    },
+});
+/**
+ * A Base UI Toolbar: one Tab stop enters it and arrow keys move within it.
+ * Compose ToolbarGroup, ToolbarSeparator, ToolbarButton, ToolbarLink,
+ * ToolbarCount and ToolbarMore; a Toggle or a Menu trigger joins through
+ * Base UI's `render`, e.g. `<ToolbarItem render={<Toggle … />} />`. The row
+ * takes the band's ground and has no face of its own. Avoid saturated
+ * grounds; on a photo, use media buttons.
+ */
+export function Toolbar(props) {
+    const { kind, docked, primary, secondary, caption, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BaseToolbar.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => toolbar({ kind, docked, primary, secondary, className: extra })) },
+            React.createElement(TooltipProvider, null, children)),
+        caption != null ? (React.createElement("p", { ...scope, className: styles.caption }, caption)) : null));
+}
+/** Groups related items, `--size-px-1` apart (Base UI Toolbar.Group). `disabled` disables the whole group. */
+export function ToolbarGroup(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseToolbar.Group, { ...rest, className: resolveClassName(className, (extra) => cx(styles.group, extra)) }));
+}
+/**
+ * A vertical `--border-size-1` rule in `--role-rule`, `--size-px-4` tall
+ * with `--size-px-2` each side, announced to assistive technology. It takes
+ * the axis opposite the toolbar's and hides beside a pressed segment.
+ */
+export function ToolbarSeparator(props) {
+    const { className, ...rest } = props;
+    return (React.createElement(BaseToolbar.Separator, { ...rest, className: resolveClassName(className, (extra) => cx(styles.separator, extra)) }));
+}
+/**
+ * A roving-focus slot for a control that is not a ToolbarButton: a Toggle
+ * (§9.4) or a Menu trigger (§9.7), passed as `render`. Disabled items stay
+ * focusable by default.
+ */
+export function ToolbarItem(props) {
+    return React.createElement(BaseToolbar.Button, { ...props });
+}
+/**
+ * A Button (§9.2) in the toolbar's roving focus. Defaults: `variant="text"`,
+ * `size` `sm` (`md` when `iconOnly`). A `text` Button with an `icon` is
+ * icon-only below 768 px of the toolbar's width, its label kept as the
+ * accessible name and shown in a Tooltip; from 768 px the label returns.
+ * An `iconOnly` Button always carries the Tooltip. Disabled buttons stay
+ * focusable so their name can be read.
+ */
+export function ToolbarButton(props) {
+    const { lowPriority, variant, size, className, children, disabled, focusableWhenDisabled = true, ...rest } = props;
+    const resolvedVariant = variant ?? 'text';
+    const collapsing = !rest.iconOnly && rest.icon != null && resolvedVariant === 'text';
+    const named = Boolean(rest.iconOnly) || collapsing;
+    const ownClasses = cx(collapsing && styles.collapsing, lowPriority && styles.lowPriority);
+    const buttonProps = {
+        ...rest,
+        variant: resolvedVariant,
+        size: size ?? (rest.iconOnly ? 'md' : 'sm'),
+        disabled,
+        focusableWhenDisabled,
+        className: resolveClassName(className, (extra) => cx(ownClasses, extra)),
+        children: collapsing ? React.createElement("span", { className: styles.label }, children) : children,
+    };
+    const item = (React.createElement(BaseToolbar.Button, { disabled: disabled, focusableWhenDisabled: focusableWhenDisabled, render: React.createElement(Button, { ...buttonProps }) }));
+    if (!named)
+        return item;
+    return (React.createElement(Tooltip, null,
+        React.createElement(TooltipTrigger, { render: item }),
+        React.createElement(TooltipPopup, null, children)));
+}
+/**
+ * A Link (§9.3) in the toolbar's roving focus (Base UI Toolbar.Link).
+ * Default `kind="nav"`: no rest underline, Link's hover and ring.
+ */
+export function ToolbarLink(props) {
+    const { kind, ...rest } = props;
+    return React.createElement(BaseToolbar.Link, { render: React.createElement(Link, { kind: kind ?? 'nav', ...rest }) });
+}
+/** The list's count in mono `type-data`, `--primary12`, in parentheses: "Items (54)". */
+export function ToolbarCount(props) {
+    const { className, ...rest } = props;
+    return React.createElement("span", { ...rest, className: cx(styles.count, className) });
+}
+/**
+ * The "…" overflow: an icon-only `more_horiz` `text` Button named "More"
+ * that opens a Menu. It shows only below 768 px of the toolbar's width,
+ * while the `lowPriority` items are hidden, so list those items here.
+ */
+export function ToolbarMore(props) {
+    const { label = 'More', align = 'end', children, ...popupProps } = props;
+    return (React.createElement(Menu, null,
+        React.createElement(Tooltip, null,
+            React.createElement(TooltipTrigger, { render: React.createElement(BaseToolbar.Button, { render: React.createElement(MenuTrigger, { variant: "text", size: "sm", iconOnly: true, icon: "more_horiz", className: styles.more }, label) }) }),
+            React.createElement(TooltipPopup, null, label)),
+        React.createElement(MenuPopup, { ...popupProps, align: align }, children)));
+}
+/** The optional `--border-size-1` rule along the toolbar's bottom edge; place it last. Decorative. */
+export function ToolbarBottomRule(props) {
+    const { variant, className, ...rest } = props;
+    return (React.createElement("span", { "aria-hidden": "true", ...rest, className: toolbarBottomRule({ variant, className }) }));
+}
+//# sourceMappingURL=Toolbar.js.map

package/navigation/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}

package/navigation/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+//# sourceMappingURL=index.d.ts.map

package/navigation/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}