@warp-ds/elements 2.2.0-next.3 → 2.2.0-next.30

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pill.aria.openFilter\":[\"Åbn filter\"],\"pill.aria.removeFilter\":[\"Fjern filter \",[\"label\"]]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pill.aria.openFilter\":[\"Open filter\"],\"pill.aria.removeFilter\":[\"Remove filter \",[\"label\"]]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pill.aria.openFilter\":[\"Avaa suodatin\"],\"pill.aria.removeFilter\":[\"Tyhjennä suodatin \",[\"label\"]]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pill.aria.openFilter\":[\"Åpne filter\"],\"pill.aria.removeFilter\":[\"Fjern filter \",[\"label\"]]}");

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"pill.aria.openFilter\":[\"Öppna filter\"],\"pill.aria.removeFilter\":[\"Ta bort filtret \",[\"label\"]]}");

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Pill } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpPill>, "onclick" | "onclose" | "onClick" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
+        onClick?: (e: Event) => void;
+        onclick?: (e: Event) => void;
+        onClose?: (e: Event) => void;
+        onclose?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpPill, keyof HTMLElement>> & React.RefAttributes<import(".").WarpPill>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpPill, {
+        onClick: string;
+        onclick: string;
+        onClose: string;
+        onclose: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Pill>;
+export declare const Default: Story;
+export declare const Suggestion: Story;
+export declare const Closable: Story;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Pill } from './react';
+export default {
+    title: 'Buttons/Pill',
+    render(args) {
+        return React.createElement(Pill, { ...args }, "Lorem");
+    },
+    component: Pill,
+};
+export const Default = {
+    args: {},
+};
+export const Suggestion = {
+    args: {
+        suggestion: true,
+    },
+};
+export const Closable = {
+    args: {
+        canClose: true,
+    },
+};

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { WarpPill } from './index.js';
+import './index.js';
+declare const args: Partial<WarpPill> & {
+    [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 Suggestion: Story;
+export declare const Closable: Story;

package/dist/packages/pill/pill.stories.js

@@ -0,0 +1,33 @@
+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';
+const { events, args, argTypes } = getStorybookHelpers('w-pill');
+const meta = {
+    title: 'Buttons/Pill',
+    render(args) {
+        return html `<w-pill ${spread(prespread(args))}>Lorem</w-pill>`;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const Suggestion = {
+    args: {
+        suggestion: true,
+    },
+};
+export const Closable = {
+    args: {
+        'can-close': true,
+    },
+};

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

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

package/dist/packages/pill/pill.test.js

@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('renders a pill', async () => {
+    const page = render(html ` <w-pill>Standard</w-pill>`);
+    await expect.element(page.getByText('Standard')).toBeVisible();
+});
+test('renders a pill with a close icon', async () => {
+    const page = render(html ` <w-pill can-close>Close me</w-pill>`);
+    await expect.element(page.getByText('Close me')).toBeVisible();
+    await expect
+        .poll(() => page.getByText('Close me').element().shadowRoot.querySelector('w-icon-close-16'))
+        .toBeVisible();
+});
+test('renders screen reader label on the pill', async () => {
+    const page = render(html ` <w-pill open-sr-label="Open me please">Close me</w-pill>`);
+    await expect.element(page.getByText('Close me')).toBeVisible();
+    await expect.element(page.getByText('Open me please')).toBeVisible();
+});
+test('renders screen reader label on the pill', async () => {
+    const page = render(html ` <w-pill open-aria-label="Open me please">Close me</w-pill>`);
+    await expect.element(page.getByText('Close me')).toBeVisible();
+    await expect.element(page.getByText('Open me please')).toBeVisible();
+});

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

@@ -0,0 +1,7 @@
+import { WarpPill } from '.';
+export declare const Pill: import("@lit/react").ReactWebComponent<WarpPill, {
+    onClick: string;
+    onclick: string;
+    onClose: string;
+    onclose: string;
+}>;

package/dist/packages/pill/react.js

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import React from 'react';
+import { createComponent } from '@lit/react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Pill = createComponent({
+    tagName: 'w-pill',
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'w-pill-click', // should be click
+        onclick: 'w-pill-click',
+        onClose: 'w-pill-close', // should be close
+        onclose: 'w-pill-close',
+    },
+});

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

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

package/dist/packages/pill/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}.bg-\\[--w-color-pill-suggestion-background\\]{background-color:var(--w-color-pill-suggestion-background)}.hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover{background-color:var(--w-color-pill-suggestion-background-hover)}.active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active{background-color:var(--w-color-pill-suggestion-background-active)}.rounded{border-radius:4px}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.hover\\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover)}.active\\:s-bg-primary-active:active{background-color:var(--w-s-color-background-primary-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.h-16{height:1.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.pl-12{padding-left:1.2rem}.pl-4{padding-left:.4rem}.pr-12{padding-right:1.2rem}.pr-2{padding-right:.2rem}.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}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;

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

@@ -1,66 +1,62 @@
-declare const WarpSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
-    new (): {
-        [x: string]: any;
-    };
-    [x: string]: any;
-    createProperty(name: any, options: any): void;
+import { LitElement, TemplateResult } from 'lit';
+import '@warp-ds/icons/elements/chevron-down-16';
+export declare const ccSelect: {
+    base: string;
+    default: string;
+    disabled: string;
+    invalid: string;
+    readOnly: string;
+    wrapper: string;
+    selectWrapper: string;
+    chevron: string;
+    chevronDisabled: string;
 };
-export class WarpSelect extends WarpSelect_base {
-    static properties: {
-        autoFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        invalid: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        always: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        hint: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        optional: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        readOnly: {
-            type: BooleanConstructor;
-            relfect: boolean;
-        };
-        _options: {
-            state: boolean;
-        };
-        name: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
-    _options: any;
-    _setValue: (value: any) => void;
-    value: any;
-    firstUpdated(): void;
-    handleKeyDown(event: any): void;
+export declare const ccLabel: {
+    base: string;
+    optional: string;
+};
+export declare const ccHelpText: {
+    base: string;
+    color: string;
+    colorInvalid: string;
+};
+declare const WarpSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * A dropdown component for selecting a single value.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
+ */
+export declare class WarpSelect extends WarpSelect_base {
+    #private;
+    /** Whether the element should receive focus on render */
+    autoFocus: boolean;
+    /** Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error */
+    invalid: boolean;
+    /** Whether to always show a hint */
+    always: boolean;
+    /** The content displayed as the help text */
+    hint: string;
+    /** The content to disply as the label */
+    label: string;
+    /** Whether to show optional text */
+    optional: boolean;
+    /** Renders the field in a disabled state. */
+    disabled: boolean;
+    /** Renders the field in a readonly state. */
+    readOnly: boolean;
+    /** @internal */
+    _options: Array<TemplateResult>;
+    name: string;
+    value: string;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    /** @internal */
+    _setValue: (value: string) => void;
+    connectedCallback(): void;
+    handleKeyDown(event: KeyboardEvent): void;
     onChange({ target }: {
         target: any;
     }): void;
-    render(): import("lit").TemplateResult<1>;
-    #private;
+    render(): TemplateResult<1>;
 }
 export {};