@warp-ds/elements 2.9.0-next.5 → 2.9.0-next.6

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

@@ -3,13 +3,21 @@ import React from 'react';
 import { DatePicker } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "value" | "input" | "form" | "label" | "name" | "locale" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onBlur" | "onChange" | "onInput" | "month" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
+        onBlur?: (e: Event) => void;
+        onblur?: (e: Event) => void;
+        onInput?: (e: Event) => void;
+        oninput?: (e: Event) => void;
     } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./datepicker").WarpDatepicker, {
         onChange: string;
         onchange: string;
+        onBlur: string;
+        onblur: string;
+        onInput: string;
+        oninput: string;
     }>;
 };
 export default _default;

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

@@ -2,4 +2,8 @@ import { WarpDatepicker } from './datepicker.js';
 export declare const DatePicker: import("@lit/react").ReactWebComponent<WarpDatepicker, {
     onChange: string;
     onchange: string;
+    onBlur: string;
+    onblur: string;
+    onInput: string;
+    oninput: string;
 }>;

package/dist/packages/datepicker/react.js

@@ -11,5 +11,9 @@ export const DatePicker = createComponent({
     events: {
         onChange: 'change',
         onchange: 'change',
+        onBlur: 'blur',
+        onblur: 'blur',
+        onInput: 'input',
+        oninput: 'input',
     },
 });

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

@@ -1,12 +1,14 @@
 import { LitElement, PropertyValues } from 'lit';
 declare const WarpTextField_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
- * A single line text input element.
+ * A single-line input component used for entering and editing textual or numeric data.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ * @slot suffix - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
+ * @slot prefix - Use with `<w-affix>` to include a prefix, for example a search icon.
  */
 declare class WarpTextField extends WarpTextField_base {
     #private;
+    /** @internal */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -14,129 +16,124 @@ declare class WarpTextField extends WarpTextField_base {
         slotAssignment?: SlotAssignmentMode;
     };
     /**
-     * @summary
-     * @description
+     * Keep in mind that using disabled in its current form is an anti-pattern.
+     *
+     * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
+     *
+     * Please consider more informative alternatives before choosing to use disabled on an element.
+     *
+     * @summary Makes the element not focusable and hides it from form submits
      */
     disabled: boolean;
     /**
-     * @summary
-     * @description
+     * Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.
+     *
+     * @summary Mark the form field as invalid.
      */
     invalid: boolean;
     /**
-     * @summary
-     * @description
-     */
-    id: string;
-    /**
-     * @summary
-     * @description
+     * Either a `label` or an `aria-label` must be provided.
      */
     label: string;
     /**
-     * @summary
-     * @description
+     * Use in combination with `invalid` to show as a validation error message,
+     * or on its own to show a help text.
+     *
+     * @summary Description shown below the input field
      */
     helpText: string;
     /**
-     * @summary
-     * @description
+     * Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
      */
     size: string;
     /**
-     * @summary
-     * @description
+     * Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
      */
     max: number;
     /**
-     * @summary
-     * @description
+     * Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
      */
     min: number;
     /**
-     * @summary
-     * @description
+     * @deprecated Use the native `minlength` attribute
      */
     minLength: number;
     /**
-     * @summary
-     * @description
+     * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.
+     */
+    minlength: number;
+    /**
+     * @deprecated Use the native `maxlength` attribute
      */
     maxLength: number;
     /**
-     * @summary
-     * @description
+     * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.
+     */
+    maxlength: number;
+    /**
+     * Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)
      */
     pattern: string;
     /**
-     * @summary
-     * @description
+     * Set a text that is shown in the textfield when it doesn't have a value.
+     *
+     * Placeholder text should not be used as a substitute for labeling the element with a visible label.
+     *
+     * @summary Shown in the textfield when it doesn't have a value
      */
     placeholder: string;
-    /** @deprecated Use the native readonly attribute instead.
-     * @summary
-     * @description
+    /**
+     * @deprecated Use the native readonly attribute instead.
      */
     readOnly: boolean;
     /**
-     * @summary
-     * @description
+     * Whether the input can be selected but not changed by the user.
      */
     readonly: boolean;
     /**
-     * @summary
-     * @description
+     * Whether user input is required on the input before form submission.
      */
     required: boolean;
     /**
-     * @summary
-     * @description
+     * The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
      */
     type: string;
     /**
-     * @summary
-     * @description
+     * Lets you set the current value.
      */
     value: string;
     /**
-     * @summary
-     * @description
+     * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.
      */
     name: string;
     /**
-     * @summary
-     * @description
+     * When used with `number` this attribute forces inputs to be a whole number of `step`.
+     *
+     * For example with a `step="5"` only values that divide evenly on 5 are allowed.
+     * Using arrow up and down in the input field increments and decrements by 5.
+     *
+     * @summary Forces `number` inputs to be a whole number of `step`
      */
     step: number;
     /**
-     * @summary
-     * @description
+     * A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
      */
     autocomplete?: 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
+     * similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html).
      *
-     * https://css-tricks.com/input-masking/
-     * https://filamentgroup.github.io/politespace/demo/demo.html
-     
-     * @summary
-     * @description
+     * @summary Function to format value when the input field
+     * @link https://css-tricks.com/input-masking/
     */
     formatter: (value: string) => string;
     /** @internal */
     mask: HTMLDivElement;
-    /** @internal
-     * @summary
-     * @description
-     */
+    /** @internal */
     _hasPrefix: boolean;
-    /** @internal
-     * @summary
-     * @description
-     */
+    /** @internal */
     _hasSuffix: boolean;
     updated(changedProperties: PropertyValues<this>): void;
     firstUpdated(changedProps: Map<string, unknown>): void;

package/dist/packages/textfield/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,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 I=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(N=>{N!=null&&(b[I]=!N,S=n(this,e,"m",Z).call(this,v,t),n(this,e,"m",O).call(this,b,S))})):(b[I]=!y,this.validity[I]!==!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`
+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 s=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,N,O;class oe extends a{constructor(...t){var n,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"),s(this,e,"m",f).call(this)}),F.set(this,()=>{h(this,r,!1,"f"),s(this,e,"m",X).call(this,this.shouldFormValueUpdate()?s(this,_,"f"):""),!this.validity.valid&&s(this,l,"f")&&h(this,o,!0,"f");let m=s(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),L.set(this,()=>{var m;s(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"),s(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()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",s(this,A,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",s(this,F,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",s(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(),n=super.observedAttributes||[];return[...new Set([...n,...t])]}static getValidator(t){return this.validators.find(n=>n.attribute===t)||null}static getValidators(t){return this.validators.filter(n=>{var b;if(n.attribute===t||!((b=n.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return s(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,n,b){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,t,n,b);let $=this.constructor.getValidators(t);$!=null&&$.length&&this.validationTarget&&this.setValue(s(this,_,"f"))}setValue(t){var n;h(this,o,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),h(this,_,t,"f");let p=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(p),s(this,e,"m",X).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),s(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(s(this,Y,"f")))}formResetCallback(){var t,n;h(this,l,!1,"f"),h(this,o,!1,"f"),s(this,e,"m",f).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,s(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(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(n)},f=function(){if(this.hasAttribute("disabled"))return!1;let t=s(this,o,"f")||s(this,l,"f")&&!this.validity.valid&&!s(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 n=this.constructor,b={},p=n.validators,m=[],$=p.some(v=>v.isValid instanceof Promise);s(this,z,"f")||(h(this,Y,new Promise(v=>{h(this,E,v,"f")}),"f"),h(this,z,!0,"f")),s(this,u,"f")&&(s(this,u,"f").abort(),h(this,w,s(this,u,"f"),"f"));let M=new AbortController;h(this,u,M,"f");let S,B=!1;p.length&&(p.forEach(v=>{let Z=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(m.push(y),y.then(I=>{I!=null&&(b[Z]=!I,S=s(this,e,"m",O).call(this,v,t),s(this,e,"m",N).call(this,b,S))})):(b[Z]=!y,this.validity[Z]!==!y&&(B=!0),!y&&!S&&(S=s(this,e,"m",O).call(this,v,t)))}),Promise.allSettled(m).then(()=>{var v;M!=null&&M.signal.aborted||(h(this,z,!1,"f"),(v=s(this,E,"f"))===null||v===void 0||v.call(this))}),(B||!$)&&s(this,e,"m",N).call(this,b,S))},N=function(t,n){if(this.validationTarget)this.internals.setValidity(t,n,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(t,n),this.internals.validity.valid)return;h(this,k,!0,"f")}},O=function(t,n){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,n):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 {
@@ -2495,7 +2495,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 J(ee){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.readonly=!1;this.required=!1;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`
+`;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,i=class extends J(ee){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.readonly=!1;this.required=!1;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})}">
@@ -2507,8 +2507,8 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
             min="${g(this.min)}"
             max="${g(this.max)}"
             size="${g(this.size)}"
-            minlength="${g(this.minLength)}"
-            maxlength="${g(this.maxLength)}"
+            minlength="${g(this.minLength||this.minlength)}"
+            maxlength="${g(this.maxLength||this.maxlength)}"
             name="${g(this.name)}"
             pattern="${g(this.pattern)}"
             placeholder="${g(this.placeholder)}"
@@ -2532,5 +2532,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=[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};
+    `}};V=new WeakMap,i.shadowRootOptions={...ee.shadowRootOptions,delegatesFocus:!0},i.styles=[Q,W,T],d([c({type:Boolean,reflect:!0})],i.prototype,"disabled",2),d([c({type:Boolean,reflect:!0})],i.prototype,"invalid",2),d([c({type:String,reflect:!0})],i.prototype,"label",2),d([c({type:String,reflect:!0,attribute:"help-text"})],i.prototype,"helpText",2),d([c({type:String,reflect:!0})],i.prototype,"size",2),d([c({type:Number,reflect:!0})],i.prototype,"max",2),d([c({type:Number,reflect:!0})],i.prototype,"min",2),d([c({type:Number,reflect:!0,attribute:"min-length"})],i.prototype,"minLength",2),d([c({type:Number,reflect:!0})],i.prototype,"minlength",2),d([c({type:Number,reflect:!0,attribute:"max-length"})],i.prototype,"maxLength",2),d([c({type:Number,reflect:!0})],i.prototype,"maxlength",2),d([c({type:String,reflect:!0})],i.prototype,"pattern",2),d([c({type:String,reflect:!0})],i.prototype,"placeholder",2),d([c({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),d([c({type:Boolean,reflect:!0})],i.prototype,"readonly",2),d([c({type:Boolean,reflect:!0})],i.prototype,"required",2),d([c({type:String,reflect:!0})],i.prototype,"type",2),d([c({type:String,reflect:!0})],i.prototype,"value",2),d([c({type:String,reflect:!0})],i.prototype,"name",2),d([c({type:Number,reflect:!0})],i.prototype,"step",2),d([c({type:String,reflect:!0})],i.prototype,"autocomplete",2),d([c({attribute:!1})],i.prototype,"formatter",2),d([le(".w-textfield__mask")],i.prototype,"mask",2),d([c({type:Boolean})],i.prototype,"_hasPrefix",2),d([c({type:Boolean})],i.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",i);export{i as WarpTextField};
 //# sourceMappingURL=textfield.js.map