@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/packages/utils/unstyled-heading.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 class UnstyledHeading extends LitElement {
     static { this.properties = {
         level: { type: Number },
@@ -16,7 +16,7 @@ class UnstyledHeading extends LitElement {
         return !this.level ? html `<slot></slot>` : unsafeHTML(this._markup);
     }
 }
-if (!customElements.get('w-unstyled-heading')) {
-    customElements.define('w-unstyled-heading', UnstyledHeading);
+if (!customElements.get("w-unstyled-heading")) {
+    customElements.define("w-unstyled-heading", UnstyledHeading);
 }
 export { UnstyledHeading };

package/dist/packages/utils/window-exists.js

@@ -1 +1 @@
-export const windowExists = typeof window !== 'undefined';
+export const windowExists = typeof window !== "undefined";

package/dist/packages/utils.js

@@ -1,4 +1,4 @@
-import { nanoid } from 'nanoid';
-export function uniqueId(prefix = '') {
+import { nanoid } from "nanoid";
+export function uniqueId(prefix = "") {
     return `${prefix}${nanoid()}`;
 }

package/dist/setup-tests.d.ts

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

package/dist/setup-tests.js

@@ -1,33 +1,36 @@
-import 'vitest-browser-lit';
-import axe from 'axe-core';
-import { expect } from 'vitest';
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import "vitest-browser-lit";
+import axe from "axe-core";
+import { expect } from "vitest";
 function formatViolations(violations) {
     if (violations.length === 0) {
-        return '';
+        return "";
     }
     return violations
         .map((violation) => {
         const nodeInfo = violation.nodes
             .map((node) => {
-            const selector = node.target.join(', ');
+            const selector = node.target.join(", ");
             return `  - Element: ${selector}\n    HTML: ${node.html}\n    ${node.failureSummary}`;
         })
-            .join('\n');
+            .join("\n");
         return `${violation.id}: ${violation.help}\n  Impact: ${violation.impact}\n  Help URL: ${violation.helpUrl}\n${nodeInfo}`;
     })
-        .join('\n\n');
+        .join("\n\n");
 }
 async function runAxe(container = document.body, options = {}) {
     return axe.run(container, {
         runOnly: {
-            type: 'tag',
-            values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'],
+            type: "tag",
+            values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"],
         },
         ...options,
     });
 }
 function resolveAxeContainer(received) {
-    if (received && typeof received === 'object' && 'container' in received) {
+    if (received &&
+        typeof received === "object" &&
+        "container" in received) {
         const { container } = received;
         if (container instanceof Element)
             return container;
@@ -41,15 +44,15 @@ function resolveAxeContainer(received) {
     return document.body;
 }
 function toHaveNoViolations(results) {
-    if (typeof results.violations === 'undefined') {
-        throw new Error('No axe-core results found, unable to assert');
+    if (typeof results.violations === "undefined") {
+        throw new Error("No axe-core results found, unable to assert");
     }
     const violations = results.violations;
     const pass = violations.length === 0;
     return {
         pass,
         message: () => pass
-            ? 'Expected to have accessibility violations, but none were found'
+            ? "Expected to have accessibility violations, but none were found"
             : `Expected no accessibility violations, but found ${violations.length}:\n\n${formatViolations(violations)}`,
         actual: violations,
     };

package/dist/tests/react-hydration.js

@@ -1,16 +1,18 @@
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
+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')) {
+        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);
@@ -25,11 +27,11 @@ function propsToHtml(props) {
         if (value === true)
             return key;
         if (value === false || value === undefined || value === null)
-            return '';
+            return "";
         return `${key}="${value}"`;
     })
         .filter(Boolean)
-        .join(' ');
+        .join(" ");
 }
 /**
  * Converts a DOM node to a React element.
@@ -43,15 +45,10 @@ function nodeToReact(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';
+            const name = attr.name;
             props[name] = attr.value;
         }
-        const children = Array.from(el.childNodes).map(nodeToReact).filter(Boolean);
+        const children = Array.from(el.childNodes, nodeToReact).filter(Boolean);
         return React.createElement(el.tagName.toLowerCase(), props, ...children);
     }
     return null;
@@ -60,24 +57,22 @@ function nodeToReact(node) {
  * Converts an HTML string to an array of React elements.
  */
 function htmlToReactElements(html) {
-    const template = document.createElement('template');
+    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()));
+    return Array.from(template.content.childNodes, 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';
+    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}>`;
+        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+)
@@ -85,7 +80,9 @@ export async function testHydration(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')) {
+                if (msg.includes("Hydration") ||
+                    msg.includes("hydrat") ||
+                    msg.includes("did not match")) {
                     window.__HYDRATION_WARNINGS__.push(msg);
                 }
             },
@@ -107,13 +104,13 @@ export async function testHydration(tagName, props = {}) {
  * (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';
+    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}>`;
+        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.
@@ -123,7 +120,9 @@ export async function testHydrationWithChildren(tagName, props, childrenHtml) {
         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')) {
+                if (msg.includes("Hydration") ||
+                    msg.includes("hydrat") ||
+                    msg.includes("did not match")) {
                     window.__HYDRATION_WARNINGS__.push(msg);
                 }
             },

package/dist/tests/react-ssr-attributes.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 type SsrAttributeCase = {
     attrName: string;
     propName: string;

package/dist/tests/react-ssr-attributes.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import { describe, expect, test } from 'vitest';
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, test } from "vitest";
 export function describeReactSsrAttributeMapping(componentName, Component, cases) {
     describe(`${componentName} React SSR`, () => {
-        test.each(cases)('renders $propName as the $attrName attribute', ({ attrName, propName, value = true }) => {
+        test.each(cases)("renders $propName as the $attrName attribute", ({ attrName, propName, value = true }) => {
             const html = renderToString(React.createElement(Component, { [propName]: value }, componentName));
             expect(html).toContain(attrName);
             expect(html).not.toContain(propName);

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.10.0-next.14",
+  "version": "2.10.0-next.17",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -290,7 +290,10 @@
               "description": "Add this property to render a clickable Warp search icon.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "icon",
               "value": { "type": "string | null", "default": "null" }
@@ -326,7 +329,7 @@
               "name": "variant",
               "value": {
                 "type": "'negative' | 'positive' | 'warning' | 'info'",
-                "default": "'info'"
+                "default": "\"info\""
               }
             },
             {
@@ -335,7 +338,7 @@
             },
             {
               "name": "role",
-              "value": { "type": "string", "default": "'alert'" }
+              "value": { "type": "string", "default": "\"alert\"" }
             }
           ],
           "events": [],
@@ -646,7 +649,7 @@
               "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.",
               "value": {
                 "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
-                "default": "'bottom'"
+                "default": "\"bottom\""
               }
             },
             {
@@ -850,7 +853,7 @@
             {
               "name": "role",
               "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
-              "value": { "type": "string", "default": "'region'" }
+              "value": { "type": "string", "default": "\"region\"" }
             }
           ],
           "events": [],
@@ -902,6 +905,42 @@
             "events": []
           }
         },
+        {
+          "name": "w-breadcrumb-item",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb label content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "current-page",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The breadcrumb label content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "currentPage",
+                "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+                "type": "string | null"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-card",
           "description": "Card is a layout component used for separating content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)\n---\n",
@@ -1047,7 +1086,7 @@
         },
         {
           "name": "w-checkbox-group",
-          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
+          "description": "Checkboxes allow users to select multiple options from a list of choices.\n\nUse with `w-checkbox`.\n\n## Architecture Note\nThis component uses a <div> wrapper instead of the more semantic <fieldset> element.\nNote that w-radio-group uses <fieldset>, which provides better accessibility and follows\nHTML best practices. This inconsistency exists for historical reasons and may be addressed\nin a future major version to align both on the more semantic approach.\n\nTODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing\nbackwards compatibility implications (CSS selectors, etc.).\n---\n\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks whether the group passes constraint validation\n- **reportValidity(): _boolean_** - Checks validity and shows the validation message if invalid\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox group.",
           "doc-url": "",
           "attributes": [
             {
@@ -1131,17 +1170,17 @@
             {
               "name": "label",
               "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.",
-              "value": { "type": "string | undefined", "default": "''" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "placeholder",
               "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.",
-              "value": { "type": "string | undefined", "default": "''" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "value",
               "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "open-on-focus",
@@ -1171,7 +1210,7 @@
             {
               "name": "help-text",
               "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.",
-              "value": { "type": "string | undefined", "default": "''" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "disabled",
@@ -1191,12 +1230,12 @@
             {
               "name": "name",
               "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.",
-              "value": { "type": "string | undefined", "default": "''" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "autocomplete",
               "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.",
-              "value": { "type": "string | undefined", "default": "'off'" }
+              "value": { "type": "string | undefined", "default": "\"off\"" }
             }
           ],
           "events": [],
@@ -1309,17 +1348,17 @@
             {
               "name": "header-format",
               "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'MMMM yyyy'" }
+              "value": { "type": "string", "default": "\"MMMM yyyy\"" }
             },
             {
               "name": "weekday-format",
               "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'EEEEEE'" }
+              "value": { "type": "string", "default": "\"EEEEEE\"" }
             },
             {
               "name": "day-format",
               "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
-              "value": { "type": "string", "default": "'PPPP'" }
+              "value": { "type": "string", "default": "\"PPPP\"" }
             }
           ],
           "events": [],
@@ -1862,18 +1901,18 @@
         },
         {
           "name": "w-radio-group",
-          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
+          "description": "Radios allow users to select a single option from a list of choices.\n\nUse with `w-radio`.\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).",
           "doc-url": "",
           "attributes": [
             {
               "name": "label",
               "description": "Label for the radio group.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "help-text",
               "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "optional",
@@ -1908,7 +1947,7 @@
             },
             {
               "name": "help-text",
-              "description": "Alternative to the `help-text` attribute should you need custom HTML."
+              "description": "Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.)."
             }
           ],
           "events": [],
@@ -2364,7 +2403,7 @@
             {
               "name": "action-placement",
               "description": "The placement of the action and close buttons.",
-              "value": { "type": "'inline' | 'block'", "default": "'inline'" }
+              "value": { "type": "'inline' | 'block'", "default": "\"inline\"" }
             },
             {
               "name": "duration",
@@ -2396,7 +2435,7 @@
         },
         {
           "name": "w-snackbar",
-          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter. \n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
+          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
           "doc-url": "",
           "attributes": [],
           "slots": [