@vuu-ui/vuu-ui-controls 0.9.2 → 0.9.3

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabListNext.js

@@ -0,0 +1,124 @@
+'use strict';
+
+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 TabListNext$1 = require('./TabListNext.css.js');
+var TabOverflowList = require('./TabOverflowList.js');
+var TabsNextContext = require('./TabsNextContext.js');
+var useOverflow = require('./hooks/useOverflow.js');
+
+const withBaseName = core.makePrefixer("saltTabListNext");
+const TabListNext = React.forwardRef(
+  function TabstripNext(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tablist-next",
+      css: TabListNext$1,
+      window: targetWindow
+    });
+    const {
+      selected,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      items,
+      activeTab,
+      menuOpen,
+      setMenuOpen,
+      returnFocus
+    } = TabsNextContext.useTabsNext();
+    const tabstripRef = React.useRef(null);
+    const handleRef = core.useForkRef(tabstripRef, ref);
+    const overflowButtonRef = React.useRef(null);
+    const [visible, hidden, isMeasuring] = useOverflow.useOverflow({
+      container: tabstripRef,
+      tabs: items,
+      children,
+      selected,
+      overflowButton: overflowButtonRef
+    });
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      const actionMap = {
+        ArrowRight: getNext,
+        ArrowLeft: getPrevious,
+        Home: getFirst,
+        End: getLast,
+        ArrowUp: menuOpen ? getPrevious : void 0,
+        ArrowDown: menuOpen ? getNext : void 0
+      };
+      const action = actionMap[event.key];
+      if (action) {
+        event.preventDefault();
+        const activeTabId = activeTab.current?.id;
+        if (!activeTabId) return;
+        const nextItem = action(activeTabId);
+        if (nextItem) {
+          nextItem.element?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest"
+          });
+          nextItem.element?.focus({ preventScroll: true });
+        }
+      }
+    };
+    core.useIsomorphicLayoutEffect(() => {
+      if (!returnFocus.current || visible.length < 1 || selected === void 0)
+        return;
+      const itemToFocus = items.find((i) => i.value === returnFocus.current);
+      itemToFocus?.element?.focus({ preventScroll: true });
+      requestAnimationFrame(() => {
+        if (targetWindow?.document?.activeElement === itemToFocus?.element) {
+          returnFocus.current = void 0;
+        }
+      });
+    }, [visible, returnFocus, targetWindow, items, selected]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "tablist",
+        className: cx.clsx(
+          withBaseName(),
+          withBaseName(appearance),
+          withBaseName("horizontal"),
+          withBaseName(`activeColor${core.capitalize(activeColor)}`),
+          className
+        ),
+        "data-ismeasuring": isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+          visible,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TabOverflowList.TabOverflowList,
+            {
+              isMeasuring,
+              buttonRef: overflowButtonRef,
+              tabstripRef,
+              open: menuOpen,
+              setOpen: setMenuOpen,
+              children: hidden
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.TabListNext = TabListNext;
+//# sourceMappingURL=TabListNext.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabListNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListNext.js","sources":["../../../../../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabCss = "/* Class applied to root Tab element */\n.saltTabNext {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  --tabNext-radius: var(--salt-palette-corner-weak, 0);\n  border-radius: var(--tab-radius) var(--tab-radius) 0 0;\n  overflow: hidden;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabListNext-bordered .saltTabNext::after {\n  top: 0;\n}\n\n.saltTabListNext-transparent .saltTabNext::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext-focusVisible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext-disabled:hover::after,\n.saltTabNext-disabled.saltTabNext-focusVisible::after {\n  background: none;\n}\n\n.saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {\n  background: var(--saltTabListNext-activeColor);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext.saltTabNext-selected::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext.saltTabNext-disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+module.exports = tabCss;
+//# sourceMappingURL=TabNext.css.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNext.css.js.map

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

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNext.js

@@ -0,0 +1,110 @@
+'use strict';
+
+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 TabNext$1 = require('./TabNext.css.js');
+var TabNextContext = require('./TabNextContext.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const withBaseName = core.makePrefixer("saltTabNext");
+const TabNext = React.forwardRef(
+  function Tab(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      children,
+      className,
+      disabled: disabledProp,
+      onBlur,
+      onMouseDown,
+      onFocus,
+      onFocusCapture,
+      value,
+      id: idProp,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-next",
+      css: TabNext$1,
+      window: targetWindow
+    });
+    const { selected, activeTab } = TabsNextContext.useTabsNext();
+    const disabled = !!disabledProp;
+    const id = core.useId(idProp);
+    const wasMouseDown = React.useRef(false);
+    const [focusVisible, setFocusVisible] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const handleFocusCapture = (event) => {
+      onFocusCapture?.(event);
+      if (value && id) {
+        activeTab.current = { value, id };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus?.(event);
+      setFocused(true);
+      if (!wasMouseDown.current && event.target.getAttribute("role") === "tab") {
+        setFocusVisible(true);
+      }
+      wasMouseDown.current = false;
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      setFocused(false);
+      setFocusVisible(false);
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown?.(event);
+      wasMouseDown.current = true;
+    };
+    const [actions, setActions] = React.useState([]);
+    const registerAction = React.useCallback((id2) => {
+      setActions((old) => old.concat(id2));
+      return () => {
+        setActions((old) => old.filter((action) => action !== id2));
+      };
+    }, []);
+    const context = React.useMemo(
+      () => ({
+        tabId: id,
+        selected: selected === value,
+        focused,
+        value,
+        disabled,
+        actions,
+        registerAction
+      }),
+      [id, selected, value, focused, disabled, actions, registerAction]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(TabNextContext.TabNextContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("selected")]: selected === value,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("focusVisible")]: focusVisible
+          },
+          className
+        ),
+        "data-overflowitem": "true",
+        ref,
+        onMouseDown: handleMouseDown,
+        onFocusCapture: handleFocusCapture,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        role: "presentation",
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+exports.TabNext = TabNext;
+//# sourceMappingURL=TabNext.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNext.js","sources":["../../../../../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const { selected, activeTab } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (value && id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      wasMouseDown.current = true;\n    };\n\n    const [actions, setActions] = useState<string[]>([]);\n\n    const registerAction = useCallback((id: string) => {\n      setActions((old) => old.concat(id));\n\n      return () => {\n        setActions((old) => old.filter((action) => action !== id));\n      };\n    }, []);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    return (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          ref={ref}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tabCss","useTabsNext","useId","useRef","useState","useCallback","id","useMemo","jsx","TabNextContext","clsx"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextAction.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var React = require('react');
+var TabNextContext = require('./TabNextContext.js');
+
+const TabNextAction = React.forwardRef(
+  function TabNextAction2(props, ref) {
+    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
+    const id = core.useId(idProp);
+    const { focused, selected, tabId, registerAction } = TabNextContext.useTabNext();
+    core.useIsomorphicLayoutEffect(() => {
+      if (id) {
+        return registerAction(id);
+      }
+    }, [registerAction, id]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Button,
+      {
+        id,
+        "aria-labelledby": cx.clsx(ariaLabelledBy, tabId, id),
+        tabIndex: focused || selected ? void 0 : -1,
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+
+exports.TabNextAction = TabNextAction;
+//# sourceMappingURL=TabNextAction.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextAction.js","sources":["../../../../../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {\n  debugLabel?: string;\n}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const { \"aria-labelledby\": ariaLabelledBy, id: idProp, ...rest } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction } = useTabNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","TabNextAction","useId","useTabNext","useIsomorphicLayoutEffect","jsx","Button","clsx"],"mappings":";;;;;;;;AAcO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,iBAAmB,EAAA,cAAA,EAAgB,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAEnE,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmBC,yBAAW,EAAA;AAEhE,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA;AAC1B,KACC,EAAA,CAAC,cAAgB,EAAA,EAAE,CAAC,CAAA;AAEvB,IACE,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAAC,OAAA,CAAK,cAAgB,EAAA,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,QAC5C,UAAW,EAAA,aAAA;AAAA,QACX,SAAU,EAAA,SAAA;AAAA,QACV,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextContext.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var React = require('react');
+
+const TabNextContext = core.createContext(
+  "TabNextContext",
+  {
+    focused: false,
+    selected: false,
+    disabled: false,
+    value: "",
+    actions: [],
+    registerAction: () => () => void 0
+  }
+);
+function useTabNext() {
+  return React.useContext(TabNextContext);
+}
+
+exports.TabNextContext = TabNextContext;
+exports.useTabNext = useTabNext;
+//# sourceMappingURL=TabNextContext.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextContext.js","sources":["../../../../../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\ninterface TabNextContextValue {\n  tabId?: string;\n  focused: boolean;\n  selected: boolean;\n  value: string;\n  disabled: boolean;\n  actions: string[];\n  registerAction: (id: string) => () => void;\n}\n\nexport const TabNextContext = createContext<TabNextContextValue>(\n  \"TabNextContext\",\n  {\n    focused: false,\n    selected: false,\n    disabled: false,\n    value: \"\",\n    actions: [],\n    registerAction: () => () => undefined,\n  },\n);\n\nexport function useTabNext() {\n  return useContext(TabNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,cAAiB,GAAAA,kBAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,OAAS,EAAA,KAAA;AAAA,IACT,QAAU,EAAA,KAAA;AAAA,IACV,QAAU,EAAA,KAAA;AAAA,IACV,KAAO,EAAA,EAAA;AAAA,IACP,SAAS,EAAC;AAAA,IACV,cAAA,EAAgB,MAAM,MAAM,KAAA;AAAA;AAEhC;AAEO,SAAS,UAAa,GAAA;AAC3B,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;;;;;"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabPanelCss = ".saltTabNextPanel {\n  height: 100%;\n  width: 100%;\n}\n\n.saltTabNextPanel[hidden] {\n  display: none;\n}\n\n.saltTabNextPanel:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n";
+
+module.exports = tabPanelCss;
+//# sourceMappingURL=TabNextPanel.css.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextPanel.css.js.map

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

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextPanel.js

@@ -0,0 +1,77 @@
+'use strict';
+
+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 index_esm = require('../../../../node_modules/tabbable/dist/index.esm.js');
+var TabNextPanel$1 = require('./TabNextPanel.css.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const withBaseName = core.makePrefixer("saltTabNextPanel");
+const TabNextPanel = React.forwardRef(
+  function TabNextPanel2(props, ref) {
+    const { className, children, id: idProp, value, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-tab-next-panel",
+      css: TabNextPanel$1,
+      window: targetWindow
+    });
+    const id = core.useId(idProp);
+    const { registerPanel, getTabId, selected } = TabsNextContext.useTabsNext();
+    const panelRef = React.useRef(null);
+    const handleRef = core.useForkRef(panelRef, ref);
+    core.useIsomorphicLayoutEffect(() => {
+      if (value && id) {
+        return registerPanel(id, value);
+      }
+    }, [value, id, registerPanel]);
+    const [hasFocusableChildren, setHasFocusableChildren] = React.useState(false);
+    React.useEffect(() => {
+      if (!panelRef.current) return;
+      const detectFocusableChildren = () => {
+        requestAnimationFrame(() => {
+          if (!panelRef.current) return;
+          const elements = index_esm.tabbable(panelRef.current);
+          setHasFocusableChildren(elements.length > 0);
+        });
+      };
+      const observer = new MutationObserver(() => {
+        detectFocusableChildren();
+      });
+      requestAnimationFrame(() => {
+        detectFocusableChildren();
+      });
+      observer.observe(panelRef.current, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, []);
+    const hidden = selected !== value;
+    const tabId = getTabId(value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        ref: handleRef,
+        role: "tabpanel",
+        "aria-labelledby": tabId,
+        className: cx.clsx(withBaseName(), className),
+        hidden: hidden || void 0,
+        tabIndex: hidden || hasFocusableChildren ? void 0 : 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.TabNextPanel = TabNextPanel;
+//# sourceMappingURL=TabNextPanel.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextPanel.js","sources":["../../../../../src/tabs-next/TabNextPanel.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport tabPanelCss from \"./TabNextPanel.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the panel, this should map to the corresponding tab.\n   */\n  value: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextPanel\");\n\nexport const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(\n  function TabNextPanel(props, ref) {\n    const { className, children, id: idProp, value, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next-panel\",\n      css: tabPanelCss,\n      window: targetWindow,\n    });\n    const id = useId(idProp);\n    const { registerPanel, getTabId, selected } = useTabsNext();\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(panelRef, ref);\n\n    useIsomorphicLayoutEffect(() => {\n      if (value && id) {\n        return registerPanel(id, value);\n      }\n    }, [value, id, registerPanel]);\n\n    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);\n    useEffect(() => {\n      if (!panelRef.current) return;\n\n      const detectFocusableChildren = () => {\n        requestAnimationFrame(() => {\n          if (!panelRef.current) return;\n          const elements = tabbable(panelRef.current);\n          setHasFocusableChildren(elements.length > 0);\n        });\n      };\n\n      const observer = new MutationObserver(() => {\n        detectFocusableChildren();\n      });\n\n      requestAnimationFrame(() => {\n        detectFocusableChildren();\n      });\n\n      observer.observe(panelRef.current, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      });\n\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const hidden = selected !== value;\n    const tabId = getTabId(value);\n\n    return (\n      <div\n        id={id}\n        ref={handleRef}\n        role=\"tabpanel\"\n        aria-labelledby={tabId}\n        className={clsx(withBaseName(), className)}\n        hidden={hidden || undefined}\n        tabIndex={hidden || hasFocusableChildren ? undefined : 0}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabNextPanel","useWindow","useComponentCssInjection","tabPanelCss","useId","useTabsNext","useRef","useForkRef","useIsomorphicLayoutEffect","useState","useEffect","tabbable","jsx","clsx"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA,EAAE,WAAW,QAAU,EAAA,EAAA,EAAI,QAAQ,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC5D,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,aAAA,EAAe,QAAU,EAAA,QAAA,KAAaC,2BAAY,EAAA;AAE1D,IAAM,MAAA,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,QAAA,EAAU,GAAG,CAAA;AAE1C,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,SAAS,EAAI,EAAA;AACf,QAAO,OAAA,aAAA,CAAc,IAAI,KAAK,CAAA;AAAA;AAChC,KACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,aAAa,CAAC,CAAA;AAE7B,IAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtE,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AAEvB,MAAA,MAAM,0BAA0B,MAAM;AACpC,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AACvB,UAAM,MAAA,QAAA,GAAWC,kBAAS,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,UAAwB,uBAAA,CAAA,QAAA,CAAS,SAAS,CAAC,CAAA;AAAA,SAC5C,CAAA;AAAA,OACH;AAEA,MAAM,MAAA,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAwB,uBAAA,EAAA;AAAA,OACzB,CAAA;AAED,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,OAAS,EAAA;AAAA,QACjC,SAAW,EAAA,IAAA;AAAA,QACX,OAAS,EAAA,IAAA;AAAA,QACT,UAAY,EAAA;AAAA,OACb,CAAA;AAED,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAW,EAAA;AAAA,OACtB;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,SAAS,QAAa,KAAA,KAAA;AAC5B,IAAM,MAAA,KAAA,GAAQ,SAAS,KAAK,CAAA;AAE5B,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACL,IAAK,EAAA,UAAA;AAAA,QACL,iBAAiB,EAAA,KAAA;AAAA,QACjB,SAAW,EAAAC,OAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,MAAU,IAAA,KAAA,CAAA;AAAA,QAClB,QAAA,EAAU,MAAU,IAAA,oBAAA,GAAuB,KAAY,CAAA,GAAA,CAAA;AAAA,QACtD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextTrigger.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabTriggerCss = ".saltTabNextTrigger {\n  all: unset;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n/* The action should be triggered by clicking anywhere on the tab. */\n.saltTabNextTrigger::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n";
+
+module.exports = tabTriggerCss;
+//# sourceMappingURL=TabNextTrigger.css.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextTrigger.css.js.map

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

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextTrigger.js

@@ -0,0 +1,74 @@
+'use strict';
+
+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 TabNextContext = require('./TabNextContext.js');
+var TabNextTrigger$1 = require('./TabNextTrigger.css.js');
+var TabsNextContext = require('./TabsNextContext.js');
+
+const withBaseName = core.makePrefixer("saltTabNextTrigger");
+function getAriaDescription(count) {
+  if (count < 1) {
+    return void 0;
+  }
+  if (count === 1) {
+    return "1 action available";
+  }
+  return `${count} actions available`;
+}
+const TabNextTrigger = React.forwardRef(function TabNextTrigger2(props, ref) {
+  const { children, id: idProp, onClick, onKeyDown, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tab-next-trigger",
+    css: TabNextTrigger$1,
+    window: targetWindow
+  });
+  const { setSelected, registerTab, getPanelId } = TabsNextContext.useTabsNext();
+  const { selected, value, focused, disabled, tabId, actions } = TabNextContext.useTabNext();
+  const tabRef = React.useRef(null);
+  const id = tabId;
+  core.useIsomorphicLayoutEffect(() => {
+    if (value && id && tabRef.current) {
+      return registerTab({ id, value, element: tabRef.current });
+    }
+  }, [value, id, registerTab]);
+  const handleClick = (event) => {
+    setSelected(event, value);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Enter" || event.key === " ") {
+      setSelected(event, value);
+    }
+  };
+  const handleRef = core.useForkRef(tabRef, ref);
+  const panelId = getPanelId(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      "aria-controls": panelId,
+      "aria-actions": cx.clsx(actions) || void 0,
+      "aria-description": getAriaDescription(actions.length),
+      tabIndex: focused || selected ? void 0 : -1,
+      role: "tab",
+      type: "button",
+      onClick: !disabled ? handleClick : void 0,
+      onKeyDown: !disabled ? handleKeyDown : void 0,
+      className: withBaseName(),
+      id,
+      ref: handleRef,
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.TabNextTrigger = TabNextTrigger;
+//# sourceMappingURL=TabNextTrigger.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabNextTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextTrigger.js","sources":["../../../../../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  debugLabel?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n  if (count < 1) {\n    return undefined;\n  }\n\n  if (count === 1) {\n    return \"1 action available\";\n  }\n\n  return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n  HTMLButtonElement,\n  TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n  const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next-trigger\",\n    css: tabTriggerCss,\n    window: targetWindow,\n  });\n\n  const { setSelected, registerTab, getPanelId } = useTabsNext();\n  const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n  const tabRef = useRef<HTMLButtonElement>(null);\n\n  const id = tabId;\n\n  useIsomorphicLayoutEffect(() => {\n    if (value && id && tabRef.current) {\n      return registerTab({ id, value, element: tabRef.current });\n    }\n  }, [value, id, registerTab]);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setSelected(event, value);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      setSelected(event, value);\n    }\n  };\n\n  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n  const panelId = getPanelId(value);\n\n  return (\n    <button\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={panelId}\n      // eslint-disable-next-line react/no-unknown-property\n      aria-actions={clsx(actions) || undefined}\n      aria-description={getAriaDescription(actions.length)}\n      tabIndex={focused || selected ? undefined : -1}\n      role=\"tab\"\n      type=\"button\"\n      onClick={!disabled ? handleClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n      className={withBaseName()}\n      id={id}\n      ref={handleRef}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TabNextTrigger","useWindow","useComponentCssInjection","tabTriggerCss","useTabsNext","useTabNext","useRef","useIsomorphicLayoutEffect","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,KAAA,CAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;AAEO,MAAM,cAAiB,GAAAC,gBAAA,CAG5B,SAASC,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAeC,2BAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAYC,yBAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAA,SAAA,GAAY,KAAK,CAAA;AAEjB,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAYC,eAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,eAAe,EAAA,OAAA;AAAA,MAEf,cAAA,EAAcC,OAAK,CAAA,OAAO,CAAK,IAAA,KAAA,CAAA;AAAA,MAC/B,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,MACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,MAC5C,IAAK,EAAA,KAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,MACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,KAAA,CAAA;AAAA,MACvC,WAAW,YAAa,EAAA;AAAA,MACxB,EAAA;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabOverflowList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabOverflowListCss = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+
+module.exports = tabOverflowListCss;
+//# sourceMappingURL=TabOverflowList.css.js.map

package/cjs/packages/vuu-ui-controls/src/tabs-next/TabOverflowList.css.js.map

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