@primitiv-ui/web 0.0.0-stage → 0.1.42

package/dist/primitiv-web.js

@@ -0,0 +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};

package/dist/tabs/TabsController.d.ts

@@ -0,0 +1,57 @@
+import { type TabsActivationMode, type TabsOrientation, type TabsReadingDirection } from "@primitiv-ui/core";
+/**
+ * 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
+ * in reflected attributes, the React adapter keeps it in React, and each answers
+ * these two calls from wherever it keeps it.
+ */
+export type TabsControllerHost = {
+    /** The state the controller cannot see for itself. */
+    state(): {
+        active: string | undefined;
+        orientation: TabsOrientation;
+        dir: TabsReadingDirection;
+        activationMode: TabsActivationMode;
+    };
+    /** Apply an activation the user asked for. `index` is the tab's DOM position. */
+    activate(value: string, index: number): void;
+};
+/**
+ * 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).
+ */
+export declare class TabsController {
+    #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;
+}

package/dist/tabs/TabsController.js

@@ -0,0 +1,106 @@
+import { tabsClick, tabsKeydown, } from "@primitiv-ui/core";
+/**
+ * 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).
+ */
+export class TabsController {
+    #root;
+    #host;
+    #triggers = new Map();
+    #connection = null;
+    constructor(root, host) {
+        this.#root = 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;
+        const { active } = this.#host.state();
+        const target = tabsClick({ disabled: this.#disabled(), active }, trigger.value);
+        if (target !== null) {
+            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;
+        const { active, orientation, dir, activationMode } = this.#host.state();
+        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);
+        if (!outcome)
+            return;
+        event.preventDefault();
+        if (outcome.activate !== null) {
+            this.#host.activate(outcome.activate, values.indexOf(outcome.activate));
+        }
+        // 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

@@ -0,0 +1,78 @@
+/**
+ * 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;
+/**
+ * `<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.
+ *
+ * @customElement primitiv-tabs
+ * @summary The state owner of a WAI-ARIA tab set.
+ * @attr {string} value - The active tab's value. Reflected: it moves as the user switches tabs, so a server re-render or a history snapshot sees the live selection.
+ * @attr {"horizontal" | "vertical"} orientation - Layout axis, which picks the arrow-key pair. Defaults to `horizontal`.
+ * @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 {
+    #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;
+    /** The active tab's value, reflected as the `value` attribute. */
+    get value(): string | undefined;
+    set value(next: string);
+}
+/**
+ * `<primitiv-tabs-list>` — the tablist. Structural: the root writes its ARIA.
+ *
+ * @customElement primitiv-tabs-list
+ * @attr {string} label - The tablist's accessible name. Give this or `aria-labelledby`.
+ */
+export declare class PrimitivTabsListElement extends ElementBase {
+}
+/**
+ * `<primitiv-tabs-trigger>` — an interactive part. It decorates exactly one
+ * child the consumer writes (a `<button>`, an `<a href>`, a router link), which
+ * receives the tab role, so the rendered DOM matches React's `<button role="tab">`
+ * (RFC 0033 D24).
+ *
+ * @customElement primitiv-tabs-trigger
+ * @attr {string} value - The tab's value, pairing it with the panel of the same value.
+ * @attr {boolean} disabled - Marks the tab disabled: arrow keys still land on it, but it never activates.
+ */
+export declare class PrimitivTabsTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-tabs-content>` — a tab panel. Structural: the root writes its ARIA.
+ *
+ * @customElement primitiv-tabs-content
+ * @attr {string} value - The panel's value, pairing it with the tab of the same value.
+ * @fires {CustomEvent} primitiv-tabs-show - Bubbles from the panel as it becomes active (not on first render), so a lazy panel can fetch its content.
+ */
+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
+ * to call more than once, and a no-op where there is no registry (a server
+ * render).
+ */
+export declare function defineTabs(registry?: ElementRegistry | undefined): void;
+export {};

package/dist/tabs/elements.js

@@ -0,0 +1,265 @@
+import { deriveId, tabsTabStop, } from "@primitiv-ui/core";
+import { TabsController } from "./TabsController.js";
+/**
+ * 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).
+ */
+const ElementBase = globalThis.HTMLElement ?? class {
+};
+// Stryker disable StringLiteral: static — evaluated once at import, so runtime mutant switching never reaches them; the names are pinned by the defineTabs registry test instead.
+const ROOT = "primitiv-tabs";
+const LIST = "primitiv-tabs-list";
+const TRIGGER = "primitiv-tabs-trigger";
+const CONTENT = "primitiv-tabs-content";
+// Stryker restore StringLiteral
+let generatedIds = 0;
+/** Triggers already reported as misused, so each is reported once, not per reconcile. */
+const reported = new WeakSet();
+/**
+ * An interactive part decorates exactly one element child and needs a `value`.
+ * Anything else is reported once and left undecorated rather than thrown: a
+ * server-rendered page has no error boundary to catch a throw (RFC 0033 D24).
+ */
+function decoratable(trigger) {
+    const value = trigger.getAttribute("value");
+    if (trigger.childElementCount === 1 && value !== null) {
+        return { tab: trigger.firstElementChild, value };
+    }
+    if (!reported.has(trigger)) {
+        reported.add(trigger);
+        console.error(`<${TRIGGER}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`, trigger);
+    }
+    return null;
+}
+/**
+ * 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).
+ */
+function write(element, name, value) {
+    if (element.getAttribute(name) === value)
+        return;
+    if (value === null)
+        element.removeAttribute(name);
+    else
+        element.setAttribute(name, value);
+}
+/**
+ * `<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.
+ *
+ * @customElement primitiv-tabs
+ * @summary The state owner of a WAI-ARIA tab set.
+ * @attr {string} value - The active tab's value. Reflected: it moves as the user switches tabs, so a server re-render or a history snapshot sees the live selection.
+ * @attr {"horizontal" | "vertical"} orientation - Layout axis, which picks the arrow-key pair. Defaults to `horizontal`.
+ * @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 class PrimitivTabsElement extends ElementBase {
+    #generatedId;
+    /** The value of the panel last shown, so a change fires primitiv-tabs-show. */
+    #shown;
+    #rendered = false;
+    #controller = new TabsController(this, this.#host());
+    /**
+     * Watches the subtree for parts arriving, leaving, or changing the attributes
+     * the root reads. The root's own writes (role, aria-*, ids, data-*) are not in
+     * the filter, so reconciling never re-triggers itself.
+     */
+    #observer = new MutationObserver(() => this.#reconcile());
+    connectedCallback() {
+        this.#controller.connect();
+        this.#observer.observe(this, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["value", "disabled", "label", "orientation"],
+        });
+        this.#reconcile();
+    }
+    /**
+     * 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() {
+        this.#controller.disconnect();
+        this.#observer.disconnect();
+    }
+    /** The active tab's value, reflected as the `value` attribute. */
+    get value() {
+        return this.getAttribute("value") ?? undefined;
+    }
+    set value(next) {
+        this.setAttribute("value", next);
+    }
+    /**
+     * The controller's view of this element. State lives in reflected attributes;
+     * an activation is announced first, as a cancelable event, so a listener can
+     * veto it — the elements' equivalent of React's controlled mode (D7).
+     */
+    #host() {
+        return {
+            state: () => ({
+                active: this.value,
+                orientation: this.#orientation(),
+                // Stryker disable next-line StringLiteral: equivalent — core tests only for "rtl", so any other string reads as left-to-right.
+                dir: this.matches(":dir(rtl)") ? "rtl" : "ltr",
+                activationMode: this.#activationMode(),
+            }),
+            activate: (value, index) => {
+                const change = new CustomEvent("primitiv-tabs-change", {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: { value, index },
+                });
+                if (this.dispatchEvent(change))
+                    this.value = value;
+            },
+        };
+    }
+    #activationMode() {
+        const mode = this.getAttribute("activation-mode");
+        return mode === "manual" ? mode : "automatic";
+    }
+    #orientation() {
+        return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    }
+    /** Parts of this tab set only, never those of a nested one. */
+    #parts(selector) {
+        return [...this.querySelectorAll(selector)].filter((part) => part.closest(ROOT) === this);
+    }
+    #rootId() {
+        // Stryker disable next-line UpdateOperator: equivalent — counting down yields ids just as unique.
+        return this.id || (this.#generatedId ??= `${ROOT}-${++generatedIds}`);
+    }
+    #reconcile() {
+        const orientation = this.#orientation();
+        const active = this.value;
+        const rootId = this.#rootId();
+        write(this, "data-orientation", orientation);
+        for (const list of this.#parts(LIST)) {
+            write(list, "role", "tablist");
+            write(list, "aria-orientation", orientation);
+            write(list, "data-orientation", orientation);
+            const label = list.getAttribute("label");
+            if (label !== null)
+                write(list, "aria-label", label);
+        }
+        const panels = new Map();
+        for (const panel of this.#parts(CONTENT)) {
+            const value = panel.getAttribute("value");
+            if (value !== null)
+                panels.set(value, panel);
+        }
+        const triggers = this.#parts(TRIGGER).flatMap((trigger) => {
+            const part = decoratable(trigger);
+            return part ? [{ trigger, ...part }] : [];
+        });
+        const stop = tabsTabStop({ values: triggers.map((t) => t.value), active });
+        // Replace the registration wholesale: a removed part, or a trigger whose child
+        // a framework re-rendered, simply is not registered again.
+        this.#controller.setTriggers(triggers.map(({ trigger, tab, value }) => ({
+            value,
+            element: tab,
+            disabled: trigger.hasAttribute("disabled"),
+        })));
+        for (const { trigger, tab, value } of triggers) {
+            const panel = panels.get(value);
+            const selected = value === active;
+            const disabled = trigger.hasAttribute("disabled");
+            if (!tab.id)
+                tab.id = deriveId(rootId, "trigger", value);
+            if (panel && !panel.id)
+                panel.id = deriveId(rootId, "panel", value);
+            write(tab, "role", "tab");
+            write(tab, "aria-selected", String(selected));
+            write(tab, "aria-controls", panel ? panel.id : null);
+            write(tab, "tabindex", value === stop ? "0" : "-1");
+            write(tab, "aria-disabled", disabled ? "true" : null);
+            write(tab, "data-disabled", disabled ? "" : null);
+            write(tab, "data-state", selected ? "active" : "inactive");
+            write(tab, "data-orientation", orientation);
+            if (panel)
+                write(panel, "aria-labelledby", tab.id);
+        }
+        for (const [value, panel] of panels) {
+            const selected = value === active;
+            write(panel, "role", "tabpanel");
+            write(panel, "tabindex", "0");
+            write(panel, "hidden", selected ? null : "");
+            write(panel, "data-state", selected ? "active" : "inactive");
+            write(panel, "data-orientation", orientation);
+        }
+        // A panel that becomes active announces it, so a lazy panel can fetch its
+        // content (`hx-trigger="primitiv-tabs-show once"`, RFC 0033 D9). The first
+        // render shows what the server already rendered, so it announces nothing.
+        // `Map.get(undefined)` is simply undefined, so no tab active means no panel.
+        const shownPanel = panels.get(active);
+        if (this.#rendered && active !== this.#shown && shownPanel) {
+            shownPanel.dispatchEvent(new CustomEvent("primitiv-tabs-show", { bubbles: true }));
+        }
+        this.#shown = active;
+        this.#rendered = true;
+    }
+}
+/**
+ * `<primitiv-tabs-list>` — the tablist. Structural: the root writes its ARIA.
+ *
+ * @customElement primitiv-tabs-list
+ * @attr {string} label - The tablist's accessible name. Give this or `aria-labelledby`.
+ */
+export class PrimitivTabsListElement extends ElementBase {
+}
+/**
+ * `<primitiv-tabs-trigger>` — an interactive part. It decorates exactly one
+ * child the consumer writes (a `<button>`, an `<a href>`, a router link), which
+ * receives the tab role, so the rendered DOM matches React's `<button role="tab">`
+ * (RFC 0033 D24).
+ *
+ * @customElement primitiv-tabs-trigger
+ * @attr {string} value - The tab's value, pairing it with the panel of the same value.
+ * @attr {boolean} disabled - Marks the tab disabled: arrow keys still land on it, but it never activates.
+ */
+export class PrimitivTabsTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-tabs-content>` — a tab panel. Structural: the root writes its ARIA.
+ *
+ * @customElement primitiv-tabs-content
+ * @attr {string} value - The panel's value, pairing it with the tab of the same value.
+ * @fires {CustomEvent} primitiv-tabs-show - Bubbles from the panel as it becomes active (not on first render), so a lazy panel can fetch its content.
+ */
+export class PrimitivTabsContentElement extends ElementBase {
+}
+/**
+ * Define the four Tabs elements on `registry` (the global `customElements` by
+ * default, so a scoped registry can be passed when browsers support one). Safe
+ * to call more than once, and a no-op where there is no registry (a server
+ * render).
+ */
+export function defineTabs(registry = globalThis.customElements) {
+    if (!registry)
+        return;
+    const elements = [
+        [ROOT, PrimitivTabsElement],
+        [LIST, PrimitivTabsListElement],
+        [TRIGGER, PrimitivTabsTriggerElement],
+        [CONTENT, PrimitivTabsContentElement],
+    ];
+    for (const [name, element] of elements) {
+        if (!registry.get(name))
+            registry.define(name, element);
+    }
+}

package/dist/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { TabsController, type TabsControllerHost } from "./TabsController.js";
+export { defineTabs, PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement, type ElementRegistry, } from "./elements.js";

package/dist/tabs/index.js

@@ -0,0 +1,2 @@
+export { TabsController } from "./TabsController.js";
+export { defineTabs, PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement, } from "./elements.js";

package/dist/tags.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Opt-in TypeScript tag map: bring this module into scope and DOM APIs return
+ * the element classes for Primitiv's tags.
+ *
+ * ```ts
+ * import type {} from "@primitiv-ui/web/tags";
+ * document.querySelector("primitiv-tabs"); // PrimitivTabsElement | null
+ * ```
+ *
+ * or list `"@primitiv-ui/web/tags"` in `compilerOptions.types`.
+ *
+ * It is a separate, npm-only entry because it augments a global type, which
+ * JSR does not allow a published module to do (RFC 0033 §5.6.4).
+ */
+import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "./tabs/elements.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "primitiv-tabs": PrimitivTabsElement;
+        "primitiv-tabs-list": PrimitivTabsListElement;
+        "primitiv-tabs-trigger": PrimitivTabsTriggerElement;
+        "primitiv-tabs-content": PrimitivTabsContentElement;
+    }
+}
+export {};

package/dist/tags.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,105 @@
 {
   "name": "@primitiv-ui/web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.42",
+  "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.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.js"
+    },
+    "./define": {
+      "types": "./dist/define/index.d.ts",
+      "default": "./dist/define/index.js"
+    },
+    "./define/tabs": {
+      "types": "./dist/define/tabs.d.ts",
+      "default": "./dist/define/tabs.js"
+    },
+    "./tags": {
+      "types": "./dist/tags.d.ts",
+      "default": "./dist/tags.js"
+    },
+    "./react": {
+      "types": "./dist/frameworks/react.d.ts",
+      "default": "./dist/frameworks/react.js"
+    },
+    "./vue": {
+      "types": "./dist/frameworks/vue.d.ts",
+      "default": "./dist/frameworks/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/frameworks/svelte.d.ts",
+      "default": "./dist/frameworks/svelte.js"
+    }
+  },
+  "sideEffects": [
+    "./src/define/**",
+    "./dist/define/**"
+  ],
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/primitiv-ui/primitiv.git",
+    "directory": "packages/web"
+  },
+  "dependencies": {
+    "@primitiv-ui/core": "0.1.42"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@stryker-mutator/core": "9.6.1",
+    "@stryker-mutator/vitest-runner": "9.6.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@vitest/coverage-v8": "^4.1.4",
+    "esbuild": "^0.28.0",
+    "jsdom": "^29.0.2",
+    "svelte": "^5.46.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.4",
+    "vue": "^3.5.0",
+    "@primitiv-ui/conformance": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "dist/custom-elements.json",
+  "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "vue": "^3.3.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/finalize-dist.mjs dist && pnpm run build:bundle && pnpm run build:manifest",
+    "qa": "pnpm qa:units",
+    "qa:units": "vitest run --coverage",
+    "qa:units:watch": "vitest --coverage",
+    "mutate": "stryker run",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build:bundle": "esbuild src/bundle.ts --bundle --format=esm --minify --target=es2022 --outfile=dist/primitiv-web.js",
+    "size": "node scripts/check-size.mjs",
+    "build:manifest": "cem analyze --globs \"src/**/elements.ts\" --outdir dist",
+    "manifest:check": "node scripts/check-manifest.mjs"
+  }
 }