@salt-ds/core 1.30.0 → 1.31.0

package/css/salt-core.css

@@ -51,10 +51,6 @@
 }
 .saltAccordionHeader .saltAccordionHeader-icon {
   height: var(--salt-size-base);
-  transition: transform var(--salt-duration-perceptible) ease-in-out;
-}
-.saltAccordionHeader[aria-expanded=true] > .saltAccordionHeader-icon {
-  transform: rotate(90deg);
 }
 .saltAccordionHeader-error {
   background: var(--salt-status-error-background);
@@ -101,11 +97,14 @@
   overflow: hidden;
 }
 .saltAccordionPanel-content {
-  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+  padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
   padding-top: var(--salt-spacing-300);
   padding-bottom: var(--salt-spacing-300);
 }
+.saltAccordionPanel-indentedContent {
+  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+}
 @media (prefers-reduced-motion: reduce) {
   .saltAccordionPanel {
     transition: none;
@@ -898,9 +897,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
+  --dropdown-border: none;
   --dropdown-borderColor: var(--salt-editable-borderColor);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown {
   all: unset;
@@ -910,8 +913,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--dropdown-background);
   cursor: var(--dropdown-cursor);
   min-height: var(--salt-size-base);
-  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
-  display: flex;
+  border: var(--dropdown-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  display: inline-flex;
   align-items: center;
   padding: 0 var(--salt-spacing-100);
   gap: var(--salt-spacing-100);
@@ -921,13 +925,25 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
+  position: relative;
+  overflow: hidden;
 }
 .saltDropdown:hover {
   --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);
+  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+}
+.saltDropdown:active {
+  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
 }
-.saltDropdown:focus-visible {
+.saltDropdown:focus {
   outline: var(--salt-focused-outline);
-  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
 }
 .saltDropdown-content {
   flex: 1;
@@ -942,45 +958,91 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltDropdown-primary {
   --dropdown-background: var(--salt-editable-primary-background);
+  --dropdown-background-active: var(--salt-editable-primary-background-active);
+  --dropdown-background-hover: var(--salt-editable-primary-background-hover);
+  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltDropdown-secondary {
   --dropdown-background: var(--salt-editable-secondary-background);
-}
-.saltDropdown:disabled {
-  --dropdown-background: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-active: var(--salt-editable-secondary-background-active);
+  --dropdown-background-hover: var(--salt-editable-secondary-background-active);
+  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltDropdown:disabled,
+.saltDropdown:disabled:active,
+.saltDropdown:disabled:hover,
+.saltDropdown:disabled:focus {
+  --dropdown-background: var(--dropdown-background-disabled);
   --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
   --dropdown-color: var(--salt-content-primary-foreground-disabled);
   --dropdown-cursor: var(--salt-selectable-cursor-disabled);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown[aria-readonly=true] {
-  --dropdown-background: var(--salt-editable-primary-background-readonly);
   --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-readonly);
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderWidth: var(--salt-size-border);
+}
+.saltDropdown[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus {
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
 }
-.saltDropdown-error {
+.saltDropdown-error,
+.saltDropdown-error:hover,
+.saltDropdown-error:focus {
   --dropdown-background: var(--salt-status-error-background);
   --dropdown-borderColor: var(--salt-status-error-borderColor);
-}
-.saltDropdown-error .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-error-background);
+  --dropdown-background-hover: var(--salt-status-error-background);
+  --dropdown-background-readonly: var(--salt-status-error-background);
   outline-color: var(--salt-status-error-borderColor);
-  --dropdown-borderColor: var(--salt-status-error-borderColor);
 }
-.saltDropdown-warning {
+.saltDropdown-warning,
+.saltDropdown-warning:hover,
+.saltDropdown-warning:focus {
   --dropdown-background: var(--salt-status-warning-background);
   --dropdown-borderColor: var(--salt-status-warning-borderColor);
-}
-.saltDropdown-warning .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-warning-background);
+  --dropdown-background-hover: var(--salt-status-warning-background);
+  --dropdown-background-readonly: var(--salt-status-warning-background);
   outline-color: var(--salt-status-warning-borderColor);
-  --dropdown-borderColor: var(--salt-status-warning-borderColor);
 }
-.saltDropdown-success {
+.saltDropdown-success,
+.saltDropdown-success:hover,
+.saltDropdown-success:focus {
   --dropdown-background: var(--salt-status-success-background);
   --dropdown-borderColor: var(--salt-status-success-borderColor);
-}
-.saltDropdown-success .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-success-background);
+  --dropdown-background-hover: var(--salt-status-success-background);
+  --dropdown-background-readonly: var(--salt-status-success-background);
   outline-color: var(--salt-status-success-borderColor);
-  --dropdown-borderColor: var(--salt-status-success-borderColor);
+}
+.saltDropdown-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);
+}
+.saltDropdown-bordered {
+  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);
+  --dropdown-borderWidth: 0;
+}
+.saltDropdown-bordered.saltDropdown:focus,
+.saltDropdown-bordered:active {
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltDropdown-bordered[aria-readonly=true],
+.saltDropdown-bordered[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus,
+.saltDropdown-bordered.saltDropdown:disabled,
+.saltDropdown-bordered.saltDropdown:disabled:hover {
+  --dropdown-borderWidth: 0;
 }
 
 /* src/file-drop-zone/FileDropZone.css */
@@ -1765,7 +1827,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   min-width: 10em;
   position: relative;
-  z-index: var(--salt-zIndex-popout);
+  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
 }
@@ -2165,6 +2227,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOptionList {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner-weak, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -2413,6 +2476,7 @@ 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);
@@ -2431,6 +2495,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--input-border);
+  overflow: hidden;
 }
 .saltPillInput-truncate {
   height: var(--salt-size-base);
@@ -2472,6 +2539,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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);
 }
 .saltPillInput-warning,
 .saltPillInput-warning:hover {
@@ -2480,6 +2548,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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);
 }
 .saltPillInput-success,
 .saltPillInput-success:hover {
@@ -2488,6 +2557,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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);
 }
 .saltPillInput-input {
   background: none;
@@ -2517,7 +2587,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
 }
-.saltPillInput-focused {
+.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));
@@ -2556,6 +2627,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
 }
+.saltPillInput.saltPillInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltPillInput-bordered.saltPillInput-readOnly,
+.saltPillInput-bordered.saltPillInput-disabled:hover,
+.saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
+  --input-borderWidth: 0;
+}
 .saltPillInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -2589,6 +2673,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-endAdornmentContainer > .saltButton {
   --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
 .saltPillInput-inputWrapper {
   display: flex;
@@ -2602,6 +2687,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   box-sizing: border-box;
 }
+.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {
+  padding-top: calc(var(--salt-spacing-50) - var(--salt-size-border));
+}
+.saltPillInput-bordered > .saltPillInput-inputWrapper {
+  padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 0;
+}
 .saltPillInput-pillList {
   display: contents;
 }
@@ -3780,4 +3871,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/bc041f09-367d-4fd6-976a-333ff67e34d8.css */
+/* src/d617c351-7466-4472-a746-ef8092b8c14c.css */

package/dist-cjs/accordion/Accordion.js

@@ -119,6 +119,7 @@ const Accordion = React.forwardRef(
       defaultExpanded,
       expanded: expandedProp,
       disabled,
+      indicatorSide = "left",
       id: idProp,
       onToggle,
       status,
@@ -147,6 +148,7 @@ const Accordion = React.forwardRef(
         value,
         toggle,
         expanded,
+        indicatorSide,
         disabled: Boolean(disabled),
         id: id != null ? id : "",
         status

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\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   * 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      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          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":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,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,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,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,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,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 { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\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":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,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,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,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,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;;;;"}

package/dist-cjs/accordion/AccordionContext.js

@@ -116,6 +116,7 @@ const AccordionContext = createContext.createContext(
     expanded: false,
     toggle: () => void 0,
     disabled: false,
+    indicatorSide: "left",
     id: ""
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { 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  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    id: \"\",\n  }\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAmB,GAAAA,2BAAA;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,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { 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":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,gBAAmB,GAAAA,2BAAA;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,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}

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  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\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: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";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionHeader.css.js.map

package/dist-cjs/accordion/AccordionHeader.js

@@ -111,9 +111,21 @@ var AccordionContext = require('./AccordionContext.js');
 var AccordionHeader$1 = require('./AccordionHeader.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltAccordionHeader");
+function ExpansionIcon({ expanded }) {
+  if (expanded) {
+    return /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
+      "aria-hidden": true,
+      className: withBaseName("icon")
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
+    "aria-hidden": true,
+    className: withBaseName("icon")
+  });
+}
 const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
   const { children, className, onClick, ...rest } = props;
-  const { value, expanded, toggle, disabled, id, status } = AccordionContext.useAccordion();
+  const { value, expanded, toggle, indicatorSide, disabled, id, status } = AccordionContext.useAccordion();
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-accordion-header",
@@ -140,17 +152,19 @@ const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
-        "aria-hidden": "true",
-        className: withBaseName("icon")
+      indicatorSide === "left" && /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon, {
+        expanded
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
         className: withBaseName("content"),
         children
       }),
       status && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
         className: withBaseName("statusIndicator"),
         status
+      }),
+      indicatorSide === "right" && /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon, {
+        expanded
       })
     ]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } 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\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const { value, expanded, toggle, disabled, id, status } = 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  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={`${id}-header`}\n      aria-controls={`${id}-panel`}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n      <div className={withBaseName(\"content\")}>{children}</div>\n      {status && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","jsxs","clsx","jsx","ChevronRightIcon","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,UAAU,EAAI,EAAA,MAAA,KAAWC,6BAAa,EAAA,CAAA;AAEvE,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,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,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,sBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,sBACrED,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAA;AAAA,OAAS,CAAA;AAAA,MAClD,0BACEA,cAAA,CAAAE,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } 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, ...rest } = props;\n  const { value, expanded, toggle, indicatorSide, disabled, id, 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  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={`${id}-header`}\n      aria-controls={`${id}-panel`}\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","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,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,eAAe,QAAU,EAAA,EAAA,EAAI,MAAO,EAAA,GACnEC,6BAAa,EAAA,CAAA;AAEf,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,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,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,aAAA,KAAkB,0BAAWV,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,0BACEA,cAAA,CAAAW,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,MAED,aAAA,KAAkB,2BAAYX,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,KAAA;AAAA,GACnE,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordionPanel {\n  display: grid;\n  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltAccordionPanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n  padding-right: var(--salt-spacing-100);\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltAccordionPanel {\n    transition: none;\n  }\n}\n";
+var css_248z = ".saltAccordionPanel {\n  display: grid;\n  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltAccordionPanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n}\n\n.saltAccordionPanel-indentedContent {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltAccordionPanel {\n    transition: none;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionPanel.css.js.map

package/dist-cjs/accordion/AccordionPanel.js

@@ -120,7 +120,7 @@ const AccordionPanel = React.forwardRef(
       css: AccordionPanel$1,
       window: targetWindow
     });
-    const { id, expanded } = AccordionContext.useAccordion();
+    const { id, expanded, indicatorSide } = AccordionContext.useAccordion();
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref,
       className: clsx.clsx(withBaseName(), className),
@@ -133,7 +133,9 @@ const AccordionPanel = React.forwardRef(
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: withBaseName("inner"),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("content"),
+          className: clsx.clsx(withBaseName("content"), {
+            [withBaseName("indentedContent")]: indicatorSide === "left"
+          }),
           children
         })
       })

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } 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, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { id, expanded } = useAccordion();\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={`${id}-panel`}\n        aria-labelledby={`${id}-header`}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div className={withBaseName(\"content\")}>{children}</div>\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,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,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,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,EAAA,EAAI,QAAS,EAAA,GAAIC,6BAAa,EAAA,CAAA;AAEtC,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,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,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,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } 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, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { id, expanded, indicatorSide } = useAccordion();\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={`${id}-panel`}\n        aria-labelledby={`${id}-header`}\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","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,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,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,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,EAAA,EAAI,QAAU,EAAA,aAAA,KAAkBC,6BAAa,EAAA,CAAA;AAErD,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,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,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/combo-box/ComboBox.js

@@ -142,6 +142,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
     defaultValue,
     valueToString = ListControlState.defaultValueToString,
     truncate,
+    bordered = false,
     ...rest
   } = props;
   const targetWindow = window.useWindow();
@@ -436,6 +437,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
         inputRef,
         value: valueState,
         ref: handleRef,
+        bordered,
         ...getReferenceProps({
           onBlur: handleBlur,
           onFocus: handleFocus,