@warp-ds/elements 2.3.0-next.8 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.3.0-next.8",
+  "version": "2.3.0",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -57,18 +57,10 @@
       "types": "./dist/packages/card/react.d.ts",
       "import": "./dist/packages/card/react.js"
     },
-    "./react/combobox": {
-      "types": "./dist/packages/combobox/react.d.ts",
-      "import": "./dist/packages/combobox/react.js"
-    },
     "./react/datepicker": {
       "types": "./dist/packages/datepicker/react.d.ts",
       "import": "./dist/packages/datepicker/react.js"
     },
-    "./react/dead-toggle": {
-      "types": "./dist/packages/dead-toggle/react.d.ts",
-      "import": "./dist/packages/dead-toggle/react.js"
-    },
     "./react/expandable": {
       "types": "./dist/packages/expandable/react.d.ts",
       "import": "./dist/packages/expandable/react.js"
@@ -81,50 +73,14 @@
       "types": "./dist/packages/modal/react.d.ts",
       "import": "./dist/packages/modal/react.js"
     },
-    "./react/pageindicator": {
-      "types": "./dist/packages/pageindicator/react.d.ts",
-      "import": "./dist/packages/pageindicator/react.js"
-    },
-    "./react/pagination": {
-      "types": "./dist/packages/pagination/react.d.ts",
-      "import": "./dist/packages/pagination/react.js"
-    },
     "./react/pill": {
       "types": "./dist/packages/pill/react.d.ts",
       "import": "./dist/packages/pill/react.js"
     },
-    "./react/rip-and-tear-checkbox": {
-      "types": "./dist/packages/rip-and-tear-checkbox/react.d.ts",
-      "import": "./dist/packages/rip-and-tear-checkbox/react.js"
-    },
-    "./react/rip-and-tear-radio": {
-      "types": "./dist/packages/rip-and-tear-radio/react.d.ts",
-      "import": "./dist/packages/rip-and-tear-radio/react.js"
-    },
     "./react/select": {
       "types": "./dist/packages/select/react.d.ts",
       "import": "./dist/packages/select/react.js"
     },
-    "./react/slider": {
-      "types": "./dist/packages/slider/react.d.ts",
-      "import": "./dist/packages/slider/react.js"
-    },
-    "./react/steps": {
-      "types": "./dist/packages/steps/react.d.ts",
-      "import": "./dist/packages/steps/react.js"
-    },
-    "./react/switch": {
-      "types": "./dist/packages/switch/react.d.ts",
-      "import": "./dist/packages/switch/react.js"
-    },
-    "./react/tabs": {
-      "types": "./dist/packages/tabs/react.d.ts",
-      "import": "./dist/packages/tabs/react.js"
-    },
-    "./react/textarea": {
-      "types": "./dist/packages/textarea/react.d.ts",
-      "import": "./dist/packages/textarea/react.js"
-    },
     "./react/textfield": {
       "types": "./dist/packages/textfield/react.d.ts",
       "import": "./dist/packages/textfield/react.js"
@@ -169,15 +125,9 @@
       "react/card": [
         "./dist/packages/card/react.d.ts"
       ],
-      "react/combobox": [
-        "./dist/packages/combobox/react.d.ts"
-      ],
       "react/datepicker": [
         "./dist/packages/datepicker/react.d.ts"
       ],
-      "react/dead-toggle": [
-        "./dist/packages/dead-toggle/react.d.ts"
-      ],
       "react/expandable": [
         "./dist/packages/expandable/react.d.ts"
       ],
@@ -187,39 +137,12 @@
       "react/modal": [
         "./dist/packages/modal/react.d.ts"
       ],
-      "react/pageindicator": [
-        "./dist/packages/pageindicator/react.d.ts"
-      ],
-      "react/pagination": [
-        "./dist/packages/pagination/react.d.ts"
-      ],
       "react/pill": [
         "./dist/packages/pill/react.d.ts"
       ],
-      "react/rip-and-tear-checkbox": [
-        "./dist/packages/rip-and-tear-checkbox/react.d.ts"
-      ],
-      "react/rip-and-tear-radio": [
-        "./dist/packages/rip-and-tear-radio/react.d.ts"
-      ],
       "react/select": [
         "./dist/packages/select/react.d.ts"
       ],
-      "react/slider": [
-        "./dist/packages/slider/react.d.ts"
-      ],
-      "react/steps": [
-        "./dist/packages/steps/react.d.ts"
-      ],
-      "react/switch": [
-        "./dist/packages/switch/react.d.ts"
-      ],
-      "react/tabs": [
-        "./dist/packages/tabs/react.d.ts"
-      ],
-      "react/textarea": [
-        "./dist/packages/textarea/react.d.ts"
-      ],
       "react/textfield": [
         "./dist/packages/textfield/react.d.ts"
       ],
@@ -310,7 +233,6 @@
     "html-format": "1.1.7",
     "husky": "^9.1.7",
     "lightningcss": "^1.30.1",
-    "lit": "3.x",
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
     "prettier": "3.3.2",
@@ -324,25 +246,25 @@
     "vite": "^6.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-lit": "^0.1.0",
-    "vitest-browser-react": "^1.0.1"
-  },
-  "dependencies": {
-    "@lingui/core": "5.2.0",
-    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
-    "@lit/react": "^1.0.8",
-    "@open-wc/form-control": "^1.0.0",
+    "vitest-browser-react": "^1.0.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "tslib": "^2.8.1",
+    "rollup": "^4.52.3",
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
+    "@lingui/core": "5.2.0",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.1.1",
-    "@warp-ds/elements-core": "2.0.1",
     "@warp-ds/icons": "2.5.0",
     "date-fns": "^4.1.0",
-    "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
-    "tslib": "^2.8.1"
+    "@open-wc/form-control": "^1.0.0"
+  },
+  "dependencies": {
+    "lit": "3.x",
+    "@lit/react": "^1.0.8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,28 +0,0 @@
-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" | "optional" | "helpText" | "placeholder" | "required" | "options" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "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

@@ -1,90 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

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