@salt-ds/core 1.33.0 → 1.34.0

package/dist-cjs/interactable-card/InteractableCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  border-color: var(--salt-selectable-borderColor-selected);\n  --card-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-selectable-foreground-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n    --card-accent-color: var(--salt-selectable-foreground-disabled);\n  }\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n  --card-accent-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  border-color: var(--salt-selectable-borderColor-selected);\n  --card-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-selectable-foreground-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n    --card-accent-color: var(--salt-selectable-foreground-disabled);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","jsx","clsx","capitalize"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","jsx","clsx","capitalize"],"mappings":"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"}

package/dist-cjs/link-card/LinkCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to LinkCard */\n.saltLinkCard {\n  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-decoration: none;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to LinkCard when variant=\"primary\" */\n.saltLinkCard-primary {\n  background: var(--saltLinkCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --linkCard-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"secondary\" */\n.saltLinkCard-secondary {\n  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --linkCard-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltLinkCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));\n}\n\n/* Styles applied to LinkCard if `accent=\"bottom\"` (default) */\n.saltLinkCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"left\"` */\n.saltLinkCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard if `accent=\"top\"` */\n.saltLinkCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"right\"` */\n.saltLinkCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard on focus */\n.saltLinkCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to LinkCard */\n.saltLinkCard:active {\n  cursor: var(--salt-selectable-cursor-active);\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow);\n  --linkCard-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied on hover state to LinkCard */\n@media (hover: hover) {\n  .saltLinkCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n  }\n}\n";
+var css_248z = "/* Styles applied to LinkCard */\n.saltLinkCard {\n  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-decoration: none;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to LinkCard when variant=\"primary\" */\n.saltLinkCard-primary {\n  background: var(--saltLinkCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --linkCard-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"secondary\" */\n.saltLinkCard-secondary {\n  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --linkCard-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"tertiary\" */\n.saltLinkCard-tertiary {\n  background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n  --linkCard-accent-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltLinkCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));\n}\n\n/* Styles applied to LinkCard if `accent=\"bottom\"` (default) */\n.saltLinkCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"left\"` */\n.saltLinkCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard if `accent=\"top\"` */\n.saltLinkCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"right\"` */\n.saltLinkCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard on focus */\n.saltLinkCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to LinkCard */\n.saltLinkCard:active {\n  cursor: var(--salt-selectable-cursor-active);\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow);\n  --linkCard-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied on hover state to LinkCard */\n@media (hover: hover) {\n  .saltLinkCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=LinkCard.css.js.map

package/dist-cjs/link-card/LinkCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className,\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LinkCard","useWindow","useComponentCssInjection","linkCardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className,\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LinkCard","useWindow","useComponentCssInjection","linkCardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/list-control/ListControlState.js

@@ -311,15 +311,10 @@ function useListControl(props) {
       if (!activeElement) {
         return;
       }
-      const { scrollTop } = listRef.current;
-      const { offsetTop, offsetHeight } = activeElement;
-      const isVisible = offsetTop >= scrollTop && offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;
-      if (!isVisible) {
-        activeElement.scrollIntoView({
-          block: "end",
-          inline: "nearest"
-        });
-      }
+      activeElement.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
     }
   }, [activeState]);
   return {

package/dist-cjs/list-control/ListControlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n  /**\n   * If true, the control will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the control will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n  /**\n   * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n   */\n  valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n  return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString = defaultValueToString,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  useEffect(() => {\n    // remove focus when controlling disabled\n    if (disabled && focusedState) {\n      setFocusedState(false);\n      setFocusVisibleState(false);\n    }\n  }, [disabled, focusedState]);\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined,\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { data: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.data.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ data: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { data: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.data.id !== id,\n        );\n      };\n    },\n    [],\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index];\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex((item) => item.data.id === option.id);\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean,\n  ) => {\n    return optionsRef.current.filter((item) => predicate(item.data));\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>,\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.data);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(\n          valueToString(option.value).substring(0, search.length),\n          search,\n        ) === 0,\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(\n              valueToString(option.value)[0].toLowerCase(),\n              letters[0],\n            ) === 0,\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const getFirstOption = () => {\n    return getOptionAtIndex(0);\n  };\n\n  const getLastOption = () => {\n    return getOptionAtIndex(optionsRef.current.length - 1);\n  };\n\n  const getOptionBefore = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index - 1);\n  };\n\n  const getOptionAfter = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index + 1);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionPageAbove = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return null;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect = option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.max(\n      0,\n      optionRect.y - listY + optionRect.height - containerRect.height,\n    );\n\n    while (option && optionRect.y - listY > pageY) {\n      option = getOptionBefore(option.data);\n      optionRect = option?.element.getBoundingClientRect();\n    }\n\n    return option ?? getFirstOption();\n  };\n\n  const getOptionPageBelow = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return null;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect = option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.min(\n      list.scrollHeight,\n      optionRect.y - listY - optionRect.height + containerRect.height,\n    );\n\n    while (option && optionRect.y - listY < pageY) {\n      option = getOptionAfter(option.data);\n      optionRect = option?.element.getBoundingClientRect();\n    }\n\n    return option ?? getLastOption();\n  };\n\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.data === activeState,\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      const { scrollTop } = listRef.current;\n      const { offsetTop, offsetHeight } = activeElement;\n\n      const isVisible =\n        offsetTop >= scrollTop &&\n        offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;\n\n      if (!isVisible) {\n        activeElement.scrollIntoView({\n          block: \"end\",\n          inline: \"nearest\",\n        });\n      }\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    getFirstOption,\n    getLastOption,\n    valueToString,\n    disabled,\n  };\n}\n"],"names":["useState","useEffect","useControlled","useRef","useCallback","option"],"mappings":"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"}
+{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n  /**\n   * If true, the control will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the control will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n  /**\n   * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n   */\n  valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n  return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString = defaultValueToString,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  useEffect(() => {\n    // remove focus when controlling disabled\n    if (disabled && focusedState) {\n      setFocusedState(false);\n      setFocusVisibleState(false);\n    }\n  }, [disabled, focusedState]);\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined,\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { data: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.data.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ data: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { data: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.data.id !== id,\n        );\n      };\n    },\n    [],\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index];\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex((item) => item.data.id === option.id);\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean,\n  ) => {\n    return optionsRef.current.filter((item) => predicate(item.data));\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>,\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.data);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(\n          valueToString(option.value).substring(0, search.length),\n          search,\n        ) === 0,\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(\n              valueToString(option.value)[0].toLowerCase(),\n              letters[0],\n            ) === 0,\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const getFirstOption = () => {\n    return getOptionAtIndex(0);\n  };\n\n  const getLastOption = () => {\n    return getOptionAtIndex(optionsRef.current.length - 1);\n  };\n\n  const getOptionBefore = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index - 1);\n  };\n\n  const getOptionAfter = (option: OptionValue<Item>) => {\n    const index = getIndexOfOption(option);\n    return getOptionAtIndex(index + 1);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionPageAbove = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return null;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect = option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.max(\n      0,\n      optionRect.y - listY + optionRect.height - containerRect.height,\n    );\n\n    while (option && optionRect.y - listY > pageY) {\n      option = getOptionBefore(option.data);\n      optionRect = option?.element.getBoundingClientRect();\n    }\n\n    return option ?? getFirstOption();\n  };\n\n  const getOptionPageBelow = (start: OptionValue<Item>) => {\n    const list = listRef.current;\n    let option = optionsRef.current.find((option) => option.data === start);\n\n    if (!list || !option) {\n      return null;\n    }\n\n    const containerRect = list.getBoundingClientRect();\n    let optionRect = option.element.getBoundingClientRect();\n\n    const listY = containerRect.y - list.scrollTop;\n    const pageY = Math.min(\n      list.scrollHeight,\n      optionRect.y - listY - optionRect.height + containerRect.height,\n    );\n\n    while (option && optionRect.y - listY < pageY) {\n      option = getOptionAfter(option.data);\n      optionRect = option?.element.getBoundingClientRect();\n    }\n\n    return option ?? getLastOption();\n  };\n\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.data === activeState,\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      activeElement.scrollIntoView({\n        block: \"nearest\",\n        inline: \"nearest\",\n      });\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    getFirstOption,\n    getLastOption,\n    valueToString,\n    disabled,\n  };\n}\n"],"names":["useState","useEffect","useControlled","useRef","useCallback","option"],"mappings":"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"}

package/dist-cjs/navigation-item/NavigationItem.js

@@ -139,9 +139,8 @@ const NavigationItem = React.forwardRef(
       ...styleProp,
       "--saltNavigationItem-level": `${level}`
     };
-    const isParent = parent || href === void 0;
+    const isLink = href !== void 0;
     const handleClick = (event) => {
-      event.stopPropagation();
       onExpand == null ? void 0 : onExpand(event);
     };
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -159,19 +158,19 @@ const NavigationItem = React.forwardRef(
           },
           withBaseName(orientation)
         ),
-        render: render != null ? render : isParent ? /* @__PURE__ */ jsxRuntime.jsx("button", {
+        render: render != null ? render : isLink ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("button", {
           type: "button"
-        }) : void 0,
-        "aria-expanded": isParent ? expanded : void 0,
+        }),
+        "aria-expanded": isLink ? void 0 : expanded,
         onClick: handleClick,
-        "aria-current": !isParent && active ? "page" : void 0,
+        "aria-current": isLink && active ? "page" : void 0,
         href,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             className: withBaseName("label"),
             children
           }),
-          isParent ? /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon.ExpansionIcon, {
+          parent ? /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon.ExpansionIcon, {
             expanded,
             orientation
           }) : null

package/dist-cjs/navigation-item/NavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isParent = parent || href === undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isParent ? <button type=\"button\" /> : undefined)}\n          aria-expanded={isParent ? expanded : undefined}\n          onClick={handleClick}\n          aria-current={!isParent && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {isParent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":"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"}
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type MouseEventHandler,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isLink = href !== undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n          aria-expanded={isLink ? undefined : expanded}\n          onClick={handleClick}\n          aria-current={isLink && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,MAAM,SAAS,IAAS,KAAA,KAAA,CAAA,CAAA;AAExB,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAC,eAAA,CAAAC,yCAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAQ,EAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAW,MAAS,GAAA,KAAA,CAAA,mBAAaD,cAAA,CAAA,QAAA,EAAA;AAAA,UAAO,IAAK,EAAA,QAAA;AAAA,SAAS,CAAA;AAAA,QAC9D,eAAA,EAAe,SAAS,KAAY,CAAA,GAAA,QAAA;AAAA,QACpC,OAAS,EAAA,WAAA;AAAA,QACT,cAAA,EAAc,MAAU,IAAA,MAAA,GAAS,MAAS,GAAA,KAAA,CAAA;AAAA,QAC1C,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,yBACEA,cAAA,CAAAI,2BAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAC3D,GAAA,IAAA;AAAA,SAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/option/Option.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltOption[aria-selected=\"true\"]::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: 0;\n  width: 100%;\n}\n\n.saltOption[aria-selected=\"true\"]::after {\n  border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-selected=\"true\"]:first-of-type::before {\n  border-top: unset;\n  top: 0;\n}\n.saltOption[aria-selected=\"true\"]:last-of-type::before {\n  border-bottom: unset;\n  bottom: 0;\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Option.css.js.map

package/dist-cjs/pagination/PageButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltPageButton {\n  --saltButton-minWidth: var(--salt-size-base);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-text-color: var(--salt-content-primary-foreground);\n  --saltButton-background-active: var(--salt-selectable-background-selected);\n  --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  --saltButton-padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  --saltButton-minWidth: var(--salt-size-base);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-text-color: var(--salt-content-primary-foreground);\n  --saltButton-background-active: var(--salt-selectable-background-selected);\n  --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  --saltButton-text-color-hover: var(--salt-content-primary-foreground);\n  --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  --saltButton-padding: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PageButton.css.js.map

package/dist-cjs/panel/Panel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n}\n";
+var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element when variant=\"tertiary\" */\n.saltPanel-tertiary.saltPanel {\n  --panel-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Panel.css.js.map

package/dist-cjs/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport panelCss from \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n *   <Panel>\n *     <p>This is a panel around some text.</p>\n *   </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, children, variant = \"primary\", ...restProps },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-panel\",\n    css: panelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(variant), className)}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Panel","useWindow","useComponentCssInjection","panelCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQC,gBAAuC,CAAA,SAASC,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,IAChE,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport panelCss from \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n *   <Panel>\n *     <p>This is a panel around some text.</p>\n *   </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, children, variant = \"primary\", ...restProps },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-panel\",\n    css: panelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(variant), className)}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Panel","useWindow","useComponentCssInjection","panelCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQC,gBAAuC,CAAA,SAASC,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,IAChE,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/radio-button/RadioButtonIcon.js

@@ -156,7 +156,6 @@ const RadioButtonIcon = ({
         fill: "currentColor",
         viewBox: "0 0 12 12",
         children: /* @__PURE__ */ jsxRuntime.jsx("path", {
-          fill: "#161616",
           d: "M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
         })
       })

package/dist-cjs/radio-button/RadioButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n  checked,\n  className,\n  error,\n  disabled,\n  validationStatus,\n  readOnly,\n  ...rest\n}: RadioButtonIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-icon\",\n    css: radioButtonIconCss,\n    window: targetWindow,\n  });\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      {checked && !readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 12 12\"\n          fill=\"currentColor\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      )}\n      {checked && readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 12 12\"\n        >\n          <path\n            fill=\"#161616\"\n            d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n          />\n        </svg>\n      )}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","radioButtonIconCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAgBhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAW,OAAA,IAAA,CAAC,4BACVC,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QAEL,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,qEAAA;AAAA,UACF,QAAS,EAAA,SAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAAA,MAED,OAAA,IAAW,4BACTA,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,IAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,IAAK,EAAA,SAAA;AAAA,UACL,CAAE,EAAA,6CAAA;AAAA,SACJ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n  checked,\n  className,\n  error,\n  disabled,\n  validationStatus,\n  readOnly,\n  ...rest\n}: RadioButtonIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-icon\",\n    css: radioButtonIconCss,\n    window: targetWindow,\n  });\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      {checked && !readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 12 12\"\n          fill=\"currentColor\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      )}\n      {checked && readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 12 12\"\n        >\n          <path d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\" />\n        </svg>\n      )}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","radioButtonIconCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAgBhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAW,OAAA,IAAA,CAAC,4BACVC,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QAEL,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,qEAAA;AAAA,UACF,QAAS,EAAA,SAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAAA,MAED,OAAA,IAAW,4BACTA,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,IAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,CAAE,EAAA,6CAAA;AAAA,SAA8C,CAAA;AAAA,OACxD,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/salt-provider/SaltProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { type WindowContextType, useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    }\n    console.warn(\n      `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n    );\n    return children;\n  }\n  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density?: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme?: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode?: Mode;\n  /**\n   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determins breakpoints used in responsive calulation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatilibty\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\",\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","clsx","isValidElement","cloneElement","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { type WindowContextType, useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    }\n    console.warn(\n      `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n    );\n    return children;\n  }\n  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density?: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme?: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode?: Mode;\n  /**\n   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determines breakpoints used in responsive calculation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatibility\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\",\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","clsx","isValidElement","cloneElement","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}

package/dist-es/accordion/Accordion.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { useControlled } from '../utils/useControlled.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
@@ -123,6 +123,8 @@ const Accordion = forwardRef(
       ...rest
     } = props;
     const id = useId(idProp);
+    const [headerId, setHeaderId] = useState(`${id}-header`);
+    const [panelId, setPanelId] = useState(`${id}-panel`);
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-accordion",
@@ -146,7 +148,10 @@ const Accordion = forwardRef(
         expanded,
         indicatorSide,
         disabled: Boolean(disabled),
-        id: id != null ? id : "",
+        headerId,
+        setHeaderId,
+        panelId,
+        setPanelId,
         status
       },
       children: /* @__PURE__ */ jsx("div", {

package/dist-es/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          id: id ?? \"\",\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["Accordion","accordionCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const [headerId, setHeaderId] = useState(`${id}-header`);\n    const [panelId, setPanelId] = useState(`${id}-panel`);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          headerId,\n          setHeaderId,\n          panelId,\n          setPanelId,\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["Accordion","accordionCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,QAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/accordion/AccordionContext.js

@@ -113,7 +113,10 @@ const AccordionContext = createContext(
     toggle: () => void 0,
     disabled: false,
     indicatorSide: "left",
-    id: ""
+    headerId: "",
+    setHeaderId: () => void 0,
+    panelId: "",
+    setPanelId: () => void 0
   }
 );
 function useAccordion() {

package/dist-es/accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  id: string;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    id: \"\",\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  headerId: string;\n  setHeaderId: (id: string) => void;\n  panelId: string;\n  setPanelId: (id: string) => void;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    headerId: \"\",\n    setHeaderId: () => undefined,\n    panelId: \"\",\n    setPanelId: () => undefined,\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM,KAAA,CAAA;AAAA,GACpB;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}