@salt-ds/core 1.40.0 → 1.42.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @salt-ds/core
 
+## 1.42.0
+
+### Minor Changes
+
+- 38da566: Added strong and small font weight support to `Text` when `styleAs="action"`.
+  `<strong>` and `<small>` work in `Button` as well.
+- aac1500: - Added `variant="ghost"` to Card with translucent background.
+  - Added default shadow to all Card, Link Card and Interactable Card variants.
+- 803d0c0: Added `underline` prop to `Link`. It controls when the underline text decoration is applied to a link.
+
+  ```
+  <Link underline="default">Underline default</Link>
+  <Link underline="never">Underline never</Link>
+  ```
+
+- e783dd5: Added `lockScroll` prop to FloatingComponent that makes the page unscrollable when the floating component is open.
+
+### Patch Changes
+
+- 32de853: Refactored Pagination to simplify page button styling.
+- 7a84d72: Fixed Accordion flashing blue when tapped on mobile devices.
+- c30b6a4: Revert layout padding and margin defaults removal to avoid margins and paddings being inherited from parent containers.
+
+## 1.41.0
+
+### Minor Changes
+
+- 90b85d4: Added accent colored Links.
+
+  ```tsx
+  <Link href="#" color="accent">
+    Link text
+  </Link>
+  ```
+
+- 9a75603: Added `color` prop to `Avatar`. Using `color` will change Avatar's background to one of the 20 categorical colors or accent.
+
+  ```tsx
+  <Avatar color="category-1" />
+  ```
+
+- 7510f56: Add `padding` and `margin` to `GridLayout`, `GridItem`, `BorderLayout` and `BorderItem`
+
+  ```tsx
+  <GridLayout padding={1} margin={1}>
+    <GridItem padding={2} margin={2}>
+      Item
+    </GridItem>
+  </GridLayout>
+  ```
+
+### Patch Changes
+
+- 90b85d4: When Link is set to `color="inherit"` its hover, active and focus colors will now also be inherited.
+  Fixed status colors being included in Link's `color` type. This was accidentally added when status color support was added to Text. If you need to achieve this behaviour you can use `color="inherit"`.
+- fd86394: Fix layout paddings and margins beings set by default
+- 56a997c: Fixed FormField incorrectly applying `align-self` when `labelPlacement` is `"left"` or `"right"`.
+- 98d3aac: Improved screen-reader support for read-only combo boxes.
+- ea5fc00: Improve screen reader support for Avatar.
+- ba0f436: Added centered vertical alignment to MenuItem
+- Updated dependencies [021e90d]
+  - @salt-ds/icons@1.13.2
+
 ## 1.40.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -37,6 +37,7 @@
   text-align: left;
   cursor: var(--salt-actionable-cursor-hover);
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 .saltAccordionHeader:focus-visible {
   outline: var(--salt-focused-outline);
@@ -116,35 +117,118 @@
 
 /* src/avatar/Avatar.css */
 .saltAvatar {
-  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));
   --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);
-  --avatar-base-size: var(--salt-size-base, 12px);
+  --avatar-base-size: var(--salt-size-base);
   --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));
   --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));
   --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));
   --saltIcon-size: calc(var(--avatar-container-size) / 2);
 }
 .saltAvatar {
-  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--saltAvatar-background, var(--salt-accent-background));
-  color: var(--avatar-foreground);
+  color: var(--saltAvatar-foreground, var(--avatar-foreground));
+  background: var(--saltAvatar-background, var(--avatar-background));
   font-size: var(--avatar-fontSize);
+  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
   width: var(--avatar-container-size);
   min-width: var(--avatar-container-size);
   height: var(--avatar-container-size);
   min-height: var(--avatar-container-size);
+  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));
+  display: flex;
+  justify-content: center;
+  align-items: center;
   overflow: hidden;
   user-select: none;
-  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));
+}
+.saltAvatar-accent {
+  --avatar-background: var(--salt-accent-background);
+  --avatar-foreground: var(--salt-accent-foreground);
+}
+.saltAvatar-category-1 {
+  --avatar-background: var(--salt-category-1-bold-background);
+  --avatar-foreground: var(--salt-category-1-bold-foreground);
+}
+.saltAvatar-category-2 {
+  --avatar-background: var(--salt-category-2-bold-background);
+  --avatar-foreground: var(--salt-category-2-bold-foreground);
+}
+.saltAvatar-category-3 {
+  --avatar-background: var(--salt-category-3-bold-background);
+  --avatar-foreground: var(--salt-category-3-bold-foreground);
+}
+.saltAvatar-category-4 {
+  --avatar-background: var(--salt-category-4-bold-background);
+  --avatar-foreground: var(--salt-category-4-bold-foreground);
+}
+.saltAvatar-category-5 {
+  --avatar-background: var(--salt-category-5-bold-background);
+  --avatar-foreground: var(--salt-category-5-bold-foreground);
+}
+.saltAvatar-category-6 {
+  --avatar-background: var(--salt-category-6-bold-background);
+  --avatar-foreground: var(--salt-category-6-bold-foreground);
+}
+.saltAvatar-category-7 {
+  --avatar-background: var(--salt-category-7-bold-background);
+  --avatar-foreground: var(--salt-category-7-bold-foreground);
+}
+.saltAvatar-category-8 {
+  --avatar-background: var(--salt-category-8-bold-background);
+  --avatar-foreground: var(--salt-category-8-bold-foreground);
+}
+.saltAvatar-category-9 {
+  --avatar-background: var(--salt-category-9-bold-background);
+  --avatar-foreground: var(--salt-category-9-bold-foreground);
+}
+.saltAvatar-category-10 {
+  --avatar-background: var(--salt-category-10-bold-background);
+  --avatar-foreground: var(--salt-category-10-bold-foreground);
+}
+.saltAvatar-category-11 {
+  --avatar-background: var(--salt-category-11-bold-background);
+  --avatar-foreground: var(--salt-category-11-bold-foreground);
+}
+.saltAvatar-category-12 {
+  --avatar-background: var(--salt-category-12-bold-background);
+  --avatar-foreground: var(--salt-category-12-bold-foreground);
+}
+.saltAvatar-category-13 {
+  --avatar-background: var(--salt-category-13-bold-background);
+  --avatar-foreground: var(--salt-category-13-bold-foreground);
+}
+.saltAvatar-category-14 {
+  --avatar-background: var(--salt-category-14-bold-background);
+  --avatar-foreground: var(--salt-category-14-bold-foreground);
+}
+.saltAvatar-category-15 {
+  --avatar-background: var(--salt-category-15-bold-background);
+  --avatar-foreground: var(--salt-category-15-bold-foreground);
+}
+.saltAvatar-category-16 {
+  --avatar-background: var(--salt-category-16-bold-background);
+  --avatar-foreground: var(--salt-category-16-bold-foreground);
+}
+.saltAvatar-category-17 {
+  --avatar-background: var(--salt-category-17-bold-background);
+  --avatar-foreground: var(--salt-category-17-bold-foreground);
+}
+.saltAvatar-category-18 {
+  --avatar-background: var(--salt-category-18-bold-background);
+  --avatar-foreground: var(--salt-category-18-bold-foreground);
+}
+.saltAvatar-category-19 {
+  --avatar-background: var(--salt-category-19-bold-background);
+  --avatar-foreground: var(--salt-category-19-bold-foreground);
+}
+.saltAvatar-category-20 {
+  --avatar-background: var(--salt-category-20-bold-background);
+  --avatar-foreground: var(--salt-category-20-bold-foreground);
 }
 .saltAvatar:has(img),
 .saltAvatar-withImage {
-  background: none;
+  --avatar-background: none;
 }
 .saltAvatar > img,
 .saltAvatar > svg:not(.saltIcon) {
@@ -629,6 +713,13 @@
   --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);
   cursor: progress;
 }
+.saltButton strong {
+  font-weight: var(--salt-text-action-fontWeight-strong);
+}
+.saltButton small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-small);
+}
 .saltButton-spinner {
   position: absolute;
   inset: 0;
@@ -649,6 +740,7 @@
   border-style: var(--salt-container-borderStyle);
   padding: var(--saltCard-padding, var(--salt-spacing-200));
   position: relative;
+  box-shadow: var(--salt-overlayable-shadow);
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
@@ -667,6 +759,10 @@
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
   border-color: var(--salt-container-tertiary-borderColor);
 }
+.saltCard-ghost {
+  background: var(--saltCard-background, var(--salt-container-ghost-background));
+  border-color: var(--salt-container-ghost-borderColor);
+}
 .saltCard-accent::after {
   content: "";
   position: absolute;
@@ -1485,12 +1581,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   grid-area: 3 / 1;
 }
 .saltFormField-labelLeft {
-  align-self: center;
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
 .saltFormField-labelRight {
-  align-self: center;
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
@@ -1567,6 +1661,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   grid-column-start: var(--gridItem-gridColumnStart);
   grid-row-end: var(--gridItem-gridRowEnd);
   grid-column-end: var(--gridItem-gridColumnEnd);
+  margin: var(--gridItem-margin);
+  padding: var(--gridItem-padding);
 }
 .saltGridItem-area {
   grid-area: var(--gridItem-gridArea);
@@ -1579,6 +1675,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   row-gap: var(--gridLayout-rowGap);
   grid-template-columns: var(--gridLayout-columns);
   grid-template-rows: var(--gridLayout-rows);
+  margin: var(--gridLayout-margin);
+  padding: var(--gridLayout-padding);
   grid-auto-columns: auto;
   grid-auto-rows: auto;
 }
@@ -1806,6 +1904,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));
   border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));
   border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
+  box-shadow: var(--salt-overlayable-shadow);
   display: block;
   padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));
   position: relative;
@@ -1930,45 +2029,76 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/link/Link.css */
 .saltLink {
-  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));
-  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));
-  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));
-  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));
-  --link-textDecoration: var(--salt-navigable-textDecoration);
-  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);
+  --link-color: "inherit";
+  --link-color-hover: "inherit";
+  --link-color-active: "inherit";
+  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-focus: "inherit";
+  --link-focus-outlineColor: currentColor;
   --link-fontFamily: var(--salt-text-fontFamily);
-  --link-focus-outline: var(--salt-focused-outline);
 }
-.saltLink {
+.saltLink-underlineDefault {
+  --link-textDecoration: var(--salt-typography-textDecoration-underline);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-active: var(--link-textDecoration);
+  --link-textDecoration-focus: var(--link-textDecoration-hover);
+  --link-textDecoration-visited: var(--link-textDecoration);
+}
+.saltLink-underlineNever {
+  --link-textDecoration: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+}
+.saltLink.saltText {
   color: var(--link-color);
   letter-spacing: var(--salt-text-letterSpacing);
   text-decoration: var(--link-textDecoration);
   font-family: var(--link-fontFamily);
 }
-.saltText-primary {
+.saltLink-primary {
   --link-color: var(--salt-content-primary-foreground);
+  --link-color-hover: var(--salt-content-primary-foreground);
+  --link-color-active: var(--salt-content-primary-foreground);
+  --link-color-focus: var(--salt-content-primary-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
 }
-.saltText-secondary {
+.saltLink-secondary {
   --link-color: var(--salt-content-secondary-foreground);
+  --link-color-hover: var(--salt-content-secondary-foreground);
+  --link-color-active: var(--salt-content-secondary-foreground);
+  --link-color-focus: var(--salt-content-secondary-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
+}
+.saltLink-accent {
+  --link-color: var(--salt-content-accent-foreground);
+  --link-color-hover: var(--salt-content-accent-foreground);
+  --link-color-active: var(--salt-content-accent-foreground);
+  --link-color-focus: var(--salt-content-accent-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
 }
 .saltLink .saltLink-icon {
   margin-left: var(--salt-spacing-75);
   margin-bottom: -2px;
 }
 .saltLink:visited {
-  color: var(--link-color-visited);
+  color: var(--saltLink-color-visited, var(--link-color-visited));
+  text-decoration: var(--link-textDecoration-visited);
 }
 .saltLink:hover {
-  color: var(--link-color-hover);
+  color: var(--saltLink-color-hover, var(--link-color-hover));
   text-decoration: var(--link-textDecoration-hover);
 }
 .saltLink:active {
-  color: var(--link-color-active);
+  color: var(--saltLink-color-active, var(--link-color-active));
+  text-decoration: var(--link-textDecoration-active);
 }
 .saltLink:focus {
-  outline: var(--link-focus-outline);
-  color: var(--link-color-focus);
-  text-decoration: var(--link-textDecoration-hover);
+  color: var(--saltLink-color-focus, var(--link-color-focus));
+  outline: var(--salt-focused-outline);
+  outline-color: var(--link-focus-outlineColor);
+  text-decoration: var(--link-textDecoration-focus);
 }
 .saltLink-externalLinkADA {
   display: block;
@@ -1983,16 +2113,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/link-card/LinkCard.css */
 .saltLinkCard {
-  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
-  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
   border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));
+  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
+  box-shadow: var(--salt-overlayable-shadow);
   display: block;
+  overflow: hidden;
   padding: var(--saltLinkCard-padding, var(--salt-spacing-200));
   position: relative;
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   --linkCard-accent-color: var(--salt-accent-background);
-  overflow: hidden;
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
@@ -2146,6 +2277,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
   box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
 }
+.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
+  min-height: var(--salt-text-lineHeight);
+}
 .saltMenuItem-expandIcon.saltIcon {
   margin-left: auto;
 }
@@ -2544,6 +2678,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
 }
+.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
+  min-height: var(--salt-text-lineHeight);
+}
 
 /* src/option/OptionGroup.css */
 .saltOptionGroup-label {
@@ -2689,30 +2826,46 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pagination/PageButton.css */
 .saltPageButton {
-  --saltButton-minWidth: var(--salt-size-base);
-  --saltButton-fontWeight: var(--salt-text-fontWeight);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-text-color: var(--salt-content-primary-foreground);
-  --saltButton-background-active: var(--salt-selectable-background-selected);
-  --saltButton-text-color-active: var(--salt-content-primary-foreground);
+  min-width: var(--salt-size-base);
+  font-weight: var(--salt-text-fontWeight);
+  height: var(--salt-size-base);
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  appearance: none;
+  box-sizing: border-box;
+  padding: 0 var(--salt-spacing-100);
+  border: none;
+  font-size: var(--salt-text-fontSize);
+  font-family: var(--salt-text-action-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-action-letterSpacing);
+  cursor: var(--salt-selectable-cursor-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
-  --saltButton-text-color-hover: var(--salt-content-primary-foreground);
-  --saltButton-background-hover: var(--salt-selectable-background-hover);
+  background: var(--salt-selectable-background-hover);
+}
+.saltPageButton:active,
+.saltPageButton-active {
+  background: var(--salt-selectable-background-selected);
+}
+.saltPageButton:focus-visible {
+  outline: var(--salt-focused-outline);
 }
 .saltPageButton:disabled {
-  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
-  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
+  color: var(--salt-content-secondary-foreground);
+  background: var(--salt-selectable-background);
+  cursor: var(--salt-editable-cursor-readonly);
 }
 .saltPageButton-selected {
-  --saltButton-background: var(--salt-selectable-background-selected);
+  background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-selected:focus-visible {
-  --saltButton-background-hover: var(--salt-selectable-background-selected);
+  background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-fixed {
-  --saltButton-padding: 0;
+  padding: 0;
 }
 
 /* src/pagination/PageRanges.css */
@@ -2736,11 +2889,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: flex;
   flex-wrap: nowrap;
 }
-.saltPaginator-arrowButton-previous {
-  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
+.saltPaginator-arrowButton-previous.saltButton {
+  margin: 0 var(--salt-spacing-100) 0 0;
 }
-.saltPaginator-arrowButton-next {
-  --saltButton-margin: 0 0 0 var(--salt-spacing-100);
+.saltPaginator-arrowButton-next.saltButton {
+  margin: 0 0 0 var(--salt-spacing-100);
 }
 
 /* src/panel/Panel.css */
@@ -3339,7 +3492,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
   color: var(--salt-content-primary-foreground);
   letter-spacing: var(--salt-text-letterSpacing);
-  text-decoration: var(--salt-navigable-textDecoration);
+  text-decoration: var(--salt-typography-textDecoration-underline);
   font-family: var(--salt-text-fontFamily);
   white-space: nowrap;
   background: var(--saltSkipLink-background, var(--salt-container-primary-background));
@@ -3847,6 +4000,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-align: var(--salt-text-action-textAlign);
   font-weight: var(--salt-text-action-fontWeight);
 }
+.saltText-action.saltText strong {
+  font-weight: var(--salt-text-action-fontWeight-strong);
+}
+.saltText-action.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-small);
+}
 code.saltText,
 .saltText-code.saltText {
   font-family: var(--salt-text-code-fontFamily);
@@ -4367,4 +4527,4 @@ label.saltText small,
   }
 }
 
-/* src/01290561-3655-4333-9891-20d24ed36bf9.css */
+/* src/69f9d8f9-ed5e-44e2-9a8c-b7ed2155ac5d.css */

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: transparent;\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: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\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: transparent;\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  -webkit-tap-highlight-color: transparent;\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: transparent;\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/avatar/Avatar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--avatar-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-accent-background);\n  --avatar-foreground: var(--salt-accent-foreground);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n  --avatar-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n  --avatar-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n  --avatar-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n  --avatar-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n  --avatar-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n  --avatar-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n  --avatar-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n  --avatar-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n  --avatar-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n  --avatar-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n  --avatar-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n  --avatar-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n  --avatar-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n  --avatar-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n  --avatar-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n  --avatar-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n  --avatar-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n  --avatar-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n  --avatar-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n  --avatar-foreground: var(--salt-category-20-bold-foreground);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/avatar/Avatar.js

@@ -20,6 +20,7 @@ const defaultNameToInitials = (name) => name == null ? void 0 : name.split(" ").
 const Avatar = React.forwardRef(function Avatar2({
   className,
   children: childrenProp,
+  color = "accent",
   name,
   nameToInitials = defaultNameToInitials,
   src,
@@ -30,7 +31,7 @@ const Avatar = React.forwardRef(function Avatar2({
 }, ref) {
   const targetWindow = window.useWindow();
   const { UserIcon } = SemanticIconProvider.useIcon();
-  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { "aria-label": "User Avatar" }) : fallbackIconProp;
+  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { "aria-hidden": true }) : fallbackIconProp;
   styles.useComponentCssInjection({
     testId: "salt-avatar",
     css: Avatar$1,
@@ -44,15 +45,11 @@ const Avatar = React.forwardRef(function Avatar2({
   const status = useAvatarImage.useAvatarImage({ src });
   const hasImgNotFailing = status === "loaded";
   if (hasImgNotFailing) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("img", { alt: name, src });
+    children = /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", src });
   } else if (childrenProp != null) {
     children = childrenProp;
   }
   const avatarInitials = nameToInitials(name);
-  const initialsProps = avatarInitials ? {
-    role: "img",
-    "aria-label": name
-  } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -60,10 +57,14 @@ const Avatar = React.forwardRef(function Avatar2({
       style,
       className: clsx.clsx(
         withBaseName(),
-        { [withBaseName("withImage")]: hasImgNotFailing },
+        withBaseName(color),
+        {
+          [withBaseName("withImage")]: hasImgNotFailing
+        },
         className
       ),
-      ...initialsProps,
+      role: name ? "img" : void 0,
+      "aria-label": name,
       ...rest,
       children: children || avatarInitials || fallbackIcon
     }

package/dist-cjs/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`\n   */\n  fallbackIcon?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-label=\"User Avatar\" />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt={name} src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const initialsProps = avatarInitials\n    ? {\n        role: \"img\",\n        \"aria-label\": name,\n      }\n    : {};\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withImage\")]: hasImgNotFailing },\n        className,\n      )}\n      {...initialsProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IACI,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,KAAA,CAAM,KACP,KAAM,CAAA,CAAA,EAAG,CACT,CAAA,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EACL,CAAA,CAAA,WAAA,EAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAiB,GAAA,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAO,GAAA,mBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,YAAc,EAAA,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,4BAAQ,EAAA;AAE7B,EAAA,MAAM,eACJ,gBAAqB,KAAA,KAAA,CAAA,kCAClB,QAAS,EAAA,EAAA,YAAA,EAAW,eAAc,CAEnC,GAAA,gBAAA;AAGJ,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,QAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAS,GAAAC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,IAAA,EAAM,GAAU,EAAA,CAAA;AAAA,GACvC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA;AAAA;AAGb,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,gBAAgB,cAClB,GAAA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,YAAc,EAAA;AAAA,MAEhB,EAAC;AAEL,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,gBAAiB,EAAA;AAAA,QAChD;AAAA,OACF;AAAA,MACC,GAAG,aAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAkB,IAAA;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      role={name ? \"img\" : undefined}\n      aria-label={name}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IACI,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,KAAA,CAAM,KACP,KAAM,CAAA,CAAA,EAAG,CACT,CAAA,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EACL,CAAA,CAAA,WAAA,EAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,KAAQ,GAAA,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAiB,GAAA,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAO,GAAA,mBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,YAAc,EAAA,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,4BAAQ,EAAA;AAE7B,EAAA,MAAM,eACJ,gBAAqB,KAAA,KAAA,CAAA,kCAClB,QAAS,EAAA,EAAA,aAAA,EAAW,MAAC,CAEtB,GAAA,gBAAA;AAGJ,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,QAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAS,GAAAC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAI,EAAA,EAAA,EAAG,GAAU,EAAA,CAAA;AAAA,GACnC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA;AAAA;AAGb,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM,OAAO,KAAQ,GAAA,KAAA,CAAA;AAAA,MACrB,YAAY,EAAA,IAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAkB,IAAA;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}

package/dist-cjs/border-item/BorderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n  \"north\",\n  \"west\",\n  \"center\",\n  \"east\",\n  \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n      /**\n       * Position in the Border Layout\n       */\n      position: BorderPosition;\n      /**\n       * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n       */\n      sticky?: boolean;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n  props: BorderItemProps<T>,\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n  <T extends ElementType>(\n    {\n      children,\n      className,\n      position,\n      sticky = false,\n      style,\n      ...rest\n    }: BorderItemProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-border-item\",\n      css: borderItemCss,\n      window: targetWindow,\n    });\n\n    const gridItemStyles = {\n      ...style,\n      \"--gridItem-gridArea\": position,\n    };\n\n    return (\n      <GridItem\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          \"saltGridItem-area\",\n          {\n            [withBaseName(\"sticky\")]: sticky,\n          },\n          className,\n        )}\n        style={gridItemStyles}\n        {...rest}\n      >\n        {children}\n      </GridItem>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AA2BA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA;AAAA,KACzB;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,mBAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,WAC5B;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}
+{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n  \"north\",\n  \"west\",\n  \"center\",\n  \"east\",\n  \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n      /**\n       * Position in the Border Layout\n       */\n      position: BorderPosition;\n      /**\n       * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n       */\n      sticky?: boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n  props: BorderItemProps<T>,\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n  <T extends ElementType>(\n    {\n      children,\n      className,\n      position,\n      sticky = false,\n      style,\n      ...rest\n    }: BorderItemProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-border-item\",\n      css: borderItemCss,\n      window: targetWindow,\n    });\n\n    const gridItemStyles = {\n      ...style,\n      \"--gridItem-gridArea\": position,\n    };\n\n    return (\n      <GridItem\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          \"saltGridItem-area\",\n          {\n            [withBaseName(\"sticky\")]: sticky,\n          },\n          className,\n        )}\n        style={gridItemStyles}\n        {...rest}\n      >\n        {children}\n      </GridItem>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAaO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAmCA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA;AAAA,KACzB;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,mBAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,WAC5B;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}