@aortl/admin-react 0.18.4 → 0.19.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.19.0] - 2026-07-02
+
+### Added
+
+- `ToggleButton` — a two-state button styled like `Button` (same variants, sizes, icons, `hotkey`), wrapping Base UI Toggle. CSS-side there is no new class: any `.btn` with an `aria-pressed` attribute renders a leading mini-switch indicator, and `aria-pressed="true"` slides it on and adds a selected wash — so vanilla toggles and `.btn-group` composition work out of the box. (both)
+
+### Fixed
+
+- Dialog body no longer clips its content in Safari. `.dialog-body` (and the form-dialog wrapper) used `flex: 1 1 0%`; Safari collapses a `flex-basis: 0` item that is itself an `overflow` scroll container to ~0 content height, so even short bodies were cut off behind a scrollbar. Switched to `flex: 1 1 auto` — content still shrinks and scrolls when tall. (css)
+
+## [0.18.5] - 2026-06-30
+
+### Fixed
+
+- Global hotkey handling no longer throws on synthetic `keydown` events that omit `key` (autofill, password managers, some IMEs); `normalizeEvent` now treats a `key`-less event as no chord. (react)
+
 ## [0.18.4] - 2026-06-29
 
 ### Added
@@ -105,12 +121,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Make `primary` a high-contrast neutral and move blue to `info`. (both)
 - Use solid color fills for `Alert` and `Badge` status variants. (both)
 
-[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.4...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.0...HEAD
 [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
 [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
 [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
 
+[0.19.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.5...v0.19.0
+[0.18.5]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.4...v0.18.5
 [0.18.4]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.3...v0.18.4
 [0.18.3]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...v0.18.3
 [0.18.2]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.1...v0.18.2

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,OAAO,UAAU,CAAC;IACpE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;uEACmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;CACrC;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,EACT,IAAe,EACf,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CA8Cb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,OAAO,UAAU,CAAC;IACpE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;uEACmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uFAAuF;IACvF,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;CACrC;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,EACT,IAAe,EACf,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAkCb"}

package/dist/ToggleButton.d.ts

@@ -0,0 +1,25 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ComponentProps } from 'react';
+import { ButtonSize, ButtonVariant } from './Button';
+import { IconProp } from './icon';
+export interface ToggleButtonProps extends ComponentProps<typeof BaseToggle> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    /** Leading icon. Pass a component (`icon={IconStar}`) or an element. */
+    icon?: IconProp;
+    /** Trailing icon. Pass a component (`iconTrailing={IconChevronDown}`) or an element. */
+    iconTrailing?: IconProp;
+    /**
+     * Keyboard shortcut that dispatches a native click on the button, flipping
+     * the pressed state. Same syntax as `useHotkey`. Pass an array for
+     * alternatives — only the first is rendered as a visual chip.
+     */
+    hotkey?: string | readonly string[];
+}
+/**
+ * A two-state button styled like `Button`; `aria-pressed` carries the state,
+ * which CSS renders as a leading mini switch. Composes with `ButtonGroup`.
+ */
+export declare function ToggleButton({ variant, size, fullWidth, icon, iconTrailing, hotkey, className, disabled, children, ref, ...rest }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/ToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../src/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE1D,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAInD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,OAAO,UAAU,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wFAAwF;IACxF,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,2CA2BnB"}

package/dist/admin.scoped.css

@@ -1874,6 +1874,29 @@
         opacity: 90%;
     }
       }
+:scope._ao-btn:is([aria-pressed="true"], [data-pressed]), :scope ._ao-btn:is([aria-pressed="true"], [data-pressed]) {
+    background-color: var(--color-primary-muted);
+    color: var(--color-primary);
+  }
+:scope._ao-btn:is([aria-pressed], [data-pressed])::before, :scope ._ao-btn:is([aria-pressed], [data-pressed])::before {
+    --btn-toggle-thumb: var(--color-paper);
+    content: "";
+    flex-shrink: 0;
+    inline-size: 1.75em;
+    block-size: 1em;
+    border-radius: 9999px;
+    background-color: var(--color-border-strong);
+    background-image: radial-gradient( circle closest-side, var(--btn-toggle-thumb) calc(100% - 0.5px), transparent );
+    background-size: calc(1em - 4px) calc(1em - 4px);
+    background-position: 2px 50%;
+    background-repeat: no-repeat;
+    transition: background-color 150ms, background-position 150ms;
+  }
+:scope._ao-btn:is([aria-pressed="true"], [data-pressed])::before, :scope ._ao-btn:is([aria-pressed="true"], [data-pressed])::before {
+    --btn-toggle-thumb: var(--color-primary-content);
+    background-color: var(--color-primary);
+    background-position: calc(100% - 2px) 50%;
+  }
 :scope._ao-btn-sm, :scope ._ao-btn-sm {
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 3);
@@ -1930,6 +1953,9 @@
     :scope._ao-btn-loading::before, :scope ._ao-btn-loading::before {
       animation-duration: 2s;
     }
+    :scope._ao-btn:is([aria-pressed], [data-pressed])::before, :scope ._ao-btn:is([aria-pressed], [data-pressed])::before {
+      transition: none;
+    }
   }
 :scope._ao-btn-group, :scope ._ao-btn-group {
     display: inline-flex;
@@ -3635,7 +3661,7 @@
 :scope._ao-dialog-body, :scope ._ao-dialog-body {
     display: flex;
     min-height: calc(var(--spacing) * 0);
-    flex: 1;
+    flex: auto;
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
     overflow-y: auto;
@@ -3645,7 +3671,7 @@
 :scope._ao-dialog > form, :scope ._ao-dialog > form {
     display: flex;
     min-height: calc(var(--spacing) * 0);
-    flex: 1;
+    flex: auto;
     flex-direction: column;
   }
 :scope._ao-dialog-footer, :scope ._ao-dialog-footer {

package/dist/hotkey-parse.d.ts

@@ -14,7 +14,7 @@ export declare function parseChord(input: string): ParsedChord;
 export declare function parseKeys(keys: string | readonly string[]): ParsedChord[];
 /** Canonical wire form used as a map key in the registry. */
 export declare function canonicalize(chord: ParsedChord): string;
-/** Canonical chord string for a keyboard event; `null` for a bare modifier press. */
+/** Canonical chord string for a keyboard event; `null` for a bare modifier press or a `key`-less synthetic event. */
 export declare function normalizeEvent(e: KeyboardEvent): string | null;
 /** Visual chips for a chord — one entry per modifier and the final key. */
 export declare function formatChord(chord: ParsedChord): string[];

package/dist/hotkey-parse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hotkey-parse.d.ts","sourceRoot":"","sources":["../src/hotkey-parse.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CA2BrD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,WAAW,EAAE,CAGzE;AAED,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAOvD;AAED,qFAAqF;AACrF,wBAAgB,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAa9D;AA0BD,2EAA2E;AAC3E,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,EAAE,CAcxD;AAkBD,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,MAAM,CAEzE"}
+{"version":3,"file":"hotkey-parse.d.ts","sourceRoot":"","sources":["../src/hotkey-parse.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAkCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CA2BrD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,WAAW,EAAE,CAGzE;AAED,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAOvD;AAED,qHAAqH;AACrH,wBAAgB,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAe9D;AA0BD,2EAA2E;AAC3E,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,EAAE,CAcxD;AAkBD,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,MAAM,CAEzE"}

package/dist/index.cjs

@@ -4,6 +4,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let _base_ui_react_avatar = require("@base-ui/react/avatar");
 let _base_ui_react_button = require("@base-ui/react/button");
+let _base_ui_react_toggle = require("@base-ui/react/toggle");
 let _base_ui_react_input = require("@base-ui/react/input");
 let _base_ui_react_number_field = require("@base-ui/react/number-field");
 let _base_ui_react_field = require("@base-ui/react/field");
@@ -390,8 +391,9 @@ function canonicalize(chord) {
 	parts.push(chord.key);
 	return parts.join("+");
 }
-/** Canonical chord string for a keyboard event; `null` for a bare modifier press. */
+/** Canonical chord string for a keyboard event; `null` for a bare modifier press or a `key`-less synthetic event. */
 function normalizeEvent(e) {
+	if (!e.key) return null;
 	const key = e.key.toLowerCase();
 	if (key === "control" || key === "shift" || key === "alt" || key === "meta") return null;
 	const mods = /* @__PURE__ */ new Set();
@@ -567,16 +569,28 @@ function useHotkey(keys, handler, options) {
 	}, [derived, enabled]);
 	return derived;
 }
-//#endregion
-//#region src/Button.tsx
-function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ref, ...rest }) {
+/**
+* `useHotkey` bound to a rendered element: the chord dispatches a native
+* `.click()`, so `onClick` fires, `type="submit"` submits, an anchor
+* navigates. Returns `setRef` to pass as the element's ref; it latches the
+* element and forwards `ref`.
+*/
+function useHotkeyClick(keys, ref, options) {
 	const elementRef = (0, react.useRef)(null);
 	const setRef = (0, react.useCallback)((node) => {
 		elementRef.current = node;
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}, [ref]);
-	const { ariaKeyShortcuts, primaryChord } = useHotkey(hotkey, () => elementRef.current?.click(), { enabled: !disabled && !loading });
+	return {
+		...useHotkey(keys, () => elementRef.current?.click(), options),
+		setRef
+	};
+}
+//#endregion
+//#region src/Button.tsx
+function Button({ variant = "default", size = "md", fullWidth, loading, icon, iconTrailing, hotkey, className, type = "button", disabled, children, onClick, ref, ...rest }) {
+	const { ariaKeyShortcuts, primaryChord, setRef } = useHotkeyClick(hotkey, ref, { enabled: !disabled && !loading });
 	const iconOnly = children == null && (icon != null || iconTrailing != null);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_button.Button, {
 		ref: setRef,
@@ -616,6 +630,33 @@ function ButtonGroup({ orientation = "horizontal", fullWidth = false, role = "gr
 	});
 }
 //#endregion
+//#region src/ToggleButton.tsx
+/**
+* A two-state button styled like `Button`; `aria-pressed` carries the state,
+* which CSS renders as a leading mini switch. Composes with `ButtonGroup`.
+*/
+function ToggleButton({ variant = "default", size = "md", fullWidth, icon, iconTrailing, hotkey, className, disabled, children, ref, ...rest }) {
+	const { ariaKeyShortcuts, primaryChord, setRef } = useHotkeyClick(hotkey, ref, { enabled: !disabled });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_toggle.Toggle, {
+		ref: setRef,
+		disabled,
+		"aria-keyshortcuts": ariaKeyShortcuts,
+		className: cn([
+			"btn",
+			variant !== "default" && `btn-${variant}`,
+			size !== "md" && `btn-${size}`,
+			fullWidth && "btn-full-width"
+		], className),
+		...rest,
+		children: [
+			renderIcon(icon),
+			children,
+			renderIcon(iconTrailing),
+			primaryChord !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Kbd, { keys: primaryChord }) : null
+		]
+	});
+}
+//#endregion
 //#region src/Breadcrumbs.tsx
 function BreadcrumbsRoot({ separator, className, children, "aria-label": ariaLabel = "Breadcrumb", ...rest }) {
 	const items = react.Children.toArray(children).filter(react.isValidElement);
@@ -2894,6 +2935,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.Timeline = Timeline;
+exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.getPaginationItems = getPaginationItems;
 exports.useAppShell = useAppShell;