@salt-ds/core 1.44.0 → 1.45.0

package/dist-es/stepper/internal/StepIcon.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import { useIcon } from '../../semantic-icon-provider/SemanticIconProvider.js';
+import { makePrefixer } from '../../utils/makePrefixer.js';
+import '../../utils/useFloatingUI/useFloatingUI.js';
+import '../../utils/useId.js';
+import '../../salt-provider/SaltProvider.js';
+import '../../viewport/ViewportProvider.js';
+import css_248z from './StepIcon.css.js';
+
+const withBaseName = makePrefixer("saltStepIcon");
+function StepIcon({
+  status,
+  stage,
+  size,
+  sizeMultiplier = size || 1.5,
+  className,
+  ...props
+}) {
+  const targetWindow = useWindow();
+  const IconComponent = useStepIcon({ stage, status });
+  useComponentCssInjection({
+    testId: "salt-step-icon",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      size: sizeMultiplier,
+      className: clsx(withBaseName(), className),
+      ...props
+    }
+  );
+}
+function useStepIcon({
+  stage,
+  status
+}) {
+  const icons = useIcon();
+  const stateToIcon = useMemo(
+    () => ({
+      error: icons.ErrorIcon,
+      warning: icons.WarningIcon,
+      active: icons.ActiveIcon,
+      completed: icons.CompletedIcon,
+      pending: icons.PendingIcon,
+      inprogress: icons.InProgressIcon,
+      locked: icons.LockedIcon
+    }),
+    [icons]
+  );
+  return stateToIcon[status || stage];
+}
+
+export { StepIcon };
+//# sourceMappingURL=StepIcon.js.map

package/dist-es/stepper/internal/StepIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepIconCSS from \"./StepIcon.css\";\n\nimport type { StepStage, StepStatus } from \"../Step\";\n\nexport interface StepIconProps extends IconProps {\n  stage: StepStage;\n  status?: StepStatus;\n  sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n  status,\n  stage,\n  size,\n  sizeMultiplier = size || 1.5,\n  className,\n  ...props\n}: StepIconProps) {\n  const targetWindow = useWindow();\n  const IconComponent = useStepIcon({ stage, status });\n\n  useComponentCssInjection({\n    testId: \"salt-step-icon\",\n    css: stepIconCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <IconComponent\n      size={sizeMultiplier}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction useStepIcon({\n  stage,\n  status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n  const icons = useIcon();\n\n  const stateToIcon = useMemo(\n    () => ({\n      error: icons.ErrorIcon,\n      warning: icons.WarningIcon,\n      active: icons.ActiveIcon,\n      completed: icons.CompletedIcon,\n      pending: icons.PendingIcon,\n      inprogress: icons.InProgressIcon,\n      locked: icons.LockedIcon,\n    }),\n    [icons],\n  );\n\n  return stateToIcon[status || stage];\n}\n"],"names":["stepIconCSS"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQ,OAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}

package/dist-es/stepper/internal/StepScreenReaderOnly.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+
+function StepScreenReaderOnly({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "salt-visuallyHidden", ...props, children });
+}
+
+export { StepScreenReaderOnly };
+//# sourceMappingURL=StepScreenReaderOnly.js.map

package/dist-es/stepper/internal/StepScreenReaderOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepScreenReaderOnly.js","sources":["../src/stepper/internal/StepScreenReaderOnly.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nexport interface StepScreenReaderOnlyProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport function StepScreenReaderOnly({\n  children,\n  ...props\n}: StepScreenReaderOnlyProps) {\n  return (\n    <div className=\"salt-visuallyHidden\" {...props}>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAOO,SAAS,oBAAqB,CAAA;AAAA,EACnC,QAAA;AAAA,EACA,GAAG;AACL,CAA8B,EAAA;AAC5B,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAU,qBAAuB,EAAA,GAAG,OACtC,QACH,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/stepper/internal/StepText.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStepText-label {\n  grid-area: label;\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n  grid-area: description;\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StepText.css.js.map

package/dist-es/stepper/internal/StepText.css.js.map

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

package/dist-es/stepper/internal/StepText.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { Text } from '../../text/Text.js';
+import '../../text/Code.js';
+import '../../text/Display.js';
+import '../../text/Headings.js';
+import '../../text/Label.js';
+import '../../text/TextAction.js';
+import '../../text/TextNotation.js';
+import 'react';
+import { makePrefixer } from '../../utils/makePrefixer.js';
+import '../../utils/useFloatingUI/useFloatingUI.js';
+import '../../utils/useId.js';
+import '../../salt-provider/SaltProvider.js';
+import '../../viewport/ViewportProvider.js';
+import css_248z from './StepText.css.js';
+
+const withBaseName = makePrefixer("saltStepText");
+function StepText({
+  id,
+  purpose,
+  className,
+  styleAs = "label",
+  children,
+  ...props
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-step-text",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      id,
+      styleAs: "label",
+      className: clsx(withBaseName(), withBaseName(purpose), className),
+      ...props,
+      children
+    }
+  );
+}
+
+export { StepText };
+//# sourceMappingURL=StepText.js.map

package/dist-es/stepper/internal/StepText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["stepTextCSS"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-es/stepper/internal/StepperProvider.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const StepperOrientationContext = createContext("horizontal");
+const StepDepthContext = createContext(-1);
+function StepperProvider({
+  orientation: orientationProp,
+  children
+}) {
+  const depth = useContext(StepDepthContext);
+  return /* @__PURE__ */ jsx(StepperOrientationContext.Provider, { value: orientationProp, children: /* @__PURE__ */ jsx(StepDepthContext.Provider, { value: depth + 1, children }) });
+}
+
+export { StepDepthContext, StepperOrientationContext, StepperProvider };
+//# sourceMappingURL=StepperProvider.js.map

package/dist-es/stepper/internal/StepperProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n  createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n  orientation: StepperOrientation;\n  children: ReactNode;\n}\n\nexport function StepperProvider({\n  orientation: orientationProp,\n  children,\n}: StepperProviderProps) {\n  const depth = useContext(StepDepthContext);\n\n  return (\n    <StepperOrientationContext.Provider value={orientationProp}>\n      <StepDepthContext.Provider value={depth + 1}>\n        {children}\n      </StepDepthContext.Provider>\n    </StepperOrientationContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,yBAAA,GACX,cAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmB,cAAyB,CAAE,CAAA;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQ,WAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/toggle-button/ToggleButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\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(--salt-size-border, 0);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: center;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  line-height: var(--salt-text-lineHeight);\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(--salt-size-border, 0));\n  margin: 0;\n  height: var(--salt-size-base);\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-active);\n  color: var(--toggleButton-text-color-active);\n  cursor: var(--salt-actionable-cursor-active);\n  border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton {\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-disabled: var(--salt-actionable-subtle-foreground-disabled);\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-disabled: var(--salt-actionable-subtle-background-disabled);\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-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n";
+var css_248z = ".saltToggleButton {\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(--salt-size-border, 0);\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(--salt-size-border, 0));\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-actionable-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-actionable-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-actionable-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";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/toggle-button/ToggleButton.js

@@ -18,6 +18,7 @@ const withBaseName = makePrefixer("saltToggleButton");
 const ToggleButton = forwardRef(
   function ToggleButton2(props, ref) {
     const {
+      appearance: appearanceProp,
       children,
       className,
       disabled: disabledProp,
@@ -25,7 +26,9 @@ const ToggleButton = forwardRef(
       onClick,
       onFocus,
       onChange,
+      readOnly: readOnlyProp,
       selected: selectedProp,
+      sentiment: sentimenentProp,
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -39,7 +42,10 @@ const ToggleButton = forwardRef(
     const toggleButtonGroup = useToggleButtonGroup();
     const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
     const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const sentiment = sentimenentProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.sentiment) || "neutral";
+    const appearance = appearanceProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.appearance) || "solid";
     const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
     const [selected, setSelected] = useControlled({
       controlled: toggleButtonGroupSelected,
       default: Boolean(selectedProp),
@@ -47,6 +53,9 @@ const ToggleButton = forwardRef(
       state: "selected"
     });
     const handleClick = (event) => {
+      if (disabled || readOnly) {
+        return;
+      }
       toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
       setSelected(!selected);
       onChange == null ? void 0 : onChange(event);
@@ -56,25 +65,29 @@ const ToggleButton = forwardRef(
       toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
       onFocus == null ? void 0 : onFocus(event);
     };
-    const ariaChecked = selected && !disabled;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        "aria-pressed": !toggleButtonGroup ? ariaChecked : void 0,
-        "aria-checked": toggleButtonGroup ? ariaChecked : void 0,
-        role: toggleButtonGroup ? "radio" : void 0,
-        className: clsx(withBaseName(), className),
-        disabled,
-        ref: handleRef,
-        onClick: handleClick,
-        onFocus: handleFocus,
-        tabIndex: focusable && !disabled ? 0 : -1,
-        value,
-        type: "button",
-        ...rest,
-        children
-      }
-    );
+    const toggleButtonProps = {
+      "aria-readonly": readOnlyProp,
+      "aria-pressed": !toggleButtonGroup ? selected : void 0,
+      "aria-checked": toggleButtonGroup ? selected : void 0,
+      "aria-disabled": disabled,
+      role: toggleButtonGroup ? "radio" : void 0,
+      className: clsx(
+        withBaseName(),
+        withBaseName(sentiment),
+        withBaseName(appearance),
+        readOnly && withBaseName("readOnly"),
+        className
+      ),
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable ? 0 : -1,
+      value,
+      type: "button",
+      disabled,
+      readOnly: readOnlyProp,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx("button", { ref: handleRef, ...toggleButtonProps, children });
   }
 );
 

package/dist-es/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  selected?: boolean;\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      selected: selectedProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const ariaChecked = selected && !disabled;\n\n    return (\n      <button\n        aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n        aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n        role={toggleButtonGroup ? \"radio\" : undefined}\n        className={clsx(withBaseName(), className)}\n        disabled={disabled}\n        ref={handleRef}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        tabIndex={focusable && !disabled ? 0 : -1}\n        value={value}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      appearance: appearanceProp,\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      sentiment: sentimenentProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.js

@@ -16,6 +16,7 @@ import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
 const withBaseName = makePrefixer("saltToggleButtonGroup");
 const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   const {
+    appearance,
     children,
     className,
     value: valueProp,
@@ -24,6 +25,8 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
     onChange,
     onKeyDown,
     orientation = "horizontal",
+    readOnly,
+    sentiment,
     ...rest
   } = props;
   const targetWindow = useWindow();
@@ -68,14 +71,27 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   );
   const contextValue = useMemo(
     () => ({
-      select,
-      isSelected,
+      appearance,
+      disabled,
       focus,
       isFocused,
-      disabled,
-      orientation
+      isSelected,
+      orientation,
+      readOnly,
+      select,
+      sentiment
     }),
-    [select, isSelected, isFocused, disabled, orientation, focus]
+    [
+      appearance,
+      disabled,
+      focus,
+      isFocused,
+      isSelected,
+      orientation,
+      readOnly,
+      select,
+      sentiment
+    ]
   );
   const handleKeyDown = (event) => {
     var _a, _b, _c;
@@ -100,7 +116,15 @@ const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
   return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(withBaseName(), withBaseName(orientation), className),
+      "aria-disabled": disabled,
+      "aria-readonly": readOnly,
+      className: clsx(
+        withBaseName(),
+        withBaseName(orientation),
+        disabled && withBaseName("disabled"),
+        readOnly && withBaseName("readOnly"),
+        className
+      ),
       role: "radiogroup",
       ref: handleRef,
       onKeyDown: handleKeyDown,

package/dist-es/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n      orientation,\n    }),\n    [select, isSelected, isFocused, disabled, orientation, focus],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (id: Value) => boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAca,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;;;;"}
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  disabled?: boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  isSelected: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n  readOnly?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  sentiment?: ButtonSentiment;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;;;;"}

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

@@ -26,7 +26,7 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     getOptionAtIndex: (index: number) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
         data: OptionValue<Item>;
@@ -36,27 +36,27 @@ export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
     getOptionAfter: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionBefore: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionPageAbove: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getOptionPageBelow: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getFirstOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getLastOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     valueToString: (item: Item) => string;
     disabled: boolean | undefined;
 };

package/dist-types/index.d.ts

@@ -46,6 +46,7 @@ export * from "./spinner";
 export * from "./stack-layout";
 export * from "./status-adornment";
 export * from "./status-indicator";
+export * from "./stepper";
 export * from "./text";
 export * from "./theme";
 export * from "./toast";

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

@@ -65,7 +65,7 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     getOptionAtIndex: (index: number) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => {
         data: OptionValue<Item>;
@@ -75,27 +75,27 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     getOptionAfter: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionBefore: (option: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getOptionPageAbove: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getOptionPageBelow: (start: OptionValue<Item>) => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    } | null;
+    } | undefined;
     getFirstOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     getLastOption: () => {
         data: OptionValue<Item>;
         element: HTMLElement;
-    };
+    } | undefined;
     valueToString: (item: Item) => string;
     disabled: boolean | undefined;
 };