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

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

@@ -1,40 +1,41 @@
-import React from 'react';
-import { Breadcrumbs } from './react';
+import React from "react";
+import { Breadcrumbs } from "./react";
+import { BreadcrumbItem } from "../breadcrumb-item/react";
 export default {
-    title: 'Navigation/Breadcrumbs',
+    title: "Navigation/Breadcrumbs",
     render(args) {
         return (React.createElement(Breadcrumbs, { ...args },
-            React.createElement("a", { href: "#/home" }, "Home"),
-            React.createElement("a", { href: "#/category" }, "Category"),
-            React.createElement("a", { href: "#/subcategory" }, "Subcategory"),
-            React.createElement("span", { "aria-current": "page" }, "Current Page")));
+            React.createElement(BreadcrumbItem, { href: "#/home" }, "Home"),
+            React.createElement(BreadcrumbItem, { href: "#/category" }, "Category"),
+            React.createElement(BreadcrumbItem, { href: "#/subcategory" }, "Subcategory"),
+            React.createElement(BreadcrumbItem, { "current-page": true }, "Current Page")));
     },
     component: Breadcrumbs,
 };
 export const Default = {
     args: {
-        'aria-label': 'You are here',
+        "aria-label": "You are here",
     },
 };
 export const WithLinks = {
     args: {
-        'aria-label': 'Navigation breadcrumb',
+        "aria-label": "Navigation breadcrumb",
     },
     render(args) {
         return (React.createElement(Breadcrumbs, { ...args },
-            React.createElement("a", { href: "#/eiendom" }, "Eiendom"),
-            React.createElement("a", { href: "#/bolig-til-salgs" }, "Bolig til salgs"),
-            React.createElement("a", { href: "#/oslo", "aria-current": "page" }, "Oslo")));
+            React.createElement(BreadcrumbItem, { href: "#/eiendom" }, "Eiendom"),
+            React.createElement(BreadcrumbItem, { href: "#/bolig-til-salgs" }, "Bolig til salgs"),
+            React.createElement(BreadcrumbItem, { href: "#/oslo", "current-page": true }, "Oslo")));
     },
 };
 export const WithSpanForCurrentPage = {
     args: {
-        'aria-label': 'You are here',
+        "aria-label": "You are here",
     },
     render(args) {
         return (React.createElement(Breadcrumbs, { ...args },
-            React.createElement("a", { href: "#/eiendom" }, "Eiendom"),
-            React.createElement("a", { href: "#/bolig-til-salgs" }, "Bolig til salgs"),
-            React.createElement("span", { "aria-current": "page" }, "Oslo")));
+            React.createElement(BreadcrumbItem, { href: "#/eiendom" }, "Eiendom"),
+            React.createElement(BreadcrumbItem, { href: "#/bolig-til-salgs" }, "Bolig til salgs"),
+            React.createElement(BreadcrumbItem, { "current-page": true }, "Oslo")));
     },
 };

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

@@ -1,12 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpBreadcrumbs } from './breadcrumbs.js';
-import './breadcrumbs.js';
-declare const args: Partial<WarpBreadcrumbs> & {
-    [key: string]: any;
-};
-declare const meta: Meta<typeof args>;
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpBreadcrumbs } from "./breadcrumbs.js";
+import "./breadcrumbs.js";
+import "../breadcrumb-item/breadcrumb-item.js";
+declare const storybookHelpers: import("@wc-toolkit/storybook-helpers").StoryHelpers<WarpBreadcrumbs>;
+declare const meta: Meta<typeof storybookHelpers.args>;
 export default meta;
-type Story = StoryObj<typeof args>;
+type Story = StoryObj<typeof storybookHelpers.args>;
 export declare const Default: Story;
 export declare const WithLinks: Story;
 export declare const WithSpanForCurrentPage: Story;

package/dist/packages/breadcrumbs/breadcrumbs.stories.js

@@ -1,22 +1,24 @@
-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 './breadcrumbs.js';
-const { events, args, argTypes } = getStorybookHelpers('w-breadcrumbs');
+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 "./breadcrumbs.js";
+import "../breadcrumb-item/breadcrumb-item.js";
+const storybookHelpers = getStorybookHelpers("w-breadcrumbs");
+const { events, argTypes } = storybookHelpers;
 const meta = {
-    title: 'Navigation/Breadcrumbs',
+    title: "Navigation/Breadcrumbs",
     render(args) {
         return html `
-      <w-breadcrumbs ${spread(prespread(args))}>
-        <a href="#/home">Home</a>
-        <a href="#/category">Category</a>
-        <span aria-current="page">Current page</span>
-      </w-breadcrumbs>
-    `;
+			<w-breadcrumbs ${spread(prespread(args))}>
+				<w-breadcrumb-item href="#/home">Home</w-breadcrumb-item>
+				<w-breadcrumb-item href="#/category">Category</w-breadcrumb-item>
+				<w-breadcrumb-item current-page>Current page</w-breadcrumb-item>
+			</w-breadcrumbs>
+		`;
     },
     args: {
-        'aria-label': 'You are here',
+        "aria-label": "You are here",
     },
     argTypes,
     parameters: {
@@ -30,22 +32,24 @@ export const Default = {};
 export const WithLinks = {
     render(args) {
         return html `
-      <w-breadcrumbs ${spread(prespread(args))}>
-        <a href="#/home">Home</a>
-        <a href="#/category">Category</a>
-        <a href="#/subcategory" aria-current="page">Current page</a>
-      </w-breadcrumbs>
-    `;
+			<w-breadcrumbs ${spread(prespread(args))}>
+				<w-breadcrumb-item href="#/home">Home</w-breadcrumb-item>
+				<w-breadcrumb-item href="#/category">Category</w-breadcrumb-item>
+				<w-breadcrumb-item href="#" current-page
+					>Current page</w-breadcrumb-item
+				>
+			</w-breadcrumbs>
+		`;
     },
 };
 export const WithSpanForCurrentPage = {
     render(args) {
         return html `
-      <w-breadcrumbs ${spread(prespread(args))}>
-        <a href="#/home">Home</a>
-        <a href="#/category">Category</a>
-        <span aria-current="page">Current page</span>
-      </w-breadcrumbs>
-    `;
+			<w-breadcrumbs ${spread(prespread(args))}>
+				<w-breadcrumb-item href="#/home">Home</w-breadcrumb-item>
+				<w-breadcrumb-item href="#/category">Category</w-breadcrumb-item>
+				<w-breadcrumb-item current-page>Current page</w-breadcrumb-item>
+			</w-breadcrumbs>
+		`;
     },
 };

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

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

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

@@ -1,25 +1,27 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './breadcrumbs.js';
-test('renders a bread crumb', async () => {
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./breadcrumbs.js";
+test("renders a bread crumb", async () => {
     const page = render(html ` <w-breadcrumb>
-      <a href="/foo">Foo</a>
-      <a href="/bar">Bar</a>
-    </w-breadcrumb>`);
-    await expect.element(page.getByText('Foo')).toBeVisible();
-    await expect.element(page.getByText('Bar')).toBeVisible();
+			<a href="/foo">Foo</a>
+			<a href="/bar">Bar</a>
+		</w-breadcrumb>`);
+    await expect.element(page.getByText("Foo")).toBeVisible();
+    await expect.element(page.getByText("Bar")).toBeVisible();
 });
-test('renders an aria-label if set', async () => {
+test("renders an aria-label if set", async () => {
     const page = render(html ` <w-breadcrumb aria-label="You are here"> </w-breadcrumb>`);
-    await expect.element(page.getByLabelText('You are here', { hasText: 'w-breadcrumb' })).toBeDefined();
+    await expect
+        .element(page.getByLabelText("You are here", { hasText: "w-breadcrumb" }))
+        .toBeDefined();
 });
-test('sets role navigation', async () => {
+test("sets role navigation", async () => {
     const page = render(html ` <w-breadcrumb>
-      <a href="/foo">Foo</a>
-      <a href="/bar">Bar</a>
-  </w-breadcrumb>`);
+			<a href="/foo">Foo</a>
+			<a href="/bar">Bar</a>
+		</w-breadcrumb>`);
     // ElementInternals role is set in accessibility tree but not queryable via getByRole
-    const breadcrumb = page.container.querySelector('w-breadcrumb');
+    const breadcrumb = page.container.querySelector("w-breadcrumb");
     expect(breadcrumb).toBeDefined();
 });

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

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

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

package/dist/packages/breadcrumbs/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}.flex{display:flex}.static{position:static}.s-text{color:var(--w-s-color-text)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem * calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem * var(--w-space-x-reverse))}.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}.select-none{-webkit-user-select:none;user-select:none}");

package/dist/packages/button/button.d.ts

@@ -1,7 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-import '../link/link.js';
-export type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'utility' | 'pill' | 'link' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet';
-export type ButtonType = 'button' | 'submit' | 'reset';
+import { LitElement, PropertyValues } from "lit";
+import "../link/link.js";
+export type ButtonVariant = "primary" | "secondary" | "negative" | "negativeQuiet" | "utility" | "pill" | "link" | "quiet" | "utilityQuiet" | "overlay" | "overlayInverted" | "overlayQuiet" | "overlayInvertedQuiet";
+export type ButtonType = "button" | "submit" | "reset";
 declare const WarpButton_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Performs an action or renders a link with button styling.
@@ -128,7 +128,7 @@ declare class WarpButton extends WarpButton_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'w-button': WarpButton;
+        "w-button": WarpButton;
     }
 }
 export { WarpButton };

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

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

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

@@ -1,42 +1,42 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './button.js';
-describe('w-button React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./button.js";
+describe("w-button React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {});
         expect(warnings).toEqual([]);
     });
-    test('primary variant hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {
-            variant: 'primary',
+    test("primary variant hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {
+            variant: "primary",
         });
         expect(warnings).toEqual([]);
     });
-    test('secondary variant hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {
-            variant: 'secondary',
+    test("secondary variant hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {
+            variant: "secondary",
         });
         expect(warnings).toEqual([]);
     });
-    test('with loading state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {
+    test("with loading state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {
             loading: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {
+    test("with disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with href hydrates without warnings', async () => {
-        const warnings = await testHydration('w-button', {
-            href: 'https://example.com',
+    test("with href hydrates without warnings", async () => {
+        const warnings = await testHydration("w-button", {
+            href: "https://example.com",
         });
         expect(warnings).toEqual([]);
     });