@primitiv-ui/web 0.1.55 → 0.1.57
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 +70 -3
- package/dist/cdn/chunks/chunk-P2K4DPA4.js +1 -0
- package/dist/cdn/dropdown.js +1 -0
- package/dist/cdn/popover.js +1 -1
- package/dist/cdn/tooltip.js +1 -0
- package/dist/custom-elements.json +1647 -381
- package/dist/define/dropdown.d.ts +1 -0
- package/dist/define/dropdown.js +12 -0
- package/dist/define/index.d.ts +2 -0
- package/dist/define/index.js +2 -0
- package/dist/define/tooltip.d.ts +1 -0
- package/dist/define/tooltip.js +11 -0
- package/dist/dropdown/DropdownController.d.ts +63 -0
- package/dist/dropdown/DropdownController.js +130 -0
- package/dist/dropdown/DropdownSubController.d.ts +34 -0
- package/dist/dropdown/DropdownSubController.js +78 -0
- package/dist/dropdown/elements.d.ts +174 -0
- package/dist/dropdown/elements.js +501 -0
- package/dist/dropdown/index.d.ts +3 -0
- package/dist/dropdown/index.js +3 -0
- package/dist/frameworks/events.d.ts +22 -0
- package/dist/frameworks/react.d.ts +62 -2
- package/dist/frameworks/svelte.d.ts +59 -1
- package/dist/frameworks/vue.d.ts +64 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/popover/PopoverController.d.ts +6 -0
- package/dist/popover/PopoverController.js +41 -1
- package/dist/primitiv-web.js +1 -1
- package/dist/tags.d.ts +21 -0
- package/dist/tooltip/TooltipController.d.ts +74 -0
- package/dist/tooltip/TooltipController.js +149 -0
- package/dist/tooltip/TooltipGroup.d.ts +23 -0
- package/dist/tooltip/TooltipGroup.js +44 -0
- package/dist/tooltip/elements.d.ts +83 -0
- package/dist/tooltip/elements.js +223 -0
- package/dist/tooltip/index.d.ts +3 -0
- package/dist/tooltip/index.js +3 -0
- package/package.json +18 -2
|
@@ -19,10 +19,12 @@
|
|
|
19
19
|
import type { HTMLAttributes } from "svelte/elements";
|
|
20
20
|
import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
|
|
21
21
|
import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
|
|
22
|
+
import type { PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement } from "../dropdown/elements.js";
|
|
22
23
|
import type { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "../modal/elements.js";
|
|
23
24
|
import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "../popover/elements.js";
|
|
24
25
|
import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
|
|
25
|
-
import type {
|
|
26
|
+
import type { PrimitivTooltipArrowElement, PrimitivTooltipContentElement, PrimitivTooltipElement, PrimitivTooltipProviderElement, PrimitivTooltipTriggerElement } from "../tooltip/elements.js";
|
|
27
|
+
import type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
|
|
26
28
|
/** Svelte's own attributes and events for an element. */
|
|
27
29
|
type Attributes<E extends HTMLElement> = HTMLAttributes<E>;
|
|
28
30
|
declare module "svelte/elements" {
|
|
@@ -56,6 +58,49 @@ declare module "svelte/elements" {
|
|
|
56
58
|
"onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
|
|
57
59
|
};
|
|
58
60
|
"primitiv-collapsible-trigger-icon": Attributes<PrimitivCollapsibleTriggerIconElement>;
|
|
61
|
+
"primitiv-dropdown": Attributes<PrimitivDropdownElement> & {
|
|
62
|
+
open?: boolean;
|
|
63
|
+
"onprimitiv-dropdown-change"?: (event: PrimitivDropdownChangeEvent) => void;
|
|
64
|
+
};
|
|
65
|
+
"primitiv-dropdown-trigger": Attributes<PrimitivDropdownTriggerElement>;
|
|
66
|
+
"primitiv-dropdown-content": Attributes<PrimitivDropdownContentElement> & {
|
|
67
|
+
popover?: "auto" | "manual" | "";
|
|
68
|
+
};
|
|
69
|
+
"primitiv-dropdown-item": Attributes<PrimitivDropdownItemElement> & {
|
|
70
|
+
disabled?: boolean;
|
|
71
|
+
"onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
|
|
72
|
+
};
|
|
73
|
+
"primitiv-dropdown-checkbox-item": Attributes<PrimitivDropdownCheckboxItemElement> & {
|
|
74
|
+
checked?: boolean | "indeterminate";
|
|
75
|
+
disabled?: boolean;
|
|
76
|
+
"onprimitiv-dropdown-checked-change"?: (event: PrimitivDropdownCheckedChangeEvent) => void;
|
|
77
|
+
"onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
|
|
78
|
+
};
|
|
79
|
+
"primitiv-dropdown-radio-group": Attributes<PrimitivDropdownRadioGroupElement> & {
|
|
80
|
+
value?: string;
|
|
81
|
+
"onprimitiv-dropdown-value-change"?: (event: PrimitivDropdownValueChangeEvent) => void;
|
|
82
|
+
};
|
|
83
|
+
"primitiv-dropdown-radio-item": Attributes<PrimitivDropdownRadioItemElement> & {
|
|
84
|
+
value: string;
|
|
85
|
+
disabled?: boolean;
|
|
86
|
+
"onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
|
|
87
|
+
};
|
|
88
|
+
"primitiv-dropdown-item-indicator": Attributes<PrimitivDropdownItemIndicatorElement> & {
|
|
89
|
+
"force-mount"?: boolean;
|
|
90
|
+
};
|
|
91
|
+
"primitiv-dropdown-group": Attributes<PrimitivDropdownGroupElement>;
|
|
92
|
+
"primitiv-dropdown-label": Attributes<PrimitivDropdownLabelElement>;
|
|
93
|
+
"primitiv-dropdown-separator": Attributes<PrimitivDropdownSeparatorElement>;
|
|
94
|
+
"primitiv-dropdown-sub": Attributes<PrimitivDropdownSubElement> & {
|
|
95
|
+
open?: boolean;
|
|
96
|
+
"onprimitiv-dropdown-sub-change"?: (event: PrimitivDropdownSubChangeEvent) => void;
|
|
97
|
+
};
|
|
98
|
+
"primitiv-dropdown-sub-trigger": Attributes<PrimitivDropdownSubTriggerElement> & {
|
|
99
|
+
disabled?: boolean;
|
|
100
|
+
};
|
|
101
|
+
"primitiv-dropdown-sub-content": Attributes<PrimitivDropdownSubContentElement> & {
|
|
102
|
+
popover?: "auto" | "manual" | "";
|
|
103
|
+
};
|
|
59
104
|
"primitiv-modal": Attributes<PrimitivModalElement> & {
|
|
60
105
|
open?: boolean;
|
|
61
106
|
"onprimitiv-modal-change"?: (event: PrimitivModalChangeEvent) => void;
|
|
@@ -92,6 +137,19 @@ declare module "svelte/elements" {
|
|
|
92
137
|
value: string;
|
|
93
138
|
"onprimitiv-tabs-show"?: (event: CustomEvent) => void;
|
|
94
139
|
};
|
|
140
|
+
"primitiv-tooltip": Attributes<PrimitivTooltipElement> & {
|
|
141
|
+
open?: boolean;
|
|
142
|
+
"delay-duration"?: number | string;
|
|
143
|
+
"disable-hoverable-content"?: boolean;
|
|
144
|
+
"onprimitiv-tooltip-change"?: (event: PrimitivTooltipChangeEvent) => void;
|
|
145
|
+
};
|
|
146
|
+
"primitiv-tooltip-provider": Attributes<PrimitivTooltipProviderElement> & {
|
|
147
|
+
"delay-duration"?: number | string;
|
|
148
|
+
"skip-delay-duration"?: number | string;
|
|
149
|
+
};
|
|
150
|
+
"primitiv-tooltip-trigger": Attributes<PrimitivTooltipTriggerElement>;
|
|
151
|
+
"primitiv-tooltip-content": Attributes<PrimitivTooltipContentElement>;
|
|
152
|
+
"primitiv-tooltip-arrow": Attributes<PrimitivTooltipArrowElement>;
|
|
95
153
|
}
|
|
96
154
|
}
|
|
97
155
|
export {};
|
package/dist/frameworks/vue.d.ts
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* JSR does not allow a published module to do.
|
|
20
20
|
*/
|
|
21
21
|
import type { DefineComponent, EmitsOptions } from "vue";
|
|
22
|
-
import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
|
|
22
|
+
import type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
|
|
23
23
|
/** A tag as Vue's template checker sees it: its props, and the events it emits. */
|
|
24
24
|
type Tag<Props, Events extends EmitsOptions = Record<never, never>> = DefineComponent<Props, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Events>;
|
|
25
25
|
declare module "vue" {
|
|
@@ -57,6 +57,55 @@ declare module "vue" {
|
|
|
57
57
|
"primitiv-collapsible-show": (event: CustomEvent) => void;
|
|
58
58
|
}>;
|
|
59
59
|
"primitiv-collapsible-trigger-icon": Tag<Record<never, never>>;
|
|
60
|
+
"primitiv-dropdown": Tag<{
|
|
61
|
+
open?: boolean | "";
|
|
62
|
+
}, {
|
|
63
|
+
"primitiv-dropdown-change": (event: PrimitivDropdownChangeEvent) => void;
|
|
64
|
+
}>;
|
|
65
|
+
"primitiv-dropdown-trigger": Tag<Record<never, never>>;
|
|
66
|
+
"primitiv-dropdown-content": Tag<{
|
|
67
|
+
popover?: "auto" | "manual" | "";
|
|
68
|
+
}>;
|
|
69
|
+
"primitiv-dropdown-item": Tag<{
|
|
70
|
+
disabled?: boolean | "";
|
|
71
|
+
}, {
|
|
72
|
+
"primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
|
|
73
|
+
}>;
|
|
74
|
+
"primitiv-dropdown-checkbox-item": Tag<{
|
|
75
|
+
checked?: boolean | "indeterminate";
|
|
76
|
+
disabled?: boolean | "";
|
|
77
|
+
}, {
|
|
78
|
+
"primitiv-dropdown-checked-change": (event: PrimitivDropdownCheckedChangeEvent) => void;
|
|
79
|
+
"primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
|
|
80
|
+
}>;
|
|
81
|
+
"primitiv-dropdown-radio-group": Tag<{
|
|
82
|
+
value?: string;
|
|
83
|
+
}, {
|
|
84
|
+
"primitiv-dropdown-value-change": (event: PrimitivDropdownValueChangeEvent) => void;
|
|
85
|
+
}>;
|
|
86
|
+
"primitiv-dropdown-radio-item": Tag<{
|
|
87
|
+
value: string;
|
|
88
|
+
disabled?: boolean | "";
|
|
89
|
+
}, {
|
|
90
|
+
"primitiv-dropdown-select": (event: PrimitivDropdownSelectEvent) => void;
|
|
91
|
+
}>;
|
|
92
|
+
"primitiv-dropdown-item-indicator": Tag<{
|
|
93
|
+
forceMount?: boolean | "";
|
|
94
|
+
}>;
|
|
95
|
+
"primitiv-dropdown-group": Tag<Record<never, never>>;
|
|
96
|
+
"primitiv-dropdown-label": Tag<Record<never, never>>;
|
|
97
|
+
"primitiv-dropdown-separator": Tag<Record<never, never>>;
|
|
98
|
+
"primitiv-dropdown-sub": Tag<{
|
|
99
|
+
open?: boolean | "";
|
|
100
|
+
}, {
|
|
101
|
+
"primitiv-dropdown-sub-change": (event: PrimitivDropdownSubChangeEvent) => void;
|
|
102
|
+
}>;
|
|
103
|
+
"primitiv-dropdown-sub-trigger": Tag<{
|
|
104
|
+
disabled?: boolean | "";
|
|
105
|
+
}>;
|
|
106
|
+
"primitiv-dropdown-sub-content": Tag<{
|
|
107
|
+
popover?: "auto" | "manual" | "";
|
|
108
|
+
}>;
|
|
60
109
|
"primitiv-modal": Tag<{
|
|
61
110
|
open?: boolean | "";
|
|
62
111
|
}, {
|
|
@@ -97,6 +146,20 @@ declare module "vue" {
|
|
|
97
146
|
}, {
|
|
98
147
|
"primitiv-tabs-show": (event: CustomEvent) => void;
|
|
99
148
|
}>;
|
|
149
|
+
"primitiv-tooltip": Tag<{
|
|
150
|
+
open?: boolean | "";
|
|
151
|
+
delayDuration?: number | string;
|
|
152
|
+
disableHoverableContent?: boolean | "";
|
|
153
|
+
}, {
|
|
154
|
+
"primitiv-tooltip-change": (event: PrimitivTooltipChangeEvent) => void;
|
|
155
|
+
}>;
|
|
156
|
+
"primitiv-tooltip-provider": Tag<{
|
|
157
|
+
delayDuration?: number | string;
|
|
158
|
+
skipDelayDuration?: number | string;
|
|
159
|
+
}>;
|
|
160
|
+
"primitiv-tooltip-trigger": Tag<Record<never, never>>;
|
|
161
|
+
"primitiv-tooltip-content": Tag<Record<never, never>>;
|
|
162
|
+
"primitiv-tooltip-arrow": Tag<Record<never, never>>;
|
|
100
163
|
}
|
|
101
164
|
}
|
|
102
165
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export * from "./accordion/index.js";
|
|
7
7
|
export * from "./collapsible/index.js";
|
|
8
|
+
export * from "./dropdown/index.js";
|
|
8
9
|
export * from "./modal/index.js";
|
|
9
10
|
export * from "./popover/index.js";
|
|
10
11
|
export * from "./tabs/index.js";
|
|
12
|
+
export * from "./tooltip/index.js";
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export * from "./accordion/index.js";
|
|
7
7
|
export * from "./collapsible/index.js";
|
|
8
|
+
export * from "./dropdown/index.js";
|
|
8
9
|
export * from "./modal/index.js";
|
|
9
10
|
export * from "./popover/index.js";
|
|
10
11
|
export * from "./tabs/index.js";
|
|
12
|
+
export * from "./tooltip/index.js";
|
|
@@ -34,6 +34,12 @@ export type PopoverControllerHost = {
|
|
|
34
34
|
* inside it closes it and hands focus back to the trigger, and where the
|
|
35
35
|
* browser has no Popover API a press outside closes it.
|
|
36
36
|
*
|
|
37
|
+
* - **Placement** — while it shows, the panel carries `data-side` (the side of
|
|
38
|
+
* its anchor it landed on, after any `position-try-fallbacks` flip) and
|
|
39
|
+
* `data-align` (the third of its facing edge the anchor's centre is in),
|
|
40
|
+
* measured as it opens and again on every scroll and resize, so a stylesheet
|
|
41
|
+
* can point an arrow at the anchor whichever way it flipped.
|
|
42
|
+
*
|
|
37
43
|
* Opening from the trigger is the host's, as a plain click.
|
|
38
44
|
*/
|
|
39
45
|
export declare class PopoverController {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { FOCUSABLE_SELECTOR, popoverKeydown, popoverPressDismisses } from "@primitiv-ui/core";
|
|
1
|
+
import { FOCUSABLE_SELECTOR, panelPlacement, popoverKeydown, popoverPressDismisses } from "@primitiv-ui/core";
|
|
2
|
+
import { write } from "../internal/element.js";
|
|
2
3
|
/**
|
|
3
4
|
* The DOM behaviour of a popover, over a `popover="auto"` panel: the browser
|
|
4
5
|
* owns the top layer and light dismiss, and this adds the rest of the WAI-ARIA
|
|
@@ -12,6 +13,12 @@ import { FOCUSABLE_SELECTOR, popoverKeydown, popoverPressDismisses } from "@prim
|
|
|
12
13
|
* inside it closes it and hands focus back to the trigger, and where the
|
|
13
14
|
* browser has no Popover API a press outside closes it.
|
|
14
15
|
*
|
|
16
|
+
* - **Placement** — while it shows, the panel carries `data-side` (the side of
|
|
17
|
+
* its anchor it landed on, after any `position-try-fallbacks` flip) and
|
|
18
|
+
* `data-align` (the third of its facing edge the anchor's centre is in),
|
|
19
|
+
* measured as it opens and again on every scroll and resize, so a stylesheet
|
|
20
|
+
* can point an arrow at the anchor whichever way it flipped.
|
|
21
|
+
*
|
|
15
22
|
* Opening from the trigger is the host's, as a plain click.
|
|
16
23
|
*/
|
|
17
24
|
export class PopoverController {
|
|
@@ -20,6 +27,8 @@ export class PopoverController {
|
|
|
20
27
|
#connection = null;
|
|
21
28
|
/** Whether this controller showed the panel and has not hidden it since. */
|
|
22
29
|
#shown = false;
|
|
30
|
+
/** The scroll and resize listeners that re-measure the placement, while it shows. */
|
|
31
|
+
#following = null;
|
|
23
32
|
constructor(content, host) {
|
|
24
33
|
this.#content = content;
|
|
25
34
|
this.#host = host;
|
|
@@ -46,6 +55,7 @@ export class PopoverController {
|
|
|
46
55
|
this.#connection?.abort();
|
|
47
56
|
this.#connection = null;
|
|
48
57
|
this.#shown = false;
|
|
58
|
+
this.#unfollow();
|
|
49
59
|
}
|
|
50
60
|
/** Show or hide the panel to match the host's state. */
|
|
51
61
|
sync() {
|
|
@@ -60,9 +70,11 @@ export class PopoverController {
|
|
|
60
70
|
// Move focus into the panel (WAI-ARIA non-modal dialog): the first
|
|
61
71
|
// focusable, or the panel itself, which carries tabindex="-1".
|
|
62
72
|
(this.#content.querySelector(FOCUSABLE_SELECTOR) ?? this.#content).focus();
|
|
73
|
+
this.#follow();
|
|
63
74
|
}
|
|
64
75
|
else if (!open && this.#shown) {
|
|
65
76
|
this.#shown = false;
|
|
77
|
+
this.#unfollow();
|
|
66
78
|
try {
|
|
67
79
|
this.#content.hidePopover();
|
|
68
80
|
}
|
|
@@ -71,10 +83,38 @@ export class PopoverController {
|
|
|
71
83
|
}
|
|
72
84
|
}
|
|
73
85
|
}
|
|
86
|
+
/** Measure the placement now, and again on every scroll and resize until it hides. */
|
|
87
|
+
#follow() {
|
|
88
|
+
this.#following = new AbortController();
|
|
89
|
+
const options = {
|
|
90
|
+
// A scroll inside an overflow pane does not bubble to the window.
|
|
91
|
+
capture: true,
|
|
92
|
+
// Stryker disable next-line BooleanLiteral: equivalent — passive only spares the scroll from waiting on the listener.
|
|
93
|
+
passive: true,
|
|
94
|
+
signal: this.#following.signal,
|
|
95
|
+
};
|
|
96
|
+
window.addEventListener("scroll", () => this.#place(), options);
|
|
97
|
+
window.addEventListener("resize", () => this.#place(), options);
|
|
98
|
+
this.#place();
|
|
99
|
+
}
|
|
100
|
+
#unfollow() {
|
|
101
|
+
this.#following?.abort();
|
|
102
|
+
this.#following = null;
|
|
103
|
+
}
|
|
104
|
+
/** Mark the side and alignment the panel landed on, against the element it is anchored to. */
|
|
105
|
+
#place() {
|
|
106
|
+
const anchor = this.#host.source?.() ?? this.#host.trigger();
|
|
107
|
+
if (!anchor)
|
|
108
|
+
return;
|
|
109
|
+
const { side, align } = panelPlacement(this.#content.getBoundingClientRect(), anchor.getBoundingClientRect());
|
|
110
|
+
write(this.#content, "data-side", side);
|
|
111
|
+
write(this.#content, "data-align", align);
|
|
112
|
+
}
|
|
74
113
|
#toggle(event) {
|
|
75
114
|
if (event.newState !== "closed")
|
|
76
115
|
return;
|
|
77
116
|
this.#shown = false;
|
|
117
|
+
this.#unfollow();
|
|
78
118
|
this.#host.change(false);
|
|
79
119
|
}
|
|
80
120
|
#keydown(event) {
|
package/dist/primitiv-web.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function v(e,t,o){return`${e}-${t}-${o}`}function H({orientation:e,dir:t,homeEnd:o=!1,activate:n=!1}){let s={};if(e==="horizontal"||e==="both"){let l=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";s[l]="next",s[d]="prev"}return(e==="vertical"||e==="both")&&(s.ArrowDown="next",s.ArrowUp="prev"),o&&(s.Home="first",s.End="last"),n&&(s.Enter="activate",s[" "]="activate"),s}function L({action:e,navigable:t,currentKey:o}){let n=t.length;if(n===0)return null;switch(e){case"activate":return{target:o};case"first":return{target:t[0]};case"last":return{target:t[n-1]};case void 0:return null;case"next":case"prev":{let s=t.indexOf(o);if(s===-1)return null;let l=e==="next"?1:n-1;return{target:t[(s+l)%n]}}}}function it(e){return e.active??e.values[0]}function R(e,t){return e.disabled.has(t)||e.active===t?null:t}function rt(e,t,o){let n=H({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o],s=L({action:n,navigable:e.values,currentKey:t});if(!s)return null;let l=s.target,d=e.activationMode==="automatic"||n==="activate";return{focus:l,activate:d?R(e,l):null}}function st(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(o=>o!==t):e.multiple?[...e.expanded,t]:[t]}function lt(e,t,o){let n=H({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o];if(n==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let s=e.values.filter(d=>!e.disabled.has(d)),l=L({action:n,navigable:s,currentKey:t});return l&&{focus:l.target,toggle:null}}function K(e){return e.disabled?null:!e.open}function at(e,t){if(t!=="Enter"&&t!==" ")return null;let o=K(e);return o===null?null:{open:o}}var E=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");function ct({key:e,shiftKey:t,active:o,count:n}){if(e!=="Tab")return null;if(n===0)return{focus:null};let s=n-1;return!t&&o===s?{focus:0}:t&&o===0?{focus:s}:null}function dt(e,t){return t.x<e.left||t.x>e.right||t.y<e.top||t.y>e.bottom}function pt(e){return e==="Escape"?{open:!1}:null}function ut({open:e,nativeLightDismiss:t,inTrigger:o,inPopover:n}){return e&&!t&&!o&&!n}var f=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,o,n={}){this.#e.set(o,{value:t,disabled:n.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:o,element:n,disabled:s}of t)this.registerTrigger(o,n,{disabled:s})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("click",o=>this.#n(o,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",o=>this.#n(o,this.onTriggerKeydown),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}ordered(){return[...this.#e].sort(([t],[o])=>t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let o of this.#e.values())o.disabled&&t.add(o.value);return t}#n(t,o){for(let[n,s]of this.#e)if(n.contains(t.target))return o.call(this,s,t)}};var x=class extends f{#t;constructor(t,o){super(t),this.#t=o}#e(t){let{expanded:o,multiple:n}=this.#t.state(),s=st({disabled:this.disabled(),expanded:o,multiple:n},t);s!==null&&this.#t.change(s)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,o){let{expanded:n,multiple:s,orientation:l,dir:d}=this.#t.state(),p=this.ordered(),a=p.map(([,c])=>c.value),i=lt({values:a,disabled:this.disabled(),expanded:n,multiple:s,orientation:l,dir:d},t.value,o.key);i&&(o.preventDefault(),i.toggle!==null&&this.#e(i.toggle),i.focus!==null&&p[a.indexOf(i.focus)][0].focus())}};var u=globalThis.HTMLElement??class{};function r(e,t,o){e.getAttribute(t)!==o&&(o===null?e.removeAttribute(t):e.setAttribute(t,o))}var Mt=new WeakSet;function g(e,t){Mt.has(e)||(Mt.add(e),console.error(t,e))}function b(e,t){if(e)for(let[o,n]of t)e.get(o)||e.define(o,n)}function y(e,t,o){return[...e.querySelectorAll(t)].filter(n=>n.closest(o)===e)}var Ft=0,m=class extends u{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++Ft}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return y(this,t,this.localName)}announce(t,o){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}))}};var Ut="primitiv-accordion",T="primitiv-accordion-item",ht="primitiv-accordion-trigger",Ot="primitiv-accordion-content",wt="primitiv-accordion-trigger-icon";function _t(e){return(e??"").split(/\s+/).filter(Boolean)}function qt(e){return e.childElementCount===1?e.firstElementChild:(g(e,`<${ht}> needs exactly one element child (a <button>) to decorate.`),null)}var P=class extends m{#t=new Set;#e=!1;controller=new x(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return _t(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#o(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#n(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#n(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),o=this.rootId();r(this,"data-orientation",this.#n());let n=[];for(let s of this.parts(T)){let l=s.getAttribute("value");if(l===null){g(s,`<${T}> needs a value, which pairs it with the root's value.`);continue}let d=t.has(l),p=d?"open":"closed",[a]=y(s,ht,T),[i]=y(s,Ot,T),c=a?qt(a):null;if(c){let h=a.hasAttribute("disabled");n.push({value:l,element:c,disabled:h}),c.id||(c.id=v(o,"heading",l)),r(c,"aria-expanded",String(d)),r(c,"aria-disabled",String(h)),r(c,"data-disabled",String(h)),r(c,"data-state",p)}if(i){i.id||(i.id=v(o,"panel",l));let h=i.hasAttribute("force-mount");i.hasAttribute("role")||i.setAttribute("role","region"),r(i,"aria-labelledby",c?c.id:null),r(i,"hidden",d||h?null:""),r(i,"aria-hidden",d?null:"true"),r(i,"data-state",p),this.#e&&d&&!this.#t.has(l)&&i.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}c&&r(c,"aria-controls",i?i.id:null);for(let h of y(s,wt,T))r(h,"aria-hidden","true"),r(h,"data-state",p)}this.controller.setTriggers(n),this.#t=t,this.#e=!0}},S=class extends u{},k=class extends u{},D=class extends u{},I=class extends u{};function gt(e=globalThis.customElements){b(e,[[Ut,P],[T,S],[ht,k],[Ot,D],[wt,I]])}var C=class extends f{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=K({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let n=at({open:this.#t.state().open,disabled:t.disabled},o.key);n&&(o.preventDefault(),this.#t.change(n.open))}};var jt="primitiv-collapsible",mt="primitiv-collapsible-trigger",Ht="primitiv-collapsible-content",Lt="primitiv-collapsible-trigger-icon",Wt="--primitiv-collapsible-collapsed-height";function Vt(e){return e.childElementCount===1?e.firstElementChild:(g(e,`<${mt}> needs exactly one element child (a <button>) to decorate.`),null)}function Xt(e){return Number.isNaN(Number(e))?e:`${e}px`}function Yt(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var N=class extends m{#t;controller=new C(this,this.#e());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#e(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,o=t?"open":"closed",n=this.hasAttribute("disabled"),s=this.rootId();r(this,"data-state",o),r(this,"data-disabled",String(n));let[l]=this.parts(mt),[d]=this.parts(Ht),p=l?Vt(l):null;if(p&&(p.id||(p.id=`${s}-trigger`),r(p,"aria-expanded",String(t)),r(p,"aria-disabled",n?"true":null),r(p,"data-disabled",String(n)),r(p,"data-state",o)),d){d.id||(d.id=`${s}-content`);let a=d.getAttribute("collapsed-height"),i=a!==null,c=i||d.hasAttribute("force-mount");r(d,"hidden",t||c?null:""),r(d,"aria-hidden",t||i?null:"true"),r(d,"data-state",o),r(d,"data-disabled",String(n)),r(d,"data-clamped",i?"true":null),Yt(d,Wt,i?Xt(a):""),t&&this.#t===!1&&d.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}p&&r(p,"aria-controls",d?d.id:null);for(let a of this.parts(Lt))r(a,"aria-hidden","true"),r(a,"data-state",o);this.controller.setTriggers(p?[{value:"trigger",element:p,disabled:n}]:[]),this.#t=t}},$=class extends u{},B=class extends u{},G=class extends u{};function bt(e=globalThis.customElements){b(e,[[jt,N],[mt,$],[Ht,B],[Lt,G]])}var A=class{#t;#e;#o=null;constructor(t,o){this.#t=t,this.#e=o}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o,o=this.#t;o.addEventListener("close",()=>this.#e.change(!1),{signal:t}),o.addEventListener("cancel",n=>this.#n(n),{signal:t}),o.addEventListener("pointerdown",n=>this.#i(n),{signal:t}),o.addEventListener("keydown",n=>this.#r(n),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}sync(){let{open:t}=this.#e.state();t&&!this.#t.open?this.#t.showModal():!t&&this.#t.open&&this.#t.close()}#n(t){this.#e.escapeKeyDown?.(t);let o=t.defaultPrevented;t.preventDefault(),o||this.#e.change(!1)}#i(t){let o={x:t.clientX,y:t.clientY};dt(this.#t.getBoundingClientRect(),o)&&(this.#e.pointerDownOutside?.(t),t.defaultPrevented||this.#e.change(!1))}#r(t){if(!this.#t.open)return;let o=[...this.#t.querySelectorAll(E)],n=ct({key:t.key,shiftKey:t.shiftKey,active:o.indexOf(document.activeElement),count:o.length});n&&(t.preventDefault(),n.focus!==null&&o[n.focus].focus())}};var Jt="primitiv-modal",Rt="primitiv-modal-trigger",vt="primitiv-modal-content",Kt="primitiv-modal-title",Pt="primitiv-modal-description",St="primitiv-modal-close";function ft(e,t){return e.childElementCount===1?e.firstElementChild:(g(e,`<${e.localName}> needs exactly one element child (${t}) to decorate.`),null)}function Qt(e){let t=e.firstElementChild;return e.childElementCount===1&&t instanceof HTMLDialogElement?t:(g(e,`<${vt}> needs exactly one <dialog> child to decorate.`),null)}var z=class extends m{#t=null;#e=null;#o=[];#n=[];#i=null;controller={connect:()=>this.#l(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){return{state:()=>({open:this.open}),change:t=>this.#s(t)}}#s(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#e?.sync())}#l(){this.#i=new AbortController,this.addEventListener("click",t=>this.#d(t),{signal:this.#i.signal}),this.#e?.connect()}#c(){this.#i.abort(),this.#i=null,this.#e?.disconnect(),this.#t&&r(this.#t,"open",null)}#d(t){let o=t.target;this.#o.some(n=>n.contains(o))?this.#s(!0):this.#n.some(n=>n.contains(o))&&this.#s(!1)}#p(t){t!==this.#t&&(this.#e?.disconnect(),t&&r(t,"open",null),this.#t=t,this.#e=t?new A(t,this.#r()):null,this.#e?.connect())}reconcile(){let t=this.open,o=t?"open":"closed",n=this.rootId();r(this,"data-state",o);let[s]=this.parts(vt),l=s?Qt(s):null,[d]=this.parts(Kt),p=d?ft(d,"a heading"):null,[a]=this.parts(Pt),i=a?ft(a,"a <p>"):null;p&&!p.id&&(p.id=`${n}-title`),i&&!i.id&&(i.id=`${n}-description`),l&&(l.id||(l.id=`${n}-content`),r(l,"data-state",o),r(l,"aria-labelledby",p?p.id:null),r(l,"aria-describedby",i?i.id:null)),this.#o=this.#a(Rt);for(let c of this.#o)r(c,"aria-haspopup","dialog"),r(c,"aria-expanded",String(t)),r(c,"aria-controls",l?l.id:null);this.#n=this.#a(St),this.#p(l),this.#e?.sync()}#a(t){return this.parts(t).flatMap(o=>ft(o,"a <button>")??[])}},F=class extends u{},U=class extends u{},_=class extends u{},q=class extends u{},j=class extends u{};function yt(e=globalThis.customElements){b(e,[[Jt,z],[Rt,F],[vt,U],[Kt,_],[Pt,q],[St,j]])}var M=class{#t;#e;#o=null;#n=!1;constructor(t,o){this.#t=t,this.#e=o}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",o=>this.#i(o),{signal:t}),this.#t.addEventListener("keydown",o=>this.#r(o),{signal:t}),document.addEventListener("click",o=>this.#s(o),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let o=this.#e.source?.();o?this.#t.showPopover({source:o}):this.#t.showPopover(),(this.#t.querySelector(E)??this.#t).focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#i(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#r(t){t.defaultPrevented||!pt(t.key)||(t.preventDefault(),this.#e.change(!1),this.#e.trigger()?.focus())}#s(t){let o=t.target;ut({open:this.#e.state().open,nativeLightDismiss:"popover"in HTMLElement.prototype,inTrigger:this.#e.trigger()?.contains(o)??!1,inPopover:o.closest("[popover]")!==null})&&this.#e.change(!1)}};var Zt="primitiv-popover",kt="primitiv-popover-trigger",Dt="primitiv-popover-anchor",It="primitiv-popover-content",Nt="primitiv-popover-title",$t="primitiv-popover-description",Bt="primitiv-popover-close";function O(e,t){return e.childElementCount===1?e.firstElementChild:(g(e,`<${e.localName}> needs exactly one element child (${t}) to decorate.`),null)}var W=class extends m{#t=null;#e=null;#o=null;#n=null;#i=[];#r=null;controller={connect:()=>this.#c(),disconnect:()=>this.#d()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#s(){return{state:()=>({open:this.open}),change:t=>this.#l(t),trigger:()=>this.#o,source:()=>this.#n??this.#o}}#l(t){t!==this.open&&(this.announce("primitiv-popover-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#c(){this.#r=new AbortController,this.addEventListener("click",t=>this.#p(t),{signal:this.#r.signal}),this.#e?.connect()}#d(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#p(t){let o=t.target;this.#o?.contains(o)?this.#l(!this.open):this.#i.some(n=>n.contains(o))&&this.#l(!1)}#a(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new M(t,this.#s()):null,this.#e?.connect())}reconcile(){let t=this.open,o=t?"open":"closed",n=this.rootId();r(this,"data-state",o);let[s=null]=this.parts(It),[l]=this.parts(kt),[d]=this.parts(Dt),[p]=this.parts(Nt),[a]=this.parts($t);this.#o=l?O(l,"a <button>"):null,this.#n=d?O(d,"the element to anchor to"):null;let i=p?O(p,"a heading"):null,c=a?O(a,"a <p>"):null;i&&!i.id&&(i.id=`${n}-title`),c&&!c.id&&(c.id=`${n}-description`),s&&(s.id||(s.id=`${n}-content`),r(s,"role","dialog"),s.hasAttribute("popover")||s.setAttribute("popover","auto"),r(s,"tabindex","-1"),r(s,"data-state",o),r(s,"aria-labelledby",i?i.id:null),r(s,"aria-describedby",c?c.id:null)),this.#o&&(r(this.#o,"aria-haspopup","dialog"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",s?s.id:null)),this.#i=this.parts(Bt).flatMap(h=>O(h,"a <button>")??[]),this.#a(s),this.#e?.sync()}},V=class extends u{},X=class extends u{},Y=class extends u{},J=class extends u{},Q=class extends u{},Z=class extends u{};function Tt(e=globalThis.customElements){b(e,[[Zt,W],[kt,V],[Dt,X],[It,Y],[Nt,J],[$t,Q],[Bt,Z]])}var w=class extends f{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let{active:o}=this.#t.state(),n=R({disabled:this.disabled(),active:o},t.value);if(n!==null){let s=this.ordered().map(([,l])=>l.value);this.#t.activate(n,s.indexOf(n))}}onTriggerKeydown(t,o){let{active:n,orientation:s,dir:l,activationMode:d}=this.#t.state(),p=this.ordered(),a=p.map(([,c])=>c.value),i=rt({values:a,disabled:this.disabled(),active:n,orientation:s,dir:l,activationMode:d},t.value,o.key);i&&(o.preventDefault(),i.activate!==null&&this.#t.activate(i.activate,a.indexOf(i.activate)),p[a.indexOf(i.focus)][0].focus())}};var te="primitiv-tabs",Gt="primitiv-tabs-list",Et="primitiv-tabs-trigger",zt="primitiv-tabs-content";function ee(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(g(e,`<${Et}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var tt=class extends m{#t;#e=!1;controller=new w(this,this.#o());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#o(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(t,o)=>{this.announce("primitiv-tabs-change",{value:t,index:o})&&(this.value=t)}}}#n(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#i(),o=this.value,n=this.rootId();r(this,"data-orientation",t);for(let a of this.parts(Gt)){r(a,"role","tablist"),r(a,"aria-orientation",t),r(a,"data-orientation",t);let i=a.getAttribute("label");i!==null&&r(a,"aria-label",i)}let s=new Map;for(let a of this.parts(zt)){let i=a.getAttribute("value");i!==null&&s.set(i,a)}let l=this.parts(Et).flatMap(a=>{let i=ee(a);return i?[{trigger:a,...i}]:[]}),d=it({values:l.map(a=>a.value),active:o});this.controller.setTriggers(l.map(({trigger:a,tab:i,value:c})=>({value:c,element:i,disabled:a.hasAttribute("disabled")})));for(let{trigger:a,tab:i,value:c}of l){let h=s.get(c),Ct=c===o,At=a.hasAttribute("disabled");i.id||(i.id=v(n,"trigger",c)),h&&!h.id&&(h.id=v(n,"panel",c)),r(i,"role","tab"),r(i,"aria-selected",String(Ct)),r(i,"aria-controls",h?h.id:null),r(i,"tabindex",c===d?"0":"-1"),r(i,"aria-disabled",At?"true":null),r(i,"data-disabled",At?"":null),r(i,"data-state",Ct?"active":"inactive"),r(i,"data-orientation",t),h&&r(h,"aria-labelledby",i.id)}for(let[a,i]of s){let c=a===o;r(i,"role","tabpanel"),r(i,"tabindex","0"),r(i,"hidden",c?null:""),r(i,"data-state",c?"active":"inactive"),r(i,"data-orientation",t)}let p=s.get(o);this.#e&&o!==this.#t&&p&&p.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=o,this.#e=!0}},et=class extends u{},ot=class extends u{},nt=class extends u{};function xt(e=globalThis.customElements){b(e,[[te,tt],[Gt,et],[Et,ot],[zt,nt]])}gt();bt();yt();Tt();xt();export{x as AccordionController,C as CollapsibleController,A as ModalController,M as PopoverController,D as PrimitivAccordionContentElement,P as PrimitivAccordionElement,S as PrimitivAccordionItemElement,k as PrimitivAccordionTriggerElement,I as PrimitivAccordionTriggerIconElement,B as PrimitivCollapsibleContentElement,N as PrimitivCollapsibleElement,$ as PrimitivCollapsibleTriggerElement,G as PrimitivCollapsibleTriggerIconElement,j as PrimitivModalCloseElement,U as PrimitivModalContentElement,q as PrimitivModalDescriptionElement,z as PrimitivModalElement,_ as PrimitivModalTitleElement,F as PrimitivModalTriggerElement,X as PrimitivPopoverAnchorElement,Z as PrimitivPopoverCloseElement,Y as PrimitivPopoverContentElement,Q as PrimitivPopoverDescriptionElement,W as PrimitivPopoverElement,J as PrimitivPopoverTitleElement,V as PrimitivPopoverTriggerElement,nt as PrimitivTabsContentElement,tt as PrimitivTabsElement,et as PrimitivTabsListElement,ot as PrimitivTabsTriggerElement,w as TabsController,gt as defineAccordion,bt as defineCollapsible,yt as defineModal,Tt as definePopover,xt as defineTabs};
|
|
1
|
+
function b(o,t,e){return`${o}-${t}-${e}`}function N({orientation:o,dir:t,homeEnd:e=!1,activate:n=!1}){let i={};if(o==="horizontal"||o==="both"){let a=t==="rtl"?"ArrowLeft":"ArrowRight",l=t==="rtl"?"ArrowRight":"ArrowLeft";i[a]="next",i[l]="prev"}return(o==="vertical"||o==="both")&&(i.ArrowDown="next",i.ArrowUp="prev"),e&&(i.Home="first",i.End="last"),n&&(i.Enter="activate",i[" "]="activate"),i}function I({action:o,navigable:t,currentKey:e}){let n=t.length;if(n===0)return null;switch(o){case"activate":return{target:e};case"first":return{target:t[0]};case"last":return{target:t[n-1]};case void 0:return null;case"next":case"prev":{let i=t.indexOf(e);if(i===-1)return null;let a=o==="next"?1:n-1;return{target:t[(i+a)%n]}}}}function St(o){return o.active??o.values[0]}function G(o,t){return o.disabled.has(t)||o.active===t?null:t}function Dt(o,t,e){let n=N({orientation:o.orientation,dir:o.dir,homeEnd:!0,activate:!0})[e],i=I({action:n,navigable:o.values,currentKey:t});if(!i)return null;let a=i.target,l=o.activationMode==="automatic"||n==="activate";return{focus:a,activate:l?G(o,a):null}}function Kt(o,t){return o.disabled.has(t)?null:o.expanded.includes(t)?o.expanded.filter(e=>e!==t):o.multiple?[...o.expanded,t]:[t]}function kt(o,t,e){let n=N({orientation:o.orientation,dir:o.dir,homeEnd:!0,activate:!0})[e];if(n==="activate")return o.disabled.has(t)?null:{focus:null,toggle:t};let i=o.values.filter(l=>!o.disabled.has(l)),a=I({action:n,navigable:i,currentKey:t});return a&&{focus:a.target,toggle:null}}function _(o){return o.disabled?null:!o.open}function Nt(o,t){if(t!=="Enter"&&t!==" ")return null;let e=_(o);return e===null?null:{open:e}}var C=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");var y='[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])';function It({key:o,active:t,count:e}){if(e===0)return null;switch(o){case"ArrowDown":return{focus:(t+1)%e};case"ArrowUp":return{focus:t<=0?e-1:t-1};case"Home":return{focus:0};case"End":return{focus:e-1};case"Enter":case" ":return t<0?null:{activate:t};case"Escape":return{open:!1};default:return null}}var Gt=500;function _t({query:o,key:t,labels:e,active:n}){if(t.length!==1||t===" ")return null;let i=(o+t).toLowerCase(),l=[...i].every(c=>c===i[0])?i[0]:i,d=Math.max(n,0)+(l.length===1?1:0);for(let c=0;c<e.length;c++){let s=(d+c)%e.length;if(e[s].trim().toLowerCase().startsWith(l))return{query:i,focus:s}}return{query:i,focus:null}}function $t({key:o,shiftKey:t,active:e,count:n}){if(o!=="Tab")return null;if(n===0)return{focus:null};let i=n-1;return!t&&e===i?{focus:0}:t&&e===0?{focus:i}:null}function Bt(o,t){return t.x<o.left||t.x>o.right||t.y<o.top||t.y>o.bottom}function M(o,t){let e={top:t.top-o.bottom,bottom:o.top-t.bottom,left:t.left-o.right,right:o.left-t.right},n=Object.keys(e).reduce((u,h)=>e[h]>e[u]?h:u),i=n==="top"||n==="bottom",[a,l,d]=i?[o.left,o.right,(t.left+t.right)/2]:[o.top,o.bottom,(t.top+t.bottom)/2],c=(d-a)/(l-a),s=c<1/3?i?"left":"top":c>2/3?i?"right":"bottom":"center";return{side:n,align:s}}function Ut(o){return o==="Escape"?{open:!1}:null}function qt({open:o,nativeLightDismiss:t,inTrigger:e,inPopover:n}){return o&&!t&&!e&&!n}function zt({groupOpen:o,delay:t}){return o?0:t}var v=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,e,n={}){this.#e.set(e,{value:t,disabled:n.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:e,element:n,disabled:i}of t)this.registerTrigger(e,n,{disabled:i})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("click",e=>this.#n(e,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",e=>this.#n(e,this.onTriggerKeydown),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}ordered(){return[...this.#e].sort(([t],[e])=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let e of this.#e.values())e.disabled&&t.add(e.value);return t}#n(t,e){for(let[n,i]of this.#e)if(n.contains(t.target))return e.call(this,i,t)}};var A=class extends v{#t;constructor(t,e){super(t),this.#t=e}#e(t){let{expanded:e,multiple:n}=this.#t.state(),i=Kt({disabled:this.disabled(),expanded:e,multiple:n},t);i!==null&&this.#t.change(i)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,e){let{expanded:n,multiple:i,orientation:a,dir:l}=this.#t.state(),d=this.ordered(),c=d.map(([,u])=>u.value),s=kt({values:c,disabled:this.disabled(),expanded:n,multiple:i,orientation:a,dir:l},t.value,e.key);s&&(e.preventDefault(),s.toggle!==null&&this.#e(s.toggle),s.focus!==null&&d[c.indexOf(s.focus)][0].focus())}};var p=globalThis.HTMLElement??class{};function r(o,t,e){o.getAttribute(t)!==e&&(e===null?o.removeAttribute(t):o.setAttribute(t,e))}var me=new WeakSet;function g(o,t){me.has(o)||(me.add(o),console.error(t,o))}function f(o,t){if(o)for(let[e,n]of t)o.get(e)||o.define(e,n)}function E(o,t,e){return[...o.querySelectorAll(t)].filter(n=>n.closest(e)===o)}var ze=0,m=class extends p{#t;#e=new MutationObserver(()=>this.reconcile());connectedCallback(){this.controller.connect(),this.#e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[...this.reconcileOn]}),this.reconcile()}disconnectedCallback(){this.controller.disconnect(),this.#e.disconnect()}rootId(){return this.id||(this.#t??=`${this.localName}-${++ze}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return E(this,t,this.localName)}announce(t,e){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:e}))}};var Fe="primitiv-accordion",T="primitiv-accordion-item",Ft="primitiv-accordion-trigger",ge="primitiv-accordion-content",fe="primitiv-accordion-trigger-icon";function Ye(o){return(o??"").split(/\s+/).filter(Boolean)}function We(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${Ft}> needs exactly one element child (a <button>) to decorate.`),null)}var $=class extends m{#t=new Set;#e=!1;controller=new A(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return Ye(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#o(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#n(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#n(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),e=this.rootId();r(this,"data-orientation",this.#n());let n=[];for(let i of this.parts(T)){let a=i.getAttribute("value");if(a===null){g(i,`<${T}> needs a value, which pairs it with the root's value.`);continue}let l=t.has(a),d=l?"open":"closed",[c]=E(i,Ft,T),[s]=E(i,ge,T),u=c?We(c):null;if(u){let h=c.hasAttribute("disabled");n.push({value:a,element:u,disabled:h}),u.id||(u.id=b(e,"heading",a)),r(u,"aria-expanded",String(l)),r(u,"aria-disabled",String(h)),r(u,"data-disabled",String(h)),r(u,"data-state",d)}if(s){s.id||(s.id=b(e,"panel",a));let h=s.hasAttribute("force-mount");s.hasAttribute("role")||s.setAttribute("role","region"),r(s,"aria-labelledby",u?u.id:null),r(s,"hidden",l||h?null:""),r(s,"aria-hidden",l?null:"true"),r(s,"data-state",d),this.#e&&l&&!this.#t.has(a)&&s.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}u&&r(u,"aria-controls",s?s.id:null);for(let h of E(i,fe,T))r(h,"aria-hidden","true"),r(h,"data-state",d)}this.controller.setTriggers(n),this.#t=t,this.#e=!0}},B=class extends p{},U=class extends p{},q=class extends p{},z=class extends p{};function Yt(o=globalThis.customElements){f(o,[[Fe,$],[T,B],[Ft,U],[ge,q],[fe,z]])}var L=class extends v{#t;constructor(t,e){super(t),this.#t=e}onTriggerClick(t){let e=_({open:this.#t.state().open,disabled:t.disabled});e!==null&&this.#t.change(e)}onTriggerKeydown(t,e){let n=Nt({open:this.#t.state().open,disabled:t.disabled},e.key);n&&(e.preventDefault(),this.#t.change(n.open))}};var je="primitiv-collapsible",Wt="primitiv-collapsible-trigger",ve="primitiv-collapsible-content",be="primitiv-collapsible-trigger-icon",Ve="--primitiv-collapsible-collapsed-height";function Xe(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${Wt}> needs exactly one element child (a <button>) to decorate.`),null)}function Je(o){return Number.isNaN(Number(o))?o:`${o}px`}function Qe(o,t,e){o.style.getPropertyValue(t)!==e&&(o.style.setProperty(t,e),o.getAttribute("style")===""&&o.removeAttribute("style"))}var F=class extends m{#t;controller=new L(this,this.#e());reconcileOn=["open","disabled","force-mount","collapsed-height"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#e(){return{state:()=>({open:this.open}),change:t=>{this.announce("primitiv-collapsible-change",{open:t})&&(this.open=t)}}}reconcile(){let t=this.open,e=t?"open":"closed",n=this.hasAttribute("disabled"),i=this.rootId();r(this,"data-state",e),r(this,"data-disabled",String(n));let[a]=this.parts(Wt),[l]=this.parts(ve),d=a?Xe(a):null;if(d&&(d.id||(d.id=`${i}-trigger`),r(d,"aria-expanded",String(t)),r(d,"aria-disabled",n?"true":null),r(d,"data-disabled",String(n)),r(d,"data-state",e)),l){l.id||(l.id=`${i}-content`);let c=l.getAttribute("collapsed-height"),s=c!==null,u=s||l.hasAttribute("force-mount");r(l,"hidden",t||u?null:""),r(l,"aria-hidden",t||s?null:"true"),r(l,"data-state",e),r(l,"data-disabled",String(n)),r(l,"data-clamped",s?"true":null),Qe(l,Ve,s?Je(c):""),t&&this.#t===!1&&l.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}d&&r(d,"aria-controls",l?l.id:null);for(let c of this.parts(be))r(c,"aria-hidden","true"),r(c,"data-state",e);this.controller.setTriggers(d?[{value:"trigger",element:d,disabled:n}]:[]),this.#t=t}},Y=class extends p{},W=class extends p{},j=class extends p{};function jt(o=globalThis.customElements){f(o,[[je,F],[Wt,Y],[ve,W],[be,j]])}var H=class{#t;#e;#o=null;#n=!1;#i="";#r;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#a(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#s(e),{signal:t}),document.addEventListener("click",e=>this.#l(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),this.#t.contains(document.activeElement)||this.#t.querySelector(y)?.focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#a(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#s(t){let e=document.activeElement.closest("[popover]")??this.#t,n=[...e.querySelectorAll(y)].filter(d=>d.closest("[popover]")===e),i=n.indexOf(document.activeElement),a=It({key:t.key,active:i,count:n.length});if(a){t.preventDefault(),"focus"in a?n[a.focus].focus():"activate"in a?n[a.activate].click():(this.#e.change(!1),this.#e.trigger()?.focus());return}let l=_t({query:this.#i,key:t.key,labels:n.map(d=>d.textContent),active:i});l&&(this.#i=l.query,clearTimeout(this.#r),this.#r=setTimeout(()=>this.#i="",Gt),l.focus!==null&&(t.preventDefault(),n[l.focus].focus()))}#l(t){if(!this.#e.state().open)return;let e=t.target;this.#e.trigger()?.contains(e)||e.closest("[popover]")||this.#e.change(!1)}};var O=class{#t;#e;#o=null;#n=!1;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#i(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#r(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),this.#t.querySelector(y)?.focus()}else if(!t&&this.#n){this.#n=!1;try{this.#t.hidePopover()}catch{}}}#i(t){t.newState==="closed"&&(this.#n=!1,this.#e.change(!1))}#r(t){t.key===this.#e.closeKey()&&(t.preventDefault(),t.stopPropagation(),this.#e.change(!1),this.#e.trigger()?.focus())}};var Ee="primitiv-dropdown",Te="primitiv-dropdown-trigger",xe="primitiv-dropdown-content",we="primitiv-dropdown-item",x="primitiv-dropdown-checkbox-item",V="primitiv-dropdown-radio-group",R="primitiv-dropdown-radio-item",Ce="primitiv-dropdown-item-indicator",Qt="primitiv-dropdown-group",Zt="primitiv-dropdown-label",Me="primitiv-dropdown-separator",Ze="primitiv-dropdown-sub",Ae="primitiv-dropdown-sub-trigger",Le="primitiv-dropdown-sub-content",ye=`${we},${x},${R}`;function te(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}function Vt(o,t,e){return o.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:e}))}function Xt(o){let t=o.getAttribute("checked");return t==="indeterminate"?t:t!==null}function Jt(o){return o.closest(V)?.getAttribute("value")===o.getAttribute("value")}var X=class extends m{#t=null;#e=null;#o=null;#n=null;controller={connect:()=>this.#a(),disconnect:()=>this.#s()};reconcileOn=["open","disabled","checked","value"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#i(){return{state:()=>({open:this.open}),change:t=>this.#r(t),trigger:()=>this.#o,source:()=>this.#o}}#r(t){t!==this.open&&(this.announce("primitiv-dropdown-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#a(){this.#n=new AbortController;let t={signal:this.#n.signal};this.addEventListener("click",e=>this.#p(e),t),this.addEventListener("pointerover",e=>this.#c(e,!0),t),this.addEventListener("pointerout",e=>this.#c(e,!1),t),this.#e?.connect()}#s(){this.#n.abort(),this.#n=null,this.#e?.disconnect()}#l(t){let e=t?.closest(ye)??null;return e?.closest(Ee)===this?e:null}#c(t,e){let n=this.#l(t.target);if(!n||n===this.#l(t.relatedTarget))return;let i=n.firstElementChild;r(i,"data-highlighted",e?"":null)}#p(t){let e=t.target;if(this.#o?.contains(e)){this.#r(!this.open);return}let n=this.#l(e);if(!(!n||n.hasAttribute("disabled"))){if(n.localName===x){let i=Xt(n)!==!0;Vt(n,"primitiv-dropdown-checked-change",{checked:i})&&r(n,"checked",i?"":null)}else if(n.localName===R&&!Jt(n)){let i=n.closest(V),a=n.getAttribute("value");Vt(i,"primitiv-dropdown-value-change",{value:a})&&i.setAttribute("value",a)}Vt(n,"primitiv-dropdown-select",null)&&(this.#r(!1),this.#o?.focus())}}#d(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new H(t,this.#i()):null,this.#e?.connect())}reconcile(){let t=this.open,e=this.rootId(),[n=null]=this.parts(xe),[i]=this.parts(Te);this.#o=i?te(i,"a <button>"):null,n&&(n.id||(n.id=`${e}-content`),r(n,"role","menu"),n.hasAttribute("popover")||n.setAttribute("popover","auto")),this.#o&&(r(this.#o,"aria-haspopup","menu"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",n?n.id:null));for(let l of this.parts(ye)){let d=te(l,"an <li>");if(!d)continue;let c=l.localName===x,s=l.localName===R,u=c?Xt(l):s&&Jt(l);r(d,"role",c?"menuitemcheckbox":s?"menuitemradio":"menuitem"),r(d,"tabindex","-1"),r(d,"aria-disabled",l.hasAttribute("disabled")?"true":null),r(d,"aria-checked",c||s?u==="indeterminate"?"mixed":String(u):null)}for(let l of this.parts(Ce)){let d=l.closest(`${x},${R}`),c=d?.localName===x?Xt(d):d?Jt(d):!1;r(l,"data-state",c==="indeterminate"?c:c?"checked":"unchecked"),r(l,"hidden",c||l.hasAttribute("force-mount")?null:"")}let a=0;for(let l of this.parts(Zt))l.id||(l.id=`${e}-label-${++a}`);for(let l of this.parts(Qt)){let d=[...l.querySelectorAll(Zt)].find(c=>c.closest(Qt)===l);r(l,"role","group"),r(l,"aria-labelledby",d?d.id:null)}for(let l of this.parts(V))r(l,"role","group");for(let l of this.parts(Me))r(l,"role","separator");this.#d(n),this.#e?.sync()}},J=class extends m{#t=null;#e=null;#o=null;#n=null;#i=!1;#r=null;controller={connect:()=>this.#c(),disconnect:()=>this.#p()};reconcileOn=["open","disabled"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#a(){return{state:()=>({open:this.open}),change:t=>this.#s(t),trigger:()=>this.#o,source:()=>this.#o,closeKey:()=>this.direction()==="rtl"?"ArrowRight":"ArrowLeft"}}#s(t){t!==this.open&&(this.announce("primitiv-dropdown-sub-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#l(){return this.#n.hasAttribute("disabled")}#c(){this.#r=new AbortController;let t={signal:this.#r.signal};this.addEventListener("click",e=>this.#d(e)&&this.#u(),t),this.addEventListener("keydown",e=>this.#m(e),t),this.addEventListener("pointerover",e=>this.#h(e,!0),t),this.addEventListener("pointerout",e=>this.#h(e,!1),t),document.addEventListener("pointerover",e=>this.#g(e),t),this.#e?.connect()}#p(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#d(t){return this.#o?.contains(t.target)??!1}#u(){this.#l()||this.#s(!0)}#m(t){!this.#d(t)||this.#l()||t.key===(this.direction()==="rtl"?"ArrowLeft":"ArrowRight")&&(t.preventDefault(),t.stopPropagation(),this.#s(!0))}#h(t,e){!this.#d(t)||this.#o.contains(t.relatedTarget)||(this.#i=e,this.reconcile(),e&&this.#u())}#g(t){if(!this.open||this.contains(t.target))return;let e=t.target.closest('[role^="menuitem"]');e&&e.closest('[role="menu"]')===this.parentElement.closest('[role="menu"]')&&this.#s(!1)}#f(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new O(t,this.#a()):null,this.#e?.connect())}reconcile(){let t=this.open,[e=null]=this.parts(Le),[n=null]=this.parts(Ae);this.#n=n,this.#o=n?te(n,"an <li>"):null,e&&(e.id||(e.id=`${this.rootId()}-content`),r(e,"role","menu"),e.hasAttribute("popover")||e.setAttribute("popover","auto")),this.#o&&(r(this.#o,"role","menuitem"),r(this.#o,"tabindex","-1"),r(this.#o,"aria-haspopup","menu"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",e?e.id:null),r(this.#o,"aria-disabled",this.#l()?"true":null),r(this.#o,"data-highlighted",this.#i||t?"":null)),this.#f(e),this.#e?.sync()}},Q=class extends p{},Z=class extends p{},tt=class extends p{},et=class extends p{},ot=class extends p{},nt=class extends p{},it=class extends p{},rt=class extends p{},st=class extends p{},lt=class extends p{},at=class extends p{},ct=class extends p{};function ee(o=globalThis.customElements){f(o,[[Ee,X],[Te,Q],[xe,Z],[we,tt],[x,et],[V,ot],[R,nt],[Ce,it],[Qt,rt],[Zt,st],[Me,lt],[Ze,J],[Ae,at],[Le,ct]])}var P=class{#t;#e;#o=null;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o,e=this.#t;e.addEventListener("close",()=>this.#e.change(!1),{signal:t}),e.addEventListener("cancel",n=>this.#n(n),{signal:t}),e.addEventListener("pointerdown",n=>this.#i(n),{signal:t}),e.addEventListener("keydown",n=>this.#r(n),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null}sync(){let{open:t}=this.#e.state();t&&!this.#t.open?this.#t.showModal():!t&&this.#t.open&&this.#t.close()}#n(t){this.#e.escapeKeyDown?.(t);let e=t.defaultPrevented;t.preventDefault(),e||this.#e.change(!1)}#i(t){let e={x:t.clientX,y:t.clientY};Bt(this.#t.getBoundingClientRect(),e)&&(this.#e.pointerDownOutside?.(t),t.defaultPrevented||this.#e.change(!1))}#r(t){if(!this.#t.open)return;let e=[...this.#t.querySelectorAll(C)],n=$t({key:t.key,shiftKey:t.shiftKey,active:e.indexOf(document.activeElement),count:e.length});n&&(t.preventDefault(),n.focus!==null&&e[n.focus].focus())}};var to="primitiv-modal",He="primitiv-modal-trigger",ne="primitiv-modal-content",Oe="primitiv-modal-title",Re="primitiv-modal-description",Pe="primitiv-modal-close";function oe(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}function eo(o){let t=o.firstElementChild;return o.childElementCount===1&&t instanceof HTMLDialogElement?t:(g(o,`<${ne}> needs exactly one <dialog> child to decorate.`),null)}var dt=class extends m{#t=null;#e=null;#o=[];#n=[];#i=null;controller={connect:()=>this.#s(),disconnect:()=>this.#l()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){return{state:()=>({open:this.open}),change:t=>this.#a(t)}}#a(t){t!==this.open&&(this.announce("primitiv-modal-change",{open:t})?this.open=t:this.#e?.sync())}#s(){this.#i=new AbortController,this.addEventListener("click",t=>this.#c(t),{signal:this.#i.signal}),this.#e?.connect()}#l(){this.#i.abort(),this.#i=null,this.#e?.disconnect(),this.#t&&r(this.#t,"open",null)}#c(t){let e=t.target;this.#o.some(n=>n.contains(e))?this.#a(!0):this.#n.some(n=>n.contains(e))&&this.#a(!1)}#p(t){t!==this.#t&&(this.#e?.disconnect(),t&&r(t,"open",null),this.#t=t,this.#e=t?new P(t,this.#r()):null,this.#e?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",n=this.rootId();r(this,"data-state",e);let[i]=this.parts(ne),a=i?eo(i):null,[l]=this.parts(Oe),d=l?oe(l,"a heading"):null,[c]=this.parts(Re),s=c?oe(c,"a <p>"):null;d&&!d.id&&(d.id=`${n}-title`),s&&!s.id&&(s.id=`${n}-description`),a&&(a.id||(a.id=`${n}-content`),r(a,"data-state",e),r(a,"aria-labelledby",d?d.id:null),r(a,"aria-describedby",s?s.id:null)),this.#o=this.#d(He);for(let u of this.#o)r(u,"aria-haspopup","dialog"),r(u,"aria-expanded",String(t)),r(u,"aria-controls",a?a.id:null);this.#n=this.#d(Pe),this.#p(a),this.#e?.sync()}#d(t){return this.parts(t).flatMap(e=>oe(e,"a <button>")??[])}},pt=class extends p{},ut=class extends p{},ht=class extends p{},mt=class extends p{},gt=class extends p{};function ie(o=globalThis.customElements){f(o,[[to,dt],[He,pt],[ne,ut],[Oe,ht],[Re,mt],[Pe,gt]])}var S=class{#t;#e;#o=null;#n=!1;#i=null;constructor(t,e){this.#t=t,this.#e=e}connect(){if(this.#o)return;this.#o=new AbortController;let{signal:t}=this.#o;this.#t.addEventListener("toggle",e=>this.#l(e),{signal:t}),this.#t.addEventListener("keydown",e=>this.#c(e),{signal:t}),document.addEventListener("click",e=>this.#p(e),{signal:t})}disconnect(){this.#o?.abort(),this.#o=null,this.#n=!1,this.#a()}sync(){let{open:t}=this.#e.state();if(t&&!this.#n){this.#n=!0;let e=this.#e.source?.();e?this.#t.showPopover({source:e}):this.#t.showPopover(),(this.#t.querySelector(C)??this.#t).focus(),this.#r()}else if(!t&&this.#n){this.#n=!1,this.#a();try{this.#t.hidePopover()}catch{}}}#r(){this.#i=new AbortController;let t={capture:!0,passive:!0,signal:this.#i.signal};window.addEventListener("scroll",()=>this.#s(),t),window.addEventListener("resize",()=>this.#s(),t),this.#s()}#a(){this.#i?.abort(),this.#i=null}#s(){let t=this.#e.source?.()??this.#e.trigger();if(!t)return;let{side:e,align:n}=M(this.#t.getBoundingClientRect(),t.getBoundingClientRect());r(this.#t,"data-side",e),r(this.#t,"data-align",n)}#l(t){t.newState==="closed"&&(this.#n=!1,this.#a(),this.#e.change(!1))}#c(t){t.defaultPrevented||!Ut(t.key)||(t.preventDefault(),this.#e.change(!1),this.#e.trigger()?.focus())}#p(t){let e=t.target;qt({open:this.#e.state().open,nativeLightDismiss:"popover"in HTMLElement.prototype,inTrigger:this.#e.trigger()?.contains(e)??!1,inPopover:e.closest("[popover]")!==null})&&this.#e.change(!1)}};var oo="primitiv-popover",Se="primitiv-popover-trigger",De="primitiv-popover-anchor",Ke="primitiv-popover-content",ke="primitiv-popover-title",Ne="primitiv-popover-description",Ie="primitiv-popover-close";function D(o,t){return o.childElementCount===1?o.firstElementChild:(g(o,`<${o.localName}> needs exactly one element child (${t}) to decorate.`),null)}var ft=class extends m{#t=null;#e=null;#o=null;#n=null;#i=[];#r=null;controller={connect:()=>this.#l(),disconnect:()=>this.#c()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#a(){return{state:()=>({open:this.open}),change:t=>this.#s(t),trigger:()=>this.#o,source:()=>this.#n??this.#o}}#s(t){t!==this.open&&(this.announce("primitiv-popover-change",{open:t})?this.open=t:queueMicrotask(()=>this.#e?.sync()))}#l(){this.#r=new AbortController,this.addEventListener("click",t=>this.#p(t),{signal:this.#r.signal}),this.#e?.connect()}#c(){this.#r.abort(),this.#r=null,this.#e?.disconnect()}#p(t){let e=t.target;this.#o?.contains(e)?this.#s(!this.open):this.#i.some(n=>n.contains(e))&&this.#s(!1)}#d(t){t!==this.#t&&(this.#e?.disconnect(),this.#t=t,this.#e=t?new S(t,this.#a()):null,this.#e?.connect())}reconcile(){let t=this.open,e=t?"open":"closed",n=this.rootId();r(this,"data-state",e);let[i=null]=this.parts(Ke),[a]=this.parts(Se),[l]=this.parts(De),[d]=this.parts(ke),[c]=this.parts(Ne);this.#o=a?D(a,"a <button>"):null,this.#n=l?D(l,"the element to anchor to"):null;let s=d?D(d,"a heading"):null,u=c?D(c,"a <p>"):null;s&&!s.id&&(s.id=`${n}-title`),u&&!u.id&&(u.id=`${n}-description`),i&&(i.id||(i.id=`${n}-content`),r(i,"role","dialog"),i.hasAttribute("popover")||i.setAttribute("popover","auto"),r(i,"tabindex","-1"),r(i,"data-state",e),r(i,"aria-labelledby",s?s.id:null),r(i,"aria-describedby",u?u.id:null)),this.#o&&(r(this.#o,"aria-haspopup","dialog"),r(this.#o,"aria-expanded",String(t)),r(this.#o,"aria-controls",i?i.id:null)),this.#i=this.parts(Ie).flatMap(h=>D(h,"a <button>")??[]),this.#d(i),this.#e?.sync()}},vt=class extends p{},bt=class extends p{},yt=class extends p{},Et=class extends p{},Tt=class extends p{},xt=class extends p{};function re(o=globalThis.customElements){f(o,[[oo,ft],[Se,vt],[De,bt],[Ke,yt],[ke,Et],[Ne,Tt],[Ie,xt]])}var K=class extends v{#t;constructor(t,e){super(t),this.#t=e}onTriggerClick(t){let{active:e}=this.#t.state(),n=G({disabled:this.disabled(),active:e},t.value);if(n!==null){let i=this.ordered().map(([,a])=>a.value);this.#t.activate(n,i.indexOf(n))}}onTriggerKeydown(t,e){let{active:n,orientation:i,dir:a,activationMode:l}=this.#t.state(),d=this.ordered(),c=d.map(([,u])=>u.value),s=Dt({values:c,disabled:this.disabled(),active:n,orientation:i,dir:a,activationMode:l},t.value,e.key);s&&(e.preventDefault(),s.activate!==null&&this.#t.activate(s.activate,c.indexOf(s.activate)),d[c.indexOf(s.focus)][0].focus())}};var no="primitiv-tabs",Ge="primitiv-tabs-list",se="primitiv-tabs-trigger",_e="primitiv-tabs-content";function io(o){let t=o.getAttribute("value");return o.childElementCount===1&&t!==null?{tab:o.firstElementChild,value:t}:(g(o,`<${se}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var wt=class extends m{#t;#e=!1;controller=new K(this,this.#o());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#o(){return{state:()=>({active:this.value,orientation:this.#i(),dir:this.direction(),activationMode:this.#n()}),activate:(t,e)=>{this.announce("primitiv-tabs-change",{value:t,index:e})&&(this.value=t)}}}#n(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#i(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#i(),e=this.value,n=this.rootId();r(this,"data-orientation",t);for(let c of this.parts(Ge)){r(c,"role","tablist"),r(c,"aria-orientation",t),r(c,"data-orientation",t);let s=c.getAttribute("label");s!==null&&r(c,"aria-label",s)}let i=new Map;for(let c of this.parts(_e)){let s=c.getAttribute("value");s!==null&&i.set(s,c)}let a=this.parts(se).flatMap(c=>{let s=io(c);return s?[{trigger:c,...s}]:[]}),l=St({values:a.map(c=>c.value),active:e});this.controller.setTriggers(a.map(({trigger:c,tab:s,value:u})=>({value:u,element:s,disabled:c.hasAttribute("disabled")})));for(let{trigger:c,tab:s,value:u}of a){let h=i.get(u),pe=u===e,ue=c.hasAttribute("disabled");s.id||(s.id=b(n,"trigger",u)),h&&!h.id&&(h.id=b(n,"panel",u)),r(s,"role","tab"),r(s,"aria-selected",String(pe)),r(s,"aria-controls",h?h.id:null),r(s,"tabindex",u===l?"0":"-1"),r(s,"aria-disabled",ue?"true":null),r(s,"data-disabled",ue?"":null),r(s,"data-state",pe?"active":"inactive"),r(s,"data-orientation",t),h&&r(h,"aria-labelledby",s.id)}for(let[c,s]of i){let u=c===e;r(s,"role","tabpanel"),r(s,"tabindex","0"),r(s,"hidden",u?null:""),r(s,"data-state",u?"active":"inactive"),r(s,"data-orientation",t)}let d=i.get(e);this.#e&&e!==this.#t&&d&&d.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=e,this.#e=!0}},Ct=class extends p{},Mt=class extends p{},At=class extends p{};function le(o=globalThis.customElements){f(o,[[no,wt],[Ge,Ct],[se,Mt],[_e,At]])}var k=class{#t;#e=null;#o=null;#n=t=>this.#p(t);#i=t=>this.#d(t);#r=null;constructor(t){this.#t=t}openNow(){this.#c(),this.#t.change(!0),this.#t.tooltipGroup().opened()}hoverStart(){let t=zt({groupOpen:this.#t.tooltipGroup().isOpen(),delay:this.#t.delay()});if(t===0){this.openNow();return}this.#e=setTimeout(()=>{this.openNow(),this.#e=null},t)}closeNow(){this.holdOpen(),this.#t.change(!1),this.#t.tooltipGroup().closed()}hoverEnd(){this.#c(),this.#o=setTimeout(()=>{this.#t.change(!1),this.#t.tooltipGroup().closed(),this.#o=null},100)}holdOpen(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null)}sync(){let{open:t}=this.#t.state();t?(document.addEventListener("keydown",this.#n),document.addEventListener("pointerdown",this.#i),this.#r||this.#a()):this.#l()}#a(){this.#r=new AbortController;let t={capture:!0,passive:!0,signal:this.#r.signal};window.addEventListener("scroll",()=>this.#s(),t),window.addEventListener("resize",()=>this.#s(),t),this.#s()}#s(){let t=this.#t.content(),e=this.#t.anchor?.();if(!t||!e)return;let{side:n,align:i}=M(t.getBoundingClientRect(),e.getBoundingClientRect());r(t,"data-side",n),r(t,"data-align",i)}#l(){document.removeEventListener("keydown",this.#n),document.removeEventListener("pointerdown",this.#i),this.#r?.abort(),this.#r=null}disconnect(){this.#c(),this.holdOpen(),this.#l()}#c(){this.#e!==null&&(clearTimeout(this.#e),this.#e=null)}#p(t){t.key==="Escape"&&(this.#t.escapeKeyDown?.(t),t.defaultPrevented||this.closeNow())}#d(t){this.#t.content()?.contains(t.target)||(this.#t.pointerDownOutside?.(t),t.defaultPrevented||this.closeNow())}};var w=class{#t;#e=!1;#o=null;constructor(t){this.#t=t}isOpen(){return this.#e}opened(){this.#o!==null&&(clearTimeout(this.#o),this.#o=null),this.#e=!0}closed(){clearTimeout(this.#o??void 0),this.#o=setTimeout(()=>{this.#e=!1,this.#o=null},this.#t())}dispose(){clearTimeout(this.#o??void 0)}};var ro="primitiv-tooltip",Be="primitiv-tooltip-provider",ce="primitiv-tooltip-trigger",Ue="primitiv-tooltip-content",so="primitiv-tooltip-arrow",$e=700,qe=300;function ae(o,t,e){let n=Number(o.getAttribute(t)??Number.NaN);return Number.isNaN(n)?e:n}var lo=new w(()=>qe),Lt=class extends p{#t;get group(){return this.#t??=new w(()=>ae(this,"skip-delay-duration",qe))}},Ht=class extends m{#t=null;#e=null;#o=null;#n=null;#i=new k(this.#r());controller={connect:()=>{},disconnect:()=>this.#a()};reconcileOn=["open"];get open(){return this.hasAttribute("open")}set open(t){this.toggleAttribute("open",t)}#r(){let t=()=>this.closest(Be);return{state:()=>({open:this.open}),change:e=>{e!==this.open&&this.announce("primitiv-tooltip-change",{open:e})&&(this.open=e)},delay:()=>{let e=t();return ae(this,"delay-duration",e?ae(e,"delay-duration",$e):$e)},tooltipGroup:()=>t()?.group??lo,content:()=>this.#e,anchor:()=>this.#t}}#a(){this.open&&this.#r().tooltipGroup().closed(),this.#n?.abort(),this.#n=null,this.#t=null,this.#e=null,this.#o=null,this.#i.disconnect()}#s(t,e){if(t===this.#t&&e===this.#e)return;this.#n?.abort(),this.#n=new AbortController,this.#t=t,this.#e=e;let n={signal:this.#n.signal},i=this.#i;t?.addEventListener("pointerenter",()=>i.hoverStart(),n),t?.addEventListener("pointerleave",()=>this.hasAttribute("disable-hoverable-content")?i.closeNow():i.hoverEnd(),n),t?.addEventListener("focus",()=>i.openNow(),n),t?.addEventListener("blur",()=>i.closeNow(),n),e?.addEventListener("pointerenter",()=>i.holdOpen(),n),e?.addEventListener("pointerleave",()=>i.closeNow(),n)}reconcile(){let t=this.open,e=t?"open":"closed";r(this,"data-state",e);let[n]=this.parts(ce),[i=null]=this.parts(Ue),a=n?ao(n):null;i&&(i.id||(i.id=`${this.rootId()}-content`),r(i,"role","tooltip"),i.hasAttribute("popover")||i.setAttribute("popover","manual"),r(i,"data-state",e)),a&&(r(a,"aria-describedby",i?i.id:null),r(a,"data-state",e)),this.#s(a,i),this.#l(t?i:null),this.#i.sync()}#l(t){if(t===this.#o)return;if(this.#o)try{this.#o.hidePopover()}catch{}if(this.#o=t,!t)return;let e=t;this.#t?e.showPopover({source:this.#t}):e.showPopover()}};function ao(o){return o.childElementCount===1?o.firstElementChild:(g(o,`<${ce}> needs exactly one element child (a <button>) to decorate.`),null)}var Ot=class extends p{},Rt=class extends p{},Pt=class extends p{};function de(o=globalThis.customElements){f(o,[[ro,Ht],[Be,Lt],[ce,Ot],[Ue,Rt],[so,Pt]])}Yt();jt();ee();ie();re();le();de();export{A as AccordionController,L as CollapsibleController,H as DropdownController,O as DropdownSubController,P as ModalController,S as PopoverController,q as PrimitivAccordionContentElement,$ as PrimitivAccordionElement,B as PrimitivAccordionItemElement,U as PrimitivAccordionTriggerElement,z as PrimitivAccordionTriggerIconElement,W as PrimitivCollapsibleContentElement,F as PrimitivCollapsibleElement,Y as PrimitivCollapsibleTriggerElement,j as PrimitivCollapsibleTriggerIconElement,et as PrimitivDropdownCheckboxItemElement,Z as PrimitivDropdownContentElement,X as PrimitivDropdownElement,rt as PrimitivDropdownGroupElement,tt as PrimitivDropdownItemElement,it as PrimitivDropdownItemIndicatorElement,st as PrimitivDropdownLabelElement,ot as PrimitivDropdownRadioGroupElement,nt as PrimitivDropdownRadioItemElement,lt as PrimitivDropdownSeparatorElement,ct as PrimitivDropdownSubContentElement,J as PrimitivDropdownSubElement,at as PrimitivDropdownSubTriggerElement,Q as PrimitivDropdownTriggerElement,gt as PrimitivModalCloseElement,ut as PrimitivModalContentElement,mt as PrimitivModalDescriptionElement,dt as PrimitivModalElement,ht as PrimitivModalTitleElement,pt as PrimitivModalTriggerElement,bt as PrimitivPopoverAnchorElement,xt as PrimitivPopoverCloseElement,yt as PrimitivPopoverContentElement,Tt as PrimitivPopoverDescriptionElement,ft as PrimitivPopoverElement,Et as PrimitivPopoverTitleElement,vt as PrimitivPopoverTriggerElement,At as PrimitivTabsContentElement,wt as PrimitivTabsElement,Ct as PrimitivTabsListElement,Mt as PrimitivTabsTriggerElement,Pt as PrimitivTooltipArrowElement,Rt as PrimitivTooltipContentElement,Ht as PrimitivTooltipElement,Lt as PrimitivTooltipProviderElement,Ot as PrimitivTooltipTriggerElement,K as TabsController,k as TooltipController,w as TooltipGroup,Yt as defineAccordion,jt as defineCollapsible,ee as defineDropdown,ie as defineModal,re as definePopover,le as defineTabs,de as defineTooltip};
|
package/dist/tags.d.ts
CHANGED
|
@@ -14,9 +14,11 @@
|
|
|
14
14
|
*/
|
|
15
15
|
import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "./accordion/elements.js";
|
|
16
16
|
import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "./collapsible/elements.js";
|
|
17
|
+
import type { PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement } from "./dropdown/elements.js";
|
|
17
18
|
import type { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "./modal/elements.js";
|
|
18
19
|
import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "./popover/elements.js";
|
|
19
20
|
import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "./tabs/elements.js";
|
|
21
|
+
import type { PrimitivTooltipArrowElement, PrimitivTooltipContentElement, PrimitivTooltipElement, PrimitivTooltipProviderElement, PrimitivTooltipTriggerElement } from "./tooltip/elements.js";
|
|
20
22
|
declare global {
|
|
21
23
|
interface HTMLElementTagNameMap {
|
|
22
24
|
"primitiv-accordion": PrimitivAccordionElement;
|
|
@@ -45,6 +47,25 @@ declare global {
|
|
|
45
47
|
"primitiv-tabs-list": PrimitivTabsListElement;
|
|
46
48
|
"primitiv-tabs-trigger": PrimitivTabsTriggerElement;
|
|
47
49
|
"primitiv-tabs-content": PrimitivTabsContentElement;
|
|
50
|
+
"primitiv-dropdown": PrimitivDropdownElement;
|
|
51
|
+
"primitiv-dropdown-trigger": PrimitivDropdownTriggerElement;
|
|
52
|
+
"primitiv-dropdown-content": PrimitivDropdownContentElement;
|
|
53
|
+
"primitiv-dropdown-item": PrimitivDropdownItemElement;
|
|
54
|
+
"primitiv-dropdown-checkbox-item": PrimitivDropdownCheckboxItemElement;
|
|
55
|
+
"primitiv-dropdown-radio-group": PrimitivDropdownRadioGroupElement;
|
|
56
|
+
"primitiv-dropdown-radio-item": PrimitivDropdownRadioItemElement;
|
|
57
|
+
"primitiv-dropdown-item-indicator": PrimitivDropdownItemIndicatorElement;
|
|
58
|
+
"primitiv-dropdown-group": PrimitivDropdownGroupElement;
|
|
59
|
+
"primitiv-dropdown-label": PrimitivDropdownLabelElement;
|
|
60
|
+
"primitiv-dropdown-separator": PrimitivDropdownSeparatorElement;
|
|
61
|
+
"primitiv-dropdown-sub": PrimitivDropdownSubElement;
|
|
62
|
+
"primitiv-dropdown-sub-trigger": PrimitivDropdownSubTriggerElement;
|
|
63
|
+
"primitiv-dropdown-sub-content": PrimitivDropdownSubContentElement;
|
|
64
|
+
"primitiv-tooltip": PrimitivTooltipElement;
|
|
65
|
+
"primitiv-tooltip-provider": PrimitivTooltipProviderElement;
|
|
66
|
+
"primitiv-tooltip-trigger": PrimitivTooltipTriggerElement;
|
|
67
|
+
"primitiv-tooltip-content": PrimitivTooltipContentElement;
|
|
68
|
+
"primitiv-tooltip-arrow": PrimitivTooltipArrowElement;
|
|
48
69
|
}
|
|
49
70
|
}
|
|
50
71
|
export {};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import type { TooltipGroup } from "./TooltipGroup.js";
|
|
2
|
+
/**
|
|
3
|
+
* What a {@link TooltipController} asks of whoever hosts it. The controller
|
|
4
|
+
* owns behaviour and never owns state (RFC 0033 D28): the custom elements keep
|
|
5
|
+
* the open state in a reflected `open` attribute, the React adapter keeps it in
|
|
6
|
+
* React, and each answers these calls from wherever it keeps it.
|
|
7
|
+
*/
|
|
8
|
+
export type TooltipControllerHost = {
|
|
9
|
+
/** The state the controller cannot see for itself. */
|
|
10
|
+
state(): {
|
|
11
|
+
/** Whether the tooltip is open. */
|
|
12
|
+
open: boolean;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Apply a change: `open` is the state afterwards. A close is reported every
|
|
16
|
+
* time it is asked for, already closed or not, so the host decides what a
|
|
17
|
+
* repeat means.
|
|
18
|
+
*/
|
|
19
|
+
change(open: boolean): void;
|
|
20
|
+
/** The delay before opening on hover, in milliseconds. */
|
|
21
|
+
delay(): number;
|
|
22
|
+
/** The group whose skip-delay window this tooltip shares. */
|
|
23
|
+
tooltipGroup(): TooltipGroup;
|
|
24
|
+
/** The tooltip's content, so a press inside it is not a press outside. */
|
|
25
|
+
content(): HTMLElement | null;
|
|
26
|
+
/**
|
|
27
|
+
* The element the tooltip is anchored to, to measure which side of it the
|
|
28
|
+
* tooltip landed on. Optional: without it no placement is marked.
|
|
29
|
+
*/
|
|
30
|
+
anchor?(): HTMLElement | null;
|
|
31
|
+
/** Escape was pressed while open. Call `preventDefault()` on `event` to keep it open. Optional. */
|
|
32
|
+
escapeKeyDown?(event: KeyboardEvent): void;
|
|
33
|
+
/** A pointer went down outside the content while open. Call `preventDefault()` to keep it open. Optional. */
|
|
34
|
+
pointerDownOutside?(event: PointerEvent): void;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* The behaviour of a tooltip: hover intent and dismissal. Its host wires the
|
|
38
|
+
* trigger's and the content's own events to the intents below, so the React
|
|
39
|
+
* adapter keeps composing them with its consumers' handlers as it always has;
|
|
40
|
+
* the controller owns the timers, and the document-wide Escape and outside
|
|
41
|
+
* press while open (WAI-ARIA tooltip pattern).
|
|
42
|
+
*
|
|
43
|
+
* - {@link TooltipController.hoverStart | `hoverStart`} — open after the
|
|
44
|
+
* delay, or at once while the group is in its skip-delay window.
|
|
45
|
+
* - {@link TooltipController.hoverEnd | `hoverEnd`} — close after a short
|
|
46
|
+
* grace period, long enough for the pointer to reach hoverable content.
|
|
47
|
+
* - {@link TooltipController.holdOpen | `holdOpen`} — the pointer reached the
|
|
48
|
+
* content: cancel that grace close.
|
|
49
|
+
* - {@link TooltipController.openNow | `openNow`} / {@link TooltipController.closeNow | `closeNow`} —
|
|
50
|
+
* focus and blur, Escape on the trigger, the pointer leaving the content.
|
|
51
|
+
* - {@link TooltipController.sync | `sync`} — listen for Escape and outside
|
|
52
|
+
* presses while open, and mark the tooltip's `data-side` and `data-align`
|
|
53
|
+
* (where it landed against its anchor, after any flip) as it opens and on
|
|
54
|
+
* every scroll and resize; a host calls it whenever the state may have
|
|
55
|
+
* changed, after showing the tooltip.
|
|
56
|
+
*/
|
|
57
|
+
export declare class TooltipController {
|
|
58
|
+
#private;
|
|
59
|
+
constructor(host: TooltipControllerHost);
|
|
60
|
+
/** Open now, cancelling a pending hover open. */
|
|
61
|
+
openNow(): void;
|
|
62
|
+
/** Open after the delay, or at once while the group is in its skip-delay window. */
|
|
63
|
+
hoverStart(): void;
|
|
64
|
+
/** Close now, cancelling a pending grace close. */
|
|
65
|
+
closeNow(): void;
|
|
66
|
+
/** Close after the grace period, cancelling a pending hover open. */
|
|
67
|
+
hoverEnd(): void;
|
|
68
|
+
/** The pointer reached the content: cancel a pending grace close. */
|
|
69
|
+
holdOpen(): void;
|
|
70
|
+
/** Listen for Escape and outside presses while open, and only then. */
|
|
71
|
+
sync(): void;
|
|
72
|
+
/** Cancel every timer and stop listening, so nothing outlives the host. */
|
|
73
|
+
disconnect(): void;
|
|
74
|
+
}
|