@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/buttons/Button.js

@@ -1,274 +1,484 @@
-import { GalaxyTheme } from "../theme/types.js";
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Rotate from "../transform/Rotate.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Placement } from "../theme/enums.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
-import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import { useIsMac } from "../hooks/useIsMac.js";
+import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Dropdown from "../dropdown/Dropdown.js";
+import { parseHotkey, useHotkey } from "../hooks/useHotkey.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import IconSlot from "../icons/internal/IconSlot.js";
+import Rotate from "../transform/Rotate.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon } from "@phosphor-icons/react";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { ArrowUpRightIcon, CaretDownIcon, CircleNotchIcon } from "@phosphor-icons/react";
 //#region src/buttons/Button.tsx
-/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
+/**
+* The standard action control. It shows a label, an icon, or both, and does one thing when
+* pressed: runs `onClick`, submits or resets a form (`type`), or navigates (`href`, which renders
+* an `<a>` with button styling). Five modes (`ButtonVariant`): one monochrome-solid `PRIMARY` per
+* view, a bordered `SECONDARY`, a transparent `TERTIARY`, a muted filled `BASE` and a destructive
+* `ERROR`; five size
+* rungs (`ButtonSize`).
+*
+* Color is CSS: the variant map sets `color` and the fill on the root, and the label (`Text`),
+* icon (`Icon`), spinner and caps all inherit it, so a theme switch needs no re-render.
+*
+* Blocked states (`isDisabled`, `isLoading`) use `aria-disabled` whenever focus matters (loading,
+* or a tooltip that explains why) and native `disabled` otherwise; a blocked link drops its
+* `href`. While blocked, Button's own click handler prevents the default action and never calls
+* `onClick`.
+*
+* Every prop Button does not consume (`aria-*`, `data-*`, and any handler a wrapping `Tooltip`
+* injects with `cloneElement`) is spread onto the root, so Button is a valid trigger.
+*
+* With `dropdown` it becomes a split button: the main segment, a hairline seam and a caret segment
+* that opens a `Dropdown` of the main action's secondary options, in a `role="group"` named after
+* the button. Not a joined group of peers (`ButtonGroup`), a copy control (`CopyButton`), an on/off
+* control (`SwitchInput`) or an inline text link (`Link`).
+*/
+/** Mode (Constitution V-A local mode set, declared in `scripts/lint-dls.ts` `MODE_SETS`). */
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
+	/** Monochrome solid (`solid.primary`): the one main action in a view. The default. */
 	ButtonVariant["PRIMARY"] = "PRIMARY";
-	ButtonVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
+	/** Panel fill with a hairline border. */
 	ButtonVariant["SECONDARY"] = "SECONDARY";
+	/** Transparent until hovered. */
 	ButtonVariant["TERTIARY"] = "TERTIARY";
-	ButtonVariant["SUCCESS"] = "SUCCESS";
+	/**
+	* Muted fill (`solid.neutral`: `background.secondary` with a `text.primary` label), no border: a
+	* quiet filled action. Hover and press are clearly visible steps in both themes.
+	*/
+	ButtonVariant["BASE"] = "BASE";
+	/** Error solid (`solid.error`): destructive actions only. */
 	ButtonVariant["ERROR"] = "ERROR";
 	return ButtonVariant;
 }({});
-/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
+/** Canonical rungs; Button supports all five. */
 var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
+	/** 20px tall, `caption` label, 13px icon, 10px caret. */
+	ButtonSize["X_SMALL"] = "X_SMALL";
+	/** 24px tall, `body_sm` label, 13px icon, 10px caret. */
 	ButtonSize["SMALL"] = "SMALL";
+	/** 32px tall, `body_md` label, 15px icon, 12px caret. The default (1.x `MEDIUM` was 28px). */
 	ButtonSize["MEDIUM"] = "MEDIUM";
+	/** 36px tall, `body_lg` label, 15px icon, 12px caret. */
 	ButtonSize["LARGE"] = "LARGE";
+	/** 40px tall, `body_lg` label, 17px icon, 12px caret. */
+	ButtonSize["X_LARGE"] = "X_LARGE";
 	return ButtonSize;
 }({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var _exp3 = () => ({ $splitSide, $fillWidth }) => $splitSide === "MAIN" && $fillWidth ? "1 1 auto" : "0 1 auto";
-var _exp4 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
-var _exp5 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "4px").with("MEDIUM", () => "6px").with("LARGE", () => "6px").exhaustive();
-};
-var _exp6 = () => ({ $size, $noLabel }) => {
-	return match($size).with("SMALL", () => $noLabel ? "0 6px" : "0 6px").with("MEDIUM", () => $noLabel ? "0 6px" : "0 8px").with("LARGE", () => $noLabel ? "0 8px" : "0 12px").exhaustive();
-};
-var _exp7 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
-};
-var _exp8 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
-};
-var _exp9 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
+/**
+* Static rules. `border: 0.5px solid transparent` gives every variant the same box; the variant
+* map colors it. `INTERACTIVE_RESET` comes first so the rules after it win.
+*/
+var Root = /*#__PURE__*/ styled("button")({
+	name: "Root",
+	class: "gx-Button-r99zquh",
+	propsAsIs: false
+});
+/** A `leading` / `trailing` slot: never squeezed, so only the label shrinks. */
+var Slot = /*#__PURE__*/ styled("span")({
+	name: "Slot",
+	class: "gx-Button-Slot-s9yox33",
+	propsAsIs: false
+});
+/** The centered spinner over content that stays laid out (loading without an icon). */
+var LoadingOverlay = /*#__PURE__*/ styled("span")({
+	name: "LoadingOverlay",
+	class: "gx-Button-LoadingOverlay-l1bhvbb9",
+	propsAsIs: false
+});
+/**
+* Rest, hover and press per mode. Hover and `:active` skip a blocked button (`:disabled`, or the
+* `aria-disabled` state attribute), so it never reacts.
+*/
+var BUTTON_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Button-PRIMARY-p2x7iw5",
+	["SECONDARY"]: "gx-Button-SECONDARY-sukb6jc",
+	["TERTIARY"]: "gx-Button-TERTIARY-txznik7",
+	["BASE"]: "gx-Button-BASE-b148mgtl",
+	["ERROR"]: "gx-Button-ERROR-e1pxicn8"
 };
-var _exp0 = () => ({ $splitSide }) => $splitSide === "MAIN" ? "0" : "0.5px";
-var _exp1 = () => ({ $splitSide }) => $splitSide === "CARET" ? "0" : "0.5px";
-var _exp10 = () => ({ $splitSide }) => {
-	return match($splitSide).with("MAIN", () => "5px 0 0 5px").with("CARET", () => "0 5px 5px 0").otherwise(() => "5px");
+/**
+* `isActive`: the variant's `:active` row applied persistently, hover included, so a pressed
+* toggle keeps its look under the pointer. Declared after the variant map so it wins.
+*/
+var BUTTON_VARIANT_TO_PRESSED_CSS_MAP = {
+	["PRIMARY"]: "gx-Button-PRIMARY-p1avpq52",
+	["SECONDARY"]: "gx-Button-SECONDARY-s69rtgb",
+	["TERTIARY"]: "gx-Button-TERTIARY-t1aod6bi",
+	["BASE"]: "gx-Button-BASE-bz9snbo",
+	["ERROR"]: "gx-Button-ERROR-e1y0pij6"
 };
-var _exp11 = () => ({ $cursor }) => $cursor ?? "pointer";
-var _exp12 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+/**
+* `isDisabled` only (loading keeps the variant colors so the spinner reads on its fill). Built
+* from tokens, without opacity. Declared after the pressed map so it wins.
+*/
+var BUTTON_VARIANT_TO_DISABLED_CSS_MAP = {
+	["PRIMARY"]: "gx-Button-PRIMARY-p1xlodf7",
+	["SECONDARY"]: "gx-Button-SECONDARY-s1j0poue",
+	["TERTIARY"]: "gx-Button-TERTIARY-t11mr8g3",
+	["BASE"]: "gx-Button-BASE-b1wt7zpi",
+	["ERROR"]: "gx-Button-ERROR-e1wg9kb3"
 };
-var _exp13 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.tertiary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
+/**
+* Height, horizontal padding and gap per rung (Constitution III-A.4). Paddings off the space
+* scale (6, 14) are sums of it.
+*/
+var BUTTON_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Button-X_SMALL-x1hdfipe",
+	["SMALL"]: "gx-Button-SMALL-sgdnn4t",
+	["MEDIUM"]: "gx-Button-MEDIUM-m1osbvu7",
+	["LARGE"]: "gx-Button-LARGE-l14pe53f",
+	["X_LARGE"]: "gx-Button-X_LARGE-xwa5dwk"
 };
-var _exp14 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("PRIMARY_ALT", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+/** Icon-only (an `icon`, no `label` / `leading` / `trailing`): square. Declared after the size map. */
+var BUTTON_SIZE_TO_ICON_ONLY_CSS_MAP = {
+	["X_SMALL"]: "gx-Button-X_SMALL-x1ktetty",
+	["SMALL"]: "gx-Button-SMALL-s1gf76u1",
+	["MEDIUM"]: "gx-Button-MEDIUM-m2j3r8h",
+	["LARGE"]: "gx-Button-LARGE-l1jxdh2j",
+	["X_LARGE"]: "gx-Button-X_LARGE-xit20hd"
 };
-var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "StyledButton",
-	class: "s99zquh",
-	propsAsIs: false,
-	vars: {
-		"s99zquh-0": [_exp()],
-		"s99zquh-1": [_exp2()],
-		"s99zquh-2": [_exp3()],
-		"s99zquh-3": [_exp4()],
-		"s99zquh-4": [_exp5()],
-		"s99zquh-5": [_exp6()],
-		"s99zquh-6": [_exp7()],
-		"s99zquh-7": [_exp8()],
-		"s99zquh-8": [_exp9()],
-		"s99zquh-9": [_exp0()],
-		"s99zquh-10": [_exp1()],
-		"s99zquh-11": [_exp10()],
-		"s99zquh-12": [_exp11()],
-		"s99zquh-13": [_exp12()],
-		"s99zquh-14": [_exp13()],
-		"s99zquh-15": [_exp14()]
-	}
-}));
-var _exp15 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
-var _exp16 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var LabelWrapper = /*#__PURE__*/ styled("span")({
-	name: "LabelWrapper",
-	class: "l9yox33",
-	propsAsIs: false,
-	vars: {
-		"l9yox33-0": [_exp15()],
-		"l9yox33-1": [_exp16()]
-	}
+/** Pill radius; with the icon-only square, a circle. */
+var ROUND_CSS = "gx-Button-ROUND_CSS-r7sqfen";
+/** Declared after the icon-only map, so `fillWidth` wins over the square width. */
+var FILL_WIDTH_CSS = "gx-Button-FILL_WIDTH_CSS-f1wn5mw2";
+var LOADING_CSS = "gx-Button-LOADING_CSS-l1a8ibhg";
+/**
+* Loading without an icon: every child but the overlay stays laid out at `opacity: 0` (not
+* `visibility: hidden`, so the label stays in the accessible name) and the width is unchanged.
+*/
+var LOADING_OVERLAY_CSS = "gx-Button-LOADING_OVERLAY_CSS-lsoh4y6";
+/** The caps never shrink; only the label does. */
+var NO_SHRINK_CSS = "gx-Button-NO_SHRINK_CSS-nfko2kv";
+/** The split caret's accessible name (1.x `dropdownAriaLabel` default). */
+var SPLIT_CARET_LABEL = "More actions";
+/**
+* The split button's group: the box the parent lays out (it takes `className` / `style`). Carries
+* the spec's `SPLIT_ROOT_CSS` rules as a styled root (a raw `<span>` is lint-forbidden).
+*/
+var SplitRoot = /*#__PURE__*/ styled("span")({
+	name: "SplitRoot",
+	class: "gx-Button-SplitRoot-s36h2nj",
+	propsAsIs: false
 });
-var _exp17 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "fit-content";
-var SplitWrapper = /*#__PURE__*/ styled("div")({
-	name: "SplitWrapper",
-	class: "s1bhvbb9",
-	propsAsIs: false,
-	vars: { "s1bhvbb9-0": [_exp17()] }
+/** The hairline between the two segments; its color comes from the variant. */
+var Seam = /*#__PURE__*/ styled("span")({
+	name: "Seam",
+	class: "gx-Button-Seam-s1c8daz3",
+	propsAsIs: false
 });
-var _exp18 = () => ({ theme, $variant, $isDisabled }) => {
-	if ($isDisabled) return theme.color.border.disabled;
-	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("ERROR", () => theme.color.border.error).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.secondary).with("TERTIARY", () => "transparent").exhaustive();
+/** `fillWidth` on a split: the group stretches; only the main segment grows. */
+var SPLIT_FILL_WIDTH_CSS = "gx-Button-SPLIT_FILL_WIDTH_CSS-shgzd1y";
+/** The main segment of a stretched split grows and may shrink; the caret stays square. */
+var SPLIT_MAIN_FILL_CSS = "gx-Button-SPLIT_MAIN_FILL_CSS-s1dvmg9h";
+/** The main segment: square end corners, no end border (the seam draws it). */
+var SPLIT_MAIN_CSS = "gx-Button-SPLIT_MAIN_CSS-syyksk0";
+/** The caret segment: square start corners, no start border (the seam draws it). */
+var SPLIT_CARET_CSS = "gx-Button-SPLIT_CARET_CSS-s1dfb7ff";
+/**
+* Seam color per mode: the on-solid color at low alpha on the solids (it reads on every fill in
+* both themes), the segments' own border on `SECONDARY`, `border.secondary` on the `BASE` fill,
+* none on `TERTIARY` (as in 1.x).
+*/
+var BUTTON_VARIANT_TO_SPLIT_SEAM_CSS_MAP = {
+	["PRIMARY"]: "gx-Button-PRIMARY-paybm67",
+	["SECONDARY"]: "gx-Button-SECONDARY-s117mlpl",
+	["TERTIARY"]: "gx-Button-TERTIARY-tu1m2jx",
+	["BASE"]: "gx-Button-BASE-b1du68nl",
+	["ERROR"]: "gx-Button-ERROR-e1k8uw0a"
 };
-var SplitDivider = withTheme(/*#__PURE__*/ styled("div")({
-	name: "SplitDivider",
-	class: "s2x7iw5",
-	propsAsIs: false,
-	vars: { "s2x7iw5-0": [_exp18()] }
-}));
-function getTextVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).exhaustive();
-}
-function getIconVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).exhaustive();
-}
+/** The seam while the split is blocked (disabled or loading). Declared after the seam map. */
+var SPLIT_SEAM_DISABLED_CSS = "gx-Button-SPLIT_SEAM_DISABLED_CSS-spdjko7";
+/** Label type step per rung (Constitution III-A.4). */
 var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
 	["SMALL"]: TextSize.BODY_SM,
 	["MEDIUM"]: TextSize.BODY_MD,
-	["LARGE"]: TextSize.BODY_LG
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/**
+* Icon px per rung (the icon, the external arrow and the loading ring): 13 / 13 / 15 / 15 / 17,
+* one pixel over the 2026-10-04 step-down (Mitch, 2026-10-05). Odd, so each sits in an `IconSlot`
+* (whole pixels at 1x, centered at 2x); the caret keeps its own sizes.
+*/
+var BUTTON_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 13,
+	["SMALL"]: 13,
+	["MEDIUM"]: 15,
+	["LARGE"]: 15,
+	["X_LARGE"]: 17
+};
+/** The split caret: 12px, 10px on the 20px and 24px rungs (the collapsible Widget's caret). */
+var BUTTON_SIZE_TO_CARET_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12,
+	["X_LARGE"]: 12
 };
-var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
-	["SMALL"]: 12,
-	["MEDIUM"]: 14,
-	["LARGE"]: 16
+/** Identity: Kbd has all five rungs. */
+var BUTTON_SIZE_TO_KBD_SIZE_MAP = {
+	["X_SMALL"]: KbdSize.X_SMALL,
+	["SMALL"]: KbdSize.SMALL,
+	["MEDIUM"]: KbdSize.MEDIUM,
+	["LARGE"]: KbdSize.LARGE,
+	["X_LARGE"]: KbdSize.X_LARGE
 };
 /**
-* The standard action control. Renders a label, an icon, or both.
-*
-* `isLoading` and `isDisabled` behave identically at the DOM level — both set
-* `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
-* a spinner; render your own indicator alongside if you need one.
-*
-* With `contentWhenDropdown`, renders as a split button: a caret segment after
-* a hairline divider opens an anchored dropdown of advanced actions.
+* Solid modes take plain caps in the on-solid color (`Kbd isPlain`, Kbd Decision 4); the others a
+* raised `TERTIARY` fill.
 */
-var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownPosition = DropdownPosition.BOTTOM_END, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
-	const { activeTheme } = useGalaxyTheme();
+var BUTTON_VARIANT_TO_KBD_PROPS_MAP = {
+	["PRIMARY"]: { isPlain: true },
+	["SECONDARY"]: { variant: KbdVariant.TERTIARY },
+	["TERTIARY"]: { variant: KbdVariant.TERTIARY },
+	["BASE"]: { variant: KbdVariant.TERTIARY },
+	["ERROR"]: { isPlain: true }
+};
+/** Same name on every platform. */
+var sameName = (name) => ({
+	mac: name,
+	other: name
+});
+/**
+* Grammar token → `aria-keyshortcuts` key name (WAI-ARIA uses `KeyboardEvent.key` values).
+* `mod` is `Meta` on Mac and `Control` elsewhere. A single character upper-cases instead.
+*/
+var HOTKEY_TOKEN_TO_ARIA_KEY_MAP = {
+	mod: {
+		mac: "Meta",
+		other: "Control"
+	},
+	ctrl: sameName("Control"),
+	meta: sameName("Meta"),
+	cmd: sameName("Meta"),
+	alt: sameName("Alt"),
+	option: sameName("Alt"),
+	shift: sameName("Shift"),
+	enter: sameName("Enter"),
+	escape: sameName("Escape"),
+	esc: sameName("Escape"),
+	space: sameName("Space"),
+	tab: sameName("Tab"),
+	backspace: sameName("Backspace"),
+	delete: sameName("Delete"),
+	up: sameName("ArrowUp"),
+	down: sameName("ArrowDown"),
+	left: sameName("ArrowLeft"),
+	right: sameName("ArrowRight"),
+	home: sameName("Home"),
+	end: sameName("End"),
+	pageup: sameName("PageUp"),
+	pagedown: sameName("PageDown"),
+	f1: sameName("F1"),
+	f2: sameName("F2"),
+	f3: sameName("F3"),
+	f4: sameName("F4"),
+	f5: sameName("F5"),
+	f6: sameName("F6"),
+	f7: sameName("F7"),
+	f8: sameName("F8"),
+	f9: sameName("F9"),
+	f10: sameName("F10"),
+	f11: sameName("F11"),
+	f12: sameName("F12")
+};
+/** Tokens that make a combo safe to fire while typing (Shift alone is not). */
+var MODIFIER_TOKENS = new Set([
+	"mod",
+	"ctrl",
+	"meta",
+	"cmd",
+	"alt",
+	"option"
+]);
+var isHotkeyToken = (token) => Object.hasOwn(HOTKEY_TOKEN_TO_ARIA_KEY_MAP, token);
+/** The `aria-keyshortcuts` value for a combo, or `undefined` when a token has no name. */
+function toAriaKeyShortcuts(hotKeys, isMac) {
+	const names = [];
+	for (const entry of hotKeys) {
+		const token = entry.trim().toLowerCase();
+		if (isHotkeyToken(token)) {
+			const name = HOTKEY_TOKEN_TO_ARIA_KEY_MAP[token];
+			names.push(isMac ? name.mac : name.other);
+		} else if ([...token].length === 1) names.push(token.toUpperCase());
+		else return;
+	}
+	return names.join("+");
+}
+/** The standard action control: a label, an icon or both, in one of four modes and five rungs. */
+var Button = forwardRef(function Button({ label, icon, isIconTrailing = false, leading, trailing, hotKeys, shouldBindHotKey = false, variant = "PRIMARY", size = "MEDIUM", type = "button", href, isExternal = false, as, tooltip, dropdown, isDisabled = false, isLoading = false, isActive, isRound = false, fillWidth = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+	const isMac = useIsMac();
+	const rootRef = useRef(null);
+	const setRootRef = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const hasLabel = label !== void 0 && label !== "";
+	const hasHotKeys = hotKeys !== void 0 && hotKeys.length > 0;
+	const isIconOnly = icon !== void 0 && !hasLabel && leading === void 0 && trailing === void 0;
+	const hasTooltip = tooltip !== void 0 || isIconOnly && hasHotKeys;
+	const isLink = href !== void 0;
+	const isBlocked = isDisabled || isLoading;
+	const isSplit = dropdown !== void 0;
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const handleClick = useCallback((e) => {
-		if (isDisabled || isLoading) return;
-		onClick(e);
-	}, [
-		isDisabled,
-		isLoading,
-		onClick
-	]);
-	const closeDropdown = useCallback(() => {
-		setIsDropdownOpen(false);
-	}, []);
-	const handleCaretClick = useCallback((e) => {
-		e.stopPropagation();
-		setIsDropdownOpen((prev) => !prev);
-	}, []);
-	if ((isDisabled || isLoading) && isDropdownOpen) setIsDropdownOpen(false);
-	const renderIcon = useCallback(() => {
-		if (!icon) return null;
-		return /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: icon,
-				variant: getIconVariant(variant, activeTheme),
-				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size],
-				weight: isIconFilled ? IconWeight.FILL : IconWeight.BOLD
-			})
-		});
-	}, [
-		icon,
-		variant,
-		size,
-		isIconFilled,
-		activeTheme
-	]);
-	const renderLabel = useCallback(() => {
-		if (!label) return null;
-		return /* @__PURE__ */ jsx(LabelWrapper, {
-			$isEllipsis: isEllipsis,
-			children: /* @__PURE__ */ jsx(Text, {
-				variant: getTextVariant(variant, activeTheme),
-				weight: TextWeight.MEDIUM,
-				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
-				cursor: isDisabled || isLoading ? "not-allowed" : cursor,
-				isEllipsis,
-				children: label
-			})
-		});
-	}, [
-		label,
-		variant,
-		size,
-		isDisabled,
-		isLoading,
-		isEllipsis,
-		cursor,
-		activeTheme
-	]);
-	const mainButton = /* @__PURE__ */ jsxs(StyledButton, {
-		$variant: variant,
-		$size: size,
-		$fillWidth: fillWidth,
-		$noLabel: !label,
-		$isEllipsis: isEllipsis,
-		$cursor: cursor,
-		$splitSide: contentWhenDropdown !== void 0 ? "MAIN" : void 0,
+	if (isBlocked && isDropdownOpen) setIsDropdownOpen(false);
+	const isFocusableWhenBlocked = isLoading || hasTooltip;
+	const isNativeDisabled = !isLink && isDisabled && !isFocusableWhenBlocked;
+	const combo = hasHotKeys ? hotKeys.join("+") : "";
+	const isBound = shouldBindHotKey && hasHotKeys && parseHotkey(combo) !== null;
+	const hasModifier = hasHotKeys && hotKeys.some((entry) => MODIFIER_TOKENS.has(entry.trim().toLowerCase()));
+	useHotkey(combo, () => rootRef.current?.click(), {
+		isEnabled: isBound && !isBlocked,
+		shouldPreventDefault: true,
+		shouldIgnoreInputs: !hasModifier
+	});
+	const ariaKeyShortcuts = isBound ? toAriaKeyShortcuts(hotKeys, isMac) : void 0;
+	const handleClick = (event) => {
+		if (isBlocked) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const computedAria = {};
+	if (ariaLabel !== void 0) computedAria["aria-label"] = ariaLabel;
+	if (isBlocked && !isNativeDisabled) computedAria["aria-disabled"] = true;
+	if (isLoading) computedAria["aria-busy"] = true;
+	if (ariaKeyShortcuts !== void 0) computedAria["aria-keyshortcuts"] = ariaKeyShortcuts;
+	if (isLink) {
+		if (isActive === true) computedAria["aria-current"] = "page";
+	} else if (isActive !== void 0) computedAria["aria-pressed"] = isActive;
+	const elementProps = {};
+	if (!isLink) {
+		elementProps.type = type;
+		if (isNativeDisabled) elementProps.disabled = true;
+	} else if (isBlocked) {
+		elementProps.as = "a";
+		elementProps.role = "link";
+		elementProps.tabIndex = isFocusableWhenBlocked ? 0 : -1;
+	} else {
+		elementProps.as = as ?? "a";
+		elementProps.href = href;
+		if (isExternal) {
+			elementProps.target = "_blank";
+			elementProps.rel = "noopener noreferrer";
+		}
+	}
+	const iconPx = BUTTON_SIZE_TO_ICON_PX_MAP[size];
+	const loadingRing = /* @__PURE__ */ jsx(IconSlot, {
+		px: iconPx,
+		children: /* @__PURE__ */ jsx(Icon, {
+			component: CircleNotchIcon,
+			isSpinning: true,
+			size: iconPx,
+			variant: IconVariant.INHERIT
+		})
+	});
+	const iconNode = icon === void 0 ? null : isLoading ? loadingRing : /* @__PURE__ */ jsx(IconSlot, {
+		px: iconPx,
+		children: /* @__PURE__ */ jsx(Icon, {
+			component: icon,
+			size: iconPx,
+			variant: IconVariant.INHERIT
+		})
+	});
+	const hasOverlay = isLoading && icon === void 0;
+	const hasInlineHotKeys = hasHotKeys && !isIconOnly;
+	const root = /* @__PURE__ */ jsxs(Root, {
+		...computedAria,
+		...rest,
+		...elementProps,
+		ref: setRootRef,
+		id,
 		onClick: handleClick,
-		disabled: isDisabled || isLoading,
-		onMouseEnter,
-		onMouseLeave,
-		"aria-label": ariaLabel,
-		"aria-expanded": ariaExpanded,
-		"aria-controls": ariaControls,
-		"aria-haspopup": ariaHasPopup,
+		className: cx(BUTTON_VARIANT_TO_CSS_MAP[variant], isActive === true && BUTTON_VARIANT_TO_PRESSED_CSS_MAP[variant], isDisabled && BUTTON_VARIANT_TO_DISABLED_CSS_MAP[variant], BUTTON_SIZE_TO_CSS_MAP[size], isIconOnly && BUTTON_SIZE_TO_ICON_ONLY_CSS_MAP[size], isRound && ROUND_CSS, fillWidth && !isSplit && FILL_WIDTH_CSS, isLoading && LOADING_CSS, hasOverlay && LOADING_OVERLAY_CSS, isSplit && SPLIT_MAIN_CSS, isSplit && fillWidth && SPLIT_MAIN_FILL_CSS, isSplit ? void 0 : className),
+		...isSplit ? {} : { style },
 		children: [
-			!isIconTrailing && renderIcon(),
-			label && renderLabel(),
-			isIconTrailing && renderIcon()
+			leading !== void 0 && /* @__PURE__ */ jsx(Slot, { children: leading }),
+			!isIconTrailing && iconNode,
+			hasLabel && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
+				weight: TextWeight.MEDIUM,
+				variant: TextVariant.INHERIT,
+				lineClamp: 1,
+				children: label
+			}),
+			isIconTrailing && iconNode,
+			isLink && isExternal && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconSlot, {
+				px: iconPx,
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: ArrowUpRightIcon,
+					size: iconPx,
+					variant: IconVariant.INHERIT
+				})
+			}), /* @__PURE__ */ jsx(VisuallyHidden, { children: " (opens in a new tab)" })] }),
+			trailing !== void 0 && /* @__PURE__ */ jsx(Slot, { children: trailing }),
+			hasInlineHotKeys && /* @__PURE__ */ jsx(Kbd, {
+				hotKeys,
+				size: BUTTON_SIZE_TO_KBD_SIZE_MAP[size],
+				...BUTTON_VARIANT_TO_KBD_PROPS_MAP[variant],
+				isDisabled,
+				"aria-hidden": true,
+				className: NO_SHRINK_CSS
+			}),
+			hasOverlay && /* @__PURE__ */ jsx(LoadingOverlay, { children: loadingRing })
 		]
 	});
-	if (contentWhenDropdown === void 0) return mainButton;
-	const dropdownBody = typeof contentWhenDropdown === "function" ? contentWhenDropdown({ close: closeDropdown }) : contentWhenDropdown;
-	return /* @__PURE__ */ jsxs(SplitWrapper, {
-		$fillWidth: fillWidth,
+	const isFallbackBody = tooltip === void 0;
+	const main = hasTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		body: isFallbackBody ? ariaLabel : tooltip,
+		...isIconOnly && hasHotKeys ? { hotKeys } : {},
+		...isFallbackBody ? { "aria-hidden": true } : {},
+		children: root
+	}) : root;
+	if (!isSplit) return main;
+	return /* @__PURE__ */ jsxs(SplitRoot, {
+		role: "group",
+		"aria-label": hasLabel ? label : ariaLabel,
+		className: cx(fillWidth && SPLIT_FILL_WIDTH_CSS, className),
+		style,
 		children: [
-			mainButton,
-			/* @__PURE__ */ jsx(SplitDivider, {
-				$variant: variant,
-				$activeTheme: activeTheme,
-				$isDisabled: isDisabled || isLoading
+			main,
+			/* @__PURE__ */ jsx(Seam, {
+				"aria-hidden": true,
+				className: cx(BUTTON_VARIANT_TO_SPLIT_SEAM_CSS_MAP[variant], isBlocked && SPLIT_SEAM_DISABLED_CSS)
 			}),
-			/* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				grow: 0,
-				children: /* @__PURE__ */ jsx(Dropdown, {
-					body: dropdownBody,
-					isOpen: isDropdownOpen,
-					onClose: closeDropdown,
-					position: dropdownPosition,
-					noPadding: true,
-					children: /* @__PURE__ */ jsx(StyledButton, {
-						$variant: variant,
-						$size: size,
-						$noLabel: true,
-						$splitSide: "CARET",
-						type: "button",
-						disabled: isDisabled || isLoading,
-						onClick: handleCaretClick,
-						"aria-label": dropdownAriaLabel ?? "More actions",
-						"aria-haspopup": true,
-						"aria-expanded": isDropdownOpen,
-						children: /* @__PURE__ */ jsx(Rotate, {
-							isRotated: isDropdownOpen,
-							deg: -180,
-							children: /* @__PURE__ */ jsx(Icon, {
-								component: CaretDownIcon,
-								variant: getIconVariant(variant, activeTheme),
-								size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size],
-								weight: IconWeight.BOLD
-							})
+			/* @__PURE__ */ jsx(Dropdown, {
+				body: dropdown,
+				placement: Placement.BOTTOM_END,
+				isOpen: isDropdownOpen,
+				onOpenChange: setIsDropdownOpen,
+				isDisabled: isBlocked,
+				children: /* @__PURE__ */ jsx(Root, {
+					type: "button",
+					"aria-label": SPLIT_CARET_LABEL,
+					disabled: isBlocked,
+					className: cx(BUTTON_VARIANT_TO_CSS_MAP[variant], isDropdownOpen && BUTTON_VARIANT_TO_PRESSED_CSS_MAP[variant], isBlocked && BUTTON_VARIANT_TO_DISABLED_CSS_MAP[variant], BUTTON_SIZE_TO_CSS_MAP[size], BUTTON_SIZE_TO_ICON_ONLY_CSS_MAP[size], isRound && ROUND_CSS, SPLIT_CARET_CSS),
+					children: /* @__PURE__ */ jsx(Rotate, {
+						isRotated: isDropdownOpen,
+						deg: -180,
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: CaretDownIcon,
+							size: BUTTON_SIZE_TO_CARET_PX_MAP[size],
+							variant: IconVariant.INHERIT
 						})
 					})
 				})
 			})
 		]
 	});
-};
+});
+Button.displayName = "Button";
 //#endregion
 export { ButtonSize, ButtonVariant, Button as default };