@salt-ds/lab 1.0.0-alpha.77 → 1.0.0-alpha.79

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.79
+
+### Patch Changes
+
+- 16aef1c: Updated the `NumberInput` API:
+
+  1. Simplified `format`, previously took `string` or `number` value, now receives value as a `string` and returns a `string`.
+     Used to render the final value before render.
+
+  ```diff
+  - format?: (value: number | string) => string | number;
+  + format?: (value: string) => string;
+  ```
+
+  2. Added `pattern`, a callback that matches as you type and determines whether the value can be ignored. By default, signed numeric decimal numbers can be entered.
+  3. Simplified `onChange`, reverted back to native `onChange`. Called for any text change to the input by the user.
+
+  ```diff
+  - onChange?: (event: SyntheticEvent | undefined, value: number | string) => void;
+  + onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  ```
+
+  5. Added `onNumberChange`, a callback called when the number value changes, due to increment/decrement or `onBlur`.
+
+  ```
+    onNumberChange?: (value: number | null) => void;
+  ```
+
+  6. Simplified `parse`, is now parsed a string form of the current value and returns either a `number`, `NaN` or `null` if empty.
+
+  ```diff
+  - parse?: (value: number | string) => string | number;
+  + parse?: (value: string) => number | null;
+  ```
+
+  Example
+
+  ```diff
+  <NumberInput
+     defaultValue={12}
+     pattern={(inputValue) =>
+       /^\$?(\d+(\.\d*)?|\.\d+)?%?$/.test(inputValue)
+     }
+     format={(value) => `£${value.replace(/\$/g, "")}`}
+     parse={(value) => {
+       if (!value.length) {
+         return null;
+       }
+       const parsedValue = value.replace(/\$/g, "");
+       return Number.parseFloat(parsedValue);
+     }}
+     onNumberChange={(newValue) => {
+       console.log(`Number changed to ${newValue}`);
+     }}
+  />
+  ```
+
+- b3d399b: - Fix `dayjs` adapter, where it showed dates as out of range.
+  - Fix a regression in disabled dates styles for dates outside of min/max.
+- Updated dependencies [d6dc07b]
+- Updated dependencies [d6dc07b]
+- Updated dependencies [d6dc07b]
+- Updated dependencies [b3d399b]
+- Updated dependencies [61c2bad]
+- Updated dependencies [fef411f]
+  - @salt-ds/icons@1.15.0
+  - @salt-ds/date-adapters@0.1.0-alpha.6
+  - @salt-ds/core@1.51.0
+
+## 1.0.0-alpha.78
+
+### Patch Changes
+
+- 630f412: Fixed TabsNext having double focus rings.
+- Updated dependencies [3b02e9e]
+- Updated dependencies [31e992a]
+- Updated dependencies [9e27ba2]
+- Updated dependencies [3ad2fc4]
+  - @salt-ds/core@1.50.0
+
 ## 1.0.0-alpha.77
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1540,7 +1540,7 @@
   --formFieldLegacy-helperText-opacity: 1;
   color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));
   font-size: var(--formFieldLegacy-helperText-fontSize);
-  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));
+  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));
   letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);
   line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));
   min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));
@@ -1608,7 +1608,7 @@
   cursor: var(--salt-cursor-disabled);
 }
 .saltFormLabel-necessityIndicator {
-  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));
+  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-typography-textDecoration-italic));
   margin-left: 1ch;
 }
 .saltFormLabel-statusIndicator.saltIcon {
@@ -2545,16 +2545,6 @@
 .saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {
   display: none;
 }
-.saltNumberInput-numberButton {
-  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
-}
-.saltNumberInput-numberButtonIncrement {
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;
-}
-.saltNumberInput-numberButtonDecrement {
-  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);
-}
 .saltNumberInput-activationIndicator {
   left: 0;
   bottom: 0;
@@ -2572,6 +2562,17 @@
 .saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {
   border-bottom-width: 0;
 }
+.saltNumberInput-increment {
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;
+}
+.saltNumberInput-decrement {
+  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);
+}
+.saltNumberInput-increment,
+.saltNumberInput-decrement {
+  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);
+  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
+}
 
 /* src/query-input/QueryInput.css */
 .saltQueryInputBody {
@@ -3389,6 +3390,9 @@ table.saltTable td.saltTable-td-align-right {
   left: 0;
   top: 0;
 }
+.saltTabNextTrigger:focus-visible {
+  outline: none;
+}
 
 /* src/tabs-next/TabOverflowList.css */
 .saltTabOverflow {
@@ -4569,4 +4573,4 @@ table.saltTable td.saltTable-td-align-right {
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/f07ce41b-6a4e-4158-bb04-2ac297d35d57.css */
+/* src/4fcc7286-b25c-4991-8c71-84e19def997e.css */

package/dist-cjs/calendar/useCalendarDay.js

@@ -20,7 +20,8 @@ function useCalendarDay(props) {
       setHoveredDate,
       isDayUnselectable,
       isDayHighlighted,
-      isOutsideAllowedMonths
+      isOutsideAllowedMonths,
+      isOutsideAllowedDates
     }
   } = CalendarContext.useCalendarContext();
   const selectionManager = useCalendarSelection.useCalendarSelectionDay({ date });
@@ -54,7 +55,7 @@ function useCalendarDay(props) {
   const unselectableReason = isDayUnselectable(date);
   const highlightedReason = isDayHighlighted(date);
   const outOfRange = !dateAdapter.isSame(date, month, "month");
-  const unselectable = Boolean(unselectableReason) || isOutsideAllowedMonths(date);
+  const unselectable = Boolean(unselectableReason) || isOutsideAllowedMonths(date) || isOutsideAllowedDates(date);
   const highlighted = Boolean(highlightedReason);
   const hidden = hideOutOfRangeDates ? outOfRange : false;
   return {

package/dist-cjs/calendar/useCalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is selectable but outside of current month.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseMove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseMove: handleMouseMove,\n  };\n\n  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, \"day\");\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const unselectable =\n    Boolean(unselectableReason) || isOutsideAllowedMonths(date);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":["useLocalization","useCalendarContext","useCalendarSelectionDay","useFocusManagement"],"mappings":";;;;;;;AA6DO,SAAS,eACd,KAAA,EACA;AACA,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAM,GAAI,KAAA;AACxB,EAAA,MAAM,EAAE,WAAA,EAAY,GAAIA,oCAAA,EAAuB;AAC/C,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO;AAAA,MACL,WAAA;AAAA,MACA,cAAA;AAAA,MACA,mBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,cAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,MACEC,kCAAA,EAA0B;AAC9B,EAAA,MAAM,gBAAA,GAAmBC,4CAAA,CAA+B,EAAE,IAAA,EAAM,CAAA;AAChE,EAAA,MAAM,YAAA,GAAeC,qCAAA,CAA0B,EAAE,IAAA,EAAM,CAAA;AAEvD,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,gBAAA,CAAiB,YAAY,KAAK,CAAA;AAClC,IAAA,YAAA,CAAa,YAAY,KAAK,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAM,aAAA,GAAyD,CAAC,KAAA,KAAU;AACxE,IAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AAChC,IAAA,gBAAA,CAAiB,cAAc,KAAK,CAAA;AAAA,EACtC,CAAA;AAEA,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,YAAA,CAAa,YAAY,KAAK,CAAA;AAC9B,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,eAAA,GAAwD,CAAC,KAAA,KAAU;AACvE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,OAAA,EAAS,WAAA;AAAA,IACT,SAAA,EAAW,aAAA;AAAA,IACX,OAAA,EAAS,WAAA;AAAA,IACT,WAAA,EAAa;AAAA,GACf;AAEA,EAAA,MAAM,UAAU,WAAA,IAAe,WAAA,CAAY,MAAA,CAAO,IAAA,EAAM,aAAa,KAAK,CAAA;AAC1E,EAAA,MAAM,WAAW,cAAA,CAAe,IAAA;AAAA,IAAK,CAAC,YAAA,KACpC,WAAA,CAAY,MAAA,CAAO,IAAA,EAAM,cAAc,KAAK;AAAA,MAE1C,CAAA,GACA,EAAA;AACJ,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAA,CAAO,WAAA,CAAY,MAAM,QAAQ,CAAA,EAAG,MAAM,KAAK,CAAA;AAEzE,EAAA,MAAM,kBAAA,GAAqB,kBAAkB,IAAI,CAAA;AACjD,EAAA,MAAM,iBAAA,GAAoB,iBAAiB,IAAI,CAAA;AAE/C,EAAA,MAAM,aAAa,CAAC,WAAA,CAAY,MAAA,CAAO,IAAA,EAAM,OAAO,OAAO,CAAA;AAC3D,EAAA,MAAM,YAAA,GACJ,OAAA,CAAQ,kBAAkB,CAAA,IAAK,uBAAuB,IAAI,CAAA;AAC5D,EAAA,MAAM,WAAA,GAAc,QAAQ,iBAAiB,CAAA;AAC7C,EAAA,MAAM,MAAA,GAAS,sBAAsB,UAAA,GAAa,KAAA;AAElD,EAAA,OAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,UAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG,gBAAA,CAAiB;AAAA,KACtB;AAAA,IACA,QAAA,EAAU;AAAA,MACR,QAAA;AAAA,MACA,cAAA,EAAgB,QAAQ,MAAA,GAAS,MAAA;AAAA,MACjC,aAAA,EAAe,SAAS,MAAA,GAAS,MAAA;AAAA,MACjC,GAAG,aAAA;AAAA,MACH,GAAG,gBAAA,CAAiB;AAAA,KACtB;AAAA,IACA,cAAA,EAAgB,UAAU,cAAA,GAAiB,IAAA;AAAA,IAC3C,kBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n  /**\n   * If `true`, the day is selectable but outside of current month.\n   */\n  outOfRange?: boolean;\n  /**\n   * If `true`, the day is selected.\n   */\n  selected?: boolean;\n  /**\n   * If `true`, the day is today.\n   */\n  today?: boolean;\n  /**\n   * If set, the day is unselectable with a reason.\n   */\n  unselectable?: string | false;\n  /**\n   * If set, the day is highlighted with a reason.\n   */\n  highlighted?: string | false;\n  /**\n   * If `true`, the day is focused.\n   */\n  focused?: boolean;\n  /**\n   * If `true`, the day is hidden.\n   */\n  hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n * @template TDate - The type of the date object.\n */\nexport interface useCalendarDayProps<TDate> {\n  /**\n   * The date of the calendar day.\n   */\n  date: TDate;\n  /**\n   * The month of the calendar day.\n   */\n  month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n  props: useCalendarDayProps<TDate>,\n) {\n  const { date, month } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: {\n      focusedDate,\n      focusedDateRef,\n      hideOutOfRangeDates,\n      timezone,\n      focusableDates,\n    },\n    helpers: {\n      setHoveredDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isOutsideAllowedMonths,\n      isOutsideAllowedDates,\n    },\n  } = useCalendarContext<TDate>();\n  const selectionManager = useCalendarSelectionDay<TDate>({ date });\n  const focusManager = useFocusManagement<TDate>({ date });\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    selectionManager.handleClick(event);\n    focusManager.handleClick(event);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleKeyDown(event);\n    selectionManager.handleKeyDown(event);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    focusManager.handleFocus(event);\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseMove: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const eventHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onFocus: handleFocus,\n    onMouseMove: handleMouseMove,\n  };\n\n  const focused = focusedDate && dateAdapter.isSame(date, focusedDate, \"day\");\n  const tabIndex = focusableDates.find((tabbableDate) =>\n    dateAdapter.isSame(date, tabbableDate, \"day\"),\n  )\n    ? 0\n    : -1;\n  const today = dateAdapter.isSame(dateAdapter.today(timezone), date, \"day\");\n\n  const unselectableReason = isDayUnselectable(date);\n  const highlightedReason = isDayHighlighted(date);\n\n  const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n  const unselectable =\n    Boolean(unselectableReason) ||\n    isOutsideAllowedMonths(date) ||\n    isOutsideAllowedDates(date);\n  const highlighted = Boolean(highlightedReason);\n  const hidden = hideOutOfRangeDates ? outOfRange : false;\n\n  return {\n    status: {\n      outOfRange,\n      today,\n      unselectable,\n      focused,\n      hidden,\n      highlighted,\n      ...selectionManager.status,\n    } as DayStatus,\n    dayProps: {\n      tabIndex,\n      \"aria-current\": today ? \"date\" : undefined,\n      \"aria-hidden\": hidden ? \"true\" : undefined,\n      ...eventHandlers,\n      ...selectionManager.dayProps,\n    } as ComponentPropsWithoutRef<\"button\">,\n    focusedDateRef: focused ? focusedDateRef : null,\n    unselectableReason,\n    highlightedReason,\n  };\n}\n"],"names":["useLocalization","useCalendarContext","useCalendarSelectionDay","useFocusManagement"],"mappings":"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"}

package/dist-cjs/form-field-legacy/FormHelperText.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormHelperText.css.js.map

package/dist-cjs/form-field-legacy/FormLabel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n  box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n  box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-typography-textDecoration-italic));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormLabel.css.js.map

package/dist-cjs/index.js

@@ -106,7 +106,6 @@ var Metric = require('./metric/Metric.js');
 var MetricContent = require('./metric/MetricContent.js');
 var MetricHeader = require('./metric/MetricHeader.js');
 var NumberInput = require('./number-input/NumberInput.js');
-var useNumberInput = require('./number-input/useNumberInput.js');
 var Portal = require('./portal/Portal.js');
 var QueryInput = require('./query-input/QueryInput.js');
 var useQueryInput = require('./query-input/useQueryInput.js');
@@ -281,7 +280,7 @@ exports.Metric = Metric.Metric;
 exports.MetricContent = MetricContent.MetricContent;
 exports.MetricHeader = MetricHeader.MetricHeader;
 exports.NumberInput = NumberInput.NumberInput;
-exports.useNumberInput = useNumberInput.useNumberInput;
+exports.isOutOfRange = NumberInput.isOutOfRange;
 exports.Portal = Portal.Portal;
 exports.QueryInput = QueryInput.QueryInput;
 exports.useQueryInput = useQueryInput.useQueryInput;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/number-input/NumberInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-active: var(--salt-editable-primary-background-active);\n  --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-active: var(--salt-editable-secondary-background-active);\n  --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-background-active: var(--salt-status-error-background);\n  --numberInput-background-hover: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-background-active: var(--salt-status-warning-background);\n  --numberInput-background-hover: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-background-active: var(--salt-status-success-background);\n  --numberInput-background-hover: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n\n.saltNumberInput-numberButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n";
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-active: var(--salt-editable-primary-background-active);\n  --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-active: var(--salt-editable-secondary-background-active);\n  --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-background-active: var(--salt-status-error-background);\n  --numberInput-background-hover: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-background-active: var(--salt-status-warning-background);\n  --numberInput-background-hover: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-background-active: var(--salt-status-success-background);\n  --numberInput-background-hover: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=NumberInput.css.js.map