@vonage/vivid 5.28.0 → 5.29.0

package/number-field/index.cjs

@@ -1,29 +1,31 @@
-const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/definition.cjs"),o=require("../bundled/enums.cjs"),s=require("../bundled/decorate.cjs"),c=require("../bundled/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),f=require("../bundled/delegates-aria.cjs"),p=require("../bundled/component-enum.cjs"),m=require("../bundled/form-associated.cjs"),h=require("../bundled/definition5.cjs"),g=require("../bundled/feedback-message.cjs"),_=require("../bundled/definition10.cjs"),v=require("../bundled/form-element.cjs"),y=require("../bundled/with-contextual-help.cjs"),b=require("../bundled/with-error-text.cjs"),x=require("../bundled/with-success-text.cjs"),S=require("../bundled/mixins.cjs"),C=require("../bundled/definition20.cjs"),w=require("../bundled/divider.cjs");var T=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}`,E=p.t([`fieldset`,`ghost`],`fieldset`),D={up:1,down:-1};function O(e,t){let n=parseFloat(e.value),r=isNaN(n)?e.min>0?e.min:e.max<0?e.max:e.min?0:t*e.step:n+t*e.step;e.value=Number(r.toFixed(12)).toString(),e._updatedValueAnnouncement=e.locale.numberField.updatedValueAnnouncement(e._presentationValue)}var k=e=>{let t=e.source;return{invalidCharacters:RegExp(`[^0-9\\-+e${t}]`,`g`),additionalDecimalSeparators:RegExp(`(?<=${t}.*)${t}`,`g`),trailingDecimalSeparator:RegExp(`${t}$`),decimalSeparator:e}},A=k(/\./),j=k(/,/),M=/^-?((\d*\.\d+)|(\d+))$/,N=class extends y.t(S.t(b.t(x.t(v.t(d.t(e.t(f.t(m.n(t.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue=``,this._updatedValueAnnouncement=``,this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(e,t){this.proxy.setAttribute(`step`,Number.isFinite(t)?t.toString():``)}maxChanged(e,t){this.max=Math.max(t,this.min??t),this.proxy.max=this.max.toString(),this.validate()}minChanged(e,t){this.min=Math.min(t,this.max??t),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(e){this.value=e.toString()}valueChanged(e,t){this.value=M.test(t)?t:``,t===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(e,this.value),e!==void 0&&!this.isUserInput&&(this.$emit(`input`),this.$emit(`change`)))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?j:A}#e(e){return e.replace(`.`,this.locale.common.useCommaAsDecimalSeparator?`,`:`.`)}#t(e){return e.replace(this._numberPatterns.invalidCharacters,``).replace(this._numberPatterns.additionalDecimalSeparators,``)}#n(e){let t=e.replace(this._numberPatterns.trailingDecimalSeparator,``).replace(this._numberPatterns.decimalSeparator,`.`);return M.test(t)?t:``}validate(){super.validate(this.control)}stepUp(){O(this,D.up)}stepDown(){O(this,D.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,`number`),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&t.M.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit(`select`)}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#n(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit(`change`)}handleKeyDown(e){switch(e.key){case l.i:return this.stepUp(),!1;case l.t:return this.stepDown(),!1}return!0}};s.t([t.m({attribute:`readonly`,mode:`boolean`})],N.prototype,`readOnly`,void 0),s.t([t.m({mode:`boolean`})],N.prototype,`autofocus`,void 0),s.t([t.m],N.prototype,`placeholder`,void 0),s.t([t.m],N.prototype,`list`,void 0),s.t([t.m({converter:t.h})],N.prototype,`maxlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`minlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`size`,void 0),s.t([t.m()],N.prototype,`scale`,void 0),s.t([t.m({converter:t.h})],N.prototype,`step`,void 0),s.t([t.m({converter:t.h})],N.prototype,`max`,void 0),s.t([t.m({converter:t.h})],N.prototype,`min`,void 0),s.t([t.A],N.prototype,`defaultSlottedNodes`,void 0),s.t([t.A],N.prototype,`_presentationValue`,void 0),s.t([t.A],N.prototype,`_updatedValueAnnouncement`,void 0),s.t([t.m({attribute:`increment-button-aria-label`})],N.prototype,`incrementButtonAriaLabel`,void 0),s.t([t.m({attribute:`decrement-button-aria-label`})],N.prototype,`decrementButtonAriaLabel`,void 0),s.t([t.m],N.prototype,`appearance`,void 0),s.t([t.m],N.prototype,`shape`,void 0),s.t([t.m],N.prototype,`autoComplete`,void 0);function P(){return t.p` <label for="control" class="label">
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/definition.cjs"),o=require("../bundled/enums.cjs"),s=require("../bundled/decorate.cjs"),c=require("../bundled/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),f=require("../bundled/delegates-aria.cjs"),p=require("../bundled/component-enum.cjs"),m=require("../bundled/form-associated.cjs"),h=require("../bundled/definition5.cjs"),g=require("../bundled/feedback-message.cjs"),_=require("../bundled/definition10.cjs"),v=require("../bundled/form-element.cjs"),y=require("../bundled/with-contextual-help.cjs"),b=require("../bundled/with-error-text.cjs"),x=require("../bundled/with-success-text.cjs"),S=require("../bundled/mixins.cjs"),C=require("../bundled/definition20.cjs"),w=require("../bundled/divider.cjs");var T=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.base.no-steppers{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}.base.no-steppers.size-condensed{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.control-buttons[hidden]{display:none}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}`,E=p.t([`fieldset`,`ghost`],`fieldset`),D={up:1,down:-1},O=1;function k(e,t){let n=e._numericStep,r=parseFloat(e.value),i=isNaN(r)?e.min>0?e.min:e.max<0?e.max:e.min?0:t*n:r+t*n;e.value=Number(i.toFixed(12)).toString(),e._updatedValueAnnouncement=e.locale.numberField.updatedValueAnnouncement(e._presentationValue)}var A={toView(e){return e===`any`?`any`:t.h.toView(e)},fromView(e){return typeof e==`string`&&e.trim().toLowerCase()===`any`?`any`:t.h.fromView(e)}},j=e=>{let t=e.source;return{invalidCharacters:RegExp(`[^0-9\\-+e${t}]`,`g`),additionalDecimalSeparators:RegExp(`(?<=${t}.*)${t}`,`g`),trailingDecimalSeparator:RegExp(`${t}$`),decimalSeparator:e}},M=j(/\./),N=j(/,/),P=/^-?((\d*\.\d+)|(\d+))$/,F=class extends y.t(S.t(b.t(x.t(v.t(d.t(e.t(f.t(m.n(t.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.readOnly=!1,this.autofocus=!1,this.step=1,this.noSteppers=!1,this.isUserInput=!1,this._presentationValue=``,this._updatedValueAnnouncement=``,this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(e,t){this.proxy.setAttribute(`step`,t===`any`?`any`:Number.isFinite(t)?t.toString():``),this.validate()}get _hasSteppers(){return!this.noSteppers&&this.step!==`any`}get _numericStep(){return this.step===`any`?O:this.step}maxChanged(e,t){this.max=Math.max(t,this.min??t),this.proxy.max=this.max.toString(),this.validate()}minChanged(e,t){this.min=Math.min(t,this.max??t),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(e){this.value=e.toString()}valueChanged(e,t){this.value=P.test(t)?t:``,t===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(e,this.value),e!==void 0&&!this.isUserInput&&(this.$emit(`input`),this.$emit(`change`)))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?N:M}#e(e){return e.replace(`.`,this.locale.common.useCommaAsDecimalSeparator?`,`:`.`)}#t(e){return e.replace(this._numberPatterns.invalidCharacters,``).replace(this._numberPatterns.additionalDecimalSeparators,``)}#n(e){let t=e.replace(this._numberPatterns.trailingDecimalSeparator,``).replace(this._numberPatterns.decimalSeparator,`.`);return P.test(t)?t:``}validate(){super.validate(this.control)}stepUp(){k(this,D.up)}stepDown(){k(this,D.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,`number`),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&t.M.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit(`select`)}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#n(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit(`change`)}handleKeyDown(e){switch(e.key){case l.i:return this.stepUp(),!1;case l.t:return this.stepDown(),!1}return!0}};s.t([t.m({attribute:`readonly`,mode:`boolean`})],F.prototype,`readOnly`,void 0),s.t([t.m({mode:`boolean`})],F.prototype,`autofocus`,void 0),s.t([t.m],F.prototype,`placeholder`,void 0),s.t([t.m],F.prototype,`list`,void 0),s.t([t.m({converter:t.h})],F.prototype,`maxlength`,void 0),s.t([t.m({converter:t.h})],F.prototype,`minlength`,void 0),s.t([t.m({converter:t.h})],F.prototype,`size`,void 0),s.t([t.m()],F.prototype,`scale`,void 0),s.t([t.m({converter:A})],F.prototype,`step`,void 0),s.t([t.m({attribute:`no-steppers`,mode:`boolean`})],F.prototype,`noSteppers`,void 0),s.t([t.m({converter:t.h})],F.prototype,`max`,void 0),s.t([t.m({converter:t.h})],F.prototype,`min`,void 0),s.t([t.A],F.prototype,`defaultSlottedNodes`,void 0),s.t([t.A],F.prototype,`_presentationValue`,void 0),s.t([t.A],F.prototype,`_updatedValueAnnouncement`,void 0),s.t([t.m({attribute:`increment-button-aria-label`})],F.prototype,`incrementButtonAriaLabel`,void 0),s.t([t.m({attribute:`decrement-button-aria-label`})],F.prototype,`decrementButtonAriaLabel`,void 0),s.t([t.m],F.prototype,`appearance`,void 0),s.t([t.m],F.prototype,`shape`,void 0),s.t([t.m],F.prototype,`autoComplete`,void 0);function I(){return t.p` <label for="control" class="label">
 		${e=>e.label}
-	</label>`}function F(e){return e.shape===o.i.Pill?o.i.Pill:null}function I(e){return e.disabled||e.readOnly?`-1`:null}function L(e){let n=e.tagFor(h.i),r=e.tagFor(w.t);return t.p`
-		<div class="control-buttons" ?inert="${e=>e.disabled||e.readOnly}">
+	</label>`}function L(e){return e.shape===o.i.Pill?o.i.Pill:null}function R(e){return e.disabled||e.readOnly?`-1`:null}function z(e){let n=e.tagFor(h.i),r=e.tagFor(w.t);return t.p`
+		<div class="control-buttons"
+			?hidden="${e=>!e._hasSteppers}"
+			?inert="${e=>e.disabled||e.readOnly}">
 			<${n} id="subtract" icon="minus-line"
 				?disabled="${e=>e.disabled||e.readOnly}"
-				aria-label=${e=>e.decrementButtonAriaLabel||e.locale.numberField.decrementButtonLabel(e.step)}
-				shape="${F}"
+				aria-label=${e=>e.decrementButtonAriaLabel||e.locale.numberField.decrementButtonLabel(e._numericStep)}
+				shape="${L}"
 				type="button"
 				size="${e=>e.scale===`condensed`?`super-condensed`:`condensed`}"
-				tabindex="${I}"
+				tabindex="${R}"
 				@click="${e=>e.stepDown()}"></${n}>
 			<${r} class="divider" orientation="vertical"></${r}>
 			<${n} id="add" icon="plus-line"
 				?disabled="${e=>e.disabled||e.readOnly}"
-				aria-label=${e=>e.incrementButtonAriaLabel||e.locale.numberField.incrementButtonLabel(e.step)}
-				shape="${F}"
+				aria-label=${e=>e.incrementButtonAriaLabel||e.locale.numberField.incrementButtonLabel(e._numericStep)}
+				shape="${L}"
 				type="button"
 				size="${e=>e.scale===`condensed`?`super-condensed`:`condensed`}"
-				tabindex="${I}"
+				tabindex="${R}"
 				@click="${e=>e.stepUp()}"></${n}>
 			</div>
-	`}var R=t.u(`number-field`,N,e=>{let o=e.tagFor(a.r);return t.p`
-		<div class="base ${e=>c.t(`connotation-accent`,`appearance-${E.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-disabled`,`with-readonly`,`with-error`,`with-success`,[`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`success`,!!e.successText],[`size-${e.scale}`,!!e.scale])}">
+	`}var B=t.u(`number-field`,F,e=>{let o=e.tagFor(a.r);return t.p`
+		<div class="base ${e=>c.t(`connotation-accent`,`appearance-${E.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-disabled`,`with-readonly`,`with-error`,`with-success`,[`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`success`,!!e.successText],[`size-${e.scale}`,!!e.scale],[`no-steppers`,!e._hasSteppers])}">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
-				${i.t(e=>e.label,P())}
+				${i.t(e=>e.label,I())}
 				<slot name="contextual-help" ${n.t(`_contextualHelpSlottedContent`)}></slot>
 			</div>
 			<div class="fieldset">
@@ -52,10 +54,10 @@ const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.
 						${r.t(`control`)}
 					/>
 				</div>
-				${()=>L(e)}
+				${()=>z(e)}
 			</div>
 			${t=>t._getFeedbackTemplate(e)}
 			<${o} id="value-announcement" role="status" aria-atomic="true">
 				${e=>e._updatedValueAnnouncement}</${o}>
 		</div>
-	`},[h.t,C.t,u.t,g.n,a.n,_.t],{styles:T,shadowOptions:{delegatesFocus:!0}});t.d(R)();
+	`},[h.t,C.t,u.t,g.n,a.n,_.t],{styles:T,shadowOptions:{delegatesFocus:!0}});t.d(B)();

package/number-field/index.js

@@ -24,15 +24,22 @@ import { t as N } from "../bundled/mixins.js";
 import { t as P } from "../bundled/definition20.js";
 import { t as F } from "../bundled/divider.js";
 //#region src/lib/number-field/number-field.scss?inline
-var I = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
+var I = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.base.no-steppers{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}.base.no-steppers.size-condensed{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.control-buttons[hidden]{display:none}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
 	up: 1,
 	down: -1
-};
-function z(e, t) {
-	let n = parseFloat(e.value), r = isNaN(n) ? e.min > 0 ? e.min : e.max < 0 ? e.max : e.min ? 0 : t * e.step : n + t * e.step;
-	e.value = Number(r.toFixed(12)).toString(), e._updatedValueAnnouncement = e.locale.numberField.updatedValueAnnouncement(e._presentationValue);
+}, z = 1;
+function B(e, t) {
+	let n = e._numericStep, r = parseFloat(e.value), i = isNaN(r) ? e.min > 0 ? e.min : e.max < 0 ? e.max : e.min ? 0 : t * n : r + t * n;
+	e.value = Number(i.toFixed(12)).toString(), e._updatedValueAnnouncement = e.locale.numberField.updatedValueAnnouncement(e._presentationValue);
 }
-var B = (e) => {
+var V = {
+	toView(e) {
+		return e === "any" ? "any" : i.toView(e);
+	},
+	fromView(e) {
+		return typeof e == "string" && e.trim().toLowerCase() === "any" ? "any" : i.fromView(e);
+	}
+}, H = (e) => {
 	let t = e.source;
 	return {
 		invalidCharacters: RegExp(`[^0-9\\-+e${t}]`, "g"),
@@ -40,12 +47,18 @@ var B = (e) => {
 		trailingDecimalSeparator: RegExp(`${t}$`),
 		decimalSeparator: e
 	};
-}, V = B(/\./), H = B(/,/), U = /^-?((\d*\.\d+)|(\d+))$/, W = class extends A(N(j(M(k(b(e(S(w(s))))))))) {
+}, U = H(/\./), W = H(/,/), G = /^-?((\d*\.\d+)|(\d+))$/, K = class extends A(N(j(M(k(b(e(S(w(s))))))))) {
 	constructor(...e) {
-		super(...e), this.proxy = document.createElement("input"), this.readOnly = !1, this.autofocus = !1, this.step = 1, this.isUserInput = !1, this._presentationValue = "", this._updatedValueAnnouncement = "", this.incrementButtonAriaLabel = null, this.decrementButtonAriaLabel = null;
+		super(...e), this.proxy = document.createElement("input"), this.readOnly = !1, this.autofocus = !1, this.step = 1, this.noSteppers = !1, this.isUserInput = !1, this._presentationValue = "", this._updatedValueAnnouncement = "", this.incrementButtonAriaLabel = null, this.decrementButtonAriaLabel = null;
 	}
 	stepChanged(e, t) {
-		this.proxy.setAttribute("step", Number.isFinite(t) ? t.toString() : "");
+		this.proxy.setAttribute("step", t === "any" ? "any" : Number.isFinite(t) ? t.toString() : ""), this.validate();
+	}
+	get _hasSteppers() {
+		return !this.noSteppers && this.step !== "any";
+	}
+	get _numericStep() {
+		return this.step === "any" ? z : this.step;
 	}
 	maxChanged(e, t) {
 		this.max = Math.max(t, this.min ?? t), this.proxy.max = this.max.toString(), this.validate();
@@ -60,10 +73,10 @@ var B = (e) => {
 		this.value = e.toString();
 	}
 	valueChanged(e, t) {
-		this.value = U.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
+		this.value = G.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
 	}
 	get _numberPatterns() {
-		return this.locale.common.useCommaAsDecimalSeparator ? H : V;
+		return this.locale.common.useCommaAsDecimalSeparator ? W : U;
 	}
 	#e(e) {
 		return e.replace(".", this.locale.common.useCommaAsDecimalSeparator ? "," : ".");
@@ -73,16 +86,16 @@ var B = (e) => {
 	}
 	#n(e) {
 		let t = e.replace(this._numberPatterns.trailingDecimalSeparator, "").replace(this._numberPatterns.decimalSeparator, ".");
-		return U.test(t) ? t : "";
+		return G.test(t) ? t : "";
 	}
 	validate() {
 		super.validate(this.control);
 	}
 	stepUp() {
-		z(this, R.up);
+		B(this, R.up);
 	}
 	stepDown() {
-		z(this, R.down);
+		B(this, R.down);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && n.enqueue(() => {
@@ -109,52 +122,57 @@ var B = (e) => {
 h([a({
 	attribute: "readonly",
 	mode: "boolean"
-})], W.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], W.prototype, "autofocus", void 0), h([a], W.prototype, "placeholder", void 0), h([a], W.prototype, "list", void 0), h([a({ converter: i })], W.prototype, "maxlength", void 0), h([a({ converter: i })], W.prototype, "minlength", void 0), h([a({ converter: i })], W.prototype, "size", void 0), h([a()], W.prototype, "scale", void 0), h([a({ converter: i })], W.prototype, "step", void 0), h([a({ converter: i })], W.prototype, "max", void 0), h([a({ converter: i })], W.prototype, "min", void 0), h([t], W.prototype, "defaultSlottedNodes", void 0), h([t], W.prototype, "_presentationValue", void 0), h([t], W.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], W.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], W.prototype, "decrementButtonAriaLabel", void 0), h([a], W.prototype, "appearance", void 0), h([a], W.prototype, "shape", void 0), h([a], W.prototype, "autoComplete", void 0);
+})], K.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], K.prototype, "autofocus", void 0), h([a], K.prototype, "placeholder", void 0), h([a], K.prototype, "list", void 0), h([a({ converter: i })], K.prototype, "maxlength", void 0), h([a({ converter: i })], K.prototype, "minlength", void 0), h([a({ converter: i })], K.prototype, "size", void 0), h([a()], K.prototype, "scale", void 0), h([a({ converter: V })], K.prototype, "step", void 0), h([a({
+	attribute: "no-steppers",
+	mode: "boolean"
+})], K.prototype, "noSteppers", void 0), h([a({ converter: i })], K.prototype, "max", void 0), h([a({ converter: i })], K.prototype, "min", void 0), h([t], K.prototype, "defaultSlottedNodes", void 0), h([t], K.prototype, "_presentationValue", void 0), h([t], K.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], K.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], K.prototype, "decrementButtonAriaLabel", void 0), h([a], K.prototype, "appearance", void 0), h([a], K.prototype, "shape", void 0), h([a], K.prototype, "autoComplete", void 0);
 //#endregion
 //#region src/lib/number-field/number-field.template.ts
-function G() {
+function q() {
 	return o` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function K(e) {
+function J(e) {
 	return e.shape === m.Pill ? m.Pill : null;
 }
-function q(e) {
+function Y(e) {
 	return e.disabled || e.readOnly ? "-1" : null;
 }
-function J(e) {
+function X(e) {
 	let t = e.tagFor(T), n = e.tagFor(F);
 	return o`
-		<div class="control-buttons" ?inert="${(e) => e.disabled || e.readOnly}">
+		<div class="control-buttons"
+			?hidden="${(e) => !e._hasSteppers}"
+			?inert="${(e) => e.disabled || e.readOnly}">
 			<${t} id="subtract" icon="minus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
-				aria-label=${(e) => e.decrementButtonAriaLabel || e.locale.numberField.decrementButtonLabel(e.step)}
-				shape="${K}"
+				aria-label=${(e) => e.decrementButtonAriaLabel || e.locale.numberField.decrementButtonLabel(e._numericStep)}
+				shape="${J}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${q}"
+				tabindex="${Y}"
 				@click="${(e) => e.stepDown()}"></${t}>
 			<${n} class="divider" orientation="vertical"></${n}>
 			<${t} id="add" icon="plus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
-				aria-label=${(e) => e.incrementButtonAriaLabel || e.locale.numberField.incrementButtonLabel(e.step)}
-				shape="${K}"
+				aria-label=${(e) => e.incrementButtonAriaLabel || e.locale.numberField.incrementButtonLabel(e._numericStep)}
+				shape="${J}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${q}"
+				tabindex="${Y}"
 				@click="${(e) => e.stepUp()}"></${t}>
 			</div>
 	`;
 }
 //#endregion
 //#region src/lib/number-field/definition.ts
-var Y = c("number-field", W, (e) => {
+var Z = c("number-field", K, (e) => {
 	let t = e.tagFor(p);
 	return o`
-		<div class="base ${(e) => g("connotation-accent", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale])}">
+		<div class="base ${(e) => g("connotation-accent", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale], ["no-steppers", !e._hasSteppers])}">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
-				${d((e) => e.label, G())}
+				${d((e) => e.label, q())}
 				<slot name="contextual-help" ${l("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="fieldset">
@@ -183,7 +201,7 @@ var Y = c("number-field", W, (e) => {
 						${u("control")}
 					/>
 				</div>
-				${() => J(e)}
+				${() => X(e)}
 			</div>
 			${(t) => t._getFeedbackTemplate(e)}
 			<${t} id="value-announcement" role="status" aria-atomic="true">
@@ -203,5 +221,5 @@ var Y = c("number-field", W, (e) => {
 });
 //#endregion
 //#region src/lib/number-field/index.ts
-r(Y)();
+r(Z)();
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.28.0",
+  "version": "5.29.0",
   "homepage": "https://apps.vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -43,7 +43,7 @@
     "@microsoft/fast-element": "^2.10.5",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^4.4.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.15",
     "prosemirror-commands": "^1.7.2",
     "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
@@ -53,21 +53,21 @@
     "prosemirror-model": "1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-transform": "^1.12.0",
+    "prosemirror-transform": "^1.12.1",
     "prosemirror-view": "1.41.8",
     "scroll-into-view-if-needed": "^3.1.0",
     "uuid": "^14.0.2",
     "vanilla-colorful": "^0.7.2",
-    "video.js": "^8.24.0"
+    "video.js": "^8.24.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
-    "@microsoft/api-extractor": "^7.58.12",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/user-event": "^14.6.6",
+    "@microsoft/api-extractor": "^7.59.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^20.19.43",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
@@ -75,37 +75,37 @@
     "concurrently": "^9.2.4",
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^3.0.2",
-    "eslint": "^10.8.1",
+    "eslint": "^10.11.0",
     "eslint-formatter-compact": "^9.0.1",
     "eslint-plugin-barrel-files": "^3.0.1",
     "glob": "^13.0.6",
-    "sass": "^1.102.0",
+    "sass": "^1.104.1",
     "stylelint": "^16.26.1",
     "tsx": "^4.23.13",
     "typescript": "5.9.3",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.4.0",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
-    "wait-on": "^8.0.5",
+    "wait-on": "^9.1.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
-    "@repo/internal-test-utils": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/browser-tests": "1.0.0",
-    "@repo/metadata-extractor": "1.0.0",
     "@repo/eslint-config": "1.0.0",
-    "@repo/sass": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/metadata-extractor": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
+    "@repo/internal-test-utils": "1.0.0",
+    "@repo/sass": "1.0.0",
     "@repo/tokens": "1.0.0",
-    "@repo/tools": "1.0.0",
     "@repo/styles": "1.0.0",
-    "@repo/vite-config": "1.0.0",
     "@repo/typescript-config": "1.0.0",
-    "@repo/vvd-jsx": "1.0.0",
+    "@repo/vite-config": "1.0.0",
+    "@repo/tools": "1.0.0",
     "@repo/vitest-config": "1.0.0",
-    "@vonage/vivid-icons": "4.12.0"
+    "@repo/vvd-jsx": "1.0.0",
+    "@vonage/vivid-icons": "4.13.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {