@vuu-ui/vuu-ui-controls 2.1.19-beta.1 → 2.1.19-beta.2

package/src/tabstrip/useTabstrip.js

@@ -0,0 +1,181 @@
+import { useCallback, useRef, useState } from "react";
+import { useDragDrop } from "../drag-drop/index.js";
+import { isTabMenuOptions } from "./TabMenuOptions.js";
+import { getIndexOfSelectedTab } from "./tabstrip-dom-utils.js";
+import { useAnimatedSelectionThumb } from "./useAnimatedSelectionThumb.js";
+import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
+import { useSelection } from "./useSelection.js";
+const editKeys = new Set([
+    "Enter",
+    " "
+]);
+const isEditKey = (key)=>editKeys.has(key);
+const useTabstrip = ({ activeTabIndex: activeTabIndexProp, allowDragDrop, animateSelectionThumb, containerRef, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, keyBoardActivation })=>{
+    const lastSelection = useRef(activeTabIndexProp);
+    const [interactedTabState, setInteractedTabState] = useState();
+    const { focusTab: keyboardHookFocusTab, highlightedIdx, onClick: keyboardHookHandleClick, onKeyDown: keyboardHookHandleKeyDown, setHighlightedIdx: keyboardHookSetHighlightedIndex, ...keyboardHook } = useKeyboardNavigation({
+        containerRef,
+        keyBoardActivation,
+        orientation,
+        selectedIndex: lastSelection.current
+    });
+    const { activateTab: selectionHookActivateTab, onClick: selectionHookHandleClick, onKeyDown: selectionHookHandleKeyDown, selected: selectionHookSelected } = useSelection({
+        highlightedIdx,
+        onSelectionChange: onActiveChange,
+        selected: activeTabIndexProp
+    });
+    lastSelection.current = selectionHookSelected;
+    const { containerStyle, resumeAnimation, suspendAnimation } = useAnimatedSelectionThumb(containerRef, animateSelectionThumb ? selectionHookSelected : -1, orientation);
+    const handleDrop = useCallback(({ fromIndex, toIndex })=>{
+        const { current: selected } = lastSelection;
+        console.log(`useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`);
+        onMoveTab?.(fromIndex, toIndex);
+        let nextSelectedTab = -1;
+        if (-1 !== toIndex) {
+            if (selected === fromIndex) nextSelectedTab = toIndex;
+            else if (fromIndex > selected && toIndex <= selected) nextSelectedTab = selected + 1;
+            else if (fromIndex < selected && toIndex >= selected) nextSelectedTab = selected - 1;
+            if (-1 !== nextSelectedTab) {
+                suspendAnimation();
+                selectionHookActivateTab(nextSelectedTab);
+                requestAnimationFrame(resumeAnimation);
+            }
+            keyboardHookFocusTab(toIndex, false, false, 350);
+        }
+    }, [
+        keyboardHookFocusTab,
+        onMoveTab,
+        resumeAnimation,
+        selectionHookActivateTab,
+        suspendAnimation
+    ]);
+    const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
+        allowDragDrop,
+        containerRef,
+        draggableClassName: `tabstrip-${orientation}`,
+        onDrop: handleDrop,
+        orientation: "horizontal",
+        itemQuery: ".vuuOverflowContainer-item"
+    });
+    const handleExitEditMode = useCallback((originalValue, editedValue, allowDeactivation, tabIndex)=>{
+        setInteractedTabState(void 0);
+        onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
+        if (!allowDeactivation) keyboardHookFocusTab(tabIndex, false, true);
+    }, [
+        keyboardHookFocusTab,
+        onExitEditMode
+    ]);
+    const handleClick = useCallback((evt, tabIndex)=>{
+        keyboardHookHandleClick(evt, tabIndex);
+        selectionHookHandleClick(evt, tabIndex);
+    }, [
+        keyboardHookHandleClick,
+        selectionHookHandleClick
+    ]);
+    const editTab = useCallback((tabIndex = highlightedIdx)=>{
+        console.log(`set interacted tab state ${tabIndex}`);
+        setInteractedTabState({
+            index: tabIndex,
+            state: "rename"
+        });
+    }, [
+        highlightedIdx
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        keyboardHookHandleKeyDown(evt);
+        if (!evt.defaultPrevented) selectionHookHandleKeyDown(evt);
+        if (!evt.defaultPrevented && isEditKey(evt.key)) editTab();
+    }, [
+        editTab,
+        keyboardHookHandleKeyDown,
+        selectionHookHandleKeyDown
+    ]);
+    const handleCloseTabFromMenu = useCallback((tabIndex)=>{
+        const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
+        const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
+        suspendAnimation();
+        onCloseTab?.(tabIndex, newActiveTabIndex);
+        setTimeout(()=>{
+            resumeAnimation();
+        }, 200);
+        return true;
+    }, [
+        containerRef,
+        onCloseTab,
+        resumeAnimation,
+        suspendAnimation
+    ]);
+    const handleRenameTabFromMenu = useCallback((tabIndex)=>{
+        editTab(tabIndex);
+        return true;
+    }, [
+        editTab
+    ]);
+    const handleTabMenuAction = useCallback((menuItemId, options)=>{
+        if (isTabMenuOptions(options)) switch(menuItemId){
+            case "close-tab":
+                return handleCloseTabFromMenu(options.tabIndex);
+            case "rename-tab":
+                return handleRenameTabFromMenu(options.tabIndex);
+            default:
+                console.log(`tab menu action ${menuItemId}`);
+        }
+        return false;
+    }, [
+        handleCloseTabFromMenu,
+        handleRenameTabFromMenu
+    ]);
+    const handleTabMenuClose = useCallback(()=>{
+        if (interactedTabState?.index === highlightedIdx) keyboardHookSetHighlightedIndex(highlightedIdx);
+        else keyboardHookFocusTab(highlightedIdx);
+    }, [
+        highlightedIdx,
+        interactedTabState?.index,
+        keyboardHookFocusTab,
+        keyboardHookSetHighlightedIndex
+    ]);
+    const onSwitchWrappedItemIntoView = useCallback((item)=>{
+        const index = parseInt(item.index);
+        if (!isNaN(index)) selectionHookActivateTab(index);
+    }, [
+        selectionHookActivateTab
+    ]);
+    const navigationProps = {
+        onFocus: keyboardHook.onFocus,
+        onKeyDown: handleKeyDown
+    };
+    const handleAddTabClick = useCallback(()=>{
+        onAddTab?.();
+        requestAnimationFrame(()=>{
+            const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
+            if (-1 !== selectedTabIndex) keyboardHookFocusTab(selectedTabIndex);
+        });
+    }, [
+        containerRef,
+        keyboardHookFocusTab,
+        onAddTab
+    ]);
+    const tabProps = {
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onExitEditMode: handleExitEditMode,
+        onMenuAction: handleTabMenuAction,
+        onMenuClose: handleTabMenuClose,
+        onMouseDown: dragDropHookHandleMouseDown
+    };
+    return {
+        activeTabIndex: selectionHookSelected,
+        containerProps: {
+            ...keyboardHook.containerProps,
+            onSwitchWrappedItemIntoView
+        },
+        containerStyle,
+        focusVisible: keyboardHook.focusVisible,
+        interactedTabState,
+        navigationProps,
+        onClickAddTab: handleAddTabClick,
+        tabProps,
+        ...dragDropHook
+    };
+};
+export { useTabstrip };

package/src/time-input/MaskedInput.js

@@ -0,0 +1,285 @@
+import { EventEmitter, createSyntheticEvent, decrementTimeUnitValue, incrementTimeUnitValue, isValidTimeString, updateTimeString, zeroTime, zeroTimeUnit } from "@vuu-ui/vuu-utils";
+const NullSelection = {
+    end: null,
+    start: null
+};
+const FullSelection = {
+    end: 0,
+    start: 8
+};
+const CursorAtEnd = {
+    end: 8,
+    start: 8
+};
+class MaskedInput extends EventEmitter {
+    #controlled = false;
+    #input = null;
+    #isFocused = false;
+    #isIncrementalChange = false;
+    #selectionStart = -1;
+    #selectionEnd = -1;
+    #value;
+    #unitSelected;
+    #halfUnitSelected;
+    constructor(defaultValue, inputEl = null){
+        super();
+        if (inputEl) this.input = inputEl;
+        this.#value = defaultValue ?? zeroTime;
+    }
+    set input(el) {
+        if (this.#input) throw Error("MaskedInput cannot be reused, create a new instance for a new input");
+        this.#input = el;
+        el.addEventListener("change", this.emitSyntheticChangeEvent);
+    }
+    emitSyntheticChangeEvent = (e)=>{
+        const syntheticEvent = createSyntheticEvent(e);
+        this.emit("change", syntheticEvent);
+    };
+    get cursorPos() {
+        return this.selectionStart;
+    }
+    set cursorPos(value) {
+        this.selectionStart = value;
+        this.selectionEnd = value;
+        if (this.#input) this.#input.setSelectionRange(value, value);
+    }
+    get isFocused() {
+        return this.#isFocused;
+    }
+    get selectionStart() {
+        return this.#selectionStart;
+    }
+    set selectionStart(value) {
+        this.#selectionStart = value;
+    }
+    get selectionEnd() {
+        return this.#selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.#selectionEnd = value;
+    }
+    setValue(value) {
+        if (!this.#controlled) {
+            this.#isIncrementalChange = false;
+            this.#value = value;
+        }
+        if (this.#input) {
+            this.#input.value = value;
+            this.#input.dispatchEvent(new Event("change", {
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    setUnitValue(unit, value) {
+        const newTimeString = updateTimeString(this.#value, unit, value);
+        this.setValue(newTimeString);
+    }
+    getUnitValue(unit) {
+        switch(unit){
+            case "hours":
+                return this.#value.slice(0, 2);
+            case "minutes":
+                return this.#value.slice(3, 5);
+            case "seconds":
+                return this.#value.slice(6, 8);
+            default:
+                throw Error(`[MaskedInout] invalue unit ${unit}`);
+        }
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        this.#controlled = true;
+        this.#value = value;
+        if (this.isFocused) {
+            const isIncremental = this.#isIncrementalChange;
+            this.#isIncrementalChange = false;
+            requestAnimationFrame(()=>{
+                if (isIncremental) this.restoreSelection();
+                else this.advanceSelection();
+            });
+        }
+    }
+    clear(unit) {
+        if (this.#input) {
+            let newValue = this.#value;
+            if ("hours" === unit) newValue = zeroTimeUnit.concat(this.#value.slice(2));
+            else if ("minutes" === unit) newValue = this.#value.slice(0, 3).concat(zeroTimeUnit).concat(this.#value.slice(5));
+            else if ("seconds" === unit) newValue = this.#value.slice(0, 6).concat(zeroTimeUnit);
+            if (newValue !== this.#value) this.setValue(newValue);
+        }
+    }
+    select(unit, halfUnit = false) {
+        if (this.#input) {
+            const offset = halfUnit ? 1 : 0;
+            if ("hours" === unit) {
+                this.selectionStart = this.#input.selectionStart = 0 + offset;
+                this.selectionEnd = this.#input.selectionEnd = 2;
+            } else if ("minutes" === unit) {
+                this.selectionStart = this.#input.selectionStart = 3 + offset;
+                this.selectionEnd = this.#input.selectionEnd = 5;
+            } else if ("seconds" === unit) {
+                this.selectionStart = this.#input.selectionStart = 6 + offset;
+                this.selectionEnd = this.#input.selectionEnd = 8;
+            }
+            this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);
+            if (halfUnit) {
+                this.#halfUnitSelected = unit;
+                this.#unitSelected = void 0;
+            } else {
+                this.#halfUnitSelected = void 0;
+                this.#unitSelected = unit;
+            }
+        }
+    }
+    removeSelection() {
+        this.#selectionStart = this.selectionEnd = 8;
+        this.#unitSelected = void 0;
+        this.#halfUnitSelected = void 0;
+    }
+    restoreSelection() {
+        if (this.#unitSelected) this.select(this.#unitSelected);
+    }
+    advanceSelection() {
+        if (this.#unitSelected) this.select(this.#unitSelected, true);
+        else if ("hours" === this.#halfUnitSelected) this.select("minutes");
+        else if ("minutes" === this.#halfUnitSelected) this.select("seconds");
+        else if ("seconds" === this.#halfUnitSelected) this.select("seconds");
+        else throw Error("unreachable code, in theory");
+    }
+    moveFocus(direction) {
+        if ("right" === direction) {
+            if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("minutes");
+            else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("seconds");
+            else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("seconds");
+        } else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("minutes");
+        else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("hours");
+        else if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("hours");
+        else {
+            const selection = this.getSelection();
+            if (selection === CursorAtEnd) this.select("seconds");
+        }
+    }
+    pasteValue(value) {
+        this.#halfUnitSelected = void 0;
+        this.#unitSelected = void 0;
+        this.#value = value;
+    }
+    getUnitAtCursorPos(cursorPos = this.cursorPos) {
+        if (cursorPos >= 0 && cursorPos < 3) return "hours";
+        if (cursorPos < 6) return "minutes";
+        if (cursorPos <= 8) return "seconds";
+        throw Error(`[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`);
+    }
+    incrementValue() {
+        if (this.#input) {
+            this.#isIncrementalChange = true;
+            const unit = this.getUnitAtCursorPos();
+            const unitValue = this.getUnitValue(unit);
+            const newUnitValue = incrementTimeUnitValue(unit, unitValue);
+            this.setUnitValue(unit, newUnitValue);
+            this.select(unit);
+        }
+    }
+    decrementValue() {
+        if (this.#input) {
+            this.#isIncrementalChange = true;
+            const unit = this.getUnitAtCursorPos();
+            const unitValue = this.getUnitValue(unit);
+            const newUnitValue = decrementTimeUnitValue(unit, unitValue);
+            this.setUnitValue(unit, newUnitValue);
+            this.select(unit);
+        }
+    }
+    backspace() {
+        if (this.#input) {
+            const { cursorPos } = this;
+            if ("seconds" === this.#unitSelected) {
+                this.clear("seconds");
+                this.select("minutes");
+            } else if ("minutes" === this.#unitSelected) {
+                this.clear("minutes");
+                this.select("hours");
+            } else if ("hours" === this.#unitSelected) {
+                this.clear("hours");
+                this.select("hours");
+            } else if (cursorPos > 0) {
+                const offset = 6 === this.selectionStart || 3 === this.selectionStart ? 2 : 1;
+                const newValue = this.#value.slice(0, cursorPos - offset).concat(zeroTime.slice(cursorPos - offset, cursorPos)).concat(this.#value.slice(cursorPos));
+                this.selectionStart -= offset;
+                this.selectionEnd -= offset;
+                this.setValue(newValue);
+                requestAnimationFrame(()=>{
+                    this.#input?.setSelectionRange(this.#selectionStart, this.selectionEnd);
+                });
+            }
+        }
+    }
+    update(key) {
+        if (this.#input) {
+            const { cursorPos } = this;
+            if (cursorPos < 8) {
+                const originalValue = this.#value;
+                const newValue = this.#value.split("").toSpliced(cursorPos, 1, key).join("");
+                this.setValue(newValue);
+                if (isValidTimeString(newValue)) {
+                    this.#input.classList.remove("invalid");
+                    if (this.#controlled && newValue === originalValue) this.advanceSelection();
+                    else if (!this.#controlled) this.advanceSelection();
+                } else if (this.#unitSelected) {
+                    this.select(this.#unitSelected);
+                    this.#input.classList.add("invalid");
+                }
+            }
+        }
+    }
+    getSelection() {
+        if (this.#input) {
+            const { selectionEnd, selectionStart } = this.#input;
+            if (null === selectionEnd || null === selectionStart) return NullSelection;
+            if (0 === selectionStart && 8 === selectionEnd) return FullSelection;
+            if (8 === selectionStart && 8 === selectionEnd) return CursorAtEnd;
+            else return {
+                end: selectionEnd,
+                start: selectionStart
+            };
+        }
+        throw Error("[MasketInput] selection referenced, but no input");
+    }
+    click() {
+        if (this.#input) {
+            this.#isFocused = true;
+            const selection = this.getSelection();
+            if (selection === NullSelection) this.select("hours");
+            else if (selection === FullSelection) ;
+            else {
+                const cursorPos = this.#input.selectionStart ?? 0;
+                this.select(this.getUnitAtCursorPos(cursorPos));
+            }
+        }
+    }
+    doubleClick() {
+        if (this.#input) {
+            const { selectionStart, selectionEnd } = this.#input;
+            if (null === selectionStart || null === selectionEnd) ;
+            else if (selectionStart < 3) this.select("hours");
+            else if (selectionStart < 6) this.select("minutes");
+            else if (selectionStart <= 8) this.select("seconds");
+        }
+    }
+    focus = ()=>{
+        if (this.#input) {
+            this.#isFocused = true;
+            requestAnimationFrame(()=>{
+                this.select("hours");
+            });
+        }
+    };
+    blur = ()=>{
+        this.removeSelection();
+        this.#isFocused = false;
+    };
+}
+export { MaskedInput };

package/src/time-input/TimeInput.css.js

@@ -0,0 +1,39 @@
+const css = `
+.salt-density-high .vuuTimeInput {
+  --time-input-width: 60px;
+}
+
+.salt-density-medium .vuuTimeInput {
+  --time-input-width: 70px;
+}
+
+.salt-density-low .vuuTimeInput {
+  --time-input-width: 80px;
+}
+
+.salt-density-touch .vuuTimeInput {
+  --time-input-width: 90px;
+}
+
+.vuuTimeInput {
+  background: var(--vuuTimeInput-background, inherit);
+  font-family: var(--salt-typography-fontFamily);
+  width: var(--vuuTimeInput-width, var(--time-input-width));
+  border-width: 1px;
+
+  &:focus::-webkit-input-placeholder {
+    color: #0000;
+  }
+
+  &:focus {
+    outline: var(--vuuTimeInput-outline, var(--salt-focused-outline));
+  }
+}
+
+.invalid {
+  border-color: red;
+}
+
+
+`;
+export default css;

package/src/time-input/TimeInput.js

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from "react";
+import { useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useTimeInput } from "./useTimeInput.js";
+import TimeInput_0 from "./TimeInput.css";
+const classBase = "vuuTimeInput";
+const TimeInput_TimeInput = /*#__PURE__*/ forwardRef(function({ className, date, defaultValue, onChange, onCommit, placeholder = "hh:mm:ss", value, ...htmlAttributes }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-time-input",
+        css: TimeInput_0,
+        window: targetWindow
+    });
+    const { inputRef, eventHandlers } = useTimeInput({
+        date,
+        defaultValue,
+        onChange,
+        onCommit,
+        value
+    });
+    return /*#__PURE__*/ createElement("input", {
+        ...htmlAttributes,
+        ...eventHandlers,
+        "aria-placeholder": placeholder,
+        className: clsx(classBase, className),
+        defaultValue: defaultValue,
+        key: defaultValue,
+        placeholder: placeholder,
+        readOnly: true,
+        ref: useForkRef(ref, inputRef),
+        spellCheck: "false",
+        value: value
+    });
+});
+export { TimeInput_TimeInput as TimeInput };

package/src/time-input/useTimeInput.js

@@ -0,0 +1,82 @@
+import { isValidTimeString } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef } from "react";
+import { MaskedInput } from "./MaskedInput.js";
+const isDigit = (char)=>1 === char.length && /[0-9]/.test(char);
+const useTimeInput = ({ defaultValue, onChange, onCommit, value })=>{
+    const mousedDownRef = useRef(false);
+    const maskedInputRef = useRef(void 0);
+    useMemo(()=>{
+        if (void 0 === maskedInputRef.current) {
+            maskedInputRef.current = new MaskedInput(defaultValue, null);
+            maskedInputRef.current.on("change", (e)=>{
+                onChange?.(e);
+            });
+        }
+        if (value && value !== maskedInputRef.current.value) maskedInputRef.current.value = value;
+    }, [
+        defaultValue,
+        onChange,
+        value
+    ]);
+    const setInputEl = useCallback((el)=>{
+        if (el && maskedInputRef.current) maskedInputRef.current.input = el;
+    }, []);
+    const back = useRef(false);
+    const commitValue = useCallback((evt, value)=>{
+        if (isValidTimeString(value)) onCommit(evt, value, "text-input");
+        else if ("hh:mm:ss" === value) console.log("no value set");
+        else console.log("value is not valid");
+    }, [
+        onCommit
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const { current: maskedInput } = maskedInputRef;
+        if (maskedInput) {
+            if ("Backspace" === e.key) {
+                maskedInput.backspace();
+                back.current = true;
+            } else if (isDigit(e.key)) maskedInput.update(e.key);
+            else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
+            else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
+            else if ("ArrowUp" === e.key) maskedInput.incrementValue();
+            else if ("ArrowDown" === e.key) maskedInput.decrementValue();
+            else if ("v" === e.key && e.metaKey) return;
+            else if ("Tab" === e.key) return;
+            else if ("Enter" === e.key) commitValue(e, maskedInput.value);
+        }
+        e.preventDefault();
+    }, [
+        commitValue
+    ]);
+    const handleDoubleClick = useCallback(()=>{
+        maskedInputRef.current?.doubleClick();
+    }, []);
+    const handlePaste = useCallback((e)=>{
+        const value = e.clipboardData.getData("text");
+        if (isValidTimeString(value)) maskedInputRef.current?.pasteValue(value);
+    }, []);
+    const handleFocus = useCallback(()=>{
+        if (mousedDownRef.current) mousedDownRef.current = false;
+        else maskedInputRef.current?.focus();
+    }, []);
+    const handleMouseDown = useCallback(()=>{
+        mousedDownRef.current = true;
+    }, []);
+    const handleMouseUp = useCallback((e)=>{
+        e.preventDefault();
+        maskedInputRef.current?.click();
+    }, []);
+    return {
+        inputRef: setInputEl,
+        eventHandlers: {
+            onBlur: maskedInputRef.current?.blur,
+            onDoubleClick: handleDoubleClick,
+            onFocus: handleFocus,
+            onKeyDown: handleKeyDown,
+            onMouseDown: handleMouseDown,
+            onMouseUp: handleMouseUp,
+            onPaste: handlePaste
+        }
+    };
+};
+export { useTimeInput };

package/src/toolbar/Toolbar.css.js

@@ -0,0 +1,46 @@
+const css = `
+.vuuToolbar {
+  --toolbar-height: var(--vuuToolbar-height, 36px);
+  --toolbar-item-height: var(--vuuToolbarItem-height, 100%);
+  --vuuOverflowContainer-background: var(--vuuToolbar-background);
+  --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);
+  --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);
+  --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);
+  height: var(--toolbar-height);
+}
+
+.vuuToolbar-alignCenter {
+  --vuuOverflowContainer-justifyContent: center;
+}
+
+.vuuToolbar-alignEnd {
+  --vuuOverflowContainer-justifyContent: flex-end;
+}
+
+.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {
+  content: "";
+  left: calc(-1 * var(--overflow-item-gap));
+  width: 1px;
+  height: var(--toolbar-item-height);
+  background-color: var(--salt-separable-primary-borderColor);
+  position: absolute;
+  top: 0;
+}
+
+.vuuToolbarItem.vuuFocusVisible {
+  outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));
+  outline-offset: 0px;
+  outline-width: 1px;
+  outline-style: dashed;
+}
+
+.vuuToolbarItem:focus, .vuuToolbarItem:focus-visible {
+  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
+  outline-offset: 0px;
+  outline-width: 1px;
+  outline-style: dashed;
+}
+
+
+`;
+export default css;