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

package/dist/cjs/vertex-auto-resize-textarea.cjs.entry.js

@@ -1,11 +1,138 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var slots = require('./slots-DEdmqbtw.js');
 
-const autoResizeTextarea = require('./auto-resize-textarea-deb05359.js');
-require('./index-6a92256c.js');
-require('./slots-fb5ac359.js');
+function isTextareaElement(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName) === 'TEXTAREA';
+}
 
+const autoResizeTextareaCss = () => `:host{position:relative;width:100%;height:100%;font-size:0}.hidden-text{position:absolute;box-sizing:border-box;top:0;left:0;height:0;width:100%;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;overflow:hidden}`;
 
+const AutoResizeTextArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The minimum number of rows that the textarea will be constrained to.
+         *
+         * Defaults to `1`.
+         */
+        this.minRows = 1;
+        this.previousScrollTop = 0;
+        this.rowCount = 0;
+        this.prepareHiddenTextElement = this.prepareHiddenTextElement.bind(this);
+        this.updateScrollTop = this.updateScrollTop.bind(this);
+        this.computeRowHeights = this.computeRowHeights.bind(this);
+        this.updateValue = this.updateValue.bind(this);
+        this.updatePreviousScrollTop = this.updatePreviousScrollTop.bind(this);
+        this.updateOverflow = this.updateOverflow.bind(this);
+        this.resizeObserver = new ResizeObserver(this.computeRowHeights);
+    }
+    componentWillLoad() {
+        this.computeRowHeights();
+    }
+    componentDidLoad() {
+        this.slottedElement = this.getSlottedTextareaElement();
+        this.textValue = this.initialValue;
+        this.prepareHiddenTextElement();
+        this.computeRowHeights();
+        if (this.slottedElement != null) {
+            this.resizeObserver.observe(this.slottedElement);
+            this.addEventListener();
+        }
+    }
+    componentDidRender() {
+        // This re-computes the number of rows after a rerender has
+        // rendered the current value to the hidden textarea.
+        this.computeRowHeights();
+    }
+    disconnectedCallback() {
+        this.removeEventListener();
+        this.resizeObserver.disconnect();
+    }
+    render() {
+        return (index.h(index.Host, { key: '781d8197d7aad8d42b9e85d45f0703e673d034af' }, index.h("textarea", { key: '92538159615ab83cd4c520cbbc18a51635a50005', class: "hidden-text", ref: (el) => {
+                this.hiddenTextRef = el;
+            } }, this.textValue), index.h("slot", { key: '97699988d280f3dec9c8ae4c1f822a2ef981adff' })));
+    }
+    addEventListener() {
+        var _a, _b;
+        (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', this.updateValue);
+        (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.updatePreviousScrollTop);
+    }
+    removeEventListener() {
+        var _a, _b;
+        (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.updateValue);
+        (_b = this.slottedElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.updatePreviousScrollTop);
+    }
+    updateValue() {
+        if (this.slottedElement != null) {
+            this.textValue = this.slottedElement.value;
+            this.updateOverflow();
+        }
+    }
+    updatePreviousScrollTop() {
+        if (this.slottedElement != null) {
+            this.previousScrollTop = this.slottedElement.scrollTop;
+        }
+    }
+    updateScrollTop() {
+        if (this.slottedElement != null) {
+            // This prevents an issue where the slotted textarea auto-scrolls
+            // to a newline. This is desired behavior if we're capped at the
+            // max rows, but undesired if the component will continue to expand.
+            this.slottedElement.scrollTop =
+                this.maxRows == null || this.rowCount >= this.maxRows
+                    ? this.slottedElement.scrollTop
+                    : this.previousScrollTop;
+        }
+    }
+    computeRowHeights() {
+        this.updateScrollTop();
+        index.readTask(() => {
+            var _a;
+            if (typeof window !== 'undefined' &&
+                this.slottedElement != null &&
+                this.hiddenTextRef != null) {
+                const computedStyles = window.getComputedStyle(this.slottedElement);
+                const lineHeight = Math.floor(parseFloat(computedStyles.lineHeight));
+                const totalRows = Math.floor(this.hiddenTextRef.scrollHeight / lineHeight);
+                this.rowCount = Math.max(this.minRows, Math.min((_a = this.maxRows) !== null && _a !== void 0 ? _a : totalRows, totalRows));
+                this.slottedElement.rows = this.rowCount;
+                this.updateOverflow();
+            }
+        });
+    }
+    prepareHiddenTextElement() {
+        index.readTask(() => {
+            if (typeof window !== 'undefined' &&
+                this.slottedElement != null &&
+                this.hiddenTextRef != null) {
+                const computedStyles = window.getComputedStyle(this.slottedElement);
+                this.hiddenTextRef.setAttribute('style', `line-height: ${computedStyles.lineHeight}; font-size: ${computedStyles.fontSize}; font-family: ${computedStyles.fontFamily}; padding-left: ${computedStyles.paddingLeft}; padding-right: ${computedStyles.paddingRight};`);
+            }
+        });
+    }
+    getSlottedTextareaElement() {
+        const el = slots.getFirstSlottedElement({
+            hostElement: this.hostElement,
+            selector: this.textareaSelector,
+        });
+        if (isTextareaElement(el)) {
+            return el;
+        }
+        else {
+            throw new Error('The vertex-auto-resize-textarea component is only compatible with `HTMLTextAreaElement`s');
+        }
+    }
+    updateOverflow() {
+        var _a;
+        (_a = this.slottedElement) === null || _a === void 0 ? void 0 : _a.setAttribute('style', this.maxRows && this.rowCount >= this.maxRows
+            ? 'overflow-y: auto;'
+            : 'overflow: hidden;');
+    }
+    get hostElement() { return index.getElement(this); }
+};
+AutoResizeTextArea.style = autoResizeTextareaCss();
 
-exports.vertex_auto_resize_textarea = autoResizeTextarea.AutoResizeTextArea;
+exports.vertex_auto_resize_textarea = AutoResizeTextArea;

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

@@ -1,10 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
 
-const avatarGroup = require('./avatar-group-d2af53e4.js');
-require('./index-6a92256c.js');
+const avatarGroupCss = () => `.root{position:relative}.base{position:absolute;left:0;top:0}.top{position:absolute;left:0.5rem;top:0.5rem}`;
 
+const AvatarGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '14156280b58c863112f73250ed035167b2df7a67', class: "root" }, index.h("div", { key: 'b92808bb9f4e15cdba465e94bc45027901d853e6', class: "base" }, index.h("slot", { key: '2014fbcd96024c1491482c7fb8c1d34a2f59e1f6', name: "base" })), index.h("div", { key: '32818c1d98aebd924e06febf5854a23f6a0658a5', class: "top" }, index.h("slot", { key: 'f48c82328486a0506b77fc041142e24bb164b0f6' }))));
+    }
+};
+AvatarGroup.style = avatarGroupCss();
 
-
-exports.vertex_avatar_group = avatarGroup.AvatarGroup;
+exports.vertex_avatar_group = AvatarGroup;

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

@@ -1,11 +1,49 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const avatar = require('./avatar-e69bb687.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const avatarCss = () => `.root{width:1.875rem;height:1.875rem;font-size:var(--vertex-ui-text-xs)}.small{width:1.5rem;height:1.5rem;font-size:var(--vertex-ui-text-t)}.avatar{border-radius:50%;font-weight:var(--vertex-ui-font-weight-medium);font-family:var(--vertex-ui-font-family);color:var(--vertex-ui-blue-800);border:solid 1px var(--vertex-ui-blue-800);background-color:var(--vertex-ui-neutral-050);display:flex;align-items:center;justify-content:center;user-select:none}.avatar.value{color:var(--vertex-ui-white);border:solid 1px var(--vertex-ui-white);background-color:var(--vertex-ui-neutral-500)}.avatar.active{cursor:pointer}.avatar.active:hover{background-color:var(--vertex-ui-neutral-200)}`;
 
+const Avatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether the element triggers an action
+         */
+        this.active = false;
+        /**
+         * The variant of this avatar. Can be either
+         * `default` or `small`, and defaults to `default`.
+         */
+        this.variant = 'default';
+    }
+    render() {
+        if (!this.isValidStringValue(this.firstName) &&
+            !this.isValidStringValue(this.value)) {
+            return index.h("div", null);
+        }
+        return (index.h("div", { class: index$1.classNames('avatar', {
+                root: this.variant === 'default',
+                small: this.variant === 'small',
+                active: this.active,
+                value: !this.isValidStringValue(this.firstName),
+            }) }, this.getDisplayValue()));
+    }
+    isValidStringValue(value) {
+        return value != null && value !== '';
+    }
+    getDisplayValue() {
+        if (this.isValidStringValue(this.firstName)) {
+            return this.isValidStringValue(this.lastName)
+                ? `${this.firstName[0]}${this.lastName[0]}`
+                : this.firstName[0];
+        }
+        else if (this.isValidStringValue(this.value)) {
+            return this.value;
+        }
+    }
+};
+Avatar.style = avatarCss();
 
-
-exports.vertex_avatar = avatar.Avatar;
+exports.vertex_avatar = Avatar;

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

@@ -1,11 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const badge = require('./badge-d39ac1fc.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const badgeCss = () => `.string-overlay{width:100%;line-height:1.0rem;margin-left:5px;margin-right:5px;border-radius:10px;font-size:var(--vertex-ui-text-xxs)}.string-overlay.primary{color:var(--vertex-ui-white);background-color:var(--vertex-ui-blue-600)}.string-overlay.secondary{color:var(--vertex-ui-black);background-color:var(--vertex-ui-neutral-300)}`;
 
+const Badge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The color of the badge displayed in this <vertex-badge>.
+         * Can be "primary" or "secondary", and defaults to "primary."
+         */
+        this.badgeColor = 'primary';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'def0524679b0118268849e77382b43326393314f' }, index.h("div", { key: '32fec737414118a3fbb2f17f9fa8850df07a47ac', class: index$1.classNames('string-overlay', {
+                primary: this.badgeColor === 'primary',
+                secondary: this.badgeColor === 'secondary',
+            }) }, this.badgeText)));
+    }
+};
+Badge.style = badgeCss();
 
-
-exports.vertex_badge = badge.Badge;
+exports.vertex_badge = Badge;

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

@@ -1,12 +1,127 @@
 '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 banner = require('./banner-8325d5ca.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
-require('./icon-helper-b2117772.js');
+const bannerCss = () => `:host{--banner-width:auto;--banner-min-width:25rem;--banner-max-width:35rem;--banner-white-space:normal}.anchor{position:fixed}.top-left{left:24px;top:24px}.top{left:50vw;top:24px}.top-right{right:24px;top:24px}.popover{position:fixed;--open-animation-name:open-fade-in;--close-animation-name:close-fade-out}.actions{display:flex;align-items:center;margin-left:auto}.close{cursor:pointer;margin-left:16px}.close:hover{color:var(--vertex-ui-blue-500)}.banner{position:relative;display:flex;align-items:center;width:var(--banner-width);min-width:var(--banner-min-width);max-width:var(--banner-max-width);padding:16px;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);border-radius:4px;white-space:var(--banner-white-space);user-select:none;filter:drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));border:1px solid var(--vertex-ui-neutral-300)}.banner.hidden{pointer-events:none}.icon{display:flex;margin-right:16px;justify-content:center;align-items:center;fill:currentColor;height:1.25rem;width:1.25rem}.icon-info{color:var(--vertex-ui-blue-600)}.icon-success{color:var(--vertex-ui-green-600)}.icon-warn{color:var(--vertex-ui-orange-600)}.icon-error{color:var(--vertex-ui-red-600)}.message{align-items:center}.info{background-color:var(--vertex-ui-blue-100);color:var(--vertex-ui-neutral-800)}.success{background-color:var(--vertex-ui-green-100);color:var(--vertex-ui-neutral-800)}.warn{background-color:var(--vertex-ui-orange-100);color:var(--vertex-ui-neutral-800)}.error{background-color:var(--vertex-ui-red-100);color:var(--vertex-ui-neutral-800)}`;
 
+const DEFAULT_BANNER_DURATION = 3000;
+const Banner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closed = index.createEvent(this, "closed");
+        /**
+         * The placement of the banner.
+         * This can be any of the following values:
+         *
+         * 'top', 'top-left', or 'top-right'.
+         */
+        this.placement = 'top';
+        /**
+         * The duration this banner will appear for.
+         * Can be set to `0` to display the banner until
+         * explicitly dismissed, and defaults to 3000ms.
+         */
+        this.duration = DEFAULT_BANNER_DURATION;
+        /**
+         * Whether this banner should be animated.
+         * Defaults to true.
+         */
+        this.animated = true;
+        /**
+         * Whether this banner is visible. Updating this
+         * property to `true` will restart the timer to hide
+         * the banner. Defaults to false.
+         */
+        this.open = false;
+        /**
+         * The type of banner. This will change the styling of the banner
+         */
+        this.type = 'info';
+        this.handleClose = this.handleClose.bind(this);
+        this.startCloseTimeout = this.startCloseTimeout.bind(this);
+        this.clearCloseTimeout = this.clearCloseTimeout.bind(this);
+        this.restartCloseTimeout = this.restartCloseTimeout.bind(this);
+    }
+    componentDidLoad() {
+        // This allows the component to render once initially to correctly
+        // place the popover anchor.
+        this.isOpen = this.open;
+        if (this.isOpen) {
+            this.restartCloseTimeout();
+        }
+    }
+    async handleOpenChanged(open) {
+        if (open) {
+            this.restartCloseTimeout();
+            this.isOpen = open;
+        }
+    }
+    render() {
+        return (index.h("vertex-popover", { key: 'eed3f486c1f39b2cdc2783ce72025839576a1aa0', class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, index.h("div", { key: '949d8a468e0c1094b31ea2358ddcb891e291d1cd', slot: "anchor", class: index$1.classNames('anchor', this.placement) }), index.h("div", { key: 'c8519a53fd91ef3efe54b740dce75563c6d8ceaa', class: index$1.classNames('banner', {
+                hidden: !this.isOpen,
+                info: this.type === 'info',
+                success: this.type === 'success',
+                warn: this.type === 'warn',
+                error: this.type === 'error',
+            }) }, index.h("div", { key: '9de8047d8a04268537fa8d3235584062417f8a33', class: index$1.classNames('icon', {
+                'icon-info': this.type === 'info',
+                'icon-success': this.type === 'success',
+                'icon-warn': this.type === 'warn',
+                'icon-error': this.type === 'error',
+            }) }, iconHelper.getSvg(this.getIconName())), this.content ? index.h("div", { class: "message" }, this.content) : index.h("slot", null), index.h("div", { key: 'f52c548da955b3a58c290de4363f3e2d7ce106bf', class: "actions" }, index.h("slot", { key: '3819a570c7050b65df1a77a86133be46526409bf', name: "action" }), index.h("vertex-icon-button", { key: '6c3bcb4deddce591efba1133f4fe9fece7e9149f', class: "close", iconName: "close", iconSize: "sm", variant: "plain", onClick: this.handleClose })))));
+    }
+    handleClose() {
+        this.clearCloseTimeout();
+        this.isOpen = false;
+        this.closed.emit();
+    }
+    startCloseTimeout() {
+        if (this.closeTimeout == null && this.duration > 0) {
+            this.closeTimeout = setTimeout(() => {
+                this.handleClose();
+            }, this.duration);
+        }
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeout != null) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+    }
+    restartCloseTimeout() {
+        this.clearCloseTimeout();
+        this.startCloseTimeout();
+    }
+    getPopoverPlacement() {
+        switch (this.placement) {
+            case 'top-left':
+                return 'bottom-start';
+            case 'top':
+                return 'bottom';
+            case 'top-right':
+                return 'bottom-end';
+        }
+    }
+    getIconName() {
+        switch (this.type) {
+            case 'info':
+                return 'info';
+            case 'success':
+                return 'check-circle';
+            case 'warn':
+                return 'caution';
+            case 'error':
+                return 'error-circle';
+        }
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChanged": 0
+            }]
+    }; }
+};
+Banner.style = bannerCss();
 
-
-exports.vertex_banner = banner.Banner;
+exports.vertex_banner = Banner;

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

@@ -1,11 +1,88 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const button = require('./button-e63d25b1.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const buttonCss = () => `button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=""]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus-visible,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:var(--disabled-cursor)}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:var(--disabled-cursor)}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus-visible{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus-visible,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus-visible,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}`;
 
+const Button = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The color of this <vertex-button>.
+         * Can be "primary", "secondary", or "danger" and defaults to "secondary".
+         */
+        this.color = 'secondary';
+        /**
+         * The variant of this <vertex-button>.
+         * Can be "solid", "text", or "plaintext" and defaults to "solid".
+         *
+         * Setting this value to "plaintext" will cause the "color"
+         * property to be ignored.
+         */
+        this.variant = 'solid';
+        /**
+         * The size of this <vertex-button>.
+         * Can be "sm", "md", or "lg" and defaults to "md".
+         */
+        this.size = 'md';
+        /**
+         * The expansion behavior of this <vertex-button>.
+         * Can be set to "full" to cause the button to stretch to fill
+         * its container, or "block" to cause the button to be sized based
+         * on its contents.
+         * Defaults to "block".
+         */
+        this.expand = 'block';
+    }
+    connectedCallback() {
+        if (this.hostElement != null && this.type === 'submit') {
+            const form = this.hostElement.closest('form');
+            if (form != null) {
+                this.fakeButton = document.createElement('button');
+                this.fakeButton.setAttribute('type', this.type);
+                this.fakeButton.setAttribute('style', 'display: none');
+                this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
+                form.appendChild(this.fakeButton);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.hostElement != null && this.fakeButton != null) {
+            this.fakeButton.remove();
+        }
+    }
+    render() {
+        const classes = index$1.classNames('btn', {
+            'btn-full': this.expand === 'full',
+            'btn-sm': this.size === 'sm',
+            'btn-md': this.size === 'md',
+            'btn-lg': this.size === 'lg',
+            'btn-primary': this.color === 'primary' && this.variant === 'solid',
+            'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
+            'btn-danger': this.color === 'danger' && this.variant === 'solid',
+            'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
+            'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
+            'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
+            'btn-outline-primary': this.color === 'primary' && this.variant === 'outline',
+            'btn-outline-secondary': this.color === 'secondary' && this.variant === 'outline',
+            'btn-outline-danger': this.color === 'danger' && this.variant === 'outline',
+            'btn-plaintext': this.variant === 'plaintext',
+            disabled: this.disabled,
+        });
+        if (this.href != null && this.type != null) {
+            console.warn('The type attribute is ignored when href is provided');
+        }
+        return (index.h(index.Host, { key: '5a545e176e6ecd3613c5ef9c3520bd2f33d189a1', style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (index.h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, index.h("slot", null))) : (index.h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "left" }), index.h("slot", null)))));
+    }
+    handleClick(event) {
+        if (this.fakeButton != null) {
+            event.preventDefault();
+            this.fakeButton.click();
+        }
+    }
+    get hostElement() { return index.getElement(this); }
+};
+Button.style = buttonCss();
 
-
-exports.vertex_button = button.Button;
+exports.vertex_button = Button;

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

@@ -1,11 +1,39 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const cardGroup = require('./card-group-da93e610.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const cardGroupCss = () => `:host{width:100%;height:100%;position:relative;display:inline-block;--selected-color:var(--vertex-ui-blue-700);--hovered-color:var(--vertex-ui-blue-400)}.root{position:relative}.root.selected,.root:hover{box-shadow:0 2px 4px rgba(0, 0, 0, 0.25)}.content{cursor:pointer}.selected::after{content:" ";position:absolute;width:0.1875rem;height:100%;left:0;top:0;background-color:var(--selected-color)}.hovered::after{content:" ";position:absolute;width:0.1875rem;height:100%;left:0;top:0;background-color:var(--hovered-color)}.expand-target{font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-700);cursor:pointer}.expand-target slot::slotted(*){padding:0.5rem 0.5rem 0.5rem 0.75rem}.hidden{display:none}`;
 
+const CardGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether this card should be displayed with a selected state.
+         */
+        this.selected = false;
+        /**
+         * Whether this card should be displayed with a hovered state.
+         */
+        this.hovered = false;
+        /**
+         * Whether this card's expandable content is expanded or not.
+         */
+        this.expanded = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '206793620f315b52d8122c6adfcb4c5e3e122231' }, index.h("div", { key: '0e79478fadbb97af5376e36a8308ef32b5e4792f', class: index$1.classNames('root', {
+                selected: this.selected,
+                hovered: this.hovered,
+            }) }, index.h("div", { key: '56e1849a8c868107f5e93b9f95a0fd7819026138', class: "content" }, index.h("slot", { key: '9506a02f059ce4505f7c1159fbf38bbc036e572d', name: "primary" })), index.h("div", { key: '6edee8403999b2903ce9d2de00fe4ec1776eda70', class: index$1.classNames({
+                hidden: !this.selected,
+            }) }, index.h("slot", { key: 'f7af3fe0c7939575463c56848e68ff06b871b2b5' }), index.h("div", { key: 'f2bdfb20f44b66e9e426986408c924b703049bed', "data-testid": "expanded-content-wrapper", class: index$1.classNames({
+                hidden: !this.expanded,
+            }) }, index.h("slot", { key: '8c7103c364a6d41206522dbb376767958025fb06', name: "expanded-content" })), index.h("div", { key: 'a45d1ec67212f7b5f382264088d17dcff8f3ce4a', "data-testid": "expanded-target-wrapper", class: index$1.classNames({
+                hidden: this.expanded,
+            }) }, index.h("div", { key: 'fc62882c03b86b42b991b9f2c9e85ae70aa149c8', class: "expand-target" }, index.h("slot", { key: 'def517e4fcdb8a4a84c33fa5b238d6fc69e011c3', name: "expand-target" })))), index.h("div", { key: 'babf3752d2bcd2577d42d235775fc184aa6a3076', class: "action" }, index.h("slot", { key: '7c60ccb1dc60b1f9ccd0eaf9135b357dd44b63d1', name: "action" }))), index.h("slot", { key: 'e69a3f530388e947968ae1541a0c4a18d12dc0c1', name: "overlay" })));
+    }
+};
+CardGroup.style = cardGroupCss();
 
-
-exports.vertex_card_group = cardGroup.CardGroup;
+exports.vertex_card_group = CardGroup;

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

@@ -1,10 +1,38 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
 
-const card = require('./card-ae9e8a8f.js');
-require('./index-6a92256c.js');
+const cardCss = () => `:host{width:100%;height:100%;display:flex;position:relative;--border:1px solid var(--vertex-ui-neutral-200)}.content{display:flex;flex-direction:column;width:100%;height:100%;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);color:var(--vertex-ui-neutral-800);border:var(--border)}.header{display:flex;align-items:center;padding:0.5rem 0.5rem 0 0.5rem}.header-text{display:flex;flex-direction:column}.text{padding:0.75rem 0.5rem 0.75rem 1rem;color:var(--vertex-ui-neutral-700);white-space:pre-line}.avatar{padding-left:0.25rem;padding-right:0.75rem}.label slot::slotted(*){font-weight:var(--vertex-ui-font-weight-bold)}.timestamp slot::slotted(*){padding-top:0.125rem;font-size:var(--vertex-ui-text-sm);color:var(--vertex-ui-neutral-500)}.action{margin-left:auto;margin-bottom:auto}.actions *::slotted(*){display:flex;justify-content:flex-end;padding:0 0.5rem 0.5rem 0.5rem}`;
 
+const Card = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.contentClick = index.createEvent(this, "contentClick");
+        /**
+         * The visual mode of this `Card`. Can be either
+         * `editing` or `display`, and defaults to `display`.
+         *
+         * Setting this to `editing` will stop propagation of
+         * clicks on on the default slotted elements to allow
+         * for clicking in an input.
+         */
+        this.mode = 'display';
+        this.handleContentClick = (event) => {
+            this.contentClick.emit(event);
+        };
+        this.handleTextClick = (event) => {
+            if (this.mode === 'edit') {
+                event.stopImmediatePropagation();
+            }
+            else {
+                this.contentClick.emit(event);
+            }
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '77d72d07638073a285caa43dfa5ddd49a572522f' }, index.h("div", { key: 'a0f27db2debb0efe2270cf59d615c28eb4464c41', class: "content" }, index.h("div", { key: '4606c543416c6aa4f2ce484ca5eb3db286854176', class: "header", onClick: this.handleContentClick }, index.h("div", { key: '42cc689ea537030b76215cff045563bcdc61850d', class: "avatar" }, index.h("slot", { key: 'cb16c257c9c25e19b597b9ae73e89349c6ba0d49', name: "avatar" })), index.h("div", { key: '90b204b9c2a0d256080b9b088b2fe22945f43ebb', class: "header-text" }, index.h("div", { key: '1b2d517bc5cbff8a616e7186c547aced00736988', class: "label" }, index.h("slot", { key: '181d6968220c3b7b811212a4a98060d56919b3cd', name: "label" })), index.h("div", { key: 'f934b03edf94eb9bda0debf2f3b222213b337021', class: "timestamp" }, index.h("slot", { key: '2ddb71bd9f670d58c03c5be18910de81c620d4d0', name: "timestamp" }))), index.h("div", { key: '559e90333ed929ed893d31abb9dff2cb75273ca7', class: "action" }, index.h("slot", { key: 'bcc63be9ea2dca44c1dd519688d34eee5b2463f2', name: "action" }))), index.h("div", { key: 'bd2f85bec784a5569d4b8c2ba356855e6f15f3d5', class: "text", onClick: this.handleTextClick }, index.h("slot", { key: '082646147a2e69bc16eb3df478856a305cc312e4' })), index.h("div", { key: 'd2b3161bf7efa3ec19345dd3b35d840b39d18a25', class: "actions" }, index.h("slot", { key: 'b39c1468c39c93b805bc591f8db59d8e1cdf4ab7', name: "actions" }))), index.h("slot", { key: '2f5c5c7e27cef6b1185017b215bb9a7222fa322a', name: "overlay" })));
+    }
+};
+Card.style = cardCss();
 
-
-exports.vertex_card = card.Card;
+exports.vertex_card = Card;

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

@@ -1,11 +1,33 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DwS9D24e.js');
+var index$1 = require('./index-DihxupoM.js');
 
-const chip = require('./chip-a3b2e8e0.js');
-require('./index-6a92256c.js');
-require('./index-e1b40fa6.js');
+const chipCss = () => `.root{display:flex;align-items:center;width:fit-content;border-radius:16px;font-size:var(--vertex-ui-text-base);padding:0.5rem;padding-left:0.25rem;max-height:1rem}.filled{color:white}.chip-primary{color:white}.chip-secondary{color:var(--vertex-ui-neutral-800)}.filled.chip-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.filled.chip-primary{background-color:var(--vertex-ui-blue-700)}.outlined.chip-primary{border:1px solid var(--vertex-ui-blue-700);color:var(--vertex-ui-blue-700)}.outlined.chip-secondary{border:1px solid var(--vertex-ui-neutral-300);color:var(--vertex-ui-neutral-700)}.avatar{margin-right:0.25rem}`;
 
+const Chip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The variant of this <vertex-chip>.
+         * Can be "filled" or "outlined" and defaults to "filled".
+         */
+        this.variant = 'filled';
+        /**
+         * The color of this <vertex-chip>.
+         * Can be "primary" or "secondary" and defaults to "secondary".
+         */
+        this.color = 'secondary';
+    }
+    render() {
+        return (index.h("div", { key: 'c9df2d4b15261a1b255ff37f793065a184d65dfb', class: index$1.classNames('root', {
+                filled: this.variant === 'filled',
+                outlined: this.variant === 'outlined',
+                'chip-primary': this.color === 'primary',
+                'chip-secondary': this.color === 'secondary',
+            }) }, index.h("div", { key: '76c6cd5615f9da5d97acba55dba7b9fc774a1ed5', class: "avatar" }, index.h("slot", { key: '05aa9d08d135196b04af88d04f6860d1b223415d', name: "avatar" })), index.h("slot", { key: '8b50b524c6c18cbffc40b0a223fb97b6ff558fab' }), index.h("slot", { key: '1359aecc0da014c58f5ed2bc6095b2d34f99e5e2', name: "icon" })));
+    }
+};
+Chip.style = chipCss();
 
-
-exports.vertex_chip = chip.Chip;
+exports.vertex_chip = Chip;