@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

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,9 @@
-import { WarpBreadcrumbs } from './breadcrumbs.js';
+import type { WarpBreadcrumbs } from "./breadcrumbs.js";
+/**
+ * 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.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
+ */
 export declare const Breadcrumbs: import("@lit/react").ReactWebComponent<WarpBreadcrumbs, {}>;

package/dist/packages/breadcrumbs/react.js

@@ -1,11 +1,18 @@
-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 {
 }
+/**
+ * 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.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
+ */
 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 { css } from 'lit';
-export const styles = css `*,: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}`;
+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,13 +1,14 @@
-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.
+ *
  * Use button variants to match action priority, risk, and context.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
  */
 declare class WarpButton extends WarpButton_base {
     #private;
@@ -19,7 +20,7 @@ declare class WarpButton extends WarpButton_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -28,7 +29,7 @@ declare class WarpButton extends WarpButton_base {
      * Native button type.
      * Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
      */
-    type: ButtonType;
+    type: ButtonType | undefined;
     /**
      * Focuses the button when it is first rendered.
      * Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
@@ -38,7 +39,7 @@ declare class WarpButton extends WarpButton_base {
      * Visual style of the button.
      * Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
      */
-    variant: ButtonVariant;
+    variant: ButtonVariant | undefined;
     /**
      * Deprecated quiet visual treatment flag
      * Use `variant="quiet"` instead.
@@ -65,12 +66,12 @@ declare class WarpButton extends WarpButton_base {
      * URL for rendering the button as a link.
      * When set, the component renders `w-link` instead of a native `button`.
      */
-    href: string;
+    href: string | undefined;
     /**
      * Link browsing context.
      * Passed to the rendered link when `href` is set.
      */
-    target: string;
+    target: string | undefined;
     /**
      * Visually disables the button.
      * Disabled buttons are discouraged because they can hide the reason an action is unavailable.
@@ -80,7 +81,7 @@ declare class WarpButton extends WarpButton_base {
      * Link relationship.
      * Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
      */
-    rel: string;
+    rel: string | undefined;
     /**
      * Makes the button fill its parent width.
      * Useful in narrow layouts where the button should span the available inline space.
@@ -92,25 +93,25 @@ declare class WarpButton extends WarpButton_base {
      *
      * @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.
      */
-    buttonClass: string;
+    buttonClass: string | undefined;
     /**
      * Form control name.
      * Used when the button participates in form handling.
      */
-    name: string;
+    name: string | undefined;
     /**
      * Form control value.
      * Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
      */
-    value: string;
+    value: string | undefined;
     /**
      * The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
      */
-    commandfor: string;
+    commandfor: string | undefined;
     /**
      * The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
      */
-    command: string;
+    command: string | undefined;
     private buttonEl;
     private ariaValueTextLoading;
     updated(changedProperties: PropertyValues<this>): void;
@@ -126,4 +127,9 @@ declare class WarpButton extends WarpButton_base {
     resetFormControl(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "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([]);
     });