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

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/{switch/index.js → styles.js}

@@ -1,4 +1,5 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r)=>{for(var e=r>1?void 0:r?u(t,n):t,l=a.length-1,s;l>=0;l--)(s=a[l])&&(e=(r?s(t,n,e):s(e))||e);return r&&e&&h(t,n,e),e};import{html as m,LitElement as f}from"lit";var d=function(){for(var a=[],t=arguments.length;t--;)a[t]=arguments[t];return a.reduce(function(n,r){return n.concat(typeof r=="string"?r:Array.isArray(r)?d.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(e){return r[e]?e:""}):"")},[]).join(" ")};import{property as v}from"lit/decorators.js";import{css as b}from"lit";var p=b`
+import { css } from 'lit';
+export const reset = css `
   *,
   :before,
   :after {
@@ -271,7 +272,8 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
   svg {
     pointer-events: none;
   }
-`,z=b`*, :before, :after {
+`;
+export const components = css `*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,19 +2439,4 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
                     display: none
                 }
             }
-        `;import{css as w}from"lit";var g=w`*,: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-switch-track-background\\]{background-color:var(--w-color-switch-track-background)}.group:hover .group-hover\\:bg-\\[--w-color-switch-track-background-hover\\]{background-color:var(--w-color-switch-track-background-hover)}.rounded-full{border-radius:9999px}.block{display:block}.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}.left-0{left:0}.left-4{left:.4rem}.top-0{top:0}.top-4{top:.4rem}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.group:hover .group-hover\\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.shadow-s{box-shadow:var(--w-shadow-s)}.h-16{height:1.6rem}.h-24{height:2.4rem}.h-full{height:100%}.w-16{width:1.6rem}.w-44{width:4.4rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.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}.translate-x-20{--w-translate-x:2rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;var o={base:"block relative h-24 w-44 cursor-pointer group focusable rounded-full",disabled:"pointer-events-none",track:"absolute top-0 left-0 h-full w-full rounded-full transition-colors",trackActive:"s-bg-primary group-hover:s-bg-primary-hover",trackInactive:"bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]",trackDisabled:"s-bg-disabled-subtle",handle:"absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform",handleSelected:"translate-x-20",handleNotDisabled:"s-bg shadow-s",handleDisabled:"s-bg-disabled",a11y:"sr-only"},i=class extends f{constructor(){super(...arguments);this.value=!1;this.disabled=!1}get _baseClasses(){return d([o.base,this.disabled&&o.disabled])}get _trackClasses(){return d([o.track,this.disabled&&o.trackDisabled,!this.disabled&&(this.value?o.trackActive:o.trackInactive)])}get _handleClasses(){return d([o.handle,this.value&&o.handleSelected,this.disabled?o.handleDisabled:o.handleNotDisabled])}_handleClick(){this.disabled||(this.value=!this.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){return m`
-      <div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked=${this.value}
-          class=${this._baseClasses}
-          aria-disabled=${this.disabled}
-          ?disabled=${this.disabled}
-          @click=${this._handleClick}>
-          <span data-testid="track" class=${this._trackClasses}></span>
-          <span data-testid="handle" class=${this._handleClasses}></span>
-        </button>
-      </div>
-    `}};i.styles=[p,g],c([v({type:Boolean,reflect:!0})],i.prototype,"value",2),c([v({type:Boolean,reflect:!0})],i.prototype,"disabled",2);customElements.get("w-switch")||customElements.define("w-switch",i);export{i as WarpSwitch};
-//# sourceMappingURL=index.js.map
+        `;

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

@@ -1,25 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-export declare const ccinput: {
-    wrapper: string;
-    base: string;
-    default: string;
-    disabled: string;
-    invalid: string;
-    readOnly: string;
-    placeholder: string;
-    suffix: string;
-    prefix: string;
-    textArea: string;
-};
-export declare const ccLabel: {
-    base: string;
-    optional: string;
-};
-export declare const ccHelpText: {
-    base: string;
-    color: string;
-    colorInvalid: string;
-};
 declare const WarpTextField_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * A single line text input element.
@@ -50,6 +29,18 @@ declare class WarpTextField extends WarpTextField_base {
     type: string;
     value: string;
     name: string;
+    /**
+     * Function to format value when the input field.
+     *
+     * Only active when the input field does not have focus,
+     * similar to the accessible input masking example from Filament Group
+     *
+     * https://css-tricks.com/input-masking/
+     * https://filamentgroup.github.io/politespace/demo/demo.html
+     */
+    formatter: (value: string) => string;
+    /** @internal */
+    mask: HTMLDivElement;
     /** @internal */
     _hasPrefix: boolean;
     /** @internal */
@@ -74,8 +65,3 @@ declare class WarpTextField extends WarpTextField_base {
     render(): import("lit").TemplateResult<1>;
 }
 export { WarpTextField };
-declare global {
-    interface HTMLElementTagNameMap {
-        'w-textfield': WarpTextField;
-    }
-}

package/dist/packages/textfield/index.js

@@ -1,4 +1,4 @@
-var D=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var n=r>1?void 0:r?J(o,i):o,g=h.length-1,x;g>=0;g--)(x=h[g])&&(n=(r?x(o,i,n):x(n))||n);return r&&n&&D(o,i,n),n};import{LitElement as Q,html as N}from"lit";var Y=function(){for(var h=[],o=arguments.length;o--;)h[o]=arguments[o];return h.reduce(function(i,r){return i.concat(typeof r=="string"?r:Array.isArray(r)?Y.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(n){return r[n]?n:""}):"")},[]).join(" ")};var a=function(h,o,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?h!==o||!r:!o.has(h))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(h):r?r.value:o.get(h)},c=function(h,o,i,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?h!==o||!n:!o.has(h))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(h,i):n?n.value=i:o.set(h,i),i};function R(h){var o,i,r,n,g,x,k,G,_,j,F,P,S,z,E,w,A,L,X;class T extends h{constructor(...e){var t,d,p;super(...e),o.add(this),this.internals=this.attachInternals(),i.set(this,!1),r.set(this,!1),n.set(this,!1),g.set(this,void 0),x.set(this,void 0),k.set(this,!0),_.set(this,""),j.set(this,()=>{c(this,n,!0,"f"),c(this,i,!0,"f"),a(this,o,"m",w).call(this)}),F.set(this,()=>{c(this,i,!1,"f"),a(this,o,"m",A).call(this,this.shouldFormValueUpdate()?a(this,_,"f"):""),!this.validity.valid&&a(this,n,"f")&&c(this,r,!0,"f");let m=a(this,o,"m",w).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),P.set(this,()=>{var m;a(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),c(this,k,!1,"f")),c(this,n,!0,"f"),c(this,r,!0,"f"),a(this,o,"m",w).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),S.set(this,void 0),z.set(this,!1),E.set(this,Promise.resolve()),(t=this.addEventListener)===null||t===void 0||t.call(this,"focus",a(this,j,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"blur",a(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",a(this,P,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let e=this.validators.map(p=>p.attribute).flat(),t=super.observedAttributes||[];return[...new Set([...t,...e])]}static getValidator(e){return this.validators.find(t=>t.attribute===e)||null}static getValidators(e){return this.validators.filter(t=>{var d;if(t.attribute===e||!((d=t.attribute)===null||d===void 0)&&d.includes(e))return!0})}get form(){return this.internals.form}get showError(){return a(this,o,"m",w).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(e,t,d){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,e,t,d);let M=this.constructor.getValidators(e);M!=null&&M.length&&this.validationTarget&&this.setValue(a(this,_,"f"))}setValue(e){var t;c(this,r,!1,"f"),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,""),c(this,_,e,"f");let p=this.shouldFormValueUpdate()?e:null;this.internals.setFormValue(p),a(this,o,"m",A).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),a(this,o,"m",w).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(e=>e(a(this,E,"f")))}formResetCallback(){var e,t;c(this,n,!1,"f"),c(this,r,!1,"f"),a(this,o,"m",w).call(this),(e=this.resetFormControl)===null||e===void 0||e.call(this),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,a(this,o,"m",w).call(this)?this.validationMessage:"")}}return i=new WeakMap,r=new WeakMap,n=new WeakMap,g=new WeakMap,x=new WeakMap,k=new WeakMap,_=new WeakMap,j=new WeakMap,F=new WeakMap,P=new WeakMap,S=new WeakMap,z=new WeakMap,E=new WeakMap,o=new WeakSet,G=function(){let e=this.getRootNode(),t=`${this.localName}[name="${this.getAttribute("name")}"]`;return e.querySelectorAll(t)},w=function(){if(this.hasAttribute("disabled"))return!1;let e=a(this,r,"f")||a(this,n,"f")&&!this.validity.valid&&!a(this,i,"f");return e&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),e},A=function(e){let t=this.constructor,d={},p=t.validators,m=[],M=p.some(v=>v.isValid instanceof Promise);a(this,z,"f")||(c(this,E,new Promise(v=>{c(this,S,v,"f")}),"f"),c(this,z,!0,"f")),a(this,g,"f")&&(a(this,g,"f").abort(),c(this,x,a(this,g,"f"),"f"));let V=new AbortController;c(this,g,V,"f");let $,q=!1;p.length&&(p.forEach(v=>{let O=v.key||"customError",y=v.isValid(this,e,V.signal);y instanceof Promise?(m.push(y),y.then(Z=>{Z!=null&&(d[O]=!Z,$=a(this,o,"m",X).call(this,v,e),a(this,o,"m",L).call(this,d,$))})):(d[O]=!y,this.validity[O]!==!y&&(q=!0),!y&&!$&&($=a(this,o,"m",X).call(this,v,e)))}),Promise.allSettled(m).then(()=>{var v;V!=null&&V.signal.aborted||(c(this,z,!1,"f"),(v=a(this,S,"f"))===null||v===void 0||v.call(this))}),(q||!M)&&a(this,o,"m",L).call(this,d,$))},L=function(e,t){if(this.validationTarget)this.internals.setValidity(e,t,this.validationTarget),c(this,k,!1,"f");else{if(this.internals.setValidity(e,t),this.internals.validity.valid)return;c(this,k,!0,"f")}},X=function(e,t){if(this.validityCallback){let d=this.validityCallback(e.key||"customError");if(d)return d}return e.message instanceof Function?e.message(this,t):e.message},T}import W from"@warp-ds/elements-core";import{property as b}from"lit/decorators.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{css as B}from"lit";var U=B`
+var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var n=r>1?void 0:r?Q(o,i):o,g=h.length-1,w;g>=0;g--)(w=h[g])&&(n=(r?w(o,i,n):w(n))||n);return r&&n&&K(o,i,n),n};var Y=function(){for(var h=[],o=arguments.length;o--;)h[o]=arguments[o];return h.reduce(function(i,r){return i.concat(typeof r=="string"?r:Array.isArray(r)?Y.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(n){return r[n]?n:""}):"")},[]).join(" ")};var a=function(h,o,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?h!==o||!r:!o.has(h))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(h):r?r.value:o.get(h)},b=function(h,o,i,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?h!==o||!n:!o.has(h))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(h,i):n?n.value=i:o.set(h,i),i};function R(h){var o,i,r,n,g,w,k,T,_,P,F,A,V,z,E,f,L,X,O;class J extends h{constructor(...e){var t,c,p;super(...e),o.add(this),this.internals=this.attachInternals(),i.set(this,!1),r.set(this,!1),n.set(this,!1),g.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),P.set(this,()=>{b(this,n,!0,"f"),b(this,i,!0,"f"),a(this,o,"m",f).call(this)}),F.set(this,()=>{b(this,i,!1,"f"),a(this,o,"m",L).call(this,this.shouldFormValueUpdate()?a(this,_,"f"):""),!this.validity.valid&&a(this,n,"f")&&b(this,r,!0,"f");let m=a(this,o,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),A.set(this,()=>{var m;a(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,n,!0,"f"),b(this,r,!0,"f"),a(this,o,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),V.set(this,void 0),z.set(this,!1),E.set(this,Promise.resolve()),(t=this.addEventListener)===null||t===void 0||t.call(this,"focus",a(this,P,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",a(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",a(this,A,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let e=this.validators.map(p=>p.attribute).flat(),t=super.observedAttributes||[];return[...new Set([...t,...e])]}static getValidator(e){return this.validators.find(t=>t.attribute===e)||null}static getValidators(e){return this.validators.filter(t=>{var c;if(t.attribute===e||!((c=t.attribute)===null||c===void 0)&&c.includes(e))return!0})}get form(){return this.internals.form}get showError(){return a(this,o,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(e,t,c){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,e,t,c);let $=this.constructor.getValidators(e);$!=null&&$.length&&this.validationTarget&&this.setValue(a(this,_,"f"))}setValue(e){var t;b(this,r,!1,"f"),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,""),b(this,_,e,"f");let p=this.shouldFormValueUpdate()?e:null;this.internals.setFormValue(p),a(this,o,"m",L).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),a(this,o,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(e=>e(a(this,E,"f")))}formResetCallback(){var e,t;b(this,n,!1,"f"),b(this,r,!1,"f"),a(this,o,"m",f).call(this),(e=this.resetFormControl)===null||e===void 0||e.call(this),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,a(this,o,"m",f).call(this)?this.validationMessage:"")}}return i=new WeakMap,r=new WeakMap,n=new WeakMap,g=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,P=new WeakMap,F=new WeakMap,A=new WeakMap,V=new WeakMap,z=new WeakMap,E=new WeakMap,o=new WeakSet,T=function(){let e=this.getRootNode(),t=`${this.localName}[name="${this.getAttribute("name")}"]`;return e.querySelectorAll(t)},f=function(){if(this.hasAttribute("disabled"))return!1;let e=a(this,r,"f")||a(this,n,"f")&&!this.validity.valid&&!a(this,i,"f");return e&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),e},L=function(e){let t=this.constructor,c={},p=t.validators,m=[],$=p.some(v=>v.isValid instanceof Promise);a(this,z,"f")||(b(this,E,new Promise(v=>{b(this,V,v,"f")}),"f"),b(this,z,!0,"f")),a(this,g,"f")&&(a(this,g,"f").abort(),b(this,w,a(this,g,"f"),"f"));let M=new AbortController;b(this,g,M,"f");let S,q=!1;p.length&&(p.forEach(v=>{let Z=v.key||"customError",y=v.isValid(this,e,M.signal);y instanceof Promise?(m.push(y),y.then(I=>{I!=null&&(c[Z]=!I,S=a(this,o,"m",O).call(this,v,e),a(this,o,"m",X).call(this,c,S))})):(c[Z]=!y,this.validity[Z]!==!y&&(q=!0),!y&&!S&&(S=a(this,o,"m",O).call(this,v,e)))}),Promise.allSettled(m).then(()=>{var v;M!=null&&M.signal.aborted||(b(this,z,!1,"f"),(v=a(this,V,"f"))===null||v===void 0||v.call(this))}),(q||!$)&&a(this,o,"m",X).call(this,c,S))},X=function(e,t){if(this.validationTarget)this.internals.setValidity(e,t,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(e,t),this.internals.validity.valid)return;b(this,k,!0,"f")}},O=function(e,t){if(this.validityCallback){let c=this.validityCallback(e.key||"customError");if(c)return c}return e.message instanceof Function?e.message(this,t):e.message},J}import{html as j,LitElement as G,nothing as re}from"lit";import{property as d,query as oe}from"lit/decorators.js";import{classMap as te}from"lit/directives/class-map.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{css as B}from"lit";var H=B`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var D=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
   svg {
     pointer-events: none;
   }
-`,ne=B`*, :before, :after {
+`,ce=B`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,34 +2437,92 @@ var D=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
                     display: none
                 }
             }
-        `;import{css as K}from"lit";var H=K`*,: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}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.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}.relative{position:relative}.static{position:static}.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)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.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-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.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{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)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var f={wrapper:"relative",base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ee={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},I={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},s=class extends R(Q){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&this.setValue(this.value)}get _inputstyles(){return Y([f.base,this._hasSuffix&&f.suffix,this._hasPrefix&&f.prefix,!this.invalid&&!this.disabled&&!this.readOnly&&f.default,this.invalid&&!this.disabled&&!this.readOnly&&f.invalid,!this.invalid&&this.disabled&&!this.readOnly&&f.disabled,!this.invalid&&!this.disabled&&this.readOnly&&f.readOnly])}get _helptextstyles(){return Y([I.base,this.invalid?I.colorInvalid:I.color])}get _label(){if(this.label)return N`<label for="${this._id}" class=${ee.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:n}=i.currentTarget;this.setValue(n);let g=new CustomEvent(i.type,{detail:{name:r,value:n,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return N`
+        `;import{css as W}from"lit";var U=W`
+  .w-textfield {
+    --_input-padding-top: 12px;
+    --_input-padding-left: 8px;
+    --_input-padding-right: 8px;
+    position: relative;
+  }
+
+  .w-textfield--has-prefix {
+    --_input-padding-left: 40px;
+  }
+
+  .w-textfield--has-suffix {
+    --_input-padding-right: var(--w-prefix-width, 40px);
+  }
+
+  .w-textfield__input-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .w-textfield__input-wrapper:focus-within .w-textfield__mask {
+    display: none;
+  }
+
+  /* Hide the native browser controls */
+  input[type="number"] {
+    -moz-appearance:textfield;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  /* Could also consider giving the input mask a background color instead of this */
+  .w-textfield__input-wrapper:has(.w-textfield__mask):not(:focus-within) input {
+    color: transparent;
+  }
+
+  .w-textfield__mask {
+    display: block;
+    border: 1px solid transparent;
+    top: var(--_input-padding-top);
+    left: var(--_input-padding-left);
+    right: var(--_input-padding-right);
+    position: absolute;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 1;
+  }
+`;import{css as ee}from"lit";var D=ee`*,: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}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.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}.relative{position:relative}.static{position:static}.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)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.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-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-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.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-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.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{pointer-events:none}.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}.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)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},N={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},s=class extends R(G){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&this.setValue(this.value),this.formatter&&this.value&&(this.mask.innerText=this.formatter(this.value))}get _inputstyles(){return Y([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!this.readOnly&&x.default,this.invalid&&!this.disabled&&!this.readOnly&&x.invalid,!this.invalid&&this.disabled&&!this.readOnly&&x.disabled,!this.invalid&&!this.disabled&&this.readOnly&&x.readOnly])}get _helptextstyles(){return Y([N.base,this.invalid?N.colorInvalid:N.color])}get _label(){if(this.label)return j`<label for="${this._id}" class=${ae.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:n}=i.currentTarget;this.value=n;let g=new CustomEvent(i.type,{detail:{name:r,value:n,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return j`
       ${this._label}
-      <div class="${f.wrapper}">
+      <div
+        class="${te({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
-        <input
-          class="${this._inputstyles}"
-          type="${this.type}"
-          min="${u(this.min)}"
-          max="${u(this.max)}"
-          size="${u(this.size)}"
-          minlength="${u(this.minLength)}"
-          maxlength="${u(this.maxLength)}"
-          name="${u(this.name)}"
-          pattern="${u(this.pattern)}"
-          placeholder="${u(this.placeholder)}"
-          value="${u(this.value)}"
-          aria-describedby="${u(this._helpId)}"
-          aria-errormessage="${u(this._error)}"
-          aria-invalid="${u(this.invalid)}"
-          id="${this._id}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readOnly}"
-          ?required="${this.required}"
-          @blur="${this.handler}"
-          @change="${this.handler}"
-          @focus="${this.handler}" />
+        <div class="w-textfield__input-wrapper">
+          ${this.formatter?j`<div class="w-textfield__mask"></div>`:re}
+          <input
+            class="${this._inputstyles}"
+            type="${this.type}"
+            min="${u(this.min)}"
+            max="${u(this.max)}"
+            size="${u(this.size)}"
+            minlength="${u(this.minLength)}"
+            maxlength="${u(this.maxLength)}"
+            name="${u(this.name)}"
+            pattern="${u(this.pattern)}"
+            placeholder="${u(this.placeholder)}"
+            .value="${this.value||""}"
+            aria-describedby="${u(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
+            aria-errormessage="${u(this._error)}"
+            aria-invalid="${u(this.invalid)}"
+            id="${this._id}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readOnly}"
+            ?required="${this.required}"
+            @blur="${this.handler}"
+            @change="${this.handler}"
+            @input="${this.handler}"
+            @focus="${this.handler}" />
+        </div>
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
-      ${this.helpText&&N`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`}
-    `}};s.shadowRootOptions={...W.shadowRootOptions,delegatesFocus:!0},s.styles=[U,H],l([b({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([b({type:Boolean,reflect:!0})],s.prototype,"invalid",2),l([b({type:String,reflect:!0})],s.prototype,"id",2),l([b({type:String,reflect:!0})],s.prototype,"label",2),l([b({type:String,reflect:!0,attribute:"help-text"})],s.prototype,"helpText",2),l([b({type:String,reflect:!0})],s.prototype,"size",2),l([b({type:Number,reflect:!0})],s.prototype,"max",2),l([b({type:Number,reflect:!0})],s.prototype,"min",2),l([b({type:Number,reflect:!0,attribute:"min-length"})],s.prototype,"minLength",2),l([b({type:Number,reflect:!0,attribute:"max-length"})],s.prototype,"maxLength",2),l([b({type:String,reflect:!0})],s.prototype,"pattern",2),l([b({type:String,reflect:!0})],s.prototype,"placeholder",2),l([b({type:Boolean,reflect:!0,attribute:"read-only"})],s.prototype,"readOnly",2),l([b({type:Boolean,reflect:!0})],s.prototype,"required",2),l([b({type:String,reflect:!0})],s.prototype,"type",2),l([b({type:String,reflect:!0})],s.prototype,"value",2),l([b({type:String,reflect:!0})],s.prototype,"name",2),l([b({type:Boolean})],s.prototype,"_hasPrefix",2),l([b({type:Boolean})],s.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",s);export{s as WarpTextField,I as ccHelpText,ee as ccLabel,f as ccinput};
+      <span class="sr-only" id="aria-description">${this.ariaDescription}</span>
+      ${this.helpText&&j`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`}
+    `}};s.shadowRootOptions={...G.shadowRootOptions,delegatesFocus:!0},s.styles=[H,D,U],l([d({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([d({type:Boolean,reflect:!0})],s.prototype,"invalid",2),l([d({type:String,reflect:!0})],s.prototype,"id",2),l([d({type:String,reflect:!0})],s.prototype,"label",2),l([d({type:String,reflect:!0,attribute:"help-text"})],s.prototype,"helpText",2),l([d({type:String,reflect:!0})],s.prototype,"size",2),l([d({type:Number,reflect:!0})],s.prototype,"max",2),l([d({type:Number,reflect:!0})],s.prototype,"min",2),l([d({type:Number,reflect:!0,attribute:"min-length"})],s.prototype,"minLength",2),l([d({type:Number,reflect:!0,attribute:"max-length"})],s.prototype,"maxLength",2),l([d({type:String,reflect:!0})],s.prototype,"pattern",2),l([d({type:String,reflect:!0})],s.prototype,"placeholder",2),l([d({type:Boolean,reflect:!0,attribute:"read-only"})],s.prototype,"readOnly",2),l([d({type:Boolean,reflect:!0})],s.prototype,"required",2),l([d({type:String,reflect:!0})],s.prototype,"type",2),l([d({type:String,reflect:!0})],s.prototype,"value",2),l([d({type:String,reflect:!0})],s.prototype,"name",2),l([d({attribute:!1})],s.prototype,"formatter",2),l([oe(".w-textfield__mask")],s.prototype,"mask",2),l([d({type:Boolean})],s.prototype,"_hasPrefix",2),l([d({type:Boolean})],s.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",s);export{s as WarpTextField};
 //# sourceMappingURL=index.js.map