@warp-ds/elements 2.3.0-next.1 → 2.3.0-next.3

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { DatePicker } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "label" | "onchange" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "input" | "name" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "locale" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import("./datepicker").WarpDatepicker, {
+        onChange: string;
+        onchange: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const DisableCalendarDates: Story;

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

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

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../button/index.js';
+import type { WarpDatepicker } from './index.js';
+import './index.js';
+declare const args: Partial<WarpDatepicker> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Default: Story;
+export declare const DisableCalendarDates: Story;

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

@@ -0,0 +1,51 @@
+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/index.js';
+import './index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-datepicker');
+const meta = {
+    title: 'Forms/Datepicker',
+    render(args) {
+        return html `
+      <!-- Workaround for Storybook's overflow hidden -->
+      <div style="min-height: 400px">
+        <w-datepicker ${spread(prespread(args))}></w-datepicker>
+      </div>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Dato',
+        lang: 'nb',
+    },
+};
+export const DisableCalendarDates = {
+    args: {
+        label: 'Dato',
+        lang: 'nb',
+    },
+    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>
+    `;
+    },
+};

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

@@ -0,0 +1,2 @@
+import '../button/index.js';
+import './index.js';

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

@@ -0,0 +1,62 @@
+import { server, userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../button/index.js';
+import './index.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>
+  `;
+    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.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();
+});
+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>
+  `;
+    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();
+    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 expect
+        .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();
+});
+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>
+  `;
+    const page = render(component);
+    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();
+});

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

@@ -0,0 +1 @@
+export * from './datepicker.js';

package/dist/packages/datepicker/index.js

@@ -0,0 +1 @@
+export * from './datepicker.js';

package/dist/packages/datepicker/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/datepicker/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"datepicker.toggle.changeDate\":[\"Change date, \",[\"currentDate\"]],\"datepicker.toggle.chooseDate\":[\"Choose date\"],\"datepicker.calendar.roleDescription\":[\"Date picker\"],\"datepicker.calendar.nextMonth\":[\"Next month\"],\"datepicker.calendar.previousMonth\":[\"Previous month\"]}");

package/dist/packages/datepicker/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/datepicker/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"datepicker.toggle.changeDate\":[\"Change date, \",[\"currentDate\"]],\"datepicker.toggle.chooseDate\":[\"Choose date\"],\"datepicker.calendar.roleDescription\":[\"Date picker\"],\"datepicker.calendar.nextMonth\":[\"Next month\"],\"datepicker.calendar.previousMonth\":[\"Previous month\"]}");

package/dist/packages/datepicker/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/datepicker/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"datepicker.toggle.changeDate\":[\"Change date, \",[\"currentDate\"]],\"datepicker.toggle.chooseDate\":[\"Choose date\"],\"datepicker.calendar.roleDescription\":[\"Date picker\"],\"datepicker.calendar.nextMonth\":[\"Next month\"],\"datepicker.calendar.previousMonth\":[\"Previous month\"]}");

package/dist/packages/datepicker/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/datepicker/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"datepicker.toggle.changeDate\":[\"Endre dato, \",[\"currentDate\"]],\"datepicker.toggle.chooseDate\":[\"Velg dato\"],\"datepicker.calendar.roleDescription\":[\"datovelger\"],\"datepicker.calendar.nextMonth\":[\"Gå til neste måned\"],\"datepicker.calendar.previousMonth\":[\"Gå til forrige måned\"]}");

package/dist/packages/datepicker/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/datepicker/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"datepicker.toggle.changeDate\":[\"Change date, \",[\"currentDate\"]],\"datepicker.toggle.chooseDate\":[\"Choose date\"],\"datepicker.calendar.roleDescription\":[\"Date picker\"],\"datepicker.calendar.nextMonth\":[\"Next month\"],\"datepicker.calendar.previousMonth\":[\"Previous month\"]}");

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

@@ -0,0 +1,5 @@
+import { WarpDatepicker } from './datepicker';
+export declare const DatePicker: import("@lit/react").ReactWebComponent<WarpDatepicker, {
+    onChange: string;
+    onchange: string;
+}>;

package/dist/packages/datepicker/react.js

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { createComponent } from '@lit/react';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const DatePicker = createComponent({
+    tagName: 'w-datepicker',
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onchange: 'change',
+    },
+});

package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.d.ts

@@ -0,0 +1 @@
+export declare const wDatepickerCalendarStyles: import("lit").CSSResult;

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

@@ -0,0 +1,15 @@
+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;
+
+    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.d.ts

@@ -0,0 +1 @@
+export declare const wDatepickerDayStyles: import("lit").CSSResult;

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

@@ -0,0 +1,64 @@
+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));
+
+    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%);
+  }
+
+  .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);
+  }
+
+  /* === 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--disabled,
+  .w-datepicker__day--disabled:hover {
+    --day-color: var(--w-s-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;

package/dist/packages/datepicker/styles/w-datepicker-month.styles.d.ts

@@ -0,0 +1 @@
+export declare const wDatepickerMonthStyles: import("lit").CSSResult;

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

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+export const wDatepickerMonthStyles = css `
+  .w-datepicker__month {
+    /* Sets default used in the day fragment */
+    --day-width: 40px;
+
+    --_month-color: var(--month-color, var(--w-s-color-text));
+    --_month-font-size: var(--month-font-size, var(--w-font-size-m));
+    --_month-line-height: var(--month-line-height, var(--w-line-height-m));
+
+    --_month-table-min-width: var(--month-table-min-width, calc(var(--day-width) * 7));
+
+    --_weekdays-font-size: var(--weekdays-font-size, var(--w-font-size-xs));
+    --_weekdays-line-height: var(--weekdays-font-size, var(--w-line-height-xs));
+    --_weekdays-font-weight: var(--weekdays-font-weight, bold);
+
+    --_weekdays-padding: var(--weekdays-padding, 8px 0 4px 0);
+
+    text-align: center;
+    user-select: none;
+    display: inline-block;
+
+    color: var(--_month-color);
+    font-size: var(--_month-font-size);
+    line-height: var(--_month-line-height);
+  }
+
+  .w-datepicker__month__nav {
+    margin: 0 0 8px 0;
+  }
+
+  .w-datepicker__month__nav__header {
+    text-align: center;
+    font-weight: Bold;
+  }
+
+  .w-datepicker__table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    min-width: var(--_month-table-min-width);
+    padding-top: 8px;
+  }
+
+  .w-datepicker__weekday {
+    text-align: center;
+    font-size: var(--_weekdays-font-size);
+    line-height: var(--_weekdays-line-height);
+    font-weight: var(--_weekdays-font-weight);
+    padding: var(--_weekdays-padding);
+  }
+
+  .w-datepicker__month-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .w-datepicker__month__nav__button {
+    flex-shrink: 0;
+  }
+
+  .w-datepicker__month__nav__header {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+`;

package/dist/packages/datepicker/styles/w-datepicker.styles.d.ts

@@ -0,0 +1 @@
+export declare const wDatepickerStyles: import("lit").CSSResult;

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

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+export const wDatepickerStyles = css `
+  /* CustomDatePicker.css */
+
+  /* container */
+  .w-datepicker-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    font-size: var(--w-font-size-m);
+    line-height: var(--w-line-height-m);
+  }
+  .w-datepicker-input-wrapper {
+    position: relative;
+  }
+  /* hide the browser’s calendar icon, and prevent the native popup */
+  .w-datepicker-input {
+    /* remove default arrows/appearance */
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    appearance: none;
+
+    /* basic styling */
+    display: block;
+    padding: 1.2rem 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    height: 48px;
+    cursor: pointer;
+    font-size: var(--w-font-size-m);
+    line-height: var(--w-line-height-m);
+    background-color: var(--w-s-color-background);
+  }
+  .w-datepicker-input:hover {
+    border-color: var(--w-s-color-border-hover);
+  }
+  .w-datepicker-input:active {
+    border-color: var(--w-s-color-border-selected);
+  }
+
+  .w-datepicker-input:focus,
+  .w-datepicker-input:focus-visible {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: -2px;
+  }
+
+  .w-datepicker-input-label {
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: 700;
+    cursor: pointer;
+    padding-bottom: 0.4rem;
+    color: var(--w-s-color-text);
+    display: block;
+  }
+
+  /* custom calendar button */
+  .w-datepicker-button {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    height: 44px;
+    width: 44px !important;
+    border-radius: 2px !important;
+    border: none;
+    cursor: pointer;
+    pointer-events: auto; /* override parent’s none */
+  }
+
+  .w-datepicker-button:not(:hover) {
+    background-color: var(--w-s-color-background) !important;
+  }
+
+  input[type='date']::-webkit-inner-spin-button,
+  input[type='date']::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+  }
+  input[type='date'],
+  input[type='time'],
+  input[type='datetime-local'],
+  input[type='month'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+  /* Temporary dropdown, should probably use the appropriate component when it is done */
+  .w-dropdown__popover {
+    position: absolute;
+    width: max-content;
+    background-color: var(--w-s-color-background);
+    box-shadow: var(--w-shadow-s);
+    z-index: 100;
+    border-radius: 8px;
+    visibility: hidden;
+  }
+  .w-dropdown__popover--open {
+    visibility: visible;
+  }
+`;

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

@@ -0,0 +1,13 @@
+/**
+ * Parses an ISO-8601 string into a JS Date.
+ *
+ * Supports:
+ *  - YYYY-MM-DD
+ *  - YYYY-MM-DDThh:mm:ss(.sss)?(Z|±hh:mm)?
+ *
+ * @param {string} isoString
+ * @returns {Date}
+ * @throws {TypeError} if input isn’t a string
+ * @throws {Error} if string is not a valid ISO-8601 date
+ */
+export declare function fromISOToDate(isoString: string): Date | null;

package/dist/packages/datepicker/utils.js

@@ -0,0 +1,28 @@
+const dateOnlyRe = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Parses an ISO-8601 string into a JS Date.
+ *
+ * Supports:
+ *  - YYYY-MM-DD
+ *  - YYYY-MM-DDThh:mm:ss(.sss)?(Z|±hh:mm)?
+ *
+ * @param {string} isoString
+ * @returns {Date}
+ * @throws {TypeError} if input isn’t a string
+ * @throws {Error} if string is not a valid ISO-8601 date
+ */
+export function fromISOToDate(isoString) {
+    if (typeof isoString !== 'string') {
+        return null;
+    }
+    // If it's a bare date (YYYY-MM-DD), treat it as UTC midnight
+    let normalized = isoString;
+    if (dateOnlyRe.test(isoString)) {
+        normalized = `${isoString}T00:00:00Z`;
+    }
+    const timestamp = Date.parse(normalized);
+    if (Number.isNaN(timestamp)) {
+        return null;
+    }
+    return new Date(timestamp);
+}

package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { DeadToggle } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpDeadToggle>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "type" | "invalid" | "checked" | "indeterminate" | "indeterminateMarker"> & {} & Partial<Omit<import(".").WarpDeadToggle, keyof HTMLElement>> & React.RefAttributes<import(".").WarpDeadToggle>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpDeadToggle, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof DeadToggle>;
+export declare const Radio: Story;
+export declare const Checkbox: Story;
+export declare const Indeterminate: Story;
+export declare const Checked: Story;
+export declare const Invalid: Story;

package/dist/packages/dead-toggle/dead-toggle.react.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { DeadToggle } from './react';
+export default {
+    title: 'Forms/Dead toggle',
+    render(args) {
+        return React.createElement(DeadToggle, { ...args });
+    },
+    component: DeadToggle,
+};
+export const Radio = {
+    args: {
+        type: 'radio',
+    },
+};
+export const Checkbox = {
+    args: {
+        type: 'checkbox',
+    },
+};
+export const Indeterminate = {
+    args: {
+        indeterminate: true,
+    },
+};
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+export const Invalid = {
+    args: {
+        invalid: true,
+    },
+};

package/dist/packages/dead-toggle/dead-toggle.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpDeadToggle } from './index.js';
+import './index.js';
+declare const args: Partial<WarpDeadToggle> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<typeof args>;
+export declare const Radio: Story;
+export declare const Checkbox: Story;
+export declare const Indeterminate: Story;
+export declare const Checked: Story;
+export declare const Invalid: Story;