@primitiv-ui/web 0.0.0-stage → 0.1.43

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Simon Revill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# @primitiv-ui/web
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Primitiv's headless components as **standard custom elements**: light DOM, no
+framework and no runtime dependencies beyond
+[`@primitiv-ui/core`](../core/README.md). They work in a plain HTML page, any
+server-rendered stack (HTMX, Rails, Django, Laravel, Spring …), and inside
+React, Vue, Angular or any other framework.
+
+> **Status: publish-ready, first release pending.** Tabs is the first
+> component. See [RFC 0033](../../docs/rfcs/0033-web-components.md) for the
+> design.
+
+## Use it
+
+**No build step** — one script tag per component defines that component's
+elements and nothing else:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/cdn/tabs.js"></script>
+
+<primitiv-tabs value="overview">
+  <primitiv-tabs-list label="Account sections">
+    <primitiv-tabs-trigger value="overview"><button type="button">Overview</button></primitiv-tabs-trigger>
+    <primitiv-tabs-trigger value="billing"><button type="button">Billing</button></primitiv-tabs-trigger>
+  </primitiv-tabs-list>
+  <primitiv-tabs-content value="overview">…</primitiv-tabs-content>
+  <primitiv-tabs-content value="billing" hidden>…</primitiv-tabs-content>
+</primitiv-tabs>
+```
+
+**With a bundler** — import a `define` entry once, anywhere:
+
+```ts
+import "@primitiv-ui/web/define/tabs";  // one component's elements
+import "@primitiv-ui/web/define";       // or every element
+```
+
+Each `dist/cdn/<component>.js` imports the code components share from
+`dist/cdn/chunks/` by a relative URL, so a page that loads two components
+downloads it once. `dist/primitiv-web.js` is the alternative: every element in
+one file. Per-component files ship from 0.1.43.
+
+The main entry (`@primitiv-ui/web`, `/tabs`) exports the classes and
+`defineTabs(registry?)` with **no side effects**.
+
+**Render `hidden` on inactive panels yourself.** Until the module loads, CSS
+cannot tell which panel is active, so markup that omits it shows every panel.
+
+**Listen with `primitiv-tabs-change`** (bubbles, cancelable, `detail: { value,
+index }`) — call `preventDefault()` to veto a change — and `primitiv-tabs-show`
+on a panel as it becomes active, for lazy loading.
+
+**TypeScript** — opt into the tag map so DOM queries return the element classes:
+`import type {} from "@primitiv-ui/web/tags"` (npm only).
+
+**React 19 JSX** — `import type {} from "@primitiv-ui/web/react"` types the
+tags, their attributes and the raw `onprimitiv-tabs-change` handler (npm only).
+React 19 passes a custom element's event prop to `addEventListener` exactly as
+written, which is why the prop reads that way; most React projects want
+`@primitiv-ui/react`, whose `onValueChange` is the idiomatic name.
+
+**Vue 3 templates** — `import type {} from "@primitiv-ui/web/vue"` lets
+`vue-tsc` check each tag's attributes and its `@primitiv-tabs-change` handler
+(npm only). Also tell Vue's compiler the tags are custom elements:
+`compilerOptions.isCustomElement: (tag) => tag.startsWith("primitiv-")`.
+
+**Svelte 5 templates** — `import type {} from "@primitiv-ui/web/svelte"` lets
+`svelte-check` check each tag's attributes and its `onprimitiv-tabs-change`
+handler (npm only). Svelte needs no other setup: it renders unknown tags as
+custom elements already.
+
+**Angular** — add `CUSTOM_ELEMENTS_SCHEMA` to the component's `schemas`, bind
+the value as a property (`[value]="value()"`), the other options as attributes
+(`[attr.activation-mode]="mode"`), and listen with
+`(primitiv-tabs-change)="onChange($event)"`. There is no typing entry: Angular
+types a custom element's `$event` as `Event`, so cast it to
+`CustomEvent<{ value: string; index: number }>` in the handler.
+
+**Tooling** — `dist/custom-elements.json` is a Custom Elements Manifest, listed
+as `customElements` in `package.json`, for editor completion and Storybook.
+
+The elements write no `class` and no `style`. For the registry look, apply the
+`primitiv-tabs*` classes from the registry stylesheet to your markup.
+
+## Layers
+
+- **Controllers** (`TabsController`) hold a component's DOM behaviour —
+  listeners, focus, the ordered collection of parts — and attach to whatever
+  elements register with them. They never own state; their host does.
+- **Element hosts** (`<primitiv-tabs>` …) are the public face: they keep state
+  in reflected attributes and write the ARIA. The React adapter in
+  `@primitiv-ui/react` is a second host over the same controllers.

package/dist/bundle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The single-file browser bundle (`dist/primitiv-web.js`, core inlined) for
+ * pages with no build step:
+ *
+ * ```html
+ * <script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/primitiv-web.js"></script>
+ * ```
+ *
+ * Loading it defines every element and exports every class. To load one
+ * component only, use its `dist/cdn/<component>.js` (scripts/build-cdn.mjs).
+ */
+export * from "./index.js";
+import "./define/index.js";

package/dist/bundle.js

@@ -0,0 +1,13 @@
+/**
+ * The single-file browser bundle (`dist/primitiv-web.js`, core inlined) for
+ * pages with no build step:
+ *
+ * ```html
+ * <script type="module" src="https://cdn.jsdelivr.net/npm/@primitiv-ui/web@<version>/dist/primitiv-web.js"></script>
+ * ```
+ *
+ * Loading it defines every element and exports every class. To load one
+ * component only, use its `dist/cdn/<component>.js` (scripts/build-cdn.mjs).
+ */
+export * from "./index.js";
+import "./define/index.js";

package/dist/cdn/tabs.js

@@ -0,0 +1 @@
+function b(i,t,e){return`${i}-${t}-${e}`}function O({orientation:i,dir:t,homeEnd:e=!1,activate:r=!1}){let o={};if(i==="horizontal"||i==="both"){let l=t==="rtl"?"ArrowLeft":"ArrowRight",d=t==="rtl"?"ArrowRight":"ArrowLeft";o[l]="next",o[d]="prev"}return(i==="vertical"||i==="both")&&(o.ArrowDown="next",o.ArrowUp="prev"),e&&(o.Home="first",o.End="last"),r&&(o.Enter="activate",o[" "]="activate"),o}function K({action:i,navigable:t,currentKey:e}){let r=t.length;if(r===0)return null;switch(i){case"activate":return{target:e};case"first":return{target:t[0]};case"last":return{target:t[r-1]};case void 0:return null;case"next":case"prev":{let o=t.indexOf(e);if(o===-1)return null;let l=i==="next"?1:r-1;return{target:t[(o+l)%r]}}}}function h(i){return i.active??i.values[0]}function g(i,t){return i.disabled.has(t)||i.active===t?null:t}function T(i,t,e){let r=O({orientation:i.orientation,dir:i.dir,homeEnd:!0,activate:!0})[e],o=K({action:r,navigable:i.values,currentKey:t});if(!o)return null;let l=o.target,d=i.activationMode==="automatic"||r==="activate";return{focus:l,activate:d?g(i,l):null}}var p=class{#o;#i;#t=new Map;#e=null;constructor(t,e){this.#o=t,this.#i=e}registerTrigger(t,e,r={}){this.#t.set(e,{value:t,disabled:r.disabled??!1})}setTriggers(t){this.#t.clear();for(let{value:e,element:r,disabled:o}of t)this.registerTrigger(e,r,{disabled:o})}unregisterTrigger(t){this.#t.delete(t)}connect(){if(this.#e)return;this.#e=new AbortController;let{signal:t}=this.#e;this.#o.addEventListener("click",e=>this.#l(e),{signal:t}),this.#o.addEventListener("keydown",e=>this.#s(e),{signal:t})}disconnect(){this.#e?.abort(),this.#e=null}#r(){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:r}=this.#i.state(),o=g({disabled:this.#a(),active:r},e.value);if(o!==null){let l=this.#r().map(([,d])=>d.value);this.#i.activate(o,l.indexOf(o))}}#s(t){let e=this.#n(t.target);if(!e)return;let{active:r,orientation:o,dir:l,activationMode:d}=this.#i.state(),v=this.#r(),a=v.map(([,c])=>c.value),n=T({values:a,disabled:this.#a(),active:r,orientation:o,dir:l,activationMode:d},e.value,t.key);n&&(t.preventDefault(),n.activate!==null&&this.#i.activate(n.activate,a.indexOf(n.activate)),v[a.indexOf(n.focus)][0].focus())}#n(t){for(let[e,r]of this.#t)if(e.contains(t))return r}};var f=globalThis.HTMLElement??class{},m="primitiv-tabs",H="primitiv-tabs-list",E="primitiv-tabs-trigger",C="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(`<${E}> 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 y=class extends f{#o;#i;#t=!1;#e=new p(this,this.#a());#r=new MutationObserver(()=>this.#c());connectedCallback(){this.#e.connect(),this.#r.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["value","disabled","label","orientation"]}),this.#c()}disconnectedCallback(){this.#e.disconnect(),this.#r.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 r=new CustomEvent("primitiv-tabs-change",{bubbles:!0,cancelable:!0,detail:{value:t,index:e}});this.dispatchEvent(r)&&(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(m)===this)}#d(){return this.id||(this.#o??=`${m}-${++S}`)}#c(){let t=this.#s(),e=this.value,r=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 o=new Map;for(let a of this.#n(C)){let n=a.getAttribute("value");n!==null&&o.set(n,a)}let l=this.#n(E).flatMap(a=>{let n=I(a);return n?[{trigger:a,...n}]:[]}),d=h({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=o.get(c),R=c===e,w=a.hasAttribute("disabled");n.id||(n.id=b(r,"trigger",c)),u&&!u.id&&(u.id=b(r,"panel",c)),s(n,"role","tab"),s(n,"aria-selected",String(R)),s(n,"aria-controls",u?u.id:null),s(n,"tabindex",c===d?"0":"-1"),s(n,"aria-disabled",w?"true":null),s(n,"data-disabled",w?"":null),s(n,"data-state",R?"active":"inactive"),s(n,"data-orientation",t),u&&s(u,"aria-labelledby",n.id)}for(let[a,n]of o){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 v=o.get(e);this.#t&&e!==this.#i&&v&&v.dispatchEvent(new CustomEvent("primitiv-tabs-show",{bubbles:!0})),this.#i=e,this.#t=!0}},x=class extends f{},A=class extends f{},M=class extends f{};function k(i=globalThis.customElements){if(!i)return;let t=[[m,y],[H,x],[E,A],[C,M]];for(let[e,r]of t)i.get(e)||i.define(e,r)}k();

package/dist/custom-elements.json

@@ -0,0 +1,314 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/tabs/elements.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`<primitiv-tabs>` — the state owner of a WAI-ARIA tab set.\n\nThe root finds its own parts, scoped with `closest()` so a tab set nested in a\npanel keeps its own, and reconciles their ARIA from its reflected state. It\nnever caches the parts, so markup that arrives later is picked up on the next\nreconcile. One `MutationObserver` is the only trigger after connect: it sees\nparts arriving and leaving, and every attribute the root reads, including the\nroot's own `value` and `orientation`, and it already delivers a task's changes\nas one callback, so no further batching is needed. `activation-mode` is read\nlive at each key press, so a change to it needs no reconcile.",
+          "name": "PrimitivTabsElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#generatedId",
+              "privacy": "private",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#shown",
+              "privacy": "private",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The value of the panel last shown, so a change fires primitiv-tabs-show."
+            },
+            {
+              "kind": "field",
+              "name": "#rendered",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#controller",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new TabsController(this, this.#host())"
+            },
+            {
+              "kind": "field",
+              "name": "#observer",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(() => this.#reconcile())",
+              "description": "Watches the subtree for parts arriving, leaving, or changing the attributes\nthe root reads. The root's own writes (role, aria-*, ids, data-*) are not in\nthe filter, so reconciling never re-triggers itself."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The active tab's value, reflected as the `value` attribute."
+            },
+            {
+              "kind": "method",
+              "name": "#host",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TabsControllerHost"
+                }
+              },
+              "description": "The controller's view of this element. State lives in reflected attributes;\nan activation is announced first, as a cancelable event, so a listener can\nveto it — the elements' equivalent of React's controlled mode (D7)."
+            },
+            {
+              "kind": "method",
+              "name": "#activationMode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TabsActivationMode"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#orientation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TabsOrientation"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#parts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Parts of this tab set only, never those of a nested one."
+            },
+            {
+              "kind": "method",
+              "name": "#rootId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#reconcile",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ value: string; index: number }>"
+              },
+              "description": "Bubbles, cancelable, fired before a user-driven change is applied. Call `preventDefault()` to veto it.",
+              "name": "primitiv-tabs-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "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.",
+              "name": "value"
+            },
+            {
+              "type": {
+                "text": "\"horizontal\" | \"vertical\""
+              },
+              "description": "Layout axis, which picks the arrow-key pair. Defaults to `horizontal`.",
+              "name": "orientation"
+            },
+            {
+              "type": {
+                "text": "\"automatic\" | \"manual\""
+              },
+              "description": "`automatic` activates a tab as focus arrives; `manual` waits for Enter or Space. Defaults to `automatic`.",
+              "name": "activation-mode"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "src/tabs/elements.ts"
+          },
+          "tagName": "primitiv-tabs",
+          "customElement": true,
+          "summary": "The state owner of a WAI-ARIA tab set."
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-tabs-list>` — the tablist. Structural: the root writes its ARIA.",
+          "name": "PrimitivTabsListElement",
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The tablist's accessible name. Give this or `aria-labelledby`.",
+              "name": "label"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "src/tabs/elements.ts"
+          },
+          "tagName": "primitiv-tabs-list",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-tabs-trigger>` — an interactive part. It decorates exactly one\nchild the consumer writes (a `<button>`, an `<a href>`, a router link), which\nreceives the tab role, so the rendered DOM matches React's `<button role=\"tab\">`\n(RFC 0033 D24).",
+          "name": "PrimitivTabsTriggerElement",
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The tab's value, pairing it with the panel of the same value.",
+              "name": "value"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Marks the tab disabled: arrow keys still land on it, but it never activates.",
+              "name": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "src/tabs/elements.ts"
+          },
+          "tagName": "primitiv-tabs-trigger",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-tabs-content>` — a tab panel. Structural: the root writes its ARIA.",
+          "name": "PrimitivTabsContentElement",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Bubbles from the panel as it becomes active (not on first render), so a lazy panel can fetch its content.",
+              "name": "primitiv-tabs-show"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The panel's value, pairing it with the tab of the same value.",
+              "name": "value"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "src/tabs/elements.ts"
+          },
+          "tagName": "primitiv-tabs-content",
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "defineTabs",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "registry",
+              "default": "globalThis.customElements",
+              "type": {
+                "text": "ElementRegistry | undefined"
+              }
+            }
+          ],
+          "description": "Define the four Tabs elements on `registry` (the global `customElements` by\ndefault, so a scoped registry can be passed when browsers support one). Safe\nto call more than once, and a no-op where there is no registry (a server\nrender)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PrimitivTabsElement",
+          "declaration": {
+            "name": "PrimitivTabsElement",
+            "module": "src/tabs/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivTabsListElement",
+          "declaration": {
+            "name": "PrimitivTabsListElement",
+            "module": "src/tabs/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivTabsTriggerElement",
+          "declaration": {
+            "name": "PrimitivTabsTriggerElement",
+            "module": "src/tabs/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivTabsContentElement",
+          "declaration": {
+            "name": "PrimitivTabsContentElement",
+            "module": "src/tabs/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defineTabs",
+          "declaration": {
+            "name": "defineTabs",
+            "module": "src/tabs/elements.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/define/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Side-effect entry: importing this module defines every Primitiv element.
+ * Import `@primitiv-ui/web/define/<component>` instead to define only one.
+ */
+import "./tabs.js";

package/dist/define/index.js

@@ -0,0 +1,5 @@
+/**
+ * Side-effect entry: importing this module defines every Primitiv element.
+ * Import `@primitiv-ui/web/define/<component>` instead to define only one.
+ */
+import "./tabs.js";

package/dist/define/tabs.d.ts

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

package/dist/define/tabs.js

@@ -0,0 +1,11 @@
+/**
+ * Side-effect entry: importing this module defines the four Tabs elements
+ * (`<primitiv-tabs>`, `-list`, `-trigger`, `-content`) on the global
+ * `customElements` registry.
+ *
+ * ```html
+ * <script type="module">import "@primitiv-ui/web/define/tabs";</script>
+ * ```
+ */
+import { defineTabs } from "../tabs/elements.js";
+defineTabs();

package/dist/frameworks/events.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The elements' event types, for the framework typing entries to share. It
+ * imports no framework, so each entry pulls in only its own.
+ */
+/** The `primitiv-tabs-change` event: bubbles, cancelable, fired before the change applies. */
+export type PrimitivTabsChangeEvent = CustomEvent<{
+    value: string;
+    index: number;
+}>;

package/dist/frameworks/events.js

@@ -0,0 +1,5 @@
+/**
+ * The elements' event types, for the framework typing entries to share. It
+ * imports no framework, so each entry pulls in only its own.
+ */
+export {};

package/dist/frameworks/react.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Opt-in React 19 JSX typings for the raw elements, for a React project that
+ * uses `@primitiv-ui/web` directly rather than `@primitiv-ui/react`:
+ *
+ * ```tsx
+ * import type {} from "@primitiv-ui/web/react";
+ *
+ * <primitiv-tabs value={value} onprimitiv-tabs-change={(e) => setValue(e.detail.value)}>
+ * ```
+ *
+ * React 19 passes a custom element's `on…` prop to `addEventListener` with the
+ * name exactly as written, so the change event's prop is
+ * `onprimitiv-tabs-change` (RFC 0033 §5.6.3, D29). Most React projects want
+ * `@primitiv-ui/react` instead, whose `onValueChange` / `onChange` are the
+ * idiomatic names.
+ *
+ * npm-only, like `@primitiv-ui/web/tags`: it augments the `react` module,
+ * which JSR does not allow a published module to do.
+ */
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
+import type { PrimitivTabsChangeEvent } from "./events.js";
+/** React's own props for an element, plus `class`, which React 19 passes to custom elements. */
+type ElementProps<E extends HTMLElement> = DetailedHTMLProps<HTMLAttributes<E>, E> & {
+    class?: string;
+};
+export type { PrimitivTabsChangeEvent };
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "primitiv-tabs": ElementProps<PrimitivTabsElement> & {
+                value?: string;
+                orientation?: "horizontal" | "vertical";
+                "activation-mode"?: "automatic" | "manual";
+                "onprimitiv-tabs-change"?: (event: PrimitivTabsChangeEvent) => void;
+            };
+            "primitiv-tabs-list": ElementProps<PrimitivTabsListElement> & {
+                label?: string;
+            };
+            "primitiv-tabs-trigger": ElementProps<PrimitivTabsTriggerElement> & {
+                value: string;
+                disabled?: boolean;
+            };
+            "primitiv-tabs-content": ElementProps<PrimitivTabsContentElement> & {
+                value: string;
+                "onprimitiv-tabs-show"?: (event: CustomEvent) => void;
+            };
+        }
+    }
+}

package/dist/frameworks/react.js

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

package/dist/frameworks/svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Opt-in Svelte 5 template typings for the elements. With this in scope,
+ * `svelte-check` checks each tag's attributes and its events:
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import type {} from "@primitiv-ui/web/svelte";
+ * </script>
+ * <primitiv-tabs {value} onprimitiv-tabs-change={(e) => (value = e.detail.value)}>…</primitiv-tabs>
+ * ```
+ *
+ * Svelte 5 treats an `on…` attribute as a listener for the event named by the
+ * rest of it, so the change event's attribute is `onprimitiv-tabs-change`, the
+ * same as React 19's (RFC 0033 §5.6.3).
+ *
+ * npm-only, like `@primitiv-ui/web/tags`: it augments `svelte/elements`, which
+ * JSR does not allow a published module to do.
+ */
+import type { HTMLAttributes } from "svelte/elements";
+import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
+import type { PrimitivTabsChangeEvent } from "./events.js";
+/** Svelte's own attributes and events for an element. */
+type Attributes<E extends HTMLElement> = HTMLAttributes<E>;
+declare module "svelte/elements" {
+    interface SvelteHTMLElements {
+        "primitiv-tabs": Attributes<PrimitivTabsElement> & {
+            value?: string;
+            orientation?: "horizontal" | "vertical";
+            "activation-mode"?: "automatic" | "manual";
+            "onprimitiv-tabs-change"?: (event: PrimitivTabsChangeEvent) => void;
+        };
+        "primitiv-tabs-list": Attributes<PrimitivTabsListElement> & {
+            label?: string;
+        };
+        "primitiv-tabs-trigger": Attributes<PrimitivTabsTriggerElement> & {
+            value: string;
+            disabled?: boolean;
+        };
+        "primitiv-tabs-content": Attributes<PrimitivTabsContentElement> & {
+            value: string;
+            "onprimitiv-tabs-show"?: (event: CustomEvent) => void;
+        };
+    }
+}
+export {};

package/dist/frameworks/svelte.js

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