@salt-ds/core 1.60.0 → 1.62.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @salt-ds/core
 
+## 1.62.0
+
+### Minor Changes
+
+- 8980f01: A side panel is a persistent, side-by-side workspace that keeps supporting information and controls available while users continue their main task. It’s intended for ongoing parallel work—such as referencing details, inspecting data, filtering results, or editing attributes—where maintaining visibility and context improves accuracy and efficiency.
+
+  ```tsx
+  <SidePanelProvider>
+    <SidePanelTrigger>
+      <Button />
+    </SidePanelTrigger>
+    <SidePanel>
+      <SidePanelHeader>
+        <SidePanelTitle>Section Title</SidePanelTitle>
+        <SidePanelCloseButton />
+      </SidePanelHeader>
+      <SidePanelContent>
+        <Text>Side panel content goes here.</Text>
+      </SidePanelContent>
+    </SidePanel>
+  </SidePanelProvider>
+  ```
+
+## 1.61.0
+
+### Minor Changes
+
+- 2db14be: Added `Rating`.
+
+  `Rating` component allows users to submit feedback and view average scores on a defined scale, reflecting your product, service or experience.
+
+  ```tsx
+  <Rating aria-label="Rating" defaultValue={3} />
+  ```
+
+- 7ffd0fd: Added `Tab`, `TabAction`, `TabBar`, `TabList`, `TabPanel`, `Tabs`, `TabTrigger`.
+
+  `Tabs` allow users to move between different views of related content without leave the current page.
+
+  ```tsx
+  <Tabs defaultValue="Home">
+    <TabBar>
+      <TabList aria-label="Example tablist">
+        <Tab value="Home">
+          <TabTrigger>Home</TabTrigger>
+        </Tab>
+        <Tab value="Transactions">
+          <TabTrigger>Transactions</TabTrigger>
+        </Tab>
+        <Tab value="Checks">
+          <TabTrigger>Checks</TabTrigger>
+        </Tab>
+      </TabList>
+    </TabBar>
+  </Tabs>
+  ```
+
+### Patch Changes
+
+- e74d4d8: Fixed `aria-controls` on `NavigationItem` being applied to the outer wrapper element instead of the interactive trigger element.
+
 ## 1.60.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -3685,6 +3685,118 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transform: scale(1.01);
 }
 
+/* src/rating/Rating.css */
+.saltRating {
+  display: inline-flex;
+  box-sizing: border-box;
+}
+.saltFormField .saltRating-container {
+  height: var(--salt-size-base);
+  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));
+}
+.saltFormField .saltRating-label {
+  min-height: var(--salt-size-base);
+  padding-top: var(--salt-spacing-100);
+}
+.saltRating-labelBottom {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--salt-spacing-75);
+}
+.saltRating-labelRight {
+  flex-direction: row;
+  gap: var(--salt-spacing-150);
+}
+.saltRating-container {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-150);
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding-top: var(--salt-spacing-fixed-100);
+  padding-bottom: var(--salt-spacing-fixed-100);
+  box-sizing: border-box;
+}
+.saltRating-label {
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  box-sizing: border-box;
+}
+
+/* src/rating/RatingItem.css */
+.saltRatingItem {
+  height: var(--salt-size-icon);
+  width: var(--salt-size-icon);
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  cursor: var(--salt-cursor-hover);
+}
+.saltRatingItem-disabled,
+.saltRatingItem-readOnly {
+  cursor: default;
+}
+.saltRatingItem-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: inherit;
+  z-index: 1;
+}
+.saltRatingItem-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+}
+.saltRatingItem-icon {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--salt-sentiment-neutral-dataviz);
+}
+.saltRatingItem-icon .saltIcon {
+  --saltIcon-size: var(--salt-size-icon);
+}
+.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+  border-radius: var(--salt-palette-corner-strongest);
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));
+}
+.saltRatingItem-disabled {
+  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
+}
+.saltRatingItem-disabled .saltRatingItem-input {
+  cursor: var(--salt-cursor-disabled);
+}
+.saltRatingItem-selected .saltRatingItem-icon,
+.saltRatingItem-hovered .saltRatingItem-icon,
+.saltRatingItem-unselecting .saltRatingItem-icon {
+  color: var(--salt-sentiment-accent-dataviz);
+}
+
 /* src/salt-provider/SaltProvider.css */
 .salt-provider {
   display: contents;
@@ -3747,6 +3859,132 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-top-right-radius: 0;
 }
 
+/* src/side-panel/SidePanel.css */
+.saltSidePanel {
+  --saltSidePanel-width: 300px;
+  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));
+  --saltSidePanel-padding: var(--salt-spacing-300);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  width: var(--saltSidePanel-width);
+  height: 100%;
+  min-height: 0;
+  align-self: stretch;
+}
+.saltSidePanel-primary {
+  --sidePanel-background: var(--salt-container-primary-background);
+  --sidePanel-borderColor: var(--salt-container-primary-borderColor);
+}
+.saltSidePanel-secondary {
+  --sidePanel-background: var(--salt-container-secondary-background);
+  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);
+}
+.saltSidePanel-tertiary {
+  --sidePanel-background: var(--salt-container-tertiary-background);
+  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);
+}
+.saltSidePanel-none {
+  --sidePanel-background: none;
+  --saltSidePanel-padding: var(--salt-spacing-200);
+}
+.saltSidePanel-inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: var(--saltSidePanel-padding);
+  width: 100%;
+  background-color: var(--sidePanel-background, var(--salt-container-primary-background));
+}
+.saltSidePanel-left .saltSidePanel-inner {
+  border-right: var(--sidePanel-border);
+}
+.saltSidePanel-right .saltSidePanel-inner {
+  border-left: var(--sidePanel-border);
+}
+.saltSidePanel-none .saltSidePanel-inner {
+  border: none;
+}
+.saltSidePanel-enterAnimation,
+.saltSidePanel-exitAnimation {
+  contain: paint;
+}
+.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  flex: none;
+  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));
+}
+.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  right: 0;
+}
+.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  left: 0;
+}
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  pointer-events: none;
+}
+.saltSidePanel-enterAnimation {
+  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);
+}
+.saltSidePanel-exitAnimation {
+  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;
+}
+@keyframes saltSidePanel-open {
+  from {
+    width: 0;
+  }
+}
+@keyframes saltSidePanel-close {
+  to {
+    width: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .saltSidePanel-enterAnimation,
+  .saltSidePanel-exitAnimation {
+    animation: none;
+  }
+}
+
+/* src/side-panel/SidePanelContent.css */
+.saltSidePanelContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.saltSidePanelContent-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* src/side-panel/SidePanelHeader.css */
+.saltSidePanelHeader {
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  gap: var(--salt-spacing-100);
+  padding: 0 0 var(--salt-spacing-300);
+}
+
+/* src/side-panel/SidePanelTitle.css */
+.saltSidePanelTitle {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--salt-size-base);
+  display: flex;
+  align-items: center;
+}
+
 /* src/skip-link/SkipLink.css */
 .saltSkipLink {
   top: 0;
@@ -4308,6 +4546,188 @@ table.saltTable td.saltTable-td-align-right {
   overflow: auto;
 }
 
+/* src/tabs/Tab.css */
+.saltTab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  -webkit-appearance: none;
+  gap: var(--salt-spacing-100);
+  border: none;
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  white-space: pre;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  max-width: 100%;
+}
+@supports selector(:has(*)) {
+  .saltTabList:has([data-overflowbutton]) .saltTab {
+    max-width: calc(100% - var(--salt-spacing-100) - var(--salt-size-base));
+  }
+}
+.saltTab::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--salt-size-fixed-100) * -1);
+  right: calc(var(--salt-size-fixed-100) * -1);
+  height: var(--salt-size-indicator);
+}
+.saltTabList-bordered .saltTab::after {
+  top: 0;
+}
+.saltTabList-transparent .saltTab::after {
+  bottom: 0;
+}
+.saltTab:hover::after,
+.saltTab-focusVisible::after {
+  background: var(--salt-navigable-indicator-hover);
+}
+.saltTab-disabled:hover::after,
+.saltTab-disabled.saltTab-focusVisible::after {
+  background: none;
+}
+.saltTab-focusVisible {
+  outline: var(--salt-focused-outline);
+}
+.saltTabList-bordered .saltTab.saltTab-selected {
+  background: var(--saltTabList-activeColor);
+  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+}
+.saltTab.saltTab-selected::after {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltTab.saltTab-disabled {
+  cursor: var(--salt-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+}
+
+/* src/tabs/TabBar.css */
+.saltTabBar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+.saltTabBar-strip {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 auto;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+.saltTabBar-divider::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: var(--salt-size-fixed-100);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
+}
+.saltTabBar-inset {
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+}
+
+/* src/tabs/TabList.css */
+.saltTabList {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  gap: var(--salt-spacing-100);
+  max-width: 100%;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+.saltTabList-center {
+  justify-content: center;
+}
+.saltTabList-right {
+  justify-content: flex-end;
+}
+.saltTabList-activeColorPrimary {
+  --saltTabList-activeColor: var(--salt-container-primary-background);
+}
+.saltTabList-activeColorSecondary {
+  --saltTabList-activeColor: var(--salt-container-secondary-background);
+}
+.saltTabList-activeColorTertiary {
+  --saltTabList-activeColor: var(--salt-container-tertiary-background);
+}
+.saltTabList-measureContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+/* src/tabs/TabPanel.css */
+.saltTabPanel {
+  height: 100%;
+  width: 100%;
+}
+.saltTabPanel[hidden] {
+  display: none;
+}
+.saltTabPanel:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+/* src/tabs/TabTrigger.css */
+.saltTabTrigger {
+  all: unset;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  overflow: hidden;
+}
+.saltTabTrigger::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.saltTabTrigger:focus-visible {
+  outline: none;
+}
+
+/* src/tabs/Tabs.css */
+.saltTabs {
+  min-width: 0;
+}
+
 /* src/tag/Tag.css */
 .saltTag {
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -5838,4 +6258,75 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/efc56242-ef47-4712-a837-ef6de7fe6004.css */
+/* src/tabs/internal/overflow/TabOverflowList.css */
+.saltTabOverflowList {
+  position: relative;
+}
+.saltTabOverflowList-list {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+  z-index: var(--salt-zIndex-flyover);
+}
+.saltTabOverflowList-listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  max-height: inherit;
+  min-height: inherit;
+}
+.saltTabOverflowList-list .saltTab {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  align-items: center;
+  cursor: var(--salt-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  justify-content: flex-start;
+}
+@supports selector(:has(*)) {
+  .saltTabList:has([data-overflowbutton]) .saltTabOverflowList-list .saltTab {
+    max-width: unset;
+  }
+}
+.saltTabOverflowList-list .saltTab .saltTabTrigger {
+  justify-content: start;
+}
+.saltTabOverflowList-list .saltTab::after {
+  display: none;
+}
+.saltTabOverflowList-list .saltTab-focusVisible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltTabOverflowList-list .saltTab:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltTabOverflowList-list .saltTab-disabled {
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-cursor-disabled);
+}
+.saltTabOverflowList-list .saltTab-disabled:hover,
+.saltTabOverflowList-list .saltTab-disabled:active {
+  background: var(--salt-selectable-background);
+  box-shadow: none;
+}
+.saltTabOverflowList-list .saltTab:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
+}
+
+/* src/e5e7d410-cd0b-435a-a247-782117a31674.css */

package/dist-cjs/index.js

@@ -90,10 +90,19 @@ var LinearProgress = require('./progress/LinearProgress/LinearProgress.js');
 var RadioButton = require('./radio-button/RadioButton.js');
 var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
 var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
+var Rating = require('./rating/Rating.js');
 var SaltProvider = require('./salt-provider/SaltProvider.js');
 var Scrim = require('./scrim/Scrim.js');
 var SegmentedButtonGroup = require('./segmented-button-group/SegmentedButtonGroup.js');
 var SemanticIconProvider = require('./semantic-icon-provider/SemanticIconProvider.js');
+var SidePanel = require('./side-panel/SidePanel.js');
+var SidePanelCloseButton = require('./side-panel/SidePanelCloseButton.js');
+var SidePanelContent = require('./side-panel/SidePanelContent.js');
+var SidePanelHeader = require('./side-panel/SidePanelHeader.js');
+var SidePanelProvider = require('./side-panel/SidePanelProvider.js');
+var SidePanelTitle = require('./side-panel/SidePanelTitle.js');
+var SidePanelTrigger = require('./side-panel/SidePanelTrigger.js');
+var useSidePanel = require('./side-panel/useSidePanel.js');
 var SkipLink = require('./skip-link/SkipLink.js');
 var RangeSlider = require('./slider/RangeSlider.js');
 var Slider = require('./slider/Slider.js');
@@ -114,6 +123,13 @@ var TFoot = require('./table/TFoot.js');
 var TH = require('./table/TH.js');
 var THead = require('./table/THead.js');
 var TR = require('./table/TR.js');
+var Tab = require('./tabs/Tab.js');
+var TabAction = require('./tabs/TabAction.js');
+var TabBar = require('./tabs/TabBar.js');
+var TabList = require('./tabs/TabList.js');
+var TabPanel = require('./tabs/TabPanel.js');
+var Tabs = require('./tabs/Tabs.js');
+var TabTrigger = require('./tabs/TabTrigger.js');
 var Tag = require('./tag/Tag.js');
 var Code = require('./text/Code.js');
 var Display = require('./text/Display.js');
@@ -276,6 +292,7 @@ exports.LinearProgress = LinearProgress.LinearProgress;
 exports.RadioButton = RadioButton.RadioButton;
 exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
+exports.Rating = Rating.Rating;
 exports.BreakpointContext = SaltProvider.BreakpointContext;
 exports.DEFAULT_DENSITY = SaltProvider.DEFAULT_DENSITY;
 exports.DensityContext = SaltProvider.DensityContext;
@@ -290,6 +307,14 @@ exports.Scrim = Scrim.Scrim;
 exports.SegmentedButtonGroup = SegmentedButtonGroup.SegmentedButtonGroup;
 exports.SemanticIconProvider = SemanticIconProvider.SemanticIconProvider;
 exports.useIcon = SemanticIconProvider.useIcon;
+exports.SidePanel = SidePanel.SidePanel;
+exports.SidePanelCloseButton = SidePanelCloseButton.SidePanelCloseButton;
+exports.SidePanelContent = SidePanelContent.SidePanelContent;
+exports.SidePanelHeader = SidePanelHeader.SidePanelHeader;
+exports.SidePanelProvider = SidePanelProvider.SidePanelProvider;
+exports.SidePanelTitle = SidePanelTitle.SidePanelTitle;
+exports.SidePanelTrigger = SidePanelTrigger.SidePanelTrigger;
+exports.useSidePanel = useSidePanel.useSidePanel;
 exports.SkipLink = SkipLink.SkipLink;
 exports.RangeSlider = RangeSlider.RangeSlider;
 exports.Slider = Slider.Slider;
@@ -312,6 +337,13 @@ exports.TFoot = TFoot.TFoot;
 exports.TH = TH.TH;
 exports.THead = THead.THead;
 exports.TR = TR.TR;
+exports.Tab = Tab.Tab;
+exports.TabAction = TabAction.TabAction;
+exports.TabBar = TabBar.TabBar;
+exports.TabList = TabList.TabList;
+exports.TabPanel = TabPanel.TabPanel;
+exports.Tabs = Tabs.Tabs;
+exports.TabTrigger = TabTrigger.TabTrigger;
 exports.Tag = Tag.Tag;
 exports.Code = Code.Code;
 exports.Display1 = Display.Display1;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -30,6 +30,7 @@ const NavigationItem = React.forwardRef(
       level = 0,
       onExpand,
       style: styleProp,
+      "aria-controls": ariaControls,
       ...rest
     } = props;
     const targetWindow = window.useWindow();
@@ -67,6 +68,7 @@ const NavigationItem = React.forwardRef(
             ),
             render: render ?? (isLink ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" })),
             "aria-expanded": isLink ? void 0 : expanded,
+            "aria-controls": ariaControls,
             onClick: handleClick,
             "aria-current": isLink && active ? "page" : void 0,
             href,

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isLink = href !== undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n          aria-expanded={isLink ? undefined : expanded}\n          onClick={handleClick}\n          aria-current={isLink && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,SAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAYD,cAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACCA,cAAA,CAACI,2BAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      \"aria-controls\": ariaControls,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isLink = href !== undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n          aria-expanded={isLink ? undefined : expanded}\n          aria-controls={ariaControls}\n          onClick={handleClick}\n          aria-current={isLink && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,YAAA;AAAA,MACjB,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,SAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAYD,cAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,eAAA,EAAe,YAAA;AAAA,YACf,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACCA,cAAA,CAACI,2BAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}