@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.1

package/dist/components/vertex-avatar.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.firstName = undefined;
+    this.lastName = undefined;
+    this.value = undefined;
+    this.active = false;
+    this.variant = 'default';
+  }
+  render() {
+    if (!this.isValidStringValue(this.firstName) &&
+      !this.isValidStringValue(this.value)) {
+      return h("div", null);
+    }
+    return (h("div", { class: 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;
+    }
+  }
+  static get style() { return avatarCss; }
+}, [1, "vertex-avatar", {
+    "firstName": [1, "first-name"],
+    "lastName": [1, "last-name"],
+    "value": [1],
+    "active": [4],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-avatar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Avatar);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexAvatar = Avatar;
+const defineCustomElement = defineCustomElement$1;
+
+export { Avatar as A, VertexAvatar, defineCustomElement };

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

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

package/dist/components/vertex-badge.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.badgeText = undefined;
+    this.badgeColor = 'primary';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('string-overlay', {
+        primary: this.badgeColor === 'primary',
+        secondary: this.badgeColor === 'secondary',
+      }) }, this.badgeText)));
+  }
+  static get style() { return badgeCss; }
+}, [1, "vertex-badge", {
+    "badgeText": [1, "badge-text"],
+    "badgeColor": [1, "badge-color"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Badge);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexBadge = Badge;
+const defineCustomElement = defineCustomElement$1;
+
+export { Badge as B, VertexBadge, defineCustomElement };

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

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

package/dist/components/vertex-banner.js

@@ -0,0 +1,141 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getSvg } from './icon-helper.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './popover.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closed = createEvent(this, "closed", 7);
+    this.content = undefined;
+    this.placement = 'top';
+    this.duration = DEFAULT_BANNER_DURATION;
+    this.animated = true;
+    this.open = false;
+    this.type = 'info';
+    this.isOpen = undefined;
+    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 (h("vertex-popover", { class: "popover", open: this.isOpen, resizeBehavior: "fixed", backdrop: false, placement: this.getPopoverPlacement(), animated: this.animated }, h("div", { slot: "anchor", class: classnames('anchor', this.placement) }), h("div", { class: classnames('banner', {
+        hidden: !this.isOpen,
+        info: this.type === 'info',
+        success: this.type === 'success',
+        warn: this.type === 'warn',
+        error: this.type === 'error',
+      }) }, h("div", { class: classnames('icon', {
+        'icon-info': this.type === 'info',
+        'icon-success': this.type === 'success',
+        'icon-warn': this.type === 'warn',
+        'icon-error': this.type === 'error',
+      }) }, getSvg(this.getIconName())), this.content ? h("div", { class: "message" }, this.content) : h("slot", null), h("div", { class: "actions" }, h("slot", { name: "action" }), h("vertex-icon-button", { 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"]
+  }; }
+  static get style() { return bannerCss; }
+}, [1, "vertex-banner", {
+    "content": [1],
+    "placement": [1],
+    "duration": [2],
+    "animated": [4],
+    "open": [4],
+    "type": [1],
+    "isOpen": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-banner", "vertex-icon-button", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Banner);
+      }
+      break;
+    case "vertex-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexBanner = Banner;
+const defineCustomElement = defineCustomElement$1;
+
+export { Banner as B, VertexBanner, defineCustomElement };

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

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

package/dist/components/vertex-button.js

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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-300)}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.type = undefined;
+    this.color = 'secondary';
+    this.variant = 'solid';
+    this.size = 'md';
+    this.expand = 'block';
+    this.href = undefined;
+    this.target = undefined;
+    this.disabled = undefined;
+  }
+  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 = 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 (h(Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, h("slot", null))) : (h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, h("slot", { name: "left" }), h("slot", null)))));
+  }
+  handleClick(event) {
+    if (this.fakeButton != null) {
+      event.preventDefault();
+      this.fakeButton.click();
+    }
+  }
+  get hostElement() { return this; }
+  static get style() { return buttonCss; }
+}, [1, "vertex-button", {
+    "type": [1],
+    "color": [1],
+    "variant": [1],
+    "size": [1],
+    "expand": [1],
+    "href": [1],
+    "target": [1],
+    "disabled": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Button);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { Button as B, VertexButton, defineCustomElement };

package/dist/components/vertex-card-group.d.ts

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

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

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selected = false;
+    this.hovered = false;
+    this.expanded = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('root', {
+        selected: this.selected,
+        hovered: this.hovered,
+      }) }, h("div", { class: "content" }, h("slot", { name: "primary" })), h("div", { class: classnames({
+        hidden: !this.selected,
+      }) }, h("slot", null), h("div", { "data-testid": "expanded-content-wrapper", class: classnames({
+        hidden: !this.expanded,
+      }) }, h("slot", { name: "expanded-content" })), h("div", { "data-testid": "expanded-target-wrapper", class: classnames({
+        hidden: this.expanded,
+      }) }, h("div", { class: "expand-target" }, h("slot", { name: "expand-target" })))), h("div", { class: "action" }, h("slot", { name: "action" }))), h("slot", { name: "overlay" })));
+  }
+  static get style() { return cardGroupCss; }
+}, [1, "vertex-card-group", {
+    "selected": [516],
+    "hovered": [516],
+    "expanded": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-card-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-card-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardGroup);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexCardGroup = CardGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { CardGroup as C, VertexCardGroup, defineCustomElement };

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

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

package/dist/components/vertex-card.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.contentClick = createEvent(this, "contentClick", 7);
+    this.handleContentClick = (event) => {
+      this.contentClick.emit(event);
+    };
+    this.handleTextClick = (event) => {
+      if (this.mode === 'edit') {
+        event.stopImmediatePropagation();
+      }
+      else {
+        this.contentClick.emit(event);
+      }
+    };
+    this.mode = 'display';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "content" }, h("div", { class: "header", onClick: this.handleContentClick }, h("div", { class: "avatar" }, h("slot", { name: "avatar" })), h("div", { class: "header-text" }, h("div", { class: "label" }, h("slot", { name: "label" })), h("div", { class: "timestamp" }, h("slot", { name: "timestamp" }))), h("div", { class: "action" }, h("slot", { name: "action" }))), h("div", { class: "text", onClick: this.handleTextClick }, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), h("slot", { name: "overlay" })));
+  }
+  static get style() { return cardCss; }
+}, [1, "vertex-card", {
+    "mode": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexCard = Card;
+const defineCustomElement = defineCustomElement$1;
+
+export { Card as C, VertexCard, defineCustomElement };

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

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

package/dist/components/vertex-chip.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'filled';
+    this.color = 'secondary';
+  }
+  render() {
+    return (h("div", { class: classnames('root', {
+        filled: this.variant === 'filled',
+        outlined: this.variant === 'outlined',
+        'chip-primary': this.color === 'primary',
+        'chip-secondary': this.color === 'secondary',
+      }) }, h("div", { class: "avatar" }, h("slot", { name: "avatar" })), h("slot", null), h("slot", { name: "icon" })));
+  }
+  static get style() { return chipCss; }
+}, [1, "vertex-chip", {
+    "variant": [1],
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-chip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Chip);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VertexChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { Chip as C, VertexChip, defineCustomElement };

package/dist/components/vertex-click-to-edit-textfield.d.ts

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