@data-slot/ui 0.2.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +178 -0
- package/dist/accordion.cjs +1 -0
- package/dist/accordion.d.cts +2 -0
- package/dist/accordion.d.ts +2 -0
- package/dist/accordion.js +1 -0
- package/dist/collapsible.cjs +1 -0
- package/dist/collapsible.d.cts +2 -0
- package/dist/collapsible.d.ts +2 -0
- package/dist/collapsible.js +1 -0
- package/dist/combobox.cjs +1 -0
- package/dist/combobox.d.cts +2 -0
- package/dist/combobox.d.ts +2 -0
- package/dist/combobox.js +1 -0
- package/dist/core.cjs +1 -0
- package/dist/core.d.cts +2 -0
- package/dist/core.d.ts +2 -0
- package/dist/core.js +1 -0
- package/dist/dialog.cjs +1 -0
- package/dist/dialog.d.cts +2 -0
- package/dist/dialog.d.ts +2 -0
- package/dist/dialog.js +1 -0
- package/dist/dropdown-menu.cjs +1 -0
- package/dist/dropdown-menu.d.cts +2 -0
- package/dist/dropdown-menu.d.ts +2 -0
- package/dist/dropdown-menu.js +1 -0
- package/dist/events.cjs +1 -0
- package/dist/events.js +1 -0
- package/dist/hover-card.cjs +1 -0
- package/dist/hover-card.d.cts +2 -0
- package/dist/hover-card.d.ts +2 -0
- package/dist/hover-card.js +1 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.cts +48 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.js +1 -0
- package/dist/index2.d.cts +46 -0
- package/dist/index2.d.ts +46 -0
- package/dist/index3.d.cts +62 -0
- package/dist/index3.d.ts +62 -0
- package/dist/index4.d.cts +69 -0
- package/dist/index4.d.ts +69 -0
- package/dist/index5.d.cts +63 -0
- package/dist/index5.d.ts +63 -0
- package/dist/index6.d.cts +71 -0
- package/dist/index6.d.ts +71 -0
- package/dist/index7.d.cts +61 -0
- package/dist/index7.d.ts +61 -0
- package/dist/index8.d.cts +12 -0
- package/dist/index8.d.ts +12 -0
- package/dist/navigation-menu.cjs +1 -0
- package/dist/navigation-menu.d.cts +2 -0
- package/dist/navigation-menu.d.ts +2 -0
- package/dist/navigation-menu.js +1 -0
- package/dist/popover.cjs +1 -0
- package/dist/popover.d.cts +2 -0
- package/dist/popover.d.ts +2 -0
- package/dist/popover.js +1 -0
- package/dist/popup.cjs +1 -0
- package/dist/popup.d.cts +202 -0
- package/dist/popup.d.ts +202 -0
- package/dist/popup.js +1 -0
- package/dist/scroll.cjs +1 -0
- package/dist/scroll.js +1 -0
- package/dist/select.cjs +1 -0
- package/dist/select.d.cts +2 -0
- package/dist/select.d.ts +2 -0
- package/dist/select.js +1 -0
- package/dist/src.cjs +1 -0
- package/dist/src.js +1 -0
- package/dist/src2.cjs +1 -0
- package/dist/src2.js +1 -0
- package/dist/src3.cjs +1 -0
- package/dist/src3.js +1 -0
- package/dist/src4.cjs +1 -0
- package/dist/src4.js +1 -0
- package/dist/src5.cjs +1 -0
- package/dist/src5.js +1 -0
- package/dist/src6.cjs +1 -0
- package/dist/src6.js +1 -0
- package/dist/src7.cjs +1 -0
- package/dist/src7.js +1 -0
- package/dist/tabs.cjs +1 -0
- package/dist/tabs.d.cts +2 -0
- package/dist/tabs.d.ts +2 -0
- package/dist/tabs.js +1 -0
- package/dist/toggle-group.cjs +1 -0
- package/dist/toggle-group.d.cts +2 -0
- package/dist/toggle-group.d.ts +2 -0
- package/dist/toggle-group.js +1 -0
- package/dist/toggle.cjs +1 -0
- package/dist/toggle.d.cts +2 -0
- package/dist/toggle.d.ts +2 -0
- package/dist/toggle.js +1 -0
- package/dist/tooltip.cjs +1 -0
- package/dist/tooltip.d.cts +2 -0
- package/dist/tooltip.d.ts +2 -0
- package/dist/tooltip.js +1 -0
- package/package.json +198 -0
package/README.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# @data-slot/ui
|
|
2
|
+
|
|
3
|
+
Headless UI components for vanilla JavaScript. Tiny, accessible, unstyled.
|
|
4
|
+
|
|
5
|
+
**~3KB gzipped** for the full bundle. Zero dependencies. Tree-shakeable.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @data-slot/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Packages
|
|
14
|
+
|
|
15
|
+
This is a convenience package that re-exports all `@data-slot/*` packages:
|
|
16
|
+
|
|
17
|
+
| Package | Size | Description |
|
|
18
|
+
|---------|------|-------------|
|
|
19
|
+
| `@data-slot/dialog` | 1.2 KB | Modal dialogs with focus management |
|
|
20
|
+
| `@data-slot/tabs` | 1.1 KB | Tabbed interfaces with keyboard nav |
|
|
21
|
+
| `@data-slot/accordion` | 938 B | Collapsible content sections |
|
|
22
|
+
| `@data-slot/popover` | 856 B | Anchored floating content |
|
|
23
|
+
| `@data-slot/hover-card` | 2.1 KB | Hover/focus preview cards |
|
|
24
|
+
| `@data-slot/tooltip` | 772 B | Hover/focus tooltips |
|
|
25
|
+
| `@data-slot/collapsible` | 710 B | Simple show/hide toggle |
|
|
26
|
+
| `@data-slot/navigation-menu` | ~1.5 KB | Mega menus with hover/keyboard |
|
|
27
|
+
| `@data-slot/combobox` | ~3 KB | Autocomplete input with filtering |
|
|
28
|
+
| `@data-slot/core` | 452 B | Shared utilities |
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Subpath Imports (Recommended)
|
|
33
|
+
|
|
34
|
+
For tree-shaking, use subpath imports:
|
|
35
|
+
|
|
36
|
+
```typescript
|
|
37
|
+
import { create } from "@data-slot/ui/tabs";
|
|
38
|
+
import { createDialog } from "@data-slot/ui/dialog";
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Available subpaths:
|
|
42
|
+
- `@data-slot/ui/core`
|
|
43
|
+
- `@data-slot/ui/tabs`
|
|
44
|
+
- `@data-slot/ui/dialog`
|
|
45
|
+
- `@data-slot/ui/accordion`
|
|
46
|
+
- `@data-slot/ui/popover`
|
|
47
|
+
- `@data-slot/ui/hover-card`
|
|
48
|
+
- `@data-slot/ui/tooltip`
|
|
49
|
+
- `@data-slot/ui/collapsible`
|
|
50
|
+
- `@data-slot/ui/navigation-menu`
|
|
51
|
+
- `@data-slot/ui/combobox`
|
|
52
|
+
|
|
53
|
+
### Direct Package Imports
|
|
54
|
+
|
|
55
|
+
For the smallest bundle, install and import specific packages:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @data-slot/tabs @data-slot/dialog
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
import { create } from "@data-slot/tabs";
|
|
63
|
+
import { createDialog } from "@data-slot/dialog";
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Barrel Import
|
|
67
|
+
|
|
68
|
+
Import everything (larger bundle):
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
import { createTabs, createDialog, createAccordion } from "@data-slot/ui";
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Quick Start
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<div data-slot="tabs" data-default-value="one">
|
|
78
|
+
<div data-slot="tabs-list">
|
|
79
|
+
<button data-slot="tabs-trigger" data-value="one">Tab One</button>
|
|
80
|
+
<button data-slot="tabs-trigger" data-value="two">Tab Two</button>
|
|
81
|
+
</div>
|
|
82
|
+
<div data-slot="tabs-content" data-value="one">Content One</div>
|
|
83
|
+
<div data-slot="tabs-content" data-value="two">Content Two</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<script type="module">
|
|
87
|
+
import { create } from "@data-slot/ui/tabs";
|
|
88
|
+
|
|
89
|
+
const controllers = create();
|
|
90
|
+
controllers[0]?.select("two");
|
|
91
|
+
</script>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## API Pattern
|
|
95
|
+
|
|
96
|
+
All components follow the same pattern:
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
// Auto-discover and bind all instances in the DOM
|
|
100
|
+
import { create } from "@data-slot/ui/tabs";
|
|
101
|
+
const controllers = create(); // Returns Controller[]
|
|
102
|
+
|
|
103
|
+
// Or create for a specific element
|
|
104
|
+
import { createTabs } from "@data-slot/ui/tabs";
|
|
105
|
+
const tabs = createTabs(document.querySelector('[data-slot="tabs"]'));
|
|
106
|
+
|
|
107
|
+
tabs.select("news"); // Programmatic control
|
|
108
|
+
tabs.destroy(); // Cleanup
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Styling
|
|
112
|
+
|
|
113
|
+
Components are unstyled. Use `data-state` and ARIA attributes for CSS:
|
|
114
|
+
|
|
115
|
+
```css
|
|
116
|
+
/* Active tab trigger */
|
|
117
|
+
[data-slot="tabs-trigger"][aria-selected="true"] {
|
|
118
|
+
font-weight: bold;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Open dialog */
|
|
122
|
+
[data-slot="dialog"][data-state="open"] [data-slot="dialog-content"] {
|
|
123
|
+
display: flex;
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
With Tailwind:
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<button
|
|
131
|
+
data-slot="tabs-trigger"
|
|
132
|
+
class="aria-selected:font-bold aria-selected:border-b-2"
|
|
133
|
+
>
|
|
134
|
+
Tab
|
|
135
|
+
</button>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## Exports
|
|
139
|
+
|
|
140
|
+
### Functions
|
|
141
|
+
|
|
142
|
+
| Export | Package |
|
|
143
|
+
|--------|---------|
|
|
144
|
+
| `createTabs` | @data-slot/tabs |
|
|
145
|
+
| `createDialog` | @data-slot/dialog |
|
|
146
|
+
| `createAccordion` | @data-slot/accordion |
|
|
147
|
+
| `createPopover` | @data-slot/popover |
|
|
148
|
+
| `createHoverCard` | @data-slot/hover-card |
|
|
149
|
+
| `createTooltip` | @data-slot/tooltip |
|
|
150
|
+
| `createCollapsible` | @data-slot/collapsible |
|
|
151
|
+
| `createNavigationMenu` | @data-slot/navigation-menu |
|
|
152
|
+
| `createCombobox` | @data-slot/combobox |
|
|
153
|
+
|
|
154
|
+
### Types
|
|
155
|
+
|
|
156
|
+
| Export | Package |
|
|
157
|
+
|--------|---------|
|
|
158
|
+
| `TabsOptions`, `TabsController` | @data-slot/tabs |
|
|
159
|
+
| `DialogOptions`, `DialogController` | @data-slot/dialog |
|
|
160
|
+
| `AccordionOptions`, `AccordionController` | @data-slot/accordion |
|
|
161
|
+
| `PopoverOptions`, `PopoverController` | @data-slot/popover |
|
|
162
|
+
| `HoverCardOptions`, `HoverCardController` | @data-slot/hover-card |
|
|
163
|
+
| `TooltipOptions`, `TooltipController` | @data-slot/tooltip |
|
|
164
|
+
| `CollapsibleOptions`, `CollapsibleController` | @data-slot/collapsible |
|
|
165
|
+
| `NavigationMenuOptions`, `NavigationMenuController` | @data-slot/navigation-menu |
|
|
166
|
+
| `ComboboxOptions`, `ComboboxController` | @data-slot/combobox |
|
|
167
|
+
|
|
168
|
+
### Core Utilities
|
|
169
|
+
|
|
170
|
+
From `@data-slot/core`:
|
|
171
|
+
|
|
172
|
+
- `getPart`, `getParts`, `getRoots` - DOM queries
|
|
173
|
+
- `setAria`, `ensureId`, `linkLabelledBy` - ARIA helpers
|
|
174
|
+
- `on`, `emit`, `composeHandlers` - Event utilities
|
|
175
|
+
|
|
176
|
+
## License
|
|
177
|
+
|
|
178
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src.cjs`);exports.create=e.t,exports.createAccordion=e.n;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./src.js";export{t as create,e as createAccordion};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src2.cjs`);exports.create=e.t,exports.createCollapsible=e.n;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./src2.js";export{t as create,e as createCollapsible};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var e=require(`@data-slot/combobox`);Object.keys(e).forEach(function(t){t!==`default`&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
|
package/dist/combobox.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from"@data-slot/combobox";export{};
|
package/dist/core.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./events.cjs`),t=require(`./scroll.cjs`),n=require(`./popup.cjs`);exports.composeHandlers=e.t,exports.computeFloatingPosition=n.t,exports.containsWithPortals=e.s,exports.createDismissLayer=n.n,exports.createPortalLifecycle=n.r,exports.createPositionSync=n.i,exports.createPresenceLifecycle=n.a,exports.emit=e.n,exports.ensureId=e.i,exports.ensureItemVisibleInContainer=n.o,exports.focusElement=n.s,exports.getDataBool=e.c,exports.getDataEnum=e.l,exports.getDataNumber=e.u,exports.getDataString=e.d,exports.getPart=e.f,exports.getParts=e.p,exports.getRoots=e.m,exports.linkLabelledBy=e.a,exports.lockScroll=t.t,exports.on=e.r,exports.portalToBody=e.h,exports.restorePortal=e.g,exports.setAria=e.o,exports.unlockScroll=t.n;
|
package/dist/core.d.cts
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { A as getDataBool, C as emit, D as setAria, E as linkLabelledBy, F as getParts, I as getRoots, L as portalToBody, M as getDataNumber, N as getDataString, O as PortalState, P as getPart, R as restorePortal, S as composeHandlers, T as ensureId, _ as createPresenceLifecycle, a as PopupPlacementOptions, b as lockScroll, c as PortalLifecycleOptions, d as PresenceLifecycleController, f as PresenceLifecycleOptions, g as createPositionSync, h as createPortalLifecycle, i as PopupAlign, j as getDataEnum, k as containsWithPortals, l as PositionSyncController, m as createDismissLayer, n as DismissLayerOptions, o as PopupSide, p as computeFloatingPosition, r as FloatingPosition, s as PortalLifecycleController, t as ComputeFloatingPositionInput, u as PositionSyncOptions, v as ensureItemVisibleInContainer, w as on, x as unlockScroll, y as focusElement } from "./popup.cjs";
|
|
2
|
+
export { ComputeFloatingPositionInput, DismissLayerOptions, FloatingPosition, PopupAlign, PopupPlacementOptions, PopupSide, PortalLifecycleController, PortalLifecycleOptions, PortalState, PositionSyncController, PositionSyncOptions, PresenceLifecycleController, PresenceLifecycleOptions, composeHandlers, computeFloatingPosition, containsWithPortals, createDismissLayer, createPortalLifecycle, createPositionSync, createPresenceLifecycle, emit, ensureId, ensureItemVisibleInContainer, focusElement, getDataBool, getDataEnum, getDataNumber, getDataString, getPart, getParts, getRoots, linkLabelledBy, lockScroll, on, portalToBody, restorePortal, setAria, unlockScroll };
|
package/dist/core.d.ts
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { A as getDataBool, C as emit, D as setAria, E as linkLabelledBy, F as getParts, I as getRoots, L as portalToBody, M as getDataNumber, N as getDataString, O as PortalState, P as getPart, R as restorePortal, S as composeHandlers, T as ensureId, _ as createPresenceLifecycle, a as PopupPlacementOptions, b as lockScroll, c as PortalLifecycleOptions, d as PresenceLifecycleController, f as PresenceLifecycleOptions, g as createPositionSync, h as createPortalLifecycle, i as PopupAlign, j as getDataEnum, k as containsWithPortals, l as PositionSyncController, m as createDismissLayer, n as DismissLayerOptions, o as PopupSide, p as computeFloatingPosition, r as FloatingPosition, s as PortalLifecycleController, t as ComputeFloatingPositionInput, u as PositionSyncOptions, v as ensureItemVisibleInContainer, w as on, x as unlockScroll, y as focusElement } from "./popup.js";
|
|
2
|
+
export { ComputeFloatingPositionInput, DismissLayerOptions, FloatingPosition, PopupAlign, PopupPlacementOptions, PopupSide, PortalLifecycleController, PortalLifecycleOptions, PortalState, PositionSyncController, PositionSyncOptions, PresenceLifecycleController, PresenceLifecycleOptions, composeHandlers, computeFloatingPosition, containsWithPortals, createDismissLayer, createPortalLifecycle, createPositionSync, createPresenceLifecycle, emit, ensureId, ensureItemVisibleInContainer, focusElement, getDataBool, getDataEnum, getDataNumber, getDataString, getPart, getParts, getRoots, linkLabelledBy, lockScroll, on, portalToBody, restorePortal, setAria, unlockScroll };
|
package/dist/core.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as e,c as t,d as n,f as r,g as i,h as a,i as o,l as s,m as c,n as l,o as u,p as d,r as f,s as p,t as m,u as h}from"./events.js";import{n as g,t as _}from"./scroll.js";import{a as v,i as y,n as b,o as x,r as S,s as C,t as w}from"./popup.js";export{m as composeHandlers,w as computeFloatingPosition,p as containsWithPortals,b as createDismissLayer,S as createPortalLifecycle,y as createPositionSync,v as createPresenceLifecycle,l as emit,o as ensureId,x as ensureItemVisibleInContainer,C as focusElement,t as getDataBool,s as getDataEnum,h as getDataNumber,n as getDataString,r as getPart,d as getParts,c as getRoots,e as linkLabelledBy,_ as lockScroll,f as on,a as portalToBody,i as restorePortal,u as setAria,g as unlockScroll};
|
package/dist/dialog.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src3.cjs`);exports.create=e.t,exports.createDialog=e.n;
|
package/dist/dialog.d.ts
ADDED
package/dist/dialog.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./src3.js";export{t as create,e as createDialog};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var e=require(`@data-slot/dropdown-menu`);Object.keys(e).forEach(function(t){t!==`default`&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export*from"@data-slot/dropdown-menu";export{};
|
package/dist/events.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t){if(s(e,t))return o(e,t)??void 0}function p(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}const m=new WeakMap,h=Symbol.for(`data-slot.portal-owner`),g=e=>e[h]??m.get(e),_=(e,t)=>{m.set(e,t),e[h]=t},v=e=>{m.delete(e),delete e[h]};function y(e,t){return b(e,t,new Set)}function b(e,t,n){if(!t)return!1;let r=t instanceof Element?t:t.parentElement;if(!r)return!1;if(e.contains(r))return!0;let i=r;for(;i;){let t=g(i);if(t&&!n.has(t)&&(n.add(t),b(e,t,n)))return!0;i=i.parentElement}return!1}function x(e,t,n){if(n.portaled)return;let r=(t.ownerDocument??document)?.body;r&&(n.originalParent=e.parentNode,n.originalNextSibling=e.nextSibling,_(e,t),r.appendChild(e),n.portaled=!0)}function S(e,t){if(!t.portaled)return;v(e);let n=t.originalParent,r=t.originalNextSibling;n&&n.isConnected?r&&r.parentNode===n?n.insertBefore(e,r):n.appendChild(e):e.remove(),t.portaled=!1,t.originalParent=null,t.originalNextSibling=null}let C=0;const w=(e,t)=>e.id||=`${t}-${++C}`,T=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))},E=(e,t,n)=>{t&&e.setAttribute(`aria-labelledby`,w(t,`title`)),n&&e.setAttribute(`aria-describedby`,w(n,`desc`))};function D(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const O=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),k=(...e)=>t=>{for(let n of e){if(t.defaultPrevented)break;n?.(t)}};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`g`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`h`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`m`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return d}});
|
package/dist/events.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t){if(s(e,t))return o(e,t)??void 0}function p(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}const m=new WeakMap,h=Symbol.for(`data-slot.portal-owner`),g=e=>e[h]??m.get(e),_=(e,t)=>{m.set(e,t),e[h]=t},v=e=>{m.delete(e),delete e[h]};function y(e,t){return b(e,t,new Set)}function b(e,t,n){if(!t)return!1;let r=t instanceof Element?t:t.parentElement;if(!r)return!1;if(e.contains(r))return!0;let i=r;for(;i;){let t=g(i);if(t&&!n.has(t)&&(n.add(t),b(e,t,n)))return!0;i=i.parentElement}return!1}function x(e,t,n){if(n.portaled)return;let r=(t.ownerDocument??document)?.body;r&&(n.originalParent=e.parentNode,n.originalNextSibling=e.nextSibling,_(e,t),r.appendChild(e),n.portaled=!0)}function S(e,t){if(!t.portaled)return;v(e);let n=t.originalParent,r=t.originalNextSibling;n&&n.isConnected?r&&r.parentNode===n?n.insertBefore(e,r):n.appendChild(e):e.remove(),t.portaled=!1,t.originalParent=null,t.originalNextSibling=null}let C=0;const w=(e,t)=>e.id||=`${t}-${++C}`,T=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))},E=(e,t,n)=>{t&&e.setAttribute(`aria-labelledby`,w(t,`title`)),n&&e.setAttribute(`aria-describedby`,w(n,`desc`))};function D(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const O=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),k=(...e)=>t=>{for(let n of e){if(t.defaultPrevented)break;n?.(t)}};export{E as a,u as c,f as d,e as f,S as g,x as h,w as i,p as l,n as m,O as n,T as o,t as p,D as r,y as s,k as t,d as u};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src4.cjs`);exports.create=e.t,exports.createHoverCard=e.n;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as HoverCardSide, i as HoverCardReason, n as HoverCardController, o as create, r as HoverCardOptions, s as createHoverCard, t as HoverCardAlign } from "./index4.cjs";
|
|
2
|
+
export { HoverCardAlign, HoverCardController, HoverCardOptions, HoverCardReason, HoverCardSide, create, createHoverCard };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as HoverCardSide, i as HoverCardReason, n as HoverCardController, o as create, r as HoverCardOptions, s as createHoverCard, t as HoverCardAlign } from "./index4.js";
|
|
2
|
+
export { HoverCardAlign, HoverCardController, HoverCardOptions, HoverCardReason, HoverCardSide, create, createHoverCard };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./src4.js";export{t as create,e as createHoverCard};
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./events.cjs`),t=require(`./scroll.cjs`),n=require(`./popup.cjs`),r=require(`./src.cjs`),i=require(`./src2.cjs`),a=require(`./src3.cjs`),o=require(`./src4.cjs`),s=require(`./src5.cjs`),c=require(`./src6.cjs`),l=require(`./src7.cjs`);let u=require(`@data-slot/combobox`),d=require(`@data-slot/dropdown-menu`),f=require(`@data-slot/navigation-menu`);exports.composeHandlers=e.t,exports.computeFloatingPosition=n.t,exports.containsWithPortals=e.s,exports.createAccordion=r.n,exports.createCollapsible=i.n,Object.defineProperty(exports,`createCombobox`,{enumerable:!0,get:function(){return u.createCombobox}}),exports.createDialog=a.n,exports.createDismissLayer=n.n,Object.defineProperty(exports,`createDropdownMenu`,{enumerable:!0,get:function(){return d.createDropdownMenu}}),exports.createHoverCard=o.n,Object.defineProperty(exports,`createNavigationMenu`,{enumerable:!0,get:function(){return f.createNavigationMenu}}),exports.createPopover=c.n,exports.createPortalLifecycle=n.r,exports.createPositionSync=n.i,exports.createPresenceLifecycle=n.a,exports.createTabs=s.n,exports.createTooltip=l.n,exports.emit=e.n,exports.ensureId=e.i,exports.ensureItemVisibleInContainer=n.o,exports.focusElement=n.s,exports.getDataBool=e.c,exports.getDataEnum=e.l,exports.getDataNumber=e.u,exports.getDataString=e.d,exports.getPart=e.f,exports.getParts=e.p,exports.getRoots=e.m,exports.linkLabelledBy=e.a,exports.lockScroll=t.t,exports.on=e.r,exports.portalToBody=e.h,exports.restorePortal=e.g,exports.setAria=e.o,exports.unlockScroll=t.n;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
//#region ../accordion/src/index.d.ts
|
|
2
|
+
interface AccordionOptions {
|
|
3
|
+
/** Allow multiple items open at once */
|
|
4
|
+
multiple?: boolean;
|
|
5
|
+
/** Initially expanded item(s) */
|
|
6
|
+
defaultValue?: string | string[];
|
|
7
|
+
/** Callback when expanded items change */
|
|
8
|
+
onValueChange?: (value: string[]) => void;
|
|
9
|
+
/** Whether items can be fully collapsed (only applies to single mode) */
|
|
10
|
+
collapsible?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface AccordionController {
|
|
13
|
+
/** Expand an item by value */
|
|
14
|
+
expand(value: string): void;
|
|
15
|
+
/** Collapse an item by value */
|
|
16
|
+
collapse(value: string): void;
|
|
17
|
+
/** Toggle an item by value */
|
|
18
|
+
toggle(value: string): void;
|
|
19
|
+
/** Currently expanded values */
|
|
20
|
+
readonly value: string[];
|
|
21
|
+
/** Cleanup all event listeners */
|
|
22
|
+
destroy(): void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Create an accordion controller for a root element
|
|
26
|
+
*
|
|
27
|
+
* Expected markup:
|
|
28
|
+
* ```html
|
|
29
|
+
* <div data-slot="accordion">
|
|
30
|
+
* <div data-slot="accordion-item" data-value="one">
|
|
31
|
+
* <button data-slot="accordion-trigger">Item One</button>
|
|
32
|
+
* <div data-slot="accordion-content">Content One</div>
|
|
33
|
+
* </div>
|
|
34
|
+
* <div data-slot="accordion-item" data-value="two">
|
|
35
|
+
* <button data-slot="accordion-trigger">Item Two</button>
|
|
36
|
+
* <div data-slot="accordion-content">Content Two</div>
|
|
37
|
+
* </div>
|
|
38
|
+
* </div>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
declare function createAccordion(root: Element, options?: AccordionOptions): AccordionController;
|
|
42
|
+
/**
|
|
43
|
+
* Find and bind all accordion components in a scope
|
|
44
|
+
* Returns array of controllers for programmatic access
|
|
45
|
+
*/
|
|
46
|
+
declare function create(scope?: ParentNode): AccordionController[];
|
|
47
|
+
//#endregion
|
|
48
|
+
export { createAccordion as i, AccordionOptions as n, create as r, AccordionController as t };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
//#region ../accordion/src/index.d.ts
|
|
2
|
+
interface AccordionOptions {
|
|
3
|
+
/** Allow multiple items open at once */
|
|
4
|
+
multiple?: boolean;
|
|
5
|
+
/** Initially expanded item(s) */
|
|
6
|
+
defaultValue?: string | string[];
|
|
7
|
+
/** Callback when expanded items change */
|
|
8
|
+
onValueChange?: (value: string[]) => void;
|
|
9
|
+
/** Whether items can be fully collapsed (only applies to single mode) */
|
|
10
|
+
collapsible?: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface AccordionController {
|
|
13
|
+
/** Expand an item by value */
|
|
14
|
+
expand(value: string): void;
|
|
15
|
+
/** Collapse an item by value */
|
|
16
|
+
collapse(value: string): void;
|
|
17
|
+
/** Toggle an item by value */
|
|
18
|
+
toggle(value: string): void;
|
|
19
|
+
/** Currently expanded values */
|
|
20
|
+
readonly value: string[];
|
|
21
|
+
/** Cleanup all event listeners */
|
|
22
|
+
destroy(): void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Create an accordion controller for a root element
|
|
26
|
+
*
|
|
27
|
+
* Expected markup:
|
|
28
|
+
* ```html
|
|
29
|
+
* <div data-slot="accordion">
|
|
30
|
+
* <div data-slot="accordion-item" data-value="one">
|
|
31
|
+
* <button data-slot="accordion-trigger">Item One</button>
|
|
32
|
+
* <div data-slot="accordion-content">Content One</div>
|
|
33
|
+
* </div>
|
|
34
|
+
* <div data-slot="accordion-item" data-value="two">
|
|
35
|
+
* <button data-slot="accordion-trigger">Item Two</button>
|
|
36
|
+
* <div data-slot="accordion-content">Content Two</div>
|
|
37
|
+
* </div>
|
|
38
|
+
* </div>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
declare function createAccordion(root: Element, options?: AccordionOptions): AccordionController;
|
|
42
|
+
/**
|
|
43
|
+
* Find and bind all accordion components in a scope
|
|
44
|
+
* Returns array of controllers for programmatic access
|
|
45
|
+
*/
|
|
46
|
+
declare function create(scope?: ParentNode): AccordionController[];
|
|
47
|
+
//#endregion
|
|
48
|
+
export { createAccordion as i, AccordionOptions as n, create as r, AccordionController as t };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as e,c as t,d as n,f as r,g as i,h as a,i as o,l as s,m as c,n as l,o as u,p as d,r as f,s as p,t as m,u as h}from"./events.js";import{n as g,t as _}from"./scroll.js";import{a as v,i as y,n as b,o as x,r as S,s as C,t as w}from"./popup.js";import{n as T}from"./src.js";import{n as E}from"./src2.js";import{n as D}from"./src3.js";import{n as O}from"./src4.js";import{n as k}from"./src5.js";import{n as A}from"./src6.js";import{n as j}from"./src7.js";import{createCombobox as M}from"@data-slot/combobox";import{createDropdownMenu as N}from"@data-slot/dropdown-menu";import{createNavigationMenu as P}from"@data-slot/navigation-menu";export{m as composeHandlers,w as computeFloatingPosition,p as containsWithPortals,T as createAccordion,E as createCollapsible,M as createCombobox,D as createDialog,b as createDismissLayer,N as createDropdownMenu,O as createHoverCard,P as createNavigationMenu,A as createPopover,S as createPortalLifecycle,y as createPositionSync,v as createPresenceLifecycle,k as createTabs,j as createTooltip,l as emit,o as ensureId,x as ensureItemVisibleInContainer,C as focusElement,t as getDataBool,s as getDataEnum,h as getDataNumber,n as getDataString,r as getPart,d as getParts,c as getRoots,e as linkLabelledBy,_ as lockScroll,f as on,a as portalToBody,i as restorePortal,u as setAria,g as unlockScroll};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
//#region ../collapsible/src/index.d.ts
|
|
2
|
+
interface CollapsibleOptions {
|
|
3
|
+
/** Initial open state */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Use hidden="until-found" when closed so browser find-in-page can reveal content.
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
hiddenUntilFound?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Callback when open state changes.
|
|
12
|
+
* Note: Not called on initial render, only on subsequent state changes.
|
|
13
|
+
*/
|
|
14
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
}
|
|
16
|
+
interface CollapsibleController {
|
|
17
|
+
/** Open the collapsible */
|
|
18
|
+
open(): void;
|
|
19
|
+
/** Close the collapsible */
|
|
20
|
+
close(): void;
|
|
21
|
+
/** Toggle the collapsible */
|
|
22
|
+
toggle(): void;
|
|
23
|
+
/** Current open state */
|
|
24
|
+
readonly isOpen: boolean;
|
|
25
|
+
/** Cleanup all event listeners */
|
|
26
|
+
destroy(): void;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Create a collapsible controller for a root element
|
|
30
|
+
*
|
|
31
|
+
* Expected markup:
|
|
32
|
+
* ```html
|
|
33
|
+
* <div data-slot="collapsible">
|
|
34
|
+
* <button data-slot="collapsible-trigger">Toggle</button>
|
|
35
|
+
* <div data-slot="collapsible-content">Content here</div>
|
|
36
|
+
* </div>
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
declare function createCollapsible(root: Element, options?: CollapsibleOptions): CollapsibleController;
|
|
40
|
+
/**
|
|
41
|
+
* Find and bind all collapsible components in a scope
|
|
42
|
+
* Returns array of controllers for programmatic access
|
|
43
|
+
*/
|
|
44
|
+
declare function create(scope?: ParentNode): CollapsibleController[];
|
|
45
|
+
//#endregion
|
|
46
|
+
export { createCollapsible as i, CollapsibleOptions as n, create as r, CollapsibleController as t };
|
package/dist/index2.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
//#region ../collapsible/src/index.d.ts
|
|
2
|
+
interface CollapsibleOptions {
|
|
3
|
+
/** Initial open state */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Use hidden="until-found" when closed so browser find-in-page can reveal content.
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
hiddenUntilFound?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Callback when open state changes.
|
|
12
|
+
* Note: Not called on initial render, only on subsequent state changes.
|
|
13
|
+
*/
|
|
14
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
}
|
|
16
|
+
interface CollapsibleController {
|
|
17
|
+
/** Open the collapsible */
|
|
18
|
+
open(): void;
|
|
19
|
+
/** Close the collapsible */
|
|
20
|
+
close(): void;
|
|
21
|
+
/** Toggle the collapsible */
|
|
22
|
+
toggle(): void;
|
|
23
|
+
/** Current open state */
|
|
24
|
+
readonly isOpen: boolean;
|
|
25
|
+
/** Cleanup all event listeners */
|
|
26
|
+
destroy(): void;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Create a collapsible controller for a root element
|
|
30
|
+
*
|
|
31
|
+
* Expected markup:
|
|
32
|
+
* ```html
|
|
33
|
+
* <div data-slot="collapsible">
|
|
34
|
+
* <button data-slot="collapsible-trigger">Toggle</button>
|
|
35
|
+
* <div data-slot="collapsible-content">Content here</div>
|
|
36
|
+
* </div>
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
declare function createCollapsible(root: Element, options?: CollapsibleOptions): CollapsibleController;
|
|
40
|
+
/**
|
|
41
|
+
* Find and bind all collapsible components in a scope
|
|
42
|
+
* Returns array of controllers for programmatic access
|
|
43
|
+
*/
|
|
44
|
+
declare function create(scope?: ParentNode): CollapsibleController[];
|
|
45
|
+
//#endregion
|
|
46
|
+
export { createCollapsible as i, CollapsibleOptions as n, create as r, CollapsibleController as t };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
//#region ../dialog/src/index.d.ts
|
|
2
|
+
interface DialogOptions {
|
|
3
|
+
/** Initial open state */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/** Callback when open state changes */
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
7
|
+
/** Close when clicking overlay */
|
|
8
|
+
closeOnClickOutside?: boolean;
|
|
9
|
+
/** Close when pressing Escape */
|
|
10
|
+
closeOnEscape?: boolean;
|
|
11
|
+
/** Lock body scroll when open */
|
|
12
|
+
lockScroll?: boolean;
|
|
13
|
+
/** Use alertdialog role for blocking confirmations */
|
|
14
|
+
alertDialog?: boolean;
|
|
15
|
+
}
|
|
16
|
+
interface DialogController {
|
|
17
|
+
/** Open the dialog */
|
|
18
|
+
open(): void;
|
|
19
|
+
/** Close the dialog */
|
|
20
|
+
close(): void;
|
|
21
|
+
/** Toggle the dialog */
|
|
22
|
+
toggle(): void;
|
|
23
|
+
/** Current open state */
|
|
24
|
+
readonly isOpen: boolean;
|
|
25
|
+
/** Cleanup all event listeners */
|
|
26
|
+
destroy(): void;
|
|
27
|
+
/** Internal: handle keydown for focus trap (used by global handler) */
|
|
28
|
+
_handleKeydown?(e: KeyboardEvent): void;
|
|
29
|
+
/** Internal: content element for focus trap */
|
|
30
|
+
_content?: HTMLElement;
|
|
31
|
+
/** Internal: overlay element for stack metadata */
|
|
32
|
+
_overlay?: HTMLElement;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Create a dialog controller for a root element
|
|
36
|
+
*
|
|
37
|
+
* Expected markup:
|
|
38
|
+
* ```html
|
|
39
|
+
* <div data-slot="dialog">
|
|
40
|
+
* <button data-slot="dialog-trigger">Open</button>
|
|
41
|
+
* <div data-slot="dialog-portal">
|
|
42
|
+
* <div data-slot="dialog-overlay"></div>
|
|
43
|
+
* <div data-slot="dialog-content">
|
|
44
|
+
* <h2 data-slot="dialog-title">Title</h2>
|
|
45
|
+
* <p data-slot="dialog-description">Description</p>
|
|
46
|
+
* <button data-slot="dialog-close">Close</button>
|
|
47
|
+
* </div>
|
|
48
|
+
* </div>
|
|
49
|
+
* </div>
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* Note: Overlay is required. The optional dialog-portal slot will be
|
|
53
|
+
* automatically moved to document.body to escape stacking context issues.
|
|
54
|
+
*/
|
|
55
|
+
declare function createDialog(root: Element, options?: DialogOptions): DialogController;
|
|
56
|
+
/**
|
|
57
|
+
* Find and bind all dialog components in a scope
|
|
58
|
+
* Returns array of controllers for programmatic access
|
|
59
|
+
*/
|
|
60
|
+
declare function create(scope?: ParentNode): DialogController[];
|
|
61
|
+
//#endregion
|
|
62
|
+
export { createDialog as i, DialogOptions as n, create as r, DialogController as t };
|
package/dist/index3.d.ts
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
//#region ../dialog/src/index.d.ts
|
|
2
|
+
interface DialogOptions {
|
|
3
|
+
/** Initial open state */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/** Callback when open state changes */
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
7
|
+
/** Close when clicking overlay */
|
|
8
|
+
closeOnClickOutside?: boolean;
|
|
9
|
+
/** Close when pressing Escape */
|
|
10
|
+
closeOnEscape?: boolean;
|
|
11
|
+
/** Lock body scroll when open */
|
|
12
|
+
lockScroll?: boolean;
|
|
13
|
+
/** Use alertdialog role for blocking confirmations */
|
|
14
|
+
alertDialog?: boolean;
|
|
15
|
+
}
|
|
16
|
+
interface DialogController {
|
|
17
|
+
/** Open the dialog */
|
|
18
|
+
open(): void;
|
|
19
|
+
/** Close the dialog */
|
|
20
|
+
close(): void;
|
|
21
|
+
/** Toggle the dialog */
|
|
22
|
+
toggle(): void;
|
|
23
|
+
/** Current open state */
|
|
24
|
+
readonly isOpen: boolean;
|
|
25
|
+
/** Cleanup all event listeners */
|
|
26
|
+
destroy(): void;
|
|
27
|
+
/** Internal: handle keydown for focus trap (used by global handler) */
|
|
28
|
+
_handleKeydown?(e: KeyboardEvent): void;
|
|
29
|
+
/** Internal: content element for focus trap */
|
|
30
|
+
_content?: HTMLElement;
|
|
31
|
+
/** Internal: overlay element for stack metadata */
|
|
32
|
+
_overlay?: HTMLElement;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Create a dialog controller for a root element
|
|
36
|
+
*
|
|
37
|
+
* Expected markup:
|
|
38
|
+
* ```html
|
|
39
|
+
* <div data-slot="dialog">
|
|
40
|
+
* <button data-slot="dialog-trigger">Open</button>
|
|
41
|
+
* <div data-slot="dialog-portal">
|
|
42
|
+
* <div data-slot="dialog-overlay"></div>
|
|
43
|
+
* <div data-slot="dialog-content">
|
|
44
|
+
* <h2 data-slot="dialog-title">Title</h2>
|
|
45
|
+
* <p data-slot="dialog-description">Description</p>
|
|
46
|
+
* <button data-slot="dialog-close">Close</button>
|
|
47
|
+
* </div>
|
|
48
|
+
* </div>
|
|
49
|
+
* </div>
|
|
50
|
+
* ```
|
|
51
|
+
*
|
|
52
|
+
* Note: Overlay is required. The optional dialog-portal slot will be
|
|
53
|
+
* automatically moved to document.body to escape stacking context issues.
|
|
54
|
+
*/
|
|
55
|
+
declare function createDialog(root: Element, options?: DialogOptions): DialogController;
|
|
56
|
+
/**
|
|
57
|
+
* Find and bind all dialog components in a scope
|
|
58
|
+
* Returns array of controllers for programmatic access
|
|
59
|
+
*/
|
|
60
|
+
declare function create(scope?: ParentNode): DialogController[];
|
|
61
|
+
//#endregion
|
|
62
|
+
export { createDialog as i, DialogOptions as n, create as r, DialogController as t };
|