@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/esm/vertex-select.entry.js

@@ -1,3 +1,184 @@
-export { S as vertex_select } from './select-66bb59f8.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
+import { a as registerInstance, c as createEvent, h, r as readTask, d as getElement } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+
+const selectCss = () => `:host{--select-width:100%;--option-padding:0.375rem 0.75rem 0.375rem 0.75rem;--select-option-white-space:normal;--max-dropdown-height:80vh}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:var(--option-padding)}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),     0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),     0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);max-height:var(--max-dropdown-height);overflow-y:auto}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:var(--option-padding)}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected="true"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}`;
+
+const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
+const Select = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionChanged = createEvent(this, "optionChanged");
+        /**
+         * A placeholder to use when no option has been
+         * selected. Defaults to "Select an option...".
+         */
+        this.placeholder = 'Select an option...';
+        /**
+         * Whether this select is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether this select is animated when opening
+         * or closing.
+         */
+        this.animated = true;
+        /**
+         * Whether this select will omit the currently selected
+         * value in the dropdown list.
+         */
+        this.hideSelected = true;
+        this.open = false;
+        this.removeListeners = [];
+        this.controlled = false;
+        /**
+         * @internal
+         */
+        this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
+        this.handleOpen = this.handleOpen.bind(this);
+        this.handleDismiss = this.handleDismiss.bind(this);
+        this.getBounds = this.getBounds.bind(this);
+    }
+    componentDidLoad() {
+        var _a;
+        this.resizeObserver = this.resizeObserverFactory(() => this.getBounds());
+        if (this.rootRef != null) {
+            this.resizeObserver.observe(this.rootRef);
+        }
+        this.slotElement =
+            ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) || undefined;
+        if (this.value != null) {
+            this.handleUpdateValue(this.value);
+        }
+        else {
+            this.handleUpdateDisplayValue();
+        }
+    }
+    connectedCallback() {
+        window.addEventListener('resize', this.getBounds);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        window.removeEventListener('resize', this.getBounds);
+        this.removeOptionListeners();
+    }
+    handleUpdateValue(value) {
+        if (value != null &&
+            (value !== this.internalValue || this.displayValue == null)) {
+            this.internalValue = value;
+            this.updateDisplayValue(value);
+        }
+        this.controlled = value != null;
+    }
+    handleUpdateDisplayValue() {
+        var _a;
+        this.clearSelectedOptionFlag();
+        if (this.hideSelected) {
+            (_a = this.getSelectedOption()) === null || _a === void 0 ? void 0 : _a.setAttribute('data-selected', 'true');
+        }
+    }
+    render() {
+        var _a;
+        return (h("div", { key: 'e7d997d0bca63def6307e4ecf9af68a4982b705c', class: classNames('root', {
+                disabled: this.disabled,
+            }), ref: (element) => {
+                this.rootRef = element;
+            }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { key: '32a326a6d566e44105844bc737bf6ff6edcaa7ac', class: classNames('target', {
+                hidden: this.open,
+                disabled: this.disabled,
+            }) }, h("div", { key: '0a820cad9319ef045399db7ba0f605ba570b4bb3', class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), h("div", { key: 'f3048ab23ba5071644989eb987aadd0b78185dfa', class: "icon" }, h("vertex-icon", { key: '25fe817ad7541aca936d89fdf8d725ccca3c0dfc', name: "chevron-down", size: "sm" }))), h("vertex-popover", { key: 'ee766bc71cc7dbda2b31db7d768f77d32aee47bd', position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { key: 'cca515839ee2e1b237148ccfbe061e8034e9718c', class: classNames('options', {
+                hidden: !this.open,
+                visible: this.open,
+                animated: this.animated,
+            }), style: {
+                minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
+            } }, h("div", { key: '2f31c5f29bcccb6cd91c4ecab251d0ca164a425f', class: classNames('selected-option', {
+                disabled: this.disabled,
+            }), onClick: this.handleDismiss }, h("div", { key: 'e4ed9ef2c767e135b1ee13571c42dc813c6e7518', class: "text" }, this.displayValue || this.placeholder), h("div", { key: '5c29be97e3a69d8db6baa785b925bb0c3acc8010', class: "icon" }, h("vertex-icon", { key: 'fb0c8fb0e4d4ce7380cd333c2618ec280081273b', name: "chevron-down", size: "sm" }))), h("slot", { key: '0c6d345e32ffbe7797f3ad9a3bbdfc8202a91bff' })))));
+    }
+    handleOpen() {
+        var _a, _b;
+        (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => {
+            const listener = () => {
+                var _a;
+                const updatedValue = e.getAttribute('data-value') || e.innerHTML;
+                const valueChanged = updatedValue !== this.internalValue;
+                this.handleDismiss();
+                if (!this.controlled) {
+                    this.displayValue = e.innerHTML;
+                    this.internalValue = updatedValue;
+                }
+                if (valueChanged) {
+                    (_a = this.optionChanged) === null || _a === void 0 ? void 0 : _a.emit(updatedValue);
+                }
+            };
+            e.addEventListener('click', listener);
+            this.removeListeners = [
+                ...this.removeListeners,
+                () => e.removeEventListener('click', listener),
+            ];
+        });
+        this.open = true;
+    }
+    handleDismiss() {
+        this.removeOptionListeners();
+        this.open = false;
+    }
+    updateDisplayValue(value) {
+        var _a, _b;
+        const option = (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+        this.displayValue = option === null || option === void 0 ? void 0 : option.innerHTML;
+    }
+    removeOptionListeners() {
+        this.removeListeners.forEach((l) => l());
+        this.removeListeners = [];
+    }
+    clearSelectedOptionFlag() {
+        var _a, _b;
+        (_b = (_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).forEach((e) => e.removeAttribute('data-selected'));
+    }
+    getSelectedOption() {
+        var _a, _b, _c;
+        const value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder;
+        return (_c = (_b = this.slotElement) === null || _b === void 0 ? void 0 : _b.assignedElements) === null || _c === void 0 ? void 0 : _c.call(_b).find((e) => e.getAttribute('data-value') === value || e.innerHTML === value);
+    }
+    getBounds() {
+        if (this.getBoundsTimeout != null) {
+            clearTimeout(this.getBoundsTimeout);
+            this.getBoundsTimeout = undefined;
+        }
+        this.getBoundsTimeout = setTimeout(() => {
+            this.getBoundsTimeout = undefined;
+            readTask(() => {
+                var _a;
+                const bounds = (_a = this.rootRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                if (bounds != null) {
+                    const position = {
+                        x: bounds.x,
+                        y: bounds.y,
+                    };
+                    this.position = position;
+                    this.width = bounds.width;
+                }
+            });
+        }, GET_BOUNDS_DEBOUNCE_THRESHOLD);
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "handleUpdateValue": 0
+            }],
+        "displayValue": [{
+                "handleUpdateDisplayValue": 0
+            }],
+        "hideSelected": [{
+                "handleUpdateDisplayValue": 0
+            }],
+        "placeholder": [{
+                "handleUpdateDisplayValue": 0
+            }]
+    }; }
+};
+Select.style = selectCss();
+
+export { Select as vertex_select };

package/dist/esm/vertex-slider.entry.js

@@ -1,4 +1,58 @@
-export { S as vertex_slider } from './slider-3d8545e3.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
-import './dom-9d0f7bf4.js';
+import { a as registerInstance, c as createEvent, h, d as getElement } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+import { b as blurElement } from './dom-Oz9KwTs0.js';
+
+const sliderCss = () => `:host{display:flex;--vertex-slider-track-color:var(--vertex-ui-neutral-400);--vertex-slider-thumb-color:var(--vertex-ui-blue-700)}:host([size="sm"]){height:12px}:host([size="md"]){height:14px}:host([size="lg"]){height:16px}.input{-webkit-appearance:none;width:100%;height:100%;background:transparent;margin:0}.input:not(.disabled){cursor:pointer}.input.sm{height:12px}.input.md{height:14px}.input.lg{height:16px}.input.disabled{opacity:0.5}.tooltip{width:100%}.input::-webkit-slider-runnable-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-moz-range-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-ms-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input:not(.disabled)::-webkit-slider-runnable-track{cursor:pointer}.input:not(.disabled)::-moz-range-track{cursor:pointer}.input:not(.disabled)::-ms-track{cursor:pointer}.input.sm::-webkit-slider-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-moz-range-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-ms-thumb{height:12px;width:12px;margin-top:-5px}.input.md::-webkit-slider-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-moz-range-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-ms-thumb{height:14px;width:14px;margin-top:-6px}.input.lg::-webkit-slider-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-moz-range-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-ms-thumb{height:16px;width:16px;margin-top:-7px}.input::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-moz-range-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-ms-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input:not(.disabled)::-webkit-slider-thumb{cursor:grab}.input:not(.disabled)::-moz-range-thumb{cursor:grab}.input:not(.disabled)::-ms-thumb{cursor:grab}.input::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-moz-range-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-ms-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}`;
+
+const Slider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.valueInput = createEvent(this, "valueInput");
+        /**
+         * The lowest possible value for the slider.
+         */
+        this.min = 0;
+        /**
+         * The maximum possible value for the slider.
+         */
+        this.max = 100;
+        /**
+         * Controls when the value label is displayed. Default off
+         * - auto: the value label will display when the thumb is hovered or focused.
+         * - off will never display.
+         */
+        this.valueLabelDisplay = 'off';
+        this.size = 'sm';
+        /**
+         * The numeric value of the slider.
+         */
+        this.value = 0;
+        /**
+         * Whether this slider is disabled.
+         */
+        this.disabled = false;
+        this.handleChange = (event) => {
+            this.updateValueFromEvent(event);
+            this.valueChange.emit({ value: this.value, nativeEvent: event });
+        };
+        this.handleInput = (event) => {
+            this.updateValueFromEvent(event);
+            this.valueInput.emit({ value: this.value, nativeEvent: event });
+        };
+    }
+    render() {
+        return (h("vertex-tooltip", { key: '4a98a371f6e28f7aad52e615e3adb1212f29822d', disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { key: '1db05434d27dd3e617c815229db88aa86ecd730d', class: classNames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput, onPointerUp: () => {
+                // Blur the slider on pointerup to prevent an issue where pressing
+                // any key on the keyboard would result in a focus state.
+                blurElement(this.hostEl);
+            } })));
+    }
+    updateValueFromEvent(event) {
+        this.value = event.target.valueAsNumber;
+    }
+    get hostEl() { return getElement(this); }
+};
+Slider.style = sliderCss();
+
+export { Slider as vertex_slider };

package/dist/esm/vertex-spinner.entry.js

@@ -1,3 +1,35 @@
-export { S as vertex_spinner } from './spinner-afccea51.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
+import { a as registerInstance, h } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+
+const spinnerCss = () => `.spinner{position:relative;display:flex}.spinner div{position:absolute;display:block;animation:spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-radius:50%;border-style:solid;box-sizing:border-box}.spinner div:nth-child(1){animation-delay:-0.45s}.spinner div:nth-child(2){animation-delay:-0.3s}.spinner div:nth-child(3){animation-delay:-0.15s}.spinner.xs{height:16px;width:16px}.spinner.xs div{border-width:var(--border-width, 1px);height:16px;width:16px;margin:0}.spinner.sm{height:23px;width:23px}.spinner.sm div{border-width:var(--border-width, 3px);height:18px;width:18px;margin:2px}.spinner.md{height:32px;width:32px}.spinner.md div{border-width:var(--border-width, 3px);height:32px;width:32px;margin:2px}.spinner.lg{height:64px;width:64px}.spinner.lg div{border-width:var(--border-width, 6px);height:51px;width:51px;margin:6px}.spinner.blue div{border-color:var(--vertex-ui-blue-700) transparent transparent transparent}.spinner.white div{border-color:var(--vertex-ui-white) transparent transparent transparent}.spinner.grey div{border-color:var(--vertex-ui-neutral-700) transparent transparent transparent}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`;
+
+const Spinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The color of this <vertex-spinner>.
+         * Can be "blue", "white", or "grey", and defaults to "blue"
+         */
+        this.color = 'blue';
+        /**
+         * The size of this <vertex-spinner>.
+         * Can be "xs", "sm", "md", or "lg" and defaults to "lg"
+         */
+        this.size = 'lg';
+    }
+    render() {
+        const classes = classNames('spinner', {
+            blue: this.color === 'blue',
+            white: this.color === 'white',
+            grey: this.color === 'grey',
+            xs: this.size === 'xs',
+            sm: this.size === 'sm',
+            md: this.size === 'md',
+            lg: this.size === 'lg',
+        });
+        return (h("div", { key: '3e6d1e4807628dd25aabfd77970720a827fc161d', class: classes }, h("div", { key: '1b0931d9b8201feee0c8171bb00e9def3034b379' }), h("div", { key: 'cce3abd6c5163304ee8f4ce295e33813ee4bd39b' }), h("div", { key: 'a5911e890fee609aef540221620170d9f3be4fe1' }), h("div", { key: '2e070316931bd6d9aa2d4c7e6d07cc45cb43e611' })));
+    }
+};
+Spinner.style = spinnerCss();
+
+export { Spinner as vertex_spinner };

package/dist/esm/vertex-tab.entry.js

@@ -1,3 +1,23 @@
-export { T as vertex_tab } from './tab-c76332b0.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
+import { a as registerInstance, c as createEvent, h, H as Host } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+
+const tabCss = () => `:host{position:relative;width:100%;height:100%}.content{display:none;height:0px}.content.active{display:flex;width:100%;height:100%}`;
+
+const Tab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabClick = createEvent(this, "tabClick");
+        this.active = false;
+        this.handleClick = () => {
+            this.tabClick.emit(this.label);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'a4ff9afd6d600dde690af676bebbff70d01b4ed5' }, h("div", { key: '5603e1e7ff0cbf7a5a8c56b673efd22cfeb61448', class: classNames('content', {
+                active: this.active,
+            }) }, h("slot", { key: '880febf1cc2e9b9d9eca560425675d351d216901' }))));
+    }
+};
+Tab.style = tabCss();
+
+export { Tab as vertex_tab };

package/dist/esm/vertex-tabs.entry.js

@@ -1,4 +1,108 @@
-export { T as vertex_tabs } from './tabs-e9f6dcbe.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
-import './dom-9d0f7bf4.js';
+import { a as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+import { r as readDOM, g as getBoundingClientRect } from './dom-Oz9KwTs0.js';
+
+function isTabElement(element) {
+    return element.tagName === 'VERTEX-TAB';
+}
+
+const tabsCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex;position:relative;width:100%;height:100%}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;width:100%}.labels{display:flex;position:relative;border-bottom:solid 1px var(--vertex-ui-neutral-300)}.indicator{position:absolute;bottom:0;height:3px;background-color:var(--vertex-ui-blue-700);transition:left 0.2s ease-in-out}.label{position:relative;cursor:pointer;color:var(--vertex-ui-neutral-700);white-space:nowrap;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-md);padding:0.75rem 1.25rem}.label:not(.active):hover{color:var(--vertex-ui-neutral-800)}.label.active{color:var(--vertex-ui-blue-700);font-weight:var(--vertex-ui-font-weight-bold)}.hidden-label-text{font-weight:bold;visibility:hidden;height:0px}.tab-content{display:flex;height:5%;flex-grow:1}`;
+
+const Tabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedTabChanged = createEvent(this, "selectedTabChanged");
+        this.labels = [];
+        this.indicatorInitialized = false;
+        this.handleLabelClick = (label) => {
+            if (this.active != null) {
+                this.updateActiveOnTab(this.active, false);
+            }
+            this.active = label;
+            this.updateActiveOnTab(this.active, true);
+            this.selectedTabChanged.emit(label);
+        };
+        this.updateActiveOnTab = (label, active) => {
+            const activeTab = this.findTabByLabel(label);
+            if (activeTab != null) {
+                activeTab.active = active;
+            }
+        };
+        this.findTabByLabel = (label) => {
+            var _a;
+            const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+            const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+            const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+                ? Array.from(slotAssignedElements[0].children)
+                : undefined;
+            return slotChildren != null
+                ? slotChildren.filter(isTabElement).find((el) => el.label === label)
+                : undefined;
+        };
+        this.updateTabLabels = () => {
+            var _a;
+            const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
+            const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
+            const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
+                ? Array.from(slotAssignedElements[0].children)
+                : undefined;
+            this.labels =
+                slotChildren != null
+                    ? slotChildren.filter(isTabElement).map((t) => t.label)
+                    : [];
+        };
+    }
+    componentWillLoad() {
+        this.updateTabLabels();
+    }
+    componentDidLoad() {
+        if (this.active != null) {
+            this.updateActiveOnTab(this.active, true);
+        }
+        this.indicatorInitialized = false;
+        this.handleActiveButtonChange();
+    }
+    componentDidUpdate() {
+        // Place the indicator if it hasn't been initialized yet
+        if (!this.indicatorInitialized) {
+            this.handleActiveButtonChange();
+        }
+    }
+    handleActiveButtonChange() {
+        const button = this.activeButtonEl;
+        if (button != null) {
+            readDOM(() => {
+                const hostElBounds = getBoundingClientRect(this.hostEl);
+                const activeBounds = getBoundingClientRect(button);
+                this.activeBounds = {
+                    x: activeBounds.x - hostElBounds.x,
+                    width: activeBounds.width,
+                };
+                if (this.activeBounds.width !== 0) {
+                    this.indicatorInitialized = true;
+                }
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '7e3444ca371e0971c2f56639cf700269f7bf2f1e' }, h("div", { key: 'fdc9e654e6e59f3a21aedbf1229fc43fd07c08a0', class: "wrapper" }, h("div", { key: '8142c5c29e90d980186216e9a1cb360fabd4ca78', class: "labels" }, this.labels.map((label) => (h("button", { class: classNames('label', {
+                active: this.active === label,
+            }), "data-label": label, ref: (el) => {
+                if (this.active === label) {
+                    this.activeButtonEl = el;
+                }
+            }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { key: '3fd4ea1b4463dc75e497512298806d2362310cd0', name: "label-header" }), this.activeBounds && (h("div", { key: '919270b3ed671b8c1a41f7e697c19604f85fc136', class: "indicator", style: {
+                left: `${this.activeBounds.x}px`,
+                width: `${this.activeBounds.width}px`,
+            } }))), h("div", { key: '4c11d9bd68cbb1162ca45dd3855e3f4c060399ff', class: "tab-content" }, h("slot", { key: '1209610abecfbfc5d3ff92cc40de971fbec8673d', onSlotchange: this.updateTabLabels })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "activeButtonEl": [{
+                "handleActiveButtonChange": 0
+            }]
+    }; }
+};
+Tabs.style = tabsCss();
+
+export { Tabs as vertex_tabs };

package/dist/esm/vertex-textfield.entry.js

@@ -1,3 +1,149 @@
-export { T as vertex_textfield } from './text-field-32ac877e.js';
-import './index-72f28b71.js';
-import './index-9c609209.js';
+import { a as registerInstance, c as createEvent, h, d as getElement } from './index-C27tS7nl.js';
+import { c as classNames } from './index-Beav1bNT.js';
+
+const TextField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputFocus = createEvent(this, "inputFocus");
+        this.inputBlur = createEvent(this, "inputBlur");
+        this.inputInput = createEvent(this, "inputInput");
+        this.inputChange = createEvent(this, "inputChange");
+        this.textFieldKeyDown = createEvent(this, "textFieldKeyDown");
+        this.inputAutofill = createEvent(this, "inputAutofill");
+        /**
+         * The type of the <input>
+         * Can be "text", "password", or "email" and defaults to "text"
+         */
+        this.type = 'text';
+        /**
+         * The variant of this <vertex-textfield>.
+         * Can be "standard", "filled", or "underlined" and defaults to "standard".
+         */
+        this.variant = 'standard';
+        /**
+         * The size of the text.
+         * Can be "standard," "sm," "md," "lg," "xl," or "2xl" and defaults to "standard".
+         */
+        this.fontSize = 'standard';
+        /**
+         * Whether this input should be displayed as a multiline input.
+         * Rows will have no minimum or maximum by default unless `min-rows`
+         * or `max-rows` are set.
+         */
+        this.multiline = false;
+        /**
+         * The minimum number of rows to display. This property has no effect
+         * if `multiline` is not `true`.
+         *
+         * Defaults to `1`.
+         */
+        this.minRows = 1;
+        /**
+         * Value for text input.
+         */
+        this.value = '';
+        this.handleFocus = (ev) => {
+            this.inputFocus.emit(ev);
+        };
+        this.handleBlur = (ev) => {
+            this.inputBlur.emit(ev);
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' && this.nearbyForm != null) {
+                this.nearbyForm.dispatchEvent(new CustomEvent('submit', {
+                    bubbles: true,
+                    cancelable: true,
+                }));
+            }
+            else {
+                this.textFieldKeyDown.emit(ev);
+            }
+        };
+        this.handleChanged = () => {
+            this.inputChange.emit({ value: this.nativeInput.value });
+        };
+        this.handleInput = () => {
+            this.inputInput.emit({ value: this.nativeInput.value });
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.autoFocus) {
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * updateInput is a method to take an input to automatically set the native input to the given input string
+     * @param input
+     */
+    async updateInput(input) {
+        if (this.nativeInput != null) {
+            this.nativeInput.value = input;
+        }
+    }
+    async blurInput() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    async getInputValue() {
+        return this.nativeInput.value;
+    }
+    /**
+     * A method to select all in the input
+     */
+    async selectAll() {
+        this.nativeInput.select();
+    }
+    render() {
+        var _a;
+        const classes = classNames('txt-wrapper', {
+            'txt-wrapper-border': !this.multiline,
+            'txt-standard': this.variant === 'standard',
+            'txt-filled': this.variant === 'filled',
+            'txt-underlined': this.variant === 'underlined',
+            'txt-blank': this.variant === 'blank',
+            'txt-size-standard': this.fontSize === 'standard',
+            'txt-size-sm': this.fontSize === 'sm',
+            'txt-size-md': this.fontSize === 'md',
+            'txt-size-lg': this.fontSize === 'lg',
+            'txt-size-xl': this.fontSize === 'xl',
+            'txt-size-xxl': this.fontSize === 'xxl',
+            disabled: this.disabled,
+            'has-error': this.hasError,
+        });
+        const commonProps = {
+            class: 'txt',
+            'data-testid': 'text-field',
+            name: this.name,
+            ref: (input) => {
+                if (input != null) {
+                    this.nativeInput = input;
+                }
+            },
+            autoComplete: this.autoComplete,
+            autoFocus: this.autoFocus,
+            disabled: this.disabled,
+            placeholder: this.placeholder,
+            value: this.value || '',
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            onKeyDown: this.handleKeyDown,
+            onInput: this.handleInput,
+            onChange: this.handleChanged,
+            onAnimationStart: (ev) => {
+                if (['onAutoFillStart', 'onAutoFillCancel'].includes(ev.animationName)) {
+                    this.inputAutofill.emit({ value: this.nativeInput.value });
+                }
+            },
+        };
+        return (h("div", { key: '461fd5146c65dc7c1887a48e1ba119c9b5131958', class: classes }, h("div", { key: '68b5e4d3a6af4dfb7bacada29b7b31499fee5325', class: "txt-slot" }, h("slot", { key: '1fb79f18a99ce56f88838ea7e4a17f9318e6c831', name: "left" })), this.multiline ? (h("vertex-auto-resize-textarea", { maxRows: this.maxRows, minRows: this.minRows, initialValue: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '' }, h("textarea", { ...commonProps, class: classNames(commonProps.class, 'txt-textarea', classes), rows: this.minRows }))) : (h("input", { ...commonProps, type: this.type })), h("div", { key: '86e9f3a765be81bddbe6db80758e63cf6f3be1be', class: "txt-slot" }, h("slot", { key: '8143e56d2943d988a4439fb26e4450735370cb88', name: "right" }))));
+    }
+    connectedCallback() {
+        if (this.hostElement != null) {
+            this.nearbyForm = this.hostElement.closest('form');
+        }
+    }
+    get hostElement() { return getElement(this); }
+};
+
+export { TextField as vertex_textfield };