@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-height: 1px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/toolbar/Toolbar.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormField-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n}\n\n/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: flex-start;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-top: var(--salt-size-unit);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormField-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormField-primary.saltFormField > .saltButton-active,\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
+var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormField-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n}\n\n/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: center;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-right: var(--salt-size-unit);\n  align-self: center;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormField-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormField-primary.saltFormField > .saltButton-active,\n.saltToolbar .saltFormField-primary.saltFormField > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-es/packages/lab/src/app-header/AppHeader.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-borderRegion));\n  --appHeader-padding: calc(var(--salt-size-unit) * 3);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-borderRegion));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/button-bar/OrderedButton.js

@@ -1,11 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { clsx } from 'clsx';
-import { makePrefixer, Button } from '@salt-ds/core';
+import { makePrefixer, Button, capitalize } from '@salt-ds/core';
 import { ButtonBarContext } from './internal/ButtonBarContext.js';
 import { useDescendant } from './internal/useDescendant.js';
-import { capitalize } from '../utils/capitalize.js';
-import '../utils/useFloatingUI.js';
 import './OrderedButton.css.js';
 
 const withBasename = makePrefixer("saltOrderedButton");

package/dist-es/packages/lab/src/button-bar/OrderedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\nimport { capitalize } from \"../utils\";\n\nimport \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref\n  ) {\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  }\n);\n"],"names":["OrderedButton"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,YAAA;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,KAAQ,GAAA,UAAA,CAAW,KAAK,CAAI,GAAA,EAAA,CAAA,CAAI,CACpD,GAAA,KAAA,IAAS,CAAC,OAAA;AAAA,UACZ,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Button, ButtonProps, capitalize, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref\n  ) {\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  }\n);\n"],"names":["OrderedButton"],"mappings":";;;;;;;;AAuCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,YAAA;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,KAAQ,GAAA,UAAA,CAAW,KAAK,CAAI,GAAA,EAAA,CAAA,CAAI,CACpD,GAAA,KAAA,IAAS,CAAC,OAAA;AAAA,UACZ,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/carousel/Carousel.js

@@ -1,10 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId, GridLayout, Button } from '@salt-ds/core';
+import { makePrefixer, useId, GridLayout, Button, RadioButtonGroup, RadioButton } from '@salt-ds/core';
 import { forwardRef, Children, useEffect } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
-import { RadioButton } from '../radio-button/RadioButton.js';
-import { RadioButtonGroup } from '../radio-button/RadioButtonGroup.js';
-import '../radio-button/RadioButtonIcon.js';
 import { DeckLayout } from '../deck-layout/DeckLayout.js';
 import { clsx } from 'clsx';
 import './Carousel.css.js';

package/dist-es/packages/lab/src/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import { Button, GridLayout, makePrefixer, useId } from \"@salt-ds/core\";\nimport {\n  ChangeEventHandler,\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { RadioButtonGroup, RadioButton } from \"../radio-button\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\nimport \"./Carousel.css\";\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  initialIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   * Optional. Defaults to `slide`\n   **/\n  animation?: \"slide\" | \"fade\";\n  /**\n   * If this props is passed it will set the aria-label with value to the carousel container.\n   * Optional. Defaults to undefined\n   */\n  carouselDescription?: string;\n  /**\n   * Collection of slides to render\n   * Component must implement CarouselSlideProps. Mandatory.\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * This prop will enable compact / reduced width mode.\n   * The navigation buttons would be part of indicators\n   * Optional. Defaults to false\n   **/\n  compact?: boolean;\n  /**\n   * It sets the id for the Carousel Container.\n   * String. Optional\n   */\n  id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      initialIndex,\n      animation = \"slide\",\n      carouselDescription,\n      children,\n      className,\n      compact,\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n    const slidesCount = Children.count(children);\n\n    const [_, selectedSlide, handleSlideSelection] =\n      useSlideSelection(initialIndex);\n\n    const moveSlide = (direction: \"left\" | \"right\") => {\n      const moveLeft =\n        selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n      const moveRight =\n        selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n      const newSelection = direction === \"left\" ? moveLeft : moveRight;\n      const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n      handleSlideSelection(newSelection, newTransition);\n    };\n\n    const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n      target: { value },\n    }) => {\n      handleSlideSelection(Number(value));\n    };\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (slidesCount < 1) {\n          console.warn(\n            \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n          );\n        }\n      }\n    }, [slidesCount]);\n\n    return (\n      <GridLayout\n        aria-label={carouselDescription}\n        aria-roledescription=\"carousel\"\n        id={id}\n        role=\"region\"\n        ref={ref}\n        gap={0}\n        columns={3}\n        className={clsx(\n          withBaseName(),\n          compact && withBaseName(\"compact\"),\n          className\n        )}\n        {...rest}\n      >\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"prev-button\")}\n          onClick={() => moveSlide(\"left\")}\n        >\n          <ChevronLeftIcon size={2} />\n        </Button>\n        <DeckLayout\n          activeIndex={selectedSlide}\n          animation={animation}\n          className={withBaseName(\"slider\")}\n        >\n          {children}\n        </DeckLayout>\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"next-button\")}\n          onClick={() => moveSlide(\"right\")}\n        >\n          <ChevronRightIcon size={2} />\n        </Button>\n        <div className={withBaseName(\"dots\")}>\n          <RadioButtonGroup\n            aria-label=\"Carousel buttons\"\n            onChange={handleRadioChange}\n            value={`${selectedSlide}`}\n            direction={\"horizontal\"}\n          >\n            {Array.from({ length: slidesCount }, (_, index) => ({\n              value: `${index}`,\n            })).map((radio) => (\n              <RadioButton {...radio} />\n            ))}\n          </RadioButtonGroup>\n        </div>\n      </GridLayout>\n    );\n  }\n);\n"],"names":["Carousel","_"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n  Button,\n  GridLayout,\n  makePrefixer,\n  RadioButtonGroup,\n  RadioButton,\n  useId,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEventHandler,\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\nimport \"./Carousel.css\";\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  initialIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   * Optional. Defaults to `slide`\n   **/\n  animation?: \"slide\" | \"fade\";\n  /**\n   * If this props is passed it will set the aria-label with value to the carousel container.\n   * Optional. Defaults to undefined\n   */\n  carouselDescription?: string;\n  /**\n   * Collection of slides to render\n   * Component must implement CarouselSlideProps. Mandatory.\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * This prop will enable compact / reduced width mode.\n   * The navigation buttons would be part of indicators\n   * Optional. Defaults to false\n   **/\n  compact?: boolean;\n  /**\n   * It sets the id for the Carousel Container.\n   * String. Optional\n   */\n  id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      initialIndex,\n      animation = \"slide\",\n      carouselDescription,\n      children,\n      className,\n      compact,\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n    const slidesCount = Children.count(children);\n\n    const [_, selectedSlide, handleSlideSelection] =\n      useSlideSelection(initialIndex);\n\n    const moveSlide = (direction: \"left\" | \"right\") => {\n      const moveLeft =\n        selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n      const moveRight =\n        selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n      const newSelection = direction === \"left\" ? moveLeft : moveRight;\n      const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n      handleSlideSelection(newSelection, newTransition);\n    };\n\n    const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n      target: { value },\n    }) => {\n      handleSlideSelection(Number(value));\n    };\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (slidesCount < 1) {\n          console.warn(\n            \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n          );\n        }\n      }\n    }, [slidesCount]);\n\n    return (\n      <GridLayout\n        aria-label={carouselDescription}\n        aria-roledescription=\"carousel\"\n        id={id}\n        role=\"region\"\n        ref={ref}\n        gap={0}\n        columns={3}\n        className={clsx(\n          withBaseName(),\n          compact && withBaseName(\"compact\"),\n          className\n        )}\n        {...rest}\n      >\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"prev-button\")}\n          onClick={() => moveSlide(\"left\")}\n        >\n          <ChevronLeftIcon size={2} />\n        </Button>\n        <DeckLayout\n          activeIndex={selectedSlide}\n          animation={animation}\n          className={withBaseName(\"slider\")}\n        >\n          {children}\n        </DeckLayout>\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"next-button\")}\n          onClick={() => moveSlide(\"right\")}\n        >\n          <ChevronRightIcon size={2} />\n        </Button>\n        <div className={withBaseName(\"dots\")}>\n          <RadioButtonGroup\n            aria-label=\"Carousel buttons\"\n            onChange={handleRadioChange}\n            value={`${selectedSlide}`}\n            direction={\"horizontal\"}\n          >\n            {Array.from({ length: slidesCount }, (_, index) => ({\n              value: `${index}`,\n            })).map((radio) => (\n              <RadioButton {...radio} />\n            ))}\n          </RadioButtonGroup>\n        </div>\n      </GridLayout>\n    );\n  }\n);\n"],"names":["Carousel","_"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAoCzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,SAAY,GAAA,OAAA;AAAA,IACZ,mBAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAM,MAAA,WAAA,GAAc,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE3C,IAAA,MAAM,CAAC,CAAG,EAAA,aAAA,EAAe,oBAAoB,CAAA,GAC3C,kBAAkB,YAAY,CAAA,CAAA;AAEhC,IAAM,MAAA,SAAA,GAAY,CAAC,SAAgC,KAAA;AACjD,MAAA,MAAM,QACJ,GAAA,aAAA,KAAkB,CAAI,GAAA,WAAA,GAAc,IAAI,aAAgB,GAAA,CAAA,CAAA;AAC1D,MAAA,MAAM,SACJ,GAAA,aAAA,KAAkB,WAAc,GAAA,CAAA,GAAI,IAAI,aAAgB,GAAA,CAAA,CAAA;AAC1D,MAAM,MAAA,YAAA,GAAe,SAAc,KAAA,MAAA,GAAS,QAAW,GAAA,SAAA,CAAA;AACvD,MAAM,MAAA,aAAA,GAAgB,SAAc,KAAA,MAAA,GAAS,UAAa,GAAA,UAAA,CAAA;AAC1D,MAAA,oBAAA,CAAqB,cAAc,aAAa,CAAA,CAAA;AAAA,KAClD,CAAA;AAEA,IAAA,MAAM,oBAA0D,CAAC;AAAA,MAC/D,MAAA,EAAQ,EAAE,KAAM,EAAA;AAAA,KACZ,KAAA;AACJ,MAAqB,oBAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,KACpC,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,cAAc,CAAG,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,yGAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA;AAAA,MACC,YAAY,EAAA,mBAAA;AAAA,MACZ,sBAAqB,EAAA,UAAA;AAAA,MACrB,EAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,GAAA;AAAA,MACA,GAAK,EAAA,CAAA;AAAA,MACL,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,OAAA,IAAW,aAAa,SAAS,CAAA;AAAA,QACjC,SAAA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,OAAA,EAAS,MAAM,SAAA,CAAU,MAAM,CAAA;AAAA,UAE/B,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,YAAgB,IAAM,EAAA,CAAA;AAAA,WAAG,CAAA;AAAA,SAC5B,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA;AAAA,UACC,WAAa,EAAA,aAAA;AAAA,UACb,SAAA;AAAA,UACA,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UAE/B,QAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,OAAA,EAAS,MAAM,SAAA,CAAU,OAAO,CAAA;AAAA,UAEhC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,YAAiB,IAAM,EAAA,CAAA;AAAA,WAAG,CAAA;AAAA,SAC7B,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UACjC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,YACC,YAAW,EAAA,kBAAA;AAAA,YACX,QAAU,EAAA,iBAAA;AAAA,YACV,OAAO,CAAG,EAAA,aAAA,CAAA,CAAA;AAAA,YACV,SAAW,EAAA,YAAA;AAAA,YAEV,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,aAAe,EAAA,CAACC,IAAG,KAAW,MAAA;AAAA,cAClD,OAAO,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,aACV,CAAA,CAAA,CAAE,GAAI,CAAA,CAAC,0BACN,GAAA,CAAA,WAAA,EAAA;AAAA,cAAa,GAAG,KAAA;AAAA,aAAO,CACzB,CAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/color-chooser/ColorChooser.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(3 * var(--salt-size-unit) - 2px) !important;\n  width: calc(3 * var(--salt-size-unit) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: calc(var(--salt-size-unit) * 3);\n  display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n  margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
+var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n  margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/color-chooser/HexInput.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px calc(3 * var(--salt-size-unit)) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-text-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-text-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/dialog/Dialog.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltDialog {\n  --dialog-background: var(--saltDialog-background, var(--salt-container-primary-background));\n  --dialog-borderBottomWidth: var(--saltDialog-borderBottomWidth, 2px);\n  --dialog-borderColor: var(--saltDialog-borderColor, var(--salt-container-primary-borderColor));\n  --dialog-borderStyle: var(--saltDialog-borderStyle, var(--salt-container-borderStyle));\n  --dialog-borderWidth: var(--saltDialog-borderColor, var(--salt-size-border));\n  --dialog-boxShadow: var(--saltDialog-boxShadow, var(--salt-overlayable-shadow-modal));\n  --dialog-margin: var(--saltDialog-margin, calc(3 * var(--salt-size-unit)));\n  --dialog-padding: var(--saltDialog-padding, calc(3 * var(--salt-size-unit)));\n}\n\n.saltDialog {\n  background: var(--dialog-background);\n  border-color: var(--dialog-borderColor);\n  border-width: var(--dialog-borderWidth);\n  border-style: var(--dialog-borderStyle);\n  border-bottom-width: var(--dialog-borderBottomWidth);\n  display: flex;\n  flex-direction: column;\n  inset: 0; /* what does this do ? */\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--dialog-padding);\n  position: relative;\n  box-shadow: var(--saltDialog-boxShadow, var(--dialog-boxShadow));\n  margin: var(--saltDialog-margin, var(--dialog-margin));\n}\n";
+var css_248z = ".saltDialog {\n  --dialog-background: var(--saltDialog-background, var(--salt-container-primary-background));\n  --dialog-borderBottomWidth: var(--saltDialog-borderBottomWidth, 2px);\n  --dialog-borderColor: var(--saltDialog-borderColor, var(--salt-container-primary-borderColor));\n  --dialog-borderStyle: var(--saltDialog-borderStyle, var(--salt-container-borderStyle));\n  --dialog-borderWidth: var(--saltDialog-borderColor, var(--salt-size-border));\n  --dialog-boxShadow: var(--saltDialog-boxShadow, var(--salt-overlayable-shadow-modal));\n  --dialog-margin: var(--saltDialog-margin, var(--salt-size-container-spacing));\n  --dialog-padding: var(--saltDialog-padding, var(--salt-size-container-spacing));\n}\n\n.saltDialog {\n  background: var(--dialog-background);\n  border-color: var(--dialog-borderColor);\n  border-width: var(--dialog-borderWidth);\n  border-style: var(--dialog-borderStyle);\n  border-bottom-width: var(--dialog-borderBottomWidth);\n  display: flex;\n  flex-direction: column;\n  inset: 0; /* what does this do ? */\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--dialog-padding);\n  position: relative;\n  box-shadow: var(--saltDialog-boxShadow, var(--dialog-boxShadow));\n  margin: var(--saltDialog-margin, var(--dialog-margin));\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/dialog/DialogContent.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltDialogContent {\n  --dialog-content-fontSize: var(--saltDialog-content-fontSize, var(--salt-text-fontSize));\n  --dialog-content-lineHeight: var(--saltDialog-content-lineHeight, var(--salt-text-lineHeight));\n  --dialog-content-paddingTop: var(--saltDialog-content-paddingTop, calc(var(--salt-size-unit) * 2));\n  --dialog-content-paddingBottom: var(--saltDialog-content-paddingBottom, calc(var(--salt-size-unit) * 3));\n  --dialog-content-minHeight: var(--saltDialog-content-minHeight, var(--dialog-content-fontSize));\n  --dialog-content-color: var(--saltDialog-content-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogContent {\n  flex: 1 1 auto;\n  overflow: visible;\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--dialog-content-fontSize);\n  padding-top: var(--dialog-content-paddingTop);\n  padding-bottom: var(--dialog-content-paddingBottom);\n  min-height: var(--dialog-content-minHeight);\n  line-height: var(--dialog-content-lineHeight);\n  color: var(--dialog-content-color);\n}\n\n.saltDialogContent-leftGutter {\n  padding-left: 32px;\n}\n";
+var css_248z = ".saltDialogContent {\n  --dialog-content-fontSize: var(--saltDialog-content-fontSize, var(--salt-text-fontSize));\n  --dialog-content-lineHeight: var(--saltDialog-content-lineHeight, var(--salt-text-lineHeight));\n  --dialog-content-paddingTop: var(--saltDialog-content-paddingTop, calc(var(--salt-size-unit) * 2));\n  --dialog-content-paddingBottom: var(--saltDialog-content-paddingBottom, var(--salt-size-container-spacing));\n  --dialog-content-minHeight: var(--saltDialog-content-minHeight, var(--dialog-content-fontSize));\n  --dialog-content-color: var(--saltDialog-content-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogContent {\n  flex: 1 1 auto;\n  overflow: visible;\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--dialog-content-fontSize);\n  padding-top: var(--dialog-content-paddingTop);\n  padding-bottom: var(--dialog-content-paddingBottom);\n  min-height: var(--dialog-content-minHeight);\n  line-height: var(--dialog-content-lineHeight);\n  color: var(--dialog-content-color);\n}\n\n.saltDialogContent-leftGutter {\n  padding-left: 32px;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/dropdown/useDropdownBase.js

@@ -37,6 +37,7 @@ const useDropdownBase = ({
   });
   const {
     inFormField,
+    setFocused: setFormFieldFocused,
     a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
   } = useFormFieldProps();
   const [popup, setPopup] = useState({
@@ -57,12 +58,20 @@ const useDropdownBase = ({
     onClose: hideDropdown
   });
   const handleTriggerFocus = useCallback(() => {
-    setIsOpen(true);
-    onOpenChange == null ? void 0 : onOpenChange(true);
-    justFocused.current = window.setTimeout(() => {
-      justFocused.current = null;
-    }, 1e3);
-  }, [onOpenChange, setIsOpen]);
+    if (!disabled) {
+      setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
+      if (openOnFocus) {
+        setIsOpen(true);
+        onOpenChange == null ? void 0 : onOpenChange(true);
+        justFocused.current = window.setTimeout(() => {
+          justFocused.current = null;
+        }, 1e3);
+      }
+    }
+  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);
+  const handleTriggerBlur = useCallback(() => {
+    setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
+  }, [setFormFieldFocused]);
   const handleTriggerToggle = useCallback(
     (e) => {
       if (["Enter", " "].indexOf(
@@ -106,7 +115,8 @@ const useDropdownBase = ({
     "aria-owns": isOpen ? componentId : void 0,
     id: `${id}-control`,
     onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
-    onFocus: openOnFocus && !disabled ? handleTriggerFocus : void 0,
+    onFocus: handleTriggerFocus,
+    onBlur: handleTriggerBlur,
     role: "listbox",
     onKeyDown: disabled ? void 0 : handleKeydown,
     style: { width: fullWidth ? void 0 : width }

package/dist-es/packages/lab/src/dropdown/useDropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    // onFocus: formFieldOnFocus,\n    // onBlur: formFieldOnBlur,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n    // Suppress response to click if click was the cause of focus\n    justFocused.current = window.setTimeout(() => {\n      justFocused.current = null;\n    }, 1000);\n  }, [onOpenChange, setIsOpen]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: openOnFocus && !disabled ? handleTriggerFocus : undefined,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["measurements"],"mappings":"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"}
+{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    setFocused: setFormFieldFocused,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      setFormFieldFocused?.(true);\n\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);\n\n  const handleTriggerBlur = useCallback(() => {\n    setFormFieldFocused?.(false);\n  }, [setFormFieldFocused]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    onBlur: handleTriggerBlur,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["measurements"],"mappings":"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"}

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: var(--salt-size-container-spacing);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/index.js

@@ -7,7 +7,6 @@ import './list-deprecated/ListStateContext.js';
 import '@salt-ds/core';
 import 'react';
 export { useListItem as useListItemDeprecated } from './list-deprecated/useListItem.js';
-export { capitalize } from './utils/capitalize.js';
 export { escapeRegExp } from './utils/escapeRegExp.js';
 export { isEmail } from './utils/isEmail.js';
 export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
@@ -40,13 +39,6 @@ export { useSelectionCalendar, useSelectionDay } from './calendar/useSelection.j
 export { Carousel } from './carousel/Carousel.js';
 export { CarouselSlide } from './carousel/CarouselSlide.js';
 export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
-export { Checkbox } from './checkbox/Checkbox.js';
-export { CheckboxBase } from './checkbox/CheckboxBase.js';
-export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
-export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
-export { CheckboxUncheckedIcon } from './checkbox/assets/CheckboxUncheckedIcon.js';
-export { CheckboxCheckedIcon } from './checkbox/assets/CheckboxCheckedIcon.js';
-export { CheckboxIndeterminateIcon } from './checkbox/assets/CheckboxIndeterminateIcon.js';
 export { ColorChooser } from './color-chooser/ColorChooser.js';
 export { Color } from './color-chooser/Color.js';
 export { ColorPicker } from './color-chooser/ColorPicker.js';
@@ -120,9 +112,6 @@ export { CircularProgress, SIZE_OPTIONS } from './progress/CircularProgress/Circ
 export { LinearProgress } from './progress/LinearProgress/LinearProgress.js';
 export { QueryInput } from './query-input/QueryInput.js';
 export { useQueryInput } from './query-input/useQueryInput.js';
-export { RadioButton } from './radio-button/RadioButton.js';
-export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
-export { RadioButtonIcon } from './radio-button/RadioButtonIcon.js';
 export { useInstantCollapse } from './responsive/useInstantCollapse.js';
 export { useDynamicCollapse } from './responsive/useDynamicCollapse.js';
 export { addAllVisible, useReclaimSpace } from './responsive/useReclaimSpace.js';

package/dist-es/packages/lab/src/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-es/packages/lab/src/layer-layout/LayerLayout.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, calc(3 * var(--salt-size-unit)));\n  --layerLayout-margin: var(--saltLayerLayout-margin, calc(3 * var(--salt-size-unit)));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/list/ListItem.js

@@ -1,11 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
-import '../checkbox/Checkbox.js';
-import '../checkbox/CheckboxBase.js';
-import '../checkbox/CheckboxGroup.js';
-import { CheckboxIcon } from '../checkbox/CheckboxIcon.js';
+import { makePrefixer, CheckboxIcon } from '@salt-ds/core';
 import { Highlighter } from './Highlighter.js';
 import './ListItem.css.js';
 

package/dist-es/packages/lab/src/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../src/list/ListItem.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef, HTMLAttributes, memo } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport { ListItemType, ListItemProps } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\n\nimport \"./ListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltListItem\");\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemNextProxy(\n  props: HTMLAttributes<HTMLDivElement>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), withBaseName(\"proxy\"))}\n      ref={forwardedRef}\n    />\n  );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  function ListItem(\n    {\n      children,\n      className: classNameProp,\n      disabled,\n      tabIndex,\n      item,\n      itemHeight,\n      itemTextHighlightPattern,\n      label,\n      selectable: _notUsed,\n      selected,\n      showCheckbox,\n      style: styleProp,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const className = clsx(withBaseName(), classNameProp, {\n      saltDisabled: disabled,\n      [withBaseName(\"checkbox\")]: showCheckbox,\n    });\n    const style =\n      itemHeight !== undefined\n        ? {\n            ...styleProp,\n            height: itemHeight,\n          }\n        : styleProp;\n\n    return (\n      <div\n        className={className}\n        {...props}\n        aria-disabled={disabled || undefined}\n        aria-selected={selected || undefined}\n        ref={forwardedRef}\n        style={style}\n      >\n        {showCheckbox && <CheckboxIcon aria-hidden checked={selected} />}\n        {children && typeof children !== \"string\" ? (\n          children\n        ) : itemTextHighlightPattern == null ? (\n          <span className={withBaseName(\"textWrapper\")}>\n            {label || children}\n          </span>\n        ) : (\n          <Highlighter\n            matchPattern={itemTextHighlightPattern}\n            text={label || (children as string)}\n          />\n        )}\n      </div>\n    );\n  }\n) as ListItemType;\n"],"names":["ListItem"],"mappings":";;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAMzC,MAAM,aAAgB,GAAA,UAAA,CAAW,SAAS,iBAAA,CAC/C,OACA,YACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAW,EAAA,IAAA;AAAA,IACX,WAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACrD,GAAK,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAEJ,CAAC,EAAA;AAKM,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,KAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,MACpD,YAAc,EAAA,QAAA;AAAA,MACd,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,YAAA;AAAA,KAC7B,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,UAAA;AAAA,KAEV,GAAA,SAAA,CAAA;AAEN,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,GAAK,EAAA,YAAA;AAAA,MACL,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,YAAA,oBAAiB,GAAA,CAAA,YAAA,EAAA;AAAA,UAAa,aAAW,EAAA,IAAA;AAAA,UAAC,OAAS,EAAA,QAAA;AAAA,SAAU,CAAA;AAAA,QAC7D,YAAY,OAAO,QAAA,KAAa,WAC/B,QACE,GAAA,wBAAA,IAA4B,uBAC7B,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACxC,QAAS,EAAA,KAAA,IAAA,QAAA;AAAA,SACZ,oBAEC,GAAA,CAAA,WAAA,EAAA;AAAA,UACC,YAAc,EAAA,wBAAA;AAAA,UACd,MAAM,KAAU,IAAA,QAAA;AAAA,SAClB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../src/list/ListItem.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef, HTMLAttributes, memo } from \"react\";\nimport { clsx } from \"clsx\";\nimport { CheckboxIcon, makePrefixer } from \"@salt-ds/core\";\nimport { ListItemType, ListItemProps } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\n\nimport \"./ListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltListItem\");\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemNextProxy(\n  props: HTMLAttributes<HTMLDivElement>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), withBaseName(\"proxy\"))}\n      ref={forwardedRef}\n    />\n  );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  function ListItem(\n    {\n      children,\n      className: classNameProp,\n      disabled,\n      tabIndex,\n      item,\n      itemHeight,\n      itemTextHighlightPattern,\n      label,\n      selectable: _notUsed,\n      selected,\n      showCheckbox,\n      style: styleProp,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const className = clsx(withBaseName(), classNameProp, {\n      saltDisabled: disabled,\n      [withBaseName(\"checkbox\")]: showCheckbox,\n    });\n    const style =\n      itemHeight !== undefined\n        ? {\n            ...styleProp,\n            height: itemHeight,\n          }\n        : styleProp;\n\n    return (\n      <div\n        className={className}\n        {...props}\n        aria-disabled={disabled || undefined}\n        aria-selected={selected || undefined}\n        ref={forwardedRef}\n        style={style}\n      >\n        {showCheckbox && <CheckboxIcon aria-hidden checked={selected} />}\n        {children && typeof children !== \"string\" ? (\n          children\n        ) : itemTextHighlightPattern == null ? (\n          <span className={withBaseName(\"textWrapper\")}>\n            {label || children}\n          </span>\n        ) : (\n          <Highlighter\n            matchPattern={itemTextHighlightPattern}\n            text={label || (children as string)}\n          />\n        )}\n      </div>\n    );\n  }\n) as ListItemType;\n"],"names":["ListItem"],"mappings":";;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAMzC,MAAM,aAAgB,GAAA,UAAA,CAAW,SAAS,iBAAA,CAC/C,OACA,YACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAW,EAAA,IAAA;AAAA,IACX,WAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACrD,GAAK,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAEJ,CAAC,EAAA;AAKM,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,KAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,MACpD,YAAc,EAAA,QAAA;AAAA,MACd,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,YAAA;AAAA,KAC7B,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,UAAA;AAAA,KAEV,GAAA,SAAA,CAAA;AAEN,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,MAC3B,GAAK,EAAA,YAAA;AAAA,MACL,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,YAAA,oBAAiB,GAAA,CAAA,YAAA,EAAA;AAAA,UAAa,aAAW,EAAA,IAAA;AAAA,UAAC,OAAS,EAAA,QAAA;AAAA,SAAU,CAAA;AAAA,QAC7D,YAAY,OAAO,QAAA,KAAa,WAC/B,QACE,GAAA,wBAAA,IAA4B,uBAC7B,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACxC,QAAS,EAAA,KAAA,IAAA,QAAA;AAAA,SACZ,oBAEC,GAAA,CAAA,WAAA,EAAA;AAAA,UACC,YAAc,EAAA,wBAAA;AAAA,UACd,MAAM,KAAU,IAAA,QAAA;AAAA,SAClB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/pill/Pill.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js

@@ -1,9 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import '../../checkbox/Checkbox.js';
-import '../../checkbox/CheckboxBase.js';
-import '../../checkbox/CheckboxGroup.js';
-import { CheckboxIcon } from '../../checkbox/CheckboxIcon.js';
+import { makePrefixer, CheckboxIcon } from '@salt-ds/core';
 import { pillBaseName } from '../constants.js';
 import './PillCheckbox.css.js';
 

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillCheckbox.js","sources":["../src/pill/internal/PillCheckbox.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { CheckboxIcon } from \"../../checkbox\";\nimport { pillBaseName } from \"../constants\";\n\nimport \"./PillCheckbox.css\";\n\nconst withBaseName = makePrefixer(`${pillBaseName}-checkbox`);\n\nexport const PillCheckbox = (props: { checked?: boolean }): JSX.Element => {\n  return <CheckboxIcon checked={props.checked} className={withBaseName()} />;\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,YAAa,CAAA,CAAA,EAAG,YAAuB,CAAA,SAAA,CAAA,CAAA,CAAA;AAE/C,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAA,uBAAQ,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AAC1E;;;;"}
+{"version":3,"file":"PillCheckbox.js","sources":["../src/pill/internal/PillCheckbox.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"../constants\";\n\nimport \"./PillCheckbox.css\";\n\nconst withBaseName = makePrefixer(`${pillBaseName}-checkbox`);\n\nexport const PillCheckbox = (props: { checked?: boolean }): JSX.Element => {\n  return <CheckboxIcon checked={props.checked} className={withBaseName()} />;\n};\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,YAAa,CAAA,CAAA,EAAG,YAAuB,CAAA,SAAA,CAAA,CAAA,CAAA;AAE/C,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAA,uBAAQ,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AAC1E;;;;"}

package/dist-es/packages/lab/src/tabs/Tab.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInput-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--salt-size-stackable);\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInput-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/tabs/TabActivationIndicator.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  bottom: 0;\n  height: var(--tabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--tabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
+var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  bottom: 0;\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/tabs/Tabstrip.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-height: 1px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };