@vuu-ui/vuu-ui-controls 0.8.41 → 0.8.43

package/cjs/expando-input/ExpandoInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var expandoInputCss = ".vuuExpandoInput {\n\n    --salt-editable-secondary-background: white;\n    --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n    --saltInput-height: var(--expandoInput-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n  \n    border: var(--vuuExpandoInput-border, none);\n    border-radius: var(--vuuExpandoInput-borderRadius, 0);\n    color: inherit;\n    cursor: default;\n    display: inline-block;\n    font-size: var(--salt-text-fontSize);\n    height: var(--expandoInput-height);\n    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n    outline: none;\n    padding: 0 var(--expandoInput-padding);\n    position: relative;\n\n}\n\n.vuuExpandoInput:before {\n    content: attr(data-text);\n    display: block;\n    height: 0px;\n    visibility: hidden;\n    white-space: pre-wrap;\n  }\n  .vuuExpandoInput-error {\n    border-color: var(--vuu-color-red-50);\n  }\n\n  .vuuExpandoInput .saltInput {\n    font-weight: var(--salt-text-fontWeight);\n    left: var(--expandoInput-padding, 0);\n    padding: 0;\n    outline-style: none;\n    position: absolute;\n    right: var(--expandoInput-padding, 0);\n    top: var(--vuuExpandoInput-top, 2px);\n    width: auto;\n  }\n  \n  .vuuExpandoInput .saltInput-activationIndicator {\n    display: none;\n  }\n  \n  .vuuExpandoInput-input {\n    background-color: transparent;\n    border: none;\n    box-sizing: content-box;\n    display: block;\n    flex: 1;\n    font: inherit;\n    height: 20px;\n    margin:0;\n    min-width:0;\n    outline: none;\n    padding: 0;\n  }\n  ";
+
+module.exports = expandoInputCss;
+//# sourceMappingURL=ExpandoInput.css.js.map

package/cjs/expando-input/ExpandoInput.css.js.map

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

package/cjs/expando-input/ExpandoInput.js

@@ -2,8 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var VuuInput = require('../vuu-input/VuuInput.js');
+var ExpandoInput$1 = require('./ExpandoInput.css.js');
 
 const classBase = "vuuExpandoInput";
 const noop = () => void 0;
@@ -15,6 +18,12 @@ const ExpandoInput = React.forwardRef(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-expando-input",
+    css: ExpandoInput$1,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/cjs/expando-input/ExpandoInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["forwardRef","ExpandoInput","jsx","VuuInput"],"mappings":";;;;;;;AAMA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAAA,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["forwardRef","ExpandoInput","useWindow","useComponentCssInjection","expandoInputCss","jsx","VuuInput"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAAA,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/cjs/tabstrip/Tab.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabCss = "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 2px;\n\n  --tab-background: var(--vuuTab-background, transparent);\n  --tab-cursor: pointer;\n  --tab-position: relative;\n\n\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border-color: var(--vuuTab-borderColor, transparent);\n  border-style: var(--vuuTab-borderStyle, none);\n  border-width: var(--vuuTab-borderWidth, 0px);\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTabHeight, var(--tab-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  margin: 0 var(--tab-spacing) 0 0;\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width)\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: calc(var(--tab-height) - var(--tab-thumb-height));\n  margin-bottom: var(--tab-thumb-height);\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-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(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-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.vuuTab-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.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px; \n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n";
+
+module.exports = tabCss;
+//# sourceMappingURL=Tab.css.js.map

package/cjs/tabstrip/Tab.css.js.map

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

package/cjs/tabstrip/Tab.js

@@ -2,10 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var EditableLabel = require('../editable-label/EditableLabel.js');
 var TabMenu = require('./TabMenu.js');
+var Tab$1 = require('./Tab.css.js');
 
 const classBase = "vuuTab";
 const noop = () => void 0;
@@ -38,6 +41,12 @@ const Tab = React.forwardRef(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-tabstrip-tab",
+    css: Tab$1,
+    window: targetWindow
+  });
   const rootRef = React.useRef(null);
   const editableRef = React.useRef(null);
   const setForkRef = core.useForkRef(ref, rootRef);

package/cjs/tabstrip/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick]\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 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        \".vuuEditableLabel-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={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-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      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["forwardRef","Tab","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick]\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 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        \".vuuEditableLabel-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={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-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      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":"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"}

package/cjs/tabstrip/Tabstrip.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabstripCss = "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);\n  --vuuOverflowContainer-width: var(--tabstrip-width);\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  display: flex;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  min-width: 28px;\n  position: relative;\n  overflow: visible;\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip.vuuOrientation-horizontal {\n  --vuuOverflowContainer-borderStyle: none none solid none;\n  --vuuOverflowContainer-borderBottomWidth: 1px;\n\n  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-height: var(--tabstrip-height);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  /* border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor)); */\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip.vuuOrientation-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-height: 50px;\n  --tab-width: 100%;\n  --tab-thumb-height: 0;\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-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.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-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(--tabstrip-height);\n}\n\n.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --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(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-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.vuuDraggable-tabstrip-horizontal {\n  --overflow-item-height: var(--tabstrip-height);\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: 0px;\n  --tabstrip-display: inline-flex;\n  --tabstrip-height: 28px;\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-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";
+
+module.exports = tabstripCss;
+//# sourceMappingURL=Tabstrip.css.js.map

package/cjs/tabstrip/Tabstrip.css.js.map

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

package/cjs/tabstrip/Tabstrip.js

@@ -3,10 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var useTabstrip = require('./useTabstrip.js');
 var IconButton = require('../icon-button/IconButton.js');
 var OverflowContainer = require('../overflow-container/OverflowContainer.js');
+var Tabstrip$1 = require('./Tabstrip.css.js');
 
 const classBase = "vuuTabstrip";
 const Tabstrip = ({
@@ -33,6 +36,12 @@ const Tabstrip = ({
   variant = "secondary",
   ...htmlAttributes
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-tabstrip",
+    css: Tabstrip$1,
+    window: targetWindow
+  });
   const rootRef = React.useRef(null);
   const {
     activeTabIndex,

package/cjs/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport \"./Tabstrip.css\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tabstripCss","useRef","useTabstrip","useId","useMemo","asReactElements","className","createElement","IconButton","jsxs","Fragment","jsx","OverflowContainer"],"mappings":"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"}

package/esm/expando-input/ExpandoInput.css.js

@@ -0,0 +1,4 @@
+var expandoInputCss = ".vuuExpandoInput {\n\n    --salt-editable-secondary-background: white;\n    --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n    --saltInput-height: var(--expandoInput-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n  \n    border: var(--vuuExpandoInput-border, none);\n    border-radius: var(--vuuExpandoInput-borderRadius, 0);\n    color: inherit;\n    cursor: default;\n    display: inline-block;\n    font-size: var(--salt-text-fontSize);\n    height: var(--expandoInput-height);\n    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n    outline: none;\n    padding: 0 var(--expandoInput-padding);\n    position: relative;\n\n}\n\n.vuuExpandoInput:before {\n    content: attr(data-text);\n    display: block;\n    height: 0px;\n    visibility: hidden;\n    white-space: pre-wrap;\n  }\n  .vuuExpandoInput-error {\n    border-color: var(--vuu-color-red-50);\n  }\n\n  .vuuExpandoInput .saltInput {\n    font-weight: var(--salt-text-fontWeight);\n    left: var(--expandoInput-padding, 0);\n    padding: 0;\n    outline-style: none;\n    position: absolute;\n    right: var(--expandoInput-padding, 0);\n    top: var(--vuuExpandoInput-top, 2px);\n    width: auto;\n  }\n  \n  .vuuExpandoInput .saltInput-activationIndicator {\n    display: none;\n  }\n  \n  .vuuExpandoInput-input {\n    background-color: transparent;\n    border: none;\n    box-sizing: content-box;\n    display: block;\n    flex: 1;\n    font: inherit;\n    height: 20px;\n    margin:0;\n    min-width:0;\n    outline: none;\n    padding: 0;\n  }\n  ";
+
+export { expandoInputCss as default };
+//# sourceMappingURL=ExpandoInput.css.js.map

package/esm/expando-input/ExpandoInput.css.js.map

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

package/esm/expando-input/ExpandoInput.js

@@ -1,7 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { forwardRef } from 'react';
 import { VuuInput } from '../vuu-input/VuuInput.js';
+import expandoInputCss from './ExpandoInput.css.js';
 
 const classBase = "vuuExpandoInput";
 const noop = () => void 0;
@@ -13,6 +16,12 @@ const ExpandoInput = forwardRef(function ExpandoInput2({
   onCommit = noop,
   ...props
 }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-expando-input",
+    css: expandoInputCss,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {

package/esm/expando-input/ExpandoInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;AAMA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/esm/tabstrip/Tab.css.js

@@ -0,0 +1,4 @@
+var tabCss = "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 2px;\n\n  --tab-background: var(--vuuTab-background, transparent);\n  --tab-cursor: pointer;\n  --tab-position: relative;\n\n\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border-color: var(--vuuTab-borderColor, transparent);\n  border-style: var(--vuuTab-borderStyle, none);\n  border-width: var(--vuuTab-borderWidth, 0px);\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTabHeight, var(--tab-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  margin: 0 var(--tab-spacing) 0 0;\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width)\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: calc(var(--tab-height) - var(--tab-thumb-height));\n  margin-bottom: var(--tab-thumb-height);\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-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(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-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.vuuTab-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.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px; \n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n";
+
+export { tabCss as default };
+//# sourceMappingURL=Tab.css.js.map

package/esm/tabstrip/Tab.css.js.map

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

package/esm/tabstrip/Tab.js

@@ -1,9 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
 import { EditableLabel } from '../editable-label/EditableLabel.js';
 import { TabMenu } from './TabMenu.js';
+import tabCss from './Tab.css.js';
 
 const classBase = "vuuTab";
 const noop = () => void 0;
@@ -36,6 +39,12 @@ const Tab = forwardRef(function Tab2({
   if (showMenuButton && typeof onMenuAction !== "function") {
     throw Error("Tab onMenuAction must be provided if showMenuButton is set");
   }
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-tabstrip-tab",
+    css: tabCss,
+    window: targetWindow
+  });
   const rootRef = useRef(null);
   const editableRef = useRef(null);
   const setForkRef = useForkRef(ref, rootRef);

package/esm/tabstrip/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick]\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 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        \".vuuEditableLabel-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={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-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      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","editable"],"mappings":";;;;;;;AAoBA,MAAM,SAAY,GAAA,QAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAEN,MAAA,GAAA,GAAM,UAAW,CAAA,SAASA,IACrC,CAAA;AAAA,EACE,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAQ,GAAA,CAAA,CAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAkB,GAAA,IAAA;AAAA,EAClB,cAAiB,GAAA,IAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAiB,GAAA,SAAA,IAAa,QAAY,IAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA,EAC1D,QAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAA,EACA,GACwB,EAAA;AACxB,EAAI,IAAA,cAAA,IAAkB,OAAO,YAAA,KAAiB,UAAY,EAAA;AACxD,IAAA,MAAM,MAAM,4DAA4D,CAAA,CAAA;AAAA,GAC1E;AAEA,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,OAAO,CAAA,CAAA;AAC1C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAA+B,KAAA;AAC9B,MAAA,IAAI,CAAC,OAAS,EAAA;AACZ,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA;AAAA,OACpB;AAAA,KACF;AAAA,IACA,CAAC,OAAS,EAAA,KAAA,EAAO,OAAO,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,MAAM,oBAA6D,GAAA,CACjE,aAAgB,GAAA,EAAA,EAChB,WAAc,GAAA,EAAA,EACd,iBAAoB,GAAA,IAAA,KACjB,cAAe,CAAA,aAAA,EAAe,WAAa,EAAA,iBAAA,EAAmB,KAAK,CAAA,CAAA;AAExE,EAAM,MAAA,WAAA,GAAc,CAAC,CAAqB,KAAA;AACxC,IAAA,QAAQ,EAAE,GAAK;AAAA,MACb,KAAK,WAAA,CAAA;AAAA,MACL,KAAK,QAAA;AACH,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,UAAA,OAAA,IAAW,QAAQ,KAAK,CAAA,CAAA;AAAA,SAC1B;AACA,QAAA,MAAA;AAAA,MACF;AACE,QAAW,OAAA,IAAA,OAAA,CAAQ,GAAG,KAAK,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,QAAU,EAAA;AACZ,MACE,uBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,YAAc,EAAA,KAAA;AAAA,UAGd,eAAA;AAAA,UACA,cAAgB,EAAA,oBAAA;AAAA,UAChB,GAAK,EAAA,WAAA;AAAA,SAAA;AAAA,QAHA,KAAA;AAAA,OAIP,CAAA;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,GAAiC,KAAA;AACpD,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,MAAMC,YAAW,WAAY,CAAA,OAAA,CAAA;AAC7B,MAAA,MAAM,QAAQA,SAAS,CAAA,aAAA;AAAA,QACrB,yBAAA;AAAA,OACF,CAAA;AACA,MAAA,KAAA,EAAO,KAAM,EAAA,CAAA;AAAA,KACf;AACA,IAAA,WAAA,GAAc,GAAG,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,eAAe,EAAA,YAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,QAC5B,uBAAyB,EAAA,QAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,QAC1B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAY,IAAA,KAAA,CAAA;AAAA,QACvC,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,WAAgB,KAAA,UAAA;AAAA,QAC3C,CAAC,iBAAiB,GAAG,YAAA;AAAA,OACtB,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,GAAK,EAAA,UAAA;AAAA,MACL,IAAK,EAAA,KAAA;AAAA,MACL,QAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,YAOvB,WAAA,EAAW,WAAW,KAAY,CAAA,GAAA,KAAA;AAAA,YAEjC,sBAAY,QAAS,EAAA;AAAA,WAAA;AAAA,SAE1B,EAAA,CAAA;AAAA,QACC,cACC,mBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,SAAA;AAAA,YACZ,WAAa,EAAA,QAAA;AAAA,YACb,qBAAuB,EAAA,YAAA;AAAA,YACvB,wBAA0B,EAAA,KAAA;AAAA,YAC1B,QAAA;AAAA,YACA,YAAA;AAAA,YACA,WAAA;AAAA,YACA,KAAA;AAAA,WAAA;AAAA,SAEA,GAAA,IAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Tab.js","sources":["../../src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick]\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 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        \".vuuEditableLabel-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={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-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      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","editable"],"mappings":"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"}

package/esm/tabstrip/Tabstrip.css.js

@@ -0,0 +1,4 @@
+var tabstripCss = "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);\n  --vuuOverflowContainer-width: var(--tabstrip-width);\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  display: flex;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  min-width: 28px;\n  position: relative;\n  overflow: visible;\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip.vuuOrientation-horizontal {\n  --vuuOverflowContainer-borderStyle: none none solid none;\n  --vuuOverflowContainer-borderBottomWidth: 1px;\n\n  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-height: var(--tabstrip-height);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  /* border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor)); */\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip.vuuOrientation-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-height: 50px;\n  --tab-width: 100%;\n  --tab-thumb-height: 0;\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-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.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-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(--tabstrip-height);\n}\n\n.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --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(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-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.vuuDraggable-tabstrip-horizontal {\n  --overflow-item-height: var(--tabstrip-height);\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: 0px;\n  --tabstrip-display: inline-flex;\n  --tabstrip-height: 28px;\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-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 { tabstripCss as default };
+//# sourceMappingURL=Tabstrip.css.js.map

package/esm/tabstrip/Tabstrip.css.js.map

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

package/esm/tabstrip/Tabstrip.js

@@ -1,10 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createElement } from 'react';
 import { useId, asReactElements } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useTabstrip } from './useTabstrip.js';
 import { IconButton } from '../icon-button/IconButton.js';
 import { OverflowContainer } from '../overflow-container/OverflowContainer.js';
+import tabstripCss from './Tabstrip.css.js';
 
 const classBase = "vuuTabstrip";
 const Tabstrip = ({
@@ -31,6 +34,12 @@ const Tabstrip = ({
   variant = "secondary",
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-tabstrip",
+    css: tabstripCss,
+    window: targetWindow
+  });
   const rootRef = useRef(null);
   const {
     activeTabIndex,

package/esm/tabstrip/Tabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport \"./Tabstrip.css\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}
+{"version":3,"file":"Tabstrip.js","sources":["../../src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    focusVisible,\n    containerStyle,\n    draggedItemIndex,\n    onClickAddTab,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n          } = child.props;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          )\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      focusVisible,\n      location,\n    ]\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "0.8.41",
+  "version": "0.8.43",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.41",
-    "@vuu-ui/vuu-table-types": "0.8.41"
+    "@vuu-ui/vuu-data-types": "0.8.43",
+    "@vuu-ui/vuu-table-types": "0.8.43"
   },
   "dependencies": {
-    "@vuu-ui/vuu-layout": "0.8.41",
-    "@vuu-ui/vuu-popups": "0.8.41",
-    "@vuu-ui/vuu-table": "0.8.41",
-    "@vuu-ui/vuu-utils": "0.8.41",
+    "@vuu-ui/vuu-layout": "0.8.43",
+    "@vuu-ui/vuu-popups": "0.8.43",
+    "@vuu-ui/vuu-table": "0.8.43",
+    "@vuu-ui/vuu-utils": "0.8.43",
     "@salt-ds/core": "1.17.0",
     "@salt-ds/icons": "1.9.1",
     "@salt-ds/styles": "0.2.1",

package/types/expando-input/ExpandoInput.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { VuuInputProps } from "../vuu-input";
-import "./ExpandoInput.css";
 export interface ExpandoInputProps extends Omit<VuuInputProps, "onCommit"> {
     onCommit?: VuuInputProps["onCommit"];
 }

package/types/tabstrip/Tab.d.ts

@@ -1,6 +1,5 @@
 import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
 import { KeyboardEvent, MouseEvent } from "react";
-import "./Tab.css";
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyUp" | "onClick"> & {
     ariaControls?: string | undefined;
     closeable?: boolean | undefined;

package/types/tabstrip/Tabstrip.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { TabstripProps } from "./TabsTypes";
-import "./Tabstrip.css";
 export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => JSX.Element;

package/cjs/expando-input/ExpandoInput.css

@@ -1,64 +0,0 @@
-.vuuExpandoInput {
-
-    --salt-editable-secondary-background: white;
-    --expandoInput-height: var(--vuuExpandoInput-height, 26px);
-    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
-
-    --saltInput-height: var(--expandoInput-height);
-    --saltInput-minHeight: var(--saltInput-height);
-    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
-  
-    border: var(--vuuExpandoInput-border, none);
-    border-radius: var(--vuuExpandoInput-borderRadius, 0);
-    color: inherit;
-    cursor: default;
-    display: inline-block;
-    font-size: var(--salt-text-fontSize);
-    height: var(--expandoInput-height);
-    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
-    outline: none;
-    padding: 0 var(--expandoInput-padding);
-    position: relative;
-
-}
-
-.vuuExpandoInput:before {
-    content: attr(data-text);
-    display: block;
-    height: 0px;
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  .vuuExpandoInput-error {
-    border-color: var(--vuu-color-red-50);
-  }
-
-  .vuuExpandoInput .saltInput {
-    font-weight: var(--salt-text-fontWeight);
-    left: var(--expandoInput-padding, 0);
-    padding: 0;
-    outline-style: none;
-    position: absolute;
-    right: var(--expandoInput-padding, 0);
-    top: var(--vuuExpandoInput-top, 2px);
-    width: auto;
-  }
-  
-  .vuuExpandoInput .saltInput-activationIndicator {
-    display: none;
-  }
-  
-  .vuuExpandoInput-input {
-    background-color: transparent;
-    border: none;
-    box-sizing: content-box;
-    display: block;
-    flex: 1;
-    font: inherit;
-    height: 20px;
-    margin:0;
-    min-width:0;
-    outline: none;
-    padding: 0;
-  }
-  

package/cjs/tabstrip/Tab.css

@@ -1,159 +0,0 @@
-/* Class applied to root Tab element */
-.vuuTab {
-  --saltEditableLabel-padding: 0;
-  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
-  --saltInputLegacy-minWidth: 4em;
-  --saltEditableLabel-top: 2px;
-
-  --tab-background: var(--vuuTab-background, transparent);
-  --tab-cursor: pointer;
-  --tab-position: relative;
-
-
-  align-items: center;
-  align-self: stretch;
-  background: var(--tab-background);
-  border-color: var(--vuuTab-borderColor, transparent);
-  border-style: var(--vuuTab-borderStyle, none);
-  border-width: var(--vuuTab-borderWidth, 0px);
-  border-radius: var(--vuuTab-borderRadius, 0);
-  color: var(--salt-content-primary-foreground);
-  cursor: var(--vuuTab-cursor, var(--tab-cursor));
-  display: var(--tabstrip-display);
-  gap: 8px;
-  height: var(--vuuTabHeight, var(--tab-height));
-  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
-  margin: 0 var(--tab-spacing) 0 0;
-  min-width: var(--vuuTab-minWidth, 40px);
-  outline: none;
-  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
-  position: var(--vuuTab-position, var(--tab-position));
-  user-select: none;
-  width: var(--tab-width)
-}
-
-.vuuTab-selected {
-  background: var(--vuuTab-background-selected, var(--tab-background));
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-navigable-fontWeight-active);
-}
-
-/* main content aria of Tab */
-.vuuTab-main {
-  align-items: center;;
-  border: none;
-  color: inherit;
-  cursor: inherit;
-  display: flex;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  height: calc(var(--tab-height) - var(--tab-thumb-height));
-  margin-bottom: var(--tab-thumb-height);
-  outline: none;
-  position: relative;
-}
-
-.vuuTab-closeable .vuuTab-main {
-  border-right: solid transparent var(--salt-size-unit);
-}
-
-.vuuTab .vuuTab-closeButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* the close Button on a closeable Tab*/
-.vuuTab-close-icon {
-  display: none;
-}
-
-.salt-density-touch .vuuTab-close-icon,
-.salt-density-low .vuuTab-close-icon {
-  display: block;
-}
-
-.salt-density-touch .vuuTab-close-icon-small,
-.salt-density-low .vuuTab-close-icon-small {
-  display: none;
-}
-
-.vuuTab .vuuTab-text {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  text-align: var(--salt-text-textAlign-embedded);
-  text-overflow: ellipsis;
-  top: var(--vuuTab-top, var(--tab-top, auto));
-  white-space: nowrap;
-  /* ensure content sits above focus ring */
-  z-index: var(--salt-zIndex-default);
-}
-
-.vuuTab .vuuTab-text:before {
-  height: 0;
-  content: attr(data-text);
-  display: block;
-  visibility: hidden;
-  font-weight: var(--salt-navigable-fontWeight-active);
-}
-
-/* FIXME: these are all focusVisible styles, but with a bespoke inset */
-.vuuTab-editing:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 2px;
-  outline-color: var(--salt-focused-outlineColor);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-offset: -2px;
-}
-
-.vuuTab.vuuFocusVisible {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
-  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
-  outline-style: dashed;
-  outline-width: 1px;
-  outline-offset: -1px;
-}
-
-.vuuTab:before {
-  content: var(--tab-before-content, none);
-  content: "";
-  background: var(--tab-before-background);
-  height: var(--tab-before-height);
-  inset: var(--tab-before-inset);
-  position: absolute;
-  width: var(--tab-before-width);
-  z-index: 1;
-}
-
-.vuuTabstrip-draggingTab .vuuTab-selected:before {
-  --tab-before-content: "";
-  --tab-before-background: var(--salt-navigable-indicator-color-active);
-  --tab-before-height: var(--tab-thumb-height);
-  --tab-before-inset: var(--tab-activationIndicator-inset);
-  --tab-before-width: var(--tab-activationIndicator-thumb-width);
-}
-
-
-.vuuTab-selected:before {
-  --tab-before-content: "";
-  background: var(--salt-navigable-indicator-active);
-  height: var(--tab-thumb-height);
-  position: absolute;
-  left: var(--tab-thumb-left);
-  bottom: 0px; 
-  top: var(--tab-thumb-top, auto);
-  transition: var(--tab-thumb-transition, none);
-  width: var(--tab-thumb-width, 100%);
-}
-
-.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
-}
-

package/cjs/tabstrip/Tabstrip.css

@@ -1,135 +0,0 @@
-/* Component class applied to the root element */
-.vuuTabstrip {
-  --vuuOverflowContainer-background: transparent;
-  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
-  --vuuOverflowContainer-width: var(--tabstrip-width);
-  --tabstrip-dragging-display: none;
-  --tabstrip-display: inline-flex;
-  --tabstrip-background: transparent;
-
-  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
-  display: flex;
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));
-  min-width: 28px;
-  position: relative;
-  overflow: visible;
-}
-
-/* Tabstrip orientation is horizontal */
-.vuuTabstrip.vuuOrientation-horizontal {
-  --vuuOverflowContainer-borderStyle: none none solid none;
-  --vuuOverflowContainer-borderBottomWidth: 1px;
-
-  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));
-  --tabstrip-width: var(--vuuTabstrip-width, 100%);
-  --tab-height: var(--tabstrip-height);
-  --tab-width: auto;
-  --tab-thumb-height: 2px;
-  --tab-thumb-left: var(--tab-thumb-offset, 0);
-  --tab-thumb-top: auto;
-  --tab-thumb-width: var(--tab-thumb-size, 100%);
-  align-items: flex-start;
-  /* border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor)); */
-}
-
-/* Tabstrip orientation is vertical */
-.vuuTabstrip.vuuOrientation-vertical {
-  --tabstrip-height: var(--vuuTabstrip-height, 100%);
-  --tabstrip-width: var(--vuuTabstrip-width, 100px);
-  --tab-height: 50px;
-  --tab-width: 100%;
-  --tab-thumb-height: 0;
-  --tab-thumb-left: 0;
-  --tab-thumb-top: var(--tab-thumb-offset, 0);
-  --tab-thumb-width: 2px;
-
-  align-self: flex-start;
-  display: inline-flex;
-}
-
-.vuuTabstrip-draggingTab .vuuTab {
-  pointer-events: none;
-}
-
-
-.vuuTabstrip-overflowMenu.vuuDropdown {
-  --saltIcon-margin: 2px 0 0 0px;
-}
-
-.vuuTabstrip-overflowMenu-open {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
-}
-
-.vuuTabstrip-overflowMenu-open .saltButton {
-  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
-}
-
-.vuuTabstrip-inner {
-  width: 100%;
-  align-items: center;
-  display: flex;
-  flex-basis: auto;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  line-height: var(--tabstrip-height);
-}
-
-.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {
-  flex-direction: column;
-  height: auto;
-}
-
-.vuuTabstrip-centered .vuuTabstrip-inner {
-  justify-content: center;
-}
-
-/* Styling applied to Draggable wrapper when used to drag a Tab */
-.vuuDraggable[class*="vuuTabstrip"] {
-  --tabstrip-display: flex;
-  --tabstrip-height: 100%;
-  --tabstrip-dragging-display: block;
-
-  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
-  --tabs-tab-before-content: "";
-  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
-  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);
-  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);
-  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);
-  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);
-  --tabs-tab-position: static;
-
-  font-size: 12px;
-}
-
-.vuuDraggable-tabstrip-horizontal {
-  --overflow-item-height: var(--tabstrip-height);
-  --tab-thumb-height: 2px;
-  --tab-thumb-left: 0px;
-  --tabstrip-display: inline-flex;
-  --tabstrip-height: 28px;
-  line-height: var(--tabstrip-height);
-}
-
-
-.vuuDraggable[class*="tabstrip"] .vuuTab[aria-selected="true"]:before {
-  --tabs-tab-before-background: var(--salt-navigable-indicator-active);
-}
-
-/* [data-overflowed] {
-  order: 99;
-  visibility: hidden;
-} */
-
-.vuuTabstrip-overflowMenu-dropTarget:after {
-  background: var(--salt-selectable-background-selected);
-  content: "";
-  position: absolute;
-  height: 2px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}

package/esm/expando-input/ExpandoInput.css

@@ -1,64 +0,0 @@
-.vuuExpandoInput {
-
-    --salt-editable-secondary-background: white;
-    --expandoInput-height: var(--vuuExpandoInput-height, 26px);
-    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
-
-    --saltInput-height: var(--expandoInput-height);
-    --saltInput-minHeight: var(--saltInput-height);
-    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
-  
-    border: var(--vuuExpandoInput-border, none);
-    border-radius: var(--vuuExpandoInput-borderRadius, 0);
-    color: inherit;
-    cursor: default;
-    display: inline-block;
-    font-size: var(--salt-text-fontSize);
-    height: var(--expandoInput-height);
-    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
-    outline: none;
-    padding: 0 var(--expandoInput-padding);
-    position: relative;
-
-}
-
-.vuuExpandoInput:before {
-    content: attr(data-text);
-    display: block;
-    height: 0px;
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  .vuuExpandoInput-error {
-    border-color: var(--vuu-color-red-50);
-  }
-
-  .vuuExpandoInput .saltInput {
-    font-weight: var(--salt-text-fontWeight);
-    left: var(--expandoInput-padding, 0);
-    padding: 0;
-    outline-style: none;
-    position: absolute;
-    right: var(--expandoInput-padding, 0);
-    top: var(--vuuExpandoInput-top, 2px);
-    width: auto;
-  }
-  
-  .vuuExpandoInput .saltInput-activationIndicator {
-    display: none;
-  }
-  
-  .vuuExpandoInput-input {
-    background-color: transparent;
-    border: none;
-    box-sizing: content-box;
-    display: block;
-    flex: 1;
-    font: inherit;
-    height: 20px;
-    margin:0;
-    min-width:0;
-    outline: none;
-    padding: 0;
-  }
-  

package/esm/tabstrip/Tab.css

@@ -1,159 +0,0 @@
-/* Class applied to root Tab element */
-.vuuTab {
-  --saltEditableLabel-padding: 0;
-  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
-  --saltInputLegacy-minWidth: 4em;
-  --saltEditableLabel-top: 2px;
-
-  --tab-background: var(--vuuTab-background, transparent);
-  --tab-cursor: pointer;
-  --tab-position: relative;
-
-
-  align-items: center;
-  align-self: stretch;
-  background: var(--tab-background);
-  border-color: var(--vuuTab-borderColor, transparent);
-  border-style: var(--vuuTab-borderStyle, none);
-  border-width: var(--vuuTab-borderWidth, 0px);
-  border-radius: var(--vuuTab-borderRadius, 0);
-  color: var(--salt-content-primary-foreground);
-  cursor: var(--vuuTab-cursor, var(--tab-cursor));
-  display: var(--tabstrip-display);
-  gap: 8px;
-  height: var(--vuuTabHeight, var(--tab-height));
-  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
-  margin: 0 var(--tab-spacing) 0 0;
-  min-width: var(--vuuTab-minWidth, 40px);
-  outline: none;
-  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
-  position: var(--vuuTab-position, var(--tab-position));
-  user-select: none;
-  width: var(--tab-width)
-}
-
-.vuuTab-selected {
-  background: var(--vuuTab-background-selected, var(--tab-background));
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-navigable-fontWeight-active);
-}
-
-/* main content aria of Tab */
-.vuuTab-main {
-  align-items: center;;
-  border: none;
-  color: inherit;
-  cursor: inherit;
-  display: flex;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  height: calc(var(--tab-height) - var(--tab-thumb-height));
-  margin-bottom: var(--tab-thumb-height);
-  outline: none;
-  position: relative;
-}
-
-.vuuTab-closeable .vuuTab-main {
-  border-right: solid transparent var(--salt-size-unit);
-}
-
-.vuuTab .vuuTab-closeButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* the close Button on a closeable Tab*/
-.vuuTab-close-icon {
-  display: none;
-}
-
-.salt-density-touch .vuuTab-close-icon,
-.salt-density-low .vuuTab-close-icon {
-  display: block;
-}
-
-.salt-density-touch .vuuTab-close-icon-small,
-.salt-density-low .vuuTab-close-icon-small {
-  display: none;
-}
-
-.vuuTab .vuuTab-text {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  text-align: var(--salt-text-textAlign-embedded);
-  text-overflow: ellipsis;
-  top: var(--vuuTab-top, var(--tab-top, auto));
-  white-space: nowrap;
-  /* ensure content sits above focus ring */
-  z-index: var(--salt-zIndex-default);
-}
-
-.vuuTab .vuuTab-text:before {
-  height: 0;
-  content: attr(data-text);
-  display: block;
-  visibility: hidden;
-  font-weight: var(--salt-navigable-fontWeight-active);
-}
-
-/* FIXME: these are all focusVisible styles, but with a bespoke inset */
-.vuuTab-editing:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 2px;
-  outline-color: var(--salt-focused-outlineColor);
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-offset: -2px;
-}
-
-.vuuTab.vuuFocusVisible {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
-  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
-  outline-style: dashed;
-  outline-width: 1px;
-  outline-offset: -1px;
-}
-
-.vuuTab:before {
-  content: var(--tab-before-content, none);
-  content: "";
-  background: var(--tab-before-background);
-  height: var(--tab-before-height);
-  inset: var(--tab-before-inset);
-  position: absolute;
-  width: var(--tab-before-width);
-  z-index: 1;
-}
-
-.vuuTabstrip-draggingTab .vuuTab-selected:before {
-  --tab-before-content: "";
-  --tab-before-background: var(--salt-navigable-indicator-color-active);
-  --tab-before-height: var(--tab-thumb-height);
-  --tab-before-inset: var(--tab-activationIndicator-inset);
-  --tab-before-width: var(--tab-activationIndicator-thumb-width);
-}
-
-
-.vuuTab-selected:before {
-  --tab-before-content: "";
-  background: var(--salt-navigable-indicator-active);
-  height: var(--tab-thumb-height);
-  position: absolute;
-  left: var(--tab-thumb-left);
-  bottom: 0px; 
-  top: var(--tab-thumb-top, auto);
-  transition: var(--tab-thumb-transition, none);
-  width: var(--tab-thumb-width, 100%);
-}
-
-.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
-}
-

package/esm/tabstrip/Tabstrip.css

@@ -1,135 +0,0 @@
-/* Component class applied to the root element */
-.vuuTabstrip {
-  --vuuOverflowContainer-background: transparent;
-  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
-  --vuuOverflowContainer-width: var(--tabstrip-width);
-  --tabstrip-dragging-display: none;
-  --tabstrip-display: inline-flex;
-  --tabstrip-background: transparent;
-
-  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
-  display: flex;
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));
-  min-width: 28px;
-  position: relative;
-  overflow: visible;
-}
-
-/* Tabstrip orientation is horizontal */
-.vuuTabstrip.vuuOrientation-horizontal {
-  --vuuOverflowContainer-borderStyle: none none solid none;
-  --vuuOverflowContainer-borderBottomWidth: 1px;
-
-  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));
-  --tabstrip-width: var(--vuuTabstrip-width, 100%);
-  --tab-height: var(--tabstrip-height);
-  --tab-width: auto;
-  --tab-thumb-height: 2px;
-  --tab-thumb-left: var(--tab-thumb-offset, 0);
-  --tab-thumb-top: auto;
-  --tab-thumb-width: var(--tab-thumb-size, 100%);
-  align-items: flex-start;
-  /* border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor)); */
-}
-
-/* Tabstrip orientation is vertical */
-.vuuTabstrip.vuuOrientation-vertical {
-  --tabstrip-height: var(--vuuTabstrip-height, 100%);
-  --tabstrip-width: var(--vuuTabstrip-width, 100px);
-  --tab-height: 50px;
-  --tab-width: 100%;
-  --tab-thumb-height: 0;
-  --tab-thumb-left: 0;
-  --tab-thumb-top: var(--tab-thumb-offset, 0);
-  --tab-thumb-width: 2px;
-
-  align-self: flex-start;
-  display: inline-flex;
-}
-
-.vuuTabstrip-draggingTab .vuuTab {
-  pointer-events: none;
-}
-
-
-.vuuTabstrip-overflowMenu.vuuDropdown {
-  --saltIcon-margin: 2px 0 0 0px;
-}
-
-.vuuTabstrip-overflowMenu-open {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
-}
-
-.vuuTabstrip-overflowMenu-open .saltButton {
-  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
-}
-
-.vuuTabstrip-inner {
-  width: 100%;
-  align-items: center;
-  display: flex;
-  flex-basis: auto;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  line-height: var(--tabstrip-height);
-}
-
-.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {
-  flex-direction: column;
-  height: auto;
-}
-
-.vuuTabstrip-centered .vuuTabstrip-inner {
-  justify-content: center;
-}
-
-/* Styling applied to Draggable wrapper when used to drag a Tab */
-.vuuDraggable[class*="vuuTabstrip"] {
-  --tabstrip-display: flex;
-  --tabstrip-height: 100%;
-  --tabstrip-dragging-display: block;
-
-  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
-  --tabs-tab-before-content: "";
-  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
-  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);
-  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);
-  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);
-  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);
-  --tabs-tab-position: static;
-
-  font-size: 12px;
-}
-
-.vuuDraggable-tabstrip-horizontal {
-  --overflow-item-height: var(--tabstrip-height);
-  --tab-thumb-height: 2px;
-  --tab-thumb-left: 0px;
-  --tabstrip-display: inline-flex;
-  --tabstrip-height: 28px;
-  line-height: var(--tabstrip-height);
-}
-
-
-.vuuDraggable[class*="tabstrip"] .vuuTab[aria-selected="true"]:before {
-  --tabs-tab-before-background: var(--salt-navigable-indicator-active);
-}
-
-/* [data-overflowed] {
-  order: 99;
-  visibility: hidden;
-} */
-
-.vuuTabstrip-overflowMenu-dropTarget:after {
-  background: var(--salt-selectable-background-selected);
-  content: "";
-  position: absolute;
-  height: 2px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}