@primitiv-ui/web 0.1.43 → 0.1.44

package/dist/internal/RootElement.js

@@ -0,0 +1,59 @@
+import { ElementBase, owned } from "./element.js";
+/** Ids generated so far, shared by every root so no two ever collide. */
+let generatedIds = 0;
+/**
+ * The lifecycle every component's root element shares (RFC 0033 §5.4, D11).
+ *
+ * The root never caches its parts, so markup that arrives later is picked up on
+ * the next reconcile. One `MutationObserver` is the only trigger after connect:
+ * it sees parts arriving and leaving and every attribute in
+ * {@link PrimitivRootElement.reconcileOn | `reconcileOn`}, and it already
+ * delivers a task's changes as one callback, so no further batching is needed.
+ * The root's own writes (role, aria-*, ids, data-*) stay out of that list, so
+ * reconciling never re-triggers itself. Leaving the document stops all
+ * listening; a move (an `hx-preserve`, a framework reparenting) is a disconnect
+ * followed by a connect, so handlers never stack.
+ *
+ * A subclass supplies its controller, the attributes it reads, and the
+ * reconcile that writes its parts' ARIA. Internal — not an entry point.
+ */
+export class PrimitivRootElement extends ElementBase {
+    #generatedId;
+    #observer = new MutationObserver(() => this.reconcile());
+    connectedCallback() {
+        this.controller.connect();
+        this.#observer.observe(this, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: [...this.reconcileOn],
+        });
+        this.reconcile();
+    }
+    disconnectedCallback() {
+        this.controller.disconnect();
+        this.#observer.disconnect();
+    }
+    /** The root's id, or one generated once, which the parts' ids derive from. */
+    rootId() {
+        // Stryker disable next-line UpdateOperator: equivalent — counting down yields ids just as unique.
+        return this.id || (this.#generatedId ??= `${this.localName}-${++generatedIds}`);
+    }
+    /** The reading direction, from `:dir()`, so an inherited `dir` attribute applies (D8). */
+    direction() {
+        // Stryker disable next-line StringLiteral: equivalent — core tests only for "rtl", so any other string reads as left-to-right.
+        return this.matches(":dir(rtl)") ? "rtl" : "ltr";
+    }
+    /** This root's `selector` parts, never those of a nested root of the same kind. */
+    parts(selector) {
+        return owned(this, selector, this.localName);
+    }
+    /**
+     * Announce a user-driven change as a bubbling, cancelable `type` event fired
+     * before it applies, so a listener can veto it — the elements' equivalent of
+     * React's controlled mode (D7). Returns `false` when it was vetoed.
+     */
+    announce(type, detail) {
+        return this.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable: true, detail }));
+    }
+}

package/dist/internal/TriggerController.d.ts

@@ -0,0 +1,52 @@
+/** A registered trigger: its value, and whether it is disabled. */
+export type Trigger = {
+    value: string;
+    disabled: boolean;
+};
+/**
+ * What every component controller shares (RFC 0033 §3.4, D28): an ordered
+ * collection of triggers, and click and keydown listeners on the root that
+ * find the trigger an event belongs to. A subclass supplies only what a click
+ * and a key press on a trigger mean for its component; it owns no state, which
+ * stays with its host. Internal — the public face is each subclass.
+ */
+export declare abstract class TriggerController {
+    #private;
+    constructor(root: HTMLElement);
+    /**
+     * Register `element` as the trigger for `value`. Registration order does not
+     * matter: the collection follows DOM order, so parts that arrive in any order
+     * (a fragment swap, a framework render) line up. Registering an element again
+     * updates it.
+     */
+    registerTrigger(value: string, element: HTMLElement, options?: {
+        disabled?: boolean;
+    }): void;
+    /**
+     * Replace the whole collection in one call. A host that re-reads its parts on
+     * every change (the custom elements, the React adapter) hands over what it
+     * has now; a trigger missing from the list is simply no longer registered.
+     */
+    setTriggers(triggers: ReadonlyArray<{
+        value: string;
+        element: HTMLElement;
+        disabled?: boolean;
+    }>): void;
+    /** Remove `element` from the collection. */
+    unregisterTrigger(element: HTMLElement): void;
+    /**
+     * Start listening on the root. Connecting again while connected does nothing,
+     * so a host whose lifecycle runs twice never stacks a second set of handlers.
+     */
+    connect(): void;
+    /** Stop listening. The collection is kept, so a later `connect` resumes. */
+    disconnect(): void;
+    /** A click on `trigger`, or on something inside it. */
+    protected abstract onTriggerClick(trigger: Trigger, event: MouseEvent): void;
+    /** A key press on `trigger`, or on something inside it. */
+    protected abstract onTriggerKeydown(trigger: Trigger, event: KeyboardEvent): void;
+    /** Every registered trigger, in DOM order. */
+    protected ordered(): Array<[HTMLElement, Trigger]>;
+    /** The values of the disabled triggers. */
+    protected disabled(): Set<string>;
+}

package/dist/internal/TriggerController.js

@@ -0,0 +1,76 @@
+/**
+ * What every component controller shares (RFC 0033 §3.4, D28): an ordered
+ * collection of triggers, and click and keydown listeners on the root that
+ * find the trigger an event belongs to. A subclass supplies only what a click
+ * and a key press on a trigger mean for its component; it owns no state, which
+ * stays with its host. Internal — the public face is each subclass.
+ */
+export class TriggerController {
+    #root;
+    #triggers = new Map();
+    #connection = null;
+    constructor(root) {
+        this.#root = root;
+    }
+    /**
+     * Register `element` as the trigger for `value`. Registration order does not
+     * matter: the collection follows DOM order, so parts that arrive in any order
+     * (a fragment swap, a framework render) line up. Registering an element again
+     * updates it.
+     */
+    registerTrigger(value, element, options = {}) {
+        this.#triggers.set(element, { value, disabled: options.disabled ?? false });
+    }
+    /**
+     * Replace the whole collection in one call. A host that re-reads its parts on
+     * every change (the custom elements, the React adapter) hands over what it
+     * has now; a trigger missing from the list is simply no longer registered.
+     */
+    setTriggers(triggers) {
+        this.#triggers.clear();
+        for (const { value, element, disabled } of triggers) {
+            this.registerTrigger(value, element, { disabled });
+        }
+    }
+    /** Remove `element` from the collection. */
+    unregisterTrigger(element) {
+        this.#triggers.delete(element);
+    }
+    /**
+     * Start listening on the root. Connecting again while connected does nothing,
+     * so a host whose lifecycle runs twice never stacks a second set of handlers.
+     */
+    connect() {
+        if (this.#connection)
+            return;
+        this.#connection = new AbortController();
+        const { signal } = this.#connection;
+        this.#root.addEventListener("click", (event) => this.#dispatch(event, this.onTriggerClick), { signal });
+        this.#root.addEventListener("keydown", (event) => this.#dispatch(event, this.onTriggerKeydown), { signal });
+    }
+    /** Stop listening. The collection is kept, so a later `connect` resumes. */
+    disconnect() {
+        this.#connection?.abort();
+        this.#connection = null;
+    }
+    /** Every registered trigger, in DOM order. */
+    ordered() {
+        return [...this.#triggers].sort(([a], [b]) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+    }
+    /** The values of the disabled triggers. */
+    disabled() {
+        const disabled = new Set();
+        for (const trigger of this.#triggers.values()) {
+            if (trigger.disabled)
+                disabled.add(trigger.value);
+        }
+        return disabled;
+    }
+    /** Hand `event` to `handler` with the trigger it happened in, if any. */
+    #dispatch(event, handler) {
+        for (const [element, trigger] of this.#triggers) {
+            if (element.contains(event.target))
+                return handler.call(this, trigger, event);
+        }
+    }
+}

package/dist/internal/element.d.ts

@@ -0,0 +1,38 @@
+/**
+ * What every element module shares: the SSR-safe base class, the write-only-on-
+ * change helper, report-once misuse logging, and the define loop. Internal —
+ * not an entry point.
+ */
+/**
+ * The base class every element extends. It falls back to an empty class where
+ * the DOM does not exist, so a server renderer (Next.js, Nuxt, Angular SSR,
+ * Astro) can import an element module without `HTMLElement` throwing at load
+ * time (RFC 0033 D21).
+ */
+export declare const ElementBase: typeof HTMLElement;
+/**
+ * Write an attribute only when it would change: `null` removes it. The elements
+ * write only the attributes in their contract (RFC 0033 §5.3), and comparing
+ * first means a value a framework or the server already rendered is never
+ * rewritten (D20).
+ */
+export declare function write(element: Element, name: string, value: string | null): void;
+/**
+ * Report a misused part once, with the element attached so devtools can jump to
+ * it. Misuse is logged rather than thrown: a server-rendered page has no error
+ * boundary to catch a throw (RFC 0033 D24).
+ */
+export declare function reportOnce(element: Element, message: string): void;
+/** The two calls a `define<Component>` makes on a custom-element registry. */
+export type ElementRegistry = Pick<CustomElementRegistry, "get" | "define">;
+/**
+ * Define `elements` on `registry`, skipping any name already defined, so a
+ * define is safe to call more than once. A no-op where there is no registry (a
+ * server render).
+ */
+export declare function defineElements(registry: ElementRegistry | undefined, elements: ReadonlyArray<[string, CustomElementConstructor]>): void;
+/**
+ * The `selector` parts inside `scope` that belong to it, not to a nested
+ * `owner` — so a component nested in another's panel keeps its own parts.
+ */
+export declare function owned(scope: Element, selector: string, owner: string): HTMLElement[];

package/dist/internal/element.js

@@ -0,0 +1,60 @@
+/**
+ * What every element module shares: the SSR-safe base class, the write-only-on-
+ * change helper, report-once misuse logging, and the define loop. Internal —
+ * not an entry point.
+ */
+/**
+ * The base class every element extends. It falls back to an empty class where
+ * the DOM does not exist, so a server renderer (Next.js, Nuxt, Angular SSR,
+ * Astro) can import an element module without `HTMLElement` throwing at load
+ * time (RFC 0033 D21).
+ */
+export const ElementBase = globalThis.HTMLElement ?? class {
+};
+/**
+ * Write an attribute only when it would change: `null` removes it. The elements
+ * write only the attributes in their contract (RFC 0033 §5.3), and comparing
+ * first means a value a framework or the server already rendered is never
+ * rewritten (D20).
+ */
+export function write(element, name, value) {
+    if (element.getAttribute(name) === value)
+        return;
+    if (value === null)
+        element.removeAttribute(name);
+    else
+        element.setAttribute(name, value);
+}
+/** Parts already reported as misused, so each is reported once, not per reconcile. */
+const reported = new WeakSet();
+/**
+ * Report a misused part once, with the element attached so devtools can jump to
+ * it. Misuse is logged rather than thrown: a server-rendered page has no error
+ * boundary to catch a throw (RFC 0033 D24).
+ */
+export function reportOnce(element, message) {
+    if (reported.has(element))
+        return;
+    reported.add(element);
+    console.error(message, element);
+}
+/**
+ * Define `elements` on `registry`, skipping any name already defined, so a
+ * define is safe to call more than once. A no-op where there is no registry (a
+ * server render).
+ */
+export function defineElements(registry, elements) {
+    if (!registry)
+        return;
+    for (const [name, element] of elements) {
+        if (!registry.get(name))
+            registry.define(name, element);
+    }
+}
+/**
+ * The `selector` parts inside `scope` that belong to it, not to a nested
+ * `owner` — so a component nested in another's panel keeps its own parts.
+ */
+export function owned(scope, selector, owner) {
+    return [...scope.querySelectorAll(selector)].filter((part) => part.closest(owner) === scope);
+}

package/dist/primitiv-web.js

@@ -1 +1 @@
-function g(i,t,e){return`${i}-${t}-${e}`}function K({orientation:i,dir:t,homeEnd:e=!1,activate:o=!1}){let r={};if(i==="horizontal"||i==="both"){let l=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";r[l]="next",r[d]="prev"}return(i==="vertical"||i==="both")&&(r.ArrowDown="next",r.ArrowUp="prev"),e&&(r.Home="first",r.End="last"),o&&(r.Enter="activate",r[" "]="activate"),r}function C({action:i,navigable:t,currentKey:e}){let o=t.length;if(o===0)return null;switch(i){case"activate":return{target:e};case"first":return{target:t[0]};case"last":return{target:t[o-1]};case void 0:return null;case"next":case"prev":{let r=t.indexOf(e);if(r===-1)return null;let l=i==="next"?1:o-1;return{target:t[(r+l)%o]}}}}function x(i){return i.active??i.values[0]}function p(i,t){return i.disabled.has(t)||i.active===t?null:t}function A(i,t,e){let o=K({orientation:i.orientation,dir:i.dir,homeEnd:!0,activate:!0})[e],r=C({action:o,navigable:i.values,currentKey:t});if(!r)return null;let l=r.target,d=i.activationMode==="automatic"||o==="activate";return{focus:l,activate:d?p(i,l):null}}var v=class{#r;#i;#t=new Map;#e=null;constructor(t,e){this.#r=t,this.#i=e}registerTrigger(t,e,o={}){this.#t.set(e,{value:t,disabled:o.disabled??!1})}setTriggers(t){this.#t.clear();for(let{value:e,element:o,disabled:r}of t)this.registerTrigger(e,o,{disabled:r})}unregisterTrigger(t){this.#t.delete(t)}connect(){if(this.#e)return;this.#e=new AbortController;let{signal:t}=this.#e;this.#r.addEventListener("click",e=>this.#l(e),{signal:t}),this.#r.addEventListener("keydown",e=>this.#s(e),{signal:t})}disconnect(){this.#e?.abort(),this.#e=null}#o(){return[...this.#t].sort(([t],[e])=>t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}#a(){let t=new Set;for(let e of this.#t.values())e.disabled&&t.add(e.value);return t}#l(t){let e=this.#n(t.target);if(!e)return;let{active:o}=this.#i.state(),r=p({disabled:this.#a(),active:o},e.value);if(r!==null){let l=this.#o().map(([,d])=>d.value);this.#i.activate(r,l.indexOf(r))}}#s(t){let e=this.#n(t.target);if(!e)return;let{active:o,orientation:r,dir:l,activationMode:d}=this.#i.state(),b=this.#o(),a=b.map(([,c])=>c.value),n=A({values:a,disabled:this.#a(),active:o,orientation:r,dir:l,activationMode:d},e.value,t.key);n&&(t.preventDefault(),n.activate!==null&&this.#i.activate(n.activate,a.indexOf(n.activate)),b[a.indexOf(n.focus)][0].focus())}#n(t){for(let[e,o]of this.#t)if(e.contains(t))return o}};var y=globalThis.HTMLElement??class{},E="primitiv-tabs",H="primitiv-tabs-list",M="primitiv-tabs-trigger",k="primitiv-tabs-content",S=0,L=new WeakSet;function I(i){let t=i.getAttribute("value");return i.childElementCount===1&&t!==null?{tab:i.firstElementChild,value:t}:(L.has(i)||(L.add(i),console.error(`<${M}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`,i)),null)}function s(i,t,e){i.getAttribute(t)!==e&&(e===null?i.removeAttribute(t):i.setAttribute(t,e))}var f=class extends y{#r;#i;#t=!1;#e=new v(this,this.#a());#o=new MutationObserver(()=>this.#c());connectedCallback(){this.#e.connect(),this.#o.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["value","disabled","label","orientation"]}),this.#c()}disconnectedCallback(){this.#e.disconnect(),this.#o.disconnect()}get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#a(){return{state:()=>({active:this.value,orientation:this.#s(),dir:this.matches(":dir(rtl)")?"rtl":"ltr",activationMode:this.#l()}),activate:(t,e)=>{let o=new CustomEvent("primitiv-tabs-change",{bubbles:!0,cancelable:!0,detail:{value:t,index:e}});this.dispatchEvent(o)&&(this.value=t)}}}#l(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#s(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}#n(t){return[...this.querySelectorAll(t)].filter(e=>e.closest(E)===this)}#d(){return this.id||(this.#r??=`${E}-${++S}`)}#c(){let t=this.#s(),e=this.value,o=this.#d();s(this,"data-orientation",t);for(let a of this.#n(H)){s(a,"role","tablist"),s(a,"aria-orientation",t),s(a,"data-orientation",t);let n=a.getAttribute("label");n!==null&&s(a,"aria-label",n)}let r=new Map;for(let a of this.#n(k)){let n=a.getAttribute("value");n!==null&&r.set(n,a)}let l=this.#n(M).flatMap(a=>{let n=I(a);return n?[{trigger:a,...n}]:[]}),d=x({values:l.map(a=>a.value),active:e});this.#e.setTriggers(l.map(({trigger:a,tab:n,value:c})=>({value:c,element:n,disabled:a.hasAttribute("disabled")})));for(let{trigger:a,tab:n,value:c}of l){let u=r.get(c),w=c===e,O=a.hasAttribute("disabled");n.id||(n.id=g(o,"trigger",c)),u&&!u.id&&(u.id=g(o,"panel",c)),s(n,"role","tab"),s(n,"aria-selected",String(w)),s(n,"aria-controls",u?u.id:null),s(n,"tabindex",c===d?"0":"-1"),s(n,"aria-disabled",O?"true":null),s(n,"data-disabled",O?"":null),s(n,"data-state",w?"active":"inactive"),s(n,"data-orientation",t),u&&s(u,"aria-labelledby",n.id)}for(let[a,n]of r){let c=a===e;s(n,"role","tabpanel"),s(n,"tabindex","0"),s(n,"hidden",c?null:""),s(n,"data-state",c?"active":"inactive"),s(n,"data-orientation",t)}let b=r.get(e);this.#t&&e!==this.#i&&b&&b.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#i=e,this.#t=!0}},h=class extends y{},m=class extends y{},T=class extends y{};function R(i=globalThis.customElements){if(!i)return;let t=[[E,f],[H,h],[M,m],[k,T]];for(let[e,o]of t)i.get(e)||i.define(e,o)}R();export{T as PrimitivTabsContentElement,f as PrimitivTabsElement,h as PrimitivTabsListElement,m as PrimitivTabsTriggerElement,v as TabsController,R as defineTabs};
+function b(e,t,i){return`${e}-${t}-${i}`}function A({orientation:e,dir:t,homeEnd:i=!1,activate:r=!1}){let n={};if(e==="horizontal"||e==="both"){let c=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";n[c]="next",n[d]="prev"}return(e==="vertical"||e==="both")&&(n.ArrowDown="next",n.ArrowUp="prev"),i&&(n.Home="first",n.End="last"),r&&(n.Enter="activate",n[" "]="activate"),n}function E({action:e,navigable:t,currentKey:i}){let r=t.length;if(r===0)return null;switch(e){case"activate":return{target:i};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let n=t.indexOf(i);if(n===-1)return null;let c=e==="next"?1:r-1;return{target:t[(n+c)%r]}}}}function D(e){return e.active??e.values[0]}function R(e,t){return e.disabled.has(t)||e.active===t?null:t}function N(e,t,i){let r=A({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[i],n=E({action:r,navigable:e.values,currentKey:t});if(!n)return null;let c=n.target,d=e.activationMode==="automatic"||r==="activate";return{focus:c,activate:d?R(e,c):null}}function P(e,t){return e.disabled.has(t)?null:e.expanded.includes(t)?e.expanded.filter(i=>i!==t):e.multiple?[...e.expanded,t]:[t]}function $(e,t,i){let r=A({orientation:e.orientation,dir:e.dir,homeEnd:!0,activate:!0})[i];if(r==="activate")return e.disabled.has(t)?null:{focus:null,toggle:t};let n=e.values.filter(d=>!e.disabled.has(d)),c=E({action:r,navigable:n,currentKey:t});return c&&{focus:c.target,toggle:null}}var v=class{#t;#e=new Map;#i=null;constructor(t){this.#t=t}registerTrigger(t,i,r={}){this.#e.set(i,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#e.clear();for(let{value:i,element:r,disabled:n}of t)this.registerTrigger(i,r,{disabled:n})}unregisterTrigger(t){this.#e.delete(t)}connect(){if(this.#i)return;this.#i=new AbortController;let{signal:t}=this.#i;this.#t.addEventListener("click",i=>this.#o(i,this.onTriggerClick),{signal:t}),this.#t.addEventListener("keydown",i=>this.#o(i,this.onTriggerKeydown),{signal:t})}disconnect(){this.#i?.abort(),this.#i=null}ordered(){return[...this.#e].sort(([t],[i])=>t.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)}disabled(){let t=new Set;for(let i of this.#e.values())i.disabled&&t.add(i.value);return t}#o(t,i){for(let[r,n]of this.#e)if(r.contains(t.target))return i.call(this,n,t)}};var y=class extends v{#t;constructor(t,i){super(t),this.#t=i}#e(t){let{expanded:i,multiple:r}=this.#t.state(),n=P({disabled:this.disabled(),expanded:i,multiple:r},t);n!==null&&this.#t.change(n)}onTriggerClick(t){this.#e(t.value)}onTriggerKeydown(t,i){let{expanded:r,multiple:n,orientation:c,dir:d}=this.#t.state(),p=this.ordered(),s=p.map(([,l])=>l.value),o=$({values:s,disabled:this.disabled(),expanded:r,multiple:n,orientation:c,dir:d},t.value,i.key);o&&(i.preventDefault(),o.toggle!==null&&this.#e(o.toggle),o.focus!==null&&p[s.indexOf(o.focus)][0].focus())}};var g=globalThis.HTMLElement??class{};function a(e,t,i){e.getAttribute(t)!==i&&(i===null?e.removeAttribute(t):e.setAttribute(t,i))}var W=new WeakSet;function T(e,t){W.has(e)||(W.add(e),console.error(t,e))}function M(e,t){if(e)for(let[i,r]of t)e.get(i)||e.define(i,r)}function m(e,t,i){return[...e.querySelectorAll(t)].filter(r=>r.closest(i)===e)}var V=0,f=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}-${++V}`)}direction(){return this.matches(":dir(rtl)")?"rtl":"ltr"}parts(t){return m(this,t,this.localName)}announce(t,i){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:i}))}};var X="primitiv-accordion",h="primitiv-accordion-item",z="primitiv-accordion-trigger",_="primitiv-accordion-content",j="primitiv-accordion-trigger-icon";function Y(e){return(e??"").split(/\s+/).filter(Boolean)}function Z(e){return e.childElementCount===1?e.firstElementChild:(T(e,`<${z}> needs exactly one element child (a <button>) to decorate.`),null)}var O=class extends f{#t=new Set;#e=!1;controller=new y(this,this.#i());reconcileOn=["value","disabled","orientation","force-mount"];get value(){return Y(this.getAttribute("value"))}set value(t){this.setAttribute("value",typeof t=="string"?t:t.join(" "))}#i(){return{state:()=>({expanded:this.value,multiple:this.hasAttribute("multiple"),orientation:this.#o(),dir:this.direction()}),change:t=>{this.announce("primitiv-accordion-change",{value:t})&&(this.value=t)}}}#o(){return this.getAttribute("orientation")==="horizontal"?"horizontal":"vertical"}reconcile(){let t=new Set(this.value),i=this.rootId();a(this,"data-orientation",this.#o());let r=[];for(let n of this.parts(h)){let c=n.getAttribute("value");if(c===null){T(n,`<${h}> needs a value, which pairs it with the root's value.`);continue}let d=t.has(c),p=d?"open":"closed",[s]=m(n,z,h),[o]=m(n,_,h),l=s?Z(s):null;if(l){let u=s.hasAttribute("disabled");r.push({value:c,element:l,disabled:u}),l.id||(l.id=b(i,"heading",c)),a(l,"aria-expanded",String(d)),a(l,"aria-disabled",String(u)),a(l,"data-disabled",String(u)),a(l,"data-state",p)}if(o){o.id||(o.id=b(i,"panel",c));let u=o.hasAttribute("force-mount");o.hasAttribute("role")||o.setAttribute("role","region"),a(o,"aria-labelledby",l?l.id:null),a(o,"hidden",d||u?null:""),a(o,"aria-hidden",d?null:"true"),a(o,"data-state",p),this.#e&&d&&!this.#t.has(c)&&o.dispatchEvent(new CustomEvent("primitiv-accordion-show",{bubbles:!0}))}l&&a(l,"aria-controls",o?o.id:null);for(let u of m(n,j,h))a(u,"aria-hidden","true"),a(u,"data-state",p)}this.controller.setTriggers(r),this.#t=t,this.#e=!0}},w=class extends g{},C=class extends g{},K=class extends g{},H=class extends g{};function G(e=globalThis.customElements){M(e,[[X,O],[h,w],[z,C],[_,K],[j,H]])}var x=class extends v{#t;constructor(t,i){super(t),this.#t=i}onTriggerClick(t){let{active:i}=this.#t.state(),r=R({disabled:this.disabled(),active:i},t.value);if(r!==null){let n=this.ordered().map(([,c])=>c.value);this.#t.activate(r,n.indexOf(r))}}onTriggerKeydown(t,i){let{active:r,orientation:n,dir:c,activationMode:d}=this.#t.state(),p=this.ordered(),s=p.map(([,l])=>l.value),o=N({values:s,disabled:this.disabled(),active:r,orientation:n,dir:c,activationMode:d},t.value,i.key);o&&(i.preventDefault(),o.activate!==null&&this.#t.activate(o.activate,s.indexOf(o.activate)),p[s.indexOf(o.focus)][0].focus())}};var tt="primitiv-tabs",J="primitiv-tabs-list",B="primitiv-tabs-trigger",Q="primitiv-tabs-content";function et(e){let t=e.getAttribute("value");return e.childElementCount===1&&t!==null?{tab:e.firstElementChild,value:t}:(T(e,`<${B}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`),null)}var L=class extends f{#t;#e=!1;controller=new x(this,this.#i());reconcileOn=["value","disabled","label","orientation"];get value(){return this.getAttribute("value")??void 0}set value(t){this.setAttribute("value",t)}#i(){return{state:()=>({active:this.value,orientation:this.#n(),dir:this.direction(),activationMode:this.#o()}),activate:(t,i)=>{this.announce("primitiv-tabs-change",{value:t,index:i})&&(this.value=t)}}}#o(){let t=this.getAttribute("activation-mode");return t==="manual"?t:"automatic"}#n(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}reconcile(){let t=this.#n(),i=this.value,r=this.rootId();a(this,"data-orientation",t);for(let s of this.parts(J)){a(s,"role","tablist"),a(s,"aria-orientation",t),a(s,"data-orientation",t);let o=s.getAttribute("label");o!==null&&a(s,"aria-label",o)}let n=new Map;for(let s of this.parts(Q)){let o=s.getAttribute("value");o!==null&&n.set(o,s)}let c=this.parts(B).flatMap(s=>{let o=et(s);return o?[{trigger:s,...o}]:[]}),d=D({values:c.map(s=>s.value),active:i});this.controller.setTriggers(c.map(({trigger:s,tab:o,value:l})=>({value:l,element:o,disabled:s.hasAttribute("disabled")})));for(let{trigger:s,tab:o,value:l}of c){let u=n.get(l),F=l===i,U=s.hasAttribute("disabled");o.id||(o.id=b(r,"trigger",l)),u&&!u.id&&(u.id=b(r,"panel",l)),a(o,"role","tab"),a(o,"aria-selected",String(F)),a(o,"aria-controls",u?u.id:null),a(o,"tabindex",l===d?"0":"-1"),a(o,"aria-disabled",U?"true":null),a(o,"data-disabled",U?"":null),a(o,"data-state",F?"active":"inactive"),a(o,"data-orientation",t),u&&a(u,"aria-labelledby",o.id)}for(let[s,o]of n){let l=s===i;a(o,"role","tabpanel"),a(o,"tabindex","0"),a(o,"hidden",l?null:""),a(o,"data-state",l?"active":"inactive"),a(o,"data-orientation",t)}let p=n.get(i);this.#e&&i!==this.#t&&p&&p.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#t=i,this.#e=!0}},S=class extends g{},k=class extends g{},I=class extends g{};function q(e=globalThis.customElements){M(e,[[tt,L],[J,S],[B,k],[Q,I]])}G();q();export{y as AccordionController,K as PrimitivAccordionContentElement,O as PrimitivAccordionElement,w as PrimitivAccordionItemElement,C as PrimitivAccordionTriggerElement,H as PrimitivAccordionTriggerIconElement,I as PrimitivTabsContentElement,L as PrimitivTabsElement,S as PrimitivTabsListElement,k as PrimitivTabsTriggerElement,x as TabsController,G as defineAccordion,q as defineTabs};

package/dist/tabs/TabsController.d.ts

@@ -1,4 +1,5 @@
 import { type TabsActivationMode, type TabsOrientation, type TabsReadingDirection } from "@primitiv-ui/core";
+import { TriggerController, type Trigger } from "../internal/TriggerController.js";
 /**
  * What a {@link TabsController} asks of whoever hosts it. The controller owns
  * behaviour and never owns state (RFC 0033 D28): the custom elements keep state
@@ -20,38 +21,12 @@ export type TabsControllerHost = {
  * The DOM behaviour of a tab set: listening, focus, and the ordered collection
  * of triggers. It attaches to whatever elements register with it, so the same
  * code runs under the custom elements and under the React adapter, which renders
- * its own markup (RFC 0033 §3.4).
+ * its own markup (RFC 0033 §3.4). A disabled trigger stays in the collection —
+ * arrow keys land on it — but is never activated.
  */
-export declare class TabsController {
+export declare class TabsController extends TriggerController {
     #private;
     constructor(root: HTMLElement, host: TabsControllerHost);
-    /**
-     * Register `element` as the trigger for `value`. A disabled trigger is still
-     * part of the collection — arrow keys land on it — but is never activated.
-     * Registration order does not matter: the collection follows DOM order, so
-     * parts that arrive in any order (a fragment swap, a framework render) line up.
-     * Registering an element again updates it.
-     */
-    registerTrigger(value: string, element: HTMLElement, options?: {
-        disabled?: boolean;
-    }): void;
-    /**
-     * Replace the whole collection in one call. A host that re-reads its parts on
-     * every change (the custom elements, the React adapter) hands over what it
-     * has now; a trigger missing from the list is simply no longer registered.
-     */
-    setTriggers(triggers: ReadonlyArray<{
-        value: string;
-        element: HTMLElement;
-        disabled?: boolean;
-    }>): void;
-    /** Remove `element` from the collection. */
-    unregisterTrigger(element: HTMLElement): void;
-    /**
-     * Start listening on the root. Connecting again while connected does nothing,
-     * so a host whose lifecycle runs twice never stacks a second set of handlers.
-     */
-    connect(): void;
-    /** Stop listening. The collection is kept, so a later `connect` resumes. */
-    disconnect(): void;
+    protected onTriggerClick(trigger: Trigger): void;
+    protected onTriggerKeydown(trigger: Trigger, event: KeyboardEvent): void;
 }

package/dist/tabs/TabsController.js

@@ -1,92 +1,31 @@
 import { tabsClick, tabsKeydown, } from "@primitiv-ui/core";
+import { TriggerController } from "../internal/TriggerController.js";
 /**
  * The DOM behaviour of a tab set: listening, focus, and the ordered collection
  * of triggers. It attaches to whatever elements register with it, so the same
  * code runs under the custom elements and under the React adapter, which renders
- * its own markup (RFC 0033 §3.4).
+ * its own markup (RFC 0033 §3.4). A disabled trigger stays in the collection —
+ * arrow keys land on it — but is never activated.
  */
-export class TabsController {
-    #root;
+export class TabsController extends TriggerController {
     #host;
-    #triggers = new Map();
-    #connection = null;
     constructor(root, host) {
-        this.#root = root;
+        super(root);
         this.#host = host;
     }
-    /**
-     * Register `element` as the trigger for `value`. A disabled trigger is still
-     * part of the collection — arrow keys land on it — but is never activated.
-     * Registration order does not matter: the collection follows DOM order, so
-     * parts that arrive in any order (a fragment swap, a framework render) line up.
-     * Registering an element again updates it.
-     */
-    registerTrigger(value, element, options = {}) {
-        this.#triggers.set(element, { value, disabled: options.disabled ?? false });
-    }
-    /**
-     * Replace the whole collection in one call. A host that re-reads its parts on
-     * every change (the custom elements, the React adapter) hands over what it
-     * has now; a trigger missing from the list is simply no longer registered.
-     */
-    setTriggers(triggers) {
-        this.#triggers.clear();
-        for (const { value, element, disabled } of triggers) {
-            this.registerTrigger(value, element, { disabled });
-        }
-    }
-    /** Remove `element` from the collection. */
-    unregisterTrigger(element) {
-        this.#triggers.delete(element);
-    }
-    /**
-     * Start listening on the root. Connecting again while connected does nothing,
-     * so a host whose lifecycle runs twice never stacks a second set of handlers.
-     */
-    connect() {
-        if (this.#connection)
-            return;
-        this.#connection = new AbortController();
-        const { signal } = this.#connection;
-        this.#root.addEventListener("click", (event) => this.#onClick(event), { signal });
-        this.#root.addEventListener("keydown", (event) => this.#onKeydown(event), { signal });
-    }
-    /** Stop listening. The collection is kept, so a later `connect` resumes. */
-    disconnect() {
-        this.#connection?.abort();
-        this.#connection = null;
-    }
-    /** Every registered trigger, in DOM order. */
-    #ordered() {
-        return [...this.#triggers].sort(([a], [b]) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
-    }
-    #disabled() {
-        const disabled = new Set();
-        for (const trigger of this.#triggers.values()) {
-            if (trigger.disabled)
-                disabled.add(trigger.value);
-        }
-        return disabled;
-    }
-    #onClick(event) {
-        const trigger = this.#triggerFor(event.target);
-        if (!trigger)
-            return;
+    onTriggerClick(trigger) {
         const { active } = this.#host.state();
-        const target = tabsClick({ disabled: this.#disabled(), active }, trigger.value);
+        const target = tabsClick({ disabled: this.disabled(), active }, trigger.value);
         if (target !== null) {
-            const values = this.#ordered().map(([, t]) => t.value);
+            const values = this.ordered().map(([, t]) => t.value);
             this.#host.activate(target, values.indexOf(target));
         }
     }
-    #onKeydown(event) {
-        const trigger = this.#triggerFor(event.target);
-        if (!trigger)
-            return;
+    onTriggerKeydown(trigger, event) {
         const { active, orientation, dir, activationMode } = this.#host.state();
-        const ordered = this.#ordered();
+        const ordered = this.ordered();
         const values = ordered.map(([, t]) => t.value);
-        const outcome = tabsKeydown({ values, disabled: this.#disabled(), active, orientation, dir, activationMode }, trigger.value, event.key);
+        const outcome = tabsKeydown({ values, disabled: this.disabled(), active, orientation, dir, activationMode }, trigger.value, event.key);
         if (!outcome)
             return;
         event.preventDefault();
@@ -96,11 +35,4 @@ export class TabsController {
         // The focus target is always one of `values`, so its index is always valid.
         ordered[values.indexOf(outcome.focus)][0].focus();
     }
-    #triggerFor(target) {
-        for (const [element, trigger] of this.#triggers) {
-            if (element.contains(target))
-                return trigger;
-        }
-        return undefined;
-    }
 }

package/dist/tabs/elements.d.ts

@@ -1,21 +1,15 @@
-/**
- * The base class every element extends. It falls back to an empty class where
- * the DOM does not exist, so a server renderer (Next.js, Nuxt, Angular SSR,
- * Astro) can import this module without `HTMLElement` throwing at load time
- * (RFC 0033 D21).
- */
-declare const ElementBase: typeof HTMLElement;
+import { ElementBase, type ElementRegistry } from "../internal/element.js";
+import { PrimitivRootElement } from "../internal/RootElement.js";
+import { TabsController } from "./TabsController.js";
+export type { ElementRegistry };
 /**
  * `<primitiv-tabs>` — the state owner of a WAI-ARIA tab set.
  *
- * The root finds its own parts, scoped with `closest()` so a tab set nested in a
- * panel keeps its own, and reconciles their ARIA from its reflected state. It
- * never caches the parts, so markup that arrives later is picked up on the next
- * reconcile. One `MutationObserver` is the only trigger after connect: it sees
- * parts arriving and leaving, and every attribute the root reads, including the
- * root's own `value` and `orientation`, and it already delivers a task's changes
- * as one callback, so no further batching is needed. `activation-mode` is read
- * live at each key press, so a change to it needs no reconcile.
+ * The root finds its own parts, so a tab set nested in a panel keeps its own,
+ * and reconciles their ARIA from its reflected state whenever a part arrives,
+ * leaves, or changes an attribute the root reads (the lifecycle is
+ * `PrimitivRootElement`'s). `activation-mode` is read live at each key press,
+ * so a change to it needs no reconcile.
  *
  * @customElement primitiv-tabs
  * @summary The state owner of a WAI-ARIA tab set.
@@ -24,18 +18,14 @@ declare const ElementBase: typeof HTMLElement;
  * @attr {"automatic" | "manual"} activation-mode - `automatic` activates a tab as focus arrives; `manual` waits for Enter or Space. Defaults to `automatic`.
  * @fires {CustomEvent<{ value: string; index: number }>} primitiv-tabs-change - Bubbles, cancelable, fired before a user-driven change is applied. Call `preventDefault()` to veto it.
  */
-export declare class PrimitivTabsElement extends ElementBase {
+export declare class PrimitivTabsElement extends PrimitivRootElement {
     #private;
-    connectedCallback(): void;
-    /**
-     * Leaving the document stops all listening. A move (an `hx-preserve`, a
-     * framework reparenting) is a disconnect followed by a connect, so handlers
-     * never stack.
-     */
-    disconnectedCallback(): void;
+    protected readonly controller: TabsController;
+    protected readonly reconcileOn: readonly string[];
     /** The active tab's value, reflected as the `value` attribute. */
     get value(): string | undefined;
     set value(next: string);
+    protected reconcile(): void;
 }
 /**
  * `<primitiv-tabs-list>` — the tablist. Structural: the root writes its ARIA.
@@ -66,8 +56,6 @@ export declare class PrimitivTabsTriggerElement extends ElementBase {
  */
 export declare class PrimitivTabsContentElement extends ElementBase {
 }
-/** The two calls `defineTabs` makes on a custom-element registry. */
-export type ElementRegistry = Pick<CustomElementRegistry, "get" | "define">;
 /**
  * Define the four Tabs elements on `registry` (the global `customElements` by
  * default, so a scoped registry can be passed when browsers support one). Safe
@@ -75,4 +63,3 @@ export type ElementRegistry = Pick<CustomElementRegistry, "get" | "define">;
  * render).
  */
 export declare function defineTabs(registry?: ElementRegistry | undefined): void;
-export {};