@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/overflow-container/overflow-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-utils.js","sources":["../../src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[]\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[]\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[]\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[]\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\")\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\")\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":["getElementByDataIndex"],"mappings":"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"}

package/cjs/overflow-container/useOverflowContainer.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var overflowUtils = require('./overflow-utils.js');
+require('../drag-drop/DragDropProvider.js');
+var useDragDrop = require('../drag-drop/useDragDrop.js');
+
+const useOverflowContainer = ({
+  allowDragDrop = false,
+  itemCount,
+  onMoveItem,
+  onSwitchWrappedItemIntoView,
+  orientation
+}) => {
+  const [container, setContainer] = React.useState(null);
+  const wrappedItemsRef = React.useRef(overflowUtils.NO_WRAPPED_ITEMS);
+  const containerRef = React.useRef(null);
+  const setOverflowTabIndex = React.useCallback((tabIndex) => {
+    if (containerRef.current) {
+      containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")?.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+  const handleResize = React.useCallback(async () => {
+    if (container) {
+      let [nonWrapped, wrapped] = overflowUtils.getNonWrappedAndWrappedItems(
+        container,
+        orientation
+      );
+      overflowUtils.applyOverflowClassToWrappedItems(
+        container,
+        wrapped,
+        "vuuOverflowContainer-wrapContainer"
+      );
+      if (overflowUtils.overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
+        wrapped = await overflowUtils.correctForWrappedOverflowIndicator(
+          container,
+          wrapped,
+          orientation
+        );
+      }
+      while (overflowUtils.highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)) {
+        [nonWrapped, wrapped] = await overflowUtils.correctForWrappedHighPriorityItems(
+          container,
+          nonWrapped,
+          wrapped,
+          orientation
+        );
+      }
+      if (wrapped.length === 1) {
+        if (overflowUtils.removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {
+          wrapped = overflowUtils.NO_WRAPPED_ITEMS;
+        }
+      }
+      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
+        setOverflowTabIndex("0");
+      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
+        setOverflowTabIndex("-1");
+      }
+      wrappedItemsRef.current = wrapped;
+    }
+  }, [container, orientation, setOverflowTabIndex]);
+  const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
+  const [menuBuilder, menuActionHandler] = React.useMemo(() => {
+    return [
+      () => {
+        const { current: menuItems } = wrappedItemsRef;
+        return menuItems.map((item) => {
+          return {
+            label: item.label,
+            action: `activate-item-${item.index}`,
+            options: { overflowItem: item }
+          };
+        });
+      },
+      // The menu items are our overflowed items, selecting one by default
+      // brings it back onto the toolbar - TODO is this right ?
+      ({ options }) => {
+        if (container && hasOverflowItem(options)) {
+          const [, wrappedItems] = overflowUtils.switchWrappedItemIntoView(
+            container,
+            options.overflowItem,
+            orientation
+          );
+          wrappedItemsRef.current = wrappedItems;
+          onSwitchWrappedItemIntoView?.(options.overflowItem);
+        }
+        return true;
+      }
+    ];
+  }, [container, onSwitchWrappedItemIntoView, orientation]);
+  const resizeObserver = React.useMemo(() => {
+    const { sizeProp } = vuuUtils.MEASURES[orientation];
+    let currentSize = 0;
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { [sizeProp]: actualSize } = entry.contentRect;
+        const size = Math.round(actualSize);
+        if (vuuUtils.isValidNumber(size) && currentSize !== size) {
+          currentSize = size;
+          handleResize();
+        }
+      }
+    });
+  }, [handleResize, orientation]);
+  vuuUtils.useLayoutEffectSkipFirst(() => {
+    handleResize();
+  }, [handleResize, itemCount]);
+  React.useMemo(() => {
+    if (container) {
+      resizeObserver.observe(container);
+    }
+  }, [container, resizeObserver]);
+  const callbackRef = React.useCallback((el) => {
+    setContainer(containerRef.current = el);
+  }, []);
+  const handleDrop = React.useCallback(
+    ({ fromIndex, toIndex }) => {
+      onMoveItem?.(fromIndex, toIndex);
+    },
+    [onMoveItem]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop.useDragDrop({
+    allowDragDrop,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `vuuOverflowContainer`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuOverflowContainer-item"
+  });
+  return {
+    menuActionHandler,
+    menuBuilder,
+    onItemMouseDown: dragDropHookHandleMouseDown,
+    rootRef: callbackRef,
+    ...dragDropHook
+  };
+};
+
+exports.useOverflowContainer = useOverflowContainer;
+//# sourceMappingURL=useOverflowContainer.js.map

package/cjs/overflow-container/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\"\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            action: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      ({ options }) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":"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"}

package/cjs/price-ticker/PriceTicker.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var priceTickerCss = "@property --price-ticker-color {\n    syntax: '<color>'; /* <- defined as type number for the transition to work */\n    initial-value: #15171B;\n    inherits: false;\n}\n  \n.vuuPriceTicker {\n  align-items: center;\n  display: flex;\n  font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--vuuPriceTicker-fontWeight, 700);\n  transition-property: color;\n  transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n  --vuu-icon-color: var(--vuu-color-green-50);\n  color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.up2 {\n    --vuu-icon-color: var(--vuu-color-green-50);\n    color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down1 {\n    --vuu-icon-transform: rotate(180deg);\n  --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down2 {\n    --vuu-icon-transform: rotate(180deg);\n    --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  ";
+
+module.exports = priceTickerCss;
+//# sourceMappingURL=PriceTicker.css.js.map

package/cjs/price-ticker/PriceTicker.css.js.map

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

package/cjs/price-ticker/PriceTicker.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var PriceTicker$1 = require('./PriceTicker.css.js');
+
+const classBase = "vuuPriceTicker";
+const getValueFormatter = (decimals) => vuuUtils.numericFormatter({
+  type: {
+    name: "number",
+    formatting: {
+      decimals,
+      zeroPad: true
+    }
+  }
+});
+const INITIAL_VALUE = [void 0, void 0];
+const PriceTicker = React.memo(
+  ({
+    className,
+    decimals = 2,
+    price,
+    showArrow,
+    ...htmlAttributes
+  }) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-price-ticker",
+      css: PriceTicker$1,
+      window: targetWindow
+    });
+    const ref = React.useRef(INITIAL_VALUE);
+    const [prevValue, prevDirection] = ref.current;
+    const formatNumber = React.useMemo(() => getValueFormatter(decimals), [decimals]);
+    const direction = vuuUtils.isValidNumber(prevValue) ? vuuUtils.getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
+    ref.current = [price, direction];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className, direction), children: [
+      formatNumber(price),
+      showArrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "price-arrow" }) : null
+    ] });
+  }
+);
+PriceTicker.displayName = "PriceTicker";
+
+exports.PriceTicker = PriceTicker;
+//# sourceMappingURL=PriceTicker.js.map

package/cjs/price-ticker/PriceTicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceTicker.js","sources":["../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  }\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":["numericFormatter","memo","useWindow","useComponentCssInjection","priceTickerCss","useRef","useMemo","isValidNumber","getMovingValueDirection","jsxs","jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzBA,yBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA,IAAA;AAAA,KACX;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAAC,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,GAAA,GAAMC,aAAc,aAAa,CAAA,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA,CAAA;AACvC,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAYC,uBAAc,SAAS,CAAA,GACrCC,iCAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA,CAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA,CAAA;AAE/B,IACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA,IAAA;AAAA,KAClD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/cjs/split-button/SplitButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var splitButtonCss = ".vuuSplitButton {\n    --saltButton-background: var(--split-background);\n    --saltButton-background-hover: var(--split-background);\n    --vuuPopupMenu-background: var(--split-background);\n    --vuuPopupMenu-iconSize: 20px;\n\n    /** less verbose local refs */\n    --background: var(--vuuSplitButton-background);\n    --foreground: var(--vuuSplitButton-foreground);\n    --background-hover: var(--vuuSplitButton-background-hover);\n    --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n    --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n    --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n    --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    --trigger-border-style: solid solid solid none;\n\n    align-items: center;\n    border: none;\n    border-radius: var(--border-radius);\n    display: flex;\n}\n\n.vuuSplitButton.vuuFocusVisible {\n    .saltButton {\n        outline-style: none;\n    }\n    &.vuuSplitButton-primary {\n        --split-background:  var(--background-hover,var(--salt-actionable-primary-background-hover));\n    }\n    &.vuuSplitButton-secondary {\n        --split-background:  var(--background-hover,var(--salt-actionable-secondary-background-hover));\n    }\n    &.vuuSplitButton-cta {\n        --split-background:  var(--background-hover,var(--salt-actionable-cta-background-hover));\n        .vuuSplitButton-trigger {\n            --vuu-icon-color:  var(--salt-actionable-cta-foreground-hover);\n        }\n    }    \n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n    outline-style: var(--salt-focused-outlineStyle);\n    outline-width: var(--salt-focused-outlineWidth);\n    outline-color: var(--salt-focused-outlineColor);\n    outline-offset: var(--salt-focused-outlineOffset);\n}\n\n  \n.vuuSplitButton-primary {\n    --split-background:  var(--background, var(--salt-actionable-primary-background));\n    --split-background-active:  var(--salt-actionable-primary-background-active);\n    --split-color-active:  var(--salt-actionable-primary-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --saltButton-borderColor: var(--split-background);\n    --split-background:  var(--background-hover, var(--salt-actionable-primary-background-hover));\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);\n    }\n}\n\n.vuuSplitButton-secondary {\n    --saltButton-borderColor: var(--split-background);\n    --split-background:  var(--background,var(--salt-actionable-secondary-background));\n    --split-background-active:  var(--salt-actionable-secondary-background-active);\n    --split-color-active:  var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --split-background:  var(--salt-actionable-secondary-background-hover);\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);\n    }\n}\n\n.vuuSplitButton-cta {\n    --split-background:  var(--background,var(--salt-actionable-cta-background));\n    --split-background-active:  var(--salt-actionable-cta-background-active);\n    --split-color-active:  var(--salt-actionable-cta-foreground-active);\n\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --split-background:  var(--salt-actionable-cta-background-hover);\n    --split-color: var(--salt-actionable-cta-foreground-hover);\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);\n        --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n    }\n}\n\n.vuuSplitButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--split-background-active);\n    .vuuSplitButton-trigger {\n        --vuu-icon-color: var(--split-color-active);\n    }\n}\n\n.vuuSplitButton-main {\n    border-style: solid none solid solid;\n    border-radius: var(--main-border-radius);\n    padding: 0 4px 0 16px;\n}\n\n.vuuSplitButton-trigger {\n    border-style: var(--trigger-border-style);\n    border-radius: var(--trigger-border-radius);\n}\n\n";
+
+module.exports = splitButtonCss;
+//# sourceMappingURL=SplitButton.css.js.map

package/cjs/split-button/SplitButton.css.js.map

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

package/cjs/split-button/SplitButton.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var core = require('@salt-ds/core');
+var React = require('react');
+var useSplitButton = require('./useSplitButton.js');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var SplitButton$1 = require('./SplitButton.css.js');
+
+const classBase = "vuuSplitButton";
+const SplitButton = React.forwardRef(
+  function SplitButton2({
+    ButtonProps: ButtonPropsProp,
+    PopupMenuProps: PopupMenuPropsProp,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    segmented = false,
+    variant = "primary",
+    ...htmlAttributes
+  }, forwardedRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-split-button",
+      css: SplitButton$1,
+      window: targetWindow
+    });
+    const { ButtonProps: ButtonProps2, buttonRef, rootRef, PopupMenuProps: PopupMenuProps2, ...rootProps } = useSplitButton.useSplitButton({
+      ButtonProps: ButtonPropsProp,
+      PopupMenuProps: PopupMenuPropsProp,
+      classBase,
+      onClick,
+      segmented
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...htmlAttributes,
+        ...rootProps,
+        className: cx(classBase, `${classBase}-${variant}`, className, {
+          [`${classBase}-disabled`]: disabled,
+          [`${classBase}-segmented`]: segmented
+        }),
+        ref: core.useForkRef(forwardedRef, rootRef),
+        "data-showcase-center": true,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              ...ButtonProps2,
+              className: `${classBase}-main`,
+              disabled,
+              ref: buttonRef,
+              variant,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            vuuPopups.PopupMenu,
+            {
+              ...PopupMenuProps2,
+              className: `${classBase}-trigger`,
+              disabled,
+              icon: PopupMenuProps2?.icon ?? "chevron-down",
+              tabIndex: segmented ? 0 : -1,
+              variant
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.SplitButton = SplitButton;
+//# sourceMappingURL=SplitButton.js.map

package/cjs/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <div\n        {...htmlAttributes}\n        {...rootProps}\n        className={cx(classBase, `${classBase}-${variant}`, className, {\n          [`${classBase}-disabled`]: disabled,\n          [`${classBase}-segmented`]: segmented,\n        })}\n        ref={useForkRef(forwardedRef, rootRef)}\n        data-showcase-center\n        tabIndex={-1}\n      >\n        <Button\n          {...ButtonProps}\n          className={`${classBase}-main`}\n          disabled={disabled}\n          ref={buttonRef}\n          variant={variant}\n        >\n          {children}\n        </Button>\n        <PopupMenu\n          {...PopupMenuProps}\n          className={`${classBase}-trigger`}\n          disabled={disabled}\n          icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n          tabIndex={segmented ? 0 : -1}\n          variant={variant}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,KACD,CAAA,CAAA;AAEH,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGN,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC,QAAA;AAAA,aAAA;AAAA,WACH;AAAA,0BACAK,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGN,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B,OAAA;AAAA,aAAA;AAAA,WACF;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/split-button/SplitStateButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var splitStateButtonCss = ".vuuSplitStateButton {\n    --split-state-background: var(--salt-actionable-secondary-background);\n    --split-state-foreground: var(--salt-actionable-secondary-foreground);\n    --vuuSplitButton-background: var(--split-state-background);\n    --vuuSplitButton-foreground: var(--split-state-foreground);\n    --vuuSplitButton-background-hover: var(--split-state-background);\n    --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n \n    .saltButton-primary:active, .saltButton-primary.saltButton-active {\n        --saltButton-background-active: var(--salt-actionable-primary-background);\n        --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n    }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"]{\n    --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n    --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n    --saltButton-text-color-hover: var(--salt-actionable-primary-foreground-active);\n    --split-state-background: var(--salt-actionable-primary-background-active);\n    --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n    &.focusVisible {\n        --split-state-background: var(--salt-actionable-primary-background-active);\n    }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"]{\n    .vuuEditableLabel-input {\n        color: var(--salt-actionable-primary-foreground-active);\n    }\n}\n\n.vuuSplitStateButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-primary-background);\n    .vuuSplitButton-trigger {\n        --vuu-icon-color: var(--salt-actionable-primary-foreground);\n    }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-secondary-background);\n    .saltButton-primary:active {\n        background: var(--salt-actionable-secondary-background);\n    }    \n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-primary-background-active);\n    .saltButton-primary:active {\n        background: var(--salt-actionable-primary-background-active);\n    }    \n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n    .saltButton {\n        border-color: var(--salt-actionable-primary-foreground);\n    }\n}\n";
+
+module.exports = splitStateButtonCss;
+//# sourceMappingURL=SplitStateButton.css.js.map

package/cjs/split-button/SplitStateButton.css.js.map

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

package/cjs/split-button/SplitStateButton.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SplitButton = require('./SplitButton.js');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var SplitStateButton$1 = require('./SplitStateButton.css.js');
+
+const classBase = "vuuSplitStateButton";
+const SplitStateButton = React.forwardRef(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-split-state-button",
+    css: SplitStateButton$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SplitButton.SplitButton,
+    {
+      ...splitButtonProps,
+      "aria-checked": selected,
+      className: cx(classBase, className),
+      ref: forwardedRef
+    }
+  );
+});
+
+exports.SplitStateButton = SplitStateButton;
+//# sourceMappingURL=SplitStateButton.js.map

package/cjs/split-button/SplitStateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStateButton.js","sources":["../../src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["forwardRef","SplitStateButton","useWindow","useComponentCssInjection","splitStateButtonCss","jsx","SplitButton"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}

package/cjs/split-button/useSplitButton.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+
+const focusTargetIsEditableLabel = (target) => {
+  if (target.tagName === "INPUT") {
+    return true;
+  }
+  return false;
+};
+const useSplitButton = ({
+  ButtonProps: ButtonPropsProp,
+  PopupMenuProps: PopupMenuProps2,
+  classBase,
+  onClick
+}) => {
+  const buttonRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const onMenuClose = React.useCallback((reason) => {
+    if (reason?.type !== "tab-away") {
+      const buttonMain = rootRef.current?.querySelector(
+        ".vuuSplitButton-main"
+      );
+      buttonMain?.focus();
+    }
+  }, []);
+  const menuProps = {
+    ...PopupMenuProps2,
+    anchorElement: rootRef,
+    menuClassName: `${classBase}-menu`,
+    onMenuClose,
+    popupPlacement: "below-full-width"
+  };
+  const handleRootFocus = React.useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    if (!splitButton?.classList.contains("vuuFocusVisible")) {
+      splitButton?.classList.add("vuuFocusVisible");
+      if (!focusTargetIsEditableLabel(evt.target)) {
+        requestAnimationFrame(() => {
+          buttonRef.current?.focus();
+        });
+      }
+    }
+  }, []);
+  const handleRootBlur = React.useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    const target = evt.relatedTarget;
+    if (!splitButton?.contains(target)) {
+      if (splitButton?.classList.contains("vuuFocusVisible")) {
+        splitButton.classList.remove("vuuFocusVisible");
+      }
+    }
+  }, []);
+  const handleButtonKeyDown = React.useCallback(
+    (evt) => {
+      if (evt.key === "ArrowDown") {
+        const popupTrigger = rootRef.current?.querySelector(
+          `.${classBase}-trigger`
+        );
+        if (popupTrigger) {
+          vuuUtils.dispatchMouseEvent(popupTrigger, "click");
+        }
+      }
+    },
+    [classBase]
+  );
+  const ButtonProps = {
+    ...ButtonPropsProp,
+    onClick,
+    onKeyDown: handleButtonKeyDown
+  };
+  return {
+    ButtonProps,
+    PopupMenuProps: menuProps,
+    buttonRef,
+    rootRef,
+    onBlur: handleRootBlur,
+    onFocus: handleRootFocus
+  };
+};
+
+exports.useSplitButton = useSplitButton;
+//# sourceMappingURL=useSplitButton.js.map

package/cjs/split-button/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButton.js","sources":["../../src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\"\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase]\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps","useRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;AAkBA,MAAM,0BAAA,GAA6B,CAAC,MAAwB,KAAA;AAC1D,EAAK,IAAA,MAAA,CAAuB,YAAY,OAAS,EAAA;AAC/C,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,WAAa,EAAA,eAAA;AAAA,EACb,cAAAA,EAAAA,eAAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AACF,CACyB,KAAA;AACvB,EAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,OAAA,GAAUA,aAAuB,IAAI,CAAA,CAAA;AAE3C,EAAM,MAAA,WAAA,GAAcC,iBAA8B,CAAA,CAAC,MAAW,KAAA;AAC5D,IAAI,IAAA,MAAA,EAAQ,SAAS,UAAY,EAAA;AAC/B,MAAM,MAAA,UAAA,GAAa,QAAQ,OAAS,EAAA,aAAA;AAAA,QAClC,sBAAA;AAAA,OACF,CAAA;AACA,MAAA,UAAA,EAAY,KAAM,EAAA,CAAA;AAAA,KACpB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,SAA4B,GAAA;AAAA,IAChC,GAAGF,eAAAA;AAAA,IACH,aAAe,EAAA,OAAA;AAAA,IACf,aAAA,EAAe,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,IAC3B,WAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkBE,iBAA+B,CAAA,CAAC,GAAQ,KAAA;AAC9D,IAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,OAAA,CAAA;AACjC,IAAA,IAAI,CAAC,WAAA,EAAa,SAAU,CAAA,QAAA,CAAS,iBAAiB,CAAG,EAAA;AACvD,MAAa,WAAA,EAAA,SAAA,CAAU,IAAI,iBAAiB,CAAA,CAAA;AAC5C,MAAA,IAAI,CAAC,0BAAA,CAA2B,GAAI,CAAA,MAAM,CAAG,EAAA;AAC3C,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,SAAA,CAAU,SAAS,KAAM,EAAA,CAAA;AAAA,SAC1B,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,cAAA,GAAiBA,iBAA+B,CAAA,CAAC,GAAQ,KAAA;AAC7D,IAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,OAAA,CAAA;AACjC,IAAA,MAAM,SAAS,GAAI,CAAA,aAAA,CAAA;AACnB,IAAA,IAAI,CAAC,WAAA,EAAa,QAAS,CAAA,MAAM,CAAG,EAAA;AAClC,MAAA,IAAI,WAAa,EAAA,SAAA,CAAU,QAAS,CAAA,iBAAiB,CAAG,EAAA;AACtD,QAAY,WAAA,CAAA,SAAA,CAAU,OAAO,iBAAiB,CAAA,CAAA;AAAA,OAChD;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,mBAAsB,GAAAA,iBAAA;AAAA,IAG1B,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,WAAa,EAAA;AAC3B,QAAM,MAAA,YAAA,GAAe,QAAQ,OAAS,EAAA,aAAA;AAAA,UACpC,IAAI,SAAS,CAAA,QAAA,CAAA;AAAA,SACf,CAAA;AACA,QAAA,IAAI,YAAc,EAAA;AAChB,UAAAC,2BAAA,CAAmB,cAAc,OAAO,CAAA,CAAA;AAAA,SAC1C;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,GAAG,eAAA;AAAA,IACH,OAAA;AAAA,IACA,SAAW,EAAA,mBAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,cAAgB,EAAA,SAAA;AAAA,IAChB,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAQ,EAAA,cAAA;AAAA,IACR,OAAS,EAAA,eAAA;AAAA,GACX,CAAA;AACF;;;;"}

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":";;;;;;"}