@salt-ds/lab 1.0.0-alpha.102 → 1.0.0-alpha.103

package/dist-es/contact-details/ContactDetails.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-content-primary-foreground);\n  --contactDetails-label-color: var(--salt-content-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
+var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-content-primary-foreground);\n  --contactDetails-label-color: var(--salt-content-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-sentiment-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-spacing-100);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-spacing-100) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-spacing-100);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-spacing-100);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-spacing-100);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-spacing-100);\n  margin-left: calc(var(--salt-spacing-100) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-100);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-spacing-100);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-spacing-100);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-spacing-100) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-spacing-100) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-spacing-100) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-sentiment-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ContactDetails.css.js.map

package/dist-es/content-status/ContentStatus.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n  font-weight: var(--salt-text-display1-fontWeight);\n  /* TODO: Use correct token */\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-100);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n  font-weight: var(--salt-text-display1-fontWeight);\n  /* TODO: Use correct token */\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-spacing-100));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ContentStatus.css.js.map

package/dist-es/dropdown/DropdownButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-subtle-background);\n  --saltButton-background-active: var(--salt-actionable-subtle-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-subtle-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-subtle-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DropdownButton.css.js.map

package/dist-es/form-field-legacy/FormFieldLegacy.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-background: var(--salt-editable-primary-background);\n  --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n  border: 0;\n  display: inline-grid;\n  margin: var(--saltFormFieldLegacy-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormFieldLegacy-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(\n    var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n    var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n  );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n  --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n  --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n  --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n  --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n  --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n  --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingLeft: 0px;\n  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n  --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n  --formFieldLegacy-label-marginTop: 0;\n  --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n  background: linear-gradient(\n    to top,\n    transparent var(--formFieldLegacy-background-offset-height),\n    var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n  );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formFieldLegacy-helperText-height, 0px);\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n  outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
+var css_248z = ".salt-density-high {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-background: var(--salt-editable-primary-background);\n  --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n  border: 0;\n  display: inline-grid;\n  margin: var(--saltFormFieldLegacy-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormFieldLegacy-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(\n    var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n    var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n  );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n  --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n  --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n  --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-opacity: 0.4;\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-helperText-opacity: 0.4;\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n  --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n  --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n  --formFieldLegacy-label-marginTop: var(--salt-spacing-100);\n  --formFieldLegacy-label-paddingLeft: 0px;\n  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-spacing-100));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n  --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n  --formFieldLegacy-label-marginTop: 0;\n  --formFieldLegacy-label-paddingLeft: var(--salt-spacing-100);\n  --formFieldLegacy-label-paddingRight: var(--salt-spacing-100);\n  /* Uses density invariant value unless helper text provided */\n  --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n  background: linear-gradient(\n    to top,\n    transparent var(--formFieldLegacy-background-offset-height),\n    var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n  );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formFieldLegacy-helperText-height, 0px);\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n  outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormFieldLegacy.css.js.map

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

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

package/dist-es/index.js

@@ -41,6 +41,7 @@ export { FormattedInput } from './formatted-input/FormattedInput.js';
 export { InputLegacy as Input } from './input-legacy/InputLegacy.js';
 export { StaticInputAdornment } from './input-legacy/StaticInputAdornment.js';
 export { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
+export { LinkButton } from './link-button/LinkButton.js';
 export { Highlighter } from './list/Highlighter.js';
 export { List } from './list/List.js';
 export { ListItem, ListItemProxy } from './list/ListItem.js';
@@ -78,6 +79,7 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricContent } from './metric/MetricContent.js';
 export { MetricHeader } from './metric/MetricHeader.js';
+export { OnSolidButton } from './on-solid-button/OnSolidButton.js';
 export { Portal } from './portal/Portal.js';
 export { QueryInput } from './query-input/QueryInput.js';
 export { useQueryInput } from './query-input/useQueryInput.js';

package/dist-es/index.js.map

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

package/dist-es/input-legacy/InputLegacy.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n  --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n  align-items: center;\n  background: var(--saltInputLegacy-background, none);\n  border: var(--saltInputLegacy-border, none);\n  border-radius: var(--saltInputLegacy-borderRadius, 0);\n  color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n  cursor: var(--saltInputLegacy-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputLegacy-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputLegacy-minWidth, 8em);\n  padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputLegacy-position, relative);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n  outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n  background: var(--saltInputLegacy-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n  padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n  padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n  margin: var(--inputLegacy-button-inset);\n  padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n  min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n  width: 100%;\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2 / 3);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);\n  --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n  align-items: center;\n  background: var(--saltInputLegacy-background, none);\n  border: var(--saltInputLegacy-border, none);\n  border-radius: var(--saltInputLegacy-borderRadius, 0);\n  color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n  cursor: var(--saltInputLegacy-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputLegacy-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputLegacy-minWidth, 8em);\n  padding: var(--saltInputLegacy-padding, 0 var(--salt-spacing-100));\n  position: var(--saltInputLegacy-position, relative);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n  outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n  background: var(--saltInputLegacy-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n  padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-spacing-100));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n  padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-spacing-100));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n  margin: var(--inputLegacy-button-inset);\n  padding: 0 calc(var(--salt-spacing-100) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n  min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n  width: 100%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=InputLegacy.css.js.map

package/dist-es/input-legacy/StaticInputAdornment.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStaticInputAdornment {\n  --inputLegacy-staticAdornment-padding: var(--salt-size-unit);\n}\n\n.saltStaticInputAdornment {\n  display: flex;\n  align-items: center;\n}\n\n.saltInputLegacy-prefixContainer .saltStaticInputAdornment {\n  padding-left: var(--inputLegacy-staticAdornment-padding);\n}\n\n.saltInputLegacy-suffixContainer .saltStaticInputAdornment {\n  padding-right: var(--inputLegacy-staticAdornment-padding);\n}\n";
+var css_248z = ".saltStaticInputAdornment {\n  --inputLegacy-staticAdornment-padding: var(--salt-spacing-100);\n}\n\n.saltStaticInputAdornment {\n  display: flex;\n  align-items: center;\n}\n\n.saltInputLegacy-prefixContainer .saltStaticInputAdornment {\n  padding-left: var(--inputLegacy-staticAdornment-padding);\n}\n\n.saltInputLegacy-suffixContainer .saltStaticInputAdornment {\n  padding-right: var(--inputLegacy-staticAdornment-padding);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StaticInputAdornment.css.js.map

package/dist-es/layer-layout/LayerLayout.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  box-sizing: border-box;\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-spacing-300));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-spacing-300));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  box-sizing: border-box;\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LayerLayout.css.js.map

package/dist-es/link-button/LinkButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltLinkButton {\n  --linkButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltLinkButton-alignItems, center);\n  appearance: none;\n  background: var(--saltLinkButton-background, var(--linkButton-background));\n  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));\n  border-style: var(--saltLinkButton-borderStyle, solid);\n  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));\n  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltLinkButton-justifyContent, center);\n  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));\n  margin: var(--saltLinkButton-margin, 0);\n  height: var(--saltLinkButton-height, var(--salt-size-base));\n  min-width: var(--saltLinkButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));\n  text-underline-offset: var(--salt-spacing-fixed-200);\n  transition: none;\n  width: var(--saltLinkButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n.saltLinkButton-underlineDefault {\n  --linkButton-textDecoration: var(--salt-text-link-textDecoration);\n  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);\n}\n\n.saltLinkButton-underlineNever {\n  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n   Uses clip-path and prevents user selection so the text isn't included\n   when users copy the link button's visible content. */\n.saltLinkButton-externalLinkADA {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n@media (hover: hover) {\n  /* Pseudo-class applied to the root element on hover when LinkButton is not active or disabled */\n  .saltLinkButton:hover {\n    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));\n  }\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltLinkButton:focus-visible {\n  outline: var(--salt-focused-outline);\n\n  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));\n}\n\n/* Pseudo-class applied to the root element when LinkButton is active */\n.saltLinkButton.saltLinkButton-active:focus-visible,\n.saltLinkButton:focus-visible:active,\n.saltLinkButton:active,\n.saltLinkButton.saltLinkButton-active {\n  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));\n  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));\n  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n.saltLinkButton-neutral {\n  --linkButton-text-color: var(--salt-actionable-subtle-foreground);\n  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --linkButton-background: var(--salt-actionable-subtle-background);\n  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --linkButton-background-active: var(--salt-actionable-subtle-background-active);\n  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltLinkButton-accented {\n  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --linkButton-background: var(--salt-actionable-accented-subtle-background);\n  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=LinkButton.css.js.map

package/dist-es/link-button/LinkButton.css.js.map

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

package/dist-es/link-button/LinkButton.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useButton, useIcon, renderProps, capitalize } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, cloneElement } from 'react';
+import css_248z from './LinkButton.css.js';
+
+const withBaseName = makePrefixer("saltLinkButton");
+const LinkButton = forwardRef(
+  function LinkButton2(props, ref) {
+    const {
+      children,
+      className,
+      IconComponent,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      sentiment = "neutral",
+      target = "_self",
+      underline = "default",
+      ...rest
+    } = props;
+    const { active, buttonProps } = useButton({
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp
+    });
+    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-link-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { ExternalIcon } = useIcon();
+    const LinkButtonIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
+    const linkButton = renderProps("a", {
+      className: clsx(
+        withBaseName(),
+        withBaseName(sentiment),
+        withBaseName(`underline${capitalize(underline)}`),
+        { [withBaseName("active")]: active },
+        className
+      ),
+      ...activeStateProps,
+      ...rest,
+      ref,
+      target,
+      children
+    });
+    if (linkButton.props.target !== "_blank") {
+      return linkButton;
+    }
+    return cloneElement(
+      linkButton,
+      void 0,
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        linkButton.props.children,
+        LinkButtonIconComponent && /* @__PURE__ */ jsx(
+          LinkButtonIconComponent,
+          {
+            className: withBaseName("icon"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
+      ] })
+    );
+  }
+);
+
+export { LinkButton };
+//# sourceMappingURL=LinkButton.js.map

package/dist-es/link-button/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n  useButton,\n  useIcon,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    if (linkButton.props.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButton.props.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["LinkButton","linkButtonCss"],"mappings":";;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAa,YAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACC,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,4BAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}

package/dist-es/list/List.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-bold-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  box-sizing: border-box;\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-height: auto;\n  --list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-bold-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  box-sizing: border-box;\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=List.css.js.map

package/dist-es/list/ListItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-content-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, var(--salt-cursor-hover));\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  /* biome-ignore lint/complexity/noImportantStyles: Needed to ensure the proxy doesn't take any space. */\n  position: absolute !important;\n  visibility: hidden;\n}\n";
+var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-content-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, var(--salt-cursor-hover));\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-spacing-100);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-spacing-100);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  /* biome-ignore lint/complexity/noImportantStyles: Needed to ensure the proxy doesn't take any space. */\n  position: absolute !important;\n  visibility: hidden;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItem.css.js.map

package/dist-es/list-deprecated/ListItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltListItemDeprecated {\n  /* Color */\n  --list-item-text-color: var(--salt-selectable-foreground);\n  --list-item-background: var(--salt-selectable-background);\n  --list-item-background-hover: var(--salt-selectable-background-hover);\n  --list-item-selected-focus-outlineColor: var(--salt-content-bold-foreground);\n\n  --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n\n  /* Text, Font */\n  --list-item-textAlign: var(--salt-text-textAlign);\n  --list-item-fontSize: var(--salt-text-fontSize);\n  --list-item-lineHeight: var(--salt-text-lineHeight);\n\n  /* Spacing */\n  --list-item-padding: 0 var(--salt-size-unit);\n\n  /* Misc. */\n  --list-item-gap: 0px;\n  --list-item-alignItems: center;\n  --list-item-selectable-cursor: pointer;\n  --list-item-cursor: default;\n\n  --list-item-disabled-cursor: var(--salt-cursor-disabled);\n  --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltListItemDeprecated {\n  color: var(--list-item-text-color);\n  background: var(--list-item-background);\n  text-align: var(--list-item-textAlign);\n  line-height: var(--list-item-lineHeight);\n  font-size: var(--list-item-fontSize);\n  padding: var(--list-item-padding);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n  background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n  color: var(--list-item-text-color-active);\n  background: var(--list-item-background-active);\n  cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n  cursor: var(--list-item-disabled-cursor);\n  opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  bottom: 2px;\n  content: \"\";\n  position: absolute;\n\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
+var css_248z = ".saltListItemDeprecated {\n  /* Color */\n  --list-item-text-color: var(--salt-selectable-foreground);\n  --list-item-background: var(--salt-selectable-background);\n  --list-item-background-hover: var(--salt-selectable-background-hover);\n  --list-item-selected-focus-outlineColor: var(--salt-content-bold-foreground);\n\n  --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n\n  /* Text, Font */\n  --list-item-textAlign: var(--salt-text-textAlign);\n  --list-item-fontSize: var(--salt-text-fontSize);\n  --list-item-lineHeight: var(--salt-text-lineHeight);\n\n  /* Spacing */\n  --list-item-padding: 0 var(--salt-spacing-100);\n\n  /* Misc. */\n  --list-item-gap: 0px;\n  --list-item-alignItems: center;\n  --list-item-selectable-cursor: pointer;\n  --list-item-cursor: default;\n\n  --list-item-disabled-cursor: var(--salt-cursor-disabled);\n  --list-item-disabled-regular-opacity: 0.4;\n}\n\n.saltListItemDeprecated {\n  color: var(--list-item-text-color);\n  background: var(--list-item-background);\n  text-align: var(--list-item-textAlign);\n  line-height: var(--list-item-lineHeight);\n  font-size: var(--list-item-fontSize);\n  padding: var(--list-item-padding);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n  background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n  cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n  color: var(--list-item-text-color-active);\n  background: var(--list-item-background-active);\n  cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n  cursor: var(--list-item-disabled-cursor);\n  opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  bottom: 2px;\n  content: \"\";\n  position: absolute;\n\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItem.css.js.map

package/dist-es/list-next/ListItemNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-content-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-top: var(--salt-size-fixed-100);\n  margin-bottom: var(--salt-size-fixed-100);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-content-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-top: var(--salt-size-fixed-100);\n  margin-bottom: var(--salt-size-fixed-100);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItemNext.css.js.map

package/dist-es/logo/LogoSeparator.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-separator-height);\n  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);\n}\n";
+var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-base);\n  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LogoSeparator.css.js.map

package/dist-es/menu-button/MenuButtonTrigger.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-size-unit);\n}\n";
+var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-bold-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-bold-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuButtonTrigger.css.js.map

package/dist-es/metric/MetricContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-positive-foreground-decorative);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-positive-foreground-informative);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-negative-foreground-decorative);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-negative-foreground-informative);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-spacing-100) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-positive-foreground-decorative);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-positive-foreground-informative);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-negative-foreground-decorative);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-negative-foreground-informative);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MetricContent.css.js.map

package/dist-es/metric/MetricHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-spacing-100) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MetricHeader.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOnSolidButton {\n  --onSolidButton-borderWidth: var(--salt-size-fixed-100);\n  align-items: center;\n  appearance: none;\n  -webkit-appearance: none;\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border-style: solid;\n  border-width: var(--onSolidButton-borderWidth);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-action-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));\n  position: relative;\n  -webkit-tap-highlight-color: transparent;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  text-transform: var(--salt-text-action-textTransform);\n  transition: none;\n}\n\n.saltOnSolidButton:focus-visible {\n  background: var(--salt-actionable-onSolid-subtle-background-hover);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n  color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n  outline-color: var(--salt-focused-onSolid-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n@media (hover: hover) {\n  .saltOnSolidButton:hover {\n    background: var(--salt-actionable-onSolid-subtle-background-hover);\n    border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n    color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n.saltOnSolidButton.saltOnSolidButton-active:focus-visible,\n.saltOnSolidButton:focus-visible:active,\n.saltOnSolidButton:active,\n.saltOnSolidButton.saltOnSolidButton-active {\n  background: var(--salt-actionable-onSolid-subtle-background-active);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);\n  color: var(--salt-actionable-onSolid-subtle-foreground-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltOnSolidButton:disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:hover {\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n.saltOnSolidButton strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltOnSolidButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OnSolidButton.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js.map

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

package/dist-es/on-solid-button/OnSolidButton.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useButton } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './OnSolidButton.css.js';
+
+const withBaseName = makePrefixer("saltOnSolidButton");
+const OnSolidButton = forwardRef(
+  function OnSolidButton2({
+    children,
+    className,
+    disabled,
+    focusableWhenDisabled,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    type = "button",
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-on-solid-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { active, buttonProps } = useButton({
+      disabled,
+      focusableWhenDisabled,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp
+    });
+    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...restButtonProps,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("active")]: active,
+            [withBaseName("disabled")]: disabled
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        type,
+        children
+      }
+    );
+  }
+);
+
+export { OnSolidButton };
+//# sourceMappingURL=OnSolidButton.js.map

package/dist-es/on-solid-button/OnSolidButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnSolidButton.js","sources":["../src/on-solid-button/OnSolidButton.tsx"],"sourcesContent":["import { makePrefixer, useButton } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport onSolidButtonCss from \"./OnSolidButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOnSolidButton\");\n\nexport interface OnSolidButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n}\n\nexport const OnSolidButton = forwardRef<HTMLButtonElement, OnSolidButtonProps>(\n  function OnSolidButton(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      type = \"button\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-on-solid-button\",\n      css: onSolidButtonCss,\n      window: targetWindow,\n    });\n\n    const { active, buttonProps } = useButton<HTMLButtonElement>({\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n\n    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["OnSolidButton","onSolidButtonCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAa9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,iBAAgB,GAAI,WAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/query-input/QueryInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-size-unit);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-size-unit);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-content-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-size-unit);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-bold-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-size-unit);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = ".saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-spacing-100);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-spacing-100);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-spacing-100);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-spacing-100) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-content-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-spacing-100);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-bold-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=QueryInput.css.js.map

package/dist-es/tabs/Tab.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-spacing-100);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, calc(var(--salt-size-base) + var(--salt-spacing-100)));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-spacing-100);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-overlayable-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-accent-indicator-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-overlayable-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map