@vertexvis/ui 0.1.1 → 0.1.2-canary.1

package/dist/components/vertex-select.js

@@ -0,0 +1,200 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, readTask } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './popover.js';
+
+const selectCss = ":host{--select-width:100%;--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:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n    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%),\n    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:0.375rem 0.75rem 0.375rem 0.75rem}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.optionChanged = createEvent(this, "optionChanged", 7);
+    this.removeListeners = [];
+    this.controlled = false;
+    this.value = undefined;
+    this.placeholder = 'Select an option...';
+    this.disabled = false;
+    this.animated = true;
+    this.hideSelected = true;
+    this.open = false;
+    this.position = undefined;
+    this.displayValue = undefined;
+    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.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() {
+    return (h("div", { class: classnames('root', {
+        disabled: this.disabled,
+      }), ref: (element) => {
+        this.rootRef = element;
+      }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, h("div", { class: classnames('target', {
+        hidden: this.open,
+        disabled: this.disabled,
+      }) }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("vertex-popover", { position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, h("div", { 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", { class: classnames('selected-option', {
+        disabled: this.disabled,
+      }), onClick: this.handleDismiss }, h("div", { class: "text" }, this.displayValue || this.placeholder), h("div", { class: "icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))), h("slot", null)))));
+  }
+  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 this; }
+  static get watchers() { return {
+    "value": ["handleUpdateValue"],
+    "displayValue": ["handleUpdateDisplayValue"],
+    "hideSelected": ["handleUpdateDisplayValue"],
+    "placeholder": ["handleUpdateDisplayValue"]
+  }; }
+  static get style() { return selectCss; }
+}, [1, "vertex-select", {
+    "value": [513],
+    "placeholder": [513],
+    "disabled": [516],
+    "animated": [4],
+    "hideSelected": [4, "hide-selected"],
+    "resizeObserverFactory": [16],
+    "open": [32],
+    "position": [32],
+    "displayValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-select", "vertex-icon", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Select);
+      }
+      break;
+    case "vertex-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { Select as S, VertexSelect, defineCustomElement };

package/dist/components/vertex-slider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexSlider extends Components.VertexSlider, HTMLElement {}
+export const VertexSlider: {
+  prototype: VertexSlider;
+  new (): VertexSlider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-slider.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { b as blurElement } from './dom.js';
+import { d as defineCustomElement$3 } from './popover.js';
+import { d as defineCustomElement$2 } from './tooltip.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.valueInput = createEvent(this, "valueInput", 7);
+    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 });
+    };
+    this.min = 0;
+    this.max = 100;
+    this.valueLabelDisplay = 'off';
+    this.step = undefined;
+    this.size = 'sm';
+    this.value = 0;
+    this.disabled = false;
+  }
+  render() {
+    return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { 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 this; }
+  static get style() { return sliderCss; }
+}, [1, "vertex-slider", {
+    "min": [2],
+    "max": [2],
+    "valueLabelDisplay": [1, "value-label-display"],
+    "step": [8],
+    "size": [1],
+    "value": [1026],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-slider", "vertex-popover", "vertex-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-slider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Slider);
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexSlider = Slider;
+const defineCustomElement = defineCustomElement$1;
+
+export { Slider as S, VertexSlider, defineCustomElement };

package/dist/components/vertex-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexSpinner extends Components.VertexSpinner, HTMLElement {}
+export const VertexSpinner: {
+  prototype: VertexSpinner;
+  new (): VertexSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-spinner.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = 'blue';
+    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", { class: classes }, h("div", null), h("div", null), h("div", null), h("div", null)));
+  }
+  static get style() { return spinnerCss; }
+}, [1, "vertex-spinner", {
+    "color": [1],
+    "size": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Spinner);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexSpinner = Spinner;
+const defineCustomElement = defineCustomElement$1;
+
+export { Spinner as S, VertexSpinner, defineCustomElement };

package/dist/components/vertex-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexTab extends Components.VertexTab, HTMLElement {}
+export const VertexTab: {
+  prototype: VertexTab;
+  new (): VertexTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-tab.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tabClick = createEvent(this, "tabClick", 7);
+    this.handleClick = () => {
+      this.tabClick.emit(this.label);
+    };
+    this.label = undefined;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('content', {
+        active: this.active,
+      }) }, h("slot", null))));
+  }
+  static get style() { return tabCss; }
+}, [1, "vertex-tab", {
+    "label": [1],
+    "active": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tab);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexTab = Tab;
+const defineCustomElement = defineCustomElement$1;
+
+export { Tab as T, VertexTab, defineCustomElement };

package/dist/components/vertex-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexTabs extends Components.VertexTabs, HTMLElement {}
+export const VertexTabs: {
+  prototype: VertexTabs;
+  new (): VertexTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-tabs.js

@@ -0,0 +1,133 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { r as readDOM, g as getBoundingClientRect } from './dom.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectedTabChanged = createEvent(this, "selectedTabChanged", 7);
+    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)
+          : [];
+    };
+    this.active = undefined;
+    this.labels = [];
+    this.activeBounds = undefined;
+    this.activeButtonEl = undefined;
+  }
+  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, null, h("div", { class: "wrapper" }, h("div", { 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", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
+        left: `${this.activeBounds.x}px`,
+        width: `${this.activeBounds.width}px`,
+      } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "activeButtonEl": ["handleActiveButtonChange"]
+  }; }
+  static get style() { return tabsCss; }
+}, [1, "vertex-tabs", {
+    "active": [1025],
+    "labels": [32],
+    "activeBounds": [32],
+    "activeButtonEl": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tabs);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexTabs = Tabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { Tabs as T, VertexTabs, defineCustomElement };

package/dist/components/vertex-textfield.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexTextfield extends Components.VertexTextfield, HTMLElement {}
+export const VertexTextfield: {
+  prototype: VertexTextfield;
+  new (): VertexTextfield;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vertex-textfield.js

@@ -0,0 +1,6 @@
+import { T as TextField, d as defineCustomElement$1 } from './text-field.js';
+
+const VertexTextfield = TextField;
+const defineCustomElement = defineCustomElement$1;
+
+export { VertexTextfield, defineCustomElement };

package/dist/components/vertex-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VertexToast extends Components.VertexToast, HTMLElement {}
+export const VertexToast: {
+  prototype: VertexToast;
+  new (): VertexToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;