@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.100

package/dist-es/system-status/SystemStatusActions.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSystemStatusActions {\n  margin-bottom: auto;\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SystemStatusActions.css.js.map

package/dist-es/system-status/SystemStatusActions.css.js.map

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

package/dist-es/system-status/SystemStatusActions.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './SystemStatusActions.css.js';
+
+const withBaseName = makePrefixer("saltSystemStatusActions");
+const SystemStatusActions = forwardRef(function SystemStatusActions2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-system-status-actions",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ...rest, ref });
+});
+
+export { SystemStatusActions };
+//# sourceMappingURL=SystemStatusActions.js.map

package/dist-es/system-status/SystemStatusActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusActions.js","sources":["../src/system-status/SystemStatusActions.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport systemStatusActionsCss from \"./SystemStatusActions.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusActions\");\n\ninterface SystemStatusActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusActions\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusActions = forwardRef<\n  HTMLDivElement,\n  SystemStatusActionsProps\n>(function SystemStatusActions(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-actions\",\n    css: systemStatusActionsCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["SystemStatusActions","systemStatusActionsCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAEzE,CAAC;;;;"}

package/dist-es/system-status/SystemStatusContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to SystemStatusContent */\n.saltSystemStatusContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  color: var(--salt-content-bold-foreground);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SystemStatusContent.css.js.map

package/dist-es/system-status/SystemStatusContent.css.js.map

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

package/dist-es/system-status/SystemStatusContent.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './SystemStatusContent.css.js';
+
+const withBaseName = makePrefixer("saltSystemStatusContent");
+const SystemStatusContent = forwardRef(function SystemStatusContent2(props, ref) {
+  const { className, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-system-status-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ...rest, ref });
+});
+
+export { SystemStatusContent };
+//# sourceMappingURL=SystemStatusContent.js.map

package/dist-es/system-status/SystemStatusContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemStatusContent.js","sources":["../src/system-status/SystemStatusContent.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport systemStatusContentCss from \"./SystemStatusContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSystemStatusContent\");\n\ninterface SystemStatusContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of SystemStatusContent\n   */\n  children: ReactNode;\n}\n\nexport const SystemStatusContent = forwardRef<\n  HTMLDivElement,\n  SystemStatusContentProps\n>(function SystemStatusContent(props, ref) {\n  const { className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-system-status-content\",\n    css: systemStatusContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n  );\n});\n"],"names":["SystemStatusContent","systemStatusContentCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AASpD,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAEzE,CAAC;;;;"}

package/dist-es/tabs/Tab.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-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";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: transparent;\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-content-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  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  /* Not specify line-height, otherwise tabs are misaligned */\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-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\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: block;\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-text-fontWeight-strong);\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-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-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.js

@@ -1,33 +1,38 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
-import { CloseIcon, CloseSmallIcon } from '@salt-ds/icons';
+import { makePrefixer, useForkRef, useIcon, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { EditableLabel } from '../editable-label/EditableLabel.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Tab.css.js';
 
 const noop = () => void 0;
 const withBaseName = makePrefixer("saltTab");
-const CloseTabButton = (props) => /* @__PURE__ */ jsxs(Button, {
-  ...props,
-  "aria-label": "Close Tab (Delete or Backspace)",
-  className: withBaseName("closeButton"),
-  tabIndex: void 0,
-  title: "Close Tab (Delete or Backspace)",
-  variant: "secondary",
-  children: [
-    /* @__PURE__ */ jsx(CloseIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon")
-    }),
-    /* @__PURE__ */ jsx(CloseSmallIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon-small")
-    })
-  ]
-});
+const CloseTabButton = (props) => {
+  const { CloseIcon } = useIcon();
+  return (
+    // FIXME: use polymorphic button
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        "aria-label": "Close Tab (Delete or Backspace)",
+        className: withBaseName("closeButton"),
+        tabIndex: void 0,
+        title: "Close Tab (Delete or Backspace)",
+        variant: "secondary",
+        children: /* @__PURE__ */ jsx(
+          CloseIcon,
+          {
+            "aria-label": "Close Tab (Delete or Backspace)",
+            className: withBaseName("close-icon")
+          }
+        )
+      }
+    )
+  );
+};
 const Tab = forwardRef(function Tab2({
   ariaControls,
   children,
@@ -85,18 +90,18 @@ const Tab = forwardRef(function Tab2({
     switch (e.key) {
       case "Backspace":
       case "Delete":
-        if (closeable) {
+        if (closeable && !editing) {
           e.stopPropagation();
-          onClose && onClose(index);
+          onClose == null ? void 0 : onClose(index);
         }
         break;
       default:
-        onKeyUp && onKeyUp(e, index);
+        onKeyUp == null ? void 0 : onKeyUp(e, index);
     }
   };
   const handleCloseButtonClick = (e) => {
     e.stopPropagation();
-    onClose && onClose(index);
+    onClose == null ? void 0 : onClose(index);
   };
   const handleCloseButtonEnter = () => {
     setCloseHover(true);
@@ -109,16 +114,19 @@ const Tab = forwardRef(function Tab2({
   };
   const getLabel = () => {
     if (editable) {
-      return /* @__PURE__ */ jsx(EditableLabel, {
-        editing,
-        defaultValue: label,
-        onEnterEditMode,
-        onExitEditMode: handleOnExitEditMode,
-        ref: editableRef
-      }, label);
-    } else {
-      return label;
+      return /* @__PURE__ */ jsx(
+        EditableLabel,
+        {
+          editing,
+          defaultValue: label,
+          onEnterEditMode,
+          onExitEditMode: handleOnExitEditMode,
+          ref: editableRef
+        },
+        label
+      );
     }
+    return label;
   };
   const handleFocus = (evt) => {
     if (editableRef.current) {
@@ -130,43 +138,49 @@ const Tab = forwardRef(function Tab2({
     }
     onFocusProp == null ? void 0 : onFocusProp(evt);
   };
-  return /* @__PURE__ */ jsxs("div", {
-    ...props,
-    "aria-controls": ariaControls,
-    "aria-selected": selected,
-    className: clsx(withBaseName(), {
-      [withBaseName("closeable")]: closeable,
-      [withBaseName("closeHover")]: closeHover,
-      [withBaseName("dragAway")]: dragging,
-      [withBaseName("editing")]: editing,
-      [withBaseName("vertical")]: orientation === "vertical",
-      [`saltFocusVisible`]: focusVisible
-    }),
-    "data-editable": editable || void 0,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDownMain,
-    onKeyUp: handleKeyUp,
-    onMouseDown: handleMouseDown,
-    ref: setForkRef,
-    role: "tab",
-    tabIndex,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: withBaseName("main"),
-        children: /* @__PURE__ */ jsx("span", {
-          className: withBaseName("text"),
-          "data-text": editable ? void 0 : label,
-          children: children != null ? children : getLabel()
-        })
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "aria-controls": ariaControls,
+      "aria-selected": selected,
+      className: clsx(withBaseName(), {
+        [withBaseName("closeable")]: closeable,
+        [withBaseName("closeHover")]: closeHover,
+        [withBaseName("dragAway")]: dragging,
+        [withBaseName("editing")]: editing,
+        [withBaseName("vertical")]: orientation === "vertical",
+        saltFocusVisible: focusVisible
       }),
-      closeable ? /* @__PURE__ */ jsx(CloseTabButton, {
-        onClick: handleCloseButtonClick,
-        onMouseEnter: handleCloseButtonEnter,
-        onMouseLeave: handleCloseButtonLeave
-      }) : null
-    ]
-  });
+      "data-editable": editable || void 0,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDownMain,
+      onKeyUp: handleKeyUp,
+      onMouseDown: handleMouseDown,
+      ref: setForkRef,
+      role: "tab",
+      tabIndex,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: withBaseName("main"), children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: withBaseName("text"),
+            "data-text": editable ? void 0 : label,
+            children: children ?? getLabel()
+          }
+        ) }),
+        closeable ? /* @__PURE__ */ jsx(
+          CloseTabButton,
+          {
+            onClick: handleCloseButtonClick,
+            onMouseEnter: handleCloseButtonEnter,
+            onMouseLeave: handleCloseButtonLeave
+          }
+        ) : null
+      ]
+    }
+  );
 });
 
 export { Tab };

package/dist-es/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon, CloseSmallIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { TabProps } from \"./TabsTypes\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\n//TODO not ideal - duplicating the Icon then hiding one in css based on density - is there a nicer way ?\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n    <CloseSmallIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon-small\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useForkRef,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, type EditableLabelProps } from \"../editable-label\";\nimport tabCss from \"./Tab.css\";\nimport type { TabProps } from \"./TabsTypes\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => {\n  const { CloseIcon } = useIcon();\n  return (\n    // FIXME: use polymorphic button\n    <Button\n      {...props}\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"closeButton\")}\n      tabIndex={undefined}\n      title=\"Close Tab (Delete or Backspace)\"\n      variant=\"secondary\"\n    >\n      <CloseIcon\n        aria-label=\"Close Tab (Delete or Backspace)\"\n        className={withBaseName(\"close-icon\")}\n      />\n    </Button>\n  );\n};\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\",\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable && !editing) {\n          e.stopPropagation();\n          onClose?.(index);\n        }\n        break;\n      default:\n        onKeyUp?.(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose?.(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    }\n    return label;\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        saltFocusVisible: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}

package/dist-es/tabs/TabActivationIndicator.css.js

@@ -1,4 +1,4 @@
-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";
+var css_248z = ".saltTabActivationIndicator {\n  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));\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-accent-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";
 
 export { css_248z as default };
 //# sourceMappingURL=TabActivationIndicator.css.js.map

package/dist-es/tabs/TabActivationIndicator.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { useRef } from 'react';
-import { useActivationIndicator } from './useActivationIndicator.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useRef } from 'react';
 import css_248z from './TabActivationIndicator.css.js';
+import { useActivationIndicator } from './useActivationIndicator.js';
 
 const withBaseName = makePrefixer("saltTabActivationIndicator");
 const TabActivationIndicator = ({
@@ -24,14 +24,7 @@ const TabActivationIndicator = ({
     tabId,
     orientation
   });
-  return /* @__PURE__ */ jsx("div", {
-    className: withBaseName(),
-    ref: rootRef,
-    children: hideThumb === false && tabId !== null ? /* @__PURE__ */ jsx("div", {
-      className: withBaseName("thumb"),
-      style
-    }) : null
-  });
+  return /* @__PURE__ */ jsx("div", { className: withBaseName(), ref: rootRef, children: hideThumb === false && tabId !== null ? /* @__PURE__ */ jsx("div", { className: withBaseName("thumb"), style }) : null });
 };
 
 export { TabActivationIndicator };

package/dist-es/tabs/TabActivationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabActivationIndicator.js","sources":["../src/tabs/TabActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport React, { useRef } from \"react\";\n\nimport { useActivationIndicator } from \"./useActivationIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabActivationIndicatorCss from \"./TabActivationIndicator.css\";\n\ninterface TabActivationIndicatorProps {\n  hideThumb?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  disableAnimation?: boolean;\n  tabId?: string | null;\n}\n\nconst withBaseName = makePrefixer(\"saltTabActivationIndicator\");\n\nexport const TabActivationIndicator = ({\n  hideThumb = false,\n  orientation = \"horizontal\",\n  tabId,\n}: TabActivationIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-activation-indicator\",\n    css: tabActivationIndicatorCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const style = useActivationIndicator({\n    rootRef,\n    tabId,\n    orientation,\n  });\n\n  return (\n    <div className={withBaseName()} ref={rootRef}>\n      {hideThumb === false && tabId !== null ? (\n        <div className={withBaseName(\"thumb\")} style={style} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["tabActivationIndicatorCss"],"mappings":";;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA,CAAA;AAEvD,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAY,GAAA,KAAA;AAAA,EACZ,WAAc,GAAA,YAAA;AAAA,EACd,KAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAA8B,IAAI,CAAA,CAAA;AAClD,EAAA,MAAM,QAAQ,sBAAuB,CAAA;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,GAAK,EAAA,OAAA;AAAA,IAClC,QAAc,EAAA,SAAA,KAAA,KAAA,IAAS,KAAU,KAAA,IAAA,mBAC/B,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,KAAA;AAAA,KAAc,CACnD,GAAA,IAAA;AAAA,GACN,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TabActivationIndicator.js","sources":["../src/tabs/TabActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useRef } from \"react\";\nimport tabActivationIndicatorCss from \"./TabActivationIndicator.css\";\nimport { useActivationIndicator } from \"./useActivationIndicator\";\n\ninterface TabActivationIndicatorProps {\n  hideThumb?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  disableAnimation?: boolean;\n  tabId?: string | null;\n}\n\nconst withBaseName = makePrefixer(\"saltTabActivationIndicator\");\n\nexport const TabActivationIndicator = ({\n  hideThumb = false,\n  orientation = \"horizontal\",\n  tabId,\n}: TabActivationIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-activation-indicator\",\n    css: tabActivationIndicatorCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const style = useActivationIndicator({\n    rootRef,\n    tabId,\n    orientation,\n  });\n\n  return (\n    <div className={withBaseName()} ref={rootRef}>\n      {hideThumb === false && tabId !== null ? (\n        <div className={withBaseName(\"thumb\")} style={style} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["tabActivationIndicatorCss"],"mappings":";;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA;AAEvD,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA,GAAc,YAAA;AAAA,EACd;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,+BAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,OAA8B,IAAI,CAAA;AAClD,EAAA,MAAM,QAAQ,sBAAA,CAAuB;AAAA,IACnC,OAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,cAAa,EAAG,GAAA,EAAK,SAClC,QAAA,EAAA,SAAA,KAAc,KAAA,IAAS,UAAU,IAAA,mBAChC,GAAA,CAAC,SAAI,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG,KAAA,EAAc,IACnD,IAAA,EACN,CAAA;AAEJ;;;;"}

package/dist-es/tabs/TabPanel.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './TabPanel.css.js';
 
 const withBaseName = makePrefixer("saltTabPanel");
@@ -14,14 +14,17 @@ const TabPanel = forwardRef(function TabPanel2({ children, className, enableClos
     css: css_248z,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsx("div", {
-    ...htmlAttributes,
-    className: clsx(withBaseName(), className),
-    ref: forwardedRef,
-    role: "tabpanel",
-    tabIndex: 0,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: clsx(withBaseName(), className),
+      ref: forwardedRef,
+      role: "tabpanel",
+      tabIndex: 0,
+      children
+    }
+  );
 });
 
 export { TabPanel };

package/dist-es/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabPanelCss from \"./TabPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltTabPanel\");\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  enableClose?: boolean;\n  label: string;\n}\n\nexport const TabPanel = forwardRef(function TabPanel(\n  { children, className, enableClose, ...htmlAttributes }: TabPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-panel\",\n    css: tabPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      ref={forwardedRef}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["TabPanel","tabPanelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAOnC,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA,EAAE,UAAU,SAAW,EAAA,WAAA,EAAA,GAAgB,cAAe,EAAA,EACtD,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAK,EAAA,YAAA;AAAA,IACL,IAAK,EAAA,UAAA;AAAA,IACL,QAAU,EAAA,CAAA;AAAA,IAET,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TabPanel.js","sources":["../src/tabs/TabPanel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ForwardedRef, forwardRef, type HTMLAttributes } from \"react\";\n\nimport tabPanelCss from \"./TabPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltTabPanel\");\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  enableClose?: boolean;\n  label: string;\n}\n\nexport const TabPanel = forwardRef(function TabPanel(\n  { children, className, enableClose, ...htmlAttributes }: TabPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-panel\",\n    css: tabPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      ref={forwardedRef}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["TabPanel","tabPanelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAOzC,MAAM,QAAA,GAAW,UAAA,CAAW,SAASA,SAAAA,CAC1C,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,GAAG,cAAA,EAAe,EACtD,YAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA,EAAK,YAAA;AAAA,MACL,IAAA,EAAK,UAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MAET;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs/Tabs.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
-import { useTabs } from './useTabs.js';
-import { Tabstrip } from './Tabstrip.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import css_248z from './Tabs.css.js';
+import { Tabstrip } from './Tabstrip.js';
+import { useTabs } from './useTabs.js';
 
 const withBaseName = makePrefixer("saltTabs");
 const Tabs = forwardRef(function Tabs2({
@@ -69,29 +69,27 @@ const Tabs = forwardRef(function Tabs2({
     onMoveTab,
     overflowMenu
   };
-  useCallback(
-    (tabIndex) => {
-      if (tabIndex === activeTabIndex) {
-        return `${id}-${tabIndex}-panel`;
-      }
-    },
-    [id, activeTabIndex]
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: clsx(withBaseName(), className),
+      id: `${id}-tabs`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tabstrip,
+          {
+            ...tabstripProps,
+            id,
+            onActiveChange,
+            ref: tabstripRef,
+            source: tabs
+          }
+        ),
+        tabPanel
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs("div", {
-    ...htmlAttributes,
-    className: clsx(withBaseName(), className),
-    id: `${id}-tabs`,
-    children: [
-      /* @__PURE__ */ jsx(Tabstrip, {
-        ...tabstripProps,
-        id,
-        onActiveChange,
-        ref: tabstripRef,
-        source: tabs
-      }),
-      tabPanel
-    ]
-  });
 });
 
 export { Tabs };

package/dist-es/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useTabs } from \"./useTabs\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { FocusAPI, TabstripProps } from \"./TabsTypes\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabsCss from \"./Tabs.css\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n  {\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    centered,\n    children,\n    className,\n    defaultActiveTabIndex,\n    editing,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onActiveChange: onActiveChangeProp,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n    variant,\n    ...htmlAttributes\n  }: TabsProps,\n  forwardedRef: ForwardedRef<FocusAPI>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tabs\",\n    css: tabsCss,\n    window: targetWindow,\n  });\n\n  const tabstripRef = useRef<HTMLDivElement>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () =>\n      ({\n        focus: () => tabstripRef.current?.focus(),\n      } as FocusAPI),\n    []\n  );\n\n  const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n    activeTabIndex: activeTabIndexProp,\n    children,\n    defaultActiveTabIndex,\n    onActiveChange: onActiveChangeProp,\n  });\n\n  const tabstripProps = {\n    activeTabIndex,\n    allowDragDrop,\n    centered,\n    editing,\n    variant,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n  };\n  const getTabPanelId = useCallback(\n    (tabIndex: number) => {\n      if (tabIndex === activeTabIndex) {\n        return `${id}-${tabIndex}-panel`;\n      }\n    },\n    [id, activeTabIndex]\n  );\n\n  // TODO need to inject aria-controls\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      id={`${id}-tabs`}\n    >\n      <Tabstrip\n        {...tabstripProps}\n        id={id}\n        onActiveChange={onActiveChange}\n        ref={tabstripRef}\n        source={tabs}\n      />\n      {tabPanel}\n    </div>\n  );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACG,GAAA,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;AA1DlB,QAAA,IAAA,EAAA,CAAA;AA0DqB,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACpC,CAAA;AAAA,IACF,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAAS,OAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACA,EAAsB,WAAA;AAAA,IACpB,CAAC,QAAqB,KAAA;AACpB,MAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,QAAA,OAAO,GAAG,EAAM,CAAA,CAAA,EAAA,QAAA,CAAA,MAAA,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,IAAI,cAAc,CAAA;AAAA,IACrB;AAGA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAI,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA;AAAA,IAEP,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACJ,EAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAK,EAAA,WAAA;AAAA,QACL,MAAQ,EAAA,IAAA;AAAA,OACV,CAAA;AAAA,MACC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport tabsCss from \"./Tabs.css\";\nimport type { FocusAPI, TabstripProps } from \"./TabsTypes\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { useTabs } from \"./useTabs\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n  {\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    centered,\n    children,\n    className,\n    defaultActiveTabIndex,\n    editing,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onActiveChange: onActiveChangeProp,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n    variant,\n    ...htmlAttributes\n  }: TabsProps,\n  forwardedRef: ForwardedRef<FocusAPI>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tabs\",\n    css: tabsCss,\n    window: targetWindow,\n  });\n\n  const tabstripRef = useRef<HTMLDivElement>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () =>\n      ({\n        focus: () => tabstripRef.current?.focus(),\n      }) as FocusAPI,\n    [],\n  );\n\n  const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n    activeTabIndex: activeTabIndexProp,\n    children,\n    defaultActiveTabIndex,\n    onActiveChange: onActiveChangeProp,\n  });\n\n  const tabstripProps = {\n    activeTabIndex,\n    allowDragDrop,\n    centered,\n    editing,\n    variant,\n    enableAddTab,\n    enableCloseTab,\n    enableRenameTab,\n    onAddTab,\n    onCloseTab,\n    onEnterEditMode,\n    onExitEditMode,\n    onMoveTab,\n    overflowMenu,\n  };\n\n  // TODO need to inject aria-controls\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(withBaseName(), className)}\n      id={`${id}-tabs`}\n    >\n      <Tabstrip\n        {...tabstripProps}\n        id={id}\n        onActiveChange={onActiveChange}\n        ref={tabstripRef}\n        source={tabs}\n      />\n      {tabPanel}\n    </div>\n  );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAIrC,MAAM,IAAA,GAAO,UAAA,CAAW,SAASA,KAAAA,CACtC;AAAA,EACE,cAAA,EAAgB,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA,EAAgB,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;AAvDlB,QAAA,IAAA,EAAA;AAuDqB,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAA,GAAA,MAAA,GAAA,EAAA,CAAqB,KAAA,EAAA;AAAA,MAAA;AAAA,KACpC,CAAA;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,EAAE,EAAA,EAAI,cAAA,EAAgB,gBAAgB,QAAA,EAAU,IAAA,KAAS,OAAA,CAAQ;AAAA,IACrE,cAAA,EAAgB,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAA,EAAgB;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAGA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,aAAA;AAAA,YACJ,EAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAA,EAAK,WAAA;AAAA,YACL,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs/Tabstrip.css.js

@@ -1,4 +1,4 @@
-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";
+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.saltDropdownBase.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdownBase {\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-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-cursor-grab-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-accent-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";
 
 export { css_248z as default };
 //# sourceMappingURL=Tabstrip.css.js.map