@warp-ds/elements 2.2.0-next.9 → 2.3.0-next.1

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Select } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpSelect>, "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "always" | "hint" | "optional" | "readOnly" | "_options" | "_setValue" | "handleKeyDown"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import(".").WarpSelect>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpSelect, {
+        onChange: string;
+        onchange: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const ChangeEvent: (args: any) => React.JSX.Element;

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

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Select, Option } from './react';
+export default {
+    title: 'Forms/Select',
+    render(args) {
+        return (React.createElement(Select, { ...args },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries")));
+    },
+    component: Select,
+};
+export const Default = {
+    args: {
+        label: 'Berries',
+    },
+};
+export const ChangeEvent = (args) => {
+    const [selectedValue, setSelectedValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            "Selected Value: ",
+            selectedValue),
+        React.createElement(Select, { ...args, onChange: (e) => setSelectedValue(e.detail) },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries"))));
+};

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

@@ -8,3 +8,10 @@ declare const meta: Meta<typeof args>;
 export default meta;
 type Story = StoryObj<typeof args>;
 export declare const Default: Story;
+export declare const Hint: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const NoLabel: Story;
+export declare const Optional: Story;
+export declare const Placeholder: Story;

package/dist/packages/select/select.stories.js

@@ -0,0 +1,100 @@
+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-select');
+const meta = {
+    title: 'Forms/Select',
+    render(args) {
+        return html `
+      <w-select ${spread(prespread(args))}>
+        <option value="raspberries">Raspberries</option>
+        <option value="strawberries" selected>Strawberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+    `;
+    },
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Berries',
+    },
+};
+export const Hint = {
+    args: {
+        label: 'Berries',
+        always: true,
+        hint: 'We assume this is your jam preference'
+    },
+};
+export const Invalid = {
+    args: {
+        label: 'Berries',
+        invalid: true,
+        hint: 'Wrong choice'
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Berries',
+        disabled: true,
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Berries',
+        'read-only': true,
+    },
+};
+export const NoLabel = {
+    render(args) {
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <w-select ${spread(prespread(args))} aria-label="Your selection is berry nice!">
+          <option value="raspberries">Raspberries</option>
+          <option value="strawberries" selected>Strawberries</option>
+          <option value="cloudberries">Cloudberries</option>
+        </w-select>
+
+        <label id="select-label" htmlFor="warp-aria-labelledby-example">
+          You're berry good at selecting!
+        </label>
+        <w-select ${spread(prespread(args))} id="warp-aria-labelledby-example">
+          <option value="raspberries">Raspberries</option>
+          <option value="strawberries" selected>Strawberries</option>
+          <option value="cloudberries">Cloudberries</option>
+        </w-select>
+      </div>
+    `;
+    },
+};
+export const Optional = {
+    args: {
+        label: 'Berries',
+        optional: true,
+    },
+};
+export const Placeholder = {
+    args: {
+        label: 'Berries',
+    },
+    render(args) {
+        return html `
+      <w-select ${spread(prespread(args))}>
+        <option value="">Select an option</option>
+        <option value="raspberries">Raspberries</option>
+        <option value="strawberries">Strawberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+    `;
+    },
+};

package/dist/packages/select/select.test.js

@@ -0,0 +1,31 @@
+import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './index.js';
+test('works in a form', async () => {
+    const component = html `
+    <form data-testid="flavour">
+      <w-select label="Berries" name="berry">
+        <option value="strawberries">Strawberries</option>
+        <option value="raspberries">Raspberries</option>
+        <option value="cloudberries">Cloudberries</option>
+      </w-select>
+
+      <button>Submit</button>
+    </form>
+  `;
+    const page = render(component);
+    // Confirm we have a form associated field berry
+    const form = page.getByTestId('flavour');
+    expect(form).toHaveFormValues({
+        berry: undefined,
+    });
+    // Select Raspberries
+    await expect.element(page.getByLabelText('Berries')).toBeVisible();
+    await userEvent.selectOptions(page.getByLabelText('Berries').element(), 'Raspberries');
+    // Confirm the form has a field berry with value raspberries
+    expect(form).toHaveFormValues({
+        berry: 'raspberries',
+    });
+});

package/dist/packages/select/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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.block,.before\\:block:before{display:block}.before\\:hidden:before{display:none}.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}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none,.before\\:pointer-events-none:before{pointer-events:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;

package/dist/packages/slider/Slider.d.ts

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

package/dist/packages/slider/Slider.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSlider } from './slider.js';
+export const Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: WarpSlider,
+    react: React,
+});

package/dist/packages/slider/SliderThumb.d.ts

@@ -0,0 +1,2 @@
+import { WarpSliderThumb } from './slider-thumb.js';
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {}>;

package/dist/packages/slider/SliderThumb.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSliderThumb } from './slider-thumb.js';
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: WarpSliderThumb,
+    react: React,
+});

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

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export * from './slider-thumb.js';

package/dist/packages/slider/index.js

@@ -0,0 +1,2 @@
+export * from './slider.js';
+export * from './slider-thumb.js';

package/dist/packages/slider/oddbird-css-anchor-positioning.d.ts

@@ -0,0 +1,2 @@
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

package/dist/packages/slider/oddbird-css-anchor-positioning.js

@@ -0,0 +1,3 @@
+// This file is only here to give the Storybook Vite dev server a target
+import polyfill from '@oddbird/css-anchor-positioning/fn';
+export default polyfill;

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

@@ -0,0 +1,8 @@
+import { EventName } from '@lit/react';
+import { WarpSlider } from './slider';
+import { WarpSliderThumb } from './slider-thumb';
+export declare const Slider: import("@lit/react").ReactWebComponent<WarpSlider, {}>;
+export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {
+    onSliderValidity: EventName<CustomEvent>;
+    'onslider-validity': EventName<CustomEvent>;
+}>;

package/dist/packages/slider/react.js

@@ -0,0 +1,20 @@
+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 Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: Component,
+    react: React,
+});
+export const SliderThumb = createComponent({
+    tagName: 'w-slider-thumb',
+    elementClass: Component,
+    react: React,
+    events: {
+        onSliderValidity: 'slidervalidity',
+        'onslider-validity': 'slidervalidity', // should be slider-validity
+    },
+});

package/dist/packages/slider/slider-thumb.d.ts

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { WarpTextField } from '../textfield/index.js';
+declare const WarpSliderThumb_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * Component to place inside a `<w-slider>`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ */
+declare class WarpSliderThumb extends WarpSliderThumb_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    ariaLabel: string;
+    ariaDescription: string;
+    label: string;
+    name: string;
+    value: string;
+    disabled: boolean;
+    /** Set by `<w-slider>` */
+    markers: string;
+    /** Set by `<w-slider>` */
+    required: boolean;
+    /** Set by `<w-slider>` */
+    step: number;
+    /** Set by `<w-slider>` */
+    min: string;
+    /** Set by `<w-slider>` */
+    max: string;
+    /** Set by `<w-slider>` */
+    suffix: string;
+    /** @internal */
+    forceDisabled: boolean;
+    /** @internal */
+    forceInvalid: boolean;
+    /** JS hook to help you format the numeric value how you want. */
+    formatter: (value: string) => string;
+    range: HTMLInputElement;
+    textfield: WarpTextField;
+    /** @internal */
+    _invalid: boolean;
+    /** @internal */
+    _showTooltip: boolean;
+    /**
+     * Reference to the anchor positioning style element used by the polyfill.
+     * @internal
+     */
+    anchorPositioningStyleElement: HTMLStyleElement | null;
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSliderThumb };