@salt-ds/core 1.42.0 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,125 @@
 # @salt-ds/core
 
+## 1.44.0
+
+### Minor Changes
+
+- 7fe2106: Promote updated `Slider` and `RangeSlider` components to core. The update includes:
+
+  - Improved accessibility and focus behavior.
+  - Enhanced API for slider customization, including options like `marks`, `showTicks`, and `showTooltip`.
+  - Fixed touch interactions on mobile to allow dragging of the slider thumb without horizontal screen scrolling.
+  - Set the default `max` value of the `Slider` and `RangeSlider` as 100 to be consistent with the HTML specification.
+
+  ```tsx
+  <Slider
+    min={0}
+    max={30}
+    defaultValue={15}
+    marks={[
+      { value: 0, label: "Minimum" },
+      { value: 30, label: "Maximum" },
+    ]}
+    showTicks={true}
+  />
+  ```
+
+  ```tsx
+  <RangeSlider
+    min={0}
+    max={30}
+    defaultValue={15}
+    marks={[
+      { value: 0, label: "0" },
+      { value: 10, label: "10" },
+      { value: 15, label: "15" },
+      { value: 19, label: "19" },
+      { value: 30, label: "30" },
+    ]}
+    showTicks={true}
+    minLabel="Very low"
+    maxLabel="Very high"
+    restrictToMarks={true}
+  />
+  ```
+
+## 1.43.0
+
+### Minor Changes
+
+- 78eaee3: Promote updated `DialogHeader` component to core. `DialogHeader`'s update follows our standardized header for container components and app regions, and it can be added to provide a structured header for dialog. The header includes a title and actions that follows our Header Block pattern.
+
+  - Fixed default `initialFocus` to close button (if used) as per accessibility guidance.
+  - Updated bottom padding of DialogHeader from `--salt-spacing-300` to `--salt-spacing-100`
+  - Updated close button position in `DialogHeader` to horizontally align with header icon using the new `actions` prop.
+  - Updated overflow border to be above and below `DialogContent` instead of below `DialogHeader` to make scrolling area more evident.
+  - Added `description` to `DialogHeader`. the description text is displayed just below the header.
+
+  ```typescript
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogHeader
+      header="Terms and conditions"
+      actions={
+        <Button
+          aria-label="Close overlay"
+          appearance="transparent"
+          sentiment="neutral"
+        >
+          <CloseIcon aria-hidden />
+        </Button>
+      }
+    />
+    <DialogContent>
+        Only Chase Cards that we determine are eligible can be added to the wallet.
+    </DialogContent>
+  </Dialog>;
+  ```
+
+  Prompted `OverlayHeader` component to core.
+
+  - Fixed default `initialFocus` to close button (if used) as per accessibility guidance.
+  - Updated close button position in `OverlayHeader` using the new `actions` prop.
+  - Added `description` to `OverlayHeader`. the description text is displayed just below the header.
+
+  ```tsx
+  <Overlay {...args}>
+    <OverlayTrigger>
+      <Button>Show Overlay</Button>
+    </OverlayTrigger>
+    <OverlayPanel aria-labelledby={id}>
+      <OverlayHeader
+        id={id}
+        header="Title"
+        actions={
+          <Button
+            aria-label="Close overlay"
+            appearance="transparent"
+            sentiment="neutral"
+          >
+            <CloseIcon aria-hidden />
+          </Button>
+        }
+      />
+      <OverlayPanelContent>Content of Overlay</OverlayPanelContent>
+    </OverlayPanel>
+  </Overlay>
+  ```
+
+### Patch Changes
+
+- 20abfb6: Fixed multiselect Option having nested interactive elements, impacted ComboBox, Dropdown and ListBox.
+
+  Fixes #4737.
+
+- c59472d: fix type error when `BorderLayout` has only one child or its conditionally rendered
+- 2bdfbfb: Fixed ComboBox and Dropdown status adornment spacing, to align with rest of form controls.
+
+  Closes #4794
+
+- 0073384: Fixed invalid variant prop crashed Button
+- ef8f30a: Fixed ComboBox having 2 popup lists due to browser's default `autoComplete` behaviour on `input`.
+  You can still enable it via `inputProps={{autoComplete: "on"}}` if needed.
+
 ## 1.42.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -1115,24 +1115,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
   margin-left: var(--salt-spacing-200);
   margin-right: var(--salt-spacing-300);
   padding-left: var(--salt-spacing-100);
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
-  box-shadow: none;
   flex: 1 1 auto;
 }
 .saltDialogContent-overflow {
   padding-right: var(--salt-spacing-100);
 }
 .saltDialogContent-scroll {
+  margin-left: var(--salt-spacing-300);
+  margin-right: var(--salt-spacing-300);
   border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
-  box-shadow: var(--salt-overlayable-shadow-scroll);
 }
 
 /* src/dialog/DialogHeader.css */
 .saltDialogHeader {
-  padding-bottom: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-300);
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
-  align-items: center;
   display: flex;
   flex-direction: row;
   gap: var(--salt-spacing-100);
@@ -1141,8 +1139,24 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDialogHeader-header {
   margin: 0;
 }
+.saltDialogHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+  align-items: flex-start;
+}
+.saltDialogHeader-header > .saltText {
+  margin: 0;
+}
+.saltDialogHeader-actionsContainer {
+  align-self: flex-start;
+}
 .saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
 }
 .saltDialogHeader-withAccent {
   position: relative;
@@ -1152,22 +1166,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   top: 0;
   left: 0;
-  bottom: var(--salt-spacing-100);
+  bottom: var(--salt-spacing-300);
   width: var(--salt-size-bar);
   background: var(--salt-accent-background);
 }
-.saltDialogHeader-error::before {
-  background: var(--salt-status-error-borderColor);
-}
-.saltDialogHeader-info::before {
-  background: var(--salt-status-info-borderColor);
-}
-.saltDialogHeader-success::before {
-  background: var(--salt-status-success-borderColor);
-}
-.saltDialogHeader-warning::before {
-  background: var(--salt-status-warning-borderColor);
-}
 
 /* src/divider/Divider.css */
 .saltDivider-primary {
@@ -1286,7 +1288,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: inline-flex;
   align-items: center;
   padding: 0 var(--salt-spacing-100);
-  gap: var(--salt-spacing-100);
   color: var(--dropdown-color);
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
@@ -1434,6 +1435,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
 }
+.saltDropdown-startAdornmentContainer {
+  margin-right: var(--salt-spacing-100);
+}
+.saltDropdown .saltDropdown-toggle {
+  margin-left: var(--salt-spacing-100);
+}
 
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
@@ -2726,6 +2733,35 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: none;
 }
 
+/* src/overlay/OverlayHeader.css */
+.saltOverlayHeader {
+  padding: var(--salt-spacing-100);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltOverlayHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2);
+  align-items: flex-start;
+}
+.saltOverlayHeader-header {
+  margin: 0;
+}
+.saltOverlayHeader-actionsContainer {
+  align-self: flex-start;
+}
+.saltOverlayHeader ~ .saltOverlayPanelContent {
+  padding-top: 0;
+}
+
 /* src/overlay/OverlayPanel.css */
 .saltOverlayPanel {
   --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));
@@ -2767,20 +2803,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));
 }
-.saltOverlayHeader ~ .saltOverlayPanelContent-separator {
-  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
-}
 .saltOverlayPanelContent-overflow {
   padding-right: var(--salt-spacing-100);
+  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
   overflow-y: auto;
 }
-.saltOverlayHeader ~ .saltOverlayPanelContent-scroll {
+.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {
   border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
-  box-shadow: var(--salt-overlayable-shadow-scroll);
-  margin-top: calc(0 - var(--salt-size-border));
-}
-.saltOverlayHeader ~ .saltOverlayPanelContent-separator ~ .saltOverlayPanelContent {
-  padding-top: 0;
 }
 
 /* src/pagination/CompactInput.css */
@@ -3169,7 +3199,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-endAdornmentContainer {
   align-items: center;
   display: inline-flex;
-  padding-left: var(--salt-spacing-100);
+  padding-left: var(--salt-spacing-50);
   padding-top: var(--salt-spacing-50);
   column-gap: var(--salt-spacing-100);
   align-self: flex-start;
@@ -4527,4 +4557,259 @@ label.saltText small,
   }
 }
 
-/* src/69f9d8f9-ed5e-44e2-9a8c-b7ed2155ac5d.css */
+/* src/slider/internal/SliderThumb.css */
+.saltSliderThumb {
+  align-items: center;
+  background: var(--salt-accent-borderColor);
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  height: var(--salt-size-selectable);
+  outline: none;
+  position: absolute;
+  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);
+  transform: translateX(-50%);
+  width: var(--salt-size-border-strong);
+  touch-action: none;
+}
+.saltSliderThumb-disabled {
+  background: var(--salt-accent-borderColor-disabled);
+  pointer-events: none;
+}
+.saltSliderThumb-focusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-color: var(--salt-focused-outlineColor);
+}
+.saltSliderThumb:active,
+.saltSliderThumb-dragging {
+  cursor: var(--draggable-grab-cursor-active);
+}
+.saltSliderThumb-input {
+  border: 0;
+  appearance: none;
+  cursor: var(--salt-selectable-cursor-hover);
+  height: var(--salt-size-base);
+  left: var(--slider-progressPercentage);
+  margin: 0;
+  opacity: 0.0001;
+  overflow: hidden;
+  -webkit-appearance: none;
+  pointer-events: none;
+  width: var(--salt-size-base);
+  padding: 0;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.saltSliderThumb-secondThumb {
+  z-index: 2;
+}
+.saltSliderThumb-accessibleText {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* src/slider/internal/SliderTooltip.css */
+.saltSliderTooltip {
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
+  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
+  bottom: 50%;
+  left: 50%;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: var(--saltTooltip-textAlign, left);
+  user-select: none;
+  visibility: hidden;
+  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
+}
+.saltSliderTooltip-visible,
+.saltSliderTooltip:hover {
+  visibility: visible;
+}
+.saltSliderTooltip-arrow {
+  fill: var(--salt-container-primary-background);
+  height: var(--salt-size-icon);
+  left: 50%;
+  position: absolute;
+  pointer-events: none;
+  top: 100%;
+  transform: translateX(-50%);
+  stroke: var(--salt-container-primary-borderColor);
+  stroke-width: var(--salt-size-border);
+  width: var(--salt-size-icon);
+}
+.saltSliderTooltip-text {
+  white-space: nowrap;
+}
+
+/* src/slider/internal/SliderTrack.css */
+.saltSliderTrack {
+  --slider-track-background: var(--salt-track-borderColor);
+  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-progressPercentage: 0%;
+  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
+  --slider-progressPercentageStart: 0%;
+  --slider-progressPercentageEnd: 0%;
+  display: flex;
+  touch-action: none;
+  width: 100%;
+}
+.saltSliderTrack.saltSliderTrack-withMarks {
+  margin-bottom: calc(var(--salt-size-base) / 2);
+}
+.saltSliderTrack-disabled {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltSliderTrack-wrapper {
+  align-items: center;
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  flex: 1;
+  height: var(--salt-size-selectable);
+  position: relative;
+  width: 100%;
+}
+.saltSliderTrack-disabled,
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  pointer-events: none;
+}
+.saltSliderTrack-rail {
+  display: flex;
+  flex: 100%;
+  height: var(--salt-size-bar);
+  justify-content: space-between;
+  position: relative;
+}
+.saltSliderTrack-rail::before,
+.saltSliderTrack-rail::after {
+  content: "";
+  display: block;
+  height: 100%;
+}
+.saltSliderTrack-rail::before {
+  background: var(--slider-track-fill);
+  border-top-left-radius: var(--salt-palette-corner-weaker);
+  border-bottom-left-radius: var(--salt-palette-corner-weaker);
+  width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
+  border-bottom-left-radius: unset;
+}
+.saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  border-top-right-radius: var(--salt-palette-corner-weaker);
+  border-bottom-right-radius: var(--salt-palette-corner-weaker);
+  width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
+  border-bottom-right-radius: unset;
+}
+.saltSliderTrack-range .saltSliderTrack-rail::before {
+  background: var(--slider-track-background);
+  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
+  background: var(--slider-track-fill);
+  height: 100%;
+  left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));
+  position: absolute;
+  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);
+}
+.saltSliderTrack-minLabel,
+.saltSliderTrack-maxLabel {
+  user-select: none;
+}
+.saltSliderTrack-dragging,
+.saltSliderTrack-dragging .saltSliderTrack-wrapper {
+  cursor: var(--salt-draggable-grab-cursor-active);
+}
+.saltSliderTrack-disabled {
+  --slider-track-fill: var(--salt-accent-borderColor-disabled);
+  --slider-track-background: var(--salt-track-borderColor-disabled);
+}
+.saltSliderTrack-ticks {
+  top: calc(var(--salt-size-bar) + var(--slider-tick-height));
+  position: absolute;
+  width: 100%;
+}
+.saltSliderTrack-tick {
+  background: var(--slider-track-background);
+  height: var(--slider-tick-height);
+  position: absolute;
+  transform: translate(-50%);
+  width: var(--salt-size-border-strong);
+}
+.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
+  visibility: hidden;
+}
+.saltSliderTrack-tickSelected {
+  background: var(--slider-track-fill);
+}
+.saltSliderTrack-tick:first-of-type {
+  transform: unset;
+}
+.saltSliderTrack-tick:last-of-type {
+  transform: translateX(-100%);
+}
+.saltSliderTrack-marks {
+  position: absolute;
+  user-select: none;
+  width: 100%;
+}
+.saltSliderTrack-markLabel {
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-label-fontFamily);
+  font-weight: var(--salt-text-label-fontWeight);
+  font-size: var(--salt-text-label-fontSize);
+  line-height: var(--salt-text-label-lineHeight);
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  transform: translateX(-50%);
+  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));
+  white-space: nowrap;
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {
+  transform: translateX(0%);
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {
+  transform: translateX(-100%);
+}
+.saltFormField .saltSliderTrack.saltSliderTrack-withMark {
+  margin-bottom: 0;
+}
+.saltFormField .saltSliderTrack-container {
+  --saltFormField-label-width: 10%;
+  height: var(--salt-size-base);
+}
+.saltFormField .saltSliderTrack-markLabel {
+  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);
+}
+
+/* src/1af42f57-5eb2-47da-8657-1a22a667b415.css */

package/dist-cjs/border-layout/BorderLayout.js

@@ -16,7 +16,7 @@ const BorderLayout = React.forwardRef(
   ({ children, className, gap, style, ...rest }, ref) => {
     const borderAreas = React.Children.map(
       children,
-      (child) => child.props.position
+      (child) => React.isValidElement(child) && child.props.position
     );
     const topSection = borderAreas.includes("north") ? "north ".repeat(numberOfColumns) : "none ".repeat(numberOfColumns);
     const leftSection = borderAreas.includes("west") ? "west" : "center";

package/dist-cjs/border-layout/BorderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ReactElement,\n  forwardRef,\n  useEffect,\n} from \"react\";\n\nimport type { BorderItemProps } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: ReactElement<BorderItemProps<T>>[];\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(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  <T extends ElementType>(\n    { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const borderAreas = Children.map(\n      children,\n      (child: ReactElement<BorderItemProps<T>>) => child.props.position,\n    );\n\n    const topSection = borderAreas.includes(\"north\")\n      ? \"north \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n    const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n    const midSection = `${leftSection} center ${rightSection}`;\n\n    const bottomSection = borderAreas.includes(\"south\")\n      ? \"south \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n    };\n\n    return (\n      <GridLayout\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Children","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA;AAMjB,MAAM,YAAsC,GAAAC,gBAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAO,EAAA,GAAG,IAAK,EAAA,EAC3C,GACG,KAAA;AACH,IAAA,MAAM,cAAcC,cAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA;AAAA,KAC3D;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE7D,IAAA,MAAM,UAAa,GAAA,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAI,CAAA,EAAA,UAAU,CAAM,GAAA,EAAA,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN;AAAA,WACF;AAAA;AACF;AACF,KACF,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA;AAAA,KAC/B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAS,EAAA,eAAA;AAAA,QACT,KAAK,GAAO,IAAA,CAAA;AAAA,QACZ,KAAO,EAAA,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  isValidElement,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: ReactNode;\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(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  <T extends ElementType>(\n    { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const borderAreas = Children.map(\n      children,\n      (child) => isValidElement(child) && child.props.position,\n    ) as BorderPosition[];\n\n    const topSection = borderAreas.includes(\"north\")\n      ? \"north \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n    const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n    const midSection = `${leftSection} center ${rightSection}`;\n\n    const bottomSection = borderAreas.includes(\"south\")\n      ? \"south \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n    };\n\n    return (\n      <GridLayout\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA;AAMjB,MAAM,YAAsC,GAAAC,gBAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAO,EAAA,GAAG,IAAK,EAAA,EAC3C,GACG,KAAA;AACH,IAAA,MAAM,cAAcC,cAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAU,KAAAC,oBAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAM,CAAA;AAAA,KAClD;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE7D,IAAA,MAAM,UAAa,GAAA,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAI,CAAA,EAAA,UAAU,CAAM,GAAA,EAAA,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN;AAAA,WACF;AAAA;AACF;AACF,KACF,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA;AAAA,KAC/B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAS,EAAA,eAAA;AAAA,QACT,KAAK,GAAO,IAAA,CAAA;AAAA,QACZ,KAAO,EAAA,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/button/Button.js

@@ -72,8 +72,8 @@ const Button = React.forwardRef(
       window: targetWindow
     });
     const mapped = variantToAppearanceAndColor(variant);
-    const appearance = appearanceProp ?? mapped.appearance ?? "solid";
-    const sentiment = sentimentProp ?? mapped.sentiment ?? "neutral";
+    const appearance = appearanceProp ?? (mapped == null ? void 0 : mapped.appearance) ?? "solid";
+    const sentiment = sentimentProp ?? (mapped == null ? void 0 : mapped.sentiment) ?? "neutral";
     const { tabIndex, ...restButtonProps } = buttonProps;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",

package/dist-cjs/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { Spinner } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n  \"solid\",\n  \"bordered\",\n  \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n  \"accented\",\n  \"neutral\",\n  \"positive\",\n  \"negative\",\n  \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   *\n   * @deprecated Use `appearance` and `sentiment` instead.\n   *\n   * | variant     | appearance    | sentiment   |\n   * | ----------- | ------------- | ----------- |\n   * | `cta`       | `solid`       | `accented`  |\n   * | `primary`   | `solid`       | `neutral`   |\n   * | `secondary` | `transparent` | `neutral`   |\n   */\n  variant?: ButtonVariant;\n  /**\n   * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n   * 'solid' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  appearance?: ButtonAppearance;\n  /**\n   * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n   * 'neutral' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  sentiment?: ButtonSentiment;\n\n  /**\n   * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n   *\n   * @since 1.38.0.\n   */\n  loading?: boolean;\n\n  /**\n   * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n   *\n   * @since 1.38.0.\n   */\n  loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n  variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n  switch (variant) {\n    case \"primary\":\n      return { appearance: \"solid\", sentiment: \"neutral\" };\n    case \"secondary\":\n      return { appearance: \"transparent\", sentiment: \"neutral\" };\n    case \"cta\":\n      return { appearance: \"solid\", sentiment: \"accented\" };\n  }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      loading,\n      loadingAnnouncement,\n      appearance: appearanceProp,\n      sentiment: sentimentProp,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?,\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      loading,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button\",\n      css: buttonCss,\n      window: targetWindow,\n    });\n\n    const mapped = variantToAppearanceAndColor(variant);\n    const appearance: ButtonAppearance =\n      appearanceProp ?? mapped.appearance ?? \"solid\";\n\n    const sentiment: ButtonSentiment =\n      sentimentProp ?? mapped.sentiment ?? \"neutral\";\n\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"loading\")]: loading,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n            [withBaseName(appearance)]: appearance,\n            [withBaseName(sentiment)]: sentiment,\n          },\n          className,\n        )}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {loading && (\n          <div className={withBaseName(\"spinner\")} aria-hidden>\n            <Spinner size=\"small\" aria-hidden disableAnnouncer />\n          </div>\n        )}\n        {typeof loadingAnnouncement === \"string\" && (\n          <span role=\"status\" className={withBaseName(\"sr-only\")}>\n            {loadingAnnouncement}\n          </span>\n        )}\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsxs","clsx","jsx","Spinner"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { Spinner } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n  \"solid\",\n  \"bordered\",\n  \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n  \"accented\",\n  \"neutral\",\n  \"positive\",\n  \"negative\",\n  \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   *\n   * @deprecated Use `appearance` and `sentiment` instead.\n   *\n   * | variant     | appearance    | sentiment   |\n   * | ----------- | ------------- | ----------- |\n   * | `cta`       | `solid`       | `accented`  |\n   * | `primary`   | `solid`       | `neutral`   |\n   * | `secondary` | `transparent` | `neutral`   |\n   */\n  variant?: ButtonVariant;\n  /**\n   * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n   * 'solid' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  appearance?: ButtonAppearance;\n  /**\n   * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n   * 'neutral' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  sentiment?: ButtonSentiment;\n\n  /**\n   * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n   *\n   * @since 1.38.0.\n   */\n  loading?: boolean;\n\n  /**\n   * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n   *\n   * @since 1.38.0.\n   */\n  loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n  variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n  switch (variant) {\n    case \"primary\":\n      return { appearance: \"solid\", sentiment: \"neutral\" };\n    case \"secondary\":\n      return { appearance: \"transparent\", sentiment: \"neutral\" };\n    case \"cta\":\n      return { appearance: \"solid\", sentiment: \"accented\" };\n  }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      loading,\n      loadingAnnouncement,\n      appearance: appearanceProp,\n      sentiment: sentimentProp,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?,\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      loading,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button\",\n      css: buttonCss,\n      window: targetWindow,\n    });\n\n    const mapped = variantToAppearanceAndColor(variant);\n    const appearance: ButtonAppearance =\n      appearanceProp ?? mapped?.appearance ?? \"solid\";\n\n    const sentiment: ButtonSentiment =\n      sentimentProp ?? mapped?.sentiment ?? \"neutral\";\n\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"loading\")]: loading,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n            [withBaseName(appearance)]: appearance,\n            [withBaseName(sentiment)]: sentiment,\n          },\n          className,\n        )}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {loading && (\n          <div className={withBaseName(\"spinner\")} aria-hidden>\n            <Spinner size=\"small\" aria-hidden disableAnnouncer />\n          </div>\n        )}\n        {typeof loadingAnnouncement === \"string\" && (\n          <span role=\"status\" className={withBaseName(\"sr-only\")}>\n            {loadingAnnouncement}\n          </span>\n        )}\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsxs","clsx","jsx","Spinner"],"mappings":"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"}