overflow-toolbar 0.1.7 → 0.2.0

package/README.md

@@ -14,7 +14,7 @@ A responsive toolbar overflow component that automatically collapses items into
 - **Automatic overflow detection** — items collapse into a menu as the container narrows using ResizeObserver
 - **Three item states** — visible, min (icon-only), and hidden (in menu)
 - **Compact mode** — items collapse one at a time instead of all at once
-- **Reverse mode** — collapse from the left instead of the right
+- **Reverse mode** — collapse from the right instead of the left
 - **Menu-only items** — items that always live in the dropdown (e.g. Help, About)
 - **Min state** — items shrink to icon-only before being fully hidden
 - **Three implementations** — React/Radix UI (shadcn-compatible), Material UI, and vanilla JavaScript
@@ -33,17 +33,15 @@ npm install overflow-toolbar
 
 ```tsx
 import { RxOverflow, RxOverflowItem, RxOverflowMenu } from 'overflow-toolbar/rx';
-import 'overflow-toolbar/rx/styles';
-import 'overflow-toolbar/styles';
 
 <RxOverflow style={{ gap: 8 }}>
   <RxOverflowMenu opener={<button>More</button>}>
-    <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
-    <RxOverflowItem menuid="filter"><button>Filters</button></RxOverflowItem>
+    <RxOverflowItem menuId="format"><button>Format</button></RxOverflowItem>
+    <RxOverflowItem menuId="filter"><button>Filters</button></RxOverflowItem>
   </RxOverflowMenu>
 
-  <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
-  <RxOverflowItem menuid="filter"><button>Filters</button></RxOverflowItem>
+  <RxOverflowItem menuId="format"><button>Format</button></RxOverflowItem>
+  <RxOverflowItem menuId="filter"><button>Filters</button></RxOverflowItem>
 </RxOverflow>
 ```
 
@@ -51,17 +49,16 @@ import 'overflow-toolbar/styles';
 
 ```tsx
 import { MuiOverflow, MuiOverflowItem, MuiOverflowMenu } from 'overflow-toolbar/mui';
-import 'overflow-toolbar/styles';
 import { Button, MenuItem } from '@mui/material';
 
 <MuiOverflow sx={{ gap: 1 }}>
   <MuiOverflowMenu opener={<Button>More</Button>}>
-    <MuiOverflowItem menuid="format"><MenuItem>Format</MenuItem></MuiOverflowItem>
-    <MuiOverflowItem menuid="filter"><MenuItem>Filters</MenuItem></MuiOverflowItem>
+    <MuiOverflowItem menuId="format"><MenuItem>Format</MenuItem></MuiOverflowItem>
+    <MuiOverflowItem menuId="filter"><MenuItem>Filters</MenuItem></MuiOverflowItem>
   </MuiOverflowMenu>
 
-  <MuiOverflowItem menuid="format"><Button>Format</Button></MuiOverflowItem>
-  <MuiOverflowItem menuid="filter"><Button>Filters</Button></MuiOverflowItem>
+  <MuiOverflowItem menuId="format"><Button>Format</Button></MuiOverflowItem>
+  <MuiOverflowItem menuId="filter"><Button>Filters</Button></MuiOverflowItem>
 </MuiOverflow>
 ```
 
@@ -69,8 +66,6 @@ import { Button, MenuItem } from '@mui/material';
 
 ```js
 import { OverflowToolbar } from 'overflow-toolbar/vanilla';
-import 'overflow-toolbar/vanilla/styles';
-import 'overflow-toolbar/styles';
 
 const ul = document.querySelector('#my-toolbar');
 const toolbar = new OverflowToolbar(ul);
@@ -84,14 +79,14 @@ const toolbar = new OverflowToolbar(ul);
   <li data-overflow-role="menu">
     <button data-menu-trigger>More</button>
     <div data-menu-panel>
-      <button data-menuid="format">Format</button>
-      <button data-menuid="filter">Filters</button>
+      <button data-menu-id="format">Format</button>
+      <button data-menu-id="filter">Filters</button>
     </div>
   </li>
-  <li data-overflow-role="item" data-menuid="format">
+  <li data-overflow-role="item" data-menu-id="format">
     <button>Format</button>
   </li>
-  <li data-overflow-role="item" data-menuid="filter">
+  <li data-overflow-role="item" data-menu-id="filter">
     <button>Filters</button>
   </li>
 </ul>
@@ -108,9 +103,8 @@ Import only what you need for optimal tree-shaking:
 | `overflow-toolbar/rx` | Radix UI / shadcn variant (`RxOverflow`, `RxOverflowItem`, `RxOverflowMenu`) |
 | `overflow-toolbar/mui` | Material UI variant (`MuiOverflow`, `MuiOverflowItem`, `MuiOverflowMenu`) |
 | `overflow-toolbar/vanilla` | Vanilla JS (`OverflowToolbar`) |
-| `overflow-toolbar/styles` | Core CSS (required by all variants) |
-| `overflow-toolbar/rx/styles` | Radix UI styles |
-| `overflow-toolbar/vanilla/styles` | Vanilla JS styles |
+
+CSS is included automatically when you import any subpath — no separate style imports needed.
 
 ## API
 
@@ -122,29 +116,50 @@ The container component. Wraps toolbar items and the overflow menu.
 |---|---|---|---|
 | `children` | `ReactNode` | — | Overflow items and menu |
 | `compact` | `boolean` | `false` | Collapse items one at a time |
-| `reverse` | `boolean` | `false` | Collapse from the left |
+| `reverse` | `boolean` | `false` | Collapse from the right |
 | `className` | `string` | — | CSS class name |
 | `style` | `CSSProperties` | — | Inline styles |
 | `sx` | `SxProps` | — | MUI system props (MUI only) |
 
 ### `OverflowItem` / `RxOverflowItem` / `MuiOverflowItem`
 
-Wraps each toolbar item. Place matching items in both the toolbar and the menu, linked by `menuid`.
+Wraps each toolbar item. Place matching items in both the toolbar and the menu, linked by `menuId`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` | `ReactNode` | — | Item content |
-| `menuid` | `string` | — | Links toolbar item to its menu counterpart |
+| `menuId` | `string` | — | Links toolbar item to its menu counterpart |
 | `minStateWidth` | `string` \| `number` | — | Width in min state (`string` for Rx, `number` for MUI spacing units) |
 
 ### `OverflowMenu` / `RxOverflowMenu` / `MuiOverflowMenu`
 
 The dropdown menu container. Must include an `opener` element (the trigger button).
 
-| Prop | Type | Description |
-|---|---|---|
-| `children` | `ReactNode` | Menu items |
-| `opener` | `ReactNode` | The button that opens the menu |
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Menu items |
+| `opener` | `ReactNode` | — | The button that opens the menu |
+| `open` | `boolean` | — | Controlled open state. When provided, you manage open/close. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called when the menu opens or closes. Use alone for notifications, or with `open` for full control. |
+
+#### Controlled Menu
+
+By default, the menu manages its own open/close state. To control it programmatically, pass `open` and `onOpenChange`:
+
+```tsx
+const [menuOpen, setMenuOpen] = useState(false);
+
+<RxOverflowMenu
+  opener={<button>More</button>}
+  open={menuOpen}
+  onOpenChange={setMenuOpen}
+>
+  {/* items */}
+</RxOverflowMenu>
+
+// Close programmatically from anywhere:
+setMenuOpen(false);
+```
 
 ### `OverflowController`
 
@@ -166,15 +181,15 @@ The overflow engine scans immediate children for internal role markers to measur
 {/* WRONG — wrapper breaks overflow behavior */}
 <RxOverflow>
   <div className="group">
-    <RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
-    <RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
+    <RxOverflowItem menuId="a"><button>A</button></RxOverflowItem>
+    <RxOverflowItem menuId="b"><button>B</button></RxOverflowItem>
   </div>
 </RxOverflow>
 
 {/* CORRECT — items are direct children */}
 <RxOverflow>
-  <RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
-  <RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
+  <RxOverflowItem menuId="a"><button>A</button></RxOverflowItem>
+  <RxOverflowItem menuId="b"><button>B</button></RxOverflowItem>
 </RxOverflow>
 ```
 
@@ -194,7 +209,7 @@ Items collapse one at a time with tight spacing. Adjacent buttons get squared-of
 
 ### Reverse Mode
 
-Items collapse from the left side first instead of the right:
+Items collapse from the right side first instead of the left:
 
 ```tsx
 <RxOverflow reverse>
@@ -207,7 +222,7 @@ Items collapse from the left side first instead of the right:
 Items shrink to a fixed width (icon-only) before being fully hidden:
 
 ```tsx
-<RxOverflowItem menuid="format" minStateWidth="2.25rem">
+<RxOverflowItem menuId="format" minStateWidth="2.25rem">
   <button><FormatIcon /> Format</button>
 </RxOverflowItem>
 ```
@@ -215,18 +230,18 @@ Items shrink to a fixed width (icon-only) before being fully hidden:
 For MUI, `minStateWidth` accepts a number (theme spacing units):
 
 ```tsx
-<MuiOverflowItem menuid="format" minStateWidth={5}>
+<MuiOverflowItem menuId="format" minStateWidth={5}>
   <Button><FormatIcon /> Format</Button>
 </MuiOverflowItem>
 ```
 
 ### Menu-Only Items
 
-Items without a `menuid` always stay where they are — in the toolbar or in the menu:
+Items without a `menuId` always stay where they are — in the toolbar or in the menu:
 
 ```tsx
 <RxOverflowMenu opener={<button>More</button>}>
-  <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
+  <RxOverflowItem menuId="format"><button>Format</button></RxOverflowItem>
   {/* Always in the menu */}
   <RxOverflowItem><div role="separator" /></RxOverflowItem>
   <RxOverflowItem><button>Help</button></RxOverflowItem>
@@ -241,7 +256,7 @@ The vanilla implementation uses `data-` attributes for configuration:
 |---|---|---|
 | `data-overflow-role="item"` | `<li>` | Marks a toolbar item |
 | `data-overflow-role="menu"` | `<li>` | Marks the menu container |
-| `data-menuid` | `<li>`, menu item | Links toolbar and menu items |
+| `data-menu-id` | `<li>`, menu item | Links toolbar and menu items |
 | `data-min-state-width` | `<li>` | Min-state width (CSS value) |
 | `data-menu-trigger` | `<button>` | The menu open/close button |
 | `data-menu-panel` | `<div>` | The menu panel (uses Popover API) |

package/dist/components/MuiOverflow/MuiOverflow.js

@@ -1,7 +1,8 @@
+import '../Overflow/Overflow.css';
 import { styled as o } from "@mui/material/styles";
 import r from "../Overflow/Overflow.js";
-const f = o(r)({});
+const m = o(r)({});
 export {
-  f as default
+  m as default
 };
 //# sourceMappingURL=MuiOverflow.js.map

package/dist/components/MuiOverflow/MuiOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflow.js","sources":["../../../src/components/MuiOverflow/MuiOverflow.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport type { OverflowProps } from '../Overflow';\nimport { Overflow } from '../Overflow';\n\nconst MuiOverflow: React.ComponentType<OverflowProps> = styled(Overflow)({});\n\nexport default MuiOverflow;\n"],"names":["MuiOverflow","styled","Overflow"],"mappings":";;AAIA,MAAMA,IAAkDC,EAAOC,CAAQ,EAAE,CAAA,CAAE;"}
+{"version":3,"file":"MuiOverflow.js","sources":["../../../src/components/MuiOverflow/MuiOverflow.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport type { OverflowProps } from '../Overflow';\nimport { Overflow } from '../Overflow';\n\nconst MuiOverflow: React.ComponentType<OverflowProps> = styled(Overflow)({});\n\nexport default MuiOverflow;\n"],"names":["MuiOverflow","styled","Overflow"],"mappings":";;;AAIA,MAAMA,IAAkDC,EAAOC,CAAQ,EAAE,CAAA,CAAE;"}

package/dist/components/MuiOverflow/MuiOverflowItem.d.ts

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
 interface MuiOverflowItemProps {
     children: ReactNode;
-    menuid?: string;
+    menuId?: string;
     minStateWidth?: number;
 }
-declare function MuiOverflowItem({ children, menuid, minStateWidth }: MuiOverflowItemProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof MuiOverflowItem & {
-    overflowRole: "item";
-};
-export default _default;
+declare function MuiOverflowItem({ children, menuId, minStateWidth }: MuiOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MuiOverflowItem {
+    var overflowRole: "item";
+}
+export default MuiOverflowItem;
 //# sourceMappingURL=MuiOverflowItem.d.ts.map

package/dist/components/MuiOverflow/MuiOverflowItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflowItem.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,oBAAoB,2CASjF;;;;AAED,wBAAiF"}
+{"version":3,"file":"MuiOverflowItem.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,oBAAoB,2CASjF;kBATQ,eAAe;;;AAYxB,eAAe,eAAe,CAAC"}

package/dist/components/MuiOverflow/MuiOverflowItem.js

@@ -1,12 +1,13 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useTheme as s } from "@mui/material/styles";
-import f from "../Overflow/OverflowItem.js";
-function n({ children: o, menuid: t, minStateWidth: e }) {
-  const r = s(), i = e !== void 0 ? r.spacing(e) : void 0;
-  return /* @__PURE__ */ m(f, { menuid: t, minStateWidth: i, children: o });
+import '../Overflow/Overflow.css';
+import { jsx as i } from "react/jsx-runtime";
+import { useTheme as f } from "@mui/material/styles";
+import s from "../Overflow/OverflowItem.js";
+function n({ children: e, menuId: t, minStateWidth: o }) {
+  const r = f(), m = o !== void 0 ? r.spacing(o) : void 0;
+  return /* @__PURE__ */ i(s, { menuId: t, minStateWidth: m, children: e });
 }
-const v = Object.assign(n, { overflowRole: "item" });
+n.overflowRole = "item";
 export {
-  v as default
+  n as default
 };
 //# sourceMappingURL=MuiOverflowItem.js.map

package/dist/components/MuiOverflow/MuiOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflowItem.js","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles';\nimport type { ReactNode } from 'react';\nimport { OverflowItem } from '../Overflow';\n\ninterface MuiOverflowItemProps {\n  children: ReactNode;\n  menuid?: string;\n  minStateWidth?: number;\n}\n\nfunction MuiOverflowItem({ children, menuid, minStateWidth }: MuiOverflowItemProps) {\n  const theme = useTheme();\n  const cssWidth = minStateWidth !== undefined ? theme.spacing(minStateWidth) : undefined;\n\n  return (\n    <OverflowItem menuid={menuid} minStateWidth={cssWidth}>\n      {children}\n    </OverflowItem>\n  );\n}\n\nexport default Object.assign(MuiOverflowItem, { overflowRole: 'item' as const });\n"],"names":["MuiOverflowItem","children","menuid","minStateWidth","theme","useTheme","cssWidth","jsx","OverflowItem","MuiOverflowItem_default"],"mappings":";;;AAUA,SAASA,EAAgB,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAuC;AAClF,QAAMC,IAAQC,EAAA,GACRC,IAAWH,MAAkB,SAAYC,EAAM,QAAQD,CAAa,IAAI;AAE9E,SACE,gBAAAI,EAACC,GAAA,EAAa,QAAAN,GAAgB,eAAeI,GAC1C,UAAAL,GACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOT,GAAiB,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"MuiOverflowItem.js","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles';\nimport type { ReactNode } from 'react';\nimport { OverflowItem } from '../Overflow';\n\ninterface MuiOverflowItemProps {\n  children: ReactNode;\n  menuId?: string;\n  minStateWidth?: number;\n}\n\nfunction MuiOverflowItem({ children, menuId, minStateWidth }: MuiOverflowItemProps) {\n  const theme = useTheme();\n  const cssWidth = minStateWidth !== undefined ? theme.spacing(minStateWidth) : undefined;\n\n  return (\n    <OverflowItem menuId={menuId} minStateWidth={cssWidth}>\n      {children}\n    </OverflowItem>\n  );\n}\n\nMuiOverflowItem.overflowRole = 'item' as const;\nexport default MuiOverflowItem;\n"],"names":["MuiOverflowItem","children","menuId","minStateWidth","theme","useTheme","cssWidth","jsx","OverflowItem"],"mappings":";;;;AAUA,SAASA,EAAgB,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAuC;AAClF,QAAMC,IAAQC,EAAA,GACRC,IAAWH,MAAkB,SAAYC,EAAM,QAAQD,CAAa,IAAI;AAE9E,SACE,gBAAAI,EAACC,GAAA,EAAa,QAAAN,GAAgB,eAAeI,GAC1C,UAAAL,GACH;AAEJ;AAEAD,EAAgB,eAAe;"}

package/dist/components/MuiOverflow/MuiOverflowMenu.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
-interface MuiOverflowMenuProps {
+import { type OverflowMenuControlProps } from '../Overflow';
+interface MuiOverflowMenuProps extends OverflowMenuControlProps {
     opener: ReactNode;
     children: ReactNode;
 }
-declare function MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof MuiOverflowMenu & {
-    overflowRole: "menu";
-};
-export default _default;
+declare function MuiOverflowMenu({ opener, children, open, onOpenChange }: MuiOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MuiOverflowMenu {
+    var overflowRole: "menu";
+}
+export default MuiOverflowMenu;
 //# sourceMappingURL=MuiOverflowMenu.d.ts.map

package/dist/components/MuiOverflow/MuiOverflowMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,oBAAoB;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAYlE;;;;AAED,wBAAiF"}
+{"version":3,"file":"MuiOverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAgB,KAAK,wBAAwB,EAAwB,MAAM,aAAa,CAAC;AAEhG,UAAU,oBAAqB,SAAQ,wBAAwB;IAC7D,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAYtF;kBAZQ,eAAe;;;AAexB,eAAe,eAAe,CAAC"}

package/dist/components/MuiOverflow/MuiOverflowMenu.js

@@ -1,11 +1,12 @@
+import '../Overflow/Overflow.css';
 import { jsx as r } from "react/jsx-runtime";
-import i from "@mui/material/Menu";
-import l from "../Overflow/OverflowMenu.js";
-function M({ opener: n, children: o }) {
-  return /* @__PURE__ */ r(l, { opener: n, renderMenu: ({ anchorEl: u, open: t, onClose: e, children: f }) => /* @__PURE__ */ r(i, { anchorEl: u, open: t, onClose: e, onClick: e, children: f }), children: o });
+import l from "@mui/material/Menu";
+import p from "../Overflow/OverflowMenu.js";
+function M({ opener: n, children: o, open: u, onOpenChange: i }) {
+  return /* @__PURE__ */ r(p, { opener: n, renderMenu: ({ anchorEl: t, open: f, onClose: e, children: m }) => /* @__PURE__ */ r(l, { anchorEl: t, open: f, onClose: e, onClick: e, children: m }), open: u, onOpenChange: i, children: o });
 }
-const a = Object.assign(M, { overflowRole: "menu" });
+M.overflowRole = "menu";
 export {
-  a as default
+  M as default
 };
 //# sourceMappingURL=MuiOverflowMenu.js.map

package/dist/components/MuiOverflow/MuiOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiOverflowMenu.js","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport type { ReactNode } from 'react';\nimport { OverflowMenu, type RenderMenuProps } from '../Overflow';\n\ninterface MuiOverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <Menu anchorEl={anchorEl} open={open} onClose={onClose} onClick={onClose}>\n      {menuChildren}\n    </Menu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nexport default Object.assign(MuiOverflowMenu, { overflowRole: 'menu' as const });\n"],"names":["MuiOverflowMenu","opener","children","jsx","OverflowMenu","anchorEl","open","onClose","menuChildren","Menu","MuiOverflowMenu_default"],"mappings":";;;AASA,SAASA,EAAgB,EAAE,QAAAC,GAAQ,UAAAC,KAAkC;AAOnE,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,YAPb,CAAC,EAAE,UAAAI,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAUC,QACvD,gBAAAL,EAACM,KAAK,UAAAJ,GAAoB,MAAAC,GAAY,SAAAC,GAAkB,SAASA,GAC9D,UAAAC,GACH,GAKG,UAAAN,EAAA,CACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOV,GAAiB,EAAE,cAAc,QAAiB;"}
+{"version":3,"file":"MuiOverflowMenu.js","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport type { ReactNode } from 'react';\nimport { OverflowMenu, type OverflowMenuControlProps, type RenderMenuProps } from '../Overflow';\n\ninterface MuiOverflowMenuProps extends OverflowMenuControlProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction MuiOverflowMenu({ opener, children, open, onOpenChange }: MuiOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <Menu anchorEl={anchorEl} open={open} onClose={onClose} onClick={onClose}>\n      {menuChildren}\n    </Menu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu} open={open} onOpenChange={onOpenChange}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nMuiOverflowMenu.overflowRole = 'menu' as const;\nexport default MuiOverflowMenu;\n"],"names":["MuiOverflowMenu","opener","children","open","onOpenChange","OverflowMenu","anchorEl","onClose","menuChildren","jsx","Menu"],"mappings":";;;;AASA,SAASA,EAAgB,EAAE,QAAAC,GAAQ,UAAAC,GAAU,MAAAC,GAAM,cAAAC,KAAsC;AAOvF,2BACGC,GAAA,EAAa,QAAAJ,GAAgB,YAPb,CAAC,EAAE,UAAAK,GAAU,MAAAH,GAAM,SAAAI,GAAS,UAAUC,QACvD,gBAAAC,EAACC,KAAK,UAAAJ,GAAoB,MAAMH,GAAM,SAAAI,GAAkB,SAASA,GAC9D,UAAAC,GACH,GAIsD,MAAAL,GAAY,cAAAC,GAC/D,UAAAF,GACH;AAEJ;AAEAF,EAAgB,eAAe;"}

package/dist/components/MuiOverflow/index.d.ts

@@ -1,3 +1,4 @@
+import '../Overflow/Overflow.css';
 export { default as MuiOverflow } from './MuiOverflow';
 export { default as MuiOverflowItem } from './MuiOverflowItem';
 export { default as MuiOverflowMenu } from './MuiOverflowMenu';

package/dist/components/MuiOverflow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.d.ts

@@ -2,11 +2,13 @@ import { type OverflowHost, type ScanResult } from '../Overflow/OverflowControll
 export interface OverflowToolbarOptions {
     compact?: boolean;
     reverse?: boolean;
+    snap?: boolean;
 }
 export declare class OverflowToolbar implements OverflowHost {
     private ul;
     private compact;
     private reverse;
+    private snap;
     private controller;
     constructor(ul: HTMLUListElement, opts?: OverflowToolbarOptions);
     /** Re-scan after external DOM changes and restart the observer. */
@@ -16,6 +18,7 @@ export declare class OverflowToolbar implements OverflowHost {
     getContainerEl(): HTMLElement;
     isCompact(): boolean;
     isReverse(): boolean;
+    isSnap(): boolean;
     scanChildren(): ScanResult;
     private setupPopover;
 }

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoFrameworkOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EAGhB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,eAAgB,YAAW,YAAY;IAClD,OAAO,CAAC,EAAE,CAAmB;IAC7B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,UAAU,CAAqB;gBAE3B,EAAE,EAAE,gBAAgB,EAAE,IAAI,GAAE,sBAA2B;IAanE,mEAAmE;IACnE,MAAM,IAAI,IAAI;IAId,uDAAuD;IACvD,OAAO,IAAI,IAAI;IAOf,cAAc,IAAI,WAAW;IAI7B,SAAS,IAAI,OAAO;IAIpB,SAAS,IAAI,OAAO;IAIpB,YAAY,IAAI,UAAU;IA8D1B,OAAO,CAAC,YAAY;CAcrB"}
+{"version":3,"file":"NoFrameworkOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EAGhB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,qBAAa,eAAgB,YAAW,YAAY;IAClD,OAAO,CAAC,EAAE,CAAmB;IAC7B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,UAAU,CAAqB;gBAE3B,EAAE,EAAE,gBAAgB,EAAE,IAAI,GAAE,sBAA2B;IAenE,mEAAmE;IACnE,MAAM,IAAI,IAAI;IAId,uDAAuD;IACvD,OAAO,IAAI,IAAI;IAOf,cAAc,IAAI,WAAW;IAI7B,SAAS,IAAI,OAAO;IAIpB,SAAS,IAAI,OAAO;IAIpB,MAAM,IAAI,OAAO;IAIjB,YAAY,IAAI,UAAU;IA8D1B,OAAO,CAAC,YAAY;CAcrB"}

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.js

@@ -1,11 +1,12 @@
-import { OverflowController as v } from "../Overflow/OverflowController.js";
+import { OverflowController as p } from "../Overflow/OverflowController.js";
 class y {
   ul;
   compact;
   reverse;
+  snap;
   controller;
-  constructor(o, e = {}) {
-    this.ul = o, this.compact = e.compact ?? !1, this.reverse = e.reverse ?? !1, this.ul.classList.add("overflow"), this.compact && this.ul.classList.add("overflow-compact"), this.reverse && this.ul.classList.add("overflow-reverse"), this.controller = new v(this), this.controller.connect();
+  constructor(s, e = {}) {
+    this.ul = s, this.compact = e.compact ?? !1, this.reverse = e.reverse ?? !1, this.snap = e.snap ?? !1, this.ul.classList.add("overflow"), this.compact && this.ul.classList.add("overflow-compact"), this.reverse && this.ul.classList.add("overflow-reverse"), this.snap && this.ul.classList.add("overflow-snap"), this.controller = new p(this), this.controller.connect();
   }
   /** Re-scan after external DOM changes and restart the observer. */
   update() {
@@ -13,7 +14,7 @@ class y {
   }
   /** Tear down ResizeObserver and clean up DOM state. */
   destroy() {
-    this.controller.disconnect(), this.ul.classList.remove("overflow", "overflow-compact", "overflow-reverse");
+    this.controller.disconnect(), this.ul.classList.remove("overflow", "overflow-compact", "overflow-reverse", "overflow-snap");
   }
   /* ── OverflowHost ─────────────────────────────────────── */
   getContainerEl() {
@@ -25,27 +26,30 @@ class y {
   isReverse() {
     return this.reverse;
   }
+  isSnap() {
+    return this.snap;
+  }
   scanChildren() {
-    const o = [];
-    let e = null, r = -1, s = -1, l = 0;
+    const s = [];
+    let e = null, o = -1, r = -1, l = 0;
     for (const t of Array.from(this.ul.children)) {
       const n = t.dataset.overflowRole;
       if (n) {
-        if (n === "item" && (s === -1 && (s = l), o.push({
+        if (n === "item" && (r === -1 && (r = l), s.push({
           el: t,
           buttonEl: t.querySelector("button"),
-          menuid: t.dataset.menuid || void 0,
+          menuId: t.dataset.menuId || void 0,
           minStateWidth: t.dataset.minStateWidth || void 0
         })), n === "menu") {
-          r = l;
+          o = l;
           const c = t.querySelector("[data-menu-trigger]"), i = t.querySelector("[data-menu-panel]");
           if (c && i) {
             t.classList.add("overflow-opener"), i.setAttribute("popover", ""), this.setupPopover(c, i);
             const a = Array.from(i.children), d = /* @__PURE__ */ new Set();
             let u = !1;
             for (const h of a) {
-              const m = h.dataset.menuid;
-              m ? d.add(m) : u = !0;
+              const f = h.dataset.menuId;
+              f ? d.add(f) : u = !0;
             }
             e = {
               el: t,
@@ -59,16 +63,16 @@ class y {
         l++;
       }
     }
-    const f = r !== -1 && (s === -1 || r < s);
-    return { items: o, menu: e, menuFirst: f };
+    const m = o !== -1 && (r === -1 || o < r);
+    return { items: s, menu: e, menuFirst: m };
   }
-  setupPopover(o, e) {
-    o.addEventListener("click", () => {
+  setupPopover(s, e) {
+    s.addEventListener("click", () => {
       if (e.matches(":popover-open"))
         e.hidePopover();
       else {
-        const r = o.getBoundingClientRect();
-        e.style.position = "fixed", e.style.top = `${r.bottom + 4}px`, e.style.left = `${r.left}px`, e.style.margin = "0", e.showPopover();
+        const o = s.getBoundingClientRect();
+        e.style.position = "fixed", e.style.top = `${o.bottom + 4}px`, e.style.left = `${o.left}px`, e.style.margin = "0", e.showPopover();
       }
     });
   }

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoFrameworkOverflow.js","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"sourcesContent":["import {\n  OverflowController,\n  type OverflowHost,\n  type ScanResult,\n  type ScannedItem,\n  type ScannedMenu,\n} from '../Overflow/OverflowController';\n\nexport interface OverflowToolbarOptions {\n  compact?: boolean;\n  reverse?: boolean;\n}\n\nexport class OverflowToolbar implements OverflowHost {\n  private ul: HTMLUListElement;\n  private compact: boolean;\n  private reverse: boolean;\n  private controller: OverflowController;\n\n  constructor(ul: HTMLUListElement, opts: OverflowToolbarOptions = {}) {\n    this.ul = ul;\n    this.compact = opts.compact ?? false;\n    this.reverse = opts.reverse ?? false;\n\n    this.ul.classList.add('overflow');\n    if (this.compact) this.ul.classList.add('overflow-compact');\n    if (this.reverse) this.ul.classList.add('overflow-reverse');\n\n    this.controller = new OverflowController(this);\n    this.controller.connect();\n  }\n\n  /** Re-scan after external DOM changes and restart the observer. */\n  update(): void {\n    this.controller.update();\n  }\n\n  /** Tear down ResizeObserver and clean up DOM state. */\n  destroy(): void {\n    this.controller.disconnect();\n    this.ul.classList.remove('overflow', 'overflow-compact', 'overflow-reverse');\n  }\n\n  /* ── OverflowHost ─────────────────────────────────────── */\n\n  getContainerEl(): HTMLElement {\n    return this.ul;\n  }\n\n  isCompact(): boolean {\n    return this.compact;\n  }\n\n  isReverse(): boolean {\n    return this.reverse;\n  }\n\n  scanChildren(): ScanResult {\n    const items: ScannedItem[] = [];\n    let menu: ScannedMenu | null = null;\n    let menuIndex = -1;\n    let firstItemIndex = -1;\n    let index = 0;\n\n    for (const child of Array.from(this.ul.children) as HTMLElement[]) {\n      const role = child.dataset.overflowRole as 'item' | 'menu' | undefined;\n      if (!role) continue;\n\n      if (role === 'item') {\n        if (firstItemIndex === -1) firstItemIndex = index;\n        items.push({\n          el: child,\n          buttonEl: child.querySelector('button'),\n          menuid: child.dataset.menuid || undefined,\n          minStateWidth: child.dataset.minStateWidth || undefined,\n        });\n      }\n\n      if (role === 'menu') {\n        menuIndex = index;\n        const trigger = child.querySelector<HTMLElement>('[data-menu-trigger]');\n        const panel = child.querySelector<HTMLElement>('[data-menu-panel]');\n\n        if (trigger && panel) {\n          child.classList.add('overflow-opener');\n          panel.setAttribute('popover', '');\n          this.setupPopover(trigger, panel);\n\n          const menuItemEls = Array.from(panel.children) as HTMLElement[];\n          const inMenuIds = new Set<string>();\n          let hasMenuOnlyItems = false;\n          for (const mi of menuItemEls) {\n            const mid = mi.dataset.menuid;\n            if (mid) {\n              inMenuIds.add(mid);\n            } else {\n              hasMenuOnlyItems = true;\n            }\n          }\n\n          menu = {\n            el: child,\n            triggerEl: trigger,\n            menuItemEls,\n            inMenuIds,\n            hasMenuOnlyItems,\n          };\n        }\n      }\n\n      index++;\n    }\n\n    const menuFirst =\n      menuIndex !== -1 && (firstItemIndex === -1 || menuIndex < firstItemIndex);\n\n    return { items, menu, menuFirst };\n  }\n\n  private setupPopover(trigger: HTMLElement, panel: HTMLElement): void {\n    trigger.addEventListener('click', () => {\n      if (panel.matches(':popover-open')) {\n        panel.hidePopover();\n      } else {\n        const rect = trigger.getBoundingClientRect();\n        panel.style.position = 'fixed';\n        panel.style.top = `${rect.bottom + 4}px`;\n        panel.style.left = `${rect.left}px`;\n        panel.style.margin = '0';\n        panel.showPopover();\n      }\n    });\n  }\n}\n"],"names":["OverflowToolbar","ul","opts","OverflowController","items","menu","menuIndex","firstItemIndex","index","child","role","trigger","panel","menuItemEls","inMenuIds","hasMenuOnlyItems","mi","mid","menuFirst","rect"],"mappings":";AAaO,MAAMA,EAAwC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAYC,GAAsBC,IAA+B,IAAI;AACnE,SAAK,KAAKD,GACV,KAAK,UAAUC,EAAK,WAAW,IAC/B,KAAK,UAAUA,EAAK,WAAW,IAE/B,KAAK,GAAG,UAAU,IAAI,UAAU,GAC5B,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GACtD,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GAE1D,KAAK,aAAa,IAAIC,EAAmB,IAAI,GAC7C,KAAK,WAAW,QAAA;AAAA,EAClB;AAAA;AAAA,EAGA,SAAe;AACb,SAAK,WAAW,OAAA;AAAA,EAClB;AAAA;AAAA,EAGA,UAAgB;AACd,SAAK,WAAW,WAAA,GAChB,KAAK,GAAG,UAAU,OAAO,YAAY,oBAAoB,kBAAkB;AAAA,EAC7E;AAAA;AAAA,EAIA,iBAA8B;AAC5B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAA2B;AACzB,UAAMC,IAAuB,CAAA;AAC7B,QAAIC,IAA2B,MAC3BC,IAAY,IACZC,IAAiB,IACjBC,IAAQ;AAEZ,eAAWC,KAAS,MAAM,KAAK,KAAK,GAAG,QAAQ,GAAoB;AACjE,YAAMC,IAAOD,EAAM,QAAQ;AAC3B,UAAKC,GAYL;AAAA,YAVIA,MAAS,WACPH,MAAmB,OAAIA,IAAiBC,IAC5CJ,EAAM,KAAK;AAAA,UACT,IAAIK;AAAA,UACJ,UAAUA,EAAM,cAAc,QAAQ;AAAA,UACtC,QAAQA,EAAM,QAAQ,UAAU;AAAA,UAChC,eAAeA,EAAM,QAAQ,iBAAiB;AAAA,QAAA,CAC/C,IAGCC,MAAS,QAAQ;AACnB,UAAAJ,IAAYE;AACZ,gBAAMG,IAAUF,EAAM,cAA2B,qBAAqB,GAChEG,IAAQH,EAAM,cAA2B,mBAAmB;AAElE,cAAIE,KAAWC,GAAO;AACpB,YAAAH,EAAM,UAAU,IAAI,iBAAiB,GACrCG,EAAM,aAAa,WAAW,EAAE,GAChC,KAAK,aAAaD,GAASC,CAAK;AAEhC,kBAAMC,IAAc,MAAM,KAAKD,EAAM,QAAQ,GACvCE,wBAAgB,IAAA;AACtB,gBAAIC,IAAmB;AACvB,uBAAWC,KAAMH,GAAa;AAC5B,oBAAMI,IAAMD,EAAG,QAAQ;AACvB,cAAIC,IACFH,EAAU,IAAIG,CAAG,IAEjBF,IAAmB;AAAA,YAEvB;AAEA,YAAAV,IAAO;AAAA,cACL,IAAII;AAAA,cACJ,WAAWE;AAAA,cACX,aAAAE;AAAA,cACA,WAAAC;AAAA,cACA,kBAAAC;AAAA,YAAA;AAAA,UAEJ;AAAA,QACF;AAEA,QAAAP;AAAA;AAAA,IACF;AAEA,UAAMU,IACJZ,MAAc,OAAOC,MAAmB,MAAMD,IAAYC;AAE5D,WAAO,EAAE,OAAAH,GAAO,MAAAC,GAAM,WAAAa,EAAA;AAAA,EACxB;AAAA,EAEQ,aAAaP,GAAsBC,GAA0B;AACnE,IAAAD,EAAQ,iBAAiB,SAAS,MAAM;AACtC,UAAIC,EAAM,QAAQ,eAAe;AAC/B,QAAAA,EAAM,YAAA;AAAA,WACD;AACL,cAAMO,IAAOR,EAAQ,sBAAA;AACrB,QAAAC,EAAM,MAAM,WAAW,SACvBA,EAAM,MAAM,MAAM,GAAGO,EAAK,SAAS,CAAC,MACpCP,EAAM,MAAM,OAAO,GAAGO,EAAK,IAAI,MAC/BP,EAAM,MAAM,SAAS,KACrBA,EAAM,YAAA;AAAA,MACR;AAAA,IACF,CAAC;AAAA,EACH;AACF;"}
+{"version":3,"file":"NoFrameworkOverflow.js","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"sourcesContent":["import {\n  OverflowController,\n  type OverflowHost,\n  type ScanResult,\n  type ScannedItem,\n  type ScannedMenu,\n} from '../Overflow/OverflowController';\n\nexport interface OverflowToolbarOptions {\n  compact?: boolean;\n  reverse?: boolean;\n  snap?: boolean;\n}\n\nexport class OverflowToolbar implements OverflowHost {\n  private ul: HTMLUListElement;\n  private compact: boolean;\n  private reverse: boolean;\n  private snap: boolean;\n  private controller: OverflowController;\n\n  constructor(ul: HTMLUListElement, opts: OverflowToolbarOptions = {}) {\n    this.ul = ul;\n    this.compact = opts.compact ?? false;\n    this.reverse = opts.reverse ?? false;\n    this.snap = opts.snap ?? false;\n\n    this.ul.classList.add('overflow');\n    if (this.compact) this.ul.classList.add('overflow-compact');\n    if (this.reverse) this.ul.classList.add('overflow-reverse');\n    if (this.snap) this.ul.classList.add('overflow-snap');\n\n    this.controller = new OverflowController(this);\n    this.controller.connect();\n  }\n\n  /** Re-scan after external DOM changes and restart the observer. */\n  update(): void {\n    this.controller.update();\n  }\n\n  /** Tear down ResizeObserver and clean up DOM state. */\n  destroy(): void {\n    this.controller.disconnect();\n    this.ul.classList.remove('overflow', 'overflow-compact', 'overflow-reverse', 'overflow-snap');\n  }\n\n  /* ── OverflowHost ─────────────────────────────────────── */\n\n  getContainerEl(): HTMLElement {\n    return this.ul;\n  }\n\n  isCompact(): boolean {\n    return this.compact;\n  }\n\n  isReverse(): boolean {\n    return this.reverse;\n  }\n\n  isSnap(): boolean {\n    return this.snap;\n  }\n\n  scanChildren(): ScanResult {\n    const items: ScannedItem[] = [];\n    let menu: ScannedMenu | null = null;\n    let menuIndex = -1;\n    let firstItemIndex = -1;\n    let index = 0;\n\n    for (const child of Array.from(this.ul.children) as HTMLElement[]) {\n      const role = child.dataset.overflowRole as 'item' | 'menu' | undefined;\n      if (!role) continue;\n\n      if (role === 'item') {\n        if (firstItemIndex === -1) firstItemIndex = index;\n        items.push({\n          el: child,\n          buttonEl: child.querySelector('button'),\n          menuId: child.dataset.menuId || undefined,\n          minStateWidth: child.dataset.minStateWidth || undefined,\n        });\n      }\n\n      if (role === 'menu') {\n        menuIndex = index;\n        const trigger = child.querySelector<HTMLElement>('[data-menu-trigger]');\n        const panel = child.querySelector<HTMLElement>('[data-menu-panel]');\n\n        if (trigger && panel) {\n          child.classList.add('overflow-opener');\n          panel.setAttribute('popover', '');\n          this.setupPopover(trigger, panel);\n\n          const menuItemEls = Array.from(panel.children) as HTMLElement[];\n          const inMenuIds = new Set<string>();\n          let hasMenuOnlyItems = false;\n          for (const mi of menuItemEls) {\n            const mid = mi.dataset.menuId;\n            if (mid) {\n              inMenuIds.add(mid);\n            } else {\n              hasMenuOnlyItems = true;\n            }\n          }\n\n          menu = {\n            el: child,\n            triggerEl: trigger,\n            menuItemEls,\n            inMenuIds,\n            hasMenuOnlyItems,\n          };\n        }\n      }\n\n      index++;\n    }\n\n    const menuFirst =\n      menuIndex !== -1 && (firstItemIndex === -1 || menuIndex < firstItemIndex);\n\n    return { items, menu, menuFirst };\n  }\n\n  private setupPopover(trigger: HTMLElement, panel: HTMLElement): void {\n    trigger.addEventListener('click', () => {\n      if (panel.matches(':popover-open')) {\n        panel.hidePopover();\n      } else {\n        const rect = trigger.getBoundingClientRect();\n        panel.style.position = 'fixed';\n        panel.style.top = `${rect.bottom + 4}px`;\n        panel.style.left = `${rect.left}px`;\n        panel.style.margin = '0';\n        panel.showPopover();\n      }\n    });\n  }\n}\n"],"names":["OverflowToolbar","ul","opts","OverflowController","items","menu","menuIndex","firstItemIndex","index","child","role","trigger","panel","menuItemEls","inMenuIds","hasMenuOnlyItems","mi","mid","menuFirst","rect"],"mappings":";AAcO,MAAMA,EAAwC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAYC,GAAsBC,IAA+B,IAAI;AACnE,SAAK,KAAKD,GACV,KAAK,UAAUC,EAAK,WAAW,IAC/B,KAAK,UAAUA,EAAK,WAAW,IAC/B,KAAK,OAAOA,EAAK,QAAQ,IAEzB,KAAK,GAAG,UAAU,IAAI,UAAU,GAC5B,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GACtD,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GACtD,KAAK,QAAM,KAAK,GAAG,UAAU,IAAI,eAAe,GAEpD,KAAK,aAAa,IAAIC,EAAmB,IAAI,GAC7C,KAAK,WAAW,QAAA;AAAA,EAClB;AAAA;AAAA,EAGA,SAAe;AACb,SAAK,WAAW,OAAA;AAAA,EAClB;AAAA;AAAA,EAGA,UAAgB;AACd,SAAK,WAAW,WAAA,GAChB,KAAK,GAAG,UAAU,OAAO,YAAY,oBAAoB,oBAAoB,eAAe;AAAA,EAC9F;AAAA;AAAA,EAIA,iBAA8B;AAC5B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,SAAkB;AAChB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAA2B;AACzB,UAAMC,IAAuB,CAAA;AAC7B,QAAIC,IAA2B,MAC3BC,IAAY,IACZC,IAAiB,IACjBC,IAAQ;AAEZ,eAAWC,KAAS,MAAM,KAAK,KAAK,GAAG,QAAQ,GAAoB;AACjE,YAAMC,IAAOD,EAAM,QAAQ;AAC3B,UAAKC,GAYL;AAAA,YAVIA,MAAS,WACPH,MAAmB,OAAIA,IAAiBC,IAC5CJ,EAAM,KAAK;AAAA,UACT,IAAIK;AAAA,UACJ,UAAUA,EAAM,cAAc,QAAQ;AAAA,UACtC,QAAQA,EAAM,QAAQ,UAAU;AAAA,UAChC,eAAeA,EAAM,QAAQ,iBAAiB;AAAA,QAAA,CAC/C,IAGCC,MAAS,QAAQ;AACnB,UAAAJ,IAAYE;AACZ,gBAAMG,IAAUF,EAAM,cAA2B,qBAAqB,GAChEG,IAAQH,EAAM,cAA2B,mBAAmB;AAElE,cAAIE,KAAWC,GAAO;AACpB,YAAAH,EAAM,UAAU,IAAI,iBAAiB,GACrCG,EAAM,aAAa,WAAW,EAAE,GAChC,KAAK,aAAaD,GAASC,CAAK;AAEhC,kBAAMC,IAAc,MAAM,KAAKD,EAAM,QAAQ,GACvCE,wBAAgB,IAAA;AACtB,gBAAIC,IAAmB;AACvB,uBAAWC,KAAMH,GAAa;AAC5B,oBAAMI,IAAMD,EAAG,QAAQ;AACvB,cAAIC,IACFH,EAAU,IAAIG,CAAG,IAEjBF,IAAmB;AAAA,YAEvB;AAEA,YAAAV,IAAO;AAAA,cACL,IAAII;AAAA,cACJ,WAAWE;AAAA,cACX,aAAAE;AAAA,cACA,WAAAC;AAAA,cACA,kBAAAC;AAAA,YAAA;AAAA,UAEJ;AAAA,QACF;AAEA,QAAAP;AAAA;AAAA,IACF;AAEA,UAAMU,IACJZ,MAAc,OAAOC,MAAmB,MAAMD,IAAYC;AAE5D,WAAO,EAAE,OAAAH,GAAO,MAAAC,GAAM,WAAAa,EAAA;AAAA,EACxB;AAAA,EAEQ,aAAaP,GAAsBC,GAA0B;AACnE,IAAAD,EAAQ,iBAAiB,SAAS,MAAM;AACtC,UAAIC,EAAM,QAAQ,eAAe;AAC/B,QAAAA,EAAM,YAAA;AAAA,WACD;AACL,cAAMO,IAAOR,EAAQ,sBAAA;AACrB,QAAAC,EAAM,MAAM,WAAW,SACvBA,EAAM,MAAM,MAAM,GAAGO,EAAK,SAAS,CAAC,MACpCP,EAAM,MAAM,OAAO,GAAGO,EAAK,IAAI,MAC/BP,EAAM,MAAM,SAAS,KACrBA,EAAM,YAAA;AAAA,MACR;AAAA,IACF,CAAC;AAAA,EACH;AACF;"}

package/dist/components/NoFrameworkOverflow/index.d.ts

@@ -1,3 +1,5 @@
+import '../Overflow/Overflow.css';
+import './noframework.css';
 export { OverflowToolbar } from './NoFrameworkOverflow';
 export type { OverflowToolbarOptions } from './NoFrameworkOverflow';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/NoFrameworkOverflow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}