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

package/dist/cjs/vertex-menu.cjs.entry.js

@@ -44,20 +44,20 @@ const Menu = class {
         this.addEventListeners();
     }
     render() {
-        return (index.h("vertex-popover", { key: '521d5e3afcd3b7cf06a2ef05c301b89fff74f902', ref: (element) => {
+        return (index.h("vertex-popover", { key: 'da4e0d42641bdb135542d2823c9f1e89bb0512e6', ref: (element) => {
                 this.popoverRef = element;
             }, open: this.open, animated: this.animated, position: this.position, placement: this.placement, backdrop: this.backdrop, flipBehavior: this.fallbackPlacements != null
                 ? {
                     fallbackPlacements: this.fallbackPlacements,
                 }
-                : undefined, ...this.popoverProps }, this.position == null && (index.h("div", { key: '9ff02358a94a3ec32a9396dcb5abfe8e28784661', slot: "anchor" }, index.h("slot", { key: '2cdb02c65c5ae2769f4c6a3976d04fae883692f9', name: "anchor" }))), index.h("div", { key: 'ac4cd4ac711c43de2cb27cd72dd505125f8827c6', onClick: () => {
+                : undefined, ...this.popoverProps }, this.position == null && (index.h("div", { key: '3bb19832194b818c37697a90a9adac721f12feeb', slot: "anchor" }, index.h("slot", { key: '0eeca18d7ef462ccf01abd150df2226a9726113c', name: "anchor" }))), index.h("div", { key: '45e2dbd269605ec5589dbb0444b5db83b6e9a84c', onClick: () => {
                 if (!this.persistent) {
                     this.open = false;
                     this.menuClosed.emit();
                 }
             }, class: index$1.classNames('root', {
                 'has-header': this.headerSlot != null,
-            }) }, index.h("slot", { key: 'fe4cff0ea3ed220882a2e31a56a28eabf3fb60c2', name: "header" }), index.h("slot", { key: '3b0ef7747644f0dc967df16e3945da1b3ca7a233' }))));
+            }) }, index.h("slot", { key: 'b9735d213f7210c60ee21bfdf0728cec70e2a44c', name: "header" }), index.h("slot", { key: 'dea463aa0da1b65096ebbe83fbc133c9d801c750' }))));
     }
     addEventListeners() {
         var _a, _b;

package/dist/cjs/vertex-radio-group.cjs.entry.js

@@ -34,7 +34,7 @@ const RadioGroup = class {
         this.removeEventListeners();
     }
     render() {
-        return (index.h("div", { key: 'e9a877fa0c0d34ff810ba0caff4b31be6ca3f3c3', class: "radio-group" }, index.h("slot", { key: 'a11c500389558db08504d4eb338d3cb94ae785e8' })));
+        return (index.h("div", { key: 'bf43c1747d31a0a2d7b3253ee49723ff73c039a3', class: "radio-group" }, index.h("slot", { key: 'e450eb58457b42ecfb0cda4429bccc9e5df04954' })));
     }
     getVertexRadioButtons() {
         var _a, _b;

package/dist/cjs/vertex-radio.cjs.entry.js

@@ -16,15 +16,15 @@ const Radio = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("label", { key: '9cfcdcc8d4c33bea901c1880c12f24157c67f5a6', class: index$1.classNames('radio', {
+        return (index.h("label", { key: 'aa10aec61650e5add364c5985103b4a1454ab4f6', class: index$1.classNames('radio', {
                 disabled: this.disabled,
-            }) }, index.h("input", { key: '8543fe1dbd8e8b338d155c0f3932b41b51a59a78', disabled: this.disabled, onChange: (event) => {
+            }) }, index.h("input", { key: 'b098d0cdf58d0f5ab5338b018302894088f082be', disabled: this.disabled, onChange: (event) => {
                 const radioValue = event.target;
                 this.valueChanged.emit({
                     checked: radioValue.checked,
                     value: radioValue.value,
                 });
-            }, type: "radio", id: `vertex-radio-${this.name}-${this.value}`, name: this.name, value: this.value, checked: this.checked }), index.h("span", { key: 'e0c333b342cbbf23a94e27925ed4ac1d51800cb6', class: index$1.classNames('checkmark', {
+            }, type: "radio", id: `vertex-radio-${this.name}-${this.value}`, name: this.name, value: this.value, checked: this.checked }), index.h("span", { key: '79ba876704c1027854a2cc6470ff379b7a554fd2', class: index$1.classNames('checkmark', {
                 disabled: this.disabled,
             }) }), this.label));
     }

package/dist/cjs/vertex-resizable.cjs.entry.js

@@ -111,14 +111,14 @@ const Resizable = class {
         const height = this.height < 0 || this.verticalDirection === 'none'
             ? '100%'
             : `${this.height}px`;
-        return (index.h(index.Host, { key: 'df1cfd4b5cff53a97e023bd28b38a895c231d698', style: {
+        return (index.h(index.Host, { key: '53f90484ecf1c01dcfec3fc73751c5b6220ec1a0', style: {
                 width,
                 height,
                 left: this.position === 'relative' ? `${this.left}px` : undefined,
                 top: this.position === 'relative' ? `${this.top}px` : undefined,
-            } }, index.h("div", { key: '98db17c90104701e449ad69b501da48f8e45828a', class: index$1.classNames('container', {
+            } }, index.h("div", { key: '495c3b41b95a98e50b2c136a626217adde53a0e2', class: index$1.classNames('container', {
                 hidden: this.width <= 0 && this.height <= 0,
-            }) }, index.h("div", { key: '1315d54ec1e08bad9a9518093b18f829a6905f0e', class: index$1.classNames('shadow', `hovered-location-${this.dragStartLocation || this.hoveredLocation}`) }), index.h("div", { key: '214344a03339451443a232c5b27dfbbe9a606db0', class: index$1.classNames('handle', 'left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'left'), onPointerEnter: () => this.handlePointerEnter('left'), onPointerLeave: () => this.handlePointerLeave('left') }), index.h("div", { key: '1d115a65f83ceb9b9ed042e456b228f7fb5f27ab', class: index$1.classNames('handle', 'right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'right'), onPointerEnter: () => this.handlePointerEnter('right'), onPointerLeave: () => this.handlePointerLeave('right') }), index.h("div", { key: '2498a3983eb1421ab05ca91b85188a5d2f2e54cd', class: index$1.classNames('handle', 'top-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top'), onPointerEnter: () => this.handlePointerEnter('top'), onPointerLeave: () => this.handlePointerLeave('top') }), index.h("div", { key: 'dfcd9fabf34fdc0ffd03ad473113a89990ff2bb3', class: index$1.classNames('handle', 'bottom-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom'), onPointerEnter: () => this.handlePointerEnter('bottom'), onPointerLeave: () => this.handlePointerLeave('bottom') }), index.h("div", { key: 'fec489510c12be6dd41a482daace2bed04d6f7fe', class: index$1.classNames('handle', 'bottom-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-right'), onPointerEnter: () => this.handlePointerEnter('bottom-right'), onPointerLeave: () => this.handlePointerLeave('bottom-right') }), index.h("div", { key: 'cefd4f2534559032ed262ccab9d3bd022b0f7bd5', class: index$1.classNames('handle', 'bottom-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-left'), onPointerEnter: () => this.handlePointerEnter('bottom-left'), onPointerLeave: () => this.handlePointerLeave('bottom-left') }), index.h("div", { key: '5a890cb805443ca20252b851ac1e593f440c2337', class: index$1.classNames('handle', 'top-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-right'), onPointerEnter: () => this.handlePointerEnter('top-right'), onPointerLeave: () => this.handlePointerLeave('top-right') }), index.h("div", { key: '6d9eb463dc5e53399547139ac8048f31fb016d93', class: index$1.classNames('handle', 'top-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-left'), onPointerEnter: () => this.handlePointerEnter('top-left'), onPointerLeave: () => this.handlePointerLeave('top-left') }), index.h("slot", { key: '78a828ad95fe83e09adf708380b769aeabf8f553' }))));
+            }) }, index.h("div", { key: 'ea0c58ab6ec4b659ed33618a4b840319637b37a5', class: index$1.classNames('shadow', `hovered-location-${this.dragStartLocation || this.hoveredLocation}`) }), index.h("div", { key: 'a10bfa55f1463a2927a1e1585e94aec69a05c5bc', class: index$1.classNames('handle', 'left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'left'), onPointerEnter: () => this.handlePointerEnter('left'), onPointerLeave: () => this.handlePointerLeave('left') }), index.h("div", { key: '705f9f4ff60e7e574d57d2ba0434944dea170375', class: index$1.classNames('handle', 'right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'right'), onPointerEnter: () => this.handlePointerEnter('right'), onPointerLeave: () => this.handlePointerLeave('right') }), index.h("div", { key: '0338d64870553446a7c0f119387816b08bf1562d', class: index$1.classNames('handle', 'top-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top'), onPointerEnter: () => this.handlePointerEnter('top'), onPointerLeave: () => this.handlePointerLeave('top') }), index.h("div", { key: 'acc646db4341c2095bfc891b4b13550c5a95ee6f', class: index$1.classNames('handle', 'bottom-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom'), onPointerEnter: () => this.handlePointerEnter('bottom'), onPointerLeave: () => this.handlePointerLeave('bottom') }), index.h("div", { key: 'a849292148ddd071a96fb7a4cc9a1e20ae9a1eed', class: index$1.classNames('handle', 'bottom-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-right'), onPointerEnter: () => this.handlePointerEnter('bottom-right'), onPointerLeave: () => this.handlePointerLeave('bottom-right') }), index.h("div", { key: '9c64cc2f64ea37406f1504fbb421c3a3d8b49f17', class: index$1.classNames('handle', 'bottom-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'bottom-left'), onPointerEnter: () => this.handlePointerEnter('bottom-left'), onPointerLeave: () => this.handlePointerLeave('bottom-left') }), index.h("div", { key: '56055af84e8cc60e7c1e55c7233996ef6726b25d', class: index$1.classNames('handle', 'top-right-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-right'), onPointerEnter: () => this.handlePointerEnter('top-right'), onPointerLeave: () => this.handlePointerLeave('top-right') }), index.h("div", { key: '11cde0ae8a9dd6d5736d36a98db527856bee3718', class: index$1.classNames('handle', 'top-left-handle', `horizontal-direction-${this.horizontalDirection}`, `vertical-direction-${this.verticalDirection}`), onPointerDown: (e) => this.handlePointerDown(e, 'top-left'), onPointerEnter: () => this.handlePointerEnter('top-left'), onPointerLeave: () => this.handlePointerLeave('top-left') }), index.h("slot", { key: 'a4cdf0eb7aecd1d1c6ef5c3b4acb316239f4003c' }))));
     }
     /**
      * @private

package/dist/cjs/vertex-result-list.cjs.entry.js

@@ -257,11 +257,11 @@ const ResultList = class {
         window.removeEventListener('keydown', this.handleKeyDown);
     }
     render() {
-        return (index.h(index.Host, { key: '19ee95cfd94d0a7c5cb88de552db10e328885b89' }, index.h("div", { key: '641cd82464119b2ae3034ffd99ccf421f2113f01', class: index$1.classNames('wrapper', {
+        return (index.h(index.Host, { key: '6188d1a63b42f60db295fe65a9deea1fe147da3b' }, index.h("div", { key: '756cfad6d13a89a25f44fbad6f1b96c4f486f4d9', class: index$1.classNames('wrapper', {
                 hidden: !this.open || this.computedResultHeight == null,
-            }) }, index.h("vertex-popover", { key: '03a0b984e1f4c5f9589fa6c9110944dc095992d2', position: this.position, placement: this.placement, open: this.open, backdrop: false }, index.h("div", { key: 'c62468dd8165a7ff84700ef176c5edf988858358', class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, index.h("div", { key: 'e32beb276dd3857678944a630bb93a24d6467943', class: "results", style: {
+            }) }, index.h("vertex-popover", { key: '3978a50be1c36ffbc2ec76ff65811be26c0b21ac', position: this.position, placement: this.placement, open: this.open, backdrop: false }, index.h("div", { key: '589f43ab056f7dc1e640e8677a163bf1ae630305', class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, index.h("div", { key: '6dee01aa288d92a549d861f5aa475d7457ed7763', class: "results", style: {
                 height: `${this.parsedResults.length * this.resultHeight}px`,
-            } }, index.h("slot", { key: 'e903e3b98d5de9919ca132843408d51a405fa775' }), index.h("slot", { key: '88a1a240932e069a05e3722b4de106b38c83b7e0', name: "result" })))))));
+            } }, index.h("slot", { key: 'b02ec3bba63b4e729a8520358c5d6bb179619d3a' }), index.h("slot", { key: 'c1bcab60e22d29ce3d45beb149771a99d1c957a0', name: "result" })))))));
     }
     handlePointerDown(event) {
         event.preventDefault();

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -438,9 +438,9 @@ const SearchBar = class {
             blank: this.variant === 'blank',
             disabled: this.disabled,
         });
-        return (index.h(index.Host, { key: 'fd044b92cae880ada2e57b6005f6f3ca00f43c4a' }, index.h("div", { key: '9b6cd118e4fd931b851cd211419d3d6bb2fdbb11', class: classes }, index.h("span", { key: 'eb211c24a3d337d6d3cc2cab1af3c8c235e5cc51', class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("vertex-result-list", { key: 'ce85d59e8148a21f80eb81e1b997310955c1600f', position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
+        return (index.h(index.Host, { key: 'cda12a50487bedd9f5a483825fcca3524a274724' }, index.h("div", { key: 'a655eacaddeaaaa78e7ff28d47ca5c4af6104b63', class: classes }, index.h("span", { key: '9026a17696679aad0d5db24f1fac7ca0bf7baae9', class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("vertex-result-list", { key: '0a57da3954e2daa1f8ce2db7c18b4962cc3cebf9', position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
                 this.resultItems != null &&
-                this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, index.h("slot", { key: 'd65d5eb8ed481d57edf7cddd8ad9a2f296aa8b01', name: "results" })), index.h("slot", { key: '504db2422c4ae0318d6a53d4510ae6a8d8b71345', name: "replaced" })));
+                this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, index.h("slot", { key: 'f5d8d17413bbbe37fc42650588dc0ad8cb7f1046', name: "results" })), index.h("slot", { key: '3d0f4af0d912bfbad1671167ecc445130d133b0d', name: "replaced" })));
     }
     handleKeyDown(event) {
         if (this.hasTriggered && this.breakCharacters.includes(event.key)) {

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

@@ -81,22 +81,22 @@ const Select = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: 'e7d997d0bca63def6307e4ecf9af68a4982b705c', class: index$1.classNames('root', {
+        return (index.h("div", { key: '5a50717fd18ea30f6e3de820e48cb411168691c2', class: index$1.classNames('root', {
                 disabled: this.disabled,
             }), ref: (element) => {
                 this.rootRef = element;
-            }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, index.h("div", { key: '32a326a6d566e44105844bc737bf6ff6edcaa7ac', class: index$1.classNames('target', {
+            }, onClick: !this.open && !this.disabled ? this.handleOpen : undefined }, index.h("div", { key: '4519634bd186d9aa97e69a7ab14b63f6f8977bfe', class: index$1.classNames('target', {
                 hidden: this.open,
                 disabled: this.disabled,
-            }) }, index.h("div", { key: '0a820cad9319ef045399db7ba0f605ba570b4bb3', class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), index.h("div", { key: 'f3048ab23ba5071644989eb987aadd0b78185dfa', class: "icon" }, index.h("vertex-icon", { key: '25fe817ad7541aca936d89fdf8d725ccca3c0dfc', name: "chevron-down", size: "sm" }))), index.h("vertex-popover", { key: 'ee766bc71cc7dbda2b31db7d768f77d32aee47bd', position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, index.h("div", { key: 'cca515839ee2e1b237148ccfbe061e8034e9718c', class: index$1.classNames('options', {
+            }) }, index.h("div", { key: 'ca178f215502e97ed007b0639a17749cc6631489', class: "text" }, (_a = this.displayValue) !== null && _a !== void 0 ? _a : this.placeholder), index.h("div", { key: 'b877be02c6266eff0f0ccc3a53cc8fd52a4d8fd6', class: "icon" }, index.h("vertex-icon", { key: 'a6ea92b4162047009069716f8134ccce3bcbe01d', name: "chevron-down", size: "sm" }))), index.h("vertex-popover", { key: '995e7fafb5ed0d13d2fdb247f893107328d51839', position: this.position, open: this.open, animated: this.animated, resizeBehavior: "fixed", onDismissed: this.handleDismiss }, index.h("div", { key: '97b7b92c44e3e67838d7af5229eb63af1ce7e0b9', class: index$1.classNames('options', {
                 hidden: !this.open,
                 visible: this.open,
                 animated: this.animated,
             }), style: {
                 minWidth: this.width != null ? `${this.width}px` : 'var(--select-width)',
-            } }, index.h("div", { key: '2f31c5f29bcccb6cd91c4ecab251d0ca164a425f', class: index$1.classNames('selected-option', {
+            } }, index.h("div", { key: 'f72828e4130d36e1b676dc8d5e20f77e0dfd0fbf', class: index$1.classNames('selected-option', {
                 disabled: this.disabled,
-            }), onClick: this.handleDismiss }, index.h("div", { key: 'e4ed9ef2c767e135b1ee13571c42dc813c6e7518', class: "text" }, this.displayValue || this.placeholder), index.h("div", { key: '5c29be97e3a69d8db6baa785b925bb0c3acc8010', class: "icon" }, index.h("vertex-icon", { key: 'fb0c8fb0e4d4ce7380cd333c2618ec280081273b', name: "chevron-down", size: "sm" }))), index.h("slot", { key: '0c6d345e32ffbe7797f3ad9a3bbdfc8202a91bff' })))));
+            }), onClick: this.handleDismiss }, index.h("div", { key: 'be853735e50657c7df6bc1df83795bb87124f7d2', class: "text" }, this.displayValue || this.placeholder), index.h("div", { key: 'a048b143aaa9a8c938ceec84f7ab8b2e70fb9d01', class: "icon" }, index.h("vertex-icon", { key: 'e1512425016f4ceae7ab2bfc70d8e696b7b1eb4e', name: "chevron-down", size: "sm" }))), index.h("slot", { key: 'ed9259fd525bc5611deedf5fcccb0b1516aeb997' })))));
     }
     handleOpen() {
         var _a, _b;

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

@@ -44,7 +44,7 @@ const Slider = class {
         };
     }
     render() {
-        return (index.h("vertex-tooltip", { key: '4a98a371f6e28f7aad52e615e3adb1212f29822d', disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, index.h("input", { key: '1db05434d27dd3e617c815229db88aa86ecd730d', class: index$1.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: () => {
+        return (index.h("vertex-tooltip", { key: '40efc651c8e5b2c3737afd94310137845edfe2d3', disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, index.h("input", { key: '3af447529105c947d2de1b2fe9f46c77fca789d1', class: index$1.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.
                 dom.blurElement(this.hostEl);

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

@@ -29,7 +29,7 @@ const Spinner = class {
             md: this.size === 'md',
             lg: this.size === 'lg',
         });
-        return (index.h("div", { key: '3e6d1e4807628dd25aabfd77970720a827fc161d', class: classes }, index.h("div", { key: '1b0931d9b8201feee0c8171bb00e9def3034b379' }), index.h("div", { key: 'cce3abd6c5163304ee8f4ce295e33813ee4bd39b' }), index.h("div", { key: 'a5911e890fee609aef540221620170d9f3be4fe1' }), index.h("div", { key: '2e070316931bd6d9aa2d4c7e6d07cc45cb43e611' })));
+        return (index.h("div", { key: '854e83e4d8df98dc07a4348c7a645908ea567a22', class: classes }, index.h("div", { key: 'be2fc05bd10d8b7e40ab20e61b75170c05bea068' }), index.h("div", { key: 'a2893918400d2a49efcb06c14130febc8fdb8cd9' }), index.h("div", { key: '601aa76cb9744cae04cefa9285979c19c2288529' }), index.h("div", { key: 'c631a2c86bf2e76e081b408af2ed5ea72b8ae4af' })));
     }
 };
 Spinner.style = spinnerCss();

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

@@ -15,9 +15,9 @@ const Tab = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'a4ff9afd6d600dde690af676bebbff70d01b4ed5' }, index.h("div", { key: '5603e1e7ff0cbf7a5a8c56b673efd22cfeb61448', class: index$1.classNames('content', {
+        return (index.h(index.Host, { key: '9a79cb06110a5b0ebb3b111b59eec01fc2602bfe' }, index.h("div", { key: '791c5200ceb2ab4cc5feca69203e747b066acb31', class: index$1.classNames('content', {
                 active: this.active,
-            }) }, index.h("slot", { key: '880febf1cc2e9b9d9eca560425675d351d216901' }))));
+            }) }, index.h("slot", { key: 'b6d38e8b00372d4cd70c35e5ac16820104158fa7' }))));
     }
 };
 Tab.style = tabCss();

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

@@ -87,16 +87,16 @@ const Tabs = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7e3444ca371e0971c2f56639cf700269f7bf2f1e' }, index.h("div", { key: 'fdc9e654e6e59f3a21aedbf1229fc43fd07c08a0', class: "wrapper" }, index.h("div", { key: '8142c5c29e90d980186216e9a1cb360fabd4ca78', class: "labels" }, this.labels.map((label) => (index.h("button", { class: index$1.classNames('label', {
+        return (index.h(index.Host, { key: '80e4f05b6b4eb1ef175fdabe1c81e7fce846425a' }, index.h("div", { key: '537a1243a1f531820742a9f48bf60ef8569d296f', class: "wrapper" }, index.h("div", { key: '9b67ec9a84a2024c8873e31c949a58013cd750dd', class: "labels" }, this.labels.map((label) => (index.h("button", { class: index$1.classNames('label', {
                 active: this.active === label,
             }), "data-label": label, ref: (el) => {
                 if (this.active === label) {
                     this.activeButtonEl = el;
                 }
-            }, onClick: () => this.handleLabelClick(label) }, label, index.h("div", { class: "hidden-label-text" }, label)))), index.h("slot", { key: '3fd4ea1b4463dc75e497512298806d2362310cd0', name: "label-header" }), this.activeBounds && (index.h("div", { key: '919270b3ed671b8c1a41f7e697c19604f85fc136', class: "indicator", style: {
+            }, onClick: () => this.handleLabelClick(label) }, label, index.h("div", { class: "hidden-label-text" }, label)))), index.h("slot", { key: '00098a23934cf4134233645609ec905f3c800338', name: "label-header" }), this.activeBounds && (index.h("div", { key: '16f93360b714239dcacb918ffc8e76f3081821d8', class: "indicator", style: {
                 left: `${this.activeBounds.x}px`,
                 width: `${this.activeBounds.width}px`,
-            } }))), index.h("div", { key: '4c11d9bd68cbb1162ca45dd3855e3f4c060399ff', class: "tab-content" }, index.h("slot", { key: '1209610abecfbfc5d3ff92cc40de971fbec8673d', onSlotchange: this.updateTabLabels })))));
+            } }))), index.h("div", { key: 'ac13af6d931540f935485037b8ca8f7ca92ef4db', class: "tab-content" }, index.h("slot", { key: '2ed1a03724f6ea5bb31ffa0481984d78b0e7571f', onSlotchange: this.updateTabLabels })))));
     }
     get hostEl() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -138,7 +138,7 @@ const TextField = class {
                 }
             },
         };
-        return (index.h("div", { key: '461fd5146c65dc7c1887a48e1ba119c9b5131958', class: classes }, index.h("div", { key: '68b5e4d3a6af4dfb7bacada29b7b31499fee5325', class: "txt-slot" }, index.h("slot", { key: '1fb79f18a99ce56f88838ea7e4a17f9318e6c831', name: "left" })), this.multiline ? (index.h("vertex-auto-resize-textarea", { maxRows: this.maxRows, minRows: this.minRows, initialValue: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '' }, index.h("textarea", { ...commonProps, class: index$1.classNames(commonProps.class, 'txt-textarea', classes), rows: this.minRows }))) : (index.h("input", { ...commonProps, type: this.type })), index.h("div", { key: '86e9f3a765be81bddbe6db80758e63cf6f3be1be', class: "txt-slot" }, index.h("slot", { key: '8143e56d2943d988a4439fb26e4450735370cb88', name: "right" }))));
+        return (index.h("div", { key: 'cde475bd6417b9aded2953e16c6fe66184ecc030', class: classes }, index.h("div", { key: '6fa09a869be91d707342919bce27944c4c58480f', class: "txt-slot" }, index.h("slot", { key: '7e64168ae09da286cb6620a17aa8913a8f3f59c2', name: "left" })), this.multiline ? (index.h("vertex-auto-resize-textarea", { maxRows: this.maxRows, minRows: this.minRows, initialValue: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || '' }, index.h("textarea", { ...commonProps, class: index$1.classNames(commonProps.class, 'txt-textarea', classes), rows: this.minRows }))) : (index.h("input", { ...commonProps, type: this.type })), index.h("div", { key: '6c36d810cf87952dcf7b8cc52ecf74ccc552ddd1', class: "txt-slot" }, index.h("slot", { key: '7ab587afc06b86636f83e2885fd657f38ab51bbe', name: "right" }))));
     }
     connectedCallback() {
         if (this.hostElement != null) {

package/dist/cjs/vertex-toast.cjs.entry.js

@@ -59,11 +59,11 @@ const Toast = class {
         }
     }
     render() {
-        return (index.h("vertex-popover", { key: '2f628b74ec3dec91f02fac1815f5d1b12870ab2d', class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, index.h("div", { key: 'c43cdca71f2dba04b1eb59ab3a0e7ba20bd950e3', slot: "anchor", class: index$1.classNames('anchor', this.placement) }), index.h("div", { key: '0839244c1e3e325d9362de508cdc0ebcc59fa755', class: index$1.classNames('toast', {
+        return (index.h("vertex-popover", { key: '47662731345cbe17696dd0095ab7fb5372687ffd', class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, index.h("div", { key: 'e512152c57add591deb56537759137e1afc74c17', slot: "anchor", class: index$1.classNames('anchor', this.placement) }), index.h("div", { key: '0148cb844f9ea329fc940a29dafe698b905bf230', class: index$1.classNames('toast', {
                 hidden: !this.isOpen,
                 warn: this.type === 'warn',
                 error: this.type === 'error',
-            }) }, this.content ? index.h("div", { class: "content" }, this.content) : index.h("slot", null), index.h("div", { key: '6b95eb1f57a5eaeb5987fdb39290cc61662d4c85', class: "actions" }, index.h("slot", { key: '19d40a81a11f9a08771a7084d77d2f634c66d29d', name: "action" }), index.h("vertex-icon-button", { key: '4d19309ba602f162a77f41ac74667594dbe98544', class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
+            }) }, this.content ? index.h("div", { class: "content" }, this.content) : index.h("slot", null), index.h("div", { key: '707645468e3b7c74505d12cf88937d239972f1c9', class: "actions" }, index.h("slot", { key: 'b1ed8c05970b31d9fee349bc4336f8c57ec511dd', name: "action" }), index.h("vertex-icon-button", { key: 'cbdc50ec280679f2bc15140774703851a84a4a03', class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
     }
     handleClose() {
         this.clearCloseTimeout();

package/dist/cjs/vertex-toggle.cjs.entry.js

@@ -32,16 +32,16 @@ const Toggle = class {
                 this.valueChanged.emit(this.checked);
             }
         };
-        return (index.h("button", { key: '4a73be19dfaf30d2d883bebcf2e54e408830a6bb', class: index$1.classNames(this.variant, {
+        return (index.h("button", { key: 'f9bd0fe8a916f065196e88a81626895a8e439406', class: index$1.classNames(this.variant, {
                 checked: this.checked,
                 disabled: this.disabled,
-            }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (index.h("div", { key: '9255fc90b4f4c7888c536fe7d521e8e06d39627a', class: index$1.classNames('checked-content', {
+            }), onClick: flipValue, onSubmit: flipValue }, this.variant === 'check' && (index.h("div", { key: '5b493e4f5f0f92bfa008c93244ae47aed3728650', class: index$1.classNames('checked-content', {
                 checked: this.checked,
                 disabled: this.disabled,
-            }) }, this.checked && index.h("vertex-icon", { key: 'a672019a099ac5111c3028dfce593ba8e975621b', name: "check", size: "md" }))), this.variant === 'switch' && (index.h("div", { key: '5f97ed9dc39b6bdaee0a3b7a102a8397a22be859', class: index$1.classNames('track', {
+            }) }, this.checked && index.h("vertex-icon", { key: '2bd120510b6242b219176be2852db6fb10c7dbe5', name: "check", size: "md" }))), this.variant === 'switch' && (index.h("div", { key: 'f9293427a7420a6f266a477157c802e37f3516af', class: index$1.classNames('track', {
                 disabled: this.disabled,
                 checked: this.checked,
-            }) })), this.variant === 'switch' && (index.h("div", { key: '090a9ac2ecca6d0118d5580ea186697aace6ba44', class: index$1.classNames('handle', {
+            }) })), this.variant === 'switch' && (index.h("div", { key: '7e7409797f2951a698c069e7353abcf42890feda', class: index$1.classNames('handle', {
                 disabled: this.disabled,
                 checked: this.checked,
             }) }))));

package/dist/cjs/vertex-tooltip.cjs.entry.js

@@ -248,11 +248,11 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '52cf61786b9455c308412c74920fa13c2fbf39da' }, index.h("div", { key: 'c80ad2bc646d508cf7a24de7e30d173a0067c166', class: "target", ref: (el) => {
+        return (index.h(index.Host, { key: '3930a26de470834980f7ae4c20aaad2608ae7c30' }, index.h("div", { key: '3629480073cc99477d5b9bca6bfeb52113f8b1c4', class: "target", ref: (el) => {
                 this.targetElement = el;
-            }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, index.h("slot", { key: '30fd8fb5dd907e941dff798976be471f35db7d45' })), index.h("div", { key: '8b136bdf9305bc837c2e159d8d3c6c2543c4422f', class: "content-hidden", ref: (el) => {
+            }, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, index.h("slot", { key: '0188c14cca67998c42b3bd7663129dc3cd282f12' })), index.h("div", { key: '1bc3fef4a7a492f4263870934f3ddc3f0e777316', class: "content-hidden", ref: (el) => {
                 this.contentElement = el;
-            } }, index.h("slot", { key: 'bf2a10df58687e96f3b0da3f8e9b5aa8b3babefa', name: "content", onSlotchange: this.handleContentChange }))));
+            } }, index.h("slot", { key: 'bd0ee15400cc05d17ddfe457fcbf751a90a06aae', name: "content", onSlotchange: this.handleContentChange }))));
     }
     addElement() {
         if (this.targetElement != null) {

package/dist/collection/components/auto-resize-textarea/auto-resize-textarea.js

@@ -42,9 +42,9 @@ export class AutoResizeTextArea {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '781d8197d7aad8d42b9e85d45f0703e673d034af' }, h("textarea", { key: '92538159615ab83cd4c520cbbc18a51635a50005', class: "hidden-text", ref: (el) => {
+        return (h(Host, { key: 'f17e7e16b3a2b07186aaacdee06c878957d8602b' }, h("textarea", { key: 'd7b9f12efd78cebc7e2b9b2b4a41700c01878e0b', class: "hidden-text", ref: (el) => {
                 this.hiddenTextRef = el;
-            } }, this.textValue), h("slot", { key: '97699988d280f3dec9c8ae4c1f822a2ef981adff' })));
+            } }, this.textValue), h("slot", { key: '23a4b3e61a8b61d6d38b05089449c7f1be83fecc' })));
     }
     addEventListener() {
         var _a, _b;

package/dist/collection/components/avatar-group/avatar-group.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AvatarGroup {
     render() {
-        return (h("div", { key: '14156280b58c863112f73250ed035167b2df7a67', class: "root" }, h("div", { key: 'b92808bb9f4e15cdba465e94bc45027901d853e6', class: "base" }, h("slot", { key: '2014fbcd96024c1491482c7fb8c1d34a2f59e1f6', name: "base" })), h("div", { key: '32818c1d98aebd924e06febf5854a23f6a0658a5', class: "top" }, h("slot", { key: 'f48c82328486a0506b77fc041142e24bb164b0f6' }))));
+        return (h("div", { key: '6d4d6f883906bcd715beeeaaaaf0b172480672a1', class: "root" }, h("div", { key: '9d1a996dde7803c3053c63be80a3099637442f43', class: "base" }, h("slot", { key: '29f763070f2d46edcfbc6683f4b3a7efc69edef6', name: "base" })), h("div", { key: '406f3a4822e91ebc9cf97f1bc846d259e7ba9acb', class: "top" }, h("slot", { key: 'd8ddd645047a1bdb7e0239587b1e438f185d5a14' }))));
     }
     static get is() { return "vertex-avatar-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-group/card-group.js

@@ -16,16 +16,16 @@ export class CardGroup {
         this.expanded = false;
     }
     render() {
-        return (h(Host, { key: '206793620f315b52d8122c6adfcb4c5e3e122231' }, h("div", { key: '0e79478fadbb97af5376e36a8308ef32b5e4792f', class: classNames('root', {
+        return (h(Host, { key: '5007d989334605ca58b504634af0bac7286c7c4c' }, h("div", { key: '4e1372afb89a989b44d5d85a41cf7cf09bac43d6', class: classNames('root', {
                 selected: this.selected,
                 hovered: this.hovered,
-            }) }, h("div", { key: '56e1849a8c868107f5e93b9f95a0fd7819026138', class: "content" }, h("slot", { key: '9506a02f059ce4505f7c1159fbf38bbc036e572d', name: "primary" })), h("div", { key: '6edee8403999b2903ce9d2de00fe4ec1776eda70', class: classNames({
+            }) }, h("div", { key: 'e22b861a35ea81e65cbddb8d6f9e80de340c2002', class: "content" }, h("slot", { key: '00c9dfa0eddee6ae95ddd7b1d82fbca2114a1bcb', name: "primary" })), h("div", { key: '770afca2c2f2358b3053f0de4c68da9e69ce7e5f', class: classNames({
                 hidden: !this.selected,
-            }) }, h("slot", { key: 'f7af3fe0c7939575463c56848e68ff06b871b2b5' }), h("div", { key: 'f2bdfb20f44b66e9e426986408c924b703049bed', "data-testid": "expanded-content-wrapper", class: classNames({
+            }) }, h("slot", { key: '5f61f74b77b1fffc392bd9d855e1f0adbd7c842b' }), h("div", { key: 'ee11f39360fa9e6445e5e3cbbee876477f2bed2d', "data-testid": "expanded-content-wrapper", class: classNames({
                 hidden: !this.expanded,
-            }) }, h("slot", { key: '8c7103c364a6d41206522dbb376767958025fb06', name: "expanded-content" })), h("div", { key: 'a45d1ec67212f7b5f382264088d17dcff8f3ce4a', "data-testid": "expanded-target-wrapper", class: classNames({
+            }) }, h("slot", { key: '9539c83df6b4c187df9042644634d355c6a718d8', name: "expanded-content" })), h("div", { key: '6dff562be68839ef8877940b96b89a19a0b19ad9', "data-testid": "expanded-target-wrapper", class: classNames({
                 hidden: this.expanded,
-            }) }, h("div", { key: 'fc62882c03b86b42b991b9f2c9e85ae70aa149c8', class: "expand-target" }, h("slot", { key: 'def517e4fcdb8a4a84c33fa5b238d6fc69e011c3', name: "expand-target" })))), h("div", { key: 'babf3752d2bcd2577d42d235775fc184aa6a3076', class: "action" }, h("slot", { key: '7c60ccb1dc60b1f9ccd0eaf9135b357dd44b63d1', name: "action" }))), h("slot", { key: 'e69a3f530388e947968ae1541a0c4a18d12dc0c1', name: "overlay" })));
+            }) }, h("div", { key: 'b78d2d33af9b3a6c9d87f94a675da9697920032f', class: "expand-target" }, h("slot", { key: '3984c00b1026456afab0ec7fe44a19ed488e6a76', name: "expand-target" })))), h("div", { key: '74bc8f96f90092f57107ed5bde7df5bcf118ecad', class: "action" }, h("slot", { key: '7829db63ce73caf5c28a2ee9fac0e0ff4eb40153', name: "action" }))), h("slot", { key: '34a38723c006bb5ae4566d502f40a7d7ed414416', name: "overlay" })));
     }
     static get is() { return "vertex-card-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.css

@@ -3,13 +3,30 @@
   display: flex;
   align-items: center;
   width: fit-content;
-  border-radius: 16px; 
+  border-radius: 16px;
+}
+
+.root.sm {
+  font-size: var(--vertex-ui-text-sm);
+  padding: 0.33rem;
+  padding-left: 0.25rem;
+  max-height: 0.75rem;
+}
+
+.root.md {
   font-size: var(--vertex-ui-text-base);
   padding: 0.5rem;
   padding-left: 0.25rem;
   max-height: 1rem;
 }
 
+.root.lg {
+  font-size: var(--vertex-ui-text-base);
+  padding: 0.75rem;
+  padding-left: 0.25rem;
+  max-height: 1.25rem;
+}
+
 .filled {
   color: white;
 }
@@ -24,7 +41,7 @@
 
 .filled.chip-secondary {
   color: var(--vertex-ui-neutral-800);
-  background-color: var(--vertex-ui-neutral-300);
+  background-color: var(--vertex-ui-neutral-200);
 }
 
 .filled.chip-primary {
@@ -37,7 +54,7 @@
 }
 
 .outlined.chip-secondary {
-  border: 1px solid var(--vertex-ui-neutral-300);
+  border: 1px solid var(--vertex-ui-neutral-200);
   color: var(--vertex-ui-neutral-700);
 }
 

package/dist/collection/components/chip/chip.js

@@ -12,14 +12,19 @@ export class Chip {
          * Can be "primary" or "secondary" and defaults to "secondary".
          */
         this.color = 'secondary';
+        /**
+         * The size of this <vertex-chip>.
+         * Can be "sm", "md", or "lg" and defaults to "md".
+         */
+        this.size = 'md';
     }
     render() {
-        return (h("div", { key: 'c9df2d4b15261a1b255ff37f793065a184d65dfb', class: classNames('root', {
+        return (h("div", { key: '13af3c5c98810cc30064a2121b0354f40b076753', class: classNames('root', this.size, {
                 filled: this.variant === 'filled',
                 outlined: this.variant === 'outlined',
                 'chip-primary': this.color === 'primary',
                 'chip-secondary': this.color === 'secondary',
-            }) }, h("div", { key: '76c6cd5615f9da5d97acba55dba7b9fc774a1ed5', class: "avatar" }, h("slot", { key: '05aa9d08d135196b04af88d04f6860d1b223415d', name: "avatar" })), h("slot", { key: '8b50b524c6c18cbffc40b0a223fb97b6ff558fab' }), h("slot", { key: '1359aecc0da014c58f5ed2bc6095b2d34f99e5e2', name: "icon" })));
+            }) }, h("div", { key: '41f2150577c1a3e98a9eef89462c8d5c5ffe424d', class: "avatar" }, h("slot", { key: 'b591d3659756e45d7cdc8c91008ccb2cc2bb6068', name: "avatar" })), h("slot", { key: '53ffe1b0ca2b1458abe5c06bbbe2ff330a60857e', name: "icon-start" }), h("slot", { key: '211dce4cf11e822c087403c99ed61d2f0d03f3dd' }), h("slot", { key: 'ef06337811596fa68647638ed24e5bd7b10b9320', name: "icon" })));
     }
     static get is() { return "vertex-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -86,6 +91,32 @@ export class Chip {
                 "reflect": false,
                 "attribute": "color",
                 "defaultValue": "'secondary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ChipSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/vertex-web-ui/vertex-web-ui/packages/ui/src/components/chip/chip.tsx",
+                            "id": "src/components/chip/chip.tsx::ChipSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of this <vertex-chip>.\nCan be \"sm\", \"md\", or \"lg\" and defaults to \"md\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
             }
         };
     }

package/dist/collection/components/click-to-edit-text-field/click-to-edit-text-field.js

@@ -56,7 +56,7 @@ export class ClickToEditTextField {
         this.defaultValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
     }
     render() {
-        return (h("div", { key: 'd6c9d6921060ed1aadaf9f8a86b38cf55094d1f9', class: "click-to-edit" }, h("div", { key: '8c57b870ff66e5a298a36e660c46e6aab774ad45', class: "click-to-edit-text" }, h("vertex-textfield", { key: '37207acc6f39f0ecf8e7d87665638a73b357a750', ref: (element) => {
+        return (h("div", { key: '6d8558d27745f3044667bdb8c68c3ceb9b3a81e9', class: "click-to-edit" }, h("div", { key: '22f95389b5d8222f596a7634ee478f557b0f09fb', class: "click-to-edit-text" }, h("vertex-textfield", { key: '646a1482a96da4cff880b34066afdda6c682333d', ref: (element) => {
                 this.textFieldRef = element;
             }, onInputBlur: this.handleInputBlur, onInputFocus: this.handleInputFocus, onInputInput: this.handleInputInput, onInputChange: this.handleInputChange, disabled: this.disabled, fontSize: this.fontSize, autoFocus: this.autoFocus, placeholder: this.placeholder, multiline: this.multiline, minRows: this.minRows, maxRows: this.maxRows, type: "text", value: this.value, variant: "blank", onTextFieldKeyDown: this.handleKeyDown, "data-testid": "click-to-edit-text-field", hasError: this.hasError })), this.renderIcon()));
     }

package/dist/collection/components/collapsible/collapsible.js

@@ -8,9 +8,9 @@ export class Collapsible {
         this.open = false;
     }
     render() {
-        return (h("vertex-expandable", { key: '6e8ccc6a3ceef9dfbfd64515b35abcfc4095ee36', controlled: true, expanded: this.open }, h("button", { key: '0223887a424477b8cc9c01b18169b94135094338', slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (h("span", null, this.label)) : (h("slot", { name: "label" })), h("div", { key: 'a42dc00b416fa6d62fb3ec4e832875154452a605', class: classNames('collapsible-expand', {
+        return (h("vertex-expandable", { key: 'dfee4af00c1edf239126b18726bad33202f49782', controlled: true, expanded: this.open }, h("button", { key: 'b63386fba1824339e224eefb0286d1202e61ff95', slot: "header", "data-testid": "expand-click-target", class: "collapsible-target", onClick: () => this.setOpen(!this.open), onSubmit: () => this.setOpen(!this.open) }, this.label != null ? (h("span", null, this.label)) : (h("slot", { name: "label" })), h("div", { key: '9ef49e3aa71ce08bc18a89c0bcd98a0f99399a15', class: classNames('collapsible-expand', {
                 rotated: this.open,
-            }) }, h("slot", { key: 'e048381a445b35bdd39a2fea25864e15497f9654', name: "expand-icon" }, h("vertex-icon", { key: '6b19696b80c6386130c9f151bad804fa26ffb347', name: "caret-right" })))), h("div", { key: '0f1198fd37c961e8b86da7ba4e7037d70d6c5d8f', class: "collapsible-content-container" }, h("slot", { key: '0db71de24cc3bcddc11bc6b8a535da3b17b490a4' }))));
+            }) }, h("slot", { key: '3ff29b9ccbc04ce99180bcbafdcd14d71bb0d830', name: "expand-icon" }, h("vertex-icon", { key: 'cb0d4d31705fb59423646752e505bf2ce40c712c', name: "caret-right" })))), h("div", { key: 'a9aa91e2e1b1d6a62a202a211342ea9c22cdccc7', class: "collapsible-content-container" }, h("slot", { key: '6048628b1d191cf1628630f18d5d776ea0327b1c' }))));
     }
     setOpen(open) {
         this.open = open;

package/dist/collection/components/color-circle-picker/color-circle-picker.js

@@ -113,7 +113,7 @@ export class ColorCirclePicker {
         this.labelMap = this.parseJsonProp(newValue);
     }
     render() {
-        return (h(Host, { key: 'b59004b3fd9e0bf28a80bb0481ea2807ea137cad' }, h("div", { key: '7b6498a4aefb2ae0fda2154854d860ef4d711df8', class: classNames('container', {
+        return (h(Host, { key: 'c9dc65075b7ac7c97a75a82c6998468b453197a3' }, h("div", { key: '022144efc42bb62bc0a281005af57f9d6396d707', class: classNames('container', {
                 vertical: this.direction === 'vertical',
             }) }, this.colorArray.map((c, i) => {
             const label = this.labelMap[c];

package/dist/collection/components/color-picker/color-picker.js

@@ -44,7 +44,7 @@ export class ColorPicker {
     }
     render() {
         var _a;
-        return (h(Host, { key: '88b31c336ea401f00f223cfb6665770b29f3c711' }, h("div", { key: 'ac9ce86e39ecbd741279921aa30516643ad48207', class: classNames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { key: '1332bed2d4e57d862a50d1724736f4ddca38fad9', class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { key: 'df8035f1e3ca35d376ca7d6d3a6994a2a5510eca', type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { key: 'caf37bc3d51b427f5965df4c60a6cc7b878712e7', class: classNames('selected-wrapper', this.variant) }, h("div", { key: '8f79f6a2f1c71a2857f0679099ad02443bd92d9d', class: "selected", title: this.value }, h("vertex-color-swatch", { key: '78740fb1826e06fa370889ff6c8c0ec3a3428f3d', class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { key: '83134302cf540ebb134171ee8b24c7300dcb360a', name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { key: '1387e7cef5ac7c9cf91c792376b2062c8d52b41e', class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'f620697f4296232560923e5b72fbb5625588e3e0', d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { key: '9df94ff8660ef30d02d0a545cb44ee15ca04a9c1', class: "text-wrapper" }, h("div", { key: '5cc516c55bc4800be318a3832332e7dc2111aa63', class: "hidden-text" }, "#FFFFFF"), h("div", { key: '8fdf4e46cc4da0ae138fcb2321cf7865b38e878a', class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { key: 'a5ad876e6ecb96c912cac49caf1c33cadb871bc1', class: "right-gutter" }, h("slot", { key: 'e4402a6bb8c182ff7979897ae77538e303767ae6', name: "right-gutter" }))))));
+        return (h(Host, { key: '667b520f56cf716dfa31f40c951d26ac5dcab26a' }, h("div", { key: 'd2f7e8680a984699bc73dbf518ff84834c5ed96e', class: classNames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { key: 'a39925f58bb531587bbfae72acec44782060085e', class: classNames('color-picker', { disabled: this.disabled }) }, h("input", { key: 'ecb2793caeec10f84918fc859164eaaf976e96f3', type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { key: '6a59152ef20f75dc9096ba21800889651f1af0ce', class: classNames('selected-wrapper', this.variant) }, h("div", { key: 'c38ee8cd7246b6fb103c53527d601b2407a69c09', class: "selected", title: this.value }, h("vertex-color-swatch", { key: '7e1927fe4fe1f8d755ef7309fd8d23bb0eacb1c3', class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { key: '0c03489ad2a3065e3d1807a99c7fa7cc09c4d02b', name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { key: '129e5ade5aeeda9298317bb554367f39d9d27a45', class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'dfa5366828457b54b526142764e9f95567b50e3e', d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { key: 'd47a9a6bc8fe494dbed0706e662668e27f430d56', class: "text-wrapper" }, h("div", { key: 'd2d8b6646ae4e39e9a9589fcaa1e8b8b24af2d72', class: "hidden-text" }, "#FFFFFF"), h("div", { key: '3d040137786c44645f5543c8bf776330805e4f43', class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { key: 'c63b7e6017c44800fe098357a7aeb410c7a24193', class: "right-gutter" }, h("slot", { key: 'aea2733eca5376dd7a3181be8be3d7575cfdbc3d', name: "right-gutter" }))))));
     }
     getDisplayedValue() {
         var _a;

package/dist/collection/components/color-swatch/color-swatch.js

@@ -69,7 +69,7 @@ export class ColorSwatch {
         this.darkened = this.adjustColor(this.color, newPercentage);
     }
     render() {
-        return (h(Host, { key: 'e59b4d55aae6299c1a1c1980a1051d33bdddfd33' }, h("div", { key: '9c0444df12194b3107532c6bd56da84eb99c7062', class: classNames('root', this.variant, this.size), style: this.getThemeColors() }, h("div", { key: '22c8a26764ca64206a80dbc4b09d6fd3ea42e1aa', class: "overlay" }, h("slot", { key: '32cae671003f5f0d7d06c9495a41e0be6750510a', name: "overlay" })))));
+        return (h(Host, { key: '557b04744d9b740ad9dbe172a7749646cf43e967' }, h("div", { key: '7e6804674d6e6837368efe29d0e3a9befb916a9e', class: classNames('root', this.variant, this.size), style: this.getThemeColors() }, h("div", { key: '07af668d69a584361134a06dfdf7cd191b2155a4', class: "overlay" }, h("slot", { key: '1d3dd9a7f910318efdb0f6c060224769403b9a6f', name: "overlay" })))));
     }
     getThemeColors() {
         const supplementalColor = this.getSupplementalColor();

package/dist/collection/components/context-menu/context-menu.js

@@ -36,13 +36,13 @@ export class ContextMenu {
         }
     }
     render() {
-        return (h("vertex-menu", { key: '93a42bf872d87dc043ab09f841d30f3923fd72b5', open: this.open, animated: this.animated, position: this.position, fallbackPlacements: [
+        return (h("vertex-menu", { key: '3861963ca564cc7f6bc8c5522873f9a4303bfcdc', open: this.open, animated: this.animated, position: this.position, fallbackPlacements: [
                 'bottom-end',
                 'top-start',
                 'top-end',
                 'right',
                 'left',
-            ], onMenuClosed: this.handleMenuClosed }, h("slot", { key: '0845aa6e6e8f24ed2f48d38cd1844eed0a28ad70' })));
+            ], onMenuClosed: this.handleMenuClosed }, h("slot", { key: 'bc3d8f701a3c770138511bc79730b3aeacdad70c' })));
     }
     addEventListeners(targetSelector) {
         this.target =

package/dist/collection/components/dialog/dialog.js

@@ -174,7 +174,7 @@ export class Dialog {
         const height = this.height != null || this.minHeight != null
             ? `${(_b = this.height) !== null && _b !== void 0 ? _b : this.minHeight}px`
             : undefined;
-        return (h("div", { key: '1ef2acf3b990a5fd09dec321160613715edca3e5', ref: (el) => {
+        return (h("div", { key: '5612ba06d77f9b286ced2ed6835c58429d96d2f1', ref: (el) => {
                 this.backdropElement = el;
             }, onPointerDown: () => {
                 this.backdropClick.emit();
@@ -182,7 +182,7 @@ export class Dialog {
                 hidden: !this.open,
                 shown: this.open,
                 'resize-cursor': this.isResizing,
-            }) }, h("div", { key: 'b4480007a510623b3c2c846c3edc13bc00d5bd92', ref: (el) => {
+            }) }, h("div", { key: 'e845407a3d1d4c5508f4b9d6d3da3667fbfaa006', ref: (el) => {
                 this.dialogElement = el;
             }, class: classNames('dialog', {
                 resizable: this.resizable,
@@ -196,9 +196,9 @@ export class Dialog {
                     width,
                     height,
                 }
-                : undefined }, h("div", { key: 'e86071da621f23a48e8de038743ef3f28cb742eb', class: "contents" }, h("slot", { key: '5b1e57efb738ce4ed482ea9ca715151ff1869518', name: "header" }, h("div", { key: '164e2ca14361edf9c29ff022bbdc6a13d2b521dd', class: "header" }, h("slot", { key: '77d4e5175943fea13028b2d390f2161d54e4638d', name: "heading" }), h("div", { key: '485a4e1daed18880ff29de617ad2a7eb3615197d', class: "close" }, h("slot", { key: '5b8be16c842448f5849350a75b22c169ba872156', name: "close-dialog" }, h("vertex-icon-button", { key: '8bb9a49d782e3b9a95f498937bbd1abbf46b6def', onPointerDown: () => {
+                : undefined }, h("div", { key: '4298492dfb98a09af8ef09dd8e689d54869438cf', class: "contents" }, h("slot", { key: 'c0ced9930b5acaf4fb4273b4ec88600f36238307', name: "header" }, h("div", { key: '4abb78b4de7d5a5c469b74c1941ccb01e14d5a2b', class: "header" }, h("slot", { key: '6bb137c5f50215ccf953bb54055c4beca33af37c', name: "heading" }), h("div", { key: '8622a60b4ec1a7578e990a791630d161ed2857e7', class: "close" }, h("slot", { key: '4733ea98d76b531b8d67d4d78532c4fd8e94b9a3', name: "close-dialog" }, h("vertex-icon-button", { key: 'a72f79ee5553ff8b358e0d82332766883d75f170', onPointerDown: () => {
                 this.open = false;
-            }, iconSize: "sm", iconName: "close" }))))), h("div", { key: 'eea72f7e6fdbd6d9d62c7e9b5cbebdb1d25e12e0', class: "body" }, h("slot", { key: '389807726eebd276bb26771d395cc619978e2749' })), h("div", { key: 'e5f60a0f6cbad1698072307b408583b7660de833', class: "footer" }, h("slot", { key: 'bbce680181dfac471412fcf2abf5abb8ea565ec0', name: "footer" }, h("slot", { key: '613230f01f3309f2f184bbdc0f5ee43778ed625a', name: "footer-actions" }))), this.resizable && !this.fullscreen && (h("vertex-icon", { key: '909e9e0d80b69de4c85a1e6c2caf352be4635274', class: "resize", onPointerDown: this.handlePointerDown, name: "resize", size: "xs" }))))));
+            }, iconSize: "sm", iconName: "close" }))))), h("div", { key: '98aa57c6611231bcdf967cc5731f62005a9384b2', class: "body" }, h("slot", { key: '0f4cb66883e12728b1ac7defbc3a55a6ae6733a5' })), h("div", { key: '5b7d15d1affa49471ce5449047d99cdb85b2b5c8', class: "footer" }, h("slot", { key: '0ec5b50705ac3099050f355e3fe06f556b7923f0', name: "footer" }, h("slot", { key: '9c34c29256151bf2d6f8218064530f0dbd6430f2', name: "footer-actions" }))), this.resizable && !this.fullscreen && (h("vertex-icon", { key: '8d57ebf57472194dda505af523abf2eeef81a550', class: "resize", onPointerDown: this.handlePointerDown, name: "resize", size: "xs" }))))));
     }
     static get is() { return "vertex-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/draggable-popover/draggable-popover.js

@@ -55,13 +55,13 @@ export class DraggablePopover {
         this.positionChanged.emit(this.anchorPosition);
     }
     render() {
-        return (h("vertex-popover", { key: 'bf4bfc7eafe7092daca929534d7c9a35ab942cdc', position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", updateOnResize: !this.dragging, overflowBehavior: {
+        return (h("vertex-popover", { key: '86c20b3ba5b63eb38f21549573e122ccb8144212', position: this.anchorPosition, boundarySelector: this.boundarySelector, backdrop: false, open: true, resizeBehavior: "fixed", updateOnResize: !this.dragging, overflowBehavior: {
                 altBoundary: true,
                 padding: this.boundaryPadding,
             }, flipBehavior: {
                 fallbackPlacements: [],
                 fallbackStrategy: 'initialPlacement',
-            } }, h("div", { key: '4a7219bc0062f115e6a6a69f2540c14c23dea637', ref: (el) => (this.containerEl = el), class: classNames('container', { dragging: this.dragging }) }, h("div", { key: 'aa23859e386574c411da4cc2354e12eda1046655', class: "icon-container" }, h("div", { key: '935108affd1127d2250c1998201afa034d58a754', class: "icon", onPointerDown: this.handlePointerDown }, h("slot", { key: 'f2ef34f1fc7ff951dd0e9452d8e7180de7f41f93', name: "drag-icon" }, h("vertex-icon", { key: 'a8a6e781e4eaaabe6e6220ef314f9231de63fef0', size: "sm", name: "drag-indicator" })))), h("div", { key: '75000d2d33a6abed79141e1860fffb5eb0857c7a', class: "contents" }, h("slot", { key: '2b8fb48efab87254785a301a0755b0f48db1ee73' })))));
+            } }, h("div", { key: '8fb98d6b8d6d5e87ca073f4b3c63b7d50d6257b8', ref: (el) => (this.containerEl = el), class: classNames('container', { dragging: this.dragging }) }, h("div", { key: 'b16df51174e835c41a07c1f1b73a94455a4e757d', class: "icon-container" }, h("div", { key: '48fd741e3b37abc7ce437ddc35fe704bff14b495', class: "icon", onPointerDown: this.handlePointerDown }, h("slot", { key: 'cb89ddbe45eed5e474dc4fcc9b423381bcbc2db4', name: "drag-icon" }, h("vertex-icon", { key: '0e2d8df939e14b2c9215ceb8b864219bc925bb47', size: "sm", name: "drag-indicator" })))), h("div", { key: '6e125a7c43116749f52c0dbb5cedd763aaa66262', class: "contents" }, h("slot", { key: '091a965249d66f7138faaa53081e200ba26288a1' })))));
     }
     static get is() { return "vertex-draggable-popover"; }
     static get encapsulation() { return "shadow"; }