@luzmo/lucero 1.0.1-alpha.39 → 1.0.1-alpha.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/number-field/index.cjs +3 -3
  2. package/components/number-field/index.js +128 -90
  3. package/components/number-field/number-field.d.ts +145 -0
  4. package/custom-elements.json +1 -1
  5. package/package.json +1 -1
package/components/number-field/index.js CHANGED
@@ -18,12 +18,12 @@
18
18
  import { NumberFormatter as b, NumberParser as f } from "@internationalized/number";
19
19
  import { luzmoIcon as v, luzmoAngleUp as y, luzmoAngleDown as k } from "@luzmo/icons";
20
20
  import { unsafeCSS as C, nothing as F, html as z } from "lit";
21
- import { query as _, property as d } from "lit/decorators.js";
21
+ import { query as _, property as n } from "lit/decorators.js";
22
22
  import { c as g, a as N, j as V } from "../platform-CqwNrovd.js";
23
- import { L as P, l as q } from "../language-resolution-B-wjV5bb.js";
24
- import { s as E } from "../streaming-listener-BlWm-XZU.js";
23
+ import { L as P, l as S } from "../language-resolution-B-wjV5bb.js";
24
+ import { s as q } from "../streaming-listener-BlWm-XZU.js";
25
25
  import "../infield-button/index.js";
26
- import { a as S } from "../text-field-BHaLKkf1.js";
26
+ import { a as E } from "../text-field-BHaLKkf1.js";
27
27
  const w = () => {
28
28
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
29
29
  const p = document.createElement("style");
@@ -31,11 +31,11 @@ const w = () => {
31
31
  }
32
32
  };
33
33
  w();
34
- const D = '#text-field{--stepper-width: calc( var(--luzmo-stepper-height, var(--stepper-height)) * var( --luzmo-stepper-min-width-multiplier, var(--stepper-min-width-multiplier) ) + var(--luzmo-stepper-button-width, var(--stepper-button-width)) + var(--luzmo-stepper-border-width, var(--stepper-border-width)) * 2 );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color, var( --luzmo-stepper-buttons-border-color, var(--stepper-buttons-border-color) ) );--luzmo-infield-button-border-width: var( --luzmo-stepper-button-border-width, var(--stepper-button-border-width) );--luzmo-infield-button-border-radius-reset: var( --stepper-button-border-radius-reset );--luzmo-text-field-border-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) );inline-size:var(--luzmo-stepper-width, var(--stepper-width));block-size:var(--luzmo-stepper-height, var(--stepper-height));border-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));flex-flow:row;display:inline-flex;position:relative}#text-field:after{content:"";inline-size:100%;block-size:var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width));position:absolute;inset-block-end:calc((var(--luzmo-stepper-focus-indicator-gap, var(--stepper-focus-indicator-gap)) + var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width))) * -1);inset-inline-start:0}:host([focused]) #text-field,#text-field:focus{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus, var( --luzmo-stepper-buttons-border-color-focus, var(--stepper-buttons-border-color-focus) ) )}:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .input{outline:none}:host([focused]:not([disabled])) #text-field .buttons,:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .buttons,:host(:not([disabled])) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)))}:host([keyboard-focused]) #text-field,#text-field:focus-visible{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-buttons-border-color-keyboard-focus, var(--stepper-buttons-border-color-keyboard-focus) ) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-buttons-border-color-keyboard-focus, var(--stepper-buttons-border-color-keyboard-focus) ) )}:host([keyboard-focused]:not([disabled])) #text-field,:host(:not([disabled])) #text-field:focus-visible{outline:var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width)) solid;outline-color:var(--highcontrast-stepper-focus-indicator-color, var(--luzmo-stepper-focus-indicator-color, var(--stepper-focus-indicator-color)));outline-offset:var(--luzmo-stepper-focus-indicator-gap, var(--stepper-focus-indicator-gap))}:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .input{outline:none}:host([keyboard-focused]:not([disabled])) #text-field .buttons,:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .buttons,:host(:not([disabled])) #text-field:focus-visible .input{border-color:var(--highcontrast-stepper-border-color-keyboard-focus, var(--luzmo-stepper-border-color-keyboard-focus, var(--stepper-border-color-keyboard-focus)))}:host([invalid]:not([disabled])) #text-field{--luzmo-stepper-border-color: var( --luzmo-stepper-border-color-invalid, var(--stepper-border-color-invalid) );--luzmo-stepper-border-color-hover: var( --luzmo-stepper-border-color-hover-invalid, var(--stepper-border-color-hover-invalid) );--luzmo-stepper-border-color-focus: var( --luzmo-stepper-border-color-focus-invalid, var(--stepper-border-color-focus-invalid) );--luzmo-stepper-border-color-focus-hover: var( --luzmo-stepper-border-color-focus-hover-invalid, var(--stepper-border-color-focus-hover-invalid) );--luzmo-stepper-border-color-keyboard-focus: var( --luzmo-stepper-border-color-keyboard-focus-invalid, var(--stepper-border-color-keyboard-focus-invalid) );--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-invalid, var(--stepper-border-color-invalid) );--luzmo-text-field-icon-spacing-inline-start-invalid: 0}:host([invalid][focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-focus-invalid, var(--stepper-border-color-focus-invalid) )}:host([invalid][keyboard-focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus-visible{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-keyboard-focus-invalid, var(--stepper-border-color-keyboard-focus-invalid) )}:host([disabled]) #text-field{--luzmo-stepper-border-color: var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-hover: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-focus: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-focus-hover: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-keyboard-focus: var( --stepper-button-border-color-disabled );--luzmo-stepper-buttons-background-color: var( --stepper-buttons-background-color-disabled );--luzmo-infield-button-border-width: var( --stepper-button-border-width-disabled );--luzmo-infield-button-border-color: var( --stepper-button-border-color-disabled );--luzmo-text-field-border-color-disabled: var( --stepper-button-border-color-disabled )}#text-field .input{border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-inline-end-width:0;border-start-end-radius:0;border-end-end-radius:0}#text-field.hide-stepper .input{border-inline-end-width:var(--luzmo-stepper-border-width, var(--stepper-border-width));border-start-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius))}#text-field .buttons{box-sizing:border-box;font-size:var(--luzmo-stepper-button-font-size, var(--stepper-button-font-size));block-size:var(--luzmo-stepper-height, var(--stepper-height));inline-size:var(--luzmo-stepper-button-width, var(--stepper-button-width));border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-style:var(--luzmo-stepper-buttons-border-style, var(--stepper-buttons-border-style));border-width:var(--highcontrast-stepper-buttons-border-width, var(--luzmo-stepper-buttons-border-width, var(--stepper-buttons-border-width)));background-color:var(--highcontrast-stepper-buttons-background-color, var(--luzmo-stepper-buttons-background-color, var(--stepper-buttons-background-color)));transition:border-color var(--luzmo-stepper-animation-duration, var(--stepper-animation-duration)) ease-in-out;border-inline-start-width:0;border-start-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));flex-direction:column;justify-content:center;display:flex}:host([quiet]) #text-field{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #text-field .input{--luzmo-text-field-focus-indicator-color: transparent}:host([quiet]) #text-field.hide-stepper .input{border-inline-end-width:0;border-end-end-radius:0}:host([quiet]) #text-field .buttons{--luzmo-infield-button-border-color: transparent;border-width:0;border-block-end-width:var(--luzmo-stepper-border-width, var(--stepper-border-width));border-block-end-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-block-end-style:solid;border-end-end-radius:0}:host([quiet]) #text-field .button{--luzmo-infield-button-width-stacked: var( --luzmo-stepper-button-width-quiet, var(--stepper-button-width) );--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-quiet, var(--stepper-button-border-color-quiet) );--luzmo-infield-button-stacked-bottom-border-block-end-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) );--luzmo-infield-button-stacked-bottom-border-radius-end-end: 0;--luzmo-infield-button-stacked-bottom-border-radius-end-start: 0;--luzmo-infield-button-fill-justify-content: flex-end;padding:0}:host([quiet]) #text-field .buttons,:host([quiet]) #text-field .input{background-color:initial}:host([quiet][focused]) #text-field,:host([quiet]) #text-field:focus{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)) )}:host([quiet][keyboard-focused]:not([disabled])) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-border-color-keyboard-focus, var(--stepper-border-color-keyboard-focus) ) );outline:none}:host([quiet][keyboard-focused]:not([disabled])) #text-field:after{background-color:var(--highcontrast-stepper-focus-indicator-color, var(--luzmo-stepper-focus-indicator-color, var(--stepper-focus-indicator-color)))}@media (hover: hover){:host(:hover:not([disabled])) #text-field{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var( --luzmo-stepper-buttons-border-color-hover, var(--stepper-buttons-border-color-hover) ) )}:host([focused]:hover) #text-field,:host(:hover) #text-field:focus{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-buttons-border-color-focus-hover, var(--stepper-buttons-border-color-focus-hover) ) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-buttons-border-color-focus-hover, var(--stepper-buttons-border-color-focus-hover) ) )}:host([focused]:hover) #text-field .buttons,:host([focused]:hover) #text-field .input,:host(:hover) #text-field:focus .buttons,:host(:hover) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus-hover, var(--luzmo-stepper-border-color-focus-hover, var(--stepper-border-color-focus-hover)))}:host([invalid]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-hover-invalid, var(--stepper-border-color-hover-invalid) )}:host([invalid][focused]:not([disabled]):hover) #text-field,:host([invalid]:not([disabled]):hover) #text-field:focus{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-focus-hover-invalid, var(--stepper-border-color-focus-hover-invalid) )}:host([quiet]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) )}:host([quiet]:not([disabled]):hover) #text-field .buttons{background-color:initial}:host([quiet][focused]:hover) #text-field,:host([quiet]:hover) #text-field:focus{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-border-color-focus-hover, var(--stepper-border-color-focus-hover) ) )}:host([quiet][keyboard-focused]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) )}}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{inset-inline-end:calc(var(--stepper-button-width) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)))}@media (forced-colors: active){:host{--highcontrast-stepper-border-color: CanvasText;--highcontrast-stepper-border-color-hover: Highlight;--highcontrast-stepper-border-color-focus: Highlight;--highcontrast-stepper-border-color-focus-hover: Highlight;--highcontrast-stepper-border-color-keyboard-focus: CanvasText;--highcontrast-stepper-button-background-color-default: Canvas;--highcontrast-stepper-button-background-color-hover: Canvas;--highcontrast-stepper-button-background-color-focus: Canvas;--highcontrast-stepper-button-background-color-keyboard-focus: Canvas;--highcontrast-stepper-focus-indicator-color: Highlight}:host([invalid]) #text-field{--highcontrast-stepper-border-color: Highlight;--highcontrast-stepper-border-color-hover: Highlight;--highcontrast-stepper-border-color-focus: Highlight;--highcontrast-stepper-border-color-focus-hover: Highlight;--highcontrast-stepper-border-color-keyboard-focus: Highlight;--highcontrast-infield-button-border-color: Highlight}:host([disabled]) #text-field{--highcontrast-stepper-border-color: GrayText;--highcontrast-infield-button-border-color: GrayText;--highcontrast-stepper-buttons-border-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) )}}:host{--text-field-minimum-width-multiplier: 1.75;--stepper-border-width: var(--luzmo-border-width);--stepper-border-color: var(--luzmo-border-color);--stepper-border-color-hover: var(--luzmo-border-color-full-hover);--stepper-border-color-focus: var(--luzmo-border-color-full-focus);--stepper-border-color-focus-hover: var(--luzmo-border-color-full-focus);--stepper-border-color-keyboard-focus: var(--luzmo-border-color-full-focus);--stepper-border-radius: var(--luzmo-border-radius);--stepper-min-width-multiplier: 1.5;--stepper-animation-duration: var(--luzmo-animation-duration);--stepper-buttons-background-color: var(--luzmo-background-color);--stepper-buttons-border-style: none;--stepper-buttons-border-width: 0;--stepper-buttons-border-color: var(--luzmo-border-color);--stepper-buttons-border-color-hover: var(--luzmo-border-color-full-hover);--stepper-buttons-border-color-focus: var(--luzmo-border-color-full-focus);--stepper-buttons-border-color-keyboard-focus: var( --luzmo-border-color-focus );--stepper-button-font-size: var(--luzmo-font-size);--stepper-button-padding: 0px;--stepper-button-border-radius-reset: 0;--stepper-button-border-width: var(--luzmo-border-width);--stepper-button-background-color-focus: var(--luzmo-background-color-focus);--stepper-button-background-color-keyboard-focus: var( --luzmo-background-color-focus );--stepper-border-color-invalid: var(--luzmo-negative-color);--stepper-border-color-hover-invalid: var(--luzmo-negative-color-hover);--stepper-border-color-focus-invalid: var(--luzmo-negative-color-focus);--stepper-border-color-focus-hover-invalid: var(--luzmo-negative-color-focus);--stepper-border-color-keyboard-focus-invalid: var( --luzmo-negative-color-focus );--stepper-focus-indicator-width: var(--luzmo-indicator-width);--stepper-focus-indicator-gap: calc(-1 * var(--luzmo-border-width));--stepper-focus-indicator-color: var(--luzmo-indicator-color);--stepper-button-border-color-quiet: transparent;--stepper-button-border-color-disabled: var(--luzmo-border-color-disabled);--stepper-button-border-width-disabled: var(--luzmo-border-width);--stepper-buttons-background-color-disabled: var( --luzmo-background-color-disabled );--stepper-button-width: 20px;--stepper-height: var(--luzmo-component-height)}:host([size=s]) #text-field{--stepper-button-width: 16px;--stepper-height: var(--luzmo-component-height-s)}:host([size=m]) #text-field{--stepper-button-width: 20px;--stepper-height: var(--luzmo-component-height)}:host([size=l]) #text-field{--stepper-button-width: 28px;--stepper-height: var(--luzmo-component-height-l)}:host([size=xl]) #text-field{--stepper-button-width: 36px;--stepper-height: var(--luzmo-component-height-xl)}:host{inline-size:var(--luzmo-stepper-width, var(--stepper-width));--swc-number-field-width: calc( var(--luzmo-stepper-height, var(--stepper-height)) * var( --luzmo-stepper-min-width-multiplier, var(--text-field-minimum-width-multiplier) ) + var(--luzmo-stepper-button-width, var(--stepper-button-width)) + var(--luzmo-stepper-border-width, var(--stepper-border-width)) * 2 );--luzmo-infield-button-border-width: var(--unset-value-resets-inheritance);--stepper-width: var(--swc-number-field-width)}:host([size=s]){--stepper-width: calc(var(--swc-number-field-width) / 5 * 4);--stepper-button-font-size: var(--luzmo-font-size-s)}:host([size=l]){--stepper-width: calc(var(--swc-number-field-width) * 1.25);--stepper-button-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--stepper-width: calc(var(--swc-number-field-width) * 1.25 * 1.25);--stepper-button-font-size: var(--luzmo-font-size-xl)}#text-field{inline-size:100%}.input{font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #text-field:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #text-field input{border:var(--luzmo-stepper-border-width, var(--stepper-border-width)) solid var(--luzmo-stepper-border-color, var(--stepper-border-color));border-radius:var(--luzmo-border-radius)}:host([quiet]) #text-field .button{--luzmo-infield-button-border-color: var( --luzmo-infield-border-color-quiet, transparent );--luzmo-infield-button-edge-to-fill: 0;--luzmo-infield-button-border-width: var( --luzmo-infield-button-border-width-quiet, 0 )}';
35
- var I = Object.defineProperty, R = Object.getOwnPropertyDescriptor, a = (p, e, o, r) => {
36
- for (var t = r > 1 ? void 0 : r ? R(e, o) : e, i = p.length - 1, u; i >= 0; i--)
37
- (u = p[i]) && (t = (r ? u(e, o, t) : u(t)) || t);
38
- return r && t && I(e, o, t), t;
34
+ const D = '#text-field{--stepper-width: calc( var(--luzmo-stepper-height, var(--stepper-height)) * var( --luzmo-stepper-min-width-multiplier, var(--stepper-min-width-multiplier) ) + var(--luzmo-stepper-button-width, var(--stepper-button-width)) + var(--luzmo-stepper-border-width, var(--stepper-border-width)) * 2 );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color, var( --luzmo-stepper-buttons-border-color, var(--stepper-buttons-border-color) ) );--luzmo-infield-button-border-width: var( --luzmo-stepper-button-border-width, var(--stepper-button-border-width) );--luzmo-infield-button-border-radius-reset: var( --stepper-button-border-radius-reset );--luzmo-text-field-border-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) );inline-size:var(--luzmo-stepper-width, var(--stepper-width));block-size:var(--luzmo-stepper-height, var(--stepper-height));border-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));flex-flow:row;display:inline-flex;position:relative}#text-field:after{content:"";inline-size:100%;block-size:var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width));position:absolute;inset-block-end:calc((var(--luzmo-stepper-focus-indicator-gap, var(--stepper-focus-indicator-gap)) + var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width))) * -1);inset-inline-start:0}:host([focused]) #text-field,#text-field:focus{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus, var( --luzmo-stepper-buttons-border-color-focus, var(--stepper-buttons-border-color-focus) ) )}:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .input{outline:none}:host([focused]:not([disabled])) #text-field .buttons,:host([focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus .buttons,:host(:not([disabled])) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)))}:host([keyboard-focused]) #text-field,#text-field:focus-visible{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-buttons-border-color-keyboard-focus, var(--stepper-buttons-border-color-keyboard-focus) ) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-buttons-border-color-keyboard-focus, var(--stepper-buttons-border-color-keyboard-focus) ) )}:host([keyboard-focused]:not([disabled])) #text-field,:host(:not([disabled])) #text-field:focus-visible{outline:var(--luzmo-stepper-focus-indicator-width, var(--stepper-focus-indicator-width)) solid;outline-color:var(--highcontrast-stepper-focus-indicator-color, var(--luzmo-stepper-focus-indicator-color, var(--stepper-focus-indicator-color)));outline-offset:var(--luzmo-stepper-focus-indicator-gap, var(--stepper-focus-indicator-gap))}:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .input{outline:none}:host([keyboard-focused]:not([disabled])) #text-field .buttons,:host([keyboard-focused]:not([disabled])) #text-field .input,:host(:not([disabled])) #text-field:focus-visible .buttons,:host(:not([disabled])) #text-field:focus-visible .input{border-color:var(--highcontrast-stepper-border-color-keyboard-focus, var(--luzmo-stepper-border-color-keyboard-focus, var(--stepper-border-color-keyboard-focus)))}:host([invalid]:not([disabled])) #text-field{--luzmo-stepper-border-color: var( --luzmo-stepper-border-color-invalid, var(--stepper-border-color-invalid) );--luzmo-stepper-border-color-hover: var( --luzmo-stepper-border-color-hover-invalid, var(--stepper-border-color-hover-invalid) );--luzmo-stepper-border-color-focus: var( --luzmo-stepper-border-color-focus-invalid, var(--stepper-border-color-focus-invalid) );--luzmo-stepper-border-color-focus-hover: var( --luzmo-stepper-border-color-focus-hover-invalid, var(--stepper-border-color-focus-hover-invalid) );--luzmo-stepper-border-color-keyboard-focus: var( --luzmo-stepper-border-color-keyboard-focus-invalid, var(--stepper-border-color-keyboard-focus-invalid) );--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-invalid, var(--stepper-border-color-invalid) );--luzmo-text-field-icon-spacing-inline-start-invalid: 0}:host([invalid][focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-focus-invalid, var(--stepper-border-color-focus-invalid) )}:host([invalid][keyboard-focused]:not([disabled])) #text-field,:host([invalid]:not([disabled])) #text-field:focus-visible{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-keyboard-focus-invalid, var(--stepper-border-color-keyboard-focus-invalid) )}:host([disabled]) #text-field{--luzmo-stepper-border-color: var(--stepper-button-border-color-disabled);--luzmo-stepper-border-color-hover: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-focus: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-focus-hover: var( --stepper-button-border-color-disabled );--luzmo-stepper-border-color-keyboard-focus: var( --stepper-button-border-color-disabled );--luzmo-stepper-buttons-background-color: var( --stepper-buttons-background-color-disabled );--luzmo-infield-button-border-width: var( --stepper-button-border-width-disabled );--luzmo-infield-button-border-color: var( --stepper-button-border-color-disabled );--luzmo-text-field-border-color-disabled: var( --stepper-button-border-color-disabled )}#text-field .input{border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-inline-end-width:0;border-start-end-radius:0;border-end-end-radius:0}#text-field.hide-stepper .input{border-inline-end-width:var(--luzmo-stepper-border-width, var(--stepper-border-width));border-start-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius))}#text-field .buttons{box-sizing:border-box;font-size:var(--luzmo-stepper-button-font-size, var(--stepper-button-font-size));block-size:var(--luzmo-stepper-height, var(--stepper-height));inline-size:var(--luzmo-stepper-button-width, var(--stepper-button-width));border-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-style:var(--luzmo-stepper-buttons-border-style, var(--stepper-buttons-border-style));border-width:var(--highcontrast-stepper-buttons-border-width, var(--luzmo-stepper-buttons-border-width, var(--stepper-buttons-border-width)));background-color:var(--highcontrast-stepper-buttons-background-color, var(--luzmo-stepper-buttons-background-color, var(--stepper-buttons-background-color)));transition:border-color var(--luzmo-stepper-animation-duration, var(--stepper-animation-duration)) ease-in-out;border-inline-start-width:0;border-start-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));border-end-end-radius:var(--luzmo-stepper-border-radius, var(--stepper-border-radius));flex-direction:column;justify-content:center;display:flex}:host([quiet]) #text-field{border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}:host([quiet]) #text-field .input{--luzmo-text-field-focus-indicator-color: transparent}:host([quiet]) #text-field.hide-stepper .input{border-inline-end-width:0;border-end-end-radius:0}:host([quiet]) #text-field .buttons{--luzmo-infield-button-border-color: transparent;border-width:0;border-block-end-width:var(--luzmo-stepper-border-width, var(--stepper-border-width));border-block-end-color:var(--highcontrast-stepper-border-color, var(--luzmo-stepper-border-color, var(--stepper-border-color)));border-block-end-style:solid;border-end-end-radius:0}:host([quiet]) #text-field .button{--luzmo-infield-button-width-stacked: var( --luzmo-stepper-button-width-quiet, var(--stepper-button-width) );--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-quiet, var(--stepper-button-border-color-quiet) );--luzmo-infield-button-stacked-bottom-border-block-end-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) );--luzmo-infield-button-stacked-bottom-border-radius-end-end: 0;--luzmo-infield-button-stacked-bottom-border-radius-end-start: 0;--luzmo-infield-button-fill-justify-content: flex-end;padding:0}:host([quiet]) #text-field .buttons,:host([quiet]) #text-field .input{background-color:initial}:host([quiet][focused]) #text-field,:host([quiet]) #text-field:focus{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus, var(--luzmo-stepper-border-color-focus, var(--stepper-border-color-focus)) )}:host([quiet][keyboard-focused]:not([disabled])) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( --luzmo-stepper-border-color-keyboard-focus, var(--stepper-border-color-keyboard-focus) ) );outline:none}:host([quiet][keyboard-focused]:not([disabled])) #text-field:after{background-color:var(--highcontrast-stepper-focus-indicator-color, var(--luzmo-stepper-focus-indicator-color, var(--stepper-focus-indicator-color)))}@media (hover: hover){:host(:hover:not([disabled])) #text-field{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var( --luzmo-stepper-buttons-border-color-hover, var(--stepper-buttons-border-color-hover) ) )}:host([focused]:hover) #text-field,:host(:hover) #text-field:focus{--luzmo-stepper-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-buttons-border-color-focus-hover, var(--stepper-buttons-border-color-focus-hover) ) );--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-buttons-border-color-focus-hover, var(--stepper-buttons-border-color-focus-hover) ) )}:host([focused]:hover) #text-field .buttons,:host([focused]:hover) #text-field .input,:host(:hover) #text-field:focus .buttons,:host(:hover) #text-field:focus .input{border-color:var(--highcontrast-stepper-border-color-focus-hover, var(--luzmo-stepper-border-color-focus-hover, var(--stepper-border-color-focus-hover)))}:host([invalid]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-hover-invalid, var(--stepper-border-color-hover-invalid) )}:host([invalid][focused]:not([disabled]):hover) #text-field,:host([invalid]:not([disabled]):hover) #text-field:focus{--luzmo-infield-button-border-color: var( --luzmo-stepper-border-color-focus-hover-invalid, var(--stepper-border-color-focus-hover-invalid) )}:host([quiet]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) )}:host([quiet]:not([disabled]):hover) #text-field .buttons{background-color:initial}:host([quiet][focused]:hover) #text-field,:host([quiet]:hover) #text-field:focus{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --luzmo-stepper-border-color-focus-hover, var(--stepper-border-color-focus-hover) ) )}:host([quiet][keyboard-focused]:not([disabled]):hover) #text-field{--luzmo-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var(--luzmo-stepper-border-color-hover, var(--stepper-border-color-hover)) )}}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{inset-inline-end:calc(var(--stepper-button-width) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)))}@media (forced-colors: active){:host{--highcontrast-stepper-border-color: CanvasText;--highcontrast-stepper-border-color-hover: Highlight;--highcontrast-stepper-border-color-focus: Highlight;--highcontrast-stepper-border-color-focus-hover: Highlight;--highcontrast-stepper-border-color-keyboard-focus: CanvasText;--highcontrast-stepper-button-background-color-default: Canvas;--highcontrast-stepper-button-background-color-hover: Canvas;--highcontrast-stepper-button-background-color-focus: Canvas;--highcontrast-stepper-button-background-color-keyboard-focus: Canvas;--highcontrast-stepper-focus-indicator-color: Highlight}:host([invalid]) #text-field{--highcontrast-stepper-border-color: Highlight;--highcontrast-stepper-border-color-hover: Highlight;--highcontrast-stepper-border-color-focus: Highlight;--highcontrast-stepper-border-color-focus-hover: Highlight;--highcontrast-stepper-border-color-keyboard-focus: Highlight;--highcontrast-infield-button-border-color: Highlight}:host([disabled]) #text-field{--highcontrast-stepper-border-color: GrayText;--highcontrast-infield-button-border-color: GrayText;--highcontrast-stepper-buttons-border-width: var( --luzmo-stepper-border-width, var(--stepper-border-width) )}}:host{--text-field-minimum-width-multiplier: 2;--stepper-border-width: var(--luzmo-border-width);--stepper-border-color: var(--luzmo-border-color);--stepper-border-color-hover: var(--luzmo-border-color-full-hover);--stepper-border-color-focus: var(--luzmo-border-color-full-focus);--stepper-border-color-focus-hover: var(--luzmo-border-color-full-focus);--stepper-border-color-keyboard-focus: var(--luzmo-border-color-full-focus);--stepper-border-radius: var(--luzmo-border-radius);--stepper-min-width-multiplier: 1.5;--stepper-animation-duration: var(--luzmo-animation-duration);--stepper-buttons-background-color: var(--luzmo-background-color);--stepper-buttons-border-style: none;--stepper-buttons-border-width: 0;--stepper-buttons-border-color: var(--luzmo-border-color);--stepper-buttons-border-color-hover: var(--luzmo-border-color-full-hover);--stepper-buttons-border-color-focus: var(--luzmo-border-color-full-focus);--stepper-buttons-border-color-keyboard-focus: var( --luzmo-border-color-focus );--stepper-button-font-size: var(--luzmo-font-size);--stepper-button-padding: 0px;--stepper-button-border-radius-reset: 0;--stepper-button-border-width: var(--luzmo-border-width);--stepper-button-background-color-focus: var(--luzmo-background-color-focus);--stepper-button-background-color-keyboard-focus: var( --luzmo-background-color-focus );--stepper-border-color-invalid: var(--luzmo-negative-color);--stepper-border-color-hover-invalid: var(--luzmo-negative-color-hover);--stepper-border-color-focus-invalid: var(--luzmo-negative-color-focus);--stepper-border-color-focus-hover-invalid: var(--luzmo-negative-color-focus);--stepper-border-color-keyboard-focus-invalid: var( --luzmo-negative-color-focus );--stepper-focus-indicator-width: var(--luzmo-indicator-width);--stepper-focus-indicator-gap: calc(-1 * var(--luzmo-border-width));--stepper-focus-indicator-color: var(--luzmo-indicator-color);--stepper-button-border-color-quiet: transparent;--stepper-button-border-color-disabled: var(--luzmo-border-color-disabled);--stepper-button-border-width-disabled: var(--luzmo-border-width);--stepper-buttons-background-color-disabled: var( --luzmo-background-color-disabled );--stepper-button-width: 20px;--stepper-height: var(--luzmo-component-height)}:host([size=s]) #text-field{--stepper-button-width: 16px;--stepper-height: var(--luzmo-component-height-s)}:host([size=m]) #text-field{--stepper-button-width: 20px;--stepper-height: var(--luzmo-component-height)}:host([size=l]) #text-field{--stepper-button-width: 28px;--stepper-height: var(--luzmo-component-height-l)}:host([size=xl]) #text-field{--stepper-button-width: 36px;--stepper-height: var(--luzmo-component-height-xl)}:host{inline-size:var(--luzmo-stepper-width, var(--stepper-width));--number-field-width: calc( var(--luzmo-stepper-height, var(--stepper-height)) * var( --luzmo-stepper-min-width-multiplier, var(--text-field-minimum-width-multiplier) ) + var(--luzmo-stepper-button-width, var(--stepper-button-width)) + var(--luzmo-stepper-border-width, var(--stepper-border-width)) * 2 );--luzmo-infield-button-border-width: var(--unset-value-resets-inheritance);--stepper-width: var(--number-field-width)}:host([size=s]){--stepper-width: calc(var(--number-field-width) / 5 * 4);--stepper-button-font-size: var(--luzmo-font-size-s)}:host([size=l]){--stepper-width: calc(var(--number-field-width) * 1.25);--stepper-button-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--stepper-width: calc(var(--number-field-width) * 1.25 * 1.25);--stepper-button-font-size: var(--luzmo-font-size-xl)}#text-field{inline-size:100%}.input{font-variant-numeric:tabular-nums}:host([readonly]) .buttons{pointer-events:none;visibility:hidden}:host([readonly]:not([disabled],[invalid],[focused],[keyboard-focused])) #text-field:hover .input{border-color:transparent}:host([hide-stepper]:not([quiet])) #text-field input{border:var(--luzmo-stepper-border-width, var(--stepper-border-width)) solid var(--luzmo-stepper-border-color, var(--stepper-border-color));border-radius:var(--luzmo-border-radius)}:host([quiet]) #text-field .button{--luzmo-infield-button-border-color: var( --luzmo-infield-border-color-quiet, transparent );--luzmo-infield-button-edge-to-fill: 0;--luzmo-infield-button-border-width: var( --luzmo-infield-button-border-width-quiet, 0 )}:host([grows]){--number-field-char-count: 1;--number-field-content-width: calc( var(--number-field-char-count) * 1ch + var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) * 2 );--number-field-grows-width: calc( var(--number-field-content-width) + var(--luzmo-stepper-button-width, var(--stepper-button-width)) + var(--luzmo-stepper-border-width, var(--stepper-border-width)) * 2 );inline-size:var(--number-field-grows-width);min-inline-size:var(--luzmo-stepper-width, var(--stepper-width));max-inline-size:100%}:host([grows]) #text-field{inline-size:100%}:host([grows]) #text-field .input{inline-size:100%;min-inline-size:0}';
35
+ var I = Object.defineProperty, R = Object.getOwnPropertyDescriptor, a = (p, e, t, r) => {
36
+ for (var o = r > 1 ? void 0 : r ? R(e, t) : e, i = p.length - 1, u; i >= 0; i--)
37
+ (u = p[i]) && (o = (r ? u(e, t, o) : u(o)) || o);
38
+ return r && o && I(e, t, o), o;
39
39
  };
40
40
  const O = 5, U = 100, h = "-", x = {
41
41
  "１": "1",
@@ -66,22 +66,26 @@ const O = 5, U = 100, h = "-", x = {
66
66
  九: "9",
67
67
  零: "0"
68
68
  };
69
- class l extends S {
69
+ class s extends E {
70
70
  constructor() {
71
- 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 = Number.NaN, this._trackingValue = "", this.decimalsChars = /* @__PURE__ */ new Set([".", ","]), this.valueBeforeFocus = "", this.isIntentDecimal = !1, this.changeCount = 0, this.languageResolver = new P(this), this.wasIndeterminate = !1, this.hasRecentlyReceivedPointerDown = !1, this.applyFocusElementLabel = (e) => {
71
+ super(...arguments), this.focused = !1, this._forcedUnit = "", this.formatOptions = {}, this.hideStepper = !1, this.grows = !1, this.indeterminate = !1, this.keyboardFocused = !1, this.managedInput = !1, this.stepModifier = 10, this._value = Number.NaN, this._trackingValue = "", this.decimalsChars = /* @__PURE__ */ new Set([".", ","]), this.valueBeforeFocus = "", this.isIntentDecimal = !1, this.changeCount = 0, this.languageResolver = new P(this), this.wasIndeterminate = !1, this.hasRecentlyReceivedPointerDown = !1, this.applyFocusElementLabel = (e) => {
72
72
  this.appliedLabel = e;
73
73
  }, this.isComposing = !1;
74
74
  }
75
+ /**
76
+ * The styles for the number field.
77
+ * @internal
78
+ */
75
79
  static get styles() {
76
80
  return [...super.styles, C(D)];
77
81
  }
78
82
  set value(e) {
79
- const o = this.validateInput(e);
80
- if (o === this.value)
83
+ const t = this.validateInput(e);
84
+ if (t === this.value)
81
85
  return;
82
- this.lastCommitedValue = o;
86
+ this.lastCommitedValue = t;
83
87
  const r = this._value;
84
- this._value = o, this.requestUpdate("value", r);
88
+ this._value = t, this.requestUpdate("value", r);
85
89
  }
86
90
  get value() {
87
91
  return this._value;
@@ -89,46 +93,66 @@ class l extends S {
89
93
  get inputValue() {
90
94
  return this.indeterminate ? this.formattedValue : this.inputElement.value;
91
95
  }
96
+ /**
97
+ * Set the value of the number field.
98
+ * @internal
99
+ */
92
100
  setValue(e = this.value) {
93
- const o = this.lastCommitedValue;
94
- this.value = e, !(o === void 0 || o === this.value) && (this.lastCommitedValue = this.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
101
+ const t = this.lastCommitedValue;
102
+ this.value = e, !(t === void 0 || t === this.value) && (this.lastCommitedValue = this.value, this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
95
103
  }
96
104
  /**
97
105
  * Retreive the value of the element parsed to a Number.
106
+ * @internal
98
107
  */
99
108
  get valueAsString() {
100
109
  return this._value.toString();
101
110
  }
111
+ /**
112
+ * Set the value of the number field as a string.
113
+ * @internal
114
+ */
102
115
  set valueAsString(e) {
103
116
  this.value = this.numberParser.parse(e);
104
117
  }
118
+ /**
119
+ * The formatted value of the number field.
120
+ */
105
121
  get formattedValue() {
106
122
  return Number.isNaN(this.value) ? "" : this.numberFormatter.format(this.value) + (this.focused ? "" : this._forcedUnit);
107
123
  }
124
+ /**
125
+ * Convert the input value to a number.
126
+ * @internal
127
+ */
108
128
  convertValueToNumber(e) {
109
- let o = [...e].map((i) => x[i] || i).join("");
129
+ let t = [...e].map((i) => x[i] || i).join("");
110
130
  const r = [...this.valueBeforeFocus].filter(
111
131
  (i) => this.decimalsChars.has(i)
112
- ), t = new Set(r);
113
- if (g() && this.inputElement.inputMode === "decimal" && o !== this.valueBeforeFocus) {
132
+ ), o = new Set(r);
133
+ if (g() && this.inputElement.inputMode === "decimal" && t !== this.valueBeforeFocus) {
114
134
  const u = this.numberFormatter.formatToParts(1000.1).find(
115
- (n) => n.type === "decimal"
135
+ (d) => d.type === "decimal"
116
136
  ).value;
117
- for (const n of t)
118
- !(n === u) && !this.isIntentDecimal && (o = o.replaceAll(
119
- new RegExp(n, "g"),
137
+ for (const d of o)
138
+ !(d === u) && !this.isIntentDecimal && (t = t.replaceAll(
139
+ new RegExp(d, "g"),
120
140
  ""
121
141
  ));
122
142
  let c = !1;
123
- const s = [...o];
124
- for (let n = s.length - 1; n >= 0; n--) {
125
- const m = s[n];
126
- this.decimalsChars.has(m) && (c ? s[n] = "" : (s[n] = u, c = !0));
143
+ const l = [...t];
144
+ for (let d = l.length - 1; d >= 0; d--) {
145
+ const m = l[d];
146
+ this.decimalsChars.has(m) && (c ? l[d] = "" : (l[d] = u, c = !0));
127
147
  }
128
- o = s.join("");
148
+ t = l.join("");
129
149
  }
130
- return this.numberParser.parse(o);
150
+ return this.numberParser.parse(t);
131
151
  }
152
+ /**
153
+ * The step for the number field.
154
+ * @internal
155
+ */
132
156
  get _step() {
133
157
  var e;
134
158
  return this.step !== void 0 ? this.step : ((e = this.formatOptions) == null ? void 0 : e.style) === "percent" ? 0.01 : 1;
@@ -139,9 +163,9 @@ class l extends S {
139
163
  return;
140
164
  }
141
165
  this.managedInput = !0, this.buttons.setPointerCapture(e.pointerId);
142
- const o = this.buttons.children[0].getBoundingClientRect(), r = this.buttons.children[1].getBoundingClientRect();
143
- this.findChange = (t) => {
144
- t.clientX >= o.x && t.clientY >= o.y && t.clientX <= o.x + o.width && t.clientY <= o.y + o.height ? this.change = (i) => this.increment(i.shiftKey ? this.stepModifier : 1) : t.clientX >= r.x && t.clientY >= r.y && t.clientX <= r.x + r.width && t.clientY <= r.y + r.height && (this.change = (i) => this.decrement(i.shiftKey ? this.stepModifier : 1));
166
+ const t = this.buttons.children[0].getBoundingClientRect(), r = this.buttons.children[1].getBoundingClientRect();
167
+ this.findChange = (o) => {
168
+ o.clientX >= t.x && o.clientY >= t.y && o.clientX <= t.x + t.width && o.clientY <= t.y + t.height ? this.change = (i) => this.increment(i.shiftKey ? this.stepModifier : 1) : o.clientX >= r.x && o.clientY >= r.y && o.clientX <= r.x + r.width && o.clientY <= r.y + r.height && (this.change = (i) => this.decrement(i.shiftKey ? this.stepModifier : 1));
145
169
  }, this.findChange(e), this.startChange(e);
146
170
  }
147
171
  startChange(e) {
@@ -166,9 +190,9 @@ class l extends S {
166
190
  stepBy(e) {
167
191
  if (this.disabled || this.readonly)
168
192
  return;
169
- const o = this.min === void 0 ? 0 : this.min;
193
+ const t = this.min === void 0 ? 0 : this.min;
170
194
  let r = this.value;
171
- r += e * this._step, Number.isNaN(this.value) && (r = o), r = this.valueWithLimits(r), this.requestUpdate(), this._value = this.validateInput(r), this.inputElement.value = this.numberFormatter.format(r), this.inputElement.dispatchEvent(
195
+ r += e * this._step, Number.isNaN(this.value) && (r = t), r = this.valueWithLimits(r), this.requestUpdate(), this._value = this.validateInput(r), this.inputElement.value = this.numberFormatter.format(r), this.inputElement.dispatchEvent(
172
196
  new Event("input", { bubbles: !0, composed: !0 })
173
197
  ), this.indeterminate = !1, this.focus();
174
198
  }
@@ -193,8 +217,8 @@ class l extends S {
193
217
  }
194
218
  onScroll(e) {
195
219
  e.preventDefault(), this.managedInput = !0;
196
- const o = e.shiftKey ? e.deltaX / Math.abs(e.deltaX) : e.deltaY / Math.abs(e.deltaY);
197
- o !== 0 && !Number.isNaN(o) && (this.stepBy(o * (e.shiftKey ? this.stepModifier : 1)), clearTimeout(this.queuedChangeEvent), this.queuedChangeEvent = setTimeout(() => {
220
+ const t = e.shiftKey ? e.deltaX / Math.abs(e.deltaX) : e.deltaY / Math.abs(e.deltaY);
221
+ t !== 0 && !Number.isNaN(t) && (this.stepBy(t * (e.shiftKey ? this.stepModifier : 1)), clearTimeout(this.queuedChangeEvent), this.queuedChangeEvent = setTimeout(() => {
198
222
  this.setValue();
199
223
  }, U)), this.managedInput = !1;
200
224
  }
@@ -241,8 +265,8 @@ class l extends S {
241
265
  handleInput(e) {
242
266
  if (this.isComposing) {
243
267
  if (e.data) {
244
- const s = this.convertValueToNumber(e.data);
245
- Number.isNaN(s) && (this.inputElement.value = this.indeterminate ? h : this._trackingValue, this.isComposing = !1);
268
+ const l = this.convertValueToNumber(e.data);
269
+ Number.isNaN(l) && (this.inputElement.value = this.indeterminate ? h : this._trackingValue, this.isComposing = !1);
246
270
  }
247
271
  e.stopPropagation();
248
272
  return;
@@ -251,34 +275,34 @@ class l extends S {
251
275
  h,
252
276
  ""
253
277
  )), e.data && this.decimalsChars.has(e.data) && (this.isIntentDecimal = !0);
254
- const { value: o, selectionStart: r } = this.inputElement, t = [...o].map((s) => x[s] || s).join("");
255
- if (this.numberParser.isValidPartialNumber(t)) {
278
+ const { value: t, selectionStart: r } = this.inputElement, o = [...t].map((l) => x[l] || l).join("");
279
+ if (this.numberParser.isValidPartialNumber(o)) {
256
280
  this.lastCommitedValue = this.lastCommitedValue ?? this.value;
257
- const s = this.convertValueToNumber(t);
258
- !t && this.indeterminateValue ? (this.indeterminate = !0, this._value = this.indeterminateValue) : (this.indeterminate = !1, this._value = this.validateInput(s)), this._trackingValue = t, this.inputElement.value = t, this.inputElement.setSelectionRange(r, r);
281
+ const l = this.convertValueToNumber(o);
282
+ !o && this.indeterminateValue ? (this.indeterminate = !0, this._value = this.indeterminateValue) : (this.indeterminate = !1, this._value = this.validateInput(l)), this._trackingValue = o, this.inputElement.value = o, this.inputElement.setSelectionRange(r, r);
259
283
  return;
260
284
  }
261
285
  this.inputElement.value = this.indeterminate ? h : this._trackingValue, e.stopPropagation();
262
- const i = t.length, u = this._trackingValue.length, c = (r || i) - (i - u);
286
+ const i = o.length, u = this._trackingValue.length, c = (r || i) - (i - u);
263
287
  this.inputElement.setSelectionRange(c, c);
264
288
  }
265
289
  valueWithLimits(e) {
266
- let o = e;
267
- return this.min !== void 0 && (o = Math.max(this.min, o)), this.max !== void 0 && (o = Math.min(this.max, o)), o;
290
+ let t = e;
291
+ return this.min !== void 0 && (t = Math.max(this.min, t)), this.max !== void 0 && (t = Math.min(this.max, t)), t;
268
292
  }
269
293
  validateInput(e) {
270
294
  e = this.valueWithLimits(e);
271
- const o = e < 0 ? -1 : 1;
272
- if (e *= o, this.step) {
273
- const r = this.min === void 0 ? 0 : this.min, t = Number.parseFloat(
295
+ const t = e < 0 ? -1 : 1;
296
+ if (e *= t, this.step) {
297
+ const r = this.min === void 0 ? 0 : this.min, o = Number.parseFloat(
274
298
  this.valueFormatter.format((e - r) % this.step)
275
299
  );
276
- if (t === 0 || (Math.round(t / this.step) === 1 ? e += this.step - t : e -= t), this.max !== void 0)
300
+ if (o === 0 || (Math.round(o / this.step) === 1 ? e += this.step - o : e -= o), this.max !== void 0)
277
301
  for (; e > this.max; )
278
302
  e -= this.step;
279
303
  e = Number.parseFloat(this.valueFormatter.format(e));
280
304
  }
281
- return e *= o, e;
305
+ return e *= t, e;
282
306
  }
283
307
  get displayValue() {
284
308
  const e = this.focused ? "" : h;
@@ -291,13 +315,13 @@ class l extends S {
291
315
  if (!this._numberFormatter || !this._numberFormatterFocused) {
292
316
  const {
293
317
  style: e,
294
- unit: o,
318
+ unit: t,
295
319
  unitDisplay: r,
296
- ...t
320
+ ...o
297
321
  } = this.formatOptions;
298
- e !== "unit" && (t.style = e), this._numberFormatterFocused = new b(
322
+ e !== "unit" && (o.style = e), this._numberFormatterFocused = new b(
299
323
  this.languageResolver.language,
300
- t
324
+ o
301
325
  );
302
326
  try {
303
327
  this._numberFormatter = new b(
@@ -305,7 +329,7 @@ class l extends S {
305
329
  this.formatOptions
306
330
  ), this._forcedUnit = "", this._numberFormatter.format(1);
307
331
  } catch {
308
- e === "unit" && (this._forcedUnit = o), this._numberFormatter = this._numberFormatterFocused;
332
+ e === "unit" && (this._forcedUnit = t), this._numberFormatter = this._numberFormatterFocused;
309
333
  }
310
334
  }
311
335
  return this.focused ? this._numberFormatterFocused : this._numberFormatter;
@@ -323,17 +347,21 @@ class l extends S {
323
347
  }
324
348
  return this._valueFormatter;
325
349
  }
350
+ /**
351
+ * The number parser for the number field.
352
+ * @internal
353
+ */
326
354
  get numberParser() {
327
355
  if (!this._numberParser || !this._numberParserFocused) {
328
356
  const {
329
357
  style: e,
330
- unit: o,
358
+ unit: t,
331
359
  unitDisplay: r,
332
- ...t
360
+ ...o
333
361
  } = this.formatOptions;
334
- e !== "unit" && (t.style = e), this._numberParserFocused = new f(
362
+ e !== "unit" && (o.style = e), this._numberParserFocused = new f(
335
363
  this.languageResolver.language,
336
- t
364
+ o
337
365
  );
338
366
  try {
339
367
  this._numberParser = new f(
@@ -341,7 +369,7 @@ class l extends S {
341
369
  this.formatOptions
342
370
  ), this._forcedUnit = "", this._numberParser.parse("0");
343
371
  } catch {
344
- e === "unit" && (this._forcedUnit = o), this._numberParser = this._numberParserFocused;
372
+ e === "unit" && (this._forcedUnit = t), this._numberParser = this._numberParserFocused;
345
373
  }
346
374
  }
347
375
  return this.focused ? this._numberParserFocused : this._numberParser;
@@ -354,7 +382,7 @@ class l extends S {
354
382
  class="buttons"
355
383
  @focusin=${this.handleFocusin}
356
384
  @focusout=${this.handleFocusout}
357
- ${E({
385
+ ${q({
358
386
  start: ["pointerdown", this.handlePointerdown],
359
387
  streamInside: [
360
388
  [
@@ -406,25 +434,32 @@ class l extends S {
406
434
  }
407
435
  update(e) {
408
436
  if ((e.has("formatOptions") || e.has("resolvedLanguage")) && this.clearNumberFormatterCache(), e.has("value") || e.has("max") || e.has("min") || e.has("step")) {
409
- const o = this.numberParser.parse(
437
+ const t = this.numberParser.parse(
410
438
  this.formattedValue.replace(this._forcedUnit, "")
411
439
  );
412
- this.value = o, this.clearValueFormatterCache();
440
+ this.value = t, this.clearValueFormatterCache();
413
441
  }
414
442
  super.update(e);
415
443
  }
416
444
  willUpdate(e) {
417
- this.multiline = !1, e.has(q) && this.clearNumberFormatterCache();
445
+ this.multiline = !1, e.has(S) && this.clearNumberFormatterCache();
418
446
  }
419
447
  firstUpdated(e) {
420
448
  super.firstUpdated(e), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("compositionstart", this.handleCompositionStart), this.addEventListener("compositionend", this.handleCompositionEnd);
421
449
  }
422
450
  updated(e) {
423
451
  if (!(!this.inputElement || !this.isConnected)) {
452
+ if (this.grows) {
453
+ const t = this.displayValue || this.placeholder || "";
454
+ this.style.setProperty(
455
+ "--number-field-char-count",
456
+ String(t.length)
457
+ );
458
+ }
424
459
  if (e.has("min") || e.has("formatOptions")) {
425
- const o = this.min !== void 0 && this.min >= 0, { maximumFractionDigits: r } = this.numberFormatter.resolvedOptions(), t = r && r > 0;
460
+ const t = this.min !== void 0 && this.min >= 0, { maximumFractionDigits: r } = this.numberFormatter.resolvedOptions(), o = r && r > 0;
426
461
  let i = "numeric";
427
- N() && !o ? i = "text" : (g() && t || V() && t && o) && (i = "decimal"), this.inputElement.inputMode = i;
462
+ N() && !t ? i = "text" : (g() && o || V() && o && t) && (i = "decimal"), this.inputElement.inputMode = i;
428
463
  }
429
464
  e.has("focused") && this.focused && !this.hasRecentlyReceivedPointerDown && this.formatOptions.unit && this.setSelectionRange(0, this.displayValue.length);
430
465
  }
@@ -432,38 +467,41 @@ class l extends S {
432
467
  }
433
468
  a([
434
469
  _(".buttons")
435
- ], l.prototype, "buttons", 2);
470
+ ], s.prototype, "buttons", 2);
471
+ a([
472
+ n({ type: Boolean, reflect: !0 })
473
+ ], s.prototype, "focused", 2);
436
474
  a([
437
- d({ type: Boolean, reflect: !0 })
438
- ], l.prototype, "focused", 2);
475
+ n({ type: Object, attribute: "format-options" })
476
+ ], s.prototype, "formatOptions", 2);
439
477
  a([
440
- d({ type: Object, attribute: "format-options" })
441
- ], l.prototype, "formatOptions", 2);
478
+ n({ type: Boolean, reflect: !0, attribute: "hide-stepper" })
479
+ ], s.prototype, "hideStepper", 2);
442
480
  a([
443
- d({ type: Boolean, reflect: !0, attribute: "hide-stepper" })
444
- ], l.prototype, "hideStepper", 2);
481
+ n({ type: Boolean, reflect: !0, attribute: "grows" })
482
+ ], s.prototype, "grows", 2);
445
483
  a([
446
- d({ type: Boolean, reflect: !0 })
447
- ], l.prototype, "indeterminate", 2);
484
+ n({ type: Boolean, reflect: !0 })
485
+ ], s.prototype, "indeterminate", 2);
448
486
  a([
449
- d({ type: Boolean, reflect: !0, attribute: "keyboard-focused" })
450
- ], l.prototype, "keyboardFocused", 2);
487
+ n({ type: Boolean, reflect: !0, attribute: "keyboard-focused" })
488
+ ], s.prototype, "keyboardFocused", 2);
451
489
  a([
452
- d({ type: Number })
453
- ], l.prototype, "max", 2);
490
+ n({ type: Number })
491
+ ], s.prototype, "max", 2);
454
492
  a([
455
- d({ type: Number })
456
- ], l.prototype, "min", 2);
493
+ n({ type: Number })
494
+ ], s.prototype, "min", 2);
457
495
  a([
458
- d({ type: Number })
459
- ], l.prototype, "step", 2);
496
+ n({ type: Number })
497
+ ], s.prototype, "step", 2);
460
498
  a([
461
- d({ type: Number, reflect: !0, attribute: "step-modifier" })
462
- ], l.prototype, "stepModifier", 2);
499
+ n({ type: Number, reflect: !0, attribute: "step-modifier" })
500
+ ], s.prototype, "stepModifier", 2);
463
501
  a([
464
- d({ type: Number })
465
- ], l.prototype, "value", 1);
466
- customElements.get("luzmo-number-field") || customElements.define("luzmo-number-field", l);
502
+ n({ type: Number })
503
+ ], s.prototype, "value", 1);
504
+ customElements.get("luzmo-number-field") || customElements.define("luzmo-number-field", s);
467
505
  export {
468
- l as LuzmoNumberField
506
+ s as LuzmoNumberField
469
507
  };