@salt-ds/core 1.52.1 → 1.53.0

package/dist-es/pill-input/PillInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-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(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-active: var(--salt-status-error-background);\n  --pillInput-background-hover: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-active: var(--salt-status-success-background);\n  --pillInput-background-hover: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-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.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput .saltPill:focus-visible {\n  background: var(--salt-content-foreground-highlight);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n  border-color: transparent;\n  outline: none;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-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(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-active: var(--salt-status-error-background);\n  --pillInput-background-hover: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-active: var(--salt-status-success-background);\n  --pillInput-background-hover: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-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.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillInput.css.js.map

package/dist-types/combo-box/useComboBox.d.ts

@@ -20,6 +20,7 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     focusedState: boolean;
     setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setListRef: import("react").Ref<HTMLDivElement>;
     listRef: import("react").RefObject<HTMLDivElement>;
     options: HTMLElement[];
     register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;

package/dist-types/index.d.ts

@@ -32,6 +32,7 @@ export * from "./list-control";
 export * from "./menu";
 export * from "./multiline-input";
 export * from "./navigation-item";
+export * from "./number-input";
 export * from "./option";
 export * from "./overlay";
 export * from "./pagination";

package/dist-types/list-control/ListControlState.d.ts

@@ -59,6 +59,7 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     focusedState: boolean;
     setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setListRef: import("react").Ref<HTMLDivElement>;
     listRef: import("react").RefObject<HTMLDivElement>;
     options: HTMLElement[];
     register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;

package/dist-types/number-input/NumberInput.d.ts

@@ -0,0 +1,150 @@
+import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react";
+import type { ValidationStatus } from "../status-indicator";
+export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "value"> {
+    /**
+     * Styling variant with full border.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.
+     * @default false
+     */
+    clamp?: boolean;
+    /**
+     * Number of decimal places allowed (only used by default parser/formatter).
+     * Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.
+     * For high precision of larger numbers, consider a custom parser/formatter from a third-party library.
+     */
+    decimalScale?: number;
+    /**
+     * Custom decrement function to override the default increment behavior, use when higher precision or large numbers are required
+     * value: current value
+     * step: step value
+     * stepMultiplier: step multiplier value, when using shift key navigation
+     */
+    decrement?: (value: string, step: number, stepMultiplier: number) => string;
+    /**
+     * The default value. Use when the component is uncontrolled.
+     */
+    defaultValue?: number | string;
+    /**
+     * Disable the `NumberInput`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The marker to use in an empty read only Input.
+     * @default "—"
+     */
+    emptyReadOnlyMarker?: string;
+    /**
+     * End adornment component.
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Callback to format the NumberInput value.
+     * For high precision or large numbers, consider creating a custom parser/format using a third-party library.
+     */
+    format?: (value: string) => string;
+    /**
+     * Hide the number buttons.
+     * @default false
+     */
+    hideButtons?: boolean;
+    /**
+     * Custom increment function to override the default increment behavior, use when higher precision or large numbers are required
+     * value: current value
+     * step: step value
+     * stepMultiplier: step multiplier value, when using shift key navigation
+     */
+    increment?: (value: string, step: number, stepMultiplier: number) => string;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Optional ref for the input component.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Callback that matches on values as you type and determines whether the value can be entered.
+     */
+    pattern?: (inputValue: string) => boolean;
+    /**
+     * The maximum value that can be selected.
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     * The minimum value that can be selected.
+     * @default Number.MIN_SAFE_INTEGER
+     */
+    min?: number;
+    /**
+     * Callback function that is triggered when the value changes via user input or increment/decrement.
+     * Use `onNumberChange` if you want stable number, after blur or through increment/decrement
+     *
+     * @param event - The event that triggers the value change, can be null if called by long-press of increment/decrement
+     * @param value - value as string
+     */
+    onChange?: (event: SyntheticEvent | null, value: string) => void;
+    /**
+     * Callback function that is triggered when the value changes via increment/decrement or on blur.
+     *
+     * @param event - The event that triggers the change, can be null if called by long-press of increment/decrement
+     * @param value - The committed, parsed number value or null if an empty value
+     */
+    onNumberChange?: (event: SyntheticEvent | null, value: number | null) => void;
+    /**
+     * Callback to parse the NumberInput value, used with the `format` callback.
+     * For high precision or large numbers, consider creating a custom parser/format using a third-party library.   * Return null for empty input.
+     */
+    parse?: (value: string) => number | null;
+    /**
+     * A string displayed in a dimmed color when the `NumberInput` value is empty.
+     */
+    placeholder?: string;
+    /**
+     * A boolean property that controls the read-only state of the `NumberInput`.
+     * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.
+     * - When set to `false` or omitted, the `NumberInput` is editable by the user.
+     */
+    readOnly?: boolean;
+    /**
+     * Start adornment component.
+     */
+    startAdornment?: ReactNode;
+    /**
+     * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key
+     * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.
+     * @default 2
+     */
+    stepMultiplier?: number;
+    /**
+     * Specifies the alignment of the text within the `NumberInput`.
+     *
+     * @default "left"
+     */
+    textAlign?: "left" | "center" | "right";
+    /**
+     * Validation status.
+     */
+    validationStatus?: Extract<ValidationStatus, "error" | "warning" | "success">;
+    /**
+     * Styling variant.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Value of the `NumberInput`, to be used when in a controlled state.
+     */
+    value?: number | string;
+}
+export declare const isOutOfRange: (value: number | string, min: number, max: number) => boolean;
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/number-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./NumberInput";

package/dist-types/number-input/internal/useActivateWhileMouseDown.d.ts

@@ -0,0 +1,5 @@
+import { type SyntheticEvent } from "react";
+export declare function useActivateWhileMouseDown(activationFn: (event?: SyntheticEvent) => void, isAtLimit: boolean): {
+    activate: (event: SyntheticEvent) => void;
+    buttonDown: boolean;
+};

package/dist-types/number-input/internal/useInterval.d.ts

@@ -0,0 +1,3 @@
+type IntervalFunction = () => void;
+declare function useInterval(callback: IntervalFunction, delay: number | null): void;
+export { useInterval };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.52.1",
+  "version": "1.53.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/dist-cjs/combo-box/ComboBox.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltComboBox-focused {\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=ComboBox.css.js.map

package/dist-cjs/combo-box/ComboBox.css.js.map

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

package/dist-es/combo-box/ComboBox.css.js

@@ -1,4 +0,0 @@
-var css_248z = ".saltComboBox-focused {\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n";
-
-export { css_248z as default };
-//# sourceMappingURL=ComboBox.css.js.map

package/dist-es/combo-box/ComboBox.css.js.map

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