@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

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

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import React from 'react';
-import { Pill } from './react';
+import { StoryObj } from "@storybook/react";
+import React from "react";
+import { Pill } from "./react";
 declare const _default: {
     title: string;
     render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./pill").WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel"> & {

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Pill } from './react';
+import React from "react";
+import { Pill } from "./react";
 export default {
-    title: 'Buttons/Pill',
+    title: "Buttons/Pill",
     render(args) {
         return React.createElement(Pill, { ...args }, "Lorem");
     },

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

@@ -1,9 +1,9 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { Pill } from './react.js';
-describeReactSsrAttributeMapping('Pill', Pill, [
-    { propName: 'canClose', attrName: 'can-close' },
-    { propName: 'openSrLabel', attrName: 'open-sr-label', value: 'Open' },
-    { propName: 'openAriaLabel', attrName: 'open-aria-label', value: 'Open' },
-    { propName: 'closeSrLabel', attrName: 'close-sr-label', value: 'Close' },
-    { propName: 'closeAriaLabel', attrName: 'close-aria-label', value: 'Close' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { Pill } from "./react.js";
+describeReactSsrAttributeMapping("Pill", Pill, [
+    { propName: "canClose", attrName: "can-close" },
+    { propName: "openSrLabel", attrName: "open-sr-label", value: "Open" },
+    { propName: "openAriaLabel", attrName: "open-aria-label", value: "Open" },
+    { propName: "closeSrLabel", attrName: "close-sr-label", value: "Close" },
+    { propName: "closeAriaLabel", attrName: "close-aria-label", value: "Close" },
 ]);

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpPill } from './pill.js';
-import './pill.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import type { WarpPill } from "./pill.js";
+import "./pill.js";
 declare const args: Partial<WarpPill> & {
     [key: string]: any;
 };

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

@@ -1,11 +1,11 @@
-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 './pill.js';
-const { events, args, argTypes } = getStorybookHelpers('w-pill');
+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 "./pill.js";
+const { events, args, argTypes } = getStorybookHelpers("w-pill");
 const meta = {
-    title: 'Buttons/Pill',
+    title: "Buttons/Pill",
     render(args) {
         return html `<w-pill ${spread(prespread(args))}>Lorem</w-pill>`;
     },
@@ -28,6 +28,6 @@ export const Suggestion = {
 };
 export const Closable = {
     args: {
-        'can-close': true,
+        "can-close": true,
     },
 };

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

@@ -1 +1 @@
-import './pill.js';
+import "./pill.js";

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

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { WarpPill } from './pill.js';
+import React from "react";
+import { WarpPill } from "./pill.js";
 export declare const Pill: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel"> & {
     onClick?: ((e: Event) => void) | undefined;
     onclick?: ((e: Event) => void) | undefined;

package/dist/packages/pill/react.js

@@ -1,27 +1,31 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+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 {
 }
 const BasePill = createComponent({
-    tagName: 'w-pill',
+    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',
+        onClick: "w-pill-click", // should be click
+        onclick: "w-pill-click",
+        onClose: "w-pill-close", // should be close
+        onclose: "w-pill-close",
     },
 });
 export const Pill = React.forwardRef(({ canClose, openSrLabel, openAriaLabel, closeSrLabel, closeAriaLabel, ...props }, ref) => React.createElement(BasePill, {
     ...props,
-    ...(canClose ? { 'can-close': true } : {}),
-    ...(openSrLabel !== undefined ? { 'open-sr-label': openSrLabel } : {}),
-    ...(openAriaLabel !== undefined ? { 'open-aria-label': openAriaLabel } : {}),
-    ...(closeSrLabel !== undefined ? { 'close-sr-label': closeSrLabel } : {}),
-    ...(closeAriaLabel !== undefined ? { 'close-aria-label': closeAriaLabel } : {}),
+    ...(canClose ? { "can-close": true } : {}),
+    ...(openSrLabel !== undefined ? { "open-sr-label": openSrLabel } : {}),
+    ...(openAriaLabel !== undefined
+        ? { "open-aria-label": openAriaLabel }
+        : {}),
+    ...(closeSrLabel !== undefined ? { "close-sr-label": closeSrLabel } : {}),
+    ...(closeAriaLabel !== undefined
+        ? { "close-aria-label": closeAriaLabel }
+        : {}),
     ref,
 }));
-Pill.displayName = 'Pill';
+Pill.displayName = "Pill";

package/dist/packages/pill/styles.js

@@ -1,2 +1,2 @@
-import { unsafeCSS } from 'lit';
+import { unsafeCSS } from "lit";
 export const styles = unsafeCSS("*,: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/radio/base-element.d.ts

@@ -1,6 +1,6 @@
-import type { CSSResult, CSSResultGroup } from 'lit';
-import { LitElement } from 'lit';
-declare module 'lit' {
+import type { CSSResult, CSSResultGroup } from "lit";
+import { LitElement } from "lit";
+declare module "lit" {
     interface PropertyDeclaration {
         /**
          * Specifies the property’s default value

package/dist/packages/radio/base-element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
-import { styles as hostStyles } from './host-styles';
+import { LitElement, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { styles as hostStyles } from "./host-styles";
 export default class BaseElement extends LitElement {
     /**
      * Override the default styles property to fetch and convert string CSS files. Components can override this behavior

package/dist/packages/radio/custom-error-validator.d.ts

@@ -1,4 +1,4 @@
-import type { Validator } from './form-associated-element';
+import type { Validator } from "./form-associated-element";
 /**
  * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing
  * custom translations and error messages, you can simply rely on the element "formControl" in your shadow dom.

package/dist/packages/radio/custom-error-validator.js

@@ -4,17 +4,17 @@
  */
 export const CustomErrorValidator = () => {
     return {
-        observedAttributes: ['custom-error'],
+        observedAttributes: ["custom-error"],
         checkValidity(element) {
             const validity = {
-                message: '',
+                message: "",
                 isValid: true,
                 invalidKeys: [],
             };
             if (element.customError) {
                 validity.message = element.customError;
                 validity.isValid = false;
-                validity.invalidKeys = ['customError'];
+                validity.invalidKeys = ["customError"];
             }
             return validity;
         },

package/dist/packages/radio/form-associated-element.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
-import BaseElement from './base-element.js';
+import { LitElement } from "lit";
+import BaseElement from "./base-element.js";
 export interface Validator<T extends BaseFormAssociatedElement = BaseFormAssociatedElement> {
     observedAttributes?: string[];
     checkValidity: (element: T) => {
         message: string;
         isValid: boolean;
-        invalidKeys: Exclude<keyof ValidityState, 'valid'>[];
+        invalidKeys: Exclude<keyof ValidityState, "valid">[];
     };
     message?: string | ((element: T) => string);
 }
@@ -22,7 +22,7 @@ export interface BaseFormControl extends BaseElement {
     pattern?: string;
     min?: number | string | Date;
     max?: number | string | Date;
-    step?: number | 'any';
+    step?: number | "any";
     required?: boolean;
     minlength?: number;
     maxlength?: number;
@@ -37,7 +37,7 @@ export interface BaseFormControl extends BaseElement {
     /** Convenience API for `setCustomValidity()` */
     customError: null | string;
 }
-export declare class BaseFormAssociatedElement extends BaseElement implements Omit<ElementInternals, 'form' | 'setFormValue'>, BaseFormControl {
+export declare class BaseFormAssociatedElement extends BaseElement implements Omit<ElementInternals, "form" | "setFormValue">, BaseFormControl {
     static formAssociated: boolean;
     /**
      * Validators are static because they have `observedAttributes`, essentially attributes to "watch"
@@ -62,9 +62,9 @@ export declare class BaseFormAssociatedElement extends BaseElement implements Om
     constructor();
     private states;
     connectedCallback(): void;
-    firstUpdated(...args: Parameters<LitElement['firstUpdated']>): void;
+    firstUpdated(...args: Parameters<LitElement["firstUpdated"]>): void;
     emitInvalid: (e: Event) => void;
-    protected willUpdate(changedProperties: Parameters<LitElement['willUpdate']>[0]): void;
+    protected willUpdate(changedProperties: Parameters<LitElement["willUpdate"]>[0]): void;
     private handleInteraction;
     get labels(): NodeList;
     getForm(): HTMLFormElement | null;
@@ -92,7 +92,7 @@ export declare class BaseFormAssociatedElement extends BaseElement implements Om
      * the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of
      * "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.
      */
-    formStateRestoreCallback(state: string | File | FormData | null, reason: 'autocomplete' | 'restore'): void;
+    formStateRestoreCallback(state: string | File | FormData | null, reason: "autocomplete" | "restore"): void;
     setValue(...args: Parameters<typeof this.internals.setFormValue>): void;
     get allValidators(): Validator<BaseFormAssociatedElement>[];
     /**

package/dist/packages/radio/form-associated-element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { isServer } from 'lit';
-import { property } from 'lit/decorators.js';
-import BaseElement from './base-element.js';
-import { CustomErrorValidator } from './custom-error-validator.js';
-import { WInvalidEvent } from './invalid';
+import { isServer } from "lit";
+import { property } from "lit/decorators.js";
+import BaseElement from "./base-element.js";
+import { CustomErrorValidator } from "./custom-error-validator.js";
+import { WInvalidEvent } from "./invalid";
 // setFormValue omitted so that we can use `setValue`
 export class BaseFormAssociatedElement extends BaseElement {
     static { this.formAssociated = true; }
@@ -40,7 +40,7 @@ export class BaseFormAssociatedElement extends BaseElement {
         /** Disables the form control. */
         this.disabled = false;
         this.required = false;
-        this.assumeInteractionOn = ['input'];
+        this.assumeInteractionOn = ["input"];
         this.validators = [];
         // Should these be private?
         this.valueHasChanged = false;
@@ -66,7 +66,7 @@ export class BaseFormAssociatedElement extends BaseElement {
             }
         };
         if (!isServer) {
-            this.addEventListener('invalid', this.emitInvalid);
+            this.addEventListener("invalid", this.emitInvalid);
         }
     }
     connectedCallback() {
@@ -82,14 +82,14 @@ export class BaseFormAssociatedElement extends BaseElement {
         this.updateValidity();
     }
     willUpdate(changedProperties) {
-        if (!isServer && changedProperties.has('customError')) {
+        if (!isServer && changedProperties.has("customError")) {
             // We use null because it we really don't want it to show up in the attributes because `custom-error` does reflect
             if (!this.customError) {
                 this.customError = null;
             }
-            this.setCustomValidity(this.customError || '');
+            this.setCustomValidity(this.customError || "");
         }
-        if (changedProperties.has('value') || changedProperties.has('disabled')) {
+        if (changedProperties.has("value") || changedProperties.has("disabled")) {
             // @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.
             const value = this.value;
             // Accounts for the snowflake case on `<wa-select>`
@@ -106,10 +106,11 @@ export class BaseFormAssociatedElement extends BaseElement {
                 this.setValue(value, value);
             }
         }
-        if (changedProperties.has('disabled')) {
-            this.customStates.set('disabled', this.disabled);
-            if (this.hasAttribute('disabled') || (!isServer && !this.matches(':disabled'))) {
-                this.toggleAttribute('disabled', this.disabled);
+        if (changedProperties.has("disabled")) {
+            this.customStates.set("disabled", this.disabled);
+            if (this.hasAttribute("disabled") ||
+                (!isServer && !this.matches(":disabled"))) {
+                this.toggleAttribute("disabled", this.disabled);
             }
         }
         this.updateValidity();
@@ -155,19 +156,19 @@ export class BaseFormAssociatedElement extends BaseElement {
             anchor = this.validationTarget;
         }
         this.internals.setValidity(flags, message, anchor || undefined);
-        this.requestUpdate('validity');
+        this.requestUpdate("validity");
         this.setCustomStates();
     }
     setCustomStates() {
         const required = Boolean(this.required);
         const isValid = this.internals.validity.valid;
         const hasInteracted = this.hasInteracted;
-        this.customStates.set('required', required);
-        this.customStates.set('optional', !required);
-        this.customStates.set('invalid', !isValid);
-        this.customStates.set('valid', isValid);
-        this.customStates.set('user-invalid', !isValid && hasInteracted);
-        this.customStates.set('user-valid', isValid && hasInteracted);
+        this.customStates.set("required", required);
+        this.customStates.set("optional", !required);
+        this.customStates.set("invalid", !isValid);
+        this.customStates.set("valid", isValid);
+        this.customStates.set("user-invalid", !isValid && hasInteracted);
+        this.customStates.set("user-valid", isValid && hasInteracted);
     }
     /**
      * Do not use this when creating a "Validator". This is intended for end users of components.
@@ -203,7 +204,7 @@ export class BaseFormAssociatedElement extends BaseElement {
     formStateRestoreCallback(state, reason) {
         // @ts-expect-error We purposely do not have a value property. It makes things hard to extend.
         this.value = state;
-        if (reason === 'restore') {
+        if (reason === "restore") {
             this.resetValidity();
         }
         this.updateValidity();
@@ -221,12 +222,12 @@ export class BaseFormAssociatedElement extends BaseElement {
      * Reset validity is a way of removing manual custom errors and native validation.
      */
     resetValidity() {
-        this.setCustomValidity('');
+        this.setCustomValidity("");
         this.setValidity({});
     }
     updateValidity() {
         if (this.disabled ||
-            this.hasAttribute('disabled') ||
+            this.hasAttribute("disabled") ||
             !this.willValidate //
         ) {
             this.resetValidity();
@@ -242,7 +243,7 @@ export class BaseFormAssociatedElement extends BaseElement {
             customError: Boolean(this.customError),
         };
         const formControl = this.validationTarget || this.input || undefined;
-        let finalMessage = '';
+        let finalMessage = "";
         for (const validator of validators) {
             const { isValid, message, invalidKeys } = validator.checkValidity(this);
             if (isValid) {
@@ -275,7 +276,7 @@ __decorate([
     property({ state: true, attribute: false })
 ], BaseFormAssociatedElement.prototype, "hasInteracted", void 0);
 __decorate([
-    property({ attribute: 'custom-error', reflect: true })
+    property({ attribute: "custom-error", reflect: true })
 ], BaseFormAssociatedElement.prototype, "customError", void 0);
 __decorate([
     property({ attribute: false, state: true, type: Object })

package/dist/packages/radio/host-styles.js

@@ -1,12 +1,12 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const styles = css `
-  :host {
-    box-sizing: border-box !important;
-  }
+	:host {
+		box-sizing: border-box !important;
+	}
 
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit !important;
-  }
+	:host *,
+	:host *::before,
+	:host *::after {
+		box-sizing: inherit !important;
+	}
 `;

package/dist/packages/radio/invalid.d.ts

@@ -3,6 +3,6 @@ export declare class WInvalidEvent extends Event {
 }
 declare global {
     interface GlobalEventHandlersEventMap {
-        'wa-invalid': WInvalidEvent;
+        "wa-invalid": WInvalidEvent;
     }
 }

package/dist/packages/radio/invalid.js

@@ -1,5 +1,5 @@
 export class WInvalidEvent extends Event {
     constructor() {
-        super('w-invalid', { bubbles: true, cancelable: false, composed: true });
+        super("w-invalid", { bubbles: true, cancelable: false, composed: true });
     }
 }