@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/forms/select/styles/Select.css

@@ -1,71 +1,71 @@
-._dlenfc0-3-1-1._dlenfc0-3-1-1 {
+._dlenfc0-3-2-0._dlenfc0-3-2-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-1-1._dlenfc1-3-1-1 {
+._dlenfc1-3-2-0._dlenfc1-3-2-0 {
   min-width: unset;
 }
-._dlenfc3-3-1-1 {
+._dlenfc3-3-2-0 {
   width: 100%;
 }
-._dlenfc4-3-1-1 {
+._dlenfc4-3-2-0 {
   width: auto;
 }
-._dlenfc5-3-1-1 > span {
+._dlenfc5-3-2-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-1-1 {
+._dlenfc6-3-2-0 {
   display: flex;
 }
-._dlenfc7-3-1-1 {
+._dlenfc7-3-2-0 {
   transform: rotate(180deg);
 }
-._dlenfc9-3-1-1 {
+._dlenfc9-3-2-0 {
   width: auto;
 }
-._dlenfca-3-1-1 {
+._dlenfca-3-2-0 {
   cursor: not-allowed;
 }
-._dlenfcb-3-1-1 {
+._dlenfcb-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcc-3-1-1 {
+._dlenfcc-3-2-0 {
   width: 100%;
   position: relative;
 }
-._dlenfcd-3-1-1 {
+._dlenfcd-3-2-0 {
   overflow: auto;
 }
-._dlenfce-3-1-1 {
+._dlenfce-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcf-3-1-1 {
+._dlenfcf-3-2-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfcg-3-1-1 ._dlenfch-3-1-1 {
+._dlenfcg-3-2-0 ._dlenfch-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfci-3-1-1.strato-select-divider {
+._dlenfci-3-2-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfcj-3-1-1 {
+._dlenfcj-3-2-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfck-3-1-1 {
+._dlenfck-3-2-0 {
   min-width: 128px;
 }
-._dlenfcl-3-1-1 {
+._dlenfcl-3-2-0 {
   display: inline;
 }
-._dlenfcl-3-1-1 + ._dlenfcl-3-1-1:before {
+._dlenfcl-3-2-0 + ._dlenfcl-3-2-0:before {
   content: ", ";
 }
-._dlenfcm-3-1-1 {
+._dlenfcm-3-2-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
@@ -75,30 +75,30 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcm-3-1-1:hover:not(.strato-select-option--disabled) {
+._dlenfcm-3-2-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcm-3-1-1.strato-select-option--focus {
+._dlenfcm-3-2-0.strato-select-option--focus {
   outline: none;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfcm-3-1-1.strato-select-option--focus.strato-select-option--selected {
+._dlenfcm-3-2-0.strato-select-option--focus.strato-select-option--selected {
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._dlenfcm-3-1-1.strato-select-option--selected {
+._dlenfcm-3-2-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcm-3-1-1.strato-select-option--disabled {
+._dlenfcm-3-2-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcm-3-1-1.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcm-3-2-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcm-3-1-1.strato-select-option--selected:hover {
+._dlenfcm-3-2-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcm-3-1-1.strato-select-option--selected::before {
+._dlenfcm-3-2-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -109,11 +109,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcn-3-1-1:focus {
+._dlenfcn-3-2-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfco-3-1-1 {
+._dlenfco-3-2-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -123,17 +123,17 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfco-3-1-1:hover:not(.strato-select-option--disabled) {
+._dlenfco-3-2-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfco-3-1-1.strato-select-option--focus {
+._dlenfco-3-2-0.strato-select-option--focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfco-3-1-1.strato-select-option--disabled {
+._dlenfco-3-2-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcp-3-1-1 {
+._dlenfcp-3-2-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -145,29 +145,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcp-3-1-1 {
+.strato-select-option--disabled ._dlenfcp-3-2-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcq-3-1-1 {
+._dlenfcq-3-2-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcr-3-1-1 {
+._dlenfcr-3-2-0 {
   fill: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcr-3-1-1 {
+.strato-select-option--disabled ._dlenfcr-3-2-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcs-3-1-1 {
+._dlenfcs-3-2-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfct-3-1-1 {
+._dlenfct-3-2-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

package/esm/forms/select/styles/Select.sty.js

@@ -1,28 +1,28 @@
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-1-1";
-var filter = "_dlenfc1-3-1-1";
-var placeholderColor = "_dlenfch-3-1-1";
-var select = "_dlenfc0-3-1-1";
-var selectAll = "_dlenfcn-3-1-1";
-var selectGroupHeading = "_dlenfcb-3-1-1";
-var selectMenuDivider = "_dlenfci-3-1-1";
-var selectMenuListWrapper = "_dlenfcd-3-1-1";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-1-1", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-1-1" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcl-3-1-1";
-var selectNoOptionsMessage = "_dlenfce-3-1-1";
-var selectOptionMulti = "_dlenfco-3-1-1";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-1-1", variantClassNames: { selected: { true: "_dlenfcq-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcr-3-1-1";
-var selectOptionPrefix = "_dlenfcs-3-1-1";
-var selectOptionSingle = "_dlenfcm-3-1-1";
-var selectOptionSuffix = "_dlenfct-3-1-1";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-1-1", variantClassNames: { fullWidth: { true: "_dlenfc9-3-1-1" }, readOnly: { true: "_dlenfca-3-1-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-1-1", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-1-1" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcf-3-1-1";
-var selectVirtualizationWrapper = "_dlenfcc-3-1-1";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-1-1", variantClassNames: { fullWidth: { true: "_dlenfc3-3-1-1", false: "_dlenfc4-3-1-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfcg-3-1-1";
+var clearReactSelectZIndex = "_dlenfc5-3-2-0";
+var filter = "_dlenfc1-3-2-0";
+var placeholderColor = "_dlenfch-3-2-0";
+var select = "_dlenfc0-3-2-0";
+var selectAll = "_dlenfcn-3-2-0";
+var selectGroupHeading = "_dlenfcb-3-2-0";
+var selectMenuDivider = "_dlenfci-3-2-0";
+var selectMenuListWrapper = "_dlenfcd-3-2-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-2-0", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-2-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcl-3-2-0";
+var selectNoOptionsMessage = "_dlenfce-3-2-0";
+var selectOptionMulti = "_dlenfco-3-2-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-2-0", variantClassNames: { selected: { true: "_dlenfcq-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcr-3-2-0";
+var selectOptionPrefix = "_dlenfcs-3-2-0";
+var selectOptionSingle = "_dlenfcm-3-2-0";
+var selectOptionSuffix = "_dlenfct-3-2-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-2-0", variantClassNames: { fullWidth: { true: "_dlenfc9-3-2-0" }, readOnly: { true: "_dlenfca-3-2-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-2-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-2-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcf-3-2-0";
+var selectVirtualizationWrapper = "_dlenfcc-3-2-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-2-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-2-0", false: "_dlenfc4-3-2-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfcg-3-2-0";
 export {
   clearReactSelectZIndex,
   filter,

package/esm/forms/select/styles/Select.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-1-1';\nexport var filter = '_dlenfc1-3-1-1';\nexport var placeholderColor = '_dlenfch-3-1-1';\nexport var select = '_dlenfc0-3-1-1';\nexport var selectAll = '_dlenfcn-3-1-1';\nexport var selectGroupHeading = '_dlenfcb-3-1-1';\nexport var selectMenuDivider = '_dlenfci-3-1-1';\nexport var selectMenuListWrapper = '_dlenfcd-3-1-1';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-1-1',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-1-1'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-1-1';\nexport var selectNoOptionsMessage = '_dlenfce-3-1-1';\nexport var selectOptionMulti = '_dlenfco-3-1-1';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-1-1',variantClassNames:{selected:{true:'_dlenfcq-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-1-1';\nexport var selectOptionPrefix = '_dlenfcs-3-1-1';\nexport var selectOptionSingle = '_dlenfcm-3-1-1';\nexport var selectOptionSuffix = '_dlenfct-3-1-1';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-1-1',variantClassNames:{fullWidth:{true:'_dlenfc9-3-1-1'},readOnly:{true:'_dlenfca-3-1-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-1-1',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-1-1'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-1-1';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-1-1';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-1-1',variantClassNames:{fullWidth:{true:'_dlenfc3-3-1-1',false:'_dlenfc4-3-1-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-1-1';"],
+  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-2-0';\nexport var filter = '_dlenfc1-3-2-0';\nexport var placeholderColor = '_dlenfch-3-2-0';\nexport var select = '_dlenfc0-3-2-0';\nexport var selectAll = '_dlenfcn-3-2-0';\nexport var selectGroupHeading = '_dlenfcb-3-2-0';\nexport var selectMenuDivider = '_dlenfci-3-2-0';\nexport var selectMenuListWrapper = '_dlenfcd-3-2-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-2-0',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-2-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-2-0';\nexport var selectNoOptionsMessage = '_dlenfce-3-2-0';\nexport var selectOptionMulti = '_dlenfco-3-2-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-2-0',variantClassNames:{selected:{true:'_dlenfcq-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-2-0';\nexport var selectOptionPrefix = '_dlenfcs-3-2-0';\nexport var selectOptionSingle = '_dlenfcm-3-2-0';\nexport var selectOptionSuffix = '_dlenfct-3-2-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-2-0',variantClassNames:{fullWidth:{true:'_dlenfc9-3-2-0'},readOnly:{true:'_dlenfca-3-2-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-2-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-2-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-2-0';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-2-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-2-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-2-0',false:'_dlenfc4-3-2-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxL,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3M,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjM,IAAI,kBAAkB;",
   "names": []
 }

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-1-1 {
+._r47o0w1-3-2-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-1-1:empty::before {
+._r47o0w1-3-2-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-1-1:focus:empty {
+._r47o0w1-3-2-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-1-1 {
+._r47o0w2-3-2-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-1-1:focus:empty {
+._r47o0w2-3-2-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-1-1 {
+._r47o0w3-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-1-1:empty::before {
+._r47o0w3-3-2-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-1-1 {
+._r47o0w4-3-2-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-1-1", variantClassNames: { error: { true: "_r47o0w2-3-1-1" }, disabled: { true: "_r47o0w3-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-1-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-1-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-2-0", variantClassNames: { error: { true: "_r47o0w2-3-2-0" }, disabled: { true: "_r47o0w3-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-2-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-2-0";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-1-1',variantClassNames:{error:{true:'_r47o0w2-3-1-1'},disabled:{true:'_r47o0w3-3-1-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-1-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-1-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-2-0',variantClassNames:{error:{true:'_r47o0w2-3-2-0'},disabled:{true:'_r47o0w3-3-2-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-2-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACrO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/spin-buttons/hooks/useSpinButtonInteraction.js

@@ -0,0 +1,42 @@
+function useSpinButtonInteraction(props) {
+  const { disabled, selectAll, deselectAll, rootElement } = props;
+  return {
+    onClick: (event) => {
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        selectAll();
+      }
+    },
+    onFocus: (event) => {
+      if (event.target.hasAttribute("contenteditable") === false || event.target.getAttribute("contenteditable") === "false") {
+        return;
+      }
+      const selection = window.getSelection();
+      const selectionSpansMultipleNodes = selection && selection.anchorNode !== selection.focusNode && selection.toString().length > 0;
+      const isRestoringSelection = event.target.closest(".strato-inputgroup")?.hasAttribute("data-restoring-selection") ?? false;
+      if (selectionSpansMultipleNodes || isRestoringSelection) {
+        return;
+      }
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        selectAll();
+        rootElement?.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+      }
+    },
+    onBlur: (event) => {
+      if (event.target.hasAttribute("contenteditable") === false || event.target.getAttribute("contenteditable") === "false") {
+        return;
+      }
+      deselectAll();
+    }
+  };
+}
+export {
+  useSpinButtonInteraction
+};
+//# sourceMappingURL=useSpinButtonInteraction.js.map

package/esm/forms/spin-buttons/hooks/useSpinButtonInteraction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/forms/spin-buttons/hooks/useSpinButtonInteraction.ts"],
+  "sourcesContent": ["import {\n  MouseEvent as ReactMouseEvent,\n  FocusEvent as ReactFocusEvent,\n} from 'react';\n\n/**\n * Shared interaction behavior between Number and Text spin buttons.\n * @internal\n */\nexport function useSpinButtonInteraction(props: {\n  disabled: boolean;\n  selectAll: () => void;\n  deselectAll: () => void;\n  rootElement: HTMLSpanElement | null;\n}): {\n  onClick: (event: ReactMouseEvent) => void;\n  onFocus: (event: ReactFocusEvent) => void;\n  onBlur: (event: ReactFocusEvent) => void;\n} {\n  const { disabled, selectAll, deselectAll, rootElement } = props;\n  return {\n    onClick: (event: ReactMouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n      } else {\n        selectAll();\n      }\n    },\n    onFocus: (event: ReactFocusEvent) => {\n      if (\n        event.target.hasAttribute('contenteditable') === false ||\n        event.target.getAttribute('contenteditable') === 'false'\n      ) {\n        return;\n      }\n\n      // If the current selection spans multiple nodes (e.g., from a drag-select\n      // operation across multiple spin buttons), don't overwrite it with selectAll().\n      // This preserves drag-select across multiple spin buttons.\n      const selection = window.getSelection();\n      const selectionSpansMultipleNodes =\n        selection &&\n        selection.anchorNode !== selection.focusNode &&\n        selection.toString().length > 0;\n\n      // Check if we're in the middle of restoring contenteditable after a\n      // drag-select. The browser fires focus synchronously during restoration,\n      // before the selection can be restored via setBaseAndExtent.\n      const isRestoringSelection =\n        (event.target as HTMLElement)\n          .closest('.strato-inputgroup')\n          ?.hasAttribute('data-restoring-selection') ?? false;\n\n      if (selectionSpansMultipleNodes || isRestoringSelection) {\n        return;\n      }\n\n      if (disabled) {\n        event.preventDefault();\n      } else {\n        selectAll();\n        rootElement?.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    },\n    onBlur: (event: ReactFocusEvent) => {\n      if (\n        event.target.hasAttribute('contenteditable') === false ||\n        event.target.getAttribute('contenteditable') === 'false'\n      ) {\n        return;\n      }\n\n      deselectAll();\n    },\n  };\n}\n"],
+  "mappings": "AASO,SAAS,yBAAyB,OASvC;AACA,QAAM,EAAE,UAAU,WAAW,aAAa,YAAY,IAAI;AAC1D,SAAO;AAAA,IACL,SAAS,CAAC,UAA2B;AACnC,UAAI,UAAU;AACZ,cAAM,eAAe;AAAA,MACvB,OAAO;AACL,kBAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,SAAS,CAAC,UAA2B;AACnC,UACE,MAAM,OAAO,aAAa,iBAAiB,MAAM,SACjD,MAAM,OAAO,aAAa,iBAAiB,MAAM,SACjD;AACA;AAAA,MACF;AAKA,YAAM,YAAY,OAAO,aAAa;AACtC,YAAM,8BACJ,aACA,UAAU,eAAe,UAAU,aACnC,UAAU,SAAS,EAAE,SAAS;AAKhC,YAAM,uBACH,MAAM,OACJ,QAAQ,oBAAoB,GAC3B,aAAa,0BAA0B,KAAK;AAElD,UAAI,+BAA+B,sBAAsB;AACvD;AAAA,MACF;AAEA,UAAI,UAAU;AACZ,cAAM,eAAe;AAAA,MACvB,OAAO;AACL,kBAAU;AACV,qBAAa,eAAe;AAAA,UAC1B,OAAO;AAAA,UACP,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,QAAQ,CAAC,UAA2B;AAClC,UACE,MAAM,OAAO,aAAa,iBAAiB,MAAM,SACjD,MAAM,OAAO,aAAa,iBAAiB,MAAM,SACjD;AACA;AAAA,MACF;AAEA,kBAAY;AAAA,IACd;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js

@@ -9,13 +9,14 @@ import {
   useState
 } from "react";
 import { isElement } from "react-is";
-import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
-import { spinButtonCSS } from "../SpinButton.sty.js";
 import { useBeforeInputHandler } from "./hooks/useBeforeInputHandler.js";
 import { useValidationAndFormatting } from "./hooks/useValidationAndFormatting.js";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
-import { useAriaLabelingProps as _useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
+import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useSelection } from "../hooks/useSelection.js";
+import { spinButtonCSS } from "../SpinButton.sty.js";
+import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
+import { useSpinButtonInteraction } from "../hooks/useSpinButtonInteraction.js";
 const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     disabled = false,
@@ -34,13 +35,13 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     hasError,
     onKeyDownHandler: propKeyDownHandler,
     isCyclic = false,
+    "data-pattern": dataPattern,
     ...remainingProps
   } = props;
-  const [isEditable, setIsEditable] = useState(false);
   const [text, setText] = useState("");
   const [value, setValue] = useState(defaultValue);
   const [error, setError] = useState(false);
-  const ariaProps = _useAriaLabelingProps(props);
+  const ariaProps = useAriaLabelingProps(props);
   const rootRef = useRef(null);
   const { getSelection, setSelection, selectAll, deselectAll } = useSelection(rootRef);
   const { validate, format, parse } = useValidationAndFormatting(
@@ -134,6 +135,12 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     }
     document.activeElement === rootRef.current && sel && setSelection(sel);
   }, [valueProp, applyText, format, getSelection, setSelection]);
+  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({
+    disabled,
+    selectAll,
+    deselectAll,
+    rootElement: rootRef.current
+  });
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -142,7 +149,7 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       tabIndex: disabled ? void 0 : 0,
       contentEditable: (
         // contentEditable when focused and non-editable when blurred, allowing text selection.
-        !disabled && !readOnly && (isEditable || value === null) ? true : void 0
+        !disabled && !readOnly ? true : void 0
       ),
       spellCheck: false,
       className: clsx(
@@ -157,30 +164,11 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ...ariaProps,
       "aria-label": ariaProps["aria-label"] ?? placeholder,
       role: "spinbutton",
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-        } else {
-          selectAll();
-        }
-      },
-      onFocus: (e) => {
-        if (disabled) {
-          e.preventDefault();
-        } else {
-          setIsEditable(true);
-          selectAll();
-          rootRef.current?.scrollIntoView({
-            block: "nearest",
-            inline: "nearest"
-          });
-        }
-      },
-      onBlur: () => {
-        deselectAll();
-        setIsEditable(false);
-      },
-      onKeyDown: propKeyDownHandler ?? onKeyDownHandler
+      onClick,
+      onFocus,
+      onBlur,
+      onKeyDown: propKeyDownHandler ?? onKeyDownHandler,
+      "data-pattern": dataPattern
     }
   );
 });

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/number-spin-button/NumberSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useSelection } from '../hooks/useSelection.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [isEditable, setIsEditable] = useState(false);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = _useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingProps,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly && (isEditable || value === null)\n          ? true\n          : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        } else {\n          selectAll();\n        }\n      }}\n      onFocus={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        } else {\n          setIsEditable(true);\n          selectAll();\n          rootRef.current?.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n        }\n      }}\n      onBlur={() => {\n        deselectAll();\n        setIsEditable(false);\n      }}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === NumberSpinButton\n  );\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingProps,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === NumberSpinButton\n  );\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/spin-buttons/number-spin-button/hooks/useValueNavigation.js

@@ -61,6 +61,9 @@ const useValueNavigation = (ref, props, applyText) => {
       if (disabled || readOnly) {
         return;
       }
+      if (e.shiftKey || e.key === "Shift") {
+        return;
+      }
       const updateValue = (newValue) => {
         const sanitizedValue = constrainValue(
           newValue,

package/esm/forms/spin-buttons/number-spin-button/hooks/useValueNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/number-spin-button/hooks/useValueNavigation.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  type RefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { constrainValue } from '../../helper.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport { NumberSpinButtonProps } from '../types.js';\n\n/**\n * This hook provides a keydown handler to navigate a given value range.\n */\nexport const useValueNavigation = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText?: (value: string, fireOnChange?: boolean) => void,\n) => {\n  const {\n    disabled,\n    readOnly,\n    onChange,\n    displayFormat,\n    required,\n    minValue,\n    maxValue,\n    value,\n    isCyclic,\n  } = props;\n  const { selectAll } = useSelection(ref);\n  const { format } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue,\n    maxValue,\n  );\n\n  // Default transformer functions for spinbutton keyboard handlers\n  const {\n    onArrowUp = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) + NUMBER_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) - NUMBER_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) + NUMBER_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) - NUMBER_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (value, e) => {\n      // Only execute if a minValue prop was defined\n      if (minValue !== undefined) {\n        e.preventDefault();\n        return minValue;\n      }\n      return value;\n    },\n    onEnd = (value, e) => {\n      // Only execute if a maxValue prop was defined\n      if (maxValue !== undefined) {\n        e.preventDefault();\n        return maxValue;\n      }\n      return value;\n    },\n  } = props;\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n\n      // Ensures, the given value is always sanitized before updating the inner state.\n      const updateValue = (newValue: number | null) => {\n        const sanitizedValue = constrainValue(\n          newValue,\n          minValue,\n          maxValue,\n          isCyclic,\n        );\n        if (value === sanitizedValue) {\n          return;\n        }\n\n        const newText = format(sanitizedValue);\n        applyText?.(newText);\n        onChange?.(sanitizedValue);\n        selectAll();\n      };\n\n      switch (e.key) {\n        case 'ArrowUp':\n          updateValue(onArrowUp(value ?? 0, e));\n          break;\n        case 'ArrowDown':\n          updateValue(onArrowDown(value ?? 0, e));\n          break;\n        case 'PageUp':\n          updateValue(onPageUp(value ?? 0, e));\n          break;\n        case 'PageDown':\n          updateValue(onPageDown(value ?? 0, e));\n          break;\n        case 'Home':\n          updateValue(onHome(value ?? 0, e));\n          break;\n        case 'End':\n          updateValue(onEnd(value ?? 0, e));\n          break;\n      }\n    },\n    [\n      disabled,\n      readOnly,\n      minValue,\n      maxValue,\n      isCyclic,\n      value,\n      format,\n      applyText,\n      onChange,\n      selectAll,\n      onArrowUp,\n      onArrowDown,\n      onPageUp,\n      onPageDown,\n      onHome,\n      onEnd,\n    ],\n  );\n  return { onKeyDownHandler };\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,kCAAkC;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAMrC,MAAM,qBAAqB,CAChC,KACA,OACA,cACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,IAAI,aAAa,GAAG;AACtC,QAAM,EAAE,OAAO,IAAI;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,QAAM;AAAA,IACJ,YAAY,CAACA,QAAO,MAAM;AACxB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,cAAc,CAACA,QAAO,MAAM;AAC1B,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,WAAW,CAACA,QAAO,MAAM;AACvB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,aAAa,CAACA,QAAO,MAAM;AACzB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,SAAS,CAACA,QAAO,MAAM;AAErB,UAAI,aAAa,QAAW;AAC1B,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AACA,aAAOA;AAAA,IACT;AAAA,IACA,QAAQ,CAACA,QAAO,MAAM;AAEpB,UAAI,aAAa,QAAW;AAC1B,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AACA,aAAOA;AAAA,IACT;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA0B;AACzB,UAAI,YAAY,UAAU;AAExB;AAAA,MACF;AAGA,YAAM,cAAc,CAAC,aAA4B;AAC/C,cAAM,iBAAiB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AACA,YAAI,UAAU,gBAAgB;AAC5B;AAAA,QACF;AAEA,cAAM,UAAU,OAAO,cAAc;AACrC,oBAAY,OAAO;AACnB,mBAAW,cAAc;AACzB,kBAAU;AAAA,MACZ;AAEA,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AACH,sBAAY,UAAU,SAAS,GAAG,CAAC,CAAC;AACpC;AAAA,QACF,KAAK;AACH,sBAAY,YAAY,SAAS,GAAG,CAAC,CAAC;AACtC;AAAA,QACF,KAAK;AACH,sBAAY,SAAS,SAAS,GAAG,CAAC,CAAC;AACnC;AAAA,QACF,KAAK;AACH,sBAAY,WAAW,SAAS,GAAG,CAAC,CAAC;AACrC;AAAA,QACF,KAAK;AACH,sBAAY,OAAO,SAAS,GAAG,CAAC,CAAC;AACjC;AAAA,QACF,KAAK;AACH,sBAAY,MAAM,SAAS,GAAG,CAAC,CAAC;AAChC;AAAA,MACJ;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,EAAE,iBAAiB;AAC5B;",
+  "sourcesContent": ["import {\n  useCallback,\n  type RefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { constrainValue } from '../../helper.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport { NumberSpinButtonProps } from '../types.js';\n\n/**\n * This hook provides a keydown handler to navigate a given value range.\n */\nexport const useValueNavigation = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText?: (value: string, fireOnChange?: boolean) => void,\n) => {\n  const {\n    disabled,\n    readOnly,\n    onChange,\n    displayFormat,\n    required,\n    minValue,\n    maxValue,\n    value,\n    isCyclic,\n  } = props;\n  const { selectAll } = useSelection(ref);\n  const { format } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue,\n    maxValue,\n  );\n\n  // Default transformer functions for spinbutton keyboard handlers\n  const {\n    onArrowUp = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) + NUMBER_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) - NUMBER_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) + NUMBER_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (value, e) => {\n      e.preventDefault();\n      return (value ?? 0) - NUMBER_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (value, e) => {\n      // Only execute if a minValue prop was defined\n      if (minValue !== undefined) {\n        e.preventDefault();\n        return minValue;\n      }\n      return value;\n    },\n    onEnd = (value, e) => {\n      // Only execute if a maxValue prop was defined\n      if (maxValue !== undefined) {\n        e.preventDefault();\n        return maxValue;\n      }\n      return value;\n    },\n  } = props;\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n\n      if (e.shiftKey || e.key === 'Shift') {\n        return;\n      }\n\n      // Ensures, the given value is always sanitized before updating the inner state.\n      const updateValue = (newValue: number | null) => {\n        const sanitizedValue = constrainValue(\n          newValue,\n          minValue,\n          maxValue,\n          isCyclic,\n        );\n        if (value === sanitizedValue) {\n          return;\n        }\n\n        const newText = format(sanitizedValue);\n        applyText?.(newText);\n        onChange?.(sanitizedValue);\n        selectAll();\n      };\n\n      switch (e.key) {\n        case 'ArrowUp':\n          updateValue(onArrowUp(value ?? 0, e));\n          break;\n        case 'ArrowDown':\n          updateValue(onArrowDown(value ?? 0, e));\n          break;\n        case 'PageUp':\n          updateValue(onPageUp(value ?? 0, e));\n          break;\n        case 'PageDown':\n          updateValue(onPageDown(value ?? 0, e));\n          break;\n        case 'Home':\n          updateValue(onHome(value ?? 0, e));\n          break;\n        case 'End':\n          updateValue(onEnd(value ?? 0, e));\n          break;\n      }\n    },\n    [\n      disabled,\n      readOnly,\n      minValue,\n      maxValue,\n      isCyclic,\n      value,\n      format,\n      applyText,\n      onChange,\n      selectAll,\n      onArrowUp,\n      onArrowDown,\n      onPageUp,\n      onPageDown,\n      onHome,\n      onEnd,\n    ],\n  );\n  return { onKeyDownHandler };\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,kCAAkC;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAMrC,MAAM,qBAAqB,CAChC,KACA,OACA,cACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,IAAI,aAAa,GAAG;AACtC,QAAM,EAAE,OAAO,IAAI;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,QAAM;AAAA,IACJ,YAAY,CAACA,QAAO,MAAM;AACxB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,cAAc,CAACA,QAAO,MAAM;AAC1B,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,WAAW,CAACA,QAAO,MAAM;AACvB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,aAAa,CAACA,QAAO,MAAM;AACzB,QAAE,eAAe;AACjB,cAAQA,UAAS,KAAK,4BAA4B;AAAA,IACpD;AAAA,IACA,SAAS,CAACA,QAAO,MAAM;AAErB,UAAI,aAAa,QAAW;AAC1B,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AACA,aAAOA;AAAA,IACT;AAAA,IACA,QAAQ,CAACA,QAAO,MAAM;AAEpB,UAAI,aAAa,QAAW;AAC1B,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AACA,aAAOA;AAAA,IACT;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA0B;AACzB,UAAI,YAAY,UAAU;AAExB;AAAA,MACF;AAEA,UAAI,EAAE,YAAY,EAAE,QAAQ,SAAS;AACnC;AAAA,MACF;AAGA,YAAM,cAAc,CAAC,aAA4B;AAC/C,cAAM,iBAAiB;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AACA,YAAI,UAAU,gBAAgB;AAC5B;AAAA,QACF;AAEA,cAAM,UAAU,OAAO,cAAc;AACrC,oBAAY,OAAO;AACnB,mBAAW,cAAc;AACzB,kBAAU;AAAA,MACZ;AAEA,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AACH,sBAAY,UAAU,SAAS,GAAG,CAAC,CAAC;AACpC;AAAA,QACF,KAAK;AACH,sBAAY,YAAY,SAAS,GAAG,CAAC,CAAC;AACtC;AAAA,QACF,KAAK;AACH,sBAAY,SAAS,SAAS,GAAG,CAAC,CAAC;AACnC;AAAA,QACF,KAAK;AACH,sBAAY,WAAW,SAAS,GAAG,CAAC,CAAC;AACrC;AAAA,QACF,KAAK;AACH,sBAAY,OAAO,SAAS,GAAG,CAAC,CAAC;AACjC;AAAA,QACF,KAAK;AACH,sBAAY,MAAM,SAAS,GAAG,CAAC,CAAC;AAChC;AAAA,MACJ;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO,EAAE,iBAAiB;AAC5B;",
   "names": ["value"]
 }

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroup.js

@@ -27,6 +27,7 @@ const InternalSpinButtonGroup = ({
     "span",
     {
       className: clsx(spinButtonGroupCSS, consumerClassName),
+      "data-valuetype": "iso8601",
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/spin-button-group/SpinButtonGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\nimport { useNavigateSpinButton } from './hooks/useNavigateSpinButton.js';\nimport { useValueOverflow } from './hooks/useValueOverflow.js';\nimport { SpinButtonGroupSeparator } from './SpinButtonGroupSeparator.js';\nimport type { SpinButtonGroupProps } from './types.js';\nimport { NumberSpinButton } from '../number-spin-button/NumberSpinButton.js';\nimport { spinButtonGroupCSS } from '../SpinButton.sty.js';\nimport { TextSpinButton } from '../text-spin-button/TextSpinButton.js';\n\nconst InternalSpinButtonGroup = ({\n  children,\n  valueOverflow = false,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n}: PropsWithChildren<SpinButtonGroupProps>) => {\n  const { clonedChildren, spinButtonRefs, triggerRefs } = useValueOverflow(\n    children,\n    valueOverflow,\n  );\n\n  const { onKeyDownHandler } = useNavigateSpinButton(\n    spinButtonRefs,\n    triggerRefs,\n  );\n\n  return (\n    <span\n      className={clsx(spinButtonGroupCSS, consumerClassName)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onKeyDown={onKeyDownHandler}\n    >\n      {clonedChildren}\n    </span>\n  );\n};\n\n/**\n * Use the _SpinButtonGroup to combine text and number spinbuttons and provide ootb navigation between them.\n * @internal\n */\nexport const SpinButtonGroup = Object.assign(InternalSpinButtonGroup, {\n  Number: NumberSpinButton,\n  Text: TextSpinButton,\n  Separator: SpinButtonGroupSeparator,\n});\n\n(\n  SpinButtonGroup as typeof SpinButtonGroup & { displayName: string }\n).displayName = '_SpinButtonGroup';\n"],
-  "mappings": "AA+BI;AA/BJ,OAAO,UAAU;AAGjB,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAE/B,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AACtB,MAA+C;AAC7C,QAAM,EAAE,gBAAgB,gBAAgB,YAAY,IAAI;AAAA,IACtD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,MACrD,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,yBAAyB;AAAA,EACpE,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAGC,gBACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\nimport { useNavigateSpinButton } from './hooks/useNavigateSpinButton.js';\nimport { useValueOverflow } from './hooks/useValueOverflow.js';\nimport { SpinButtonGroupSeparator } from './SpinButtonGroupSeparator.js';\nimport type { SpinButtonGroupProps } from './types.js';\nimport { NumberSpinButton } from '../number-spin-button/NumberSpinButton.js';\nimport { spinButtonGroupCSS } from '../SpinButton.sty.js';\nimport { TextSpinButton } from '../text-spin-button/TextSpinButton.js';\n\nconst InternalSpinButtonGroup = ({\n  children,\n  valueOverflow = false,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n}: PropsWithChildren<SpinButtonGroupProps>) => {\n  const { clonedChildren, spinButtonRefs, triggerRefs } = useValueOverflow(\n    children,\n    valueOverflow,\n  );\n\n  const { onKeyDownHandler } = useNavigateSpinButton(\n    spinButtonRefs,\n    triggerRefs,\n  );\n\n  return (\n    <span\n      className={clsx(spinButtonGroupCSS, consumerClassName)}\n      data-valuetype=\"iso8601\"\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onKeyDown={onKeyDownHandler}\n    >\n      {clonedChildren}\n    </span>\n  );\n};\n\n/**\n * Use the _SpinButtonGroup to combine text and number spinbuttons and provide ootb navigation between them.\n * @internal\n */\nexport const SpinButtonGroup = Object.assign(InternalSpinButtonGroup, {\n  Number: NumberSpinButton,\n  Text: TextSpinButton,\n  Separator: SpinButtonGroupSeparator,\n});\n\n(\n  SpinButtonGroup as typeof SpinButtonGroup & { displayName: string }\n).displayName = '_SpinButtonGroup';\n"],
+  "mappings": "AA+BI;AA/BJ,OAAO,UAAU;AAGjB,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAE/B,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AACtB,MAA+C;AAC7C,QAAM,EAAE,gBAAgB,gBAAgB,YAAY,IAAI;AAAA,IACtD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,MACrD,kBAAe;AAAA,MACf,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,yBAAyB;AAAA,EACpE,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAGC,gBACA,cAAc;",
   "names": []
 }