@warp-ds/elements 2.8.2-next.2 → 2.8.2-next.4

package/dist/setup-tests.d.ts

@@ -1,6 +1,7 @@
 import 'vitest-browser-lit';
+import type { RunOptions } from 'axe-core';
 interface AxeMatchers {
-    toHaveNoAxeViolations(): Promise<void>;
+    toHaveNoAxeViolations(options?: RunOptions): Promise<void>;
 }
 declare module 'vitest' {
     interface Assertion extends AxeMatchers {

package/dist/setup-tests.js

@@ -17,12 +17,13 @@ function formatViolations(violations) {
     })
         .join('\n\n');
 }
-async function runAxe(container = document.body) {
+async function runAxe(container = document.body, options = {}) {
     return axe.run(container, {
         runOnly: {
             type: 'tag',
             values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'],
         },
+        ...options,
     });
 }
 function resolveAxeContainer(received) {
@@ -54,9 +55,9 @@ function toHaveNoViolations(results) {
     };
 }
 expect.extend({
-    async toHaveNoAxeViolations(received) {
+    async toHaveNoAxeViolations(received, options) {
         const container = resolveAxeContainer(received);
-        const results = await runAxe(container);
+        const results = await runAxe(container, options);
         return toHaveNoViolations(results);
     },
 });

package/dist/tests/react-hydration.d.ts

@@ -0,0 +1,20 @@
+declare global {
+    interface Window {
+        __HYDRATION_WARNINGS__: string[];
+    }
+}
+export declare function setupHydrationWarningCapture(): void;
+/**
+ * Tests that a component hydrates without warnings.
+ * Takes tag name and props, generates both SSR HTML and React element from them.
+ */
+export declare function testHydration(tagName: string, props?: Record<string, unknown>): Promise<string[]>;
+/**
+ * Tests hydration for parent/child component structures.
+ * Takes parent tag, props, and children HTML string.
+ *
+ * This properly includes children in the React tree so that React can detect
+ * hydration mismatches when components modify their light DOM children
+ * (e.g., adding classes, moving children to shadow DOM).
+ */
+export declare function testHydrationWithChildren(tagName: string, props: Record<string, unknown>, childrenHtml: string): Promise<string[]>;

package/dist/tests/react-hydration.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+export function setupHydrationWarningCapture() {
+    window.__HYDRATION_WARNINGS__ = [];
+    const originalError = console.error;
+    console.error = (...args) => {
+        const msg = args.map((a) => (typeof a === 'string' ? a : String(a))).join(' ');
+        if (msg.includes('Hydration') ||
+            msg.includes('hydrat') ||
+            msg.includes('did not match') ||
+            msg.includes('server rendered HTML') ||
+            msg.includes('Text content does not match') ||
+            msg.includes('Expected server HTML')) {
+            window.__HYDRATION_WARNINGS__.push(msg);
+        }
+        originalError.apply(console, args);
+    };
+}
+/**
+ * Converts props to HTML attributes string
+ */
+function propsToHtml(props) {
+    return Object.entries(props)
+        .map(([key, value]) => {
+        if (value === true)
+            return key;
+        if (value === false || value === undefined || value === null)
+            return '';
+        return `${key}="${value}"`;
+    })
+        .filter(Boolean)
+        .join(' ');
+}
+/**
+ * Converts a DOM node to a React element.
+ * Used to include children in the React tree for proper hydration testing.
+ */
+function nodeToReact(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const props = {};
+        for (const attr of el.attributes) {
+            // Convert HTML attributes to React props
+            let name = attr.name;
+            if (name === 'class')
+                name = 'className';
+            if (name === 'for')
+                name = 'htmlFor';
+            props[name] = attr.value;
+        }
+        const children = Array.from(el.childNodes).map(nodeToReact).filter(Boolean);
+        return React.createElement(el.tagName.toLowerCase(), props, ...children);
+    }
+    return null;
+}
+/**
+ * Converts an HTML string to an array of React elements.
+ */
+function htmlToReactElements(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    return Array.from(template.content.childNodes)
+        .map(nodeToReact)
+        .filter((node) => node !== null && (typeof node !== 'string' || node.trim()));
+}
+/**
+ * Tests that a component hydrates without warnings.
+ * Takes tag name and props, generates both SSR HTML and React element from them.
+ */
+export async function testHydration(tagName, props = {}) {
+    const container = document.createElement('div');
+    container.id = 'hydration-test-root';
+    document.body.appendChild(container);
+    try {
+        // Generate SSR HTML from props
+        const attrs = propsToHtml(props);
+        const ssrHtml = `<${tagName}${attrs ? ` ${attrs}` : ''}></${tagName}>`;
+        container.innerHTML = ssrHtml;
+        // Create React element from same props and hydrate
+        // Use onRecoverableError to capture hydration errors (React 19+)
+        const element = React.createElement(tagName, props);
+        hydrateRoot(container, element, {
+            onRecoverableError: (error) => {
+                const msg = error instanceof Error ? error.message : String(error);
+                if (msg.includes('Hydration') || msg.includes('hydrat') || msg.includes('did not match')) {
+                    window.__HYDRATION_WARNINGS__.push(msg);
+                }
+            },
+        });
+        // Wait for hydration, custom element upgrade, and async callbacks
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        return window.__HYDRATION_WARNINGS__;
+    }
+    finally {
+        document.body.removeChild(container);
+    }
+}
+/**
+ * Tests hydration for parent/child component structures.
+ * Takes parent tag, props, and children HTML string.
+ *
+ * This properly includes children in the React tree so that React can detect
+ * hydration mismatches when components modify their light DOM children
+ * (e.g., adding classes, moving children to shadow DOM).
+ */
+export async function testHydrationWithChildren(tagName, props, childrenHtml) {
+    const container = document.createElement('div');
+    container.id = 'hydration-test-root';
+    document.body.appendChild(container);
+    try {
+        // Generate SSR HTML from props with children
+        const attrs = propsToHtml(props);
+        const ssrHtml = `<${tagName}${attrs ? ` ${attrs}` : ''}>${childrenHtml}</${tagName}>`;
+        container.innerHTML = ssrHtml;
+        // Convert children HTML to React elements so they're part of React's tree.
+        // This allows React to detect mismatches when components modify children.
+        const reactChildren = htmlToReactElements(childrenHtml);
+        const element = React.createElement(tagName, props, ...reactChildren);
+        // Use onRecoverableError to capture hydration errors (React 19+)
+        hydrateRoot(container, element, {
+            onRecoverableError: (error) => {
+                const msg = error instanceof Error ? error.message : String(error);
+                if (msg.includes('Hydration') || msg.includes('hydrat') || msg.includes('did not match')) {
+                    window.__HYDRATION_WARNINGS__.push(msg);
+                }
+            },
+        });
+        // Wait for hydration, custom element upgrade, and async callbacks
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        return window.__HYDRATION_WARNINGS__;
+    }
+    finally {
+        document.body.removeChild(container);
+    }
+}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.8.2-next.1",
+  "version": "2.8.2-next.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -14,7 +14,7 @@
             {
               "name": "name",
               "description": "Icon filename (without .svg)",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string" }
             },
             {
               "name": "size",
@@ -181,8 +181,7 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
-                "default": "'secondary'"
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -425,7 +424,7 @@
             {
               "name": "name",
               "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "value",
@@ -465,7 +464,7 @@
               {
                 "name": "name",
                 "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "value",
@@ -497,6 +496,11 @@
                 "description": "Draws the checkbox in an invalid state.",
                 "type": "boolean"
               },
+              {
+                "name": "_computedInvalid",
+                "description": "Computed invalid state: combines own invalid with group invalid",
+                "type": "boolean"
+              },
               {
                 "name": "validationMessage",
                 "description": "Returns the validation message if the checkbox is invalid, otherwise an empty string",
@@ -1085,7 +1089,7 @@
             {
               "name": "name",
               "description": "The name of the radio, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string" }
             },
             {
               "name": "value",
@@ -1146,6 +1150,11 @@
                 "description": "Draws the radio in an invalid state.",
                 "type": "boolean"
               },
+              {
+                "name": "tabIndex",
+                "description": "Override tabIndex setter to set _groupTabIndex (for backwards compatibility).\nRadio-group should use _groupTabIndex directly for clarity.",
+                "type": "number"
+              },
               {
                 "name": "validationMessage",
                 "description": "Returns the validation message if the radio is invalid, otherwise an empty string",
@@ -1155,6 +1164,11 @@
                 "name": "validity",
                 "description": "Returns the validity state of the radio",
                 "type": "ValidityState"
+              },
+              {
+                "name": "_standaloneTabIndex",
+                "description": "Internal tabindex for standalone radios (not in a group).\nNon-reflecting to avoid DOM changes during hydration.",
+                "type": "number | undefined"
               }
             ],
             "events": []
@@ -1476,11 +1490,8 @@
               "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "error", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "help-text",
-              "value": { "type": "string", "default": "''" }
-            },
+            { "name": "error", "value": { "type": "string" } },
+            { "name": "help-text", "value": { "type": "string" } },
             {
               "name": "invalid",
               "value": { "type": "boolean", "default": "false" }
@@ -1501,7 +1512,7 @@
             {
               "name": "suffix",
               "description": "Suffix used in text input fields and for the min and max values of the slider.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string" }
             },
             {
               "name": "hidden-textfield",
@@ -1644,8 +1655,8 @@
           "description": "\n---\n\n\n### **Events:**\n - **change**",
           "doc-url": "",
           "attributes": [
-            { "name": "name", "value": { "type": "string", "default": "''" } },
-            { "name": "value", "value": { "type": "string", "default": "''" } },
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "value", "value": { "type": "string" } },
             {
               "name": "checked",
               "value": { "type": "boolean", "default": "false" }
@@ -1671,13 +1682,16 @@
           "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "id", "value": { "type": "string", "default": "''" } },
-            { "name": "for", "value": { "type": "string", "default": "''" } },
+            { "name": "id", "value": { "type": "string" } },
+            { "name": "for", "value": { "type": "string" } },
+            {
+              "name": "aria-controls",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "aria-selected",
               "value": { "type": "'true' | 'false'" }
             },
-            { "name": "tabindex", "value": { "type": "number" } },
             {
               "name": "active",
               "value": { "type": "boolean", "default": "false" }
@@ -1692,8 +1706,17 @@
             "properties": [
               { "name": "id", "type": "string" },
               { "name": "for", "type": "string" },
+              {
+                "name": "tabIndex",
+                "description": "Override tabIndex setter to set _parentTabIndex (for backwards compatibility).",
+                "type": "number"
+              },
+              {
+                "name": "_computedAriaSelected",
+                "description": "Computed aria-selected: prefers parent-managed, falls back to own property",
+                "type": "'true' | 'false' | undefined"
+              },
               { "name": "ariaSelected", "type": "'true' | 'false'" },
-              { "name": "tabIndex", "type": "number" },
               { "name": "active", "type": "boolean" },
               { "name": "over", "type": "boolean" }
             ],
@@ -1704,9 +1727,24 @@
           "name": "w-tab-panel",
           "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "active",
+              "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
+              "value": { "type": "boolean" }
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "active",
+                "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "w-tabs",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.8.2-next.2",
+  "version": "2.8.2-next.4",
   "packageManager": "pnpm@10.30.3",
   "description": "Custom elements for Warp",
   "exports": {