@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

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);