@salt-ds/core 1.60.0 → 1.61.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @salt-ds/core
 
+## 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;
@@ -4308,6 +4420,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 +6132,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/79885058-087e-4d2c-b20a-41af8dda6a7e.css */

package/dist-cjs/index.js

@@ -90,6 +90,7 @@ 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');
@@ -114,6 +115,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 +284,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;
@@ -312,6 +321,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;;;;"}

package/dist-cjs/rating/Rating.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltRating {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n  height: var(--salt-size-base);\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n  min-height: var(--salt-size-base);\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  padding-top: var(--salt-spacing-fixed-100);\n  padding-bottom: var(--salt-spacing-fixed-100);\n  box-sizing: border-box;\n}\n\n.saltRating-label {\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  box-sizing: border-box;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Rating.css.js.map

package/dist-cjs/rating/Rating.css.js.map

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

package/dist-cjs/rating/Rating.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+require('../form-field-context/FormFieldContext.js');
+var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
+var capitalize = require('../utils/capitalize.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var Rating$1 = require('./Rating.css.js');
+var RatingItem = require('./RatingItem.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltRating");
+const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
+const Rating = React.forwardRef(function Rating2({
+  value: valueProp,
+  defaultValue = 0,
+  name: nameProp,
+  onChange,
+  className,
+  readOnly: readOnlyProp,
+  disabled: disabledProp,
+  max = 5,
+  getLabel = defaultGetLabel,
+  getVisibleLabel,
+  labelPlacement = "right",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-rating",
+    css: Rating$1,
+    window: targetWindow
+  });
+  const {
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
+    a11yProps: {
+      "aria-describedby": formFieldDescribedBy,
+      "aria-labelledby": formFieldLabelledBy
+    } = {}
+  } = useFormFieldProps.useFormFieldProps();
+  const disabled = formFieldDisabled || disabledProp;
+  const readOnly = formFieldReadOnly || readOnlyProp;
+  const [hoveredValue, setHoveredValue] = React.useState(0);
+  const [selected, setSelected] = useControlled.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Rating",
+    state: "value"
+  });
+  const name = useId.useId(nameProp);
+  const handleMouseEnter = (event) => {
+    if (readOnly || disabled) return;
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setHoveredValue(itemValue);
+  };
+  const handleChange = (event) => {
+    if (readOnly) {
+      event.preventDefault();
+      return;
+    }
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setSelected(itemValue);
+    onChange == null ? void 0 : onChange(event, itemValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(`label${capitalize.capitalize(labelPlacement)}`),
+        className
+      ),
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "radiogroup",
+            className: withBaseName("container"),
+            "aria-readonly": readOnly || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+            "aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+            onMouseLeave: () => setHoveredValue(0),
+            children: Array.from({ length: max }, (_, index) => {
+              const itemValue = index + 1;
+              const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
+              const isSelected = hoveredValue === 0 && itemValue <= selected;
+              const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                RatingItem.RatingItem,
+                {
+                  currentRating: selected,
+                  isHovered,
+                  isSelected,
+                  isUnselecting,
+                  onMouseEnter: handleMouseEnter,
+                  onChange: handleChange,
+                  value: itemValue,
+                  readOnly,
+                  disabled,
+                  name,
+                  "aria-label": getLabel == null ? void 0 : getLabel(itemValue)
+                },
+                itemValue
+              );
+            })
+          }
+        ),
+        getVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              withBaseName("label"),
+              withBaseName(`label-${labelPlacement}`)
+            ),
+            "aria-hidden": true,
+            children: getVisibleLabel(hoveredValue || selected, max)
+          }
+        )
+      ]
+    }
+  );
+});
+
+exports.Rating = Rating;
+//# sourceMappingURL=Rating.js.map