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

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

@@ -1,11 +1,232 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const dialog = require('./dialog-34244fe1.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+function readDOM(callback) {
+    index.readTask(callback);
+}
+function getBoundingClientRect(el) {
+    return el.getBoundingClientRect();
+}
+function getComputedStyle(el) {
+    return window.getComputedStyle(el);
+}
 
+const dialogCss = () => `:host{--backdrop-color:rgba(0,0,0,0.4);--z-index:var(--vertex-ui-dialog-layer)}.hidden>.dialog{opacity:0;width:0;height:0;visibility:hidden}.hidden{pointer-events:none;display:none}.close{margin-left:auto}.shown{display:flex;justify-content:center;align-items:center}.header{width:100%;display:flex;font-size:1.125rem;height:2rem;margin-bottom:1rem}.body{position:relative;width:100%;height:100%}.dialog-backdrop{position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:auto;background-color:var(--backdrop-color);padding:2rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.dialog{background-color:var(--vertex-ui-white);position:absolute;align-items:center;color:var(--vertex-ui-neutral-800);font-family:var(--vertex-ui-font-family);overflow:hidden}.dialog.no-select{user-select:none}.overlay{border:1px solid var(--vertex-ui-neutral-300);border-radius:6px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);display:flex}.overlay.resizable{min-height:var(--min-height, var(--vertex-ui-min-dialog-height))}.fullscreen{height:100vh;width:100vw}.contents{display:flex;position:relative;flex-direction:column;padding:1.5rem;width:100%;height:100%;box-sizing:border-box}.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}.footer{display:flex}.resize{cursor:nwse-resize;position:absolute;bottom:0.125rem;right:0.125rem}.resize-cursor{cursor:nwse-resize}`;
 
+const Dialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.backdropClick = index.createEvent(this, "backdropClick");
+        this.closed = index.createEvent(this, "closed");
+        /**
+         * Whether this dialog's content is visible.
+         */
+        this.open = false;
+        /**
+         * Whether this dialog should be full screen
+         */
+        this.fullscreen = false;
+        /**
+         * Whether this dialog can be resized.
+         */
+        this.resizable = false;
+        this.isResizing = false;
+        this.handleKeyDown = (_) => {
+            if (this.open) {
+                this.open = false;
+            }
+        };
+        this.handlePointerDown = (e) => {
+            this.isResizing = true;
+            readDOM(() => {
+                if (this.dialogElement != null) {
+                    const boundingRect = getBoundingClientRect(this.dialogElement);
+                    this.initialDialogBoundingRect = boundingRect;
+                    this.lastPointerPosition = {
+                        x: boundingRect.right,
+                        y: boundingRect.bottom,
+                    };
+                }
+            });
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerup', this.handlePointerUp);
+        };
+        this.handlePointerMove = (e) => {
+            if (this.lastPointerPosition != null &&
+                this.initialDialogBoundingRect != null &&
+                this.width != null &&
+                this.height != null) {
+                const diffX = e.clientX - this.lastPointerPosition.x;
+                const diffY = e.clientY - this.lastPointerPosition.y;
+                const expectedWidth = this.width + diffX * 2;
+                const expectedHeight = this.height + diffY * 2;
+                this.width = this.constrainDimension(expectedWidth, this.getMinWidth(), this.getMaxWidth());
+                this.height = this.constrainDimension(expectedHeight, this.getMinHeight(), this.getMaxHeight());
+                this.lastPointerPosition = {
+                    x: this.constrainX(e.clientX, this.width, this.initialDialogBoundingRect),
+                    y: this.constrainY(e.clientY, this.height, this.initialDialogBoundingRect),
+                };
+            }
+        };
+        this.handlePointerUp = (e) => {
+            this.lastPointerPosition = undefined;
+            this.initialDialogBoundingRect = undefined;
+            this.isResizing = false;
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+        };
+        this.constrainDimension = (value, min, max) => {
+            return Math.min(Math.max(value, min), max);
+        };
+        this.constrainX = (x, width, bounds) => {
+            if (width <= this.getMinWidth()) {
+                return bounds.right;
+            }
+            else if (width >= this.getMinHeight()) {
+                return bounds.right + (width - bounds.width) / 2;
+            }
+            return x;
+        };
+        this.constrainY = (y, height, bounds) => {
+            if (height <= this.getMinHeight()) {
+                return bounds.bottom;
+            }
+            else if (height >= this.getMaxHeight()) {
+                return bounds.bottom + (height - bounds.height) / 2;
+            }
+            return y;
+        };
+        this.getMaxWidth = () => {
+            var _a;
+            return (_a = this.maxWidth) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
+        };
+        this.getMaxHeight = () => {
+            var _a;
+            return (_a = this.maxHeight) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
+        };
+        this.getMinWidth = () => {
+            var _a;
+            return (_a = this.minWidth) !== null && _a !== void 0 ? _a : Number.NEGATIVE_INFINITY;
+        };
+        this.getMinHeight = () => {
+            var _a;
+            return (_a = this.minHeight) !== null && _a !== void 0 ? _a : Number.NEGATIVE_INFINITY;
+        };
+        this.resize = () => {
+            readDOM(() => {
+                if (this.backdropElement != null) {
+                    const styles = getComputedStyle(this.backdropElement);
+                    const boundaryPadding = parseFloat(styles.padding);
+                    this.boundaryPadding = isNaN(boundaryPadding) ? 0 : boundaryPadding;
+                    this.maxHeight = window.innerHeight - this.boundaryPadding * 2;
+                    this.maxWidth = window.innerWidth - this.boundaryPadding * 2;
+                    this.width =
+                        this.width != null ? Math.min(this.maxWidth, this.width) : undefined;
+                    this.height =
+                        this.height != null
+                            ? Math.min(this.maxHeight, this.height)
+                            : undefined;
+                }
+            });
+        };
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.mutationObserver = new MutationObserver(this.resize);
+        this.resizeObserver = new ResizeObserver(this.resize);
+    }
+    componentDidLoad() {
+        window.addEventListener('resize', this.resize);
+        this.mutationObserver.observe(this.hostEl, {
+            attributes: true,
+            attributeFilter: ['style'],
+        });
+        this.resizeObserver.observe(this.hostEl);
+    }
+    componentWillRender() {
+        if (this.open && this.width == null && this.height == null) {
+            readDOM(() => {
+                if (this.dialogElement != null) {
+                    const boundingRect = getBoundingClientRect(this.dialogElement);
+                    this.minWidth = boundingRect.width;
+                    this.minHeight = boundingRect.height;
+                    this.width = this.minWidth;
+                    this.height = this.minHeight;
+                    this.resize();
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.width = undefined;
+        this.height = undefined;
+        this.lastPointerPosition = undefined;
+        this.isResizing = false;
+    }
+    clearComputedValues() {
+        this.width = undefined;
+        this.height = undefined;
+        this.minWidth = undefined;
+        this.minHeight = undefined;
+        this.maxWidth = undefined;
+        this.maxHeight = undefined;
+    }
+    updateOpened(open) {
+        if (!open) {
+            this.closed.emit();
+        }
+    }
+    keyDownListener(ev) {
+        if (this.open && ev.key === 'Escape') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = false;
+        }
+    }
+    render() {
+        var _a, _b;
+        const width = this.width != null || this.minWidth != null
+            ? `${(_a = this.width) !== null && _a !== void 0 ? _a : this.minWidth}px`
+            : undefined;
+        const height = this.height != null || this.minHeight != null
+            ? `${(_b = this.height) !== null && _b !== void 0 ? _b : this.minHeight}px`
+            : undefined;
+        return (index.h("div", { key: '1ef2acf3b990a5fd09dec321160613715edca3e5', ref: (el) => {
+                this.backdropElement = el;
+            }, onPointerDown: () => {
+                this.backdropClick.emit();
+            }, class: index$1.classNames('dialog-backdrop', {
+                hidden: !this.open,
+                shown: this.open,
+                'resize-cursor': this.isResizing,
+            }) }, index.h("div", { key: 'b4480007a510623b3c2c846c3edc13bc00d5bd92', ref: (el) => {
+                this.dialogElement = el;
+            }, class: index$1.classNames('dialog', {
+                resizable: this.resizable,
+                fullscreen: this.fullscreen,
+                overlay: !this.fullscreen,
+                'no-select': this.lastPointerPosition != null,
+            }), onPointerDown: (e) => {
+                e.stopPropagation();
+            }, style: this.resizable && !this.fullscreen
+                ? {
+                    width,
+                    height,
+                }
+                : undefined }, index.h("div", { key: 'e86071da621f23a48e8de038743ef3f28cb742eb', class: "contents" }, index.h("slot", { key: '5b1e57efb738ce4ed482ea9ca715151ff1869518', name: "header" }, index.h("div", { key: '164e2ca14361edf9c29ff022bbdc6a13d2b521dd', class: "header" }, index.h("slot", { key: '77d4e5175943fea13028b2d390f2161d54e4638d', name: "heading" }), index.h("div", { key: '485a4e1daed18880ff29de617ad2a7eb3615197d', class: "close" }, index.h("slot", { key: '5b8be16c842448f5849350a75b22c169ba872156', name: "close-dialog" }, index.h("vertex-icon-button", { key: '8bb9a49d782e3b9a95f498937bbd1abbf46b6def', onPointerDown: () => {
+                this.open = false;
+            }, iconSize: "sm", iconName: "close" }))))), index.h("div", { key: 'eea72f7e6fdbd6d9d62c7e9b5cbebdb1d25e12e0', class: "body" }, index.h("slot", { key: '389807726eebd276bb26771d395cc619978e2749' })), index.h("div", { key: 'e5f60a0f6cbad1698072307b408583b7660de833', class: "footer" }, index.h("slot", { key: 'bbce680181dfac471412fcf2abf5abb8ea565ec0', name: "footer" }, index.h("slot", { key: '613230f01f3309f2f184bbdc0f5ee43778ed625a', name: "footer-actions" }))), this.resizable && !this.fullscreen && (index.h("vertex-icon", { key: '909e9e0d80b69de4c85a1e6c2caf352be4635274', class: "resize", onPointerDown: this.handlePointerDown, name: "resize", size: "xs" }))))));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "resizable": [{
+                "clearComputedValues": 0
+            }],
+        "open": [{
+                "updateOpened": 0
+            }]
+    }; }
+};
+Dialog.style = dialogCss();
 
-exports.vertex_dialog = dialog.Dialog;
+exports.vertex_dialog = Dialog;

package/dist/cjs/vertex-draggable-popover.cjs.entry.js

@@ -1,11 +1,84 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const draggablePopover = require('./draggable-popover-125717a7.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const draggablePopoverCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{position:fixed;top:0;left:0;white-space:nowrap;--background-color:var(--vertex-ui-white);--color:var(--vertex-ui-neutral-700);--background-opacity:0.95;--contents-opacity:0.95;--font-family:var(--vertex-ui-font-family);--font-size:var(--vertex-ui-text-base);--drag-icon:all-scroll;--dragging-icon:all-scroll}.container{display:flex;column-gap:0.5rem;padding:0.8125rem 0.5625rem 1rem 0.625rem;background-color:rgb(from var(--background-color) r g b / var(--background-opacity));border-radius:0.5rem;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);color:var(--color);font-family:var(--font-family);font-size:var(--font-size)}.container:not(.dragging) .icon{cursor:var(--drag-icon)}.container.dragging{cursor:var(--dragging-icon)}.container.dragging *{user-select:none}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}.contents{opacity:var(--contents-opacity)}`;
 
+const DraggablePopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.positionChanged = index.createEvent(this, "positionChanged");
+        this.anchorPosition = { x: 0, y: 0 };
+        this.lastPosition = { x: 0, y: 0 };
+        this.dragging = false;
+        this.handlePointerDown = (event) => {
+            this.updateAnchorPosition();
+            this.lastPosition = { x: event.clientX, y: event.clientY };
+            this.dragging = true;
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerup', this.handlePointerUp);
+        };
+        this.handlePointerMove = (event) => {
+            const currentPosition = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            const deltaX = currentPosition.x - this.lastPosition.x;
+            const deltaY = currentPosition.y - this.lastPosition.y;
+            this.anchorPosition = {
+                x: this.anchorPosition.x + deltaX,
+                y: this.anchorPosition.y + deltaY,
+            };
+            this.lastPosition = currentPosition;
+        };
+        this.handlePointerUp = (event) => {
+            this.updateAnchorPosition();
+            this.lastPosition = this.anchorPosition;
+            this.dragging = false;
+            window.removeEventListener('pointermove', this.handlePointerMove);
+            window.removeEventListener('pointerup', this.handlePointerUp);
+        };
+        this.updateAnchorPosition = () => {
+            index.readTask(() => {
+                if (this.containerEl != null) {
+                    const rect = this.containerEl.getBoundingClientRect();
+                    this.anchorPosition = { x: rect.x, y: rect.y };
+                }
+            });
+        };
+    }
+    connectedCallback() {
+        this.updatePosition(this.position);
+    }
+    updatePosition(position) {
+        if (position != null) {
+            this.anchorPosition =
+                typeof position === 'object' ? position : JSON.parse(position);
+            this.lastPosition = this.anchorPosition;
+        }
+    }
+    lastPositionChanged() {
+        this.positionChanged.emit(this.anchorPosition);
+    }
+    render() {
+        return (index.h("vertex-popover", { key: 'bf4bfc7eafe7092daca929534d7c9a35ab942cdc', 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',
+            } }, index.h("div", { key: '4a7219bc0062f115e6a6a69f2540c14c23dea637', ref: (el) => (this.containerEl = el), class: index$1.classNames('container', { dragging: this.dragging }) }, index.h("div", { key: 'aa23859e386574c411da4cc2354e12eda1046655', class: "icon-container" }, index.h("div", { key: '935108affd1127d2250c1998201afa034d58a754', class: "icon", onPointerDown: this.handlePointerDown }, index.h("slot", { key: 'f2ef34f1fc7ff951dd0e9452d8e7180de7f41f93', name: "drag-icon" }, index.h("vertex-icon", { key: 'a8a6e781e4eaaabe6e6220ef314f9231de63fef0', size: "sm", name: "drag-indicator" })))), index.h("div", { key: '75000d2d33a6abed79141e1860fffb5eb0857c7a', class: "contents" }, index.h("slot", { key: '2b8fb48efab87254785a301a0755b0f48db1ee73' })))));
+    }
+    static get watchers() { return {
+        "position": [{
+                "updatePosition": 0
+            }],
+        "lastPosition": [{
+                "lastPositionChanged": 0
+            }]
+    }; }
+};
+DraggablePopover.style = draggablePopoverCss();
 
-
-exports.vertex_draggable_popover = draggablePopover.DraggablePopover;
+exports.vertex_draggable_popover = DraggablePopover;

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

@@ -1,10 +1,38 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
 
-const dropdownMenu = require('./dropdown-menu-5ae03a72.js');
-require('./index-6a92256c.js');
+const DropdownMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuOpened = index.createEvent(this, "menuOpened");
+        this.menuClosed = index.createEvent(this, "menuClosed");
+        /**
+         * Whether this context menu is animated on open
+         * and close.
+         */
+        this.animated = true;
+        /**
+         * Placement of menu relative to the anchor element.
+         */
+        this.placement = 'bottom-end';
+        this.open = false;
+        this.handleClick = this.handleClick.bind(this);
+        this.handleMenuClosed = this.handleMenuClosed.bind(this);
+    }
+    render() {
+        return (index.h("vertex-menu", { key: 'a47155e5da8b418f87738d0488ca9c56ea28d09d', open: this.open, animated: this.animated, placement: this.placement, onMenuClosed: this.handleMenuClosed }, index.h("div", { key: 'ebe641d75858a3bf8cc12cfa8ff0b21e2cfc82bc', slot: "anchor", onClick: this.handleClick }, index.h("slot", { key: '3675c17e3810f9e2237fb90fdccf0e3f3097ffb2', name: "anchor" })), index.h("div", { key: '047cb9f3903d12e13e750d0d92e4fce408361f3b', slot: "header" }, index.h("slot", { key: '2477e7a51df8eef64d8a63e4b6f9b1bfea881676', name: "header" })), index.h("slot", { key: 'd6fbba6304bd53fe761608073406fca3447d6d0b' })));
+    }
+    handleClick(e) {
+        if (!this.open) {
+            this.open = true;
+            this.menuOpened.emit(e);
+        }
+    }
+    handleMenuClosed() {
+        this.open = false;
+        this.menuClosed.emit();
+    }
+};
 
-
-
-exports.vertex_dropdown_menu = dropdownMenu.DropdownMenu;
+exports.vertex_dropdown_menu = DropdownMenu;

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

@@ -1,11 +1,106 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const expandable = require('./expandable-b1cd4f0b.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const expandableCss = () => `:host{display:flex}.content{display:flex;flex-direction:column;transition:height 1s}.icon-container{display:flex;flex-direction:column}.icon-button{display:flex;align-items:center}.expanded-content{overflow:hidden}.expanded-content.animated{transition-property:max-height;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transform-origin:top}`;
 
+const Expandable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expand = index.createEvent(this, "expand");
+        this.collapse = index.createEvent(this, "collapse");
+        /**
+         * Whether this popover has its expanded content shown.
+         * This is controlled internally by the component, but can
+         * also be explicitly set.
+         *
+         * Defaults to `false` and requires `expandable` to be
+         * `true`.
+         */
+        this.expanded = false;
+        /**
+         * A property indicating that this content is expanding.
+         * This property is for internal use and styling, and should
+         * not be modified.
+         */
+        this.expanding = false;
+        /**
+         * A property indicating that this content is collapsing.
+         * This property is for internal use and styling, and should
+         * not be modified.
+         */
+        this.collapsing = false;
+        /**
+         * Indicates whether this collapsible is controlled programmatically.
+         * Setting this value will also remove the expand icon, along with the
+         * associated slot.
+         */
+        this.controlled = false;
+        /**
+         * The `VertexExpandableType` for this draggable popover.
+         * Can be set to `header`, `content`, or `none`. Defaults to
+         * `content`.
+         *
+         * `header` will cause the `header` slot to collapse and expand.
+         * `content` will cause the unnamed slot to collapse and expand.
+         */
+        this.expandType = 'content';
+        /**
+         * Whether or not the expand and collapse of this element
+         * is animated.
+         */
+        this.animated = true;
+        this.handleTransitionEnd = () => {
+            this.collapsing = false;
+            this.expanding = false;
+        };
+        this.handleExpand = () => {
+            this.expanded = !this.expanded;
+            if (this.expanded) {
+                this.expanding = true;
+                this.expand.emit();
+            }
+            else {
+                this.collapsing = true;
+                this.collapse.emit();
+            }
+        };
+        this.updateScrollHeight = () => {
+            index.readTask(() => {
+                var _a;
+                const scrollHeight = (_a = this.expandContainer) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+                if (this.contentScrollHeight !== scrollHeight) {
+                    this.contentScrollHeight = scrollHeight;
+                }
+            });
+        };
+        this.getMaxHeight = () => {
+            if (this.expanded) {
+                return `${this.contentScrollHeight}px`;
+            }
+            else if (!this.expanded) {
+                return '0';
+            }
+            return undefined;
+        };
+    }
+    componentDidLoad() {
+        this.updateScrollHeight();
+    }
+    componentDidRender() {
+        this.updateScrollHeight();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a9aab1a71b16e7f7fa4427729d7135a34e594c76' }, index.h("div", { key: 'fe7eef29e31b4969bc0e5ffb41c9c70e34b9d023', class: "content" }, this.expandType === 'content' && index.h("slot", { key: 'ef28e61b319a2a5aba4dbcb722eeea091cac0be0', name: "header" }), index.h("div", { key: '5f090d0bef1e38cfb1e59b568802f1da6f0cd346', class: index$1.classNames('expanded-content', {
+                animated: this.animated,
+            }), ref: (el) => {
+                this.expandContainer = el;
+            }, style: {
+                maxHeight: this.getMaxHeight(),
+            }, onTransitionEnd: this.handleTransitionEnd }, this.expandType === 'header' ? (index.h("slot", { name: "header", onSlotchange: this.updateScrollHeight })) : (index.h("slot", { onSlotchange: this.updateScrollHeight }))), this.expandType === 'header' && index.h("slot", { key: '44552b980a6970f5d6b2e961916c2cdd146fb9c8' })), !this.controlled ? (index.h("div", { class: "icon-container", onClick: this.handleExpand }, index.h("slot", { name: "expand-icon" }, index.h("vertex-icon-button", { class: "icon-button", variant: "plain", iconSize: "sm", iconName: this.expanded ? 'caret-down' : 'caret-up' })))) : (index.h("slot", { name: "expand-icon" }))));
+    }
+};
+Expandable.style = expandableCss();
 
-
-exports.vertex_expandable = expandable.Expandable;
+exports.vertex_expandable = Expandable;

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

@@ -1,10 +1,41 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
 
-const helpTooltip = require('./help-tooltip-f72eccc7.js');
-require('./index-6a92256c.js');
+const helpTooltipCss = () => `.root{margin:var(--padding-4)}.header{margin-bottom:var(--padding-2);font-size:0.95em;font-weight:normal;color:var(--neutral-800)}.body,.learn-more{width:225px;font-size:0.85em;color:var(--neutral-700);line-height:1.2em}.learn-more{margin-top:var(--padding-4);color:var(--blue-700);text-align:right}`;
 
+const HelpTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuOpened = index.createEvent(this, "menuOpened");
+        this.menuClosed = index.createEvent(this, "menuClosed");
+        /**
+         * Whether this context menu is animated on open
+         * and close.
+         */
+        this.animated = true;
+        /**
+         * Placement of menu relative to the anchor element.
+         */
+        this.placement = 'bottom-end';
+        this.open = false;
+        this.handleClick = this.handleClick.bind(this);
+        this.handleMenuClosed = this.handleMenuClosed.bind(this);
+    }
+    render() {
+        return (index.h("vertex-menu", { key: 'b47388e259fcaf705d35bc2c6b93c4bbfd530fe2', open: this.open, animated: this.animated, placement: this.placement, onMenuClosed: this.handleMenuClosed }, index.h("div", { key: '136d2f97a894d036e3a89253519f7d696cd11886', slot: "anchor", onClick: this.handleClick }, index.h("slot", { key: '14f134e4e3038051894cb1b53e964be356c8c25e', name: "anchor" })), index.h("div", { key: '4dfab76f26df46d6224fd485c24258e26dd67954', class: "root" }, index.h("div", { key: 'd3279b16359c7a882fc1a42da3286c586aa0f2af', slot: "header", class: "header" }, index.h("slot", { key: '7d37e800f9053d3dc65e7d6a28a04da5df5d446b', name: "header" })), index.h("div", { key: '9a3547ee8ad7b703496a819f89c4d9fcad814921', class: "body" }, index.h("slot", { key: '503618e2bd54f93f14aa7216b1afeb426302adbc', name: "body" })), index.h("div", { key: '9cfa757250da4653ebadffff579c8c848a3018d7', class: "learn-more" }, index.h("slot", { key: 'a46b653f2fa6fadca1e82bd9ebcfbe39fb8693ca', name: "learnMore" })))));
+    }
+    handleClick(e) {
+        if (!this.open) {
+            this.open = true;
+            this.menuOpened.emit(e);
+        }
+    }
+    handleMenuClosed() {
+        this.open = false;
+        this.menuClosed.emit();
+    }
+};
+HelpTooltip.style = helpTooltipCss();
 
-
-exports.vertex_help_tooltip = helpTooltip.HelpTooltip;
+exports.vertex_help_tooltip = HelpTooltip;

package/dist/cjs/vertex-icon-button.cjs.entry.js

@@ -1,12 +1,63 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
+var iconHelper = require('./icon-helper-ut8vR2Rk.js');
 
-const iconButton = require('./icon-button-9a6314cd.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./icon-helper-b2117772.js');
+const iconButtonCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-200);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900);--icon-margin:0px}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;position:relative;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color)}.container:not(.disabled):not(.plain):not(.inline):hover{box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}`;
 
+const IconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The variant of this <vertex-icon-button>.
+         * Can be "default", "floating", "inline", or "plain" and defaults to "default".
+         *
+         * Setting this to "plain" will disable hover, active, and focus
+         * backgrounds or box shadows.
+         */
+        this.variant = 'default';
+        /**
+         * The color of the icon displayed in this <vertex-icon-button>.
+         * Can be "primary", "secondary", or "default" and defaults to "default", where
+         * default uses the currentColor value.
+         */
+        this.iconColor = 'default';
+        /**
+         * The size of the icon.
+         *
+         * Can be 'xs', 'sm', 'md', or 'lg'.
+         * Defaults to 'md'.
+         *
+         * This can be overridden with the
+         * `--icon-size` CSS variable.
+         */
+        this.iconSize = 'md';
+    }
+    render() {
+        return (index.h(index.Host, { key: '33a7a846f8c94dcbc2ba482751cfaab3388b57c8', onClick: (e) => this.handleClick(e) }, index.h("button", { key: '9103a89a53ba9d228b1564aeb2b14d14d4e0c9d5', ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: index$1.classNames('container', {
+                disabled: this.disabled,
+                floating: this.variant === 'floating',
+                plain: this.variant === 'plain',
+                inline: this.variant === 'inline',
+                primary: this.iconColor === 'primary',
+                secondary: this.iconColor === 'secondary',
+            }) }, index.h("slot", { key: '8e08d632e512569d39719ac2358a36057b68c4fb', name: "left" }), index.h("div", { key: '23596ef1cf1d055e654b6bee8ac3ba5c5ea70240', class: index$1.classNames('icon-button', {
+                xs: this.iconSize === 'xs',
+                sm: this.iconSize === 'sm',
+                md: this.iconSize === 'md',
+                lg: this.iconSize === 'lg',
+            }) }, iconHelper.getSvg(this.iconName), index.h("div", { key: '7bf10a1f1b96e10a0c199b1fcf56a14fe0be4565', class: "badge" }, index.h("slot", { key: '8d4728e6fee66b53364ebe67ef8d91ca3a717768', name: "badge" }))), index.h("slot", { key: 'a3e780fdb7f9e951e556f7493d0bbe437344a053' }))));
+    }
+    handleClick(event) {
+        var _a;
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+};
+IconButton.style = iconButtonCss();
 
-
-exports.vertex_icon_button = iconButton.IconButton;
+exports.vertex_icon_button = IconButton;

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

@@ -1,12 +1,34 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
+var iconHelper = require('./icon-helper-ut8vR2Rk.js');
 
-const icon = require('./icon-ab3e2b83.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./icon-helper-b2117772.js');
+const iconCss = () => `.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon{display:flex;justify-content:center;align-items:center;fill:currentColor}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}svg{position:relative;width:100%}`;
 
+const Icon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The size of the icon.
+         *
+         * Can be 'xs', 'sm', 'md', or 'lg'.
+         * Defaults to 'md'.
+         *
+         * This can be overridden with the
+         * `--icon-size` CSS variable.
+         */
+        this.size = 'md';
+    }
+    render() {
+        return (index.h("div", { key: '4e0872b4c1aef6cfde8cb837d022b1546d08be87', class: "container" }, index.h("div", { key: '6a3e7a4bc21a2b862fc64c7d0f9e6c17b853d0fa', class: index$1.classNames('icon', {
+                xs: this.size === 'xs',
+                sm: this.size === 'sm',
+                md: this.size === 'md',
+                lg: this.size === 'lg',
+            }) }, iconHelper.getSvg(this.name))));
+    }
+};
+Icon.style = iconCss();
 
-
-exports.vertex_icon = icon.Icon;
+exports.vertex_icon = Icon;