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

package/dist/packages/card/card.react.stories.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Card } from './react';
+import React from "react";
+import { Card } from "./react";
 export default {
-    title: 'Navigation/Card',
+    title: "Navigation/Card",
     render(args) {
         return (React.createElement(Card, { ...args },
-            React.createElement("div", { style: { padding: '16px' } },
+            React.createElement("div", { style: { padding: "16px" } },
                 React.createElement("h3", null, "Card Title"),
                 React.createElement("p", null, "This is card content with some example text."))));
     },
@@ -52,12 +52,12 @@ export const PropertyExample = {
         clickable: true,
     },
     render(args) {
-        return (React.createElement(Card, { ...args, style: { maxWidth: '300px' } },
-            React.createElement("img", { style: { width: '100%', height: '200px', objectFit: 'cover' }, src: "https://unsplash.it/300/200?random", alt: "Example image" }),
-            React.createElement("div", { style: { padding: '16px' } },
-                React.createElement("p", { style: { fontSize: '12px', color: '#666', margin: '0 0 8px 0' } }, "DNB Eiendom"),
-                React.createElement("p", { style: { margin: '0 0 8px 0' } }, "Stilfull og gjennomg\u00E5ende 3-roms m/balkong. Oppusset i 2019."),
-                React.createElement("p", { style: { fontSize: '14px', color: '#666', margin: '0 0 8px 0' } }, "B\u00F8gata 25C, 0655 Oslo"),
-                React.createElement("p", { style: { fontWeight: 'bold', margin: '0' } }, "52 m\u00B2 Totalpris: 4 869 039 kr"))));
+        return (React.createElement(Card, { ...args, style: { maxWidth: "300px" } },
+            React.createElement("img", { style: { width: "100%", height: "200px", objectFit: "cover" }, src: "https://unsplash.it/300/200?random", alt: "Example image" }),
+            React.createElement("div", { style: { padding: "16px" } },
+                React.createElement("p", { style: { fontSize: "12px", color: "#666", margin: "0 0 8px 0" } }, "DNB Eiendom"),
+                React.createElement("p", { style: { margin: "0 0 8px 0" } }, "Stilfull og gjennomg\u00E5ende 3-roms m/balkong. Oppusset i 2019."),
+                React.createElement("p", { style: { fontSize: "14px", color: "#666", margin: "0 0 8px 0" } }, "B\u00F8gata 25C, 0655 Oslo"),
+                React.createElement("p", { style: { fontWeight: "bold", margin: "0" } }, "52 m\u00B2 Totalpris: 4 869 039 kr"))));
     },
 };

package/dist/packages/card/card.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpCard } from './card.js';
-import './card.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpCard } from "./card.js";
+import "./card.js";
 declare const args: Partial<WarpCard> & {
     [key: string]: any;
 };

package/dist/packages/card/card.stories.js

@@ -1,20 +1,20 @@
-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 './card.js';
-const { events, args, argTypes } = getStorybookHelpers('w-card');
+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 "./card.js";
+const { events, args, argTypes } = getStorybookHelpers("w-card");
 const meta = {
-    title: 'Navigation/Card',
+    title: "Navigation/Card",
     render(args) {
         return html `
-      <w-card ${spread(prespread(args))}>
-        <div style="padding: 16px;">
-          <h3>Card Title</h3>
-          <p>This is card content with some example text.</p>
-        </div>
-      </w-card>
-    `;
+			<w-card ${spread(prespread(args))}>
+				<div style="padding: 16px;">
+					<h3>Card Title</h3>
+					<p>This is card content with some example text.</p>
+				</div>
+			</w-card>
+		`;
     },
     args,
     argTypes,
@@ -68,15 +68,27 @@ export const PropertyExample = {
     },
     render(args) {
         return html `
-      <w-card ${spread(prespread(args))} style="max-width: 300px;">
-        <img style="width: 100%; height: 200px; object-fit: cover;" src="https://unsplash.it/300/200?random" alt="Example image" />
-        <div style="padding: 16px;">
-          <p style="font-size: 12px; color: #666; margin: 0 0 8px 0;">DNB Eiendom</p>
-          <p style="margin: 0 0 8px 0;">Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019.</p>
-          <p style="font-size: 14px; color: #666; margin: 0 0 8px 0;">Bøgata 25C, 0655 Oslo</p>
-          <p style="font-weight: bold; margin: 0;">52 m² Totalpris: 4 869 039 kr</p>
-        </div>
-      </w-card>
-    `;
+			<w-card ${spread(prespread(args))} style="max-width: 300px;">
+				<img
+					style="width: 100%; height: 200px; object-fit: cover;"
+					src="https://unsplash.it/300/200?random"
+					alt="Example image"
+				/>
+				<div style="padding: 16px;">
+					<p style="font-size: 12px; color: #666; margin: 0 0 8px 0;">
+						DNB Eiendom
+					</p>
+					<p style="margin: 0 0 8px 0;">
+						Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019.
+					</p>
+					<p style="font-size: 14px; color: #666; margin: 0 0 8px 0;">
+						Bøgata 25C, 0655 Oslo
+					</p>
+					<p style="font-weight: bold; margin: 0;">
+						52 m² Totalpris: 4 869 039 kr
+					</p>
+				</div>
+			</w-card>
+		`;
     },
 };

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

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

package/dist/packages/card/card.test.js

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

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

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

package/dist/packages/card/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 Card = createComponent({
-    tagName: 'w-card',
+    tagName: "w-card",
     elementClass: Component,
     react: React,
 });

package/dist/packages/card/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}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}");

package/dist/packages/checkbox/checkbox.a11y.test.d.ts

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

package/dist/packages/checkbox/checkbox.a11y.test.js

@@ -1,73 +1,87 @@
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './checkbox.js';
-describe('w-checkbox accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./checkbox.js";
+describe("w-checkbox accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `<w-checkbox>Check me</w-checkbox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `<w-checkbox disabled>Check me</w-checkbox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required state has no violations', async () => {
+        test("required state has no violations", async () => {
             const page = render(html `<w-checkbox required>Check me</w-checkbox>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('indeterminate state has no violations', async () => {
+        test("indeterminate state has no violations", async () => {
             const page = render(html `<w-checkbox indeterminate>Check me</w-checkbox>`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('checkbox has accessible name from label slot', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("checkbox has accessible name from label slot", async () => {
             const page = render(html `<w-checkbox>Accept terms</w-checkbox>`);
-            await expect.element(page.getByRole('checkbox', { name: 'Accept terms' })).toBeVisible();
+            await expect
+                .element(page.getByRole("checkbox", { name: "Accept terms" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('required state is exposed', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("required state is exposed", async () => {
             const page = render(html `<w-checkbox required>Required</w-checkbox>`);
-            await expect.element(page.getByRole('checkbox', { name: 'Required' })).toHaveAttribute('required');
+            await expect
+                .element(page.getByRole("checkbox", { name: "Required" }))
+                .toHaveAttribute("required");
         });
-        test('disabled state is exposed', async () => {
+        test("disabled state is exposed", async () => {
             const page = render(html `<w-checkbox disabled>Disabled</w-checkbox>`);
-            await expect.element(page.getByRole('checkbox', { name: 'Disabled' })).toBeDisabled();
+            await expect
+                .element(page.getByRole("checkbox", { name: "Disabled" }))
+                .toBeDisabled();
         });
-        test('checked state is exposed', async () => {
+        test("checked state is exposed", async () => {
             const page = render(html `<w-checkbox checked>Checked</w-checkbox>`);
-            await expect.element(page.getByRole('checkbox', { name: 'Checked' })).toBeChecked();
+            await expect
+                .element(page.getByRole("checkbox", { name: "Checked" }))
+                .toBeChecked();
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('checkbox is focusable', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("checkbox is focusable", async () => {
             const page = render(html `<w-checkbox>Focusable</w-checkbox>`);
-            await expect.element(page.getByRole('checkbox', { name: 'Focusable' })).toBeVisible();
-            const wCheckbox = document.querySelector('w-checkbox');
+            await expect
+                .element(page.getByRole("checkbox", { name: "Focusable" }))
+                .toBeVisible();
+            const wCheckbox = document.querySelector("w-checkbox");
             await wCheckbox.updateComplete;
             wCheckbox.focus();
-            await expect.poll(() => wCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
+            await expect
+                .poll(() => wCheckbox?.shadowRoot?.activeElement?.tagName)
+                .toBe("INPUT");
         });
-        test('disabled checkbox is not focusable', async () => {
+        test("disabled checkbox is not focusable", async () => {
             const page = render(html `
-        <button>Before</button>
-        <w-checkbox disabled>Disabled</w-checkbox>
-        <button>After</button>
-      `);
-            const buttons = Array.from(document.querySelectorAll('button'));
+				<button>Before</button>
+				<w-checkbox disabled>Disabled</w-checkbox>
+				<button>After</button>
+			`);
+            const buttons = [...document.querySelectorAll("button")];
             const beforeBtn = buttons[0];
             const afterBtn = buttons[1];
             expect(beforeBtn).toBeDefined();
             expect(afterBtn).toBeDefined();
             beforeBtn?.focus();
-            const wCheckbox = document.querySelector('w-checkbox');
+            const wCheckbox = document.querySelector("w-checkbox");
             await wCheckbox?.updateComplete;
             wCheckbox?.focus();
             await expect.element(beforeBtn).toHaveFocus();
             expect(wCheckbox?.shadowRoot?.activeElement).toBeNull();
-            await expect.element(page.getByRole('checkbox', { name: 'Disabled' })).toBeDisabled();
+            await expect
+                .element(page.getByRole("checkbox", { name: "Disabled" }))
+                .toBeDisabled();
         });
     });
 });

package/dist/packages/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpCheckbox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * @parent w-checkbox-group
@@ -92,7 +92,7 @@ export declare class WarpCheckbox extends WarpCheckbox_base {
 export declare const WCheckbox: typeof WarpCheckbox;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-checkbox': WarpCheckbox;
+        "w-checkbox": WarpCheckbox;
     }
 }
 export {};

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

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

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

@@ -1,45 +1,45 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './checkbox.js';
-describe('w-checkbox React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./checkbox.js";
+describe("w-checkbox React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {});
         expect(warnings).toEqual([]);
     });
-    test('with name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {
-            name: 'agree',
+    test("with name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {
+            name: "agree",
         });
         expect(warnings).toEqual([]);
     });
-    test('checked checkbox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {
-            name: 'agree',
+    test("checked checkbox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {
+            name: "agree",
             checked: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('disabled checkbox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {
-            name: 'agree',
+    test("disabled checkbox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {
+            name: "agree",
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('indeterminate checkbox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {
-            name: 'agree',
+    test("indeterminate checkbox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {
+            name: "agree",
             indeterminate: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('invalid checkbox hydrates without warnings', async () => {
-        const warnings = await testHydration('w-checkbox', {
-            name: 'agree',
+    test("invalid checkbox hydrates without warnings", async () => {
+        const warnings = await testHydration("w-checkbox", {
+            name: "agree",
             invalid: true,
         });
         expect(warnings).toEqual([]);