@warp-ds/elements 2.4.0-next.1 → 2.4.0-next.10

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

@@ -1,11 +1,12 @@
-import '@warp-ds/icons/elements/info-16';
-import '@warp-ds/icons/elements/success-16';
-import '@warp-ds/icons/elements/error-16';
-import './index.js';
+import '@warp-ds/components/icon';
+import '../tab-panel/tab-panel.js';
+import '../tab/tab.js';
+import './tabs.js';
 declare const meta: {
     title: string;
 };
 export default meta;
 export declare const Default: () => import("lit").TemplateResult<1>;
 export declare const WithIcons: () => import("lit").TemplateResult<1>;
+export declare const WithIconsOver: () => import("lit").TemplateResult<1>;
 export declare const ManyTabs: () => import("lit").TemplateResult<1>;

package/dist/packages/tabs/tabs.stories.js

@@ -1,93 +1,117 @@
+import '@warp-ds/components/icon';
 import { html } from 'lit';
-import '@warp-ds/icons/elements/info-16';
-import '@warp-ds/icons/elements/success-16';
-import '@warp-ds/icons/elements/error-16';
-import './index.js';
+import '../tab-panel/tab-panel.js';
+import '../tab/tab.js';
+import './tabs.js';
 const meta = {
     title: 'Components/Tabs',
 };
 export default meta;
 export const Default = () => html `
   <w-tabs active="tab1">
-    <w-tab name="tab1" label="First Tab"></w-tab>
-    <w-tab name="tab2" label="Second Tab"></w-tab>
-    <w-tab name="tab3" label="Third Tab"></w-tab>
-  </w-tabs>
 
-  <w-tab-panel name="tab1">
-    <p>Content for the first tab. This panel is visible when the first tab is active.</p>
-  </w-tab-panel>
+    <w-tab for="tab1">First Tab</w-tab>
+    <w-tab-panel id="tab1">
+      <p>Content for the first tab. This panel is visible when the first tab is active.</p>
+    </w-tab-panel>
+
+    <w-tab for="tab2">Second Tab</w-tab>
+    <w-tab-panel id="tab2" hidden>
+      <p>Content for the second tab. This panel is visible when the second tab is active.</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab2" hidden>
-    <p>Content for the second tab. This panel is visible when the second tab is active.</p>
-  </w-tab-panel>
+    <w-tab for="tab3">Third Tab</w-tab>
+    <w-tab-panel id="tab3" hidden>
+      <p>Content for the third tab. This panel is visible when the third tab is active.</p>
+    </w-tab-panel>
+
+  </w-tabs>
 
-  <w-tab-panel name="tab3" hidden>
-    <p>Content for the third tab. This panel is visible when the third tab is active.</p>
-  </w-tab-panel>
 `;
 export const WithIcons = () => html `
   <w-tabs active="info">
-    <w-tab name="info" label="Info">
-      <span slot="icon">
-          <w-icon-info-16></w-icon-info-16>
-      </span>
+    <w-tab for="info">
+      <w-icon name="Info" slot="icon"></w-icon>
+      Info
     </w-tab>
-    <w-tab name="done" label="Done">
-      <span slot="icon">
-          <w-icon-success-16></w-icon-success-16>
-      </span>
+    <w-tab-panel id="info">
+      <p>Info content.</p>
+    </w-tab-panel>
+
+    <w-tab for="done">
+      <w-icon name="Success" slot="icon"></w-icon>
+      Done
     </w-tab>
-    <w-tab name="error" label="Failures">
-      <span slot="icon">
-          <w-icon-error-16></w-icon-error-16>
-      </span>
+    <w-tab-panel id="done" hidden>
+      <p>Done content.</p>
+    </w-tab-panel>
+
+    <w-tab for="error">
+      <w-icon name="Error" slot="icon"></w-icon>
+      Failures
     </w-tab>
+    <w-tab-panel id="error" hidden>
+      <p>Error content.</p>
+    </w-tab-panel>
   </w-tabs>
+`;
+export const WithIconsOver = () => html `
+  <w-tabs active="info">
+    <w-tab for="info" over>
+      <w-icon name="Info" slot="icon"></w-icon>
+      Info
+    </w-tab>
+    <w-tab-panel id="info">
+      <p>Info content.</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="home">
-    <p>Welcome to the home page!</p>
-  </w-tab-panel>
-
-  <w-tab-panel name="search" hidden>
-    <p>Search functionality goes here.</p>
-  </w-tab-panel>
+    <w-tab for="done" over>
+      <w-icon name="Success" slot="icon"></w-icon>
+      Done
+    </w-tab>
+    <w-tab-panel id="done" hidden>
+      <p>Done content.</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="profile" hidden>
-    <p>User profile information.</p>
-  </w-tab-panel>
+    <w-tab for="error" over>
+      <w-icon name="Error" slot="icon"></w-icon>
+      Failures
+    </w-tab>
+    <w-tab-panel id="error" hidden>
+      <p>Error content.</p>
+    </w-tab-panel>
+  </w-tabs>
 `;
 export const ManyTabs = () => html `
   <w-tabs active="tab1">
-    <w-tab name="tab1" label="Tab 1"></w-tab>
-    <w-tab name="tab2" label="Tab 2"></w-tab>
-    <w-tab name="tab3" label="Tab 3"></w-tab>
-    <w-tab name="tab4" label="Tab 4"></w-tab>
-    <w-tab name="tab5" label="Tab 5"></w-tab>
-    <w-tab name="tab6" label="Tab 6"></w-tab>
-  </w-tabs>
+    <w-tab for="tab1">Tab 1</w-tab>
+    <w-tab-panel id="tab1">
+      <p>Content for tab 1</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab1">
-    <p>Content for tab 1</p>
-  </w-tab-panel>
+    <w-tab for="tab2">Tab 2</w-tab>
+    <w-tab-panel id="tab2" hidden>
+      <p>Content for tab 2</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab2" hidden>
-    <p>Content for tab 2</p>
-  </w-tab-panel>
+    <w-tab for="tab3">Tab 3</w-tab>
+    <w-tab-panel id="tab3" hidden>
+      <p>Content for tab 3</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab3" hidden>
-    <p>Content for tab 3</p>
-  </w-tab-panel>
+    <w-tab for="tab4">Tab 4</w-tab>
+    <w-tab-panel id="tab4" hidden>
+      <p>Content for tab 4</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab4" hidden>
-    <p>Content for tab 4</p>
-  </w-tab-panel>
+    <w-tab for="tab5">Tab 5</w-tab>
+    <w-tab-panel id="tab5" hidden>
+      <p>Content for tab 5</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab5" hidden>
-    <p>Content for tab 5</p>
-  </w-tab-panel>
-
-  <w-tab-panel name="tab6" hidden>
-    <p>Content for tab 6</p>
-  </w-tab-panel>
+    <w-tab for="tab6">Tab 6</w-tab>
+    <w-tab-panel id="tab6" hidden>
+      <p>Content for tab 6</p>
+    </w-tab-panel>
+  </w-tabs>
 `;

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

@@ -1,4 +1,4 @@
-import { WarpTextarea } from './index.js';
+import { WarpTextarea } from './textarea.js';
 export declare const Textarea: import("@lit/react").ReactWebComponent<WarpTextarea, {
     onBlur: string;
     onblur: string;

package/dist/packages/textarea/react.js

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

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { StoryObj } from '@storybook/react';
+import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "updated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "helpText" | "optional" | "readOnly" | "readonly" | "placeholder" | "required" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "updated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "placeholder" | "helpText" | "required" | "optional" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

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

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

package/dist/packages/textarea/textarea.stories.js

@@ -2,7 +2,7 @@ import { spread } from '@open-wc/lit-helpers';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
-import './index.js';
+import './textarea.js';
 const { events, args, argTypes } = getStorybookHelpers('w-textarea');
 const meta = {
     title: 'Forms/Textarea',

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

@@ -1 +1 @@
-import './index.js';
+import './textarea.js';

package/dist/packages/textarea/textarea.test.js

@@ -2,7 +2,7 @@ import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-lit';
-import './index.js';
+import './textarea.js';
 test('renders the textarea', async () => {
     const component = html `<w-textarea label="Test label"></w-textarea>`;
     const page = render(component);

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

@@ -1,4 +1,4 @@
-import { WarpTextField } from './index.js';
+import { WarpTextField } from './textfield.js';
 export declare const TextField: import("@lit/react").ReactWebComponent<WarpTextField, {
     onBlur: string;
     onblur: string;

package/dist/packages/textfield/react.js

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

package/dist/packages/textfield/{index.d.ts → textfield.d.ts}

@@ -33,6 +33,7 @@ declare class WarpTextField extends WarpTextField_base {
     value: string;
     name: string;
     step: number;
+    autocomplete?: string;
     /**
      * Function to format value when the input field.
      *

package/dist/packages/textfield/{index.js → textfield.js}

@@ -1,4 +1,4 @@
-var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{throw TypeError(a)};var d=(a,e,r,o)=>{for(var l=o>1?void 0:o?ae(e,r):e,g=a.length-1,w;g>=0;g--)(w=a[g])&&(l=(o?w(e,r,l):w(l))||l);return o&&l&&te(e,r,l),l};var U=(a,e,r)=>e.has(a)||R("Cannot "+r);var H=(a,e,r)=>(U(a,e,"read from private field"),r?r.call(a):e.get(a)),D=(a,e,r)=>e.has(a)?R("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(a):e.set(a,r),G=(a,e,r,o)=>(U(a,e,"write to private field"),o?o.call(a,r):e.set(a,r),r);var j=function(){for(var a=[],e=arguments.length;e--;)a[e]=arguments[e];return a.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?j.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(l){return o[l]?l:""}):"")},[]).join(" ")};var n=function(a,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?a!==e||!o:!e.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(a):o?o.value:e.get(a)},h=function(a,e,r,o,l){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?a!==e||!l:!e.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?l.call(a,r):l?l.value=r:e.set(a,r),r};function T(a){var e,r,o,l,g,w,k,re,_,F,A,L,E,z,Y,f,X,O,Z;class oe extends a{constructor(...t){var i,b,p;super(...t),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),l.set(this,!1),g.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),F.set(this,()=>{h(this,l,!0,"f"),h(this,r,!0,"f"),n(this,e,"m",f).call(this)}),A.set(this,()=>{h(this,r,!1,"f"),n(this,e,"m",X).call(this,this.shouldFormValueUpdate()?n(this,_,"f"):""),!this.validity.valid&&n(this,l,"f")&&h(this,o,!0,"f");let m=n(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),L.set(this,()=>{var m;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,k,!1,"f")),h(this,l,!0,"f"),h(this,o,!0,"f"),n(this,e,"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:"")}),E.set(this,void 0),z.set(this,!1),Y.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,F,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",n(this,A,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",n(this,L,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(p=>p.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...t])]}static getValidator(t){return this.validators.find(i=>i.attribute===t)||null}static getValidators(t){return this.validators.filter(i=>{var b;if(i.attribute===t||!((b=i.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return n(this,e,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,b){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,t,i,b);let $=this.constructor.getValidators(t);$!=null&&$.length&&this.validationTarget&&this.setValue(n(this,_,"f"))}setValue(t){var i;h(this,o,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),h(this,_,t,"f");let p=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(p),n(this,e,"m",X).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),n(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(n(this,Y,"f")))}formResetCallback(){var t,i;h(this,l,!1,"f"),h(this,o,!1,"f"),n(this,e,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,e,"m",f).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,l=new WeakMap,g=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,F=new WeakMap,A=new WeakMap,L=new WeakMap,E=new WeakMap,z=new WeakMap,Y=new WeakMap,e=new WeakSet,re=function(){let t=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let t=n(this,o,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,r,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},X=function(t){let i=this.constructor,b={},p=i.validators,m=[],$=p.some(u=>u.isValid instanceof Promise);n(this,z,"f")||(h(this,Y,new Promise(u=>{h(this,E,u,"f")}),"f"),h(this,z,!0,"f")),n(this,g,"f")&&(n(this,g,"f").abort(),h(this,w,n(this,g,"f"),"f"));let M=new AbortController;h(this,g,M,"f");let S,B=!1;p.length&&(p.forEach(u=>{let N=u.key||"customError",y=u.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(I=>{I!=null&&(b[N]=!I,S=n(this,e,"m",Z).call(this,u,t),n(this,e,"m",O).call(this,b,S))})):(b[N]=!y,this.validity[N]!==!y&&(B=!0),!y&&!S&&(S=n(this,e,"m",Z).call(this,u,t)))}),Promise.allSettled(m).then(()=>{var u;M!=null&&M.signal.aborted||(h(this,z,!1,"f"),(u=n(this,E,"f"))===null||u===void 0||u.call(this))}),(B||!$)&&n(this,e,"m",O).call(this,b,S))},O=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;h(this,k,!0,"f")}},Z=function(t,i){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,i):t.message},oe}import{html as P,LitElement as ee,nothing as se}from"lit";import{property as c,query as le}from"lit/decorators.js";import{classMap as de}from"lit/directives/class-map.js";import{ifDefined as v}from"lit/directives/if-defined.js";import{css as J}from"lit";var K=J`
+var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{throw TypeError(a)};var d=(a,e,r,o)=>{for(var l=o>1?void 0:o?ae(e,r):e,u=a.length-1,w;u>=0;u--)(w=a[u])&&(l=(o?w(e,r,l):w(l))||l);return o&&l&&te(e,r,l),l};var U=(a,e,r)=>e.has(a)||R("Cannot "+r);var H=(a,e,r)=>(U(a,e,"read from private field"),r?r.call(a):e.get(a)),D=(a,e,r)=>e.has(a)?R("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(a):e.set(a,r),G=(a,e,r,o)=>(U(a,e,"write to private field"),o?o.call(a,r):e.set(a,r),r);var j=function(){for(var a=[],e=arguments.length;e--;)a[e]=arguments[e];return a.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?j.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(l){return o[l]?l:""}):"")},[]).join(" ")};var n=function(a,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?a!==e||!o:!e.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(a):o?o.value:e.get(a)},h=function(a,e,r,o,l){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!l)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?a!==e||!l:!e.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?l.call(a,r):l?l.value=r:e.set(a,r),r};function J(a){var e,r,o,l,u,w,k,re,_,A,F,L,E,z,Y,f,X,O,Z;class oe extends a{constructor(...t){var i,b,p;super(...t),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),l.set(this,!1),u.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),A.set(this,()=>{h(this,l,!0,"f"),h(this,r,!0,"f"),n(this,e,"m",f).call(this)}),F.set(this,()=>{h(this,r,!1,"f"),n(this,e,"m",X).call(this,this.shouldFormValueUpdate()?n(this,_,"f"):""),!this.validity.valid&&n(this,l,"f")&&h(this,o,!0,"f");let m=n(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),L.set(this,()=>{var m;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,k,!1,"f")),h(this,l,!0,"f"),h(this,o,!0,"f"),n(this,e,"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:"")}),E.set(this,void 0),z.set(this,!1),Y.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,A,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",n(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",n(this,L,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(p=>p.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...t])]}static getValidator(t){return this.validators.find(i=>i.attribute===t)||null}static getValidators(t){return this.validators.filter(i=>{var b;if(i.attribute===t||!((b=i.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return n(this,e,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,b){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,t,i,b);let $=this.constructor.getValidators(t);$!=null&&$.length&&this.validationTarget&&this.setValue(n(this,_,"f"))}setValue(t){var i;h(this,o,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),h(this,_,t,"f");let p=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(p),n(this,e,"m",X).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),n(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(n(this,Y,"f")))}formResetCallback(){var t,i;h(this,l,!1,"f"),h(this,o,!1,"f"),n(this,e,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,e,"m",f).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,l=new WeakMap,u=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,A=new WeakMap,F=new WeakMap,L=new WeakMap,E=new WeakMap,z=new WeakMap,Y=new WeakMap,e=new WeakSet,re=function(){let t=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(i)},f=function(){if(this.hasAttribute("disabled"))return!1;let t=n(this,o,"f")||n(this,l,"f")&&!this.validity.valid&&!n(this,r,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},X=function(t){let i=this.constructor,b={},p=i.validators,m=[],$=p.some(v=>v.isValid instanceof Promise);n(this,z,"f")||(h(this,Y,new Promise(v=>{h(this,E,v,"f")}),"f"),h(this,z,!0,"f")),n(this,u,"f")&&(n(this,u,"f").abort(),h(this,w,n(this,u,"f"),"f"));let M=new AbortController;h(this,u,M,"f");let S,B=!1;p.length&&(p.forEach(v=>{let N=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(I=>{I!=null&&(b[N]=!I,S=n(this,e,"m",Z).call(this,v,t),n(this,e,"m",O).call(this,b,S))})):(b[N]=!y,this.validity[N]!==!y&&(B=!0),!y&&!S&&(S=n(this,e,"m",Z).call(this,v,t)))}),Promise.allSettled(m).then(()=>{var v;M!=null&&M.signal.aborted||(h(this,z,!1,"f"),(v=n(this,E,"f"))===null||v===void 0||v.call(this))}),(B||!$)&&n(this,e,"m",O).call(this,b,S))},O=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;h(this,k,!0,"f")}},Z=function(t,i){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,i):t.message},oe}import{html as P,LitElement as ee,nothing as se}from"lit";import{property as c,query as le}from"lit/decorators.js";import{classMap as de}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{css as K}from"lit";var Q=K`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
   svg {
     pointer-events: none;
   }
-`,ve=J`*, :before, :after {
+`,ve=K`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
                     display: none
                 }
             }
-        `;import{css as ie}from"lit";var Q=ie`
+        `;import{css as ie}from"lit";var T=ie`
   .w-textfield {
     --_input-padding-top: 12px;
     --_input-padding-left: 8px;
@@ -2489,7 +2489,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
     text-overflow: ellipsis;
     z-index: 1;
   }
-`;import{css as ne}from"lit";var W=ne`*,: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]"},ce={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},q={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},V,s=class extends T(ee){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1;D(this,V,null)}updated(r){r.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}firstUpdated(r){G(this,V,this.value)}resetFormControl(){this.value=H(this,V)}get _inputstyles(){return j([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return j([q.base,this.invalid?q.colorInvalid:q.color])}get _label(){if(this.label)return P`<label for="${this._id}" class=${ce.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(r){let{name:o,value:l}=r.currentTarget;this.value=l;let g=new CustomEvent(r.type,{detail:{name:o,value:l,target:r.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 P`
+`;import{css as ne}from"lit";var W=ne`*,: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]"},ce={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},q={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},V,s=class extends J(ee){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1;D(this,V,null)}updated(r){r.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}firstUpdated(r){G(this,V,this.value)}resetFormControl(){this.value=H(this,V)}get _inputstyles(){return j([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return j([q.base,this.invalid?q.colorInvalid:q.color])}get _label(){if(this.label)return P`<label for="${this._id}" class=${ce.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(r){let{name:o,value:l}=r.currentTarget;this.value=l;let u=new CustomEvent(r.type,{detail:{name:o,value:l,target:r.target}});this.dispatchEvent(u)}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 P`
       ${this._label}
       <div
         class="${de({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">
@@ -2499,23 +2499,24 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
           <input
             class="${this._inputstyles}"
             type="${this.type}"
-            min="${v(this.min)}"
-            max="${v(this.max)}"
-            size="${v(this.size)}"
-            minlength="${v(this.minLength)}"
-            maxlength="${v(this.maxLength)}"
-            name="${v(this.name)}"
-            pattern="${v(this.pattern)}"
-            placeholder="${v(this.placeholder)}"
+            min="${g(this.min)}"
+            max="${g(this.max)}"
+            size="${g(this.size)}"
+            minlength="${g(this.minLength)}"
+            maxlength="${g(this.maxLength)}"
+            name="${g(this.name)}"
+            pattern="${g(this.pattern)}"
+            placeholder="${g(this.placeholder)}"
             .value="${this.value||""}"
-            aria-describedby="${v(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
-            aria-errormessage="${v(this._error)}"
-            aria-invalid="${v(this.invalid)}"
+            aria-describedby="${g(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
+            aria-errormessage="${g(this._error)}"
+            aria-invalid="${g(this.invalid)}"
             id="${this._id}"
             ?disabled="${this.disabled}"
             ?readonly="${this.readonly||this.readOnly}"
             ?required="${this.required}"
-            step="${v(this.step)}"
+            autocomplete="${g(this.autocomplete)}"
+            step="${g(this.step)}"
             @blur="${this.handler}"
             @change="${this.handler}"
             @input="${this.handler}"
@@ -2525,5 +2526,5 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
       </div>
       <span class="sr-only" id="aria-description">${this.ariaDescription}</span>
       ${this.helpText&&P`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`}
-    `}};V=new WeakMap,s.shadowRootOptions={...ee.shadowRootOptions,delegatesFocus:!0},s.styles=[K,W,Q],d([c({type:Boolean,reflect:!0})],s.prototype,"disabled",2),d([c({type:Boolean,reflect:!0})],s.prototype,"invalid",2),d([c({type:String,reflect:!0})],s.prototype,"id",2),d([c({type:String,reflect:!0})],s.prototype,"label",2),d([c({type:String,reflect:!0,attribute:"help-text"})],s.prototype,"helpText",2),d([c({type:String,reflect:!0})],s.prototype,"size",2),d([c({type:Number,reflect:!0})],s.prototype,"max",2),d([c({type:Number,reflect:!0})],s.prototype,"min",2),d([c({type:Number,reflect:!0,attribute:"min-length"})],s.prototype,"minLength",2),d([c({type:Number,reflect:!0,attribute:"max-length"})],s.prototype,"maxLength",2),d([c({type:String,reflect:!0})],s.prototype,"pattern",2),d([c({type:String,reflect:!0})],s.prototype,"placeholder",2),d([c({type:Boolean,reflect:!0,attribute:"read-only"})],s.prototype,"readOnly",2),d([c({type:Boolean,reflect:!0})],s.prototype,"readonly",2),d([c({type:Boolean,reflect:!0})],s.prototype,"required",2),d([c({type:String,reflect:!0})],s.prototype,"type",2),d([c({type:String,reflect:!0})],s.prototype,"value",2),d([c({type:String,reflect:!0})],s.prototype,"name",2),d([c({type:Number,reflect:!0})],s.prototype,"step",2),d([c({attribute:!1})],s.prototype,"formatter",2),d([le(".w-textfield__mask")],s.prototype,"mask",2),d([c({type:Boolean})],s.prototype,"_hasPrefix",2),d([c({type:Boolean})],s.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",s);export{s as WarpTextField};
-//# sourceMappingURL=index.js.map
+    `}};V=new WeakMap,s.shadowRootOptions={...ee.shadowRootOptions,delegatesFocus:!0},s.styles=[Q,W,T],d([c({type:Boolean,reflect:!0})],s.prototype,"disabled",2),d([c({type:Boolean,reflect:!0})],s.prototype,"invalid",2),d([c({type:String,reflect:!0})],s.prototype,"id",2),d([c({type:String,reflect:!0})],s.prototype,"label",2),d([c({type:String,reflect:!0,attribute:"help-text"})],s.prototype,"helpText",2),d([c({type:String,reflect:!0})],s.prototype,"size",2),d([c({type:Number,reflect:!0})],s.prototype,"max",2),d([c({type:Number,reflect:!0})],s.prototype,"min",2),d([c({type:Number,reflect:!0,attribute:"min-length"})],s.prototype,"minLength",2),d([c({type:Number,reflect:!0,attribute:"max-length"})],s.prototype,"maxLength",2),d([c({type:String,reflect:!0})],s.prototype,"pattern",2),d([c({type:String,reflect:!0})],s.prototype,"placeholder",2),d([c({type:Boolean,reflect:!0,attribute:"read-only"})],s.prototype,"readOnly",2),d([c({type:Boolean,reflect:!0})],s.prototype,"readonly",2),d([c({type:Boolean,reflect:!0})],s.prototype,"required",2),d([c({type:String,reflect:!0})],s.prototype,"type",2),d([c({type:String,reflect:!0})],s.prototype,"value",2),d([c({type:String,reflect:!0})],s.prototype,"name",2),d([c({type:Number,reflect:!0})],s.prototype,"step",2),d([c({type:String,reflect:!0})],s.prototype,"autocomplete",2),d([c({attribute:!1})],s.prototype,"formatter",2),d([le(".w-textfield__mask")],s.prototype,"mask",2),d([c({type:Boolean})],s.prototype,"_hasPrefix",2),d([c({type:Boolean})],s.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",s);export{s as WarpTextField};
+//# sourceMappingURL=textfield.js.map