@salt-ds/core 1.51.0 → 1.52.1
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.
- package/CHANGELOG.md +19 -0
- package/css/salt-core.css +156 -281
- package/dist-cjs/banner/Banner.js +0 -1
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/pill/Pill.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +2 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/banner/Banner.js +0 -1
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/pill/Pill.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +2 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,6 @@ const Banner = React.forwardRef(function Banner2({ children, className, variant
|
|
|
32
32
|
),
|
|
33
33
|
ref,
|
|
34
34
|
...rest,
|
|
35
|
-
"aria-live": "polite",
|
|
36
35
|
children: [
|
|
37
36
|
/* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, { status, className: withBaseName("icon") }),
|
|
38
37
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,MAAA,GAAS,MAAA,EAAQ,GAAG,IAAA,IAChE,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,MAAM,CAAA;AAAA,QACnB,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,+BAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QACjE;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -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@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.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\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.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.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
|
|
@@ -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
|
|
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
|
|
@@ -208,6 +208,7 @@ const PillInput = React.forwardRef(function PillInput2({
|
|
|
208
208
|
{
|
|
209
209
|
"data-index": index,
|
|
210
210
|
disabled,
|
|
211
|
+
"aria-label": hidePillClose ? pill : `Remove ${pill}`,
|
|
211
212
|
ref: (element) => {
|
|
212
213
|
if (element) {
|
|
213
214
|
pillElementsRef.current[index] = element;
|
|
@@ -223,7 +224,7 @@ const PillInput = React.forwardRef(function PillInput2({
|
|
|
223
224
|
tabIndex: focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1,
|
|
224
225
|
children: [
|
|
225
226
|
pill,
|
|
226
|
-
!hidePillClose && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "aria-
|
|
227
|
+
!hidePillClose && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "aria-hidden": true })
|
|
227
228
|
]
|
|
228
229
|
}
|
|
229
230
|
) }, pill)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!hidePillClose) {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n }\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-label=\"click to close\" />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!hidePillClose) {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n }\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n aria-label={hidePillClose ? pill : `Remove ${pill}`}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-hidden />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
|
|
@@ -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/banner/Banner.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Banner","bannerCss"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAAS,UAAA,CAAwC,SAASA,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,MAAA,GAAS,MAAA,EAAQ,GAAG,IAAA,IAChE,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,MAAM,CAAA;AAAA,QACnB,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QACjE;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -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@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.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\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.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.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
|
|
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
|
|
@@ -206,6 +206,7 @@ const PillInput = forwardRef(function PillInput2({
|
|
|
206
206
|
{
|
|
207
207
|
"data-index": index,
|
|
208
208
|
disabled,
|
|
209
|
+
"aria-label": hidePillClose ? pill : `Remove ${pill}`,
|
|
209
210
|
ref: (element) => {
|
|
210
211
|
if (element) {
|
|
211
212
|
pillElementsRef.current[index] = element;
|
|
@@ -221,7 +222,7 @@ const PillInput = forwardRef(function PillInput2({
|
|
|
221
222
|
tabIndex: focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1,
|
|
222
223
|
children: [
|
|
223
224
|
pill,
|
|
224
|
-
!hidePillClose && /* @__PURE__ */ jsx(CloseIcon, { "aria-
|
|
225
|
+
!hidePillClose && /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true })
|
|
225
226
|
]
|
|
226
227
|
}
|
|
227
228
|
) }, pill)),
|