@edux-design/buttons 0.1.4 → 0.3.0

package/dist/index.js

@@ -34,7 +34,12 @@ __export(index_exports, {
   ButtonGroup: () => ButtonGroup,
   ButtonGroupItem: () => ButtonGroupItem,
   IconButton: () => IconButton,
-  MenuButton: () => MenuButton
+  MenuButton: () => MenuButton,
+  Toolbar: () => Toolbar,
+  ToolbarButton: () => ToolbarButton,
+  ToolbarGroup: () => ToolbarGroup,
+  ToolbarSeparator: () => ToolbarSeparator,
+  ToolbarToggleButton: () => ToolbarToggleButton
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -65,21 +70,29 @@ var IconButton = (0, import_react.forwardRef)(
           "[IconButton]: Multiple variant props passed. Using the highest priority only."
         );
       }
+      const hasAccessibleName = Boolean(
+        props["aria-label"] || props["aria-labelledby"]
+      );
+      if (!hasAccessibleName) {
+        console.warn(
+          "[IconButton]: Provide an accessible name with aria-label or aria-labelledby."
+        );
+      }
     }
     const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
-    const sizes = {
-      small: "h-[36px] w-[36px] text-sm",
-      medium: "h-[44px] w-[44px] text-base",
-      large: "h-[56px] w-[56px] text-lg"
+    const sizes2 = {
+      small: "size-control-sm text-sm",
+      medium: "size-control-md text-base",
+      large: "size-control-lg text-lg"
     };
     const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed"
     };
-    const STYLES = (0, import_utils.cx)(defaults, sizes[size], variants[variant], className);
+    const STYLES = (0, import_utils.cx)(defaults, sizes2[size], variants[variant], className);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -137,21 +150,21 @@ var Button = (0, import_react2.forwardRef)(
     }
     const defaults = "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
     const fonts = "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
-    const sizes = {
+    const sizes2 = {
       small: "h-control-sm py-8 px-16 rounded-lg text-sm",
       medium: "h-control-md py-8 px-16 rounded-lg text-base",
       large: "h-control-lg py-8 px-16 rounded-lg text-lg"
     };
     const width = isStretched ? "w-full" : "w-fit-content";
     const variants = {
-      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      primary: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
       dangerBare: "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
       danger: "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
       disabled: "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline"
     };
-    const STYLES = (0, import_utils2.cx)(defaults, sizes[size], width, fonts, variants[variant]);
+    const STYLES = (0, import_utils2.cx)(defaults, sizes2[size], width, fonts, variants[variant]);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
@@ -173,13 +186,7 @@ var Button = (0, import_react2.forwardRef)(
 );
 
 // src/elements/MenuButton.jsx
-var import_react4 = __toESM(require("react"));
-
-// src/util/MenuButtonContext.jsx
 var import_react3 = __toESM(require("react"));
-var MenuButtonContext = (0, import_react3.createContext)();
-
-// src/elements/MenuButton.jsx
 var import_utils3 = require("@edux-design/utils");
 
 // ../icons/dist/index.mjs
@@ -208,22 +215,41 @@ var Chevron_default = SvgChevron;
 
 // src/elements/MenuButton.jsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function MenuButton({ children, size }) {
-  const SPLIT_BUTTON_STYLES = (0, import_utils3.cx)(
-    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+var MenuButton = (0, import_react3.forwardRef)(function MenuButton2({
+  children,
+  caret,
+  size = "medium",
+  className,
+  type = "button",
+  "aria-haspopup": ariaHasPopup = "menu",
+  ...props
+}, ref) {
+  const styles = (0, import_utils3.cx)(
+    "inline-flex items-center justify-center gap-8 rounded-lg border-2 border-border-primary-base bg-bg-base px-16 text-fg-primary-emphasis transition-all duration-300 ease-in-out outline-none focus:shadow-focus focus-visible:shadow-focus disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-bg-inactive disabled:text-fg-inactive",
     {
-      "h-[32px]": size === "small",
-      "h-[40px] py-2": size === "medium" || size === void 0
+      "min-h-control-sm text-sm": size === "small",
+      "min-h-control-md text-base": size === "medium"
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      "aria-haspopup": ariaHasPopup,
+      className: styles,
+      children: [
+        children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "flex items-center text-current", children: caret ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron_default, {}) })
+      ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chevron_default, {})
-  ] });
-}
+});
 
 // src/elements/ButtonGroup.jsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_utils4 = require("@edux-design/utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SIZE_STYLES = {
@@ -238,8 +264,8 @@ var SIZE_STYLES = {
   }
 };
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? import_react5.useLayoutEffect : import_react5.useEffect;
-var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
+var useIsomorphicLayoutEffect = isBrowser ? import_react4.useLayoutEffect : import_react4.useEffect;
+var ButtonGroup = (0, import_react4.forwardRef)(function ButtonGroup2({
   value,
   defaultValue,
   onChange,
@@ -249,7 +275,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   children,
   ...rest
 }, forwardedRef) {
-  const normalizedOptions = (0, import_react5.useMemo)(() => {
+  const normalizedOptions = (0, import_react4.useMemo)(() => {
     const childItems = (0, import_utils4.filterChildrenByDisplayName)(children, "ButtonGroupItem");
     return childItems.map((child, index) => {
       const props = child.props || {};
@@ -264,30 +290,30 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   }, [children]);
   const sizeStyles = SIZE_STYLES[size] ?? SIZE_STYLES.medium;
   const initialValue = value ?? defaultValue ?? (normalizedOptions.length ? normalizedOptions[0].value : void 0);
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(initialValue);
+  const [internalValue, setInternalValue] = (0, import_react4.useState)(initialValue);
   const isControlled = value !== void 0;
   const selectedValue = isControlled ? value : internalValue;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isControlled && defaultValue !== void 0) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isControlled) return;
     if (normalizedOptions.length && !normalizedOptions.some((option) => option.value === internalValue)) {
       setInternalValue(normalizedOptions[0].value);
     }
   }, [internalValue, isControlled, normalizedOptions]);
-  const buttonRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
-  const containerRef = (0, import_react5.useRef)(null);
-  const indicatorRef = (0, import_react5.useRef)({ width: 0, height: 0, x: 0, y: 0 });
-  const [indicator, setIndicator] = (0, import_react5.useState)({
+  const buttonRefs = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const containerRef = (0, import_react4.useRef)(null);
+  const indicatorRef = (0, import_react4.useRef)({ width: 0, height: 0, x: 0, y: 0 });
+  const [indicator, setIndicator] = (0, import_react4.useState)({
     width: 0,
     height: 0,
     x: 0,
     y: 0
   });
-  const setContainerRef = (0, import_react5.useCallback)(
+  const setContainerRef = (0, import_react4.useCallback)(
     (node) => {
       containerRef.current = node;
       if (typeof forwardedRef === "function") {
@@ -298,7 +324,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [forwardedRef]
   );
-  const registerButtonRef = (0, import_react5.useCallback)((optionValue) => {
+  const registerButtonRef = (0, import_react4.useCallback)((optionValue) => {
     return (node) => {
       if (!buttonRefs.current) return;
       if (node) {
@@ -308,7 +334,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
       }
     };
   }, []);
-  const updateIndicator = (0, import_react5.useCallback)(() => {
+  const updateIndicator = (0, import_react4.useCallback)(() => {
     const container = containerRef.current;
     const target = buttonRefs.current.get(selectedValue);
     if (!container || !target) {
@@ -335,13 +361,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
   useIsomorphicLayoutEffect(() => {
     updateIndicator();
   }, [updateIndicator, normalizedOptions.length, size]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isBrowser) return;
     const handleResize = () => updateIndicator();
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [updateIndicator]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isBrowser) return;
     const node = containerRef.current;
     if (!node || typeof ResizeObserver === "undefined") return;
@@ -351,13 +377,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     observer.observe(node);
     return () => observer.disconnect();
   }, [updateIndicator]);
-  const focusOption = (0, import_react5.useCallback)((option) => {
+  const focusOption = (0, import_react4.useCallback)((option) => {
     const node = buttonRefs.current.get(option.value);
     if (node) {
       node.focus();
     }
   }, []);
-  const handleSelect = (0, import_react5.useCallback)(
+  const handleSelect = (0, import_react4.useCallback)(
     (option) => {
       if (option.disabled || option.value === selectedValue) {
         return;
@@ -371,7 +397,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [isControlled, onChange, selectedValue]
   );
-  const getNextEnabledIndex = (0, import_react5.useCallback)(
+  const getNextEnabledIndex = (0, import_react4.useCallback)(
     (startIndex, direction) => {
       if (!normalizedOptions.length) return -1;
       let nextIndex = startIndex;
@@ -385,10 +411,10 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     },
     [normalizedOptions]
   );
-  const findFirstEnabledIndex = (0, import_react5.useCallback)(() => {
+  const findFirstEnabledIndex = (0, import_react4.useCallback)(() => {
     return normalizedOptions.findIndex((option) => !option.disabled);
   }, [normalizedOptions]);
-  const findLastEnabledIndex = (0, import_react5.useCallback)(() => {
+  const findLastEnabledIndex = (0, import_react4.useCallback)(() => {
     for (let i = normalizedOptions.length - 1; i >= 0; i -= 1) {
       if (!normalizedOptions[i].disabled) {
         return i;
@@ -397,8 +423,15 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     return -1;
   }, [normalizedOptions]);
   const indicatorVisible = indicator.width > 0 && indicator.height > 0;
+  const selectedIndex = normalizedOptions.findIndex(
+    (option) => option.value === selectedValue && !option.disabled
+  );
+  const firstEnabledIndex = normalizedOptions.findIndex(
+    (option) => !option.disabled
+  );
+  const activeTabStopIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
   const rootClasses = (0, import_utils4.cx)(
-    "inline-flex h-[44px] rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
+    "inline-flex h-control-md rounded-lg border-2 border-border-subtle bg-bg-base/90 p-2 shadow-inner",
     isStretched ? "w-full" : "w-auto",
     className
   );
@@ -407,7 +440,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     !isStretched && "w-auto"
   );
   const buttonBaseClasses = (0, import_utils4.cx)(
-    "relative z-10 h-[36px] inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
+    "relative z-10 h-control-sm inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-tight transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:shadow-focus motion-reduce:duration-0",
     sizeStyles.button,
     isStretched ? "flex-1" : "w-auto"
   );
@@ -417,6 +450,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
       ...rest,
       ref: setContainerRef,
       role: "radiogroup",
+      "aria-orientation": "horizontal",
       className: rootClasses,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: trackClasses, children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -424,13 +458,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
           {
             "aria-hidden": "true",
             className: (0, import_utils4.cx)(
-              "pointer-events-none h-[44px] absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
+              "pointer-events-none h-control-md absolute rounded-md border-2 border-border-primary-emphasis bg-bg-base shadow-[0_8px_20px_rgb(22_92_131/0.18)] transition-[transform,width,height] duration-300 ease-out motion-reduce:duration-0",
               !indicatorVisible && "opacity-0"
             ),
             style: {
               width: indicator.width || void 0,
               height: indicator.height || void 0,
-              transform: `translate(${indicator.x - 4}px`
+              transform: `translate(${indicator.x - 4}px, ${indicator.y - 4}px)`
             }
           }
         ),
@@ -488,6 +522,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
               type: "button",
               role: "radio",
               "aria-checked": isActive,
+              tabIndex: option.disabled ? -1 : index === activeTabStopIndex ? 0 : -1,
               disabled: option.disabled,
               className: buttonClasses,
               onClick: () => handleSelect(option),
@@ -522,17 +557,17 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
 });
 
 // src/elements/ButtonGroupItem.jsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 function ButtonGroupItem(_props) {
   return null;
 }
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/elements/ButtonCounter.jsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_utils5 = require("@edux-design/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
+var ButtonCounter = (0, import_react6.forwardRef)(function ButtonCounter2({
   value,
   defaultValue = 1,
   onChange,
@@ -555,20 +590,21 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   decrementButtonProps,
   incrementButtonProps,
   className,
+  "aria-label": ariaLabel,
   ...rest
 }, ref) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  const clampedValue = (0, import_react7.useMemo)(() => {
+  const clampedValue = (0, import_react6.useMemo)(() => {
     const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
     return Math.min(max, Math.max(min, safe));
   }, [currentValue, defaultValue, max, min]);
-  const commitValue = (0, import_react7.useCallback)(
+  const commitValue = (0, import_react6.useCallback)(
     (next) => {
       const clamped = Math.min(max, Math.max(min, next));
       if (!isControlled) setInternalValue(clamped);
-      onChange == null ? void 0 : onChange(clamped);
+      onChange?.(clamped);
     },
     [isControlled, max, min, onChange]
   );
@@ -600,16 +636,16 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   }
   const CONTROL_SIZES = {
     small: {
-      button: "h-[36px] w-[36px] text-sm",
-      display: "h-[36px] min-w-[48px] px-12 text-sm"
+      button: "size-control-sm text-sm",
+      display: "h-control-sm min-w-48 px-12 text-sm"
     },
     medium: {
-      button: "h-[44px] w-[44px] text-base",
-      display: "h-[44px] min-w-[56px] px-12 text-base"
+      button: "size-control-md text-base",
+      display: "h-control-md min-w-56 px-12 text-base"
     },
     large: {
-      button: "h-[56px] w-[56px] text-lg",
-      display: "h-[56px] min-w-[72px] px-16 text-lg"
+      button: "size-control-lg text-lg",
+      display: "h-control-lg min-w-72 px-16 text-lg"
     }
   };
   const defaultsButton = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
@@ -617,8 +653,8 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   const width = isStretched ? "w-full" : "w-fit-content";
   const variants = {
     primary: {
-      button: "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
-      display: "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white"
+      button: "border-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      display: "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-fg-invert"
     },
     secondary: {
       button: "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
@@ -667,14 +703,17 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   );
   const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
   const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
-  const [draftValue, setDraftValue] = (0, import_react7.useState)(String(clampedValue));
-  const [isEditing, setIsEditing] = (0, import_react7.useState)(false);
-  const inputRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const generatedValueId = (0, import_react6.useId)();
+  const valueElementId = inputProps?.id ?? generatedValueId;
+  const valueAriaLabel = inputProps?.["aria-label"] ?? ariaLabel ?? "Value";
+  const [draftValue, setDraftValue] = (0, import_react6.useState)(String(clampedValue));
+  const [isEditing, setIsEditing] = (0, import_react6.useState)(false);
+  const inputRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (isEditing) return;
     setDraftValue(String(clampedValue));
   }, [clampedValue, isEditing]);
-  const commitDraft = (0, import_react7.useCallback)(() => {
+  const commitDraft = (0, import_react6.useCallback)(() => {
     const trimmed = String(draftValue).trim();
     if (trimmed === "") {
       setDraftValue(String(clampedValue));
@@ -699,17 +738,17 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
           {
             ...decrementButtonProps,
             type: "button",
-            "aria-label": (decrementButtonProps == null ? void 0 : decrementButtonProps["aria-label"]) ?? "Decrease",
+            "aria-label": decrementButtonProps?.["aria-label"] ?? "Decrease",
+            "aria-controls": valueElementId,
             "aria-disabled": decrementDisabled,
             disabled: decrementDisabled,
             className: (0, import_utils5.cx)(
               leftButtonStyles,
               decrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
-              decrementButtonProps == null ? void 0 : decrementButtonProps.className
+              decrementButtonProps?.className
             ),
             onClick: (event) => {
-              var _a;
-              (_a = decrementButtonProps == null ? void 0 : decrementButtonProps.onClick) == null ? void 0 : _a.call(decrementButtonProps, event);
+              decrementButtonProps?.onClick?.(event);
               if (event.defaultPrevented) return;
               commitValue(clampedValue - step);
             },
@@ -723,38 +762,35 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
             ref: inputRef,
             type: "number",
             inputMode: "numeric",
+            id: valueElementId,
             disabled: !!disabled,
-            "aria-label": (inputProps == null ? void 0 : inputProps["aria-label"]) ?? "Value",
+            "aria-label": valueAriaLabel,
             className: (0, import_utils5.cx)(
               displayStyles,
-              "w-[44px] text-center outline-none bg-transparent text-fg-base",
+              "w-control-md text-center outline-none bg-transparent text-fg-base",
               "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0",
               "focus:shadow-focus focus-visible:shadow-focus focus:z-15 focus-within:z-15",
-              inputProps == null ? void 0 : inputProps.className
+              inputProps?.className
             ),
             value: draftValue,
             onChange: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onChange?.(event);
               if (event.defaultPrevented) return;
               setDraftValue(event.target.value);
             },
             onFocus: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onFocus) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onFocus?.(event);
               if (event.defaultPrevented) return;
               setIsEditing(true);
             },
             onBlur: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onBlur) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onBlur?.(event);
               if (event.defaultPrevented) return;
               setIsEditing(false);
               commitDraft();
             },
             onKeyDown: (event) => {
-              var _a;
-              (_a = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a.call(inputProps, event);
+              inputProps?.onKeyDown?.(event);
               if (event.defaultPrevented) return;
               if (event.key === "Enter") {
                 event.currentTarget.blur();
@@ -765,23 +801,33 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
               }
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_utils5.cx)(displayStyles, "select-none"), children: children ?? clampedValue }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "output",
+          {
+            id: valueElementId,
+            "aria-label": valueAriaLabel,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: (0, import_utils5.cx)(displayStyles, "select-none"),
+            children: children ?? clampedValue
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             ...incrementButtonProps,
             type: "button",
-            "aria-label": (incrementButtonProps == null ? void 0 : incrementButtonProps["aria-label"]) ?? "Increase",
+            "aria-label": incrementButtonProps?.["aria-label"] ?? "Increase",
+            "aria-controls": valueElementId,
             "aria-disabled": incrementDisabled,
             disabled: incrementDisabled,
             className: (0, import_utils5.cx)(
               rightButtonStyles,
               incrementDisabled && variant !== "disabled" ? variants.disabled.button : null,
-              incrementButtonProps == null ? void 0 : incrementButtonProps.className
+              incrementButtonProps?.className
             ),
             onClick: (event) => {
-              var _a;
-              (_a = incrementButtonProps == null ? void 0 : incrementButtonProps.onClick) == null ? void 0 : _a.call(incrementButtonProps, event);
+              incrementButtonProps?.onClick?.(event);
               if (event.defaultPrevented) return;
               commitValue(clampedValue + step);
             },
@@ -792,6 +838,264 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
     }
   );
 });
+
+// src/elements/Toolbar.tsx
+var import_react7 = require("react");
+var import_utils6 = require("@edux-design/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function toolbarButtons(root) {
+  return Array.from(
+    root.querySelectorAll("[data-edux-toolbar-button]")
+  ).filter((button) => {
+    if (button.closest("[data-edux-toolbar]") !== root) return false;
+    if (button.disabled || button.getAttribute("aria-disabled") === "true")
+      return false;
+    for (let node = button; node; node = node.parentElement) {
+      if (node.hidden || node.hasAttribute("inert") || node.getAttribute("aria-hidden") === "true")
+        return false;
+      const styles = node.ownerDocument.defaultView?.getComputedStyle(node);
+      if (styles?.display === "none" || styles?.visibility === "hidden")
+        return false;
+      if (node === root) break;
+    }
+    return true;
+  });
+}
+var Toolbar = (0, import_react7.forwardRef)(
+  function Toolbar2({
+    keyboardNavigation = "native",
+    orientation = "horizontal",
+    loop = true,
+    className,
+    children,
+    onKeyDown,
+    onFocusCapture,
+    ...props
+  }, forwardedRef) {
+    const rootRef = (0, import_react7.useRef)(null);
+    (0, import_react7.useImperativeHandle)(forwardedRef, () => rootRef.current);
+    const lastFocused = (0, import_react7.useRef)(null);
+    const originalTabIndexes = (0, import_react7.useRef)(
+      /* @__PURE__ */ new Map()
+    );
+    function syncTabStops() {
+      const root = rootRef.current;
+      if (!root || keyboardNavigation !== "roving") return;
+      const buttons = toolbarButtons(root);
+      const active = buttons.includes(lastFocused.current) ? lastFocused.current : buttons[0];
+      root.querySelectorAll("[data-edux-toolbar-button]").forEach((button) => {
+        const nextTabIndex = button === active ? 0 : -1;
+        if (button.closest("[data-edux-toolbar]") !== root) return;
+        if (!originalTabIndexes.current.has(button))
+          originalTabIndexes.current.set(
+            button,
+            button.getAttribute("tabindex")
+          );
+        if (button.tabIndex !== nextTabIndex) button.tabIndex = nextTabIndex;
+      });
+      lastFocused.current = active ?? null;
+    }
+    (0, import_react7.useEffect)(() => {
+      const root = rootRef.current;
+      if (!root || keyboardNavigation !== "roving") return;
+      syncTabStops();
+      const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(syncTabStops);
+      observer?.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: [
+          "disabled",
+          "aria-disabled",
+          "hidden",
+          "inert",
+          "aria-hidden",
+          "class",
+          "style",
+          "tabindex"
+        ]
+      });
+      return () => {
+        observer?.disconnect();
+        originalTabIndexes.current.forEach((value, button) => {
+          if (value === null) button.removeAttribute("tabindex");
+          else button.setAttribute("tabindex", value);
+        });
+        originalTabIndexes.current.clear();
+      };
+    }, [keyboardNavigation]);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ...props,
+        ref: rootRef,
+        role: "toolbar",
+        "aria-orientation": orientation,
+        "data-edux-toolbar": "",
+        className: (0, import_utils6.cx)(
+          "flex min-w-0 flex-wrap gap-8",
+          orientation === "vertical" ? "flex-col items-start" : "items-center",
+          className
+        ),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          const target = event.target;
+          if (target instanceof HTMLButtonElement && target.closest("[data-edux-toolbar]") === event.currentTarget) {
+            if (toolbarButtons(event.currentTarget).includes(target))
+              lastFocused.current = target;
+            syncTabStops();
+          }
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (keyboardNavigation !== "roving" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+          const root = event.currentTarget;
+          const target = event.target;
+          if (!(target instanceof HTMLButtonElement) || target.closest("[data-edux-toolbar]") !== root)
+            return;
+          const buttons = toolbarButtons(root);
+          const index = buttons.indexOf(target);
+          if (index === -1) return;
+          let next;
+          if (event.key === "Home") next = 0;
+          else if (event.key === "End") next = buttons.length - 1;
+          else {
+            const directionValue = root.ownerDocument.defaultView?.getComputedStyle(root).direction || root.closest("[dir]")?.getAttribute("dir");
+            const rtl = directionValue === "rtl";
+            const forward = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+            const backward = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+            if (event.key !== forward && event.key !== backward) return;
+            const direction = event.key === forward ? 1 : -1;
+            next = loop ? (index + direction + buttons.length) % buttons.length : Math.max(0, Math.min(buttons.length - 1, index + direction));
+          }
+          event.preventDefault();
+          buttons[next]?.focus();
+        },
+        children
+      }
+    );
+  }
+);
+var ToolbarGroup = (0, import_react7.forwardRef)(
+  function ToolbarGroup2({ orientation = "horizontal", className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ...props,
+        ref,
+        role: "group",
+        className: (0, import_utils6.cx)(
+          "inline-flex gap-4",
+          orientation === "vertical" ? "flex-col" : "flex-wrap items-center",
+          className
+        )
+      }
+    );
+  }
+);
+var ToolbarSeparator = (0, import_react7.forwardRef)(function ToolbarSeparator2({ orientation = "vertical", className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: (0, import_utils6.cx)(
+        "shrink-0 border-border-subtle",
+        orientation === "vertical" ? "h-control-sm border-l" : "w-full border-t",
+        className
+      )
+    }
+  );
+});
+
+// src/elements/ToolbarButton.tsx
+var import_react8 = require("react");
+var import_utils7 = require("@edux-design/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var sizes = {
+  small: "h-control-sm min-w-control-sm text-sm",
+  medium: "h-control-md min-w-control-md text-base",
+  large: "h-control-lg min-w-control-lg text-lg"
+};
+var ToolbarButton = (0, import_react8.forwardRef)(
+  function ToolbarButton2({
+    active = false,
+    size = "small",
+    variant = "neutral",
+    icon,
+    iconOnly = false,
+    children,
+    className,
+    type = "button",
+    onClick,
+    ...props
+  }, ref) {
+    const pressed = active || props["aria-pressed"] === true || props["aria-pressed"] === "true" || props["aria-pressed"] === "mixed";
+    const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
+    const colours = {
+      neutral: pressed ? "border-border-primary-base bg-bg-primary-subtle text-fg-primary-emphasis" : "border-transparent bg-transparent text-fg-base hover:bg-bg-minimal active:bg-bg-inactive",
+      primary: pressed ? "border-border-primary-emphasis bg-bg-primary-subtle text-fg-primary-emphasis" : "border-transparent bg-transparent text-fg-primary-emphasis hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
+      danger: pressed ? "border-border-danger-emphasis bg-bg-danger-subtle text-fg-danger-emphasis" : "border-transparent bg-transparent text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        "aria-pressed": active ? true : void 0,
+        ...props,
+        ref,
+        type,
+        "data-edux-toolbar-button": "",
+        "data-state": pressed ? "on" : "off",
+        className: (0, import_utils7.cx)(
+          "inline-flex shrink-0 items-center justify-center gap-8 whitespace-nowrap rounded-md border-2 font-semibold cursor-pointer outline-none transition-colors duration-150 motion-reduce:transition-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+          sizes[size],
+          iconOnly ? "aspect-square p-0" : "px-8",
+          disabled ? "border-border-subtle bg-bg-inactive text-fg-inactive" : colours[variant],
+          className
+        ),
+        onClick: (event) => {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex shrink-0 items-center",
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+var ToolbarToggleButton = (0, import_react8.forwardRef)(function ToolbarToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, ...props }, ref) {
+  const [internalPressed, setInternalPressed] = (0, import_react8.useState)(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ToolbarButton,
+    {
+      ...props,
+      ref,
+      "aria-pressed": isPressed,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (pressed === void 0) setInternalPressed(!isPressed);
+        onPressedChange?.(!isPressed, event);
+      }
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -799,5 +1103,10 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   ButtonGroup,
   ButtonGroupItem,
   IconButton,
-  MenuButton
+  MenuButton,
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarToggleButton
 });