@warp-ds/elements 2.8.2-next.1 → 2.8.2-next.3

package/dist/packages/toast/toast.test.d.ts

@@ -0,0 +1 @@
+import './toast.js';

package/dist/packages/toast/toast.test.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './toast.js';
+test('renders the toast with text', async () => {
+    const component = html `<w-toast text="Test message" data-testid="toast"></w-toast>`;
+    const page = render(component);
+    await expect.element(page.getByTestId('toast')).toBeVisible();
+    await expect.element(page.getByText('Test message')).toBeVisible();
+});
+test('defaults to success type when no type attribute is set', async () => {
+    const component = html `<w-toast text="Success message" data-testid="toast"></w-toast>`;
+    const page = render(component);
+    const el = page.getByTestId('toast').element();
+    // The type attribute should not be reflected (to avoid hydration mismatch)
+    expect(el.hasAttribute('type')).toBe(false);
+    // But the success icon should be rendered (default behavior)
+    await expect
+        .poll(() => {
+        const icon = el.shadowRoot?.querySelector('w-icon');
+        return icon?.getAttribute('name');
+    })
+        .toBe('Success');
+});
+test('generates unique id when no id attribute is set', async () => {
+    const component = html `<w-toast text="Test message" data-testid="toast"></w-toast>`;
+    const page = render(component);
+    const el = page.getByTestId('toast').element();
+    // An id should be generated
+    expect(el.id).toBeTruthy();
+    expect(el.id.length).toBeGreaterThan(0);
+});
+test('uses specified type when type attribute is set', async () => {
+    const component = html `<w-toast text="Warning message" type="warning" data-testid="toast"></w-toast>`;
+    const page = render(component);
+    const el = page.getByTestId('toast').element();
+    // The type attribute should be reflected
+    expect(el.getAttribute('type')).toBe('warning');
+    // And the warning icon should be rendered
+    await expect
+        .poll(() => {
+        const icon = el.shadowRoot?.querySelector('w-icon');
+        return icon?.getAttribute('name');
+    })
+        .toBe('Warning');
+});
+test('renders error type correctly', async () => {
+    const component = html `<w-toast text="Error message" type="error" data-testid="toast"></w-toast>`;
+    const page = render(component);
+    const el = page.getByTestId('toast').element();
+    // The error icon should be rendered
+    await expect
+        .poll(() => {
+        const icon = el.shadowRoot?.querySelector('w-icon');
+        return icon?.getAttribute('name');
+    })
+        .toBe('Error');
+});

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.1",
+  "version": "2.8.2-next.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -14,20 +14,17 @@
             {
               "name": "name",
               "description": "Icon filename (without .svg)",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string" }
             },
             {
               "name": "size",
               "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
-              "value": {
-                "type": "'small' | 'medium' | 'large' | string",
-                "default": "'medium'"
-              }
+              "value": { "type": "'small' | 'medium' | 'large' | string" }
             },
             {
               "name": "locale",
               "description": "Locale used in CDN URL",
-              "value": { "type": "string", "default": "'en'" }
+              "value": { "type": "string" }
             }
           ],
           "events": [],
@@ -97,14 +94,10 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'positive' | 'warning' | 'info'",
-                "default": "'info'"
+                "type": "'negative' | 'positive' | 'warning' | 'info'"
               }
             },
-            {
-              "name": "show",
-              "value": { "type": "boolean", "default": "false" }
-            },
+            { "name": "show", "value": { "type": "boolean" } },
             {
               "name": "role",
               "value": { "type": "string", "default": "'alert'" }
@@ -135,8 +128,7 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'",
-                "default": "'secondary'"
+                "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
               }
             },
             {
@@ -180,10 +172,7 @@
           "attributes": [
             {
               "name": "type",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
+              "value": { "type": "'button' | 'submit' | 'reset'" }
             },
             {
               "name": "autofocus",
@@ -192,8 +181,7 @@
             {
               "name": "variant",
               "value": {
-                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'",
-                "default": "'secondary'"
+                "type": "'negative' | 'primary' | 'secondary' | 'utility' | 'pill' | 'link'"
               }
             },
             {
@@ -331,8 +319,7 @@
             {
               "name": "variant",
               "value": {
-                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'",
-                "default": "'neutral'"
+                "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
               }
             },
             {
@@ -396,14 +383,9 @@
           "name": "w-breadcrumbs",
           "description": "Breadcrumbs show the navigation structure for the current location.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n",
           "doc-url": "",
-          "attributes": [
-            { "name": "aria-label", "value": { "type": "string" } }
-          ],
+          "attributes": [],
           "events": [],
-          "js": {
-            "properties": [{ "name": "ariaLabel", "type": "string" }],
-            "events": []
-          }
+          "js": { "properties": [{ "name": "ariaLabel" }], "events": [] }
         },
         {
           "name": "w-card",
@@ -442,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",
@@ -482,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",
@@ -514,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",
@@ -671,7 +658,7 @@
             {
               "name": "autocomplete",
               "description": "Autocomplete attribute for the input field",
-              "value": { "type": "string | undefined", "default": "'off'" }
+              "value": { "type": "string | undefined" }
             }
           ],
           "events": [],
@@ -997,12 +984,12 @@
             {
               "name": "selected-page",
               "description": "Currently selected page (1-based index, clamped to valid range)",
-              "value": { "type": "number", "default": "1" }
+              "value": { "type": "number" }
             },
             {
               "name": "page-count",
               "description": "Total number of pages (minimum 1)",
-              "value": { "type": "number", "default": "1" }
+              "value": { "type": "number" }
             }
           ],
           "events": [],
@@ -1029,14 +1016,8 @@
           "attributes": [
             { "name": "base-url", "value": { "type": "string" } },
             { "name": "pages", "value": { "type": "number" } },
-            {
-              "name": "current-page",
-              "value": { "type": "number", "default": "1" }
-            },
-            {
-              "name": "visible-pages",
-              "value": { "type": "number", "default": "7" }
-            }
+            { "name": "current-page", "value": { "type": "number" } },
+            { "name": "visible-pages", "value": { "type": "number" } }
           ],
           "events": [
             {
@@ -1108,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",
@@ -1169,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",
@@ -1178,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": []
@@ -1402,10 +1393,7 @@
               "name": "required",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "type",
-              "value": { "type": "string", "default": "'text'" }
-            },
+            { "name": "type", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } },
             { "name": "name", "value": { "type": "string" } },
             { "name": "step", "value": { "type": "number" } },
@@ -1502,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" }
@@ -1527,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",
@@ -1670,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" }
@@ -1697,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" }
@@ -1718,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" }
             ],
@@ -1732,13 +1729,20 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "hidden",
-              "value": { "type": "boolean", "default": "true" }
+              "name": "active",
+              "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
+              "value": { "type": "boolean" }
             }
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "hidden", "type": "boolean" }],
+            "properties": [
+              {
+                "name": "active",
+                "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
+                "type": "boolean"
+              }
+            ],
             "events": []
           }
         },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.8.2-next.1",
+  "version": "2.8.2-next.3",
   "packageManager": "pnpm@10.30.3",
   "description": "Custom elements for Warp",
   "exports": {
@@ -365,7 +365,7 @@
     "rimraf": "6.0.1",
     "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
-    "semantic-release": "24.0.0",
+    "semantic-release": "25.0.3",
     "storybook": "^9.1.4",
     "tslib": "^2.8.1",
     "typescript": "5.5.3",
@@ -381,7 +381,8 @@
     "lit": "3.x"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "eik": {
     "files": "eik",