@warp-ds/elements 2.3.2 → 2.4.0-next.10

package/dist/packages/combobox/combobox.stories.js

@@ -0,0 +1,143 @@
+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 './combobox.js';
+import '../textfield/textfield.js';
+const { events, args, argTypes } = getStorybookHelpers('w-combobox');
+const meta = {
+    title: 'Forms/Combobox',
+    component: 'w-combobox',
+    render(args) {
+        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'A combobox element for text input with selectable options.',
+            },
+        },
+        actions: {
+            handles: events,
+        },
+    },
+    args,
+    argTypes,
+};
+export default meta;
+const sampleOptions = [
+    { value: 'Apple', label: 'Apple' },
+    { value: 'Banana', label: 'Banana' },
+    { value: 'Orange', label: 'Orange' },
+    { value: 'Grape', label: 'Grape' },
+    { value: 'Strawberry', label: 'Strawberry' },
+    { value: 'Pineapple', label: 'Pineapple' },
+    { value: 'Mango', label: 'Mango' },
+];
+export const Default = {
+    args: {},
+    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
+};
+export const WithValue = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+    },
+};
+export const OpenOnFocus = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        openOnFocus: true,
+    },
+};
+export const WithTextMatching = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        matchTextSegments: true,
+    },
+};
+export const Invalid = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Invalid fruit',
+        helpText: 'Please select a valid fruit from the list',
+        invalid: true,
+    },
+};
+export const Disabled = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+        disabled: true,
+    },
+};
+export const Optional = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        optional: true,
+    },
+};
+export const DisableStaticFiltering = {
+    render: () => html `
+    <w-combobox
+      id="combobox-dynamic"
+      label="Select a fruit (dynamic)"
+      placeholder="Type to search..."
+      disable-static-filtering></w-combobox>
+    <script type="module">
+      const combobox = document.querySelector('#combobox-dynamic');
+      const sampleOptions = ${JSON.stringify(sampleOptions)};
+      combobox.options = sampleOptions;
+      combobox.value = '';
+
+      combobox.addEventListener('change', (e) => {
+        combobox.value = e?.detail?.value;
+        // Simulate dynamic filtering
+        const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e?.detail?.value.toLowerCase()));
+        combobox.options = filteredOptions;
+      });
+
+      combobox.addEventListener('select', (e) => {
+        combobox.value = e?.detail?.value;
+      });
+    </script>
+  `,
+};
+export const FormSubmission = {
+    render: () => html `
+    <p>Resetting the form should return values to the initial values</p>
+    <p>Submitting the form should result in the values being in the resulting pages query parameters</p>
+    <form>
+      <w-combobox
+        id="form-submission"
+        name="warp-combo-1"
+        label="Select a fruit (dynamic)"
+        placeholder="Type to search..."
+        .options="${sampleOptions}"
+      ></w-combobox>
+      <br>
+      <w-combobox
+        id="form-submission"
+        name="warp-combo-2"
+        label="Select a fruit (dynamic)"
+        value="Banana"
+        placeholder="Type to search..."
+        .options="${sampleOptions}"
+      ></w-combobox>
+        <button type="reset">Reset</button>
+        <button type="submit">Submit</button>
+    </form>
+  `,
+};

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

@@ -0,0 +1,2 @@
+import '../textfield/textfield.js';
+import './combobox.js';

package/dist/packages/combobox/combobox.test.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import '../textfield/textfield.js';
+import './combobox.js';
+test('renders with autocomplete="off" when attribute not provided', async () => {
+    const component = html `<w-combobox data-testid="combobox"></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    expect(el.getAttribute('autocomplete')).toBe('off');
+});
+test('renders with autocomplete attribute when provided', async () => {
+    const component = html `<w-combobox data-testid="combobox" autocomplete="on"></w-combobox>`;
+    const page = render(component);
+    const locator = page.getByTestId('combobox');
+    await expect.element(locator).toBeVisible();
+    const el = (await locator.element());
+    expect(el.getAttribute('autocomplete')).toBe('on');
+});

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"combobox.aria.pluralResults\":[[\"numResults\",\"plural\",{\"one\":[\"#\",\" resultat\"],\"other\":[\"#\",\" resultater\"]}]],\"combobox.aria.noResults\":[\"Ingen resultater\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"combobox.aria.pluralResults\":[[\"numResults\",\"plural\",{\"one\":[\"#\",\" result\"],\"other\":[\"#\",\" results\"]}]],\"combobox.aria.noResults\":[\"No results\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"combobox.aria.pluralResults\":[[\"numResults\",\"plural\",{\"one\":[\"#\",\" tulos\"],\"other\":[\"#\",\" tulosta\"]}]],\"combobox.aria.noResults\":[\"Ei tuloksia\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"combobox.aria.pluralResults\":[[\"numResults\",\"plural\",{\"one\":[\"#\",\" resultat\"],\"other\":[\"#\",\" resultater\"]}]],\"combobox.aria.noResults\":[\"Ingen resultater\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"combobox.aria.pluralResults\":[[\"numResults\",\"plural\",{\"one\":[\"#\",\" resultat\"],\"other\":[\"#\",\" resultat\"]}]],\"combobox.aria.noResults\":[\"Inga resultat\"]}");

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

@@ -0,0 +1,7 @@
+import { WarpCombobox } from './combobox.js';
+export declare const Combobox: import("@lit/react").ReactWebComponent<WarpCombobox, {
+    onSelect: string;
+    onselect: string;
+    onChange: string;
+    onchange: string;
+}>;

package/dist/packages/combobox/react.js

@@ -0,0 +1,17 @@
+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 Combobox = createComponent({
+    tagName: 'w-combobox',
+    elementClass: Component,
+    react: React,
+    events: {
+        onSelect: 'select',
+        onselect: 'select',
+        onChange: 'change',
+        onchange: 'change',
+    },
+});

package/dist/packages/combobox/styles.d.ts

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

package/dist/packages/combobox/styles.js

@@ -0,0 +1,3 @@
+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}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.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)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.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};
+.z-0{z-index:0;}.z-20{z-index:20;}`;

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

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

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

@@ -2,8 +2,8 @@ import { server, userEvent } from '@vitest/browser/context';
 import React, { useState } from 'react';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
-import '../button/index.js';
-import './index.js';
+import '../button/button.js';
+import './datepicker.js';
 import { DatePicker } from './react.js';
 test('renders the date picker component', async () => {
     const page = render(React.createElement("form", null,

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { StoryObj } from '@storybook/react';
+import React from '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" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "locale" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+    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" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "locale" | "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;

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '../button/index.js';
-import type { WarpDatepicker } from './index.js';
-import './index.js';
+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

@@ -2,8 +2,8 @@ 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';
+import '../button/button.js';
+import './datepicker.js';
 const { events, args, argTypes } = getStorybookHelpers('w-datepicker');
 const meta = {
     title: 'Forms/Datepicker',

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

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

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

@@ -2,8 +2,8 @@ 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';
+import '../button/button.js';
+import './datepicker.js';
 test('can pick a date using a pointer', async () => {
     const component = html `
     <form data-testid="flight">

package/dist/packages/datepicker/react.js

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 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 {

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

@@ -0,0 +1,17 @@
+import { CSSResultGroup, LitElement } from 'lit';
+/**
+ * Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
+ */
+export declare class WarpDeadToggle extends LitElement {
+    type: 'radio' | 'checkbox';
+    checked: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    disabled: boolean;
+    /** @internal */
+    get indeterminateMarker(): "" | "–";
+    render(): import("lit").TemplateResult<1>;
+    static styles?: CSSResultGroup | undefined;
+}