@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.17

package/dist/packages/box/box.stories.js

@@ -1,18 +1,18 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './box.js';
-const { events, args, argTypes } = getStorybookHelpers('w-box');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./box.js";
+const { events, args, argTypes } = getStorybookHelpers("w-box");
 const meta = {
-    title: 'Layout/Box',
+    title: "Layout/Box",
     render: (args) => {
         return html `
-      <w-box ${spread(prespread(args))}>
-        <h3>Box Content</h3>
-        <p>This is content inside a box component.</p>
-      </w-box>
-    `;
+			<w-box ${spread(prespread(args))}>
+				<h3>Box Content</h3>
+				<p>This is content inside a box component.</p>
+			</w-box>
+		`;
     },
     args,
     argTypes,
@@ -54,13 +54,19 @@ export const Bleed = {
 };
 export const AccessibleRegion = {
     args: {},
-    render: (args) => {
+    render: () => {
         return html `
-      <w-box aria-labelledby="box-content">
-        <h3 id="box-content">Box Content</h3>
-        <p>Inspect this box in the accessibility tree to see that it is treated as a region.</p>
-        <p>If aria-labelled by is not used, the box will not be treated as a region.</p>
-      </w-box>
-    `;
+			<w-box aria-labelledby="box-content">
+				<h3 id="box-content">Box Content</h3>
+				<p>
+					Inspect this box in the accessibility tree to see that it is treated
+					as a region.
+				</p>
+				<p>
+					If aria-labelled by is not used, the box will not be treated as a
+					region.
+				</p>
+			</w-box>
+		`;
     },
 };

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

@@ -1 +1 @@
-import './box.js';
+import "./box.js";

package/dist/packages/box/box.test.js

@@ -1,9 +1,9 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './box.js';
-test('renders the slotted label', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./box.js";
+test("renders the slotted label", async () => {
     const component = html `<w-box>This is not a button</w-box>`;
     const page = render(component);
-    await expect.element(page.getByText('This is not a button')).toBeVisible();
+    await expect.element(page.getByText("This is not a button")).toBeVisible();
 });

package/dist/packages/box/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpBox } from './box.js';
+import { WarpBox } from "./box.js";
 export declare const Box: import("@lit/react").ReactWebComponent<WarpBox, {}>;

package/dist/packages/box/react.js

@@ -1,11 +1,11 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 export const Box = createComponent({
-    tagName: 'w-box',
+    tagName: "w-box",
     elementClass: Component,
     react: React,
 });

package/dist/packages/box/slot.test.d.ts

@@ -1 +1 @@
-import './box.js';
+import "./box.js";

package/dist/packages/box/slot.test.js

@@ -1,9 +1,9 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './box.js';
-test('renders the slotted label', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./box.js";
+test("renders the slotted label", async () => {
     const component = html `<w-box>This is not a button</w-box>`;
     const page = render(component);
-    await expect.element(page.getByText('This is not a button')).toBeVisible();
+    await expect.element(page.getByText("This is not a button")).toBeVisible();
 });

package/dist/packages/box/styles.js

@@ -1,2 +1,2 @@
-import { unsafeCSS } from 'lit';
+import { unsafeCSS } from "lit";
 export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-2{border-width:2px}.rounded{border-radius:4px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.p-16{padding:1.6rem}.break-words{overflow-wrap:break-word}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}");

package/dist/packages/breadcrumbs/breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult } from "lit";
 /**
  * Shows the navigation structure for the current page.
  * Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.

package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts

@@ -1 +1 @@
-import './breadcrumbs.js';
+import "./breadcrumbs.js";

package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js

@@ -1,60 +1,62 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration, testHydrationWithChildren } from '../../tests/react-hydration';
-import './breadcrumbs.js';
-describe('w-breadcrumbs React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, testHydrationWithChildren, } from "../../tests/react-hydration";
+import "./breadcrumbs.js";
+describe("w-breadcrumbs React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-breadcrumbs', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-breadcrumbs", {});
         expect(warnings).toEqual([]);
     });
-    test('with aria-label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-breadcrumbs', { 'aria-label': 'Navigation breadcrumbs' });
+    test("with aria-label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-breadcrumbs", {
+            "aria-label": "Navigation breadcrumbs",
+        });
         expect(warnings).toEqual([]);
     });
     // Tests for child elements - breadcrumbs consumes children and renders them
     // in shadow DOM, which causes hydration mismatches. These use test.fails
     // to document the known issues until they are fixed.
-    test.fails('with single link child hydrates without warnings', async () => {
+    test.fails("with single link child hydrates without warnings", async () => {
         const childrenHtml = '<a href="#/home">Home</a>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with multiple link children hydrates without warnings', async () => {
+    test.fails("with multiple link children hydrates without warnings", async () => {
         // This tests the interleaving behavior - "/" separators are added between children
         const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with three link children hydrates without warnings', async () => {
+    test.fails("with three link children hydrates without warnings", async () => {
         // More children = more separators interleaved
         const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><a href="#/page">Page</a>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with links and span (current page) hydrates without warnings', async () => {
+    test.fails("with links and span (current page) hydrates without warnings", async () => {
         // Common pattern: links for navigation, span for current page
         const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><span aria-current="page">Current page</span>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with span children hydrates without warnings', async () => {
+    test.fails("with span children hydrates without warnings", async () => {
         // Non-link children get different CSS class (s-text vs s-text-link)
         const childrenHtml = '<span>First</span><span>Second</span><span aria-current="page">Current</span>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with mixed element types hydrates without warnings', async () => {
+    test.fails("with mixed element types hydrates without warnings", async () => {
         // Mix of different element types to ensure class assignment works correctly
         const childrenHtml = '<a href="#/home">Home</a><span>Category</span><a href="#/page">Page</a>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
-    test.fails('with aria-label and children hydrates without warnings', async () => {
+    test.fails("with aria-label and children hydrates without warnings", async () => {
         const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
-        const warnings = await testHydrationWithChildren('w-breadcrumbs', { 'aria-label': 'Breadcrumb navigation' }, childrenHtml);
+        const warnings = await testHydrationWithChildren("w-breadcrumbs", { "aria-label": "Breadcrumb navigation" }, childrenHtml);
         expect(warnings).toEqual([]);
     });
 });
@@ -68,75 +70,79 @@ describe('w-breadcrumbs React SSR hydration', () => {
 // hydrates client-side and moves/modifies them, React detects a mismatch.
 //
 // These tests use test.fails to document the known issues until they are fixed.
-describe('w-breadcrumbs child element DOM stability', () => {
-    test.fails('should preserve children in light DOM (not move to shadow DOM)', async () => {
-        const container = document.createElement('div');
-        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+describe("w-breadcrumbs child element DOM stability", () => {
+    test.fails("should preserve children in light DOM (not move to shadow DOM)", async () => {
+        const container = document.createElement("div");
+        container.innerHTML =
+            '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
         document.body.appendChild(container);
         // Wait for custom element upgrade
         await new Promise((resolve) => setTimeout(resolve, 100));
-        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        const breadcrumbs = container.querySelector("w-breadcrumbs");
         // Children should remain in light DOM, not be moved to shadow DOM
         // Current behavior: children.length is 0 because they're moved to shadow DOM
         expect(breadcrumbs?.children.length).toBe(2);
         document.body.removeChild(container);
     });
-    test.fails('should not add classes to light DOM link children', async () => {
-        const container = document.createElement('div');
-        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+    test.fails("should not add classes to light DOM link children", async () => {
+        const container = document.createElement("div");
+        container.innerHTML =
+            '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
         document.body.appendChild(container);
         // Wait for custom element upgrade
         await new Promise((resolve) => setTimeout(resolve, 100));
         // Check light DOM children exist and don't have modified classes
-        const links = container.querySelectorAll('w-breadcrumbs > a');
+        const links = container.querySelectorAll("w-breadcrumbs > a");
         expect(links.length).toBe(2);
         for (const link of links) {
             // Links should NOT have classes added by the component
-            expect(link.classList.contains('s-text-link')).toBe(false);
+            expect(link.classList.contains("s-text-link")).toBe(false);
         }
         document.body.removeChild(container);
     });
-    test.fails('should not add classes to light DOM span children', async () => {
-        const container = document.createElement('div');
-        container.innerHTML = '<w-breadcrumbs><span>First</span><span>Current</span></w-breadcrumbs>';
+    test.fails("should not add classes to light DOM span children", async () => {
+        const container = document.createElement("div");
+        container.innerHTML =
+            "<w-breadcrumbs><span>First</span><span>Current</span></w-breadcrumbs>";
         document.body.appendChild(container);
         await new Promise((resolve) => setTimeout(resolve, 100));
-        const spans = container.querySelectorAll('w-breadcrumbs > span');
+        const spans = container.querySelectorAll("w-breadcrumbs > span");
         expect(spans.length).toBe(2);
         for (const span of spans) {
             // Spans should NOT have classes added by the component
-            expect(span.classList.contains('s-text')).toBe(false);
+            expect(span.classList.contains("s-text")).toBe(false);
         }
         document.body.removeChild(container);
     });
-    test.fails('should not insert separator elements into light DOM', async () => {
-        const container = document.createElement('div');
-        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+    test.fails("should not insert separator elements into light DOM", async () => {
+        const container = document.createElement("div");
+        container.innerHTML =
+            '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
         document.body.appendChild(container);
         await new Promise((resolve) => setTimeout(resolve, 100));
-        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        const breadcrumbs = container.querySelector("w-breadcrumbs");
         // Should only have the original 2 children, no separators added to light DOM
         expect(breadcrumbs?.children.length).toBe(2);
         // No separator spans should be in light DOM
-        const separators = container.querySelectorAll('w-breadcrumbs > span.select-none');
+        const separators = container.querySelectorAll("w-breadcrumbs > span.select-none");
         expect(separators.length).toBe(0);
         document.body.removeChild(container);
     });
-    test.fails('should preserve original child element attributes in light DOM', async () => {
-        const container = document.createElement('div');
+    test.fails("should preserve original child element attributes in light DOM", async () => {
+        const container = document.createElement("div");
         container.innerHTML =
             '<w-breadcrumbs><a href="#/home" data-test="home">Home</a><span aria-current="page">Current</span></w-breadcrumbs>';
         document.body.appendChild(container);
         await new Promise((resolve) => setTimeout(resolve, 100));
-        const link = container.querySelector('w-breadcrumbs > a');
-        const span = container.querySelector('w-breadcrumbs > span');
+        const link = container.querySelector("w-breadcrumbs > a");
+        const span = container.querySelector("w-breadcrumbs > span");
         // Children should exist in light DOM
         expect(link).not.toBeNull();
         expect(span).not.toBeNull();
         // Original attributes should be preserved
-        expect(link?.getAttribute('href')).toBe('#/home');
-        expect(link?.getAttribute('data-test')).toBe('home');
-        expect(span?.getAttribute('aria-current')).toBe('page');
+        expect(link?.getAttribute("href")).toBe("#/home");
+        expect(link?.getAttribute("data-test")).toBe("home");
+        expect(span?.getAttribute("aria-current")).toBe("page");
         document.body.removeChild(container);
     });
 });