@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.21

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Vælg\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Select\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Valitse\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Velg\"]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Välj\"]}");

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

@@ -0,0 +1,2 @@
+import { WarpCard } from '.';
+export declare const Card: import("@lit/react").ReactWebComponent<WarpCard, {}>;

package/dist/packages/card/react.js

@@ -0,0 +1,11 @@
+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 Card = createComponent({
+    tagName: 'w-card',
+    elementClass: Component,
+    react: React,
+});

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

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

package/dist/packages/card/styles.js

@@ -0,0 +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}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.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)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.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}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Combobox } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpCombobox, {
+        onSelect: string;
+        onselect: string;
+        onChange: string;
+        onchange: string;
+    }>;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "options" | "placeholder" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "helpText" | "required" | "optional" | "containerClassName" | "listClassName"> & {
+        onSelect?: (e: Event) => void;
+        onselect?: (e: Event) => void;
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import(".").WarpCombobox>): React.JSX.Element;
+};
+export default _default;
+export type Story = StoryObj<typeof Combobox>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const OpenOnFocus: Story;
+export declare const WithTextMatching: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const Optional: Story;
+export declare const DisableStaticFiltering: Story;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Combobox } from './react';
+export default {
+    title: 'Forms/Combobox',
+    component: Combobox,
+    render(args) {
+        return React.createElement(Combobox, { ...args, options: sampleOptions });
+    },
+};
+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: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+    },
+};
+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: () => {
+        const [options, setOptions] = React.useState(sampleOptions);
+        const [val, setVal] = React.useState('');
+        return (React.createElement(Combobox, { id: "combobox-dynamic", label: "Select a fruit (dynamic)", placeholder: "Type to search...", disableStaticFiltering: true, value: val, options: options, onChange: (e) => {
+                setVal(e.detail.value);
+                // Simulate dynamic filtering
+                const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
+                setOptions(filteredOptions);
+            }, onSelect: (e) => {
+                setVal(e.detail.value);
+            } }));
+    },
+};

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './index.js';
+import '../textfield/index.js';
+import type { WarpCombobox } from './index.js';
+declare const args: Partial<WarpCombobox> & {
+    [key: string]: any;
+};
+declare const meta: Meta<typeof args>;
+export default meta;
+type Story = StoryObj<WarpCombobox>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const OpenOnFocus: Story;
+export declare const WithTextMatching: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const Optional: Story;
+export declare const DisableStaticFiltering: Story;

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

@@ -0,0 +1,117 @@
+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 './index.js';
+import '../textfield/index.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>
+  `,
+};

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

@@ -0,0 +1,95 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare const ccCombobox: {
+    wrapper: string;
+    base: string;
+    listbox: string;
+    option: string;
+    optionUnselected: string;
+    optionSelected: string;
+    textMatch: string;
+    a11y: string;
+};
+export interface ComboboxOption {
+    value: string;
+    label?: string;
+    key?: string;
+}
+/**
+ * A combobox element for text input with selectable options.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+ */
+export declare class WarpCombobox extends LitElement {
+    /** The available options to select from */
+    options: ComboboxOption[];
+    /** Label above input */
+    label?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** The input value */
+    value: string;
+    /** Whether the popover opens when focus is on the text field */
+    openOnFocus: boolean;
+    /** Select active option on blur */
+    selectOnBlur: boolean;
+    /** Whether the matching text segments in the options should be highlighted */
+    matchTextSegments: boolean;
+    /** Disable client-side static filtering */
+    disableStaticFiltering: boolean;
+    /** Renders the input field in an invalid state */
+    invalid: boolean;
+    /** The content to display as the help text */
+    helpText?: string;
+    /** Whether the element is disabled */
+    disabled: boolean;
+    /** Whether the element is required */
+    required: boolean;
+    /** Whether to show optional text */
+    optional: boolean;
+    /** Additional container styling */
+    containerClassName?: string;
+    /** Additional list styling */
+    listClassName?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** @internal Options list open boolean */
+    private _isOpen;
+    /** @internal The option the user has navigated to with their keyboard */
+    private _navigationOption;
+    /** @internal Available options based on user's input value */
+    private _currentOptions;
+    /** @internal Unique identifier counter for options */
+    private _optionIdCounter;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private get _listboxId();
+    private get _id();
+    private get _helpId();
+    private get _navigationValueOrInputValue();
+    /** Generate options with unique IDs and match information */
+    private _createOptionsWithIdAndMatch;
+    /** Get ARIA text for screen readers */
+    private _getAriaText;
+    /** Get option classes */
+    private _getOptionClasses;
+    /** Handle keyboard navigation */
+    private _handleKeyDown;
+    /** Find and set active option based on keyboard navigation */
+    private _findAndSetActiveOption;
+    /** Handle option selection */
+    private _handleSelect;
+    /** Handle input change */
+    private _handleChange;
+    /** Handle input focus */
+    private _handleFocus;
+    /** Handle input blur */
+    private _handleBlur;
+    /** Handle option click */
+    private _handleOptionClick;
+    /** Handle container blur */
+    private _handleContainerBlur;
+    /** Render highlighted text match */
+    private _renderTextMatch;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}