@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/index.js

@@ -1,67 +1,92 @@
-import { Box as e } from "./components/Box/Box.js";
-import { Alert as t } from "./components/Alert/Alert.js";
-import { Avatar as n } from "./components/Avatar/Avatar.js";
-import { VisuallyHidden as r } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { Accordion as e } from "./components/Accordion/Accordion.js";
+import { AccordionItem as t } from "./components/Accordion/AccordionItem.js";
+import { Alert as n } from "./components/Alert/Alert.js";
+import { Avatar as r } from "./components/Avatar/Avatar.js";
 import { AvatarGroup as i } from "./components/AvatarGroup/AvatarGroup.js";
 import { Badge as a } from "./components/Badge/Badge.js";
-import { Button as o } from "./components/Button/Button.js";
-import { Card as s } from "./components/Card/Card.js";
-import { Center as c } from "./components/Center/Center.js";
-import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
-import { Cluster as u } from "./components/Cluster/Cluster.js";
-import { Code as d } from "./components/Code/Code.js";
-import { Counter as f } from "./components/Counter/Counter.js";
-import { Cover as p } from "./components/Cover/Cover.js";
-import { Divider as m } from "./components/Divider/Divider.js";
-import { Field as h } from "./components/Field/Field.js";
-import { Fieldset as g } from "./components/Fieldset/Fieldset.js";
-import { Frame as _ } from "./components/Frame/Frame.js";
-import { Grid as v } from "./components/Grid/Grid.js";
-import { Heading as y } from "./components/Heading/Heading.js";
-import { AddIcon as b } from "./components/Icon/AddIcon.js";
-import { ChevronDownIcon as x } from "./components/Icon/ChevronDownIcon.js";
-import { CloseIcon as S } from "./components/Icon/CloseIcon.js";
-import { ColorModeIcon as C } from "./components/Icon/ColorModeIcon.js";
-import { DeleteIcon as w } from "./components/Icon/DeleteIcon.js";
-import { InfoIcon as T } from "./components/Icon/InfoIcon.js";
-import { MoreHorizontalIcon as E } from "./components/Icon/MoreHorizontalIcon.js";
-import { MoreVerticalIcon as D } from "./components/Icon/MoreVerticalIcon.js";
-import { PaletteIcon as O } from "./components/Icon/PaletteIcon.js";
-import { RefreshIcon as k } from "./components/Icon/RefreshIcon.js";
-import { RemoveIcon as A } from "./components/Icon/RemoveIcon.js";
-import { SendIcon as j } from "./components/Icon/SendIcon.js";
-import { Kbd as M } from "./components/Kbd/Kbd.js";
-import { Tooltip as N } from "./components/Tooltip/Tooltip.js";
-import { useTooltip as P } from "./components/Tooltip/useTooltip.js";
-import { IconButton as F } from "./components/IconButton/IconButton.js";
-import { Link as I } from "./components/Link/Link.js";
-import { Listbox as L } from "./components/Listbox/Listbox.js";
-import { ListboxOption as R } from "./components/Listbox/ListboxOption.js";
-import { NavList as z } from "./components/NavList/NavList.js";
-import { NavListGroup as B } from "./components/NavList/NavListGroup.js";
-import { NavListItem as V } from "./components/NavList/NavListItem.js";
-import { PageLayout as H } from "./components/PageLayout/PageLayout.js";
-import { Popover as U } from "./components/Popover/Popover.js";
-import { usePopover as W } from "./components/Popover/usePopover.js";
-import { Prose as G } from "./components/Prose/Prose.js";
-import { Radio as K } from "./components/Radio/Radio.js";
-import { RadioGroup as q } from "./components/RadioGroup/RadioGroup.js";
-import { Row as J } from "./components/Row/Row.js";
-import { Segment as Y } from "./components/SegmentedControl/Segment.js";
-import { SegmentedControl as X } from "./components/SegmentedControl/SegmentedControl.js";
-import { Select as Z } from "./components/Select/Select.js";
-import { Sidebar as Q } from "./components/Sidebar/Sidebar.js";
-import { SkipLink as $ } from "./components/SkipLink/SkipLink.js";
-import { Stack as ee } from "./components/Stack/Stack.js";
-import { StatusDot as te } from "./components/StatusDot/StatusDot.js";
-import { Switch as ne } from "./components/Switch/Switch.js";
-import { Switcher as re } from "./components/Switcher/Switcher.js";
-import { Tab as ie } from "./components/Tabs/Tab.js";
-import { TabList as ae } from "./components/Tabs/TabList.js";
-import { TabPanel as oe } from "./components/Tabs/TabPanel.js";
-import { Tabs as se } from "./components/Tabs/Tabs.js";
-import { Text as ce } from "./components/Text/Text.js";
-import { Textarea as le } from "./components/Textarea/Textarea.js";
-import { TextInput as ue } from "./components/TextInput/TextInput.js";
-import { Theme as de } from "./components/Theme/Theme.js";
-export { b as AddIcon, t as Alert, n as Avatar, i as AvatarGroup, a as Badge, e as Box, o as Button, s as Card, c as Center, l as Checkbox, x as ChevronDownIcon, S as CloseIcon, u as Cluster, d as Code, C as ColorModeIcon, f as Counter, p as Cover, w as DeleteIcon, m as Divider, h as Field, g as Fieldset, _ as Frame, v as Grid, y as Heading, F as IconButton, T as InfoIcon, M as Kbd, I as Link, L as Listbox, R as ListboxOption, E as MoreHorizontalIcon, D as MoreVerticalIcon, z as NavList, B as NavListGroup, V as NavListItem, H as PageLayout, O as PaletteIcon, U as Popover, G as Prose, K as Radio, q as RadioGroup, k as RefreshIcon, A as RemoveIcon, J as Row, Y as Segment, X as SegmentedControl, Z as Select, j as SendIcon, Q as Sidebar, $ as SkipLink, ee as Stack, te as StatusDot, ne as Switch, re as Switcher, ie as Tab, ae as TabList, oe as TabPanel, se as Tabs, ce as Text, ue as TextInput, le as Textarea, de as Theme, N as Tooltip, r as VisuallyHidden, W as usePopover, P as useTooltip };
+import { Box as o } from "./components/Box/Box.js";
+import { Button as s } from "./components/Button/Button.js";
+import { Card as c } from "./components/Card/Card.js";
+import { Center as l } from "./components/Center/Center.js";
+import { Checkbox as u } from "./components/Checkbox/Checkbox.js";
+import { Cluster as d } from "./components/Cluster/Cluster.js";
+import { Code as f } from "./components/Code/Code.js";
+import { Autocomplete as p } from "./components/Combobox/Autocomplete.js";
+import { Combobox as m } from "./components/Combobox/Combobox.js";
+import { ComboboxOption as h } from "./components/Combobox/ComboboxOption.js";
+import { useContextMenu as g } from "./components/ContextMenu/useContextMenu.js";
+import { Counter as _ } from "./components/Counter/Counter.js";
+import { Cover as v } from "./components/Cover/Cover.js";
+import { Divider as y } from "./components/Divider/Divider.js";
+import { Field as b } from "./components/Field/Field.js";
+import { Fieldset as x } from "./components/Fieldset/Fieldset.js";
+import { Frame as S } from "./components/Frame/Frame.js";
+import { Grid as C } from "./components/Grid/Grid.js";
+import { Heading as w } from "./components/Heading/Heading.js";
+import { AddIcon as T } from "./components/Icon/AddIcon.js";
+import { CheckIcon as E } from "./components/Icon/CheckIcon.js";
+import { ChevronDownIcon as D } from "./components/Icon/ChevronDownIcon.js";
+import { ChevronRightIcon as O } from "./components/Icon/ChevronRightIcon.js";
+import { CloseIcon as k } from "./components/Icon/CloseIcon.js";
+import { ColorModeIcon as A } from "./components/Icon/ColorModeIcon.js";
+import { DeleteIcon as j } from "./components/Icon/DeleteIcon.js";
+import { InfoIcon as M } from "./components/Icon/InfoIcon.js";
+import { MenuIcon as N } from "./components/Icon/MenuIcon.js";
+import { MoreHorizontalIcon as P } from "./components/Icon/MoreHorizontalIcon.js";
+import { MoreVerticalIcon as F } from "./components/Icon/MoreVerticalIcon.js";
+import { PaletteIcon as I } from "./components/Icon/PaletteIcon.js";
+import { RefreshIcon as L } from "./components/Icon/RefreshIcon.js";
+import { RemoveIcon as R } from "./components/Icon/RemoveIcon.js";
+import { SendIcon as z } from "./components/Icon/SendIcon.js";
+import { IconButton as B } from "./components/IconButton/IconButton.js";
+import { Kbd as V } from "./components/Kbd/Kbd.js";
+import { Link as H } from "./components/Link/Link.js";
+import { Listbox as U } from "./components/Listbox/Listbox.js";
+import { ListboxOption as W } from "./components/Listbox/ListboxOption.js";
+import { Menu as G } from "./components/Menu/Menu.js";
+import { MenuGroup as K } from "./components/Menu/MenuGroup.js";
+import { MenuItem as q } from "./components/Menu/MenuItem.js";
+import { MenuItemCheckbox as J } from "./components/Menu/MenuItemCheckbox.js";
+import { MenuItemRadio as Y } from "./components/Menu/MenuItemRadio.js";
+import { MenuRadioGroup as X } from "./components/Menu/MenuRadioGroup.js";
+import { MenuSeparator as Z } from "./components/Menu/MenuSeparator.js";
+import { Submenu as Q } from "./components/Menu/Submenu.js";
+import { useMenu as $ } from "./components/Menu/useMenu.js";
+import { Menubar as ee } from "./components/Menubar/Menubar.js";
+import { MenubarMenu as te } from "./components/Menubar/MenubarMenu.js";
+import { NavBar as ne } from "./components/NavBar/NavBar.js";
+import { NavBarItem as re } from "./components/NavBar/NavBarItem.js";
+import { NavBarMenu as ie } from "./components/NavBar/NavBarMenu.js";
+import { NavBarMenuGroup as ae } from "./components/NavBar/NavBarMenuGroup.js";
+import { NavBarMenuItem as oe } from "./components/NavBar/NavBarMenuItem.js";
+import { NavList as se } from "./components/NavList/NavList.js";
+import { NavListGroup as ce } from "./components/NavList/NavListGroup.js";
+import { NavListItem as le } from "./components/NavList/NavListItem.js";
+import { PageLayout as ue } from "./components/PageLayout/PageLayout.js";
+import { Popover as de } from "./components/Popover/Popover.js";
+import { usePopover as fe } from "./components/Popover/usePopover.js";
+import { Prose as pe } from "./components/Prose/Prose.js";
+import { Radio as me } from "./components/Radio/Radio.js";
+import { RadioGroup as he } from "./components/RadioGroup/RadioGroup.js";
+import { Row as ge } from "./components/Row/Row.js";
+import { Segment as _e } from "./components/SegmentedControl/Segment.js";
+import { SegmentedControl as ve } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as ye } from "./components/Select/Select.js";
+import { Sidebar as be } from "./components/Sidebar/Sidebar.js";
+import { SkipLink as xe } from "./components/SkipLink/SkipLink.js";
+import { Stack as Se } from "./components/Stack/Stack.js";
+import { StatusDot as Ce } from "./components/StatusDot/StatusDot.js";
+import { Switch as we } from "./components/Switch/Switch.js";
+import { Switcher as Te } from "./components/Switcher/Switcher.js";
+import { Tab as Ee } from "./components/Tabs/Tab.js";
+import { TabList as De } from "./components/Tabs/TabList.js";
+import { TabPanel as Oe } from "./components/Tabs/TabPanel.js";
+import { Tabs as ke } from "./components/Tabs/Tabs.js";
+import { Text as Ae } from "./components/Text/Text.js";
+import { Textarea as je } from "./components/Textarea/Textarea.js";
+import { TextInput as Me } from "./components/TextInput/TextInput.js";
+import { Theme as Ne } from "./components/Theme/Theme.js";
+import { Tooltip as Pe } from "./components/Tooltip/Tooltip.js";
+import { useTooltip as Fe } from "./components/Tooltip/useTooltip.js";
+import { VisuallyHidden as Ie } from "./components/VisuallyHidden/VisuallyHidden.js";
+export { e as Accordion, t as AccordionItem, T as AddIcon, n as Alert, p as Autocomplete, r as Avatar, i as AvatarGroup, a as Badge, o as Box, s as Button, c as Card, l as Center, E as CheckIcon, u as Checkbox, D as ChevronDownIcon, O as ChevronRightIcon, k as CloseIcon, d as Cluster, f as Code, A as ColorModeIcon, m as Combobox, h as ComboboxOption, _ as Counter, v as Cover, j as DeleteIcon, y as Divider, b as Field, x as Fieldset, S as Frame, C as Grid, w as Heading, B as IconButton, M as InfoIcon, V as Kbd, H as Link, U as Listbox, W as ListboxOption, G as Menu, K as MenuGroup, N as MenuIcon, q as MenuItem, J as MenuItemCheckbox, Y as MenuItemRadio, X as MenuRadioGroup, Z as MenuSeparator, ee as Menubar, te as MenubarMenu, P as MoreHorizontalIcon, F as MoreVerticalIcon, ne as NavBar, re as NavBarItem, ie as NavBarMenu, ae as NavBarMenuGroup, oe as NavBarMenuItem, se as NavList, ce as NavListGroup, le as NavListItem, ue as PageLayout, I as PaletteIcon, de as Popover, pe as Prose, me as Radio, he as RadioGroup, L as RefreshIcon, R as RemoveIcon, ge as Row, _e as Segment, ve as SegmentedControl, ye as Select, z as SendIcon, be as Sidebar, xe as SkipLink, Se as Stack, Ce as StatusDot, Q as Submenu, we as Switch, Te as Switcher, Ee as Tab, De as TabList, Oe as TabPanel, ke as Tabs, Ae as Text, Me as TextInput, je as Textarea, Ne as Theme, Pe as Tooltip, Ie as VisuallyHidden, g as useContextMenu, $ as useMenu, fe as usePopover, Fe as useTooltip };

package/dist/layout/listRole.js

@@ -1,6 +1,5 @@
-//#region src/layout/listRole.ts
+// src/layout/listRole.ts
 function e(e, t) {
 	return t === void 0 && (e === "ul" || e === "ol") ? "list" : t;
 }
-//#endregion
 export { e as listRole };

package/dist/layout/spaceValue.js

@@ -1,6 +1,5 @@
-//#region src/layout/spaceValue.ts
+// src/layout/spaceValue.ts
 function e(e) {
 	return e === 0 ? "0px" : `var(--sui-space-${e}, ${e * .25}rem)`;
 }
-//#endregion
 export { e as spaceValue };

package/dist/layout/withCustomProperties.js

@@ -1,9 +1,8 @@
-//#region src/layout/withCustomProperties.ts
+// src/layout/withCustomProperties.ts
 function e(e, t) {
 	return {
 		...e,
 		...t
 	};
 }
-//#endregion
 export { e as withCustomProperties };

package/dist/links/LinkOrButtonProps.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef, JSXElementConstructor } from "react";
+/**
+ * What a link-or-button component can render: a link, a button, or a component that renders an anchor, such as a
+ * router's link
+ */
+export type LinkOrButtonElement = "a" | "button" | JSXElementConstructor<never>;
+type PropsOnlyOn<Element extends "a" | "button", Other extends "a" | "button"> = {
+    [Name in Exclude<keyof ComponentPropsWithRef<Element>, keyof ComponentPropsWithRef<Other>>]?: never;
+};
+type ElementProps<E extends LinkOrButtonElement> = E extends JSXElementConstructor<infer Props> ? Props : E extends "button" ? ComponentPropsWithRef<"button"> & PropsOnlyOn<"a", "button"> : ComponentPropsWithRef<"a"> & PropsOnlyOn<"button", "a">;
+type OmitFromEach<Props, Name extends PropertyKey> = Props extends unknown ? Omit<Props, Name> : never;
+/**
+ * The props of the link, button or component given in `as`, less the names a component sets itself. When `as` may be
+ * either a link or a button, only props both accept are allowed.
+ */
+export type LinkOrButtonProps<E extends LinkOrButtonElement, Omitted extends PropertyKey> = OmitFromEach<ElementProps<E>, Omitted>;
+export {};

package/dist/links/index.d.ts

@@ -0,0 +1 @@
+export type { LinkOrButtonElement, LinkOrButtonProps } from "./LinkOrButtonProps";

package/dist/menus/closeWhenFocusLeaves.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hides an open menu when focus moves out of it, as a light dismiss would, leaving focus where it went
+ *
+ * @param menu the menu that lost focus
+ * @param relatedTarget the element taking focus, or `null` when focus is between elements or lost with an item that
+ *   was removed, in which case the menu waits a task to see where it lands
+ * @param staysOn whether focus on an element outside the menu keeps it open, such as on its trigger
+ */
+export declare function closeWhenFocusLeaves(menu: HTMLElement, relatedTarget: Element | null, staysOn: (focused: Element) => boolean): void;

package/dist/menus/closeWhenFocusLeaves.js

@@ -0,0 +1,11 @@
+import { syncPopover as e } from "../overlays/syncPopover.js";
+// src/menus/closeWhenFocusLeaves.ts
+function t(e, t, r) {
+	e.matches(":popover-open") && (t === null ? setTimeout(() => {
+		n(e, e.ownerDocument.activeElement, r);
+	}, 0) : n(e, t, r));
+}
+function n(t, n, r) {
+	(n === null || !t.contains(n) && !r(n)) && t.matches(":popover-open") && e(t, !1);
+}
+export { t as closeWhenFocusLeaves };

package/dist/menus/focusItem.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Moves focus to a menu item and scrolls it into view within the menu, as far as it needs and no further
+ *
+ * @param item the item to focus
+ */
+export declare function focusItem(item: HTMLElement): void;

package/dist/menus/focusItem.js

@@ -0,0 +1,9 @@
+// src/menus/focusItem.ts
+var e = {
+	block: "nearest",
+	container: "nearest"
+};
+function t(t) {
+	t.focus({ preventScroll: !0 }), t.scrollIntoView(e);
+}
+export { t as focusItem };

package/dist/menus/focusOnOpening.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Where focus goes as a menu opens: its first or last item, or the menu itself
+ */
+export type OpeningFocus = "first" | "last" | "menu";
+/**
+ * Moves focus into a menu that has just opened
+ *
+ * @param menu the menu element
+ * @param openingFocus where focus goes; a menu with no items takes it itself
+ */
+export declare function focusOnOpening(menu: HTMLElement, openingFocus: OpeningFocus): void;

package/dist/menus/focusOnOpening.js

@@ -0,0 +1,11 @@
+import { renderedItems as e } from "./renderedItems.js";
+// src/menus/focusOnOpening.ts
+function t(t, n) {
+	let r = e(t);
+	({
+		first: r.at(0),
+		last: r.at(-1),
+		menu: t
+	}[n] ?? t).focus();
+}
+export { t as focusOnOpening };

package/dist/menus/hasModifier.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether a key was pressed with Alt, Ctrl or Meta, which leaves it to the browser and the app
+ *
+ * @param event the key event
+ * @returns true when any of the three was held
+ */
+export declare function hasModifier(event: Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey">): boolean;

package/dist/menus/hasModifier.js

@@ -0,0 +1,5 @@
+// src/menus/hasModifier.ts
+function e(e) {
+	return e.altKey || e.ctrlKey || e.metaKey;
+}
+export { e as hasModifier };

package/dist/menus/index.d.ts

@@ -0,0 +1,11 @@
+export { closeWhenFocusLeaves } from "./closeWhenFocusLeaves";
+export { focusItem } from "./focusItem";
+export { focusOnOpening } from "./focusOnOpening";
+export type { OpeningFocus } from "./focusOnOpening";
+export { hasModifier } from "./hasModifier";
+export { itemText } from "./itemText";
+export { leaveMenuOnTab } from "./leaveMenuOnTab";
+export { graceTriangle, isInsideTriangle } from "./pointerIntent";
+export type { Point, Triangle } from "./pointerIntent";
+export { renderedItems } from "./renderedItems";
+export { watchRemovals } from "./watchRemovals";

package/dist/menus/itemText.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Reads the text type-ahead matches for a menu item
+ *
+ * @param item the item element
+ * @returns the text of the elements its `aria-labelledby` names, joined by spaces, so a description or shortcut is
+ *   left out; its own text when it names none in its document
+ */
+export declare function itemText(item: HTMLElement): string;

package/dist/menus/itemText.js

@@ -0,0 +1,6 @@
+// src/menus/itemText.ts
+function e(e) {
+	let t = (e.getAttribute("aria-labelledby") ?? "").split(/\s+/).map((t) => e.ownerDocument.getElementById(t)).filter((e) => e !== null);
+	return t.length === 0 ? e.textContent ?? "" : t.map((e) => e.textContent).join(" ");
+}
+export { e as itemText };

package/dist/menus/leaveMenuOnTab.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Closes a menu on Tab or Shift+Tab, moving focus back to where the menu was opened from. Tab then moves on from
+ * there, as though the menu were not there, and Shift+Tab stops there.
+ *
+ * @param event the key event the menu received
+ * @param returnTo the element focus goes back to; with none, the key is left alone
+ * @param close closes the menu
+ */
+export declare function leaveMenuOnTab(event: Pick<KeyboardEvent, "altKey" | "ctrlKey" | "defaultPrevented" | "key" | "metaKey" | "preventDefault" | "shiftKey">, returnTo: HTMLElement | null, close: () => void): void;

package/dist/menus/leaveMenuOnTab.js

@@ -0,0 +1,6 @@
+import { hasModifier as e } from "./hasModifier.js";
+// src/menus/leaveMenuOnTab.ts
+function t(t, n, r) {
+	t.key !== "Tab" || n === null || t.defaultPrevented || e(t) || (t.shiftKey && t.preventDefault(), n.focus(), r());
+}
+export { t as leaveMenuOnTab };

package/dist/menus/pointerIntent.d.ts

@@ -0,0 +1,36 @@
+/**
+ * A point in viewport coordinates, as a pointer event's `clientX` and `clientY` give it
+ */
+export interface Point {
+    /**
+     * Distance from the viewport's left edge
+     */
+    x: number;
+    /**
+     * Distance from the viewport's top edge
+     */
+    y: number;
+}
+/**
+ * Three corners of a triangle
+ */
+export type Triangle = readonly [Point, Point, Point];
+/**
+ * The triangle a pointer crosses on its way from a submenu's item into the submenu, so moving diagonally over the
+ * items between does not close it
+ *
+ * @param exit where the pointer left the submenu's item
+ * @param submenu the submenu's bounds
+ * @returns the triangle from just behind the exit point to the two corners of the submenu's side facing it: its
+ *   nearer side when the submenu sits beside the exit point, else its top or bottom
+ */
+export declare function graceTriangle(exit: Point, { bottom, left, right, top }: DOMRectReadOnly): Triangle;
+/**
+ * Whether a point is inside a triangle or on its edge
+ *
+ * @param point the point
+ * @param triangle the triangle
+ * @returns true when the point is inside or on an edge; false for a flat triangle, such as one to a submenu that has no
+ *   size
+ */
+export declare function isInsideTriangle(point: Point, [first, second, third]: Triangle): boolean;

package/dist/menus/pointerIntent.js

@@ -0,0 +1,68 @@
+function e(e, { bottom: t, left: n, right: r, top: i }) {
+	return e.x <= n ? [
+		{
+			x: e.x - 5,
+			y: e.y
+		},
+		{
+			x: n,
+			y: i
+		},
+		{
+			x: n,
+			y: t
+		}
+	] : e.x >= r ? [
+		{
+			x: e.x + 5,
+			y: e.y
+		},
+		{
+			x: r,
+			y: i
+		},
+		{
+			x: r,
+			y: t
+		}
+	] : e.y <= i ? [
+		{
+			x: e.x,
+			y: e.y - 5
+		},
+		{
+			x: n,
+			y: i
+		},
+		{
+			x: r,
+			y: i
+		}
+	] : [
+		{
+			x: e.x,
+			y: e.y + 5
+		},
+		{
+			x: n,
+			y: t
+		},
+		{
+			x: r,
+			y: t
+		}
+	];
+}
+function t(e, [t, r, i]) {
+	if (n(t, r, i) === 0) return !1;
+	let a = [
+		n(t, r, e),
+		n(r, i, e),
+		n(i, t, e)
+	];
+	return a.every((e) => e >= 0) || a.every((e) => e <= 0);
+}
+function n(e, t, n) {
+	return (t.x - e.x) * (n.y - e.y) - (t.y - e.y) * (n.x - e.x);
+}
+export { e as graceTriangle, t as isInsideTriangle };

package/dist/menus/renderedItems.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Reads the items a menu renders
+ *
+ * @param menu the menu element
+ * @returns the menu's own items that are not hidden or inert, in document order, leaving out the items of any menu
+ *   nested inside it
+ */
+export declare function renderedItems(menu: HTMLElement): HTMLElement[];

package/dist/menus/renderedItems.js

@@ -0,0 +1,4 @@
+function e(e) {
+	return Array.from(e.querySelectorAll("[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]")).filter((t) => t.parentElement?.closest("[role=\"menu\"]") === e && t.closest("[hidden], [inert]") === null);
+}
+export { e as renderedItems };

package/dist/menus/watchRemovals.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Keeps focus inside a menu when the focused item is removed from it or from one of its submenus, by moving focus to
+ * the innermost menu that held the item and is still open
+ *
+ * @param menu the open menu
+ * @returns a function that stops watching, to call when the menu closes
+ */
+export declare function watchRemovals(menu: HTMLElement): () => void;

package/dist/menus/watchRemovals.js

@@ -0,0 +1,23 @@
+// src/menus/watchRemovals.ts
+function e(e) {
+	let n = null, r = [];
+	function i(i) {
+		n = i.target instanceof Element ? i.target : null, r = n === null ? [] : t(n, e);
+	}
+	let a = new MutationObserver(() => {
+		let t = e.ownerDocument.activeElement, i = t === null || t === e.ownerDocument.body, a = n !== null && !e.contains(n);
+		i && a && e.matches(":popover-open") && (r.find((e) => e.isConnected && e.matches(":popover-open")) ?? e).focus();
+	});
+	return e.addEventListener("focusin", i), a.observe(e, {
+		childList: !0,
+		subtree: !0
+	}), () => {
+		e.removeEventListener("focusin", i), a.disconnect();
+	};
+}
+function t(e, t) {
+	let n = [], r = e.closest("[role=\"menu\"]");
+	for (; r !== null && t.contains(r);) n.push(r), r = r.parentElement?.closest("[role=\"menu\"]") ?? null;
+	return n;
+}
+export { e as watchRemovals };

package/dist/overlays/anchorNameFor.js

@@ -1,6 +1,5 @@
-//#region src/overlays/anchorNameFor.ts
+// src/overlays/anchorNameFor.ts
 function e(e) {
 	return `--sui-overlay-${e.replace(/[^\w-]/g, "")}`;
 }
-//#endregion
 export { e as anchorNameFor };

package/dist/overlays/mergeProps.js

@@ -1,4 +1,4 @@
-//#region src/overlays/mergeProps.ts
+// src/overlays/mergeProps.ts
 var e = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]), t = /^--[-\w\u{80}-\u{10FFFF}]+$/u;
 function n(e, t) {
 	let n = { ...e };
@@ -26,5 +26,4 @@ function o(e) {
 function s(e) {
 	return typeof e == "object" && !!e;
 }
-//#endregion
 export { n as mergeProps };

package/dist/overlays/syncPopover.js

@@ -1,5 +1,5 @@
 import { PopoverRefusedError as e } from "../errors/PopoverRefusedError.js";
-//#region src/overlays/syncPopover.ts
+// src/overlays/syncPopover.ts
 function t(t, r) {
 	if (n(t, r) === null) return () => {};
 	let i = setTimeout(() => {
@@ -21,5 +21,4 @@ function n(e, t) {
 	}
 	return null;
 }
-//#endregion
 export { t as syncPopover };

package/dist/overlays/useOverlay.js

@@ -1,6 +1,6 @@
 import { anchorNameFor as e } from "./anchorNameFor.js";
 import { useEffect as t, useEffectEvent as n, useId as r, useRef as i, useState as a } from "react";
-//#region src/overlays/useOverlay.ts
+// src/overlays/useOverlay.ts
 function o({ defaultOpen: o, delay: s, onOpenChange: c, open: l }) {
 	let u = r(), [d, f] = a(o), p = i(void 0), m = l ?? d;
 	function h() {
@@ -10,13 +10,7 @@ function o({ defaultOpen: o, delay: s, onOpenChange: c, open: l }) {
 		l === void 0 && f(e), c?.(e);
 	}
 	function _(e, t) {
-		if (h(), e !== m) {
-			if (t <= 0) {
-				g(e);
-				return;
-			}
-			v(e, t);
-		}
+		h(), e !== m && (t <= 0 ? g(e) : v(e, t));
 	}
 	function v(e, t) {
 		p.current = setTimeout(() => {
@@ -52,5 +46,4 @@ function o({ defaultOpen: o, delay: s, onOpenChange: c, open: l }) {
 		showAfterTask: y
 	};
 }
-//#endregion
 export { o as useOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krelborn/stylesui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Tree-shakable React 19 component library styled with CSS modules and custom properties, with themes, palettes, light and dark modes, and accessibility tests against WCAG 2.2 AA.",
   "keywords": [
     "accessibility",
@@ -54,10 +54,10 @@
   "devDependencies": {
     "@babel/core": "^8.0.6",
     "@rolldown/plugin-babel": "^0.2.4",
-    "@storybook/addon-a11y": "^10.6.0",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-vitest": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@storybook/addon-a11y": "^10.6.7",
+    "@storybook/addon-docs": "^10.6.7",
+    "@storybook/addon-vitest": "^10.6.7",
+    "@storybook/react-vite": "^10.6.7",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -67,10 +67,10 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser-playwright": "^5.0.1",
+    "@vitest/browser-playwright": "^5.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "husky": "^9.1.7",
-    "jsdom": "^30.1.1",
+    "jsdom": "^31.0.1",
     "lint-staged": "^17.5.1",
     "lucide-static": "^1.54.0",
     "oxfmt": "^0.70.0",
@@ -78,11 +78,11 @@
     "playwright": "^1.63.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.7",
     "typescript": "~7.0.2",
-    "vite": "^8.3.1",
+    "vite": "^8.3.8",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^5.0.1"
+    "vitest": "^5.1.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",