@salt-ds/core 1.42.0 → 1.44.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-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\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:active {\n  --pillInput-borderWidth: calc(var(--salt-editable-borderWidth-active) - var(--salt-size-border));\n}\n\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\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-editable-borderStyle-readonly);\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-editable-borderStyle-disabled);\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-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\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-border-strong) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\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-editable-borderStyle-disabled);\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-border-strong) - var(--salt-size-border));\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-editable-cursor-active);\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-editable-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-editable-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-100);\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(--salt-size-border));\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(--salt-size-border));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 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 */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\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:active {\n  --pillInput-borderWidth: calc(var(--salt-editable-borderWidth-active) - var(--salt-size-border));\n}\n\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\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-editable-borderStyle-readonly);\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-editable-borderStyle-disabled);\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-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\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-border-strong) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\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-editable-borderStyle-disabled);\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-border-strong) - var(--salt-size-border));\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-editable-cursor-active);\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-editable-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-editable-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(--salt-size-border));\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(--salt-size-border));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 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 */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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-es/pill-input/PillInput.js

@@ -239,6 +239,7 @@ const PillInput = forwardRef(function PillInput2({
             {
               "aria-describedby": clsx(formFieldDescribedBy, inputDescribedBy),
               "aria-labelledby": clsx(formFieldLabelledBy, inputLabelledBy),
+              autoComplete: "off",
               className: clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
               disabled: isDisabled,
               id,

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

@@ -1 +1 @@
-{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    onPillRemove?.(event, index);\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAyDpC,MAAA,SAAA,GAAY,UAAW,CAAA,SAASA,UAC3C,CAAA;AAAA,EACE,uBAAyB,EAAA,oBAAA;AAAA,EACzB,eAAiB,EAAA,YAAA;AAAA,EACjB,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,mBAAsB,GAAA,QAAA;AAAA,EACtB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,aAAa,EAAC;AAAA,EACd,QAAU,EAAA,YAAA;AAAA,EACV,WAAA;AAAA,EACA,QAAQ,EAAC;AAAA,EACT,YAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAY,GAAA,MAAA;AAAA,EACZ,KAAO,EAAA,SAAA;AAAA,EACP,YAAc,EAAA,gBAAA,GAAmB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,KAAA,CAAA;AAAA,EAChE,gBAAkB,EAAA,oBAAA;AAAA,EAClB,OAAU,GAAA,SAAA;AAAA,EACV,QAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,OAAQ,EAAA;AAC5C,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA;AAAA,MACT,kBAAoB,EAAA,oBAAA;AAAA,MACpB,iBAAmB,EAAA;AAAA,QACjB,EAAC;AAAA,IACL,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,SAAW,EAAA,iBAAA;AAAA,IACX,gBAAkB,EAAA;AAAA,MAChB,iBAAkB,EAAA;AAEtB,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,uBAAyB,EAAA,oBAAA;AAAA,IACzB,eAAiB,EAAA,YAAA;AAAA,IACjB,WAAa,EAAA;AAAA,GACf;AAEA,EAAA,MAAM,aAAa,QAAY,IAAA,iBAAA;AAC/B,EAAA,MAAM,aAAa,YAAgB,IAAA,iBAAA;AACnC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,oBAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,CAAE,CAAA,CAAA;AAE3D,EAAA,MAAM,eAAkB,GAAA,UAAA,IAAc,CAAC,gBAAA,IAAoB,CAAC,SAAA;AAC5D,EAAM,MAAA,YAAA,GAAe,kBAAkB,mBAAsB,GAAA,gBAAA;AAE7D,EAAM,MAAA;AAAA,IACJ,kBAAoB,EAAA,gBAAA;AAAA,IACpB,iBAAmB,EAAA,eAAA;AAAA,IACnB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,kBAAA;AAAA,IACV,SAAW,EAAA,cAAA;AAAA,IACX,GAAG;AAAA,GACD,GAAA,UAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAE,CAAA,QAAA,CAAS,iBAAiB,CACnD,GAAA,kBAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAY,EAAA,GAAI,gBAAiB,CAAA;AAAA,IACrD,KAAA;AAAA,IACA,MAAA,EAAQ,QAAY,IAAA,KAAA,CAAM,MAAS,GAAA;AAAA,GACpC,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAM,MAAA,UAAA,GAAa,GAAG,EAAE,CAAA,YAAA,CAAA;AAExB,EAAM,MAAA,eAAA,GAAkB,MAAsB,CAAA,EAAE,CAAA;AAChD,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAExD,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AAhMpE,IAAA,IAAA,EAAA;AAiMI,IAAA,MAAM,SAAS,KAAM,CAAA,aAAA;AACrB,IAAA,IAAI,MAAO,CAAA,cAAA,KAAmB,CAAK,IAAA,MAAA,CAAO,iBAAiB,CAAG,EAAA;AAC5D,MAAM,MAAA,aAAA,GAAgB,MAAM,MAAS,GAAA,CAAA;AACrC,MAAM,MAAA,QAAA,GAAW,MAAM,aAAa,CAAA;AACpC,MAAI,IAAA,KAAA,CAAM,GAAQ,KAAA,WAAA,IAAe,QAAU,EAAA;AACzC,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,aAAA,CAAA;AAAA,OACxB,MAAA,IAAW,KAAM,CAAA,GAAA,KAAQ,WAAa,EAAA;AACpC,QAAA,KAAA,CAAM,cAAe,EAAA;AAErB,QAAgB,CAAA,EAAA,GAAA,eAAA,CAAA,OAAA,CAAQ,aAAa,CAAA,KAArC,IAAwC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAC1C;AAGF,IAAiB,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,KAAA,CAAA;AAAA,GACnB;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAA4C,KAAA;AAlNzE,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAmNI,IAAA,MAAM,SAAS,KAAM,CAAA,aAAA;AACrB,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAA;AACzC,IAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,MAAA,KAAA,CAAM,cAAe,EAAA;AAErB,MAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAQ,CAAA,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAoC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,KACtC,MAAA,IAAW,KAAM,CAAA,GAAA,KAAQ,YAAc,EAAA;AACrC,MAAA,KAAA,CAAM,cAAe,EAAA;AAErB,MAAI,IAAA,KAAA,KAAU,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC9B,QAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,OACd,MAAA;AACL,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAQ,CAAA,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAoC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AACtC,eACS,KAAM,CAAA,GAAA,KAAQ,QAAY,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC9D,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,KAAA,CAAA;AAEtB,MAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,QAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,OACT,MAAA,IAAA,KAAA,KAAU,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AACrC,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,CAAC,MAAxC,IAA2C,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,OACtC,MAAA;AACL,QAAgB,CAAA,EAAA,GAAA,eAAA,CAAA,OAAA,CAAQ,KAAK,CAAA,KAA7B,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAClC;AACF,GACF;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAAyC,KAAA;AA/OpE,IAAA,IAAA,EAAA;AAgPI,IAAA,MAAM,SAAS,KAAM,CAAA,aAAA;AACrB,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAA;AACzC,IAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAe,KAAO,EAAA,KAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA,GACpB;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,GAClB;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,mBAAqB,EAAA,SAAA;AAAA,IACrB,GAAG;AAAA,GACL;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAC,GAAG,CAAC,UAAc,IAAA,OAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACN,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,wBACE,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,yBAAyB,GACnD,QACH,EAAA,cAAA,EAAA,CAAA;AAAA,6BAED,KAAI,EAAA,EAAA,SAAA,EAAW,aAAa,cAAc,CAAA,EAAG,KAAK,WACjD,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,iBAAA,EAAiB,IAAK,CAAA,mBAAA,EAAqB,UAAU,CAAA;AAAA,cACrD,YAAW,EAAA,kBAAA;AAAA,cACX,EAAI,EAAA,UAAA;AAAA,cAEH,QAAA,EAAA;AAAA,gBAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,IAAI,CAAC,IAAA,EAAM,0BACvB,GAAA,CAAA,KAAA,EAAA,EAAI,MAAK,UACR,EAAA,QAAA,kBAAA,IAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,YAAY,EAAA,KAAA;AAAA,oBACZ,QAAA;AAAA,oBACA,GAAA,EAAK,CAAC,OAAY,KAAA;AAChB,sBAAA,IAAI,OAAS,EAAA;AACX,wBAAgB,eAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,OAAA;AAAA,uBAC5B,MAAA;AACL,wBAAgB,eAAA,CAAA,OAAA,GAAU,gBAAgB,OAAQ,CAAA,MAAA;AAAA,0BAChD,CAAC,WAAW,MAAW,KAAA;AAAA,yBACzB;AAAA;AACF,qBACF;AAAA,oBACA,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,oBACxC,SAAW,EAAA,iBAAA;AAAA,oBACX,OAAS,EAAA,eAAA;AAAA,oBACT,QACE,EAAA,gBAAA,KAAqB,CAAM,CAAA,IAAA,gBAAA,KAAqB,QAAQ,CAAI,GAAA,CAAA,CAAA;AAAA,oBAG7D,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,sBACA,CAAC,aAAA,oBAAkB,GAAA,CAAA,SAAA,EAAA,EAAU,cAAW,gBAAiB,EAAA;AAAA;AAAA;AAAA,qBArBpC,IAuB1B,CAAA,CAAA;AAAA,gBAED,aAAa,MAAS,GAAA,KAAA,CAAM,0BAC1B,GAAA,CAAA,KAAA,EAAA,EAAI,MAAK,UACR,EAAA,QAAA,kBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,wBAAsB,EAAA,IAAA;AAAA,oBACtB,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,oBAE3C,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,iBAE9B,EAAA;AAAA;AAAA;AAAA,WAEJ;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,kBAAA,EAAkB,IAAK,CAAA,oBAAA,EAAsB,gBAAgB,CAAA;AAAA,cAC7D,iBAAA,EAAiB,IAAK,CAAA,mBAAA,EAAqB,eAAe,CAAA;AAAA,cAC1D,WAAW,IAAK,CAAA,YAAA,CAAa,OAAO,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,cAC5D,QAAU,EAAA,UAAA;AAAA,cACV,EAAA;AAAA,cACA,QAAU,EAAA,UAAA;AAAA,cACV,GAAK,EAAA,cAAA;AAAA,cACL,IAAA;AAAA,cACA,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,cAC5B,MAAQ,EAAA,UAAA;AAAA,cACR,QAAU,EAAA,YAAA;AAAA,cACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AAAA,cACrC,SAAW,EAAA,aAAA;AAAA,cACX,WAAA;AAAA,cACA,KAAA;AAAA,cACC,GAAG,aAAA;AAAA,cACH,GAAG,cAAA;AAAA,cACJ,QAAU,EAAA;AAAA;AAAA;AACZ,SACF,EAAA,CAAA;AAAA,QACC,CAAC,UAAA,IAAc,gBACd,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,0BAA0B,CACrD,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,MAAA,EAAQ,kBAAkB,CAC7C,EAAA,CAAA;AAAA,QAED,gCACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,uBAAuB,GACjD,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,wBAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,qBAAqB,CAAG,EAAA;AAAA;AAAA;AAAA,GACvD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nimport pillInputCss from \"./PillInput.css\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    onPillRemove?.(event, index);\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["PillInput","pillInputCss","value"],"mappings":"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"}

package/dist-es/slider/RangeSlider.js

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { SliderThumb } from './internal/SliderThumb.js';
+import { SliderTrack } from './internal/SliderTrack.js';
+import { useRangeSliderThumb } from './internal/useRangeSliderThumb.js';
+import { clampRange, calculatePercentage, toFloat } from './internal/utils.js';
+
+const RangeSlider = forwardRef(
+  function RangeSlider2({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-valuetext": ariaValueText,
+    accessibleMaxText,
+    accessibleMinText,
+    decimalPlaces = 2,
+    disabled: disabledProp = false,
+    format,
+    marks,
+    max = 100,
+    min = 0,
+    maxLabel,
+    minLabel,
+    onChange,
+    onChangeEnd,
+    restrictToMarks = false,
+    showTooltip = true,
+    step = 1,
+    stepMultiplier = 2,
+    value: valueProp,
+    defaultValue = [min, min + (max - min) / 2],
+    ...rest
+  }, ref) {
+    const [valueState, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "RangeSlider",
+      state: "value"
+    });
+    const lastValueRef = useRef(valueState);
+    const {
+      a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+      disabled: formFieldDisabled
+    } = useFormFieldProps();
+    const disabled = formFieldDisabled || disabledProp;
+    const inputRefs = Array.from(
+      { length: 2 },
+      () => useRef(null)
+    );
+    const value = clampRange(
+      valueState,
+      max,
+      min,
+      step,
+      decimalPlaces,
+      marks,
+      restrictToMarks
+    );
+    const progressPercentageStart = calculatePercentage(value[0], max, min);
+    const progressPercentageEnd = calculatePercentage(value[1], max, min);
+    const handleInputChange = (event, thumbIndex) => {
+      const parsedValue = toFloat(event.target.value);
+      const values = preventThumbOverlap(parsedValue, value, thumbIndex);
+      const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
+      if (haveValuesChanged) {
+        const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
+        setValue(values2);
+        onChange == null ? void 0 : onChange(event.nativeEvent, values2);
+        onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, values2);
+        lastValueRef.current = values2;
+      }
+    };
+    const {
+      handleBlur,
+      handleFocus,
+      handleKeydownOnThumb,
+      handlePointerDownOnThumb,
+      handlePointerDownOnTrack,
+      isDragging,
+      isFocusVisible,
+      sliderRef,
+      thumbIndexState,
+      preventThumbOverlap
+    } = useRangeSliderThumb({
+      decimalPlaces,
+      handleInputChange,
+      inputRefs,
+      marks,
+      min,
+      max,
+      step,
+      value,
+      onChange,
+      onChangeEnd,
+      restrictToMarks,
+      setValue,
+      stepMultiplier
+    });
+    const thumbProps = {
+      "aria-label": ariaLabel,
+      "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy),
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuetext": ariaValueText,
+      accessibleMaxText,
+      accessibleMinText,
+      disabled,
+      format,
+      max,
+      maxLabel,
+      min,
+      minLabel,
+      restrictToMarks,
+      showTooltip,
+      step,
+      stepMultiplier,
+      sliderValue: value
+    };
+    return /* @__PURE__ */ jsxs(
+      SliderTrack,
+      {
+        disabled,
+        format,
+        handlePointerDown: handlePointerDownOnTrack,
+        isDragging,
+        isRange: true,
+        marks,
+        min,
+        minLabel,
+        max,
+        maxLabel,
+        progressPercentageRange: [
+          progressPercentageStart,
+          progressPercentageEnd
+        ],
+        ref,
+        sliderRef,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index: 0,
+              handleInputChange: (event) => handleInputChange(event, 0),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
+              offsetPercentage: `${calculatePercentage(value[0], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 0,
+              isFocusVisible: isFocusVisible && thumbIndexState === 0,
+              inputRef: inputRefs[0],
+              onFocus: () => handleFocus(0),
+              onBlur: () => handleBlur(0),
+              ...thumbProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index: 1,
+              handleInputChange: (event) => handleInputChange(event, 1),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
+              offsetPercentage: `${calculatePercentage(value[1], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 1,
+              isFocusVisible: isFocusVisible && thumbIndexState === 1,
+              inputRef: inputRefs[1],
+              onFocus: () => handleFocus(1),
+              onBlur: () => handleBlur(1),
+              ...thumbProps
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { RangeSlider };
+//# sourceMappingURL=RangeSlider.js.map

package/dist-es/slider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = Array.from({ length: 2 }, () =>\n      useRef<HTMLInputElement>(null),\n    );\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["RangeSlider","values"],"mappings":"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"}

package/dist-es/slider/Slider.js

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { SliderThumb } from './internal/SliderThumb.js';
+import { SliderTrack } from './internal/SliderTrack.js';
+import { useSliderThumb } from './internal/useSliderThumb.js';
+import { clamp, calculatePercentage, toFloat } from './internal/utils.js';
+
+const Slider = forwardRef(function Slider2({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
+  accessibleMaxText,
+  accessibleMinText,
+  decimalPlaces = 2,
+  disabled: disabledProp = false,
+  format,
+  marks,
+  min = 0,
+  minLabel,
+  max = 100,
+  maxLabel,
+  onChange,
+  onChangeEnd,
+  restrictToMarks = false,
+  showTooltip = true,
+  step = 1,
+  stepMultiplier = 2,
+  value: valueProp,
+  defaultValue = min + (max - min) / 2,
+  ...rest
+}, ref) {
+  const [valueState, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Slider",
+    state: "value"
+  });
+  const {
+    a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+    disabled: formFieldDisabled
+  } = useFormFieldProps();
+  const disabled = formFieldDisabled || disabledProp;
+  const inputRef = useRef(null);
+  const value = clamp(
+    valueState,
+    max,
+    min,
+    step,
+    decimalPlaces,
+    marks,
+    restrictToMarks
+  );
+  const progressPercentage = calculatePercentage(toFloat(value), max, min);
+  const lastValueRef = useRef(value);
+  const handleInputChange = (event) => {
+    const parsedValue = toFloat(event.target.value);
+    if (parsedValue !== lastValueRef.current) {
+      setValue(parsedValue);
+      onChange == null ? void 0 : onChange(event.nativeEvent, parsedValue);
+      onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, parsedValue);
+      lastValueRef.current = parsedValue;
+    }
+  };
+  const {
+    handleBlur,
+    handleFocus,
+    handleKeydownOnThumb,
+    handlePointerDownOnThumb,
+    handlePointerDownOnTrack,
+    isDragging,
+    isFocusVisible,
+    sliderRef
+  } = useSliderThumb({
+    decimalPlaces,
+    handleInputChange,
+    inputRef,
+    marks,
+    min,
+    max,
+    step,
+    value,
+    onChange,
+    onChangeEnd,
+    restrictToMarks,
+    setValue,
+    stepMultiplier
+  });
+  return /* @__PURE__ */ jsx(
+    SliderTrack,
+    {
+      disabled,
+      format,
+      handlePointerDown: handlePointerDownOnTrack,
+      isDragging,
+      min,
+      minLabel,
+      max,
+      maxLabel,
+      marks,
+      progressPercentage,
+      ref,
+      sliderRef,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        SliderThumb,
+        {
+          "aria-label": ariaLabel,
+          "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+          "aria-valuemax": max,
+          "aria-valuemin": min,
+          "aria-valuetext": ariaValueText,
+          accessibleMaxText,
+          accessibleMinText,
+          disabled,
+          format,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          handleInputChange,
+          handlePointerDown: handlePointerDownOnThumb,
+          handleKeydownOnThumb,
+          inputRef,
+          isFocusVisible,
+          min,
+          minLabel,
+          max,
+          maxLabel,
+          offsetPercentage: `${progressPercentage}%`,
+          restrictToMarks,
+          sliderValue: value,
+          showTooltip,
+          step,
+          stepMultiplier,
+          trackDragging: isDragging
+        }
+      )
+    }
+  );
+});
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

package/dist-es/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    accessibleMaxText,\n    accessibleMinText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 100,\n    maxLabel,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event.nativeEvent, parsedValue);\n      onChangeEnd?.(event.nativeEvent, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    inputRef,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        accessibleMaxText={accessibleMaxText}\n        accessibleMinText={accessibleMinText}\n        disabled={disabled}\n        format={format}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        inputRef={inputRef}\n        isFocusVisible={isFocusVisible}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        offsetPercentage={`${progressPercentage}%`}\n        restrictToMarks={restrictToMarks}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["Slider"],"mappings":";;;;;;;;;;;;;;;AA+Ga,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,YAAc,EAAA,SAAA;AAAA,EACd,iBAAmB,EAAA,cAAA;AAAA,EACnB,gBAAkB,EAAA,aAAA;AAAA,EAClB,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAgB,GAAA,CAAA;AAAA,EAChB,UAAU,YAAe,GAAA,KAAA;AAAA,EACzB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAM,GAAA,GAAA;AAAA,EACN,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,WAAc,GAAA,IAAA;AAAA,EACd,IAAO,GAAA,CAAA;AAAA,EACP,cAAiB,GAAA,CAAA;AAAA,EACjB,KAAO,EAAA,SAAA;AAAA,EACP,YAAA,GAAe,GAAO,GAAA,CAAA,GAAA,GAAM,GAAO,IAAA,CAAA;AAAA,EACnC,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,EAAE,iBAAmB,EAAA,mBAAA,KAAwB,EAAC;AAAA,IACzD,QAAU,EAAA;AAAA,MACR,iBAAkB,EAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA;AACtC,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,KAAQ,GAAA,KAAA;AAAA,IACZ,UAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,qBAAqB,mBAAoB,CAAA,OAAA,CAAQ,KAAK,CAAA,EAAG,KAAK,GAAG,CAAA;AACvE,EAAM,MAAA,YAAA,GAAe,OAAe,KAAK,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAAyC,KAAA;AAClE,IAAA,MAAM,WAAc,GAAA,OAAA,CAAQ,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAC9C,IAAI,IAAA,WAAA,KAAgB,aAAa,OAAS,EAAA;AACxC,MAAA,QAAA,CAAS,WAAW,CAAA;AACpB,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,MAAM,WAAa,EAAA,WAAA,CAAA;AAC9B,MAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAc,MAAM,WAAa,EAAA,WAAA,CAAA;AACjC,MAAA,YAAA,CAAa,OAAU,GAAA,WAAA;AAAA;AACzB,GACF;AAEA,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,MAAA;AAAA,MACA,iBAAmB,EAAA,wBAAA;AAAA,MACnB,UAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,YAAY,EAAA,SAAA;AAAA,UACZ,iBAAiB,EAAA,IAAA,CAAK,mBAAqB,EAAA,cAAc,CAAK,IAAA,KAAA,CAAA;AAAA,UAC9D,eAAe,EAAA,GAAA;AAAA,UACf,eAAe,EAAA,GAAA;AAAA,UACf,gBAAgB,EAAA,aAAA;AAAA,UAChB,iBAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAA;AAAA,UACA,MAAQ,EAAA,UAAA;AAAA,UACR,OAAS,EAAA,WAAA;AAAA,UACT,iBAAA;AAAA,UACA,iBAAmB,EAAA,wBAAA;AAAA,UACnB,oBAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAA;AAAA,UACA,GAAA;AAAA,UACA,QAAA;AAAA,UACA,GAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA,EAAkB,GAAG,kBAAkB,CAAA,CAAA,CAAA;AAAA,UACvC,eAAA;AAAA,UACA,WAAa,EAAA,KAAA;AAAA,UACb,WAAA;AAAA,UACA,IAAA;AAAA,UACA,cAAA;AAAA,UACA,aAAe,EAAA;AAAA;AAAA;AACjB;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-es/slider/internal/SliderThumb.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSliderThumb {\n  align-items: center;\n  background: var(--salt-accent-borderColor);\n  cursor: var(--salt-selectable-cursor-hover);\n  display: flex;\n  height: var(--salt-size-selectable);\n  outline: none;\n  position: absolute;\n  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n  transform: translateX(-50%);\n  width: var(--salt-size-border-strong);\n  touch-action: none;\n}\n\n.saltSliderThumb-disabled {\n  background: var(--salt-accent-borderColor-disabled);\n  pointer-events: none;\n}\n\n.saltSliderThumb-focusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n  cursor: var(--draggable-grab-cursor-active);\n}\n\n.saltSliderThumb-input {\n  border: 0;\n  appearance: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  height: var(--salt-size-base);\n  left: var(--slider-progressPercentage);\n  margin: 0;\n  opacity: 0.0001;\n  overflow: hidden;\n  -webkit-appearance: none;\n  pointer-events: none;\n  width: var(--salt-size-base);\n  padding: 0;\n  position: absolute;\n  transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n  /* The second thumb needs to sit on top the first thumb */\n  z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n  use visibility: hidden as we need the screen\n  reader to announce it */\n.saltSliderThumb-accessibleText {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderThumb.css.js.map

package/dist-es/slider/internal/SliderThumb.css.js.map

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