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

package/dist/packages/datepicker/datepicker.react.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { DatePicker } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { DatePicker } from "./react";
 declare const _default: {
     title: string;
     render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {

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

@@ -1,26 +1,26 @@
-import React from 'react';
-import { DatePicker } from './react';
+import React from "react";
+import { DatePicker } from "./react";
 export default {
-    title: 'Forms/Datepicker',
+    title: "Forms/Datepicker",
     render(args) {
-        return (React.createElement("div", { style: { minHeight: '400px' } },
+        return (React.createElement("div", { style: { minHeight: "400px" } },
             React.createElement(DatePicker, { ...args })));
     },
     component: DatePicker,
 };
 export const Default = {
     args: {
-        label: 'Dato',
-        lang: 'nb',
+        label: "Dato",
+        lang: "nb",
     },
 };
 export const DisableCalendarDates = {
     args: {
-        label: 'Dato',
-        lang: 'nb',
+        label: "Dato",
+        lang: "nb",
     },
     render(args) {
-        return (React.createElement("div", { style: { minHeight: '400px' } },
+        return (React.createElement("div", { style: { minHeight: "400px" } },
             React.createElement(DatePicker, { ...args, isDayDisabled: (day) => day.getDay() === 0 })));
     },
 };

package/dist/packages/datepicker/datepicker.react.test.js

@@ -1,7 +1,7 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { DatePicker } from './react.js';
-describeReactSsrAttributeMapping('DatePicker', DatePicker, [
-    { propName: 'headerFormat', attrName: 'header-format', value: 'short' },
-    { propName: 'weekdayFormat', attrName: 'weekday-format', value: 'narrow' },
-    { propName: 'dayFormat', attrName: 'day-format', value: 'numeric' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { DatePicker } from "./react.js";
+describeReactSsrAttributeMapping("DatePicker", DatePicker, [
+    { propName: "headerFormat", attrName: "header-format", value: "short" },
+    { propName: "weekdayFormat", attrName: "weekday-format", value: "narrow" },
+    { propName: "dayFormat", attrName: "day-format", value: "numeric" },
 ]);

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

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

package/dist/packages/datepicker/datepicker.stories.js

@@ -1,26 +1,26 @@
-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 '../button/button.js';
-import './datepicker.js';
-const { events, args, argTypes } = getStorybookHelpers('w-datepicker');
+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 "../button/button.js";
+import "./datepicker.js";
+const { events, args, argTypes } = getStorybookHelpers("w-datepicker");
 const meta = {
-    title: 'Forms/Datepicker',
+    title: "Forms/Datepicker",
     render(args) {
         return html `
-      <!-- Workaround for Storybook's overflow hidden -->
-      <div style="min-height: 400px">
-        <form method="get">
-          <w-datepicker ${spread(prespread(args))}></w-datepicker>
-          <script type="module">
-            const picker = document.querySelector('w-datepicker');
-            picker.addEventListener('blur', console.log);
-          </script>
-          <input type="submit" hidden>
-        </form>
-      </div>
-    `;
+			<!-- Workaround for Storybook's overflow hidden -->
+			<div style="min-height: 400px">
+				<form method="get">
+					<w-datepicker ${spread(prespread(args))}></w-datepicker>
+					<script type="module">
+						const picker = document.querySelector("w-datepicker");
+						picker.addEventListener("blur", console.log);
+					</script>
+					<input type="submit" hidden />
+				</form>
+			</div>
+		`;
     },
     args,
     argTypes,
@@ -33,24 +33,24 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        label: 'Date',
+        label: "Date",
     },
 };
 export const DisableCalendarDates = {
     args: {
-        label: 'Date',
+        label: "Date",
     },
     render(args) {
         return html `
-      <!-- Workaround for Storybook's overflow hidden -->
-      <div style="min-height: 400px">
-        <w-datepicker ${spread(prespread(args))}></w-datepicker>
-      </div>
-      <script type="module">
-        const datePicker = document.querySelector('w-datepicker');
-        // No working on Sundays!
-        datePicker.isDayDisabled = (day) => day.getDay() === 0;
-      </script>
-    `;
+			<!-- Workaround for Storybook's overflow hidden -->
+			<div style="min-height: 400px">
+				<w-datepicker ${spread(prespread(args))}></w-datepicker>
+			</div>
+			<script type="module">
+				const datePicker = document.querySelector("w-datepicker");
+				// No working on Sundays!
+				datePicker.isDayDisabled = (day) => day.getDay() === 0;
+			</script>
+		`;
     },
 };

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

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

package/dist/packages/datepicker/datepicker.test.js

@@ -1,111 +1,109 @@
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { server, userEvent } from 'vitest/browser';
-import { render } from 'vitest-browser-lit';
-import '../button/button.js';
-import './datepicker.js';
-test('can pick a date using a pointer', async () => {
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { server, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-lit";
+import "../button/button.js";
+import "./datepicker.js";
+test("can pick a date using a pointer", async () => {
     const component = html `
-    <form data-testid="flight">
-      <w-datepicker label="From date" name="from"></w-datepicker>
-    </form>
-  `;
+		<form data-testid="flight">
+			<w-datepicker label="From date" name="from"></w-datepicker>
+		</form>
+	`;
     const page = render(component);
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    await expect.element(page.getByTestId('calendar').query()).not.toBeVisible();
-    await page.getByRole('button').click({ force: true });
-    await expect.element(page.getByTestId('calendar')).toBeVisible();
-    await page.getByRole('gridcell').nth(15).click();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    await expect.element(page.getByTestId("calendar").query()).not.toBeVisible();
+    await page.getByRole("button").click({ force: true });
+    await expect.element(page.getByTestId("calendar")).toBeVisible();
+    await page.getByRole("gridcell").nth(15).click();
     await expect
-        .element(page.getByTestId('calendar').query(), { message: 'expected calendar to close after clicking a date' })
+        .element(page.getByTestId("calendar").query(), {
+        message: "expected calendar to close after clicking a date",
+    })
         .not.toBeVisible();
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test.skipIf(server.browser === 'firefox')('can pick a date using a keyboard', async () => {
+test.skipIf(server.browser === "firefox")("can pick a date using a keyboard", async () => {
     const component = html `
-    <form data-testid="flight">
-      <w-datepicker label="From date" name="from"></w-datepicker>
-    </form>
-  `;
+			<form data-testid="flight">
+				<w-datepicker label="From date" name="from"></w-datepicker>
+			</form>
+		`;
     const page = render(component);
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    await expect.element(page.getByTestId('calendar').query()).not.toBeVisible();
-    const toggle = page.getByRole('button').element();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    await expect
+        .element(page.getByTestId("calendar").query())
+        .not.toBeVisible();
+    const toggle = page.getByRole("button").element();
     toggle.focus();
-    await userEvent.keyboard('[Enter]');
-    await expect.element(page.getByTestId('calendar')).toBeVisible();
-    page.getByRole('gridcell').nth(15).element().focus();
-    await userEvent.keyboard('[Enter]');
+    await userEvent.keyboard("[Enter]");
+    await expect.element(page.getByTestId("calendar")).toBeVisible();
+    page.getByRole("gridcell").nth(15).element().focus();
+    await userEvent.keyboard("[Enter]");
     await expect
-        .element(page.getByTestId('calendar').query(), { message: 'expected calendar to close after clicking a date' })
+        .element(page.getByTestId("calendar").query(), {
+        message: "expected calendar to close after clicking a date",
+    })
         .not.toBeVisible();
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test('can pick a date by typing in the input field', async () => {
+test("can pick a date by typing in the input field", async () => {
     const component = html `
-    <form data-testid="flight">
-      <w-datepicker label="From date" name="from" lang="nb"></w-datepicker>
-    </form>
-  `;
+		<form data-testid="flight">
+			<w-datepicker label="From date" name="from" lang="nb"></w-datepicker>
+		</form>
+	`;
     const page = render(component);
-    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
-    const toggle = page.getByLabelText('From date').element();
+    await expect.element(page.getByLabelText("From date")).not.toHaveValue();
+    const toggle = page.getByLabelText("From date").element();
     toggle.focus();
-    await page.getByLabelText('From date').fill('2025-01-01');
-    await expect.element(page.getByLabelText('From date')).toHaveValue();
-    const formData = new FormData(page.getByTestId('flight').element());
-    expect(formData.get('from')).toBeTruthy();
+    await page.getByLabelText("From date").fill("2025-01-01");
+    await expect.element(page.getByLabelText("From date")).toHaveValue();
+    const formData = new FormData(page.getByTestId("flight").element());
+    expect(formData.get("from")).toBeTruthy();
 });
-test('can reset datepicker by resetting surrounding form', async () => {
-    const label = 'Test label';
+test("can reset datepicker by resetting surrounding form", async () => {
+    const label = "Test label";
     render(html `
-    <form>
-      <w-datepicker
-        label=${label}
-        name="test"
-        value="2025-01-01"
-      >
-      </w-datepicker>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wDatepicker = document.querySelector('w-datepicker');
+		<form>
+			<w-datepicker label=${label} name="test" value="2025-01-01">
+			</w-datepicker>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wDatepicker = document.querySelector("w-datepicker");
     // sanity
     expect(form).not.toBeNull();
     expect(wDatepicker).not.toBeNull();
     // Initial value is "2025-01-01"
-    expect(wDatepicker.value).toBe('2025-01-01');
+    expect(wDatepicker.value).toBe("2025-01-01");
     // Change the value to "definitely not 2025-01-01"
-    wDatepicker.value = 'definitely not 2025-01-01';
-    expect(wDatepicker.value).toBe('definitely not 2025-01-01');
+    wDatepicker.value = "definitely not 2025-01-01";
+    expect(wDatepicker.value).toBe("definitely not 2025-01-01");
     // Reset the form
     form.reset();
     // Value should be reset back to "2025-01-01"
-    expect(wDatepicker.value).toBe('2025-01-01');
+    expect(wDatepicker.value).toBe("2025-01-01");
 });
-test('submits the associated form when datepicker input field has focus and user presses Enter', async () => {
+test("submits the associated form when datepicker input field has focus and user presses Enter", async () => {
     const screen = render(html `
-    <form>
-      <w-datepicker
-        label="Date"
-        data-testid="datepicker"
-        value="2025-01-01"
-      >
-      </w-datepicker>
-      <button type="submit">Submit</button>
-    </form>
-  `);
+		<form>
+			<w-datepicker label="Date" data-testid="datepicker" value="2025-01-01">
+			</w-datepicker>
+			<button type="submit">Submit</button>
+		</form>
+	`);
     const onSubmit = vi.fn();
-    const form = document.querySelector('form');
-    form.addEventListener('submit', (event) => {
+    const form = document.querySelector("form");
+    form.addEventListener("submit", (event) => {
         event.preventDefault();
         onSubmit();
     });
-    await userEvent.click(screen.getByTestId('datepicker'));
-    await userEvent.keyboard('[Enter]');
+    await userEvent.click(screen.getByTestId("datepicker"));
+    await userEvent.keyboard("[Enter]");
     await vi.waitFor(() => expect(onSubmit).toHaveBeenCalled());
 });

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpDatepicker } from './datepicker.js';
+import React from "react";
+import { WarpDatepicker } from "./datepicker.js";
 export declare const DatePicker: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
     onChange?: ((e: Event) => void) | undefined;
     onchange?: ((e: Event) => void) | undefined;

package/dist/packages/datepicker/react.js

@@ -1,27 +1,29 @@
-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 {
 }
 const BaseDatePicker = createComponent({
-    tagName: 'w-datepicker',
+    tagName: "w-datepicker",
     elementClass: Component,
     react: React,
     events: {
-        onChange: 'change',
-        onchange: 'change',
-        onBlur: 'blur',
-        onblur: 'blur',
-        onInput: 'input',
-        oninput: 'input',
+        onChange: "change",
+        onchange: "change",
+        onBlur: "blur",
+        onblur: "blur",
+        onInput: "input",
+        oninput: "input",
     },
 });
 export const DatePicker = React.forwardRef(({ headerFormat, weekdayFormat, dayFormat, ...props }, ref) => React.createElement(BaseDatePicker, {
     ...props,
-    ...(headerFormat !== undefined ? { 'header-format': headerFormat } : {}),
-    ...(weekdayFormat !== undefined ? { 'weekday-format': weekdayFormat } : {}),
-    ...(dayFormat !== undefined ? { 'day-format': dayFormat } : {}),
+    ...(headerFormat !== undefined ? { "header-format": headerFormat } : {}),
+    ...(weekdayFormat !== undefined
+        ? { "weekday-format": weekdayFormat }
+        : {}),
+    ...(dayFormat !== undefined ? { "day-format": dayFormat } : {}),
     ref,
 }));
-DatePicker.displayName = 'DatePicker';
+DatePicker.displayName = "DatePicker";

package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js

@@ -1,15 +1,16 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const wDatepickerCalendarStyles = css `
-  .w-datepicker__calendar {
-    --_calendar-border-color: var(--calendar-border-color, initial);
-    --_calendar-border-style: var(--calendar-border-style, none);
-    --_calendar-border-width: var(--calendar-border-width, 0);
-    --_calendar-border-radius: var(--calendar-border-radius, 0);
-    position: relative;
-    z-index: 30;
+	.w-datepicker__calendar {
+		--_calendar-border-color: var(--calendar-border-color, initial);
+		--_calendar-border-style: var(--calendar-border-style, none);
+		--_calendar-border-width: var(--calendar-border-width, 0);
+		--_calendar-border-radius: var(--calendar-border-radius, 0);
+		position: relative;
+		z-index: 30;
 
-    border: var(--_calendar-border-width) var(--_calendar-border-style) var(--_calendar-border-color);
-    border-radius: var(--_calendar-border-radius);
-    padding: 16px;
-  }
+		border: var(--_calendar-border-width) var(--_calendar-border-style)
+			var(--_calendar-border-color);
+		border-radius: var(--_calendar-border-radius);
+		padding: 16px;
+	}
 `;

package/dist/packages/datepicker/styles/w-datepicker-day.styles.js

@@ -1,64 +1,67 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const wDatepickerDayStyles = css `
-  /* === Day Cell === */
-  .w-datepicker__day {
-    /* No longer in use? */
-    --_day-in-range-background: var(--day-in-range-background, var(--w-s-color-background-primary-subtle-active));
+	/* === Day Cell === */
+	.w-datepicker__day {
+		/* No longer in use? */
+		--_day-in-range-background: var(
+			--day-in-range-background,
+			var(--w-s-color-background-primary-subtle-active)
+		);
 
-    text-align: center;
-    cursor: pointer;
-    outline: none;
-    position: relative;
+		text-align: center;
+		cursor: pointer;
+		outline: none;
+		position: relative;
 
-    color: var(--day-color, var(--w-s-color-text));
-    background-color: var(--day-background, transparent);
-    width: var(--day-width, 40px);
-    height: var(--day-height, 40px);
-    padding: var(--day-padding, 0);
-    font-weight: var(--day-font-weight, normal);
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    border-radius: var(--day-border-radius, 50%);
-  }
+		color: var(--day-color, var(--w-s-color-text));
+		background-color: var(--day-background, transparent);
+		width: var(--day-width, 40px);
+		height: var(--day-height, 40px);
+		padding: var(--day-padding, 0);
+		font-weight: var(--day-font-weight, normal);
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+		border-radius: var(--day-border-radius, 50%);
+	}
 
-  .w-datepicker__day:hover {
-    --day-color: var(--w-s-color-text);
-    --day-background: var(--w-s-color-background-hover);
-    --day-border-radius: 50%;
-  }
-  .w-datepicker__day:active {
-    --day-color: var(--w-s-color-text);
-    --day-background: var(--w-s-color-background-active);
-    --day-border-radius: 50%;
-  }
+	.w-datepicker__day:hover {
+		--day-color: var(--w-s-color-text);
+		--day-background: var(--w-s-color-background-hover);
+		--day-border-radius: 50%;
+	}
+	.w-datepicker__day:active {
+		--day-color: var(--w-s-color-text);
+		--day-background: var(--w-s-color-background-active);
+		--day-border-radius: 50%;
+	}
 
-  .w-datepicker__day:focus-visible {
-    text-decoration: none;
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, -2px);
-  }
+	.w-datepicker__day:focus-visible {
+		text-decoration: none;
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, -2px);
+	}
 
-  /* === Day variants === */
-  .w-datepicker__day--today {
-    --day-font-weight: bold;
-  }
+	/* === Day variants === */
+	.w-datepicker__day--today {
+		--day-font-weight: bold;
+	}
 
-  .w-datepicker__day--selected {
-    --day-background: var(--w-s-color-background-primary);
-    --day-color: var(--w-s-color-text-inverted);
-    --day-font-weight: bold;
-  }
-  .w-datepicker__day--selected:hover,
-  .w-datepicker__day--selected:focus-visible {
-    --day-background: var(--w-s-color-background-primary-hover);
-    --day-color: var(--w-s-color-text-inverted);
-    --day-font-weight: bold;
-  }
+	.w-datepicker__day--selected {
+		--day-background: var(--w-s-color-background-primary);
+		--day-color: var(--w-s-color-text-inverted);
+		--day-font-weight: bold;
+	}
+	.w-datepicker__day--selected:hover,
+	.w-datepicker__day--selected:focus-visible {
+		--day-background: var(--w-s-color-background-primary-hover);
+		--day-color: var(--w-s-color-text-inverted);
+		--day-font-weight: bold;
+	}
 
-  .w-datepicker__day--disabled,
-  .w-datepicker__day--disabled:hover {
-    --day-color: var(--w-s-color-text-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
+	.w-datepicker__day--disabled,
+	.w-datepicker__day--disabled:hover {
+		--day-color: var(--w-s-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
 `;