@salt-ds/core 1.51.0 → 1.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/salt-core.css +149 -269
  3. package/dist-cjs/button/Button.css.js +1 -1
  4. package/dist-cjs/pill/Pill.css.js +1 -1
  5. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  6. package/dist-es/button/Button.css.js +1 -1
  7. package/dist-es/pill/Pill.css.js +1 -1
  8. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  9. package/package.json +1 -1
package/dist-cjs/button/Button.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\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 background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-text-color-disabled: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-background-disabled: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-text-color-disabled: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-background-disabled: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-text-color-disabled: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-background-disabled: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-text-color-disabled: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-background-disabled: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-text-color-disabled: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-background-disabled: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
3
+ var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\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 background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Button.css.js.map
package/dist-cjs/pill/Pill.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\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 letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground-disabled);\n --pill-background: var(--salt-actionable-bold-background-disabled);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n";
3
+ var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\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 letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-background: var(--salt-actionable-bold-background);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-disabled);\n\n opacity: 0.4;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Pill.css.js.map
package/dist-cjs/toggle-button/ToggleButton.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: pointer;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\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 background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled);\n color: var(--toggleButton-text-color-disabled);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled-selected);\n color: var(--toggleButton-text-color-disabled-selected);\n border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly);\n color: var(--toggleButton-text-color-readonly);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly-selected);\n color: var(--toggleButton-text-color-readonly-selected);\n border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-background);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-background);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-background);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-background);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-background);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
3
+ var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-hover);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\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 background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n .saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n }\n}\n\n.saltToggleButton:active {\n background: var(--toggleButton-background-active);\n color: var(--toggleButton-text-color-active);\n border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n\n opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-background);\n --toggleButton-background-hover: var(--salt-actionable-background-hover);\n --toggleButton-background-active: var(--salt-actionable-background);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-background);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-background);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-background);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-background);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ToggleButton.css.js.map
package/dist-es/button/Button.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\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 background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-text-color-disabled: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-background-disabled: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-text-color-disabled: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-background-disabled: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-text-color-disabled: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-background-disabled: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-text-color-disabled: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-background-disabled: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-text-color-disabled: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-background-disabled: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
1
+ var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\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 background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Button.css.js.map
package/dist-es/pill/Pill.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\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 letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground-disabled);\n --pill-background: var(--salt-actionable-bold-background-disabled);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n";
1
+ var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\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 letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-background: var(--salt-actionable-bold-background);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-disabled);\n\n opacity: 0.4;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Pill.css.js.map
package/dist-es/toggle-button/ToggleButton.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: pointer;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\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 background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled);\n color: var(--toggleButton-text-color-disabled);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled-selected);\n color: var(--toggleButton-text-color-disabled-selected);\n border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly);\n color: var(--toggleButton-text-color-readonly);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly-selected);\n color: var(--toggleButton-text-color-readonly-selected);\n border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-background);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-background);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-background);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-background);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-background);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
1
+ var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-hover);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\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 background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n .saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n }\n}\n\n.saltToggleButton:active {\n background: var(--toggleButton-background-active);\n color: var(--toggleButton-text-color-active);\n border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n\n opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-background);\n --toggleButton-background-hover: var(--salt-actionable-background-hover);\n --toggleButton-background-active: var(--salt-actionable-background);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-background);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-background);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-background);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-background);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=ToggleButton.css.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "1.51.0",
3
+ "version": "1.52.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",