@vuu-ui/vuu-ui-controls 4.0.0-alpha.2 → 4.0.0-alpha.21

package/src/split-pane/useSplitPane.js

@@ -0,0 +1,101 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+const parsePx = (value, defaultValue)=>value.endsWith("px") ? parseFloat(value) : defaultValue;
+const measurePane = (el, dimension)=>{
+    const { [dimension]: size } = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    return {
+        size,
+        minSize: parsePx(style.getPropertyValue(`min-${dimension}`), 0),
+        maxSize: parsePx(style.getPropertyValue(`max-${dimension}`), 1 / 0)
+    };
+};
+const getPanes = (root)=>{
+    const pane1 = root?.children[0];
+    const pane2 = root?.children[2];
+    if (pane1 && pane2) return [
+        pane1,
+        pane2
+    ];
+};
+const toPercentage = ([size1, size2])=>{
+    const total = size1 + size2;
+    return 0 === total ? 0 : Math.round(size1 / total * 100);
+};
+const useSplitPane = ({ direction, onSplitterMoved, paneCount })=>{
+    const rootRef = useRef(null);
+    const resizeStateRef = useRef(void 0);
+    const [splitterPosition, setSplitterPosition] = useState(void 0);
+    const dimension = "column" === direction ? "height" : "width";
+    const hasSplitter = 2 === paneCount;
+    useLayoutEffect(()=>{
+        const panes = hasSplitter ? getPanes(rootRef.current) : void 0;
+        if (panes) {
+            const [pane1, pane2] = panes;
+            setSplitterPosition(toPercentage([
+                pane1.getBoundingClientRect()[dimension],
+                pane2.getBoundingClientRect()[dimension]
+            ]));
+        }
+    }, [
+        dimension,
+        hasSplitter
+    ]);
+    const beginResize = useCallback(()=>{
+        const panes = getPanes(rootRef.current);
+        if (panes) {
+            const [pane1, pane2] = panes;
+            const measurements = [
+                measurePane(pane1, dimension),
+                measurePane(pane2, dimension)
+            ];
+            resizeStateRef.current = {
+                panes,
+                measurements,
+                sizes: [
+                    measurements[0].size,
+                    measurements[1].size
+                ]
+            };
+            return true;
+        }
+        return false;
+    }, [
+        dimension
+    ]);
+    const resize = useCallback((distance)=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            const { panes: [pane1, pane2], measurements: [m1, m2] } = resizeState;
+            const total = m1.size + m2.size;
+            const lowerBound = Math.max(m1.minSize, total - m2.maxSize);
+            const upperBound = Math.min(m1.maxSize, total - m2.minSize);
+            const size1 = Math.max(lowerBound, Math.min(upperBound, m1.size + distance));
+            const size2 = total - size1;
+            pane1.style.flexBasis = `${size1}px`;
+            pane2.style.flexBasis = `${size2}px`;
+            resizeState.sizes = [
+                size1,
+                size2
+            ];
+        }
+    }, []);
+    const endResize = useCallback(()=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            resizeStateRef.current = void 0;
+            const { measurements, sizes } = resizeState;
+            setSplitterPosition(toPercentage(sizes));
+            if (sizes[0] !== measurements[0].size || sizes[1] !== measurements[1].size) onSplitterMoved?.(sizes);
+        }
+    }, [
+        onSplitterMoved
+    ]);
+    return {
+        beginResize,
+        endResize,
+        resize,
+        rootRef,
+        splitterPosition
+    };
+};
+export { useSplitPane };

package/src/tabstrip/Tab.css.js

@@ -101,7 +101,7 @@ const css = `
 }
 
 .vuuTab.vuuFocusVisible {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
   outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
   outline-offset: -1px;
   outline-width: 1px;
@@ -121,7 +121,7 @@ const css = `
 
 .vuuTabstrip-draggingTab .vuuTab-selected:before {
   --tab-before-content: "";
-  --tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tab-before-background: var(--salt-navigable-accent-indicator-active);
   --tab-before-height: var(--tab-thumb-height);
   --tab-before-inset: var(--tab-activationIndicator-inset);
   --tab-before-width: var(--tab-activationIndicator-thumb-width);
@@ -140,7 +140,7 @@ const css = `
 }
 
 .vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
 }
 
 

package/src/tabstrip/Tabstrip.css.js

@@ -52,7 +52,7 @@ const css = `
 
 .vuuTabstrip-overflowMenu-open {
   --saltButton-background: var(--salt-actionable-subtle-background-active);
-  --saltButton-text-color: var(--salt-actionable-subtle-text-color-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
 }
 
 .vuuTabstrip-overflowMenu-open .saltButton {
@@ -82,7 +82,7 @@ const css = `
   --tabstrip-display: flex;
   --tabstrip-height: 100%;
   --tabstrip-dragging-display: block;
-  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
+  --tabs-tab-background: var(--salt-navigable-background-hover);
   --tabs-tab-before-content: "";
   --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
   --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);

package/src/time-input/MaskedInput.js

@@ -1,35 +1,78 @@
-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
+import { EventEmitter, createSyntheticEvent, decrementTimeUnitValue, incrementTimeUnitValue, normaliseTimeString, updateTimeString, zeroTime, zeroTimeMillis } from "@vuu-ui/vuu-utils";
+const unitSpec = {
+    hours: {
+        start: 0,
+        length: 2,
+        max: 23
+    },
+    minutes: {
+        start: 3,
+        length: 2,
+        max: 59
+    },
+    seconds: {
+        start: 6,
+        length: 2,
+        max: 59
+    },
+    milliseconds: {
+        start: 9,
+        length: 3,
+        max: 999
+    }
 };
-const CursorAtEnd = {
-    end: 8,
-    start: 8
+const secondsUnits = [
+    "hours",
+    "minutes",
+    "seconds"
+];
+const millisecondsUnits = [
+    ...secondsUnits,
+    "milliseconds"
+];
+const invalidClassName = "vuuTimeInput-invalid";
+const isValidUnitValue = (unit, value)=>{
+    const { length, max } = unitSpec[unit];
+    return value.length === length && /^[0-9]+$/.test(value) && parseInt(value) <= max;
 };
 class MaskedInput extends EventEmitter {
     #controlled = false;
     #input = null;
     #isFocused = false;
-    #isIncrementalChange = false;
+    #milliseconds;
     #selectionStart = -1;
     #selectionEnd = -1;
+    #units;
     #value;
-    #unitSelected;
-    #halfUnitSelected;
-    constructor(defaultValue, inputEl = null){
+    #selectedUnit;
+    #digitIndex = 0;
+    constructor(defaultValue, inputEl = null, { milliseconds = false } = {}){
         super();
+        this.#milliseconds = milliseconds;
+        this.#units = milliseconds ? millisecondsUnits : secondsUnits;
+        this.#value = this.normalise(defaultValue) ?? this.zeroValue;
         if (inputEl) this.input = inputEl;
-        this.#value = defaultValue ?? zeroTime;
+    }
+    get milliseconds() {
+        return this.#milliseconds;
+    }
+    get zeroValue() {
+        return this.#milliseconds ? zeroTimeMillis : zeroTime;
+    }
+    get length() {
+        return this.#milliseconds ? 12 : 8;
+    }
+    normalise(value) {
+        return normaliseTimeString(value, this.#milliseconds);
     }
     set input(el) {
-        if (this.#input) throw Error("MaskedInput cannot be reused, create a new instance for a new input");
+        if (el === this.#input) return;
+        this.#input?.removeEventListener("change", this.emitSyntheticChangeEvent);
         this.#input = el;
-        el.addEventListener("change", this.emitSyntheticChangeEvent);
+        if (el) {
+            el.addEventListener("change", this.emitSyntheticChangeEvent);
+            if ("" !== el.value && el.value !== this.#value) el.value = this.#value;
+        }
     }
     emitSyntheticChangeEvent = (e)=>{
         const syntheticEvent = createSyntheticEvent(e);
@@ -58,33 +101,46 @@ class MaskedInput extends EventEmitter {
     set selectionEnd(value) {
         this.#selectionEnd = value;
     }
+    nextUnit(unit) {
+        const index = this.#units.indexOf(unit);
+        return this.#units[Math.min(index + 1, this.#units.length - 1)];
+    }
+    previousUnit(unit) {
+        const index = this.#units.indexOf(unit);
+        return this.#units[Math.max(index - 1, 0)];
+    }
+    get firstUnit() {
+        return this.#units[0];
+    }
+    get lastUnit() {
+        return this.#units[this.#units.length - 1];
+    }
     setValue(value) {
-        if (!this.#controlled) {
-            this.#isIncrementalChange = false;
-            this.#value = value;
-        }
+        if (!this.#controlled) this.#value = value;
         if (this.#input) {
             this.#input.value = value;
             this.#input.dispatchEvent(new Event("change", {
                 bubbles: true,
                 composed: true
             }));
+            if (this.#controlled) this.#input.value = this.#value;
         }
     }
+    getUnitValue(unit) {
+        const { start, length } = unitSpec[unit];
+        return this.#value.slice(start, start + length);
+    }
     setUnitValue(unit, value) {
-        const newTimeString = updateTimeString(this.#value, unit, value);
-        this.setValue(newTimeString);
+        const newValue = updateTimeString(this.#value, unit, value);
+        this.setValue(newValue);
     }
-    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}`);
+    setInvalid(invalid) {
+        if (this.#input) if (invalid) {
+            this.#input.classList.add(invalidClassName);
+            this.#input.setAttribute("aria-invalid", "true");
+        } else {
+            this.#input.classList.remove(invalidClassName);
+            this.#input.removeAttribute("aria-invalid");
         }
     }
     get value() {
@@ -92,188 +148,152 @@ class MaskedInput extends EventEmitter {
     }
     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();
+        const normalisedValue = this.normalise(value);
+        if (void 0 !== normalisedValue && normalisedValue !== this.#value) {
+            this.#value = normalisedValue;
+            if (this.isFocused) requestAnimationFrame(()=>{
+                this.restoreSelection();
             });
         }
     }
     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);
-        }
+        if (this.#input) this.setUnitValue(unit, "0".repeat(unitSpec[unit].length));
     }
-    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;
-            }
+    select(unit, digitIndex = 0) {
+        if (this.#input && this.#units.includes(unit)) {
+            const { start, length } = unitSpec[unit];
+            this.selectionStart = start + digitIndex;
+            this.selectionEnd = start + length;
             this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);
-            if (halfUnit) {
-                this.#halfUnitSelected = unit;
-                this.#unitSelected = void 0;
-            } else {
-                this.#halfUnitSelected = void 0;
-                this.#unitSelected = unit;
-            }
+            this.#selectedUnit = unit;
+            this.#digitIndex = digitIndex;
         }
     }
     removeSelection() {
-        this.#selectionStart = this.selectionEnd = 8;
-        this.#unitSelected = void 0;
-        this.#halfUnitSelected = void 0;
+        this.selectionStart = this.selectionEnd = this.length;
+        this.#selectedUnit = void 0;
+        this.#digitIndex = 0;
     }
     restoreSelection() {
-        if (this.#unitSelected) this.select(this.#unitSelected);
+        if (this.#selectedUnit) this.select(this.#selectedUnit, this.#digitIndex);
     }
-    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");
+    selectFirst() {
+        this.select(this.firstUnit);
+    }
+    selectLast() {
+        this.select(this.lastUnit);
     }
     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");
-        }
+        const unit = this.#selectedUnit;
+        if (unit) this.select("right" === direction ? this.nextUnit(unit) : this.previousUnit(unit));
+        else if ("right" === direction) this.selectFirst();
+        else this.selectLast();
     }
     pasteValue(value) {
-        this.#halfUnitSelected = void 0;
-        this.#unitSelected = void 0;
-        this.#value = value;
+        const normalisedValue = this.normalise(value.trim());
+        if (this.#input && void 0 !== normalisedValue) {
+            this.setInvalid(false);
+            if (normalisedValue !== this.#value) this.setValue(normalisedValue);
+            this.selectFirst();
+            return true;
+        }
+        return false;
     }
     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}`);
+        for(let i = this.#units.length - 1; i > 0; i--){
+            const unit = this.#units[i];
+            if (cursorPos >= unitSpec[unit].start) return unit;
+        }
+        return this.firstUnit;
+    }
+    get activeUnit() {
+        return this.#selectedUnit ?? this.getUnitAtCursorPos();
     }
     incrementValue() {
         if (this.#input) {
-            this.#isIncrementalChange = true;
-            const unit = this.getUnitAtCursorPos();
-            const unitValue = this.getUnitValue(unit);
-            const newUnitValue = incrementTimeUnitValue(unit, unitValue);
+            const unit = this.activeUnit;
+            const newUnitValue = incrementTimeUnitValue(unit, this.getUnitValue(unit));
+            this.setInvalid(false);
             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);
+            const unit = this.activeUnit;
+            const newUnitValue = decrementTimeUnitValue(unit, this.getUnitValue(unit));
+            this.setInvalid(false);
             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);
-                });
-            }
+            const unit = this.activeUnit;
+            const isPartiallyEntered = this.#selectedUnit === unit && this.#digitIndex > 0;
+            this.setInvalid(false);
+            this.clear(unit);
+            this.select(isPartiallyEntered ? unit : this.previousUnit(unit));
         }
     }
     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");
-                }
+            const unit = this.activeUnit;
+            const { length, max } = unitSpec[unit];
+            const digitIndex = this.#selectedUnit === unit && this.#digitIndex < length ? this.#digitIndex : 0;
+            const maxFirstDigit = Math.floor(max / 10 ** (length - 1));
+            let newUnitValue;
+            let nextDigitIndex;
+            if (0 === digitIndex && parseInt(key) > maxFirstDigit) {
+                newUnitValue = key.padStart(length, "0");
+                nextDigitIndex = length;
+            } else {
+                const unitValue = this.getUnitValue(unit);
+                const head = unitValue.slice(0, digitIndex).concat(key);
+                const overwritten = head.concat(unitValue.slice(digitIndex + 1));
+                newUnitValue = isValidUnitValue(unit, overwritten) ? overwritten : head.padEnd(length, "0");
+                nextDigitIndex = digitIndex + 1;
+            }
+            if (!isValidUnitValue(unit, newUnitValue)) {
+                this.setInvalid(true);
+                this.select(unit, digitIndex);
+                return;
             }
+            this.setInvalid(false);
+            this.setUnitValue(unit, newUnitValue);
+            if (nextDigitIndex === length) this.select(this.nextUnit(unit));
+            else this.select(unit, nextDigitIndex);
         }
     }
     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 {
+            return {
                 end: selectionEnd,
                 start: selectionStart
             };
         }
-        throw Error("[MasketInput] selection referenced, but no input");
+        throw Error("[MaskedInput] 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));
-            }
+            const { start, end } = this.getSelection();
+            if (null === start) this.selectFirst();
+            else 0 === start && end === this.length || this.select(this.getUnitAtCursorPos(start));
         }
     }
     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");
+            const { selectionStart } = this.#input;
+            if (null !== selectionStart) this.select(this.getUnitAtCursorPos(selectionStart));
         }
     }
     focus = ()=>{
         if (this.#input) {
             this.#isFocused = true;
             requestAnimationFrame(()=>{
-                this.select("hours");
+                this.selectFirst();
             });
         }
     };
@@ -282,4 +302,4 @@ class MaskedInput extends EventEmitter {
         this.#isFocused = false;
     };
 }
-export { MaskedInput };
+export { MaskedInput, invalidClassName };

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

@@ -1,25 +1,48 @@
 const css = `
-.salt-density-high .vuuTimeInput {
-  --time-input-width: 60px;
-}
-
-.salt-density-medium .vuuTimeInput {
-  --time-input-width: 70px;
-}
+.vuuTimeInput-container {
+  --time-input-border: var(--vuuTimeInput-borderWidth, 1px);
+  --time-input-padding: var(--vuuTimeInput-paddingInline, var(--salt-spacing-50));
+  font-family: var(--salt-typography-fontFamily);
+  font-size: var(--vuuTimeInput-fontSize, var(--salt-text-fontSize));
+  font-variant-numeric: tabular-nums;
+  width: fit-content;
+  display: inline-grid;
+
+  &:before, &:after {
+    border: 0 solid #0000;
+    border-inline-width: var(--time-input-border);
+    box-sizing: content-box;
+    height: 0;
+    max-width: calc(var(--vuuTimeInput-width, 10000px) - 1px);
+    padding-inline: var(--time-input-padding);
+    visibility: hidden;
+    white-space: pre;
+    grid-area: 1 / 1;
+    padding-inline-end: calc(var(--time-input-padding) + 1px);
+  }
 
-.salt-density-low .vuuTimeInput {
-  --time-input-width: 80px;
-}
+  &:before {
+    content: attr(data-placeholder);
+  }
 
-.salt-density-touch .vuuTimeInput {
-  --time-input-width: 90px;
+  &:after {
+    content: attr(data-sample-value);
+  }
 }
 
 .vuuTimeInput {
   background: var(--vuuTimeInput-background, inherit);
-  font-family: var(--salt-typography-fontFamily);
-  width: var(--vuuTimeInput-width, var(--time-input-width));
-  border-width: 1px;
+  border-width: var(--time-input-border);
+  box-sizing: content-box;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: inherit;
+  height: calc(var(--vuuTimeInput-height, var(--salt-size-base)) - 2 *
+      var(--time-input-border));
+  min-width: calc(100% - 2 * var(--time-input-padding) - 2 * var(--time-input-border));
+  padding: 0 var(--time-input-padding);
+  width: var(--vuuTimeInput-width, 0px);
+  grid-area: 1 / 1;
 
   &:focus::-webkit-input-placeholder {
     color: #0000;
@@ -28,10 +51,10 @@ const css = `
   &:focus {
     outline: var(--vuuTimeInput-outline, var(--salt-focused-outline));
   }
-}
 
-.invalid {
-  border-color: red;
+  &.vuuTimeInput-invalid {
+    border-color: var(--vuuTimeInput-invalid-borderColor, var(--salt-status-error-borderColor, red));
+  }
 }