@warp-ds/elements 2.2.0-next.27 → 2.2.0-next.28

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import '../affix/index.js';
+import '../attention/index.js';
 import '../textfield/index.js';
 import './index.js';
 declare const meta: Meta;

package/dist/packages/slider/slider.stories.js

@@ -1,6 +1,7 @@
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 import { html } from 'lit';
 import '../affix/index.js';
+import '../attention/index.js';
 import '../textfield/index.js';
 import './index.js';
 const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
@@ -92,21 +93,14 @@ export const SuffixKilometers = {
 export const Marks = {
     args: {
         locale: 'nb',
-        suffix: 'km',
-        step: '25000',
-        markers: '25000',
+        step: '5',
+        markers: '5',
     },
-    render({ locale, suffix, markers, step }) {
+    render({ markers, step }) {
         return html `
-      <w-slider label="Distance" markers="${markers}" step="${step}" min="0" max="250000" suffix="${suffix}" data-testid="markers">
-        <w-slider-thumb slot="from" aria-label="From distance" name="from"></w-slider-thumb>
-        <w-slider-thumb slot="to" aria-label="To distance" name="to"></w-slider-thumb>
+      <w-slider label="Single" min="0" max="100" step="${step}" markers="${markers}">
+        <w-slider-thumb name="value"></w-slider-thumb>
       </w-slider>
-
-      <script type="module">
-        const markersSlider = document.querySelector('w-slider[data-testid="markers"]');
-        markersSlider.formatter = window.getNumberFormatter('${locale}').format;
-      </script>
     `;
     },
 };

package/dist/packages/slider/styles/w-slider-thumb.styles.js

@@ -17,6 +17,7 @@ export const wSliderThumbStyles = css `
     background-color: transparent;
     grid-area: slider;
     height: 44px; /* touch target */
+    margin-left: 0;
     pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
   }
 
@@ -26,14 +27,6 @@ export const wSliderThumbStyles = css `
     height: var(--w-slider-track-height);
   }
 
-  .w-slider-thumb__range:hover::-webkit-slider-thumb {
-    background: var(--w-s-color-background-primary-hover);
-  }
-
-  .w-slider-thumb__range:hover::-moz-range-thumb {
-    background: var(--w-s-color-background-primary-hover);
-  }
-
   /*
     Use anchor positioning to place the tooltip target in relation to the slider thumb.
     We use a polyfill to bring support to older Safari, Firefox at time of writing.
@@ -42,11 +35,12 @@ export const wSliderThumbStyles = css `
     anchor-name: --thumb;
 
     appearance: none;
+    cursor: pointer;
     background: var(--w-s-color-background-primary);
     border-radius: 50%;
     height: var(--w-slider-thumb-size);
     margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
-    pointer-events: auto;
+    pointer-events: initial;
     width: var(--w-slider-thumb-size);
     z-index: 1;
   }
@@ -55,6 +49,7 @@ export const wSliderThumbStyles = css `
     anchor-name: --thumb;
 
     appearance: none;
+    cursor: pointer;
     background: var(--w-s-color-background-primary);
     border-radius: 50%;
     border-color: transparent;
@@ -63,32 +58,54 @@ export const wSliderThumbStyles = css `
     pointer-events: initial;
     width: var(--w-slider-thumb-size);
     z-index: 1;
+
+    box-shadow: none;
   }
 
-  .w-slider-thumb__tooltip {
-    display: none;
-    position: absolute;
+  .w-slider-thumb__range:active::-webkit-slider-thumb,
+  .w-slider-thumb__range:hover::-webkit-slider-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
 
-    background-color: var(--w-s-color-background-inverted);
-    color: var(--w-s-color-text-inverted-static);
-    border-color: var(--w-s-color-background-inverted);
+  .w-slider-thumb__range:focus,
+  .w-slider-thumb__range:focus-visible {
+    outline: none;
+  }
 
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    z-index: 1;
+  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
 
-    position-anchor: --thumb;
+  .w-slider-thumb__range:active::-moz-range-thumb,
+  .w-slider-thumb__range:hover::-moz-range-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
 
-    bottom: calc(anchor(top) + 5px);
-    justify-self: anchor-center;
+  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
   }
 
-  .w-slider-thumb__tooltip--visible {
+  .w-slider-thumb__tooltip-target {
     display: block;
+    pointer-events: none;
+    position: absolute;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    width: 8px;
+    height: 8px;
+    position-anchor: --thumb;
+    position-area: center; /* Position the tooltip target right on the range thumb */
   }
 
+  /* Uncomment this to debug the invisible anchor target */
+  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
+
   .w-slider-thumb__from-marker,
   .w-slider-thumb__to-marker {
     margin-inline: 2px; /* visual alignment with input border, slider thumb */
@@ -117,8 +134,21 @@ export const wSliderThumbStyles = css `
     grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
   }
 
-  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb {
-    margin-left: calc(-1px * var(--thumb-offset) / 2);
+  :host([name='from']) .w-slider-thumb__range {
+    margin-left: var(--w-slider-thumb-size);
+  }
+
+  :host([name='to']) .w-slider-thumb__range {
+    margin-right: var(--w-slider-thumb-size);
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb,
+  :host([name='from']) .w-slider-thumb__tooltip-target {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
   }
 
   :host([name='to']) .w-slider-thumb__textfield {
@@ -126,7 +156,12 @@ export const wSliderThumbStyles = css `
     grid-column: 3 / 4;
   }
 
+  :host([name='to']) .w-slider-thumb__tooltip-target,
   :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
-    margin-left: calc(1px * var(--thumb-offset) / 2);
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
   }
 `;

package/dist/packages/slider/styles/w-slider.styles.js

@@ -27,10 +27,12 @@ export const wSliderStyles = css `
 
     /* The --min value can be non-zero, f. ex. choosing a year from 1950 to 2025. Normalize the values so we start at 0 and run to max - min. */
     --_value-range: calc(var(--max) - var(--min));
-    --_from-in-range: max(calc(var(--from) - var(--min)), 0);
+
+    /** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
+    --_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
 
     /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
-    --_to-in-range: min(calc(var(--to) - var(--min)), var(--_value-range));
+    --_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
 
     /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
@@ -63,17 +65,36 @@ export const wSliderStyles = css `
     grid-area: description;
   }
 
-  .w-slider__active-range {
+  .w-slider__range {
     align-self: center;
     background: var(--w-slider-track-background);
     border-radius: 4px;
+    height: var(--w-slider-track-active-height);
     position: absolute;
+    /* For range sliders to avoid overlapping the slider thumbs we transform them to
+    be visually to the left and right of their respective input[type="range"]. This
+    padding is here so the active-range element is the same width as the input fields. */
+    padding-inline-start: var(--active-range-inline-start-padding, 0);
+    padding-inline-end: var(--active-range-inline-end-padding, 0);
     top: var(--_range-top);
     left: 0;
     right: 0;
     grid-area: slider;
   }
 
+  .w-slider__active-range {
+    box-sizing: content-box;
+    background: var(--w-slider-track-active-background);
+    height: var(--w-slider-track-active-height);
+
+    border-start-start-radius: var(--active-range-border-radius, 0);
+    border-end-start-radius: var(--active-range-border-radius, 0);
+
+    margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
+    width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));
+    z-index: 1;
+  }
+
   .w-slider__markers {
     --_marker-height: 7px;
     --_marker-width: 1px;
@@ -83,9 +104,14 @@ export const wSliderStyles = css `
     /* Creates a linear gradient with --_marker-width wide markers
        followed by enough transparent that we can repeat the gradient
        along the X axis and have markers visible where we want them. */
-    background: linear-gradient(to right, var(--w-slider-marker-color) var(--_marker-width), rgba(0, 0, 0, 0) 1px) repeat-x;
+    background: linear-gradient(
+      to right,
+      var(--w-slider-marker-color) var(--_marker-width),
+      rgba(0, 0, 0, 0) 1px calc(100% - 1px),
+      var(--w-slider-marker-color) 100%
+    ) repeat-x;
     --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
-    background-size: calc(var(--_step-width-as-percent) * 1% - 0.1%) var(--_marker-height);
+    background-size: calc(var(--_step-width-as-percent) * 1%) var(--_marker-height);
 
     background-position: bottom 0 left 8px right 8px;
     position: absolute;
@@ -94,17 +120,7 @@ export const wSliderStyles = css `
     right: 1px;
     grid-area: slider;
     height: var(--_marker-height);
-  }
-
-  .w-slider__active-range::before {
-    background: var(--w-slider-track-active-background);
-    border-radius: 4px;
-    content: '';
-    display: block;
-    height: var(--w-slider-track-active-height);
-
-    margin-left: calc(var(--_blank-values-before) * 1%);
-    width: calc(var(--_filled-values) * 1%);
+    margin-inline: var(--w-slider-thumb-offset);
   }
 
   slot::slotted(w-slider-thumb) {

package/dist/packages/textfield/index.js

@@ -1,4 +1,4 @@
-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 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 {
@@ -2437,7 +2437,7 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
                     display: none
                 }
             }
-        `;import{css as W}from"lit";var H=W`
+        `;import{css as W}from"lit";var U=W`
   .w-textfield {
     --_input-padding-top: 12px;
     --_input-padding-left: 8px;
@@ -2462,6 +2462,15 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
     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;
@@ -2515,5 +2524,5 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
       </div>
       <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=[U,D,H],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,N as ccHelpText,ae as ccLabel,x as ccinput};
+    `}};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,N as ccHelpText,ae as ccLabel,x as ccinput};
 //# sourceMappingURL=index.js.map