@spectrum-web-components/number-field - npm Package Compare versions

Comparing version 0.40.4 to 0.40.5

custom-elements.json

@@ -563,3 +563,11 @@ {
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "_event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
             },
@@ -566,0 +574,0 @@ {

package.json

 {
     "name": "@spectrum-web-components/number-field",
-    "version": "0.40.4",
+    "version": "0.40.5",
     "publishConfig": {
@@ -61,13 +61,13 @@ "access": "public"
         "@internationalized/number": "^3.1.0",
-        "@spectrum-web-components/base": "^0.40.4",
-        "@spectrum-web-components/icon": "^0.40.4",
-        "@spectrum-web-components/icons-ui": "^0.40.4",
-        "@spectrum-web-components/infield-button": "^0.40.4",
-        "@spectrum-web-components/reactive-controllers": "^0.40.4",
-        "@spectrum-web-components/shared": "^0.40.4",
-        "@spectrum-web-components/textfield": "^0.40.4"
+        "@spectrum-web-components/base": "^0.40.5",
+        "@spectrum-web-components/icon": "^0.40.5",
+        "@spectrum-web-components/icons-ui": "^0.40.5",
+        "@spectrum-web-components/infield-button": "^0.40.5",
+        "@spectrum-web-components/reactive-controllers": "^0.40.5",
+        "@spectrum-web-components/shared": "^0.40.5",
+        "@spectrum-web-components/textfield": "^0.40.5"
     },
     "devDependencies": {
         "@formatjs/intl-numberformat": "^8.3.5",
-        "@spectrum-css/stepper": "^5.0.7"
+        "@spectrum-css/stepper": "^5.1.0"
     },
@@ -80,3 +80,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "e7bca020d0da71c4d92e95044bf58780d2e8e603"
+    "gitHead": "2e0006478841b07af63c19a0167a136bf724d064"
 }

src/number-field.css.dev.js

@@ -53,8 +53,4 @@ "use strict";
 --mod-stepper-border-color-invalid,var(--spectrum-stepper-border-color-invalid)
-);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
-)}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
 --mod-stepper-border-color-focus-invalid,var(--spectrum-stepper-border-color-focus-invalid)
-)}:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
 )}:host([invalid]) #textfield.focus-visible,:host([invalid][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -68,11 +64,3 @@ --mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-stepper-border-color-keyboard-focus-invalid)
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
-)
-)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
@@ -85,10 +73,2 @@ --mod-stepper-buttons-border-color-focus,var(--spectrum-stepper-buttons-border-color-focus)
 )
-)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
-)
-)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -140,14 +120,6 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-width,var(--spectrum-stepper-border-width)
-);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
 --mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
 )
-)}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}:host([quiet][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -161,2 +133,30 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 )
+)}@media (hover:hover){:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
+)}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
+)
+)}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
 )}:host([quiet][keyboard-focused]:hover) #textfield{--mod-infield-button-border-color:var(
@@ -166,3 +166,3 @@ --highcontrast-stepper-border-color-hover,var(
 )
-)}#textfield:before{content:""}.buttons{background-color:var(
+)}}#textfield:before{content:""}.buttons{background-color:var(
 --highcontrast-stepper-buttons-background-color,var(
@@ -169,0 +169,0 @@ --mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)

src/number-field.css.js

@@ -51,8 +51,4 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 --mod-stepper-border-color-invalid,var(--spectrum-stepper-border-color-invalid)
-);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
-)}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
 --mod-stepper-border-color-focus-invalid,var(--spectrum-stepper-border-color-focus-invalid)
-)}:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
 )}:host([invalid]) #textfield.focus-visible,:host([invalid][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -66,11 +62,3 @@ --mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-stepper-border-color-keyboard-focus-invalid)
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
-)
-)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
@@ -83,10 +71,2 @@ --mod-stepper-buttons-border-color-focus,var(--spectrum-stepper-buttons-border-color-focus)
 )
-)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
-)
-)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -138,14 +118,6 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-width,var(--spectrum-stepper-border-width)
-);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
 --mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
 )
-)}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}:host([quiet][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -159,2 +131,30 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 )
+)}@media (hover:hover){:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
+)}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
+)
+)}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
 )}:host([quiet][keyboard-focused]:hover) #textfield{--mod-infield-button-border-color:var(
@@ -164,3 +164,3 @@ --highcontrast-stepper-border-color-hover,var(
 )
-)}#textfield:before{content:""}.buttons{background-color:var(
+)}}#textfield:before{content:""}.buttons{background-color:var(
 --highcontrast-stepper-buttons-background-color,var(
@@ -167,0 +167,0 @@ --mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)

src/NumberField.d.ts

@@ -83,3 +83,3 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     protected onFocus(): void;
-    protected onBlur(): void;
+    protected onBlur(_event: FocusEvent): void;
     private handleFocusin;
@@ -86,0 +86,0 @@ private handleFocusout;

src/NumberField.dev.js

@@ -280,4 +280,4 @@ "use strict";
   }
-  onBlur() {
-    super.onBlur();
+  onBlur(_event) {
+    super.onBlur(_event);
     this.keyboardFocused = !this.readonly && false;
@@ -284,0 +284,0 @@ this.removeEventListener("wheel", this.onScroll);

src/NumberField.js

@@ -17,3 +17,3 @@ "use strict";var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(a,l,e,t)=>{for(var i=t>1?void 0:t?y(l,e):l,s=a.length-1,r;s>=0;s--)(r=a[s])&&(i=(t?r(l,e,i):r(i))||i);return t&&i&&g(l,e,i),i};import{html as h,nothing as C}from"@spectrum-web-components/base";import{property as o,query as E}from"@spectrum-web-components/base/src/decorators.js";import{LanguageResolutionController as P,languageResolverUpdatedSymbol as _}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{streamingListener as F}from"@spectrum-web-components/base/src/streaming-listener.js";import{NumberFormatter as c,NumberParser as f}from"@internationalized/number";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/infield-button/sp-infield-button.js";import{isAndroid as V,isIPhone as v}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as w}from"@spectrum-web-components/textfield";import x from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import I from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,indeterminatePlaceholder="-",remapMultiByteCharacters={"\uFF11":"1","\uFF12":"2","\uFF13":"3","\uFF14":"4","\uFF15":"5","\uFF16":"6","\uFF17":"7","\uFF18":"8","\uFF19":"9","\uFF10":"0","\u3001":",","\uFF0C":",","\u3002":".","\uFF0E":".","\uFF05":"%","\uFF0B":"+",\u30FC:"-"};const b={s:a=>h`
         ></sp-icon-chevron200>
-    `};export class NumberField extends w{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.changeCount=0;this.languageResolver=new P(this);this.wasIndeterminate=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,I,x]}set value(e){const t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;const i=this._value;this._value=t,this.requestUpdate("value",i)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){this.value=e,!(typeof this.lastCommitedValue=="undefined"||this.lastCommitedValue===this.value)&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.value)}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return isNaN(this.value)?"":this.numberFormatter.format(this.value)+(this.focused?"":this._forcedUnit)}convertValueToNumber(e){var t;if(v()&&this.inputElement.inputMode==="decimal"){const i=this.numberFormatter.formatToParts(1000.1),s=e.split("").find(u=>u===","||u==="."),r=(t=i.find(u=>u.type==="decimal"))==null?void 0:t.value;s&&r&&(e=e.replace(s,r))}return this.numberParser.parse(e)}get _step(){var e;return typeof this.step!="undefined"?this.step:((e=this.formatOptions)==null?void 0:e.style)==="percent"?.01:1}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=s=>{s.clientX>=t.x&&s.clientY>=t.y&&s.clientX<=t.x+t.width&&s.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):s.clientX>=i.x&&s.clientY>=i.y&&s.clientX<=i.x+i.width&&s.clientY<=i.y+i.height&&(this.change=r=>this.decrement(r.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1,this.setValue()}doNextChange(e){return this.changeCount+=1,this.changeCount%FRAMES_PER_CHANGE===0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;const t=typeof this.min!="undefined"?this.min:0;let i=this.value;i+=e*this._step,isNaN(this.value)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=i.toString(),this.inputElement.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();break}}onScroll(e){e.preventDefault(),this.managedInput=!0;const t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},CHANGE_DEBOUNCE_MS)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener("wheel",this.onScroll,{passive:!1})}onBlur(){super.onBlur(),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener("wheel",this.onScroll)}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){const e=this.convertValueToNumber(this.inputValue);if(this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,isNaN(e))){this.indeterminate=!0;return}this.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInput(e){var m;if(this.isComposing){e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,""));const{value:t,selectionStart:i}=this.inputElement,s=t.split("").map(d=>remapMultiByteCharacters[d]||d).join("");if(this.numberParser.isValidPartialNumber(s)){this.lastCommitedValue=(m=this.lastCommitedValue)!=null?m:this.value;const d=this.convertValueToNumber(s);!s&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(d)),this._trackingValue=s,this.inputElement.value=s,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const r=s.length,u=this._trackingValue.length,p=(i||r)-(r-u);this.inputElement.setSelectionRange(p,p)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,s=(e-i)%this.step;if(s===0||(Math.round(s/this.step)===1?e+=this.step-s:e-=s),typeof this.max!="undefined")for(;e>this.max;)e-=this.step}return e*=t,e}get displayValue(){const e=this.focused?"":indeterminatePlaceholder;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberFormatterFocused=new c(this.languageResolver.language,s);try{this._numberFormatter=new c(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberParserFocused=new f(this.languageResolver.language,s);try{this._numberParser=new f(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",h`
+    `};export class NumberField extends w{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.changeCount=0;this.languageResolver=new P(this);this.wasIndeterminate=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,I,x]}set value(e){const t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;const i=this._value;this._value=t,this.requestUpdate("value",i)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){this.value=e,!(typeof this.lastCommitedValue=="undefined"||this.lastCommitedValue===this.value)&&(this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.lastCommitedValue=this.value)}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return isNaN(this.value)?"":this.numberFormatter.format(this.value)+(this.focused?"":this._forcedUnit)}convertValueToNumber(e){var t;if(v()&&this.inputElement.inputMode==="decimal"){const i=this.numberFormatter.formatToParts(1000.1),s=e.split("").find(u=>u===","||u==="."),r=(t=i.find(u=>u.type==="decimal"))==null?void 0:t.value;s&&r&&(e=e.replace(s,r))}return this.numberParser.parse(e)}get _step(){var e;return typeof this.step!="undefined"?this.step:((e=this.formatOptions)==null?void 0:e.style)==="percent"?.01:1}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=s=>{s.clientX>=t.x&&s.clientY>=t.y&&s.clientX<=t.x+t.width&&s.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):s.clientX>=i.x&&s.clientY>=i.y&&s.clientX<=i.x+i.width&&s.clientY<=i.y+i.height&&(this.change=r=>this.decrement(r.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1,this.setValue()}doNextChange(e){return this.changeCount+=1,this.changeCount%FRAMES_PER_CHANGE===0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;const t=typeof this.min!="undefined"?this.min:0;let i=this.value;i+=e*this._step,isNaN(this.value)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=i.toString(),this.inputElement.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();break}}onScroll(e){e.preventDefault(),this.managedInput=!0;const t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},CHANGE_DEBOUNCE_MS)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener("wheel",this.onScroll,{passive:!1})}onBlur(e){super.onBlur(e),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener("wheel",this.onScroll)}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){const e=this.convertValueToNumber(this.inputValue);if(this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,isNaN(e))){this.indeterminate=!0;return}this.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInput(e){var m;if(this.isComposing){e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,""));const{value:t,selectionStart:i}=this.inputElement,s=t.split("").map(d=>remapMultiByteCharacters[d]||d).join("");if(this.numberParser.isValidPartialNumber(s)){this.lastCommitedValue=(m=this.lastCommitedValue)!=null?m:this.value;const d=this.convertValueToNumber(s);!s&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(d)),this._trackingValue=s,this.inputElement.value=s,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const r=s.length,u=this._trackingValue.length,p=(i||r)-(r-u);this.inputElement.setSelectionRange(p,p)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,s=(e-i)%this.step;if(s===0||(Math.round(s/this.step)===1?e+=this.step-s:e-=s),typeof this.max!="undefined")for(;e>this.max;)e-=this.step}return e*=t,e}get displayValue(){const e=this.focused?"":indeterminatePlaceholder;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberFormatterFocused=new c(this.languageResolver.language,s);try{this._numberFormatter=new c(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberParserFocused=new f(this.languageResolver.language,s);try{this._numberParser=new f(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",h`
             ${super.renderField()}
@@ -20,0 +20,0 @@ ${this.hideStepper?C:h`

src/spectrum-number-field.css.dev.js

@@ -53,8 +53,4 @@ "use strict";
 --mod-stepper-border-color-invalid,var(--spectrum-stepper-border-color-invalid)
-);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
-)}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
 --mod-stepper-border-color-focus-invalid,var(--spectrum-stepper-border-color-focus-invalid)
-)}:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
 )}:host([invalid]) #textfield.focus-visible,:host([invalid][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -68,11 +64,3 @@ --mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-stepper-border-color-keyboard-focus-invalid)
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
-)
-)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
@@ -85,10 +73,2 @@ --mod-stepper-buttons-border-color-focus,var(--spectrum-stepper-buttons-border-color-focus)
 )
-)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
-)
-)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -140,14 +120,6 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-width,var(--spectrum-stepper-border-width)
-);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
 --mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
 )
-)}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}:host([quiet][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -161,2 +133,30 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 )
+)}@media (hover:hover){:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
+)}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
+)
+)}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
 )}:host([quiet][keyboard-focused]:hover) #textfield{--mod-infield-button-border-color:var(
@@ -166,3 +166,3 @@ --highcontrast-stepper-border-color-hover,var(
 )
-)}#textfield:before{content:""}.buttons{background-color:var(
+)}}#textfield:before{content:""}.buttons{background-color:var(
 --highcontrast-stepper-buttons-background-color,var(
@@ -169,0 +169,0 @@ --mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)

src/spectrum-number-field.css.js

@@ -51,8 +51,4 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 --mod-stepper-border-color-invalid,var(--spectrum-stepper-border-color-invalid)
-);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
-)}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-textfield-icon-spacing-inline-start-invalid:0}:host([invalid]) #textfield:focus,:host([invalid][focused]) #textfield{--mod-infield-button-border-color:var(
 --mod-stepper-border-color-focus-invalid,var(--spectrum-stepper-border-color-focus-invalid)
-)}:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
 )}:host([invalid]) #textfield.focus-visible,:host([invalid][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -66,11 +62,3 @@ --mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-stepper-border-color-keyboard-focus-invalid)
 --highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color))
-)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
-)
-)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
+)}#textfield .input{border-end-end-radius:0;border-inline-end-width:0;border-start-end-radius:0}#textfield:focus,:host([focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
@@ -83,10 +71,2 @@ --mod-stepper-buttons-border-color-focus,var(--spectrum-stepper-buttons-border-color-focus)
 )
-)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
-)
-)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}#textfield.focus-visible,:host([keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -138,14 +118,6 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 --mod-stepper-border-width,var(--spectrum-stepper-border-width)
-);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-hover,var(
---mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
-)
-)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
+);--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;padding:0}:host([quiet]) #textfield .buttons,:host([quiet]) #textfield .input{background-color:#0000}:host([quiet]) #textfield:focus,:host([quiet][focused]) #textfield{--mod-infield-button-border-color:var(
 --highcontrast-stepper-border-color-focus,var(
 --mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)
 )
-)}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
---highcontrast-stepper-border-color-focus-hover,var(
---mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
-)
 )}:host([quiet][keyboard-focused]) #textfield{--mod-infield-button-border-color:var(
@@ -159,2 +131,30 @@ --highcontrast-stepper-border-color-keyboard-focus,var(
 )
+)}@media (hover:hover){:host([invalid]:hover) #textfield:focus,:host([invalid][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)
+)}:host(:hover) #textfield:focus .buttons,:host(:hover) #textfield:focus .input,:host([focused]:hover) #textfield .buttons,:host([focused]:hover) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
+)}:host([invalid]:hover) #textfield{--mod-infield-button-border-color:var(
+--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)
+)}:host(:hover:not([disabled])) #textfield .buttons,:host(:hover:not([disabled])) #textfield .input{border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host(:hover) #textfield:focus,:host([focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover)
+)
+)}:host(:hover) #textfield:not(.is-disabled,.is-invalid){--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-hover,var(
+--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)
+)
+)}:host([quiet]:hover:not([disabled])) #textfield .buttons{background-color:#0000}:host([quiet]:hover) #textfield:focus,:host([quiet][focused]:hover) #textfield{--mod-infield-button-border-color:var(
+--highcontrast-stepper-border-color-focus-hover,var(
+--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)
+)
 )}:host([quiet][keyboard-focused]:hover) #textfield{--mod-infield-button-border-color:var(
@@ -164,3 +164,3 @@ --highcontrast-stepper-border-color-hover,var(
 )
-)}#textfield:before{content:""}.buttons{background-color:var(
+)}}#textfield:before{content:""}.buttons{background-color:var(
 --highcontrast-stepper-buttons-background-color,var(
@@ -167,0 +167,0 @@ --mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

567362

increased by0.09%

Lines of code

5483

increased by0.15%

Published versions last two months

6

increased by20%

Dependency changes

• + Added@internationalized/number@3.5.3(transitive)

• - Removed@internationalized/number@3.5.4(transitive)

• Updated@spectrum-web-components/base@^0.40.5

• Updated@spectrum-web-components/icon@^0.40.5

• Updated@spectrum-web-components/icons-ui@^0.40.5

• Updated@spectrum-web-components/infield-button@^0.40.5

• Updated@spectrum-web-components/reactive-controllers@^0.40.5

• Updated@spectrum-web-components/shared@^0.40.5

• Updated@spectrum-web-components/textfield@^0.40.5