@primitiv-ui/web 0.1.43 → 0.1.44

package/dist/tabs/elements.js

@@ -1,22 +1,13 @@
 import { deriveId, tabsTabStop, } from "@primitiv-ui/core";
+import { defineElements, ElementBase, reportOnce, write } from "../internal/element.js";
+import { PrimitivRootElement } from "../internal/RootElement.js";
 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
@@ -27,37 +18,17 @@ function decoratable(trigger) {
     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);
-    }
+    reportOnce(trigger, `<${TRIGGER}> needs a value and exactly one element child (a <button>, an <a href> or a router link) to decorate.`);
     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.
+ * 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.
@@ -66,37 +37,12 @@ function write(element, name, value) {
  * @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;
+export class PrimitivTabsElement extends PrimitivRootElement {
     /** 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();
-    }
+    controller = new TabsController(this, this.#host());
+    reconcileOn = ["value", "disabled", "label", "orientation"];
     /** The active tab's value, reflected as the `value` attribute. */
     get value() {
         return this.getAttribute("value") ?? undefined;
@@ -104,27 +50,17 @@ export class PrimitivTabsElement extends ElementBase {
     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).
-     */
+    /** The controller's view of this element: state lives in reflected attributes. */
     #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",
+                dir: this.direction(),
                 activationMode: this.#activationMode(),
             }),
             activate: (value, index) => {
-                const change = new CustomEvent("primitiv-tabs-change", {
-                    bubbles: true,
-                    cancelable: true,
-                    detail: { value, index },
-                });
-                if (this.dispatchEvent(change))
+                if (this.announce("primitiv-tabs-change", { value, index }))
                     this.value = value;
             },
         };
@@ -136,20 +72,12 @@ export class PrimitivTabsElement extends ElementBase {
     #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() {
+    reconcile() {
         const orientation = this.#orientation();
         const active = this.value;
-        const rootId = this.#rootId();
+        const rootId = this.rootId();
         write(this, "data-orientation", orientation);
-        for (const list of this.#parts(LIST)) {
+        for (const list of this.parts(LIST)) {
             write(list, "role", "tablist");
             write(list, "aria-orientation", orientation);
             write(list, "data-orientation", orientation);
@@ -158,19 +86,19 @@ export class PrimitivTabsElement extends ElementBase {
                 write(list, "aria-label", label);
         }
         const panels = new Map();
-        for (const panel of this.#parts(CONTENT)) {
+        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 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 }) => ({
+        this.controller.setTriggers(triggers.map(({ trigger, tab, value }) => ({
             value,
             element: tab,
             disabled: trigger.hasAttribute("disabled"),
@@ -250,16 +178,10 @@ export class PrimitivTabsContentElement extends ElementBase {
  * render).
  */
 export function defineTabs(registry = globalThis.customElements) {
-    if (!registry)
-        return;
-    const elements = [
+    defineElements(registry, [
         [ROOT, PrimitivTabsElement],
         [LIST, PrimitivTabsListElement],
         [TRIGGER, PrimitivTabsTriggerElement],
         [CONTENT, PrimitivTabsContentElement],
-    ];
-    for (const [name, element] of elements) {
-        if (!registry.get(name))
-            registry.define(name, element);
-    }
+    ]);
 }

package/dist/tags.d.ts

@@ -12,9 +12,15 @@
  * 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 { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "./accordion/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "./tabs/elements.js";
 declare global {
     interface HTMLElementTagNameMap {
+        "primitiv-accordion": PrimitivAccordionElement;
+        "primitiv-accordion-item": PrimitivAccordionItemElement;
+        "primitiv-accordion-trigger": PrimitivAccordionTriggerElement;
+        "primitiv-accordion-content": PrimitivAccordionContentElement;
+        "primitiv-accordion-trigger-icon": PrimitivAccordionTriggerIconElement;
         "primitiv-tabs": PrimitivTabsElement;
         "primitiv-tabs-list": PrimitivTabsListElement;
         "primitiv-tabs-trigger": PrimitivTabsTriggerElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/web",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "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",
@@ -10,6 +10,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./accordion": {
+      "types": "./dist/accordion/index.d.ts",
+      "default": "./dist/accordion/index.js"
+    },
     "./tabs": {
       "types": "./dist/tabs/index.d.ts",
       "default": "./dist/tabs/index.js"
@@ -18,6 +22,10 @@
       "types": "./dist/define/index.d.ts",
       "default": "./dist/define/index.js"
     },
+    "./define/accordion": {
+      "types": "./dist/define/accordion.d.ts",
+      "default": "./dist/define/accordion.js"
+    },
     "./define/tabs": {
       "types": "./dist/define/tabs.d.ts",
       "default": "./dist/define/tabs.js"
@@ -52,7 +60,7 @@
     "directory": "packages/web"
   },
   "dependencies": {
-    "@primitiv-ui/core": "0.1.43"
+    "@primitiv-ui/core": "0.1.44"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",