@salt-ds/core 1.34.0 → 1.35.0

package/css/salt-core.css

@@ -11,6 +11,9 @@
 .saltAccordion-success {
   border-top-color: var(--salt-status-success-borderColor);
 }
+.saltAccordion-disabled {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
 
 /* src/accordion/AccordionGroup.css */
 .saltAccordionGroup {
@@ -39,11 +42,6 @@
   outline: var(--salt-focused-outline);
   outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
 }
-.saltAccordionHeader:disabled {
-  background: var(--salt-actionable-secondary-background);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-actionable-cursor-disabled);
-}
 .saltAccordionHeader-content {
   padding: var(--salt-spacing-75) 0;
   width: 100%;
@@ -74,6 +72,11 @@
   height: var(--salt-size-base);
   margin-left: auto;
 }
+.saltAccordionHeader:disabled {
+  background: var(--salt-actionable-secondary-background);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
 
 /* src/accordion/AccordionPanel.css */
 .saltAccordionPanel {
@@ -155,12 +158,13 @@
   position: relative;
   flex-shrink: 0;
   vertical-align: middle;
+  --badge-size: var(--salt-text-notation-lineHeight);
 }
 .saltBadge-badge {
   padding-left: var(--salt-spacing-50);
   padding-right: var(--salt-spacing-50);
-  height: var(--salt-text-notation-lineHeight);
-  min-width: var(--salt-text-notation-lineHeight);
+  height: var(--badge-size);
+  min-width: var(--badge-size);
   border-radius: var(--salt-palette-corner-strongest, 9999px);
   white-space: nowrap;
   z-index: var(--salt-zIndex-default);
@@ -181,7 +185,16 @@
 .saltBadge-topRight {
   position: absolute;
   right: var(--salt-spacing-100);
-  transform: translateX(100%);
+  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));
+}
+.saltBadge-dotBadge {
+  height: var(--salt-size-adornment);
+  min-width: var(--salt-size-adornment);
+  padding: 0;
+  --badge-size: var(--salt-size-adornment);
+}
+.saltBadge-dotBadge.saltBadge-topRight {
+  right: calc((var(--salt-size-adornment) / 2));
 }
 
 /* src/banner/Banner.css */
@@ -366,6 +379,7 @@
 .saltButton-disabled,
 .saltButton-disabled:active,
 .saltButton-disabled:focus-visible,
+.saltButton-disabled:focus-visible:active,
 .saltButton-disabled:hover {
   background: var(--saltButton-background-disabled, var(--button-background-disabled));
   color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
@@ -489,9 +503,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
   box-sizing: border-box;
 }
-.saltCheckboxIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
   outline-offset: var(--salt-focused-outlineOffset);
   outline: var(--saltCheckbox-outline, var(--salt-focused-outline));
@@ -615,10 +626,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltCheckboxIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/combo-box/ComboBox.css */
 .saltComboBox-focused {
-  outline: var(--salt-focused-outline);
+  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 
 /* src/dialog/Dialog.css */
@@ -636,7 +651,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   box-shadow: var(--salt-overlayable-shadow-modal);
   overflow-y: auto;
-  z-index: var(--salt-zIndex-drawer);
+  z-index: var(--salt-zIndex-modal);
   height: min-content;
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
   box-sizing: border-box;
@@ -2058,6 +2073,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 
 /* src/navigation-item/NavigationItem.css */
+.saltNavigationItem {
+  color: var(--salt-content-primary-foreground);
+  line-height: var(--salt-text-lineHeight);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+}
 .saltNavigationItem-wrapper {
   display: flex;
   gap: var(--salt-spacing-100);
@@ -2065,7 +2087,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   background: none;
   border: none;
-  font-size: var(--salt-text-fontSize);
+  font: inherit;
+  color: inherit;
   text-decoration: none;
   cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
@@ -2091,9 +2114,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2114,9 +2134,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2152,13 +2169,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltNavigationItem-wrapper:hover::after,
 .saltNavigationItem-wrapper:focus-visible::after {
   background: var(--salt-navigable-indicator-hover);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 .saltNavigationItem-active::after,
 .saltNavigationItem-active:hover::after,
 .saltNavigationItem-active:focus::after {
   background: var(--salt-navigable-indicator-active);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 
 /* src/option/Option.css */
@@ -2480,27 +2497,27 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pill-input/PillInput.css */
 .saltPillInput {
-  --input-border: none;
-  --input-borderColor: var(--salt-editable-borderColor);
-  --input-borderStyle: var(--salt-editable-borderStyle);
-  --input-outlineColor: var(--salt-focused-outlineColor);
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-border: none;
+  --pillInput-borderColor: var(--salt-editable-borderColor);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle);
+  --pillInput-outlineColor: var(--salt-focused-outlineColor);
+  --pillInput-borderWidth: var(--salt-size-border);
   align-items: center;
-  background: var(--saltInput-background, var(--input-background));
-  color: var(--saltInput-color, var(--salt-content-primary-foreground));
+  background: var(--saltPillInput-background, var(--pillInput-background));
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--pillInput-border);
+  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
-  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
-  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
-  min-height: var(--saltInput-minHeight, var(--salt-size-base));
-  min-width: var(--saltInput-minWidth, 4em);
-  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
-  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
+  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));
+  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));
+  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));
+  min-width: var(--saltPillInput-minWidth, 4em);
+  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));
+  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  border-radius: var(--salt-palette-corner-weak, 0);
-  border: var(--input-border);
   overflow: hidden;
 }
 .saltPillInput-truncate {
@@ -2510,58 +2527,58 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex-wrap: nowrap;
 }
 .saltPillInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--saltInput-background-hover, var(--input-background-hover));
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --pillInput-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
 .saltPillInput:active {
-  --input-borderColor: var(--salt-editable-borderColor-active);
-  --input-borderStyle: var(--salt-editable-borderStyle-active);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltInput-background-active, var(--input-background-active));
+  --pillInput-borderColor: var(--salt-editable-borderColor-active);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
   cursor: var(--salt-editable-cursor-active);
 }
 .saltPillInput-primary {
-  --input-background: var(--salt-editable-primary-background);
-  --input-background-active: var(--salt-editable-primary-background-active);
-  --input-background-hover: var(--salt-editable-primary-background-hover);
-  --input-background-disabled: var(--salt-editable-primary-background-disabled);
-  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+  --pillInput-background: var(--salt-editable-primary-background);
+  --pillInput-background-active: var(--salt-editable-primary-background-active);
+  --pillInput-background-hover: var(--salt-editable-primary-background-hover);
+  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltPillInput-secondary {
-  --input-background: var(--salt-editable-secondary-background);
-  --input-background-active: var(--salt-editable-secondary-background-active);
-  --input-background-hover: var(--salt-editable-secondary-background-active);
-  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --pillInput-background: var(--salt-editable-secondary-background);
+  --pillInput-background-active: var(--salt-editable-secondary-background-active);
+  --pillInput-background-hover: var(--salt-editable-secondary-background-active);
+  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);
 }
 .saltPillInput-error,
 .saltPillInput-error:hover {
-  --input-background: var(--salt-status-error-background);
-  --input-background-active: var(--salt-status-error-background);
-  --input-background-hover: var(--salt-status-error-background);
-  --input-borderColor: var(--salt-status-error-borderColor);
-  --input-outlineColor: var(--salt-status-error-borderColor);
-  --input-background-readonly: var(--salt-status-error-background);
+  --pillInput-background: var(--salt-status-error-background);
+  --pillInput-background-active: var(--salt-status-error-background);
+  --pillInput-background-hover: var(--salt-status-error-background);
+  --pillInput-borderColor: var(--salt-status-error-borderColor);
+  --pillInput-outlineColor: var(--salt-status-error-borderColor);
+  --pillInput-background-readonly: var(--salt-status-error-background);
 }
 .saltPillInput-warning,
 .saltPillInput-warning:hover {
-  --input-background: var(--salt-status-warning-background);
-  --input-background-active: var(--salt-status-warning-background);
-  --input-background-hover: var(--salt-status-warning-background);
-  --input-borderColor: var(--salt-status-warning-borderColor);
-  --input-outlineColor: var(--salt-status-warning-borderColor);
-  --input-background-readonly: var(--salt-status-warning-background);
+  --pillInput-background: var(--salt-status-warning-background);
+  --pillInput-background-active: var(--salt-status-warning-background);
+  --pillInput-background-hover: var(--salt-status-warning-background);
+  --pillInput-borderColor: var(--salt-status-warning-borderColor);
+  --pillInput-outlineColor: var(--salt-status-warning-borderColor);
+  --pillInput-background-readonly: var(--salt-status-warning-background);
 }
 .saltPillInput-success,
 .saltPillInput-success:hover {
-  --input-background: var(--salt-status-success-background);
-  --input-background-active: var(--salt-status-success-background);
-  --input-background-hover: var(--salt-status-success-background);
-  --input-borderColor: var(--salt-status-success-borderColor);
-  --input-outlineColor: var(--salt-status-success-borderColor);
-  --input-background-readonly: var(--salt-status-success-background);
+  --pillInput-background: var(--salt-status-success-background);
+  --pillInput-background-active: var(--salt-status-success-background);
+  --pillInput-background-hover: var(--salt-status-success-background);
+  --pillInput-borderColor: var(--salt-status-success-borderColor);
+  --pillInput-outlineColor: var(--salt-status-success-borderColor);
+  --pillInput-background-readonly: var(--salt-status-success-background);
 }
 .saltPillInput-input {
   background: none;
@@ -2573,12 +2590,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex: 1;
   font: inherit;
   height: 100%;
-  letter-spacing: var(--saltInput-letterSpacing, 0);
+  letter-spacing: var(--saltPillInput-letterSpacing, 0);
   margin: 0;
   min-width: 0;
   overflow: hidden;
   padding: 0;
-  text-align: var(--input-textAlign);
+  text-align: var(--pillInput-textAlign);
   width: 100%;
 }
 .saltPillInput-input:focus {
@@ -2593,23 +2610,23 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-focused,
 .saltPillInput-focused:hover {
-  --input-borderColor: var(--input-outlineColor);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+  --pillInput-borderColor: var(--pillInput-outlineColor);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 .saltPillInput.saltPillInput-readOnly {
-  --input-borderColor: var(--salt-editable-borderColor-readonly);
-  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-readonly);
+  --pillInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --pillInput-borderWidth: var(--salt-size-border);
+  background: var(--pillInput-background-readonly);
   cursor: var(--salt-editable-cursor-readonly);
 }
 .saltPillInput-focused.saltPillInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-borderWidth: var(--salt-size-border);
   outline: none;
 }
 .saltPillInput-focused.saltPillInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-borderWidth: var(--salt-size-border);
 }
 .saltPillInput-disabled .saltPillInput-input::selection {
   background: none;
@@ -2617,32 +2634,32 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput.saltPillInput-disabled,
 .saltPillInput.saltPillInput-disabled:hover,
 .saltPillInput.saltPillInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-disabled);
+  --pillInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --pillInput-borderWidth: var(--salt-size-border);
+  background: var(--pillInput-background-disabled);
   cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
 .saltPillInput-activationIndicator {
   left: 0;
   bottom: 0;
   width: 100%;
   position: absolute;
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+  border-bottom: var(--pillInput-borderWidth) var(--pillInput-borderStyle) var(--pillInput-borderColor);
 }
 .saltPillInput.saltPillInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
+  --pillInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--pillInput-borderColor);
+  --pillInput-borderWidth: 0;
 }
 .saltPillInput-bordered.saltPillInput-focused,
 .saltPillInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
 }
 .saltPillInput-bordered.saltPillInput-readOnly,
 .saltPillInput-bordered.saltPillInput-disabled:hover,
 .saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
-  --input-borderWidth: 0;
+  --pillInput-borderWidth: 0;
 }
 .saltPillInput-startAdornmentContainer {
   align-items: center;
@@ -2658,6 +2675,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   column-gap: var(--salt-spacing-100);
   align-self: flex-start;
 }
+.saltPillInput-statusAdornmentContainer {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  height: var(--salt-size-base);
+}
 .saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
   margin-left: var(--salt-spacing-50);
 }
@@ -2701,18 +2724,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: contents;
 }
 .saltPillInput .saltPill:focus-visible {
-  background: var(--salt-selectable-background-hover);
+  background: var(--salt-content-foreground-highlight);
+  color: var(--salt-content-primary-foreground);
+  --saltIcon-color: var(--salt-content-primary-foreground);
   outline: none;
 }
-.saltPillInput .saltPill:hover {
-  background: var(--salt-selectable-background-hover);
-}
-.saltPillInput .saltPill:active {
-  background: var(--salt-actionable-primary-background-active);
-  --saltPill-color: var(--salt-actionable-primary-foreground-active);
-  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
-}
-div[role=listitem] {
+.saltPillInput-pillList div[role=listitem] {
   display: inline;
 }
 .saltPillInput-overflowIndicator {
@@ -2758,9 +2775,6 @@ div[role=listitem] {
   margin-top: var(--radioButton-icon-marginTop);
   box-sizing: border-box;
 }
-.saltRadioButtonIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
   outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
   outline-offset: var(--salt-focused-outlineOffset);
@@ -2818,6 +2832,7 @@ div[role=listitem] {
   min-width: var(--radioButton-size);
   min-height: var(--radioButton-size);
   border-radius: 50%;
+  position: relative;
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
@@ -2861,6 +2876,10 @@ div[role=listitem] {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltRadioButtonIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/salt-provider/SaltProvider.css */
 .salt-provider {
@@ -3897,4 +3916,4 @@ label.saltText small,
   }
 }
 
-/* src/dff5db70-591c-4470-81bd-0e7a0db50a3c.css */
+/* src/b2ce0a41-ff2d-46d3-b9b0-a331dce86eca.css */

package/dist-cjs/accordion/Accordion.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordion-disabled {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Accordion.css.js.map

package/dist-cjs/accordion/Accordion.js

@@ -162,7 +162,10 @@ const Accordion = React.forwardRef(
         ref,
         className: clsx.clsx(
           withBaseName(),
-          { [withBaseName(status != null ? status : "")]: status },
+          {
+            [withBaseName(status != null ? status : "")]: status,
+            [withBaseName("disabled")]: disabled
+          },
           className
         ),
         ...rest

package/dist-cjs/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  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":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,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,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAC,cAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,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,uBAAAC,cAAA,CAACC,kCAAiB,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,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;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            {\n              [withBaseName(status ?? \"\")]: status,\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,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,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAC,cAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,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,uBAAAC,cAAA,CAACC,kCAAiB,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,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,CAAI,GAAA,MAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/accordion/AccordionHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionHeader.css.js.map

package/dist-cjs/accordion/AccordionHeader.js

@@ -151,7 +151,7 @@ const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
     if (id) {
       setHeaderId(id);
     }
-  }, [id]);
+  }, [id, setHeaderId]);
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     ref,
     className: clsx.clsx(
@@ -175,7 +175,7 @@ const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
         className: withBaseName("content"),
         children
       }),
-      status && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
+      status && !disabled && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
         className: withBaseName("statusIndicator"),
         status
       }),

package/dist-cjs/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator } from \"../status-indicator\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  if (expanded) {\n    return <ChevronUpIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ChevronDownIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, id, ...rest } = props;\n  const {\n    value,\n    expanded,\n    toggle,\n    indicatorSide,\n    disabled,\n    headerId,\n    panelId,\n    setHeaderId,\n    status,\n  } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (id) {\n      setHeaderId(id);\n    }\n  }, [id]);\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={headerId}\n      aria-controls={panelId}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","jsx","ChevronUpIcon","ChevronDownIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","StatusIndicator"],"mappings":"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"}
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator } from \"../status-indicator\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  if (expanded) {\n    return <ChevronUpIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ChevronDownIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, id, ...rest } = props;\n  const {\n    value,\n    expanded,\n    toggle,\n    indicatorSide,\n    disabled,\n    headerId,\n    panelId,\n    setHeaderId,\n    status,\n  } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (id) {\n      setHeaderId(id);\n    }\n  }, [id, setHeaderId]);\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={headerId}\n      aria-controls={panelId}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && !disabled && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","jsx","ChevronUpIcon","ChevronDownIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,uBAAQC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAc,aAAW,EAAA,IAAA;AAAA,MAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,KAAG,CAAA,CAAA;AAAA,GACrE;AAEA,EAAA,uBAAQD,cAAA,CAAAE,qBAAA,EAAA;AAAA,IAAgB,aAAW,EAAA,IAAA;AAAA,IAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,GAAG,CAAA,CAAA;AACvE,CAAA;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AACtD,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,MACEC,6BAAa,EAAA,CAAA;AAEjB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,EAAI,EAAA,WAAW,CAAC,CAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,EAAI,EAAA,QAAA;AAAA,IACJ,eAAe,EAAA,OAAA;AAAA,IACf,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,aAAA,KAAkB,0BAAWX,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,sBAC/DA,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAA;AAAA,OAAS,CAAA;AAAA,MACnD,MAAA,IAAU,CAAC,QAAA,oBACTA,cAAA,CAAAY,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,MAED,aAAA,KAAkB,2BAAYZ,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,KAAA;AAAA,GACnE,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/accordion/AccordionPanel.js

@@ -126,7 +126,7 @@ const AccordionPanel = React.forwardRef(
       if (id) {
         setPanelId(id);
       }
-    }, [id]);
+    }, [id, setPanelId]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref,
       className: clsx.clsx(withBaseName(), className),

package/dist-cjs/accordion/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the Accordion Panel\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel(props, ref) {\n    const { children, className, id, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n      useAccordion();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        setPanelId(id);\n      }\n    }, [id]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={panelId}\n        aria-labelledby={headerId}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n            })}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AAE7C,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,EAAE,QAAU,EAAA,OAAA,EAAS,YAAY,QAAU,EAAA,aAAA,KAC/CC,6BAAa,EAAA,CAAA;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,OACf;AAAA,KACF,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,EAAI,EAAA,OAAA;AAAA,MACJ,iBAAiB,EAAA,QAAA;AAAA,MACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,aAAkB,KAAA,MAAA;AAAA,WACtD,CAAA;AAAA,UAEA,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the Accordion Panel\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel(props, ref) {\n    const { children, className, id, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n      useAccordion();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        setPanelId(id);\n      }\n    }, [id, setPanelId]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={panelId}\n        aria-labelledby={headerId}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n            })}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AAE7C,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,EAAE,QAAU,EAAA,OAAA,EAAS,YAAY,QAAU,EAAA,aAAA,KAC/CC,6BAAa,EAAA,CAAA;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,OACf;AAAA,KACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA,CAAA;AAEnB,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,EAAI,EAAA,OAAA;AAAA,MACJ,iBAAiB,EAAA,QAAA;AAAA,MACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,aAAkB,KAAA,MAAA;AAAA,WACtD,CAAA;AAAA,UAEA,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/badge/Badge.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--badge-size);\n  min-width: var(--badge-size);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n  height: var(--salt-size-adornment);\n  min-width: var(--salt-size-adornment);\n  padding: 0;\n  --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n  right: calc((var(--salt-size-adornment) / 2));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Badge.css.js.map

package/dist-cjs/badge/Badge.js

@@ -118,6 +118,7 @@ const Badge = React.forwardRef(function Badge2({ value, max = 999, className, ch
     window: targetWindow
   });
   const valueText = typeof value === "number" && value > max ? `${max}+` : value;
+  const dotBadge = typeof value === "undefined";
   return /* @__PURE__ */ jsxRuntime.jsxs("span", {
     className: clsx.clsx(withBaseName(), className),
     ref,
@@ -126,7 +127,8 @@ const Badge = React.forwardRef(function Badge2({ value, max = 999, className, ch
       children,
       /* @__PURE__ */ jsxRuntime.jsx("span", {
         className: clsx.clsx(withBaseName("badge"), {
-          [withBaseName("topRight")]: children
+          [withBaseName("topRight")]: children,
+          [withBaseName("dotBadge")]: dotBadge
         }),
         children: valueText
       })