@primitiv-ui/web 0.1.53 → 0.1.55

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.
Files changed (39) hide show
  1. package/README.md +69 -4
  2. package/dist/cdn/accordion.js +1 -1
  3. package/dist/cdn/chunks/chunk-EDLRMP2K.js +1 -0
  4. package/dist/cdn/chunks/chunk-HXGMU6SD.js +1 -0
  5. package/dist/cdn/chunks/chunk-PKW6AKXD.js +1 -0
  6. package/dist/cdn/chunks/chunk-QVNDDONZ.js +1 -0
  7. package/dist/cdn/collapsible.js +1 -1
  8. package/dist/cdn/modal.js +1 -0
  9. package/dist/cdn/popover.js +1 -0
  10. package/dist/cdn/tabs.js +1 -1
  11. package/dist/custom-elements.json +749 -0
  12. package/dist/define/index.d.ts +2 -0
  13. package/dist/define/index.js +2 -0
  14. package/dist/define/modal.d.ts +1 -0
  15. package/dist/define/modal.js +11 -0
  16. package/dist/define/popover.d.ts +1 -0
  17. package/dist/define/popover.js +11 -0
  18. package/dist/frameworks/events.d.ts +8 -0
  19. package/dist/frameworks/react.d.ts +25 -2
  20. package/dist/frameworks/svelte.d.ts +22 -1
  21. package/dist/frameworks/vue.d.ts +22 -1
  22. package/dist/index.d.ts +2 -0
  23. package/dist/index.js +2 -0
  24. package/dist/modal/ModalController.d.ts +58 -0
  25. package/dist/modal/ModalController.js +91 -0
  26. package/dist/modal/elements.d.ts +86 -0
  27. package/dist/modal/elements.js +235 -0
  28. package/dist/modal/index.d.ts +2 -0
  29. package/dist/modal/index.js +2 -0
  30. package/dist/popover/PopoverController.d.ts +55 -0
  31. package/dist/popover/PopoverController.js +100 -0
  32. package/dist/popover/elements.d.ts +98 -0
  33. package/dist/popover/elements.js +230 -0
  34. package/dist/popover/index.d.ts +2 -0
  35. package/dist/popover/index.js +2 -0
  36. package/dist/primitiv-web.js +1 -1
  37. package/dist/tags.d.ts +15 -0
  38. package/package.json +18 -2
  39. package/dist/cdn/chunks/chunk-WVI5UEAW.js +0 -1
@@ -0,0 +1,230 @@
1
+ import { defineElements, ElementBase, reportOnce, write } from "../internal/element.js";
2
+ import { PrimitivRootElement } from "../internal/RootElement.js";
3
+ import { PopoverController } from "./PopoverController.js";
4
+ // Stryker disable StringLiteral: static — evaluated once at import, so runtime mutant switching never reaches them; the names are pinned by the definePopover registry test instead.
5
+ const ROOT = "primitiv-popover";
6
+ const TRIGGER = "primitiv-popover-trigger";
7
+ const ANCHOR = "primitiv-popover-anchor";
8
+ const CONTENT = "primitiv-popover-content";
9
+ const TITLE = "primitiv-popover-title";
10
+ const DESCRIPTION = "primitiv-popover-description";
11
+ const CLOSE = "primitiv-popover-close";
12
+ // Stryker restore StringLiteral
13
+ /**
14
+ * The one element child `part` decorates — the `<button>`, heading or anchor
15
+ * element the consumer writes — or `null`, reported once, when it has anything
16
+ * but exactly one (RFC 0033 D24). `what` names the child in the report.
17
+ */
18
+ function decoratable(part, what) {
19
+ if (part.childElementCount === 1)
20
+ return part.firstElementChild;
21
+ reportOnce(part, `<${part.localName}> needs exactly one element child (${what}) to decorate.`);
22
+ return null;
23
+ }
24
+ /**
25
+ * `<primitiv-popover>` — the state owner of a non-modal popover: a trigger
26
+ * that opens a floating panel, built on the native Popover API. The browser
27
+ * puts the panel in the top layer and light-dismisses it; the element adds the
28
+ * rest of the WAI-ARIA non-modal dialog pattern — focus moves into the panel
29
+ * as it opens, Escape closes it and hands focus back to the trigger, and the
30
+ * trigger's `aria-expanded` follows it.
31
+ *
32
+ * The panel is shown with its trigger (or the anchor) as its source, which
33
+ * makes that element the panel's implicit anchor, so CSS anchor positioning
34
+ * (`position-area`) places it with no `anchor-name` to wire.
35
+ *
36
+ * The root finds its own parts, so a popover nested in a panel keeps its own,
37
+ * and reconciles their ARIA from its reflected state whenever a part arrives,
38
+ * leaves, or changes an attribute the root reads (the lifecycle is
39
+ * `PrimitivRootElement`'s).
40
+ *
41
+ * @customElement primitiv-popover
42
+ * @summary The state owner of a non-modal popover on the native Popover API.
43
+ * @attr {boolean} open - Whether the panel is open. Reflected: it changes as the user opens and dismisses it, so a server re-render or a history snapshot sees the live state. Set it (or the `open` property) to open or close the panel from script.
44
+ * @fires {CustomEvent<{ open: boolean }>} primitiv-popover-change - Bubbles, cancelable, fired before a user-driven change is applied — a trigger or close click, Escape, or a light dismiss — with the open state afterwards. Call `preventDefault()` to veto it.
45
+ */
46
+ export class PrimitivPopoverElement extends PrimitivRootElement {
47
+ /** The panel the root currently decorates, and the controller over it. */
48
+ #content = null;
49
+ #popover = null;
50
+ /** The decorated trigger and close buttons, and the anchor, as of the last reconcile. */
51
+ #trigger = null;
52
+ #anchor = null;
53
+ // Stryker disable next-line ArrayDeclaration: equivalent — the first reconcile runs as the root connects, before any click can reach it, and replaces it.
54
+ #closers = [];
55
+ /** The root's own click listener, while connected. */
56
+ #listening = null;
57
+ controller = {
58
+ connect: () => this.#connect(),
59
+ disconnect: () => this.#disconnect(),
60
+ };
61
+ reconcileOn = ["open"];
62
+ /** Whether the panel is open, reflected as the boolean `open` attribute. */
63
+ get open() {
64
+ return this.hasAttribute("open");
65
+ }
66
+ set open(next) {
67
+ this.toggleAttribute("open", next);
68
+ }
69
+ /** The controller's view of this element: state lives in the reflected attribute. */
70
+ #host() {
71
+ return {
72
+ state: () => ({ open: this.open }),
73
+ change: (open) => this.#change(open),
74
+ trigger: () => this.#trigger,
75
+ source: () => this.#anchor ?? this.#trigger,
76
+ };
77
+ }
78
+ /** A change the user asked for: announced first, so a listener can veto it. */
79
+ #change(open) {
80
+ if (open === this.open)
81
+ return;
82
+ if (this.announce("primitiv-popover-change", { open }))
83
+ this.open = open;
84
+ // A veto can leave the panel out of step — the browser is light-dismissing
85
+ // it — so put it back where the state says, once that dismissal is done.
86
+ else
87
+ queueMicrotask(() => this.#popover?.sync());
88
+ }
89
+ #connect() {
90
+ this.#listening = new AbortController();
91
+ this.addEventListener("click", (event) => this.#click(event), { signal: this.#listening.signal });
92
+ this.#popover?.connect();
93
+ }
94
+ #disconnect() {
95
+ // A root disconnects only after it connected, so it is listening.
96
+ this.#listening.abort();
97
+ this.#listening = null;
98
+ this.#popover?.disconnect();
99
+ }
100
+ #click(event) {
101
+ const target = event.target;
102
+ if (this.#trigger?.contains(target))
103
+ this.#change(!this.open);
104
+ else if (this.#closers.some((button) => button.contains(target)))
105
+ this.#change(false);
106
+ }
107
+ /**
108
+ * Decorate `content` from now on: the controller follows it. Only a
109
+ * reconcile calls this, and a root reconciles only while connected, so the
110
+ * new controller listens at once.
111
+ */
112
+ #use(content) {
113
+ // Stryker disable next-line ConditionalExpression: equivalent — rebuilding the controller over the same panel swaps one listener set for an identical one.
114
+ if (content === this.#content)
115
+ return;
116
+ this.#popover?.disconnect();
117
+ this.#content = content;
118
+ this.#popover = content ? new PopoverController(content, this.#host()) : null;
119
+ this.#popover?.connect();
120
+ }
121
+ reconcile() {
122
+ const open = this.open;
123
+ const state = open ? "open" : "closed";
124
+ const rootId = this.rootId();
125
+ write(this, "data-state", state);
126
+ const [content = null] = this.parts(CONTENT);
127
+ const [triggerPart] = this.parts(TRIGGER);
128
+ const [anchorPart] = this.parts(ANCHOR);
129
+ const [titlePart] = this.parts(TITLE);
130
+ const [descriptionPart] = this.parts(DESCRIPTION);
131
+ this.#trigger = triggerPart ? decoratable(triggerPart, "a <button>") : null;
132
+ this.#anchor = anchorPart ? decoratable(anchorPart, "the element to anchor to") : null;
133
+ const title = titlePart ? decoratable(titlePart, "a heading") : null;
134
+ const description = descriptionPart ? decoratable(descriptionPart, "a <p>") : null;
135
+ if (title && !title.id)
136
+ title.id = `${rootId}-title`;
137
+ if (description && !description.id)
138
+ description.id = `${rootId}-description`;
139
+ if (content) {
140
+ if (!content.id)
141
+ content.id = `${rootId}-content`;
142
+ write(content, "role", "dialog");
143
+ if (!content.hasAttribute("popover"))
144
+ content.setAttribute("popover", "auto");
145
+ write(content, "tabindex", "-1");
146
+ write(content, "data-state", state);
147
+ write(content, "aria-labelledby", title ? title.id : null);
148
+ write(content, "aria-describedby", description ? description.id : null);
149
+ }
150
+ if (this.#trigger) {
151
+ write(this.#trigger, "aria-haspopup", "dialog");
152
+ write(this.#trigger, "aria-expanded", String(open));
153
+ write(this.#trigger, "aria-controls", content ? content.id : null);
154
+ }
155
+ this.#closers = this.parts(CLOSE).flatMap((part) => decoratable(part, "a <button>") ?? []);
156
+ this.#use(content);
157
+ this.#popover?.sync();
158
+ }
159
+ }
160
+ /**
161
+ * `<primitiv-popover-trigger>` — an interactive part. It decorates exactly one
162
+ * child the consumer writes, a `<button>`, which toggles the panel and receives
163
+ * `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`, so the
164
+ * rendered DOM matches React's (RFC 0033 D24).
165
+ *
166
+ * @customElement primitiv-popover-trigger
167
+ */
168
+ export class PrimitivPopoverTriggerElement extends ElementBase {
169
+ }
170
+ /**
171
+ * `<primitiv-popover-anchor>` — optional. It decorates exactly one element the
172
+ * consumer writes, which the panel is anchored to in place of the trigger: a
173
+ * field, say, whose trigger is an icon inside it.
174
+ *
175
+ * @customElement primitiv-popover-anchor
176
+ */
177
+ export class PrimitivPopoverAnchorElement extends ElementBase {
178
+ }
179
+ /**
180
+ * `<primitiv-popover-content>` — the panel. Structural: the root gives it an
181
+ * id, `role="dialog"`, `popover="auto"` (write it in your markup too, so the
182
+ * panel is hidden before the script loads), `tabindex="-1"`, `data-state`, and
183
+ * `aria-labelledby` / `aria-describedby` pointing at the title and description.
184
+ *
185
+ * @customElement primitiv-popover-content
186
+ */
187
+ export class PrimitivPopoverContentElement extends ElementBase {
188
+ }
189
+ /**
190
+ * `<primitiv-popover-title>` — decorates exactly one heading the consumer
191
+ * writes, whose id becomes the panel's `aria-labelledby`.
192
+ *
193
+ * @customElement primitiv-popover-title
194
+ */
195
+ export class PrimitivPopoverTitleElement extends ElementBase {
196
+ }
197
+ /**
198
+ * `<primitiv-popover-description>` — decorates exactly one element the
199
+ * consumer writes (a `<p>`, usually), whose id becomes the panel's
200
+ * `aria-describedby`.
201
+ *
202
+ * @customElement primitiv-popover-description
203
+ */
204
+ export class PrimitivPopoverDescriptionElement extends ElementBase {
205
+ }
206
+ /**
207
+ * `<primitiv-popover-close>` — an interactive part. It decorates exactly one
208
+ * `<button>` the consumer writes, which closes the panel. A popover may have
209
+ * several.
210
+ *
211
+ * @customElement primitiv-popover-close
212
+ */
213
+ export class PrimitivPopoverCloseElement extends ElementBase {
214
+ }
215
+ /**
216
+ * Define the seven Popover elements on `registry` (the global `customElements`
217
+ * by default). Safe to call more than once, and a no-op where there is no
218
+ * registry (a server render).
219
+ */
220
+ export function definePopover(registry = globalThis.customElements) {
221
+ defineElements(registry, [
222
+ [ROOT, PrimitivPopoverElement],
223
+ [TRIGGER, PrimitivPopoverTriggerElement],
224
+ [ANCHOR, PrimitivPopoverAnchorElement],
225
+ [CONTENT, PrimitivPopoverContentElement],
226
+ [TITLE, PrimitivPopoverTitleElement],
227
+ [DESCRIPTION, PrimitivPopoverDescriptionElement],
228
+ [CLOSE, PrimitivPopoverCloseElement],
229
+ ]);
230
+ }
@@ -0,0 +1,2 @@
1
+ export { PopoverController, type PopoverControllerHost } from "./PopoverController.js";
2
+ export { definePopover, PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement, } from "./elements.js";
@@ -0,0 +1,2 @@
1
+ export { PopoverController } from "./PopoverController.js";
2
+ export { definePopover, PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement, } from "./elements.js";
@@ -1 +1 @@
1
- function h(e,t,o){return`${e}-${t}-${o}`}function C({orientation:e,dir:t,homeEnd:o=!1,activate:r=!1}){let s={};if(e==="horizontal"||e==="both"){let c=t==="rtl"?"ArrowLeft":"ArrowRight",a=t==="rtl"?"ArrowRight":"ArrowLeft";s[c]="next",s[a]="prev"}return(e==="vertical"||e==="both")&&(s.ArrowDown="next",s.ArrowUp="prev"),o&&(s.Home="first",s.End="last"),r&&(s.Enter="activate",s[" "]="activate"),s}function w({action:e,navigable:t,currentKey:o}){let r=t.length;if(r===0)return null;switch(e){case"activate":return{target:o};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let s=t.indexOf(o);if(s===-1)return null;let c=e==="next"?1:r-1;return{target:t[(s+c)%r]}}}}function B(e){return e.active??e.values[0]}function O(e,t){return e.disabled.has(t)||e.active===t?null:t}function q(e,t,o){let r=C({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o],s=w({action:r,navigable:e.values,currentKey:t});if(!s)return null;let c=s.target,a=e.activationMode==="automatic"||r==="activate";return{focus:c,activate:a?O(e,c):null}}function F(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 U(e,t,o){let r=C({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[o];if(r==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let s=e.values.filter(a=>!e.disabled.has(a)),c=w({action:r,navigable:s,currentKey:t});return c&&{focus:c.target,toggle:null}}function R(e){return e.disabled?null:!e.open}function W(e,t){if(t!=="Enter"&&t!==" ")return null;let o=R(e);return o===null?null:{open:o}}var b=class{#t;#e=new Map;#o=null;constructor(t){this.#t=t}registerTrigger(t,o,r={}){this.#e.set(o,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:o,element:r,disabled:s}of t)this.registerTrigger(o,r,{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.#i(o,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",o=>this.#i(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}#i(t,o){for(let[r,s]of this.#e)if(r.contains(t.target))return o.call(this,s,t)}};var x=class extends b{#t;constructor(t,o){super(t),this.#t=o}#e(t){let{expanded:o,multiple:r}=this.#t.state(),s=F({disabled:this.disabled(),expanded:o,multiple:r},t);s!==null&&this.#t.change(s)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,o){let{expanded:r,multiple:s,orientation:c,dir:a}=this.#t.state(),p=this.ordered(),l=p.map(([,d])=>d.value),i=U({values:l,disabled:this.disabled(),expanded:r,multiple:s,orientation:c,dir:a},t.value,o.key);i&&(o.preventDefault(),i.toggle!==null&&this.#e(i.toggle),i.focus!==null&&p[l.indexOf(i.focus)][0].focus())}};var g=globalThis.HTMLElement??class{};function n(e,t,o){e.getAttribute(t)!==o&&(o===null?e.removeAttribute(t):e.setAttribute(t,o))}var tt=new WeakSet;function f(e,t){tt.has(e)||(tt.add(e),console.error(t,e))}function v(e,t){if(e)for(let[o,r]of t)e.get(o)||e.define(o,r)}function y(e,t,o){return[...e.querySelectorAll(t)].filter(r=>r.closest(o)===e)}var lt=0,m=class extends g{#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}-${++lt}`)}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 at="primitiv-accordion",T="primitiv-accordion-item",_="primitiv-accordion-trigger",et="primitiv-accordion-content",ot="primitiv-accordion-trigger-icon";function ct(e){return(e??"").split(/\s+/).filter(Boolean)}function dt(e){return e.childElementCount===1?e.firstElementChild:(f(e,`<${_}> needs exactly one element child (a <button>) to decorate.`),null)}var M=class extends m{#t=new Set;#e=!1;controller=new x(this,this.#o());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return ct(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.#i(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#i(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),o=this.rootId();n(this,"data-orientation",this.#i());let r=[];for(let s of this.parts(T)){let c=s.getAttribute("value");if(c===null){f(s,`<${T}> needs a value, which pairs it with the root's value.`);continue}let a=t.has(c),p=a?"open":"closed",[l]=y(s,_,T),[i]=y(s,et,T),d=l?dt(l):null;if(d){let u=l.hasAttribute("disabled");r.push({value:c,element:d,disabled:u}),d.id||(d.id=h(o,"heading",c)),n(d,"aria-expanded",String(a)),n(d,"aria-disabled",String(u)),n(d,"data-disabled",String(u)),n(d,"data-state",p)}if(i){i.id||(i.id=h(o,"panel",c));let u=i.hasAttribute("force-mount");i.hasAttribute("role")||i.setAttribute("role","region"),n(i,"aria-labelledby",d?d.id:null),n(i,"hidden",a||u?null:""),n(i,"aria-hidden",a?null:"true"),n(i,"data-state",p),this.#e&&a&&!this.#t.has(c)&&i.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}d&&n(d,"aria-controls",i?i.id:null);for(let u of y(s,ot,T))n(u,"aria-hidden","true"),n(u,"data-state",p)}this.controller.setTriggers(r),this.#t=t,this.#e=!0}},H=class extends g{},K=class extends g{},L=class extends g{},S=class extends g{};function j(e=globalThis.customElements){v(e,[[at,M],[T,H],[_,K],[et,L],[ot,S]])}var E=class extends b{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let o=R({open:this.#t.state().open,disabled:t.disabled});o!==null&&this.#t.change(o)}onTriggerKeydown(t,o){let r=W({open:this.#t.state().open,disabled:t.disabled},o.key);r&&(o.preventDefault(),this.#t.change(r.open))}};var pt="primitiv-collapsible",V="primitiv-collapsible-trigger",it="primitiv-collapsible-content",nt="primitiv-collapsible-trigger-icon",ut="--primitiv-collapsible-collapsed-height";function gt(e){return e.childElementCount===1?e.firstElementChild:(f(e,`<${V}> needs exactly one element child (a <button>) to decorate.`),null)}function bt(e){return Number.isNaN(Number(e))?e:`${e}px`}function mt(e,t,o){e.style.getPropertyValue(t)!==o&&(e.style.setProperty(t,o),e.getAttribute("style")===""&&e.removeAttribute("style"))}var I=class extends m{#t;controller=new E(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",r=this.hasAttribute("disabled"),s=this.rootId();n(this,"data-state",o),n(this,"data-disabled",String(r));let[c]=this.parts(V),[a]=this.parts(it),p=c?gt(c):null;if(p&&(p.id||(p.id=`${s}-trigger`),n(p,"aria-expanded",String(t)),n(p,"aria-disabled",r?"true":null),n(p,"data-disabled",String(r)),n(p,"data-state",o)),a){a.id||(a.id=`${s}-content`);let l=a.getAttribute("collapsed-height"),i=l!==null,d=i||a.hasAttribute("force-mount");n(a,"hidden",t||d?null:""),n(a,"aria-hidden",t||i?null:"true"),n(a,"data-state",o),n(a,"data-disabled",String(r)),n(a,"data-clamped",i?"true":null),mt(a,ut,i?bt(l):""),t&&this.#t===!1&&a.dispatchEvent(new CustomEvent("primitiv-collapsible-show",{bubbles:!0}))}p&&n(p,"aria-controls",a?a.id:null);for(let l of this.parts(nt))n(l,"aria-hidden","true"),n(l,"data-state",o);this.controller.setTriggers(p?[{value:"trigger",element:p,disabled:r}]:[]),this.#t=t}},k=class extends g{},N=class extends g{},D=class extends g{};function J(e=globalThis.customElements){v(e,[[pt,I],[V,k],[it,N],[nt,D]])}var A=class extends b{#t;constructor(t,o){super(t),this.#t=o}onTriggerClick(t){let{active:o}=this.#t.state(),r=O({disabled:this.disabled(),active:o},t.value);if(r!==null){let s=this.ordered().map(([,c])=>c.value);this.#t.activate(r,s.indexOf(r))}}onTriggerKeydown(t,o){let{active:r,orientation:s,dir:c,activationMode:a}=this.#t.state(),p=this.ordered(),l=p.map(([,d])=>d.value),i=q({values:l,disabled:this.disabled(),active:r,orientation:s,dir:c,activationMode:a},t.value,o.key);i&&(o.preventDefault(),i.activate!==null&&this.#t.activate(i.activate,l.indexOf(i.activate)),p[l.indexOf(i.focus)][0].focus())}};var ht="primitiv-tabs",rt="primitiv-tabs-list",Q="primitiv-tabs-trigger",st="primitiv-tabs-content";function ft(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(f(e,`<${Q}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var P=class extends m{#t;#e=!1;controller=new A(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.#n(),dir:this.direction(),activationMode:this.#i()}),activate:(t,o)=>{this.announce("primitiv-tabs-change",{value:t,index:o})&&(this.value=t)}}}#i(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#n(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#n(),o=this.value,r=this.rootId();n(this,"data-orientation",t);for(let l of this.parts(rt)){n(l,"role","tablist"),n(l,"aria-orientation",t),n(l,"data-orientation",t);let i=l.getAttribute("label");i!==null&&n(l,"aria-label",i)}let s=new Map;for(let l of this.parts(st)){let i=l.getAttribute("value");i!==null&&s.set(i,l)}let c=this.parts(Q).flatMap(l=>{let i=ft(l);return i?[{trigger:l,...i}]:[]}),a=B({values:c.map(l=>l.value),active:o});this.controller.setTriggers(c.map(({trigger:l,tab:i,value:d})=>({value:d,element:i,disabled:l.hasAttribute("disabled")})));for(let{trigger:l,tab:i,value:d}of c){let u=s.get(d),Y=d===o,Z=l.hasAttribute("disabled");i.id||(i.id=h(r,"trigger",d)),u&&!u.id&&(u.id=h(r,"panel",d)),n(i,"role","tab"),n(i,"aria-selected",String(Y)),n(i,"aria-controls",u?u.id:null),n(i,"tabindex",d===a?"0":"-1"),n(i,"aria-disabled",Z?"true":null),n(i,"data-disabled",Z?"":null),n(i,"data-state",Y?"active":"inactive"),n(i,"data-orientation",t),u&&n(u,"aria-labelledby",i.id)}for(let[l,i]of s){let d=l===o;n(i,"role","tabpanel"),n(i,"tabindex","0"),n(i,"hidden",d?null:""),n(i,"data-state",d?"active":"inactive"),n(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}},$=class extends g{},G=class extends g{},z=class extends g{};function X(e=globalThis.customElements){v(e,[[ht,P],[rt,$],[Q,G],[st,z]])}j();J();X();export{x as AccordionController,E as CollapsibleController,L as PrimitivAccordionContentElement,M as PrimitivAccordionElement,H as PrimitivAccordionItemElement,K as PrimitivAccordionTriggerElement,S as PrimitivAccordionTriggerIconElement,N as PrimitivCollapsibleContentElement,I as PrimitivCollapsibleElement,k as PrimitivCollapsibleTriggerElement,D as PrimitivCollapsibleTriggerIconElement,z as PrimitivTabsContentElement,P as PrimitivTabsElement,$ as PrimitivTabsListElement,G as PrimitivTabsTriggerElement,A as TabsController,j as defineAccordion,J as defineCollapsible,X as defineTabs};
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};
package/dist/tags.d.ts CHANGED
@@ -14,6 +14,8 @@
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 { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "./modal/elements.js";
18
+ import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "./popover/elements.js";
17
19
  import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "./tabs/elements.js";
18
20
  declare global {
19
21
  interface HTMLElementTagNameMap {
@@ -26,6 +28,19 @@ declare global {
26
28
  "primitiv-collapsible-trigger": PrimitivCollapsibleTriggerElement;
27
29
  "primitiv-collapsible-content": PrimitivCollapsibleContentElement;
28
30
  "primitiv-collapsible-trigger-icon": PrimitivCollapsibleTriggerIconElement;
31
+ "primitiv-modal": PrimitivModalElement;
32
+ "primitiv-modal-trigger": PrimitivModalTriggerElement;
33
+ "primitiv-modal-content": PrimitivModalContentElement;
34
+ "primitiv-modal-title": PrimitivModalTitleElement;
35
+ "primitiv-modal-description": PrimitivModalDescriptionElement;
36
+ "primitiv-modal-close": PrimitivModalCloseElement;
37
+ "primitiv-popover": PrimitivPopoverElement;
38
+ "primitiv-popover-trigger": PrimitivPopoverTriggerElement;
39
+ "primitiv-popover-anchor": PrimitivPopoverAnchorElement;
40
+ "primitiv-popover-content": PrimitivPopoverContentElement;
41
+ "primitiv-popover-title": PrimitivPopoverTitleElement;
42
+ "primitiv-popover-description": PrimitivPopoverDescriptionElement;
43
+ "primitiv-popover-close": PrimitivPopoverCloseElement;
29
44
  "primitiv-tabs": PrimitivTabsElement;
30
45
  "primitiv-tabs-list": PrimitivTabsListElement;
31
46
  "primitiv-tabs-trigger": PrimitivTabsTriggerElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primitiv-ui/web",
3
- "version": "0.1.53",
3
+ "version": "0.1.55",
4
4
  "description": "Primitiv's headless components as standard custom elements: light DOM, no framework, no runtime dependencies. Works in plain HTML, server-rendered stacks, React, Vue, Angular and anything else that renders HTML.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -18,6 +18,14 @@
18
18
  "types": "./dist/collapsible/index.d.ts",
19
19
  "default": "./dist/collapsible/index.js"
20
20
  },
21
+ "./modal": {
22
+ "types": "./dist/modal/index.d.ts",
23
+ "default": "./dist/modal/index.js"
24
+ },
25
+ "./popover": {
26
+ "types": "./dist/popover/index.d.ts",
27
+ "default": "./dist/popover/index.js"
28
+ },
21
29
  "./tabs": {
22
30
  "types": "./dist/tabs/index.d.ts",
23
31
  "default": "./dist/tabs/index.js"
@@ -34,6 +42,14 @@
34
42
  "types": "./dist/define/collapsible.d.ts",
35
43
  "default": "./dist/define/collapsible.js"
36
44
  },
45
+ "./define/modal": {
46
+ "types": "./dist/define/modal.d.ts",
47
+ "default": "./dist/define/modal.js"
48
+ },
49
+ "./define/popover": {
50
+ "types": "./dist/define/popover.d.ts",
51
+ "default": "./dist/define/popover.js"
52
+ },
37
53
  "./define/tabs": {
38
54
  "types": "./dist/define/tabs.d.ts",
39
55
  "default": "./dist/define/tabs.js"
@@ -68,7 +84,7 @@
68
84
  "directory": "packages/web"
69
85
  },
70
86
  "dependencies": {
71
- "@primitiv-ui/core": "0.1.53"
87
+ "@primitiv-ui/core": "0.1.55"
72
88
  },
73
89
  "devDependencies": {
74
90
  "@custom-elements-manifest/analyzer": "0.11.0",
@@ -1 +0,0 @@
1
- function v(t,e,r){return`${t}-${e}-${r}`}function a({orientation:t,dir:e,homeEnd:r=!1,activate:n=!1}){let o={};if(t==="horizontal"||t==="both"){let i=e==="rtl"?"ArrowLeft":"ArrowRight",l=e==="rtl"?"ArrowRight":"ArrowLeft";o[i]="next",o[l]="prev"}return(t==="vertical"||t==="both")&&(o.ArrowDown="next",o.ArrowUp="prev"),r&&(o.Home="first",o.End="last"),n&&(o.Enter="activate",o[" "]="activate"),o}function s({action:t,navigable:e,currentKey:r}){let n=e.length;if(n===0)return null;switch(t){case"activate":return{target:r};case"first":return{target:e[0]};case"last":return{target:e[n-1]};case void 0:return null;case"next":case"prev":{let o=e.indexOf(r);if(o===-1)return null;let i=t==="next"?1:n-1;return{target:e[(o+i)%n]}}}}function f(t){return t.active??t.values[0]}function c(t,e){return t.disabled.has(e)||t.active===e?null:e}function m(t,e,r){let n=a({orientation:t.orientation,dir:t.dir,homeEnd:!0,activate:!0})[r],o=s({action:n,navigable:t.values,currentKey:e});if(!o)return null;let i=o.target,l=t.activationMode==="automatic"||n==="activate";return{focus:i,activate:l?c(t,i):null}}function T(t,e){return t.disabled.has(e)?null:t.expanded.includes(e)?t.expanded.filter(r=>r!==e):t.multiple?[...t.expanded,e]:[e]}function h(t,e,r){let n=a({orientation:t.orientation,dir:t.dir,homeEnd:!0,activate:!0})[r];if(n==="activate")return t.disabled.has(e)?null:{focus:null,toggle:e};let o=t.values.filter(l=>!t.disabled.has(l)),i=s({action:n,navigable:o,currentKey:e});return i&&{focus:i.target,toggle:null}}function d(t){return t.disabled?null:!t.open}function x(t,e){if(e!=="Enter"&&e!==" ")return null;let r=d(t);return r===null?null:{open:r}}var u=globalThis.HTMLElement??class{};function $(t,e,r){t.getAttribute(e)!==r&&(r===null?t.removeAttribute(e):t.setAttribute(e,r))}var g=new WeakSet;function z(t,e){g.has(t)||(g.add(t),console.error(e,t))}function G(t,e){if(t)for(let[r,n]of e)t.get(r)||t.define(r,n)}function p(t,e,r){return[...t.querySelectorAll(e)].filter(n=>n.closest(r)===t)}var A=0,b=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}-${++A}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(e){return p(this,e,this.localName)}announce(e,r){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}))}};var y=class{#t;#e=new Map;#r=null;constructor(e){this.#t=e}registerTrigger(e,r,n={}){this.#e.set(r,{value:e,disabled:n.disabled??!1})}setTriggers(e){this.#e.clear();for(let{value:r,element:n,disabled:o}of e)this.registerTrigger(r,n,{disabled:o})}unregisterTrigger(e){this.#e.delete(e)}connect(){if(this.#r)return;this.#r=new AbortController;let{signal:e}=this.#r;this.#t.addEventListener("click",r=>this.#n(r,this.onTriggerClick),{signal:e}),this.#t.addEventListener("keydown",r=>this.#n(r,this.onTriggerKeydown),{signal:e})}disconnect(){this.#r?.abort(),this.#r=null}ordered(){return[...this.#e].sort(([e],[r])=>e.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let e=new Set;for(let r of this.#e.values())r.disabled&&e.add(r.value);return e}#n(e,r){for(let[n,o]of this.#e)if(n.contains(e.target))return r.call(this,o,e)}};export{v as a,f as b,c,m as d,T as e,h as f,d as g,x as h,u as i,$ as j,z as k,G as l,p as m,b as n,y as o};