@primitiv-ui/web 0.1.43 → 0.1.44

package/dist/custom-elements.json

@@ -4,21 +4,297 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/tabs/elements.ts",
+      "path": "src/accordion/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",
+          "description": "`<primitiv-accordion>` — the state owner of a WAI-ARIA accordion.\n\nThe root finds its own items, so an accordion nested in a panel keeps its\nown, and reconciles every part's ARIA from its reflected state whenever a part\narrives, leaves, or changes an attribute the root reads (the lifecycle is\n`PrimitivRootElement`'s). `multiple` is read live at each toggle, so a change\nto it needs no reconcile.\n\nEach trigger sits in a heading you write (`<h3>`, at the level the page's\noutline needs): a real heading element is the header, so there is no element\nfor it.",
+          "name": "PrimitivAccordionElement",
           "members": [
             {
               "kind": "field",
-              "name": "#generatedId",
+              "name": "#shown",
+              "privacy": "private",
+              "default": "new Set<string>()",
+              "description": "The items open at the last reconcile, so an item opening fires primitiv-accordion-show."
+            },
+            {
+              "kind": "field",
+              "name": "#rendered",
               "privacy": "private",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "type": {
+                "text": "AccordionController"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new AccordionController(this, this.#host())"
+            },
+            {
+              "kind": "field",
+              "name": "reconcileOn",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "default": "[\"value\", \"disabled\", \"orientation\", \"force-mount\"]"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Set the open items, as an array or a space-separated string."
+            },
+            {
+              "kind": "method",
+              "name": "#host",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "AccordionControllerHost"
+                }
+              },
+              "description": "The controller's view of this element: state lives in reflected attributes."
+            },
+            {
+              "kind": "method",
+              "name": "#orientation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "AccordionOrientation"
+                }
               }
             },
+            {
+              "kind": "method",
+              "name": "reconcile",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ value: string[] }>"
+              },
+              "description": "Bubbles, cancelable, fired before a user-driven toggle is applied, with every item open afterwards. Call `preventDefault()` to veto it.",
+              "name": "primitiv-accordion-change"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The open items' values, separated by spaces. Reflected: it changes as the user toggles items, so a server re-render or a history snapshot sees what is open. Item values therefore cannot contain whitespace.",
+              "name": "value"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Lets more than one item be open at once. Without it, opening an item closes the open one.",
+              "name": "multiple"
+            },
+            {
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "description": "Layout axis, which picks the arrow-key pair. Defaults to `vertical`.",
+              "name": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "PrimitivRootElement",
+            "module": "/src/internal/RootElement.ts"
+          },
+          "tagName": "primitiv-accordion",
+          "customElement": true,
+          "summary": "The state owner of a WAI-ARIA accordion."
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-accordion-item>` — one collapsible section. Structural: it pairs a\ntrigger and a panel and carries the value the root's `value` lists.",
+          "name": "PrimitivAccordionItemElement",
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The item's value, listed in the root's `value` while it is open. No whitespace.",
+              "name": "value"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-accordion-item",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-accordion-trigger>` — an interactive part. It decorates exactly one\nchild the consumer writes, a `<button>`, which receives `aria-expanded`,\n`aria-controls` and the state attributes, so the rendered DOM matches React's\n`<button aria-expanded>` (RFC 0033 D24). Put it inside a heading.",
+          "name": "PrimitivAccordionTriggerElement",
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Marks the item disabled: the button stays focusable but never toggles, and the arrow keys skip it.",
+              "name": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-accordion-trigger",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-accordion-content>` — an item's panel. Structural: the root writes\nits ARIA and hides it while the item is closed.",
+          "name": "PrimitivAccordionContentElement",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Bubbles from the panel as its item opens (not on first render), so a lazy panel can fetch its content.",
+              "name": "primitiv-accordion-show"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Never sets `hidden`, so styles can animate the panel open and closed. A closed panel always carries `aria-hidden`, so it stays out of the accessibility tree either way.",
+              "name": "force-mount"
+            }
+          ],
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-accordion-content",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "`<primitiv-accordion-trigger-icon>` — a decorative indicator inside the\ntrigger's button. The root hides it from assistive technology and mirrors its\nitem's `data-state`, for a chevron that flips.",
+          "name": "PrimitivAccordionTriggerIconElement",
+          "superclass": {
+            "name": "ElementBase",
+            "module": "/src/internal/element.ts"
+          },
+          "tagName": "primitiv-accordion-trigger-icon",
+          "customElement": true
+        },
+        {
+          "kind": "function",
+          "name": "defineAccordion",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "registry",
+              "default": "globalThis.customElements",
+              "type": {
+                "text": "ElementRegistry | undefined"
+              }
+            }
+          ],
+          "description": "Define the five Accordion elements on `registry` (the global `customElements`\nby default). Safe to call more than once, and a no-op where there is no\nregistry (a server render)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ElementRegistry",
+          "declaration": {
+            "name": "ElementRegistry",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivAccordionElement",
+          "declaration": {
+            "name": "PrimitivAccordionElement",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivAccordionItemElement",
+          "declaration": {
+            "name": "PrimitivAccordionItemElement",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivAccordionTriggerElement",
+          "declaration": {
+            "name": "PrimitivAccordionTriggerElement",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivAccordionContentElement",
+          "declaration": {
+            "name": "PrimitivAccordionContentElement",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PrimitivAccordionTriggerIconElement",
+          "declaration": {
+            "name": "PrimitivAccordionTriggerIconElement",
+            "module": "src/accordion/elements.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defineAccordion",
+          "declaration": {
+            "name": "defineAccordion",
+            "module": "src/accordion/elements.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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, so a tab set nested in a panel keeps its own,\nand reconciles their ARIA from its reflected state whenever a part arrives,\nleaves, or changes an attribute the root reads (the lifecycle is\n`PrimitivRootElement`'s). `activation-mode` is read live at each key press,\nso a change to it needs no reconcile.",
+          "name": "PrimitivTabsElement",
+          "members": [
             {
               "kind": "field",
               "name": "#shown",
@@ -39,18 +315,23 @@
             },
             {
               "kind": "field",
-              "name": "#controller",
-              "privacy": "private",
+              "name": "controller",
+              "type": {
+                "text": "TabsController"
+              },
+              "privacy": "protected",
               "readonly": true,
               "default": "new TabsController(this, this.#host())"
             },
             {
               "kind": "field",
-              "name": "#observer",
-              "privacy": "private",
+              "name": "reconcileOn",
+              "type": {
+                "text": "readonly string[]"
+              },
+              "privacy": "protected",
               "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."
+              "default": "[\"value\", \"disabled\", \"label\", \"orientation\"]"
             },
             {
               "kind": "field",
@@ -69,7 +350,7 @@
                   "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)."
+              "description": "The controller's view of this element: state lives in reflected attributes."
             },
             {
               "kind": "method",
@@ -93,37 +374,8 @@
             },
             {
               "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",
+              "name": "reconcile",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -164,8 +416,8 @@
             }
           ],
           "superclass": {
-            "name": "ElementBase",
-            "module": "src/tabs/elements.ts"
+            "name": "PrimitivRootElement",
+            "module": "/src/internal/RootElement.ts"
           },
           "tagName": "primitiv-tabs",
           "customElement": true,
@@ -186,7 +438,7 @@
           ],
           "superclass": {
             "name": "ElementBase",
-            "module": "src/tabs/elements.ts"
+            "module": "/src/internal/element.ts"
           },
           "tagName": "primitiv-tabs-list",
           "customElement": true
@@ -213,7 +465,7 @@
           ],
           "superclass": {
             "name": "ElementBase",
-            "module": "src/tabs/elements.ts"
+            "module": "/src/internal/element.ts"
           },
           "tagName": "primitiv-tabs-trigger",
           "customElement": true
@@ -242,7 +494,7 @@
           ],
           "superclass": {
             "name": "ElementBase",
-            "module": "src/tabs/elements.ts"
+            "module": "/src/internal/element.ts"
           },
           "tagName": "primitiv-tabs-content",
           "customElement": true
@@ -268,6 +520,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ElementRegistry",
+          "declaration": {
+            "name": "ElementRegistry",
+            "module": "src/tabs/elements.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "PrimitivTabsElement",

package/dist/define/accordion.d.ts

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

package/dist/define/accordion.js

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

package/dist/define/index.d.ts

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

package/dist/define/index.js

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

package/dist/frameworks/events.d.ts

@@ -7,3 +7,7 @@ export type PrimitivTabsChangeEvent = CustomEvent<{
     value: string;
     index: number;
 }>;
+/** The `primitiv-accordion-change` event: bubbles, cancelable, fired before the change applies, with every item open afterwards. */
+export type PrimitivAccordionChangeEvent = CustomEvent<{
+    value: string[];
+}>;

package/dist/frameworks/react.d.ts

@@ -18,16 +18,34 @@
  * which JSR does not allow a published module to do.
  */
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, 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 };
+export type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent };
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
+            "primitiv-accordion": ElementProps<PrimitivAccordionElement> & {
+                value?: string | readonly string[];
+                multiple?: boolean;
+                orientation?: "vertical" | "horizontal";
+                "onprimitiv-accordion-change"?: (event: PrimitivAccordionChangeEvent) => void;
+            };
+            "primitiv-accordion-item": ElementProps<PrimitivAccordionItemElement> & {
+                value: string;
+            };
+            "primitiv-accordion-trigger": ElementProps<PrimitivAccordionTriggerElement> & {
+                disabled?: boolean;
+            };
+            "primitiv-accordion-content": ElementProps<PrimitivAccordionContentElement> & {
+                "force-mount"?: boolean;
+                "onprimitiv-accordion-show"?: (event: CustomEvent) => void;
+            };
+            "primitiv-accordion-trigger-icon": ElementProps<PrimitivAccordionTriggerIconElement>;
             "primitiv-tabs": ElementProps<PrimitivTabsElement> & {
                 value?: string;
                 orientation?: "horizontal" | "vertical";

package/dist/frameworks/svelte.d.ts

@@ -17,12 +17,30 @@
  * JSR does not allow a published module to do.
  */
 import type { HTMLAttributes } from "svelte/elements";
+import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
-import type { PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, 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-accordion": Attributes<PrimitivAccordionElement> & {
+            value?: string | readonly string[];
+            multiple?: boolean;
+            orientation?: "vertical" | "horizontal";
+            "onprimitiv-accordion-change"?: (event: PrimitivAccordionChangeEvent) => void;
+        };
+        "primitiv-accordion-item": Attributes<PrimitivAccordionItemElement> & {
+            value: string;
+        };
+        "primitiv-accordion-trigger": Attributes<PrimitivAccordionTriggerElement> & {
+            disabled?: boolean;
+        };
+        "primitiv-accordion-content": Attributes<PrimitivAccordionContentElement> & {
+            "force-mount"?: boolean;
+            "onprimitiv-accordion-show"?: (event: CustomEvent) => void;
+        };
+        "primitiv-accordion-trigger-icon": Attributes<PrimitivAccordionTriggerIconElement>;
         "primitiv-tabs": Attributes<PrimitivTabsElement> & {
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/frameworks/vue.d.ts

@@ -19,11 +19,30 @@
  * JSR does not allow a published module to do.
  */
 import type { DefineComponent, EmitsOptions } from "vue";
-import type { PrimitivTabsChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivTabsChangeEvent } from "./events.js";
 /** A tag as Vue's template checker sees it: its props, and the events it emits. */
 type Tag<Props, Events extends EmitsOptions = Record<never, never>> = DefineComponent<Props, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Record<never, never>, Events>;
 declare module "vue" {
     interface GlobalComponents {
+        "primitiv-accordion": Tag<{
+            value?: string | readonly string[];
+            multiple?: boolean | "";
+            orientation?: "vertical" | "horizontal";
+        }, {
+            "primitiv-accordion-change": (event: PrimitivAccordionChangeEvent) => void;
+        }>;
+        "primitiv-accordion-item": Tag<{
+            value: string;
+        }>;
+        "primitiv-accordion-trigger": Tag<{
+            disabled?: boolean | "";
+        }>;
+        "primitiv-accordion-content": Tag<{
+            forceMount?: boolean | "";
+        }, {
+            "primitiv-accordion-show": (event: CustomEvent) => void;
+        }>;
+        "primitiv-accordion-trigger-icon": Tag<Record<never, never>>;
         "primitiv-tabs": Tag<{
             value?: string;
             orientation?: "horizontal" | "vertical";

package/dist/index.d.ts

@@ -3,4 +3,5 @@
  * elements. This entry exports classes only and has no side effects; import
  * `@primitiv-ui/web/define` (or `/define/<component>`) to register the tags.
  */
+export * from "./accordion/index.js";
 export * from "./tabs/index.js";

package/dist/index.js

@@ -3,4 +3,5 @@
  * elements. This entry exports classes only and has no side effects; import
  * `@primitiv-ui/web/define` (or `/define/<component>`) to register the tags.
  */
+export * from "./accordion/index.js";
 export * from "./tabs/index.js";

package/dist/internal/RootElement.d.ts

@@ -0,0 +1,46 @@
+import { ElementBase } from "./element.js";
+/** What a root element hosts: a controller it connects and disconnects with itself. */
+type Connectable = {
+    connect(): void;
+    disconnect(): void;
+};
+/**
+ * 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 declare abstract class PrimitivRootElement extends ElementBase {
+    #private;
+    /** The behaviour this root hosts, listening while the root is connected. */
+    protected abstract readonly controller: Connectable;
+    /** The attributes, on the root or any part, whose change needs a reconcile. */
+    protected abstract readonly reconcileOn: readonly string[];
+    /** Write every part's ARIA and state from the root's reflected attributes. */
+    protected abstract reconcile(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The root's id, or one generated once, which the parts' ids derive from. */
+    protected rootId(): string;
+    /** The reading direction, from `:dir()`, so an inherited `dir` attribute applies (D8). */
+    protected direction(): "ltr" | "rtl";
+    /** This root's `selector` parts, never those of a nested root of the same kind. */
+    protected parts(selector: string): HTMLElement[];
+    /**
+     * 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.
+     */
+    protected announce(type: string, detail: unknown): boolean;
+}
+export {};