@vertexvis/ui 0.1.1-canary.0 → 0.1.1-canary.2

package/dist/components/p-1e645c1f.js

@@ -0,0 +1 @@
+import{r as e,h as t,H as r,g as o}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const i=class{constructor(t){e(this,t),this.type=void 0,this.color="secondary",this.variant="solid",this.size="md",this.expand="block",this.href=void 0,this.target=void 0,this.disabled=void 0}connectedCallback(){if(null!=this.hostElement&&"submit"===this.type){const e=this.hostElement.closest("form");null!=e&&(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"),e.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const e=n("btn",{"btn-full":"full"===this.expand,"btn-sm":"sm"===this.size,"btn-md":"md"===this.size,"btn-lg":"lg"===this.size,"btn-primary":"primary"===this.color&&"solid"===this.variant,"btn-secondary":"secondary"===this.color&&"solid"===this.variant,"btn-danger":"danger"===this.color&&"solid"===this.variant,"btn-txt-primary":"primary"===this.color&&"text"===this.variant,"btn-txt-secondary":"secondary"===this.color&&"text"===this.variant,"btn-txt-danger":"danger"===this.color&&"text"===this.variant,"btn-outline-primary":"primary"===this.color&&"outline"===this.variant,"btn-outline-secondary":"secondary"===this.color&&"outline"===this.variant,"btn-outline-danger":"danger"===this.color&&"outline"===this.variant,"btn-plaintext":"plaintext"===this.variant,disabled:this.disabled});return null!=this.href&&null!=this.type&&console.warn("The type attribute is ignored when href is provided"),t(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?t("a",{href:this.href,target:this.target,class:e,tabIndex:this.disabled?-1:0},t("slot",null)):t("button",{class:e,disabled:this.disabled,type:this.type,onClick:e=>this.handleClick(e)},t("slot",{name:"left"}),t("slot",null)))}handleClick(e){null!=this.fakeButton&&(e.preventDefault(),this.fakeButton.click())}get hostElement(){return o(this)}};i.style='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}';export{i as B}

package/dist/components/p-70c6c194.entry.js

@@ -0,0 +1 @@
+export{C as vertex_color_picker}from"./p-e5ce8d66.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-3438c441.js";

package/dist/components/p-7a527151.js

@@ -0,0 +1 @@
+import{r as e,e as t,h as r}from"./p-6834631c.js";import{c as i}from"./p-fe062eb0.js";import{g as s}from"./p-6ff20817.js";const o=class{constructor(r){e(this,r),this.closed=t(this,"closed",7),this.content=void 0,this.placement="top",this.duration=3e3,this.animated=!0,this.open=!1,this.type="info",this.isOpen=void 0,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.isOpen=this.open,this.isOpen&&this.restartCloseTimeout()}async handleOpenChanged(e){e&&(this.restartCloseTimeout(),this.isOpen=e)}render(){return r("vertex-popover",{class:"popover",open:this.isOpen,resizeBehavior:"fixed",backdrop:!1,placement:this.getPopoverPlacement(),animated:this.animated},r("div",{slot:"anchor",class:i("anchor",this.placement)}),r("div",{class:i("banner",{hidden:!this.isOpen,info:"info"===this.type,success:"success"===this.type,warn:"warn"===this.type,error:"error"===this.type})},r("div",{class:i("icon",{"icon-info":"info"===this.type,"icon-success":"success"===this.type,"icon-warn":"warn"===this.type,"icon-error":"error"===this.type})},s(this.getIconName())),this.content?r("div",{class:"message"},this.content):r("slot",null),r("div",{class:"actions"},r("slot",{name:"action"}),r("vertex-icon-button",{class:"close",iconName:"close",iconSize:"sm",variant:"plain",onClick:this.handleClose}))))}handleClose(){this.clearCloseTimeout(),this.isOpen=!1,this.closed.emit()}startCloseTimeout(){null==this.closeTimeout&&this.duration>0&&(this.closeTimeout=setTimeout((()=>{this.handleClose()}),this.duration))}clearCloseTimeout(){null!=this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=void 0)}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"]}}};o.style=":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)}";export{o as B}

package/dist/components/p-e5ce8d66.js

@@ -0,0 +1 @@
+import{r as e,e as t,h as i,H as r}from"./p-6834631c.js";import{c as s}from"./p-fe062eb0.js";import{i as l}from"./p-3438c441.js";const a=class{constructor(i){e(this,i),this.valueInput=t(this,"valueInput",7),this.valueChanged=t(this,"valueChanged",7),this.handleInput=e=>{this.value=e.target.value||""},this.handleChange=()=>{this.valueChanged.emit(this.value)},this.value=void 0,this.size="md",this.variant="full",this.expand="block",this.disabled=!1}valueChange(){this.valueInput.emit(this.value)}render(){var e;return i(r,null,i("div",{class:s("wrapper",this.variant,this.size,`expand-${this.expand}`)},i("label",{class:s("color-picker",{disabled:this.disabled})},i("input",{type:"color",class:"input","data-testid":"input",disabled:this.disabled,value:this.value,onInput:this.handleInput,onChange:this.handleChange}),i("div",{class:s("selected-wrapper",this.variant)},i("div",{class:"selected",title:this.value},i("vertex-color-swatch",{class:"selected-color",supplementalColor:"var(--vertex-ui-neutral-400)",color:this.value,variant:"square",size:this.size},i("slot",{name:"overlay",slot:"overlay"},(null==this.value||""===this.value)&&i("svg",{class:"no-value",slot:"overlay",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},i("path",{d:"M16,0L0,16"}))))),"full"===this.variant&&i("div",{class:"text-wrapper"},i("div",{class:"hidden-text"},"#FFFFFF"),i("div",{class:"selected-text"},null!==(e=this.getDisplayedValue())&&void 0!==e?e:"Default"))),i("div",{class:"right-gutter"},i("slot",{name:"right-gutter"})))))}getDisplayedValue(){var e;if(null!=this.value&&l(this.value))return null===(e=this.value)||void 0===e?void 0:e.toLocaleUpperCase()}static get watchers(){return{value:["valueChange"]}}};a.style=':host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.expand-full{width:100%}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{width:100%;display:inline-flex;position:relative;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected-wrapper{position:relative;display:flex;align-items:center}.wrapper.full .selected-wrapper{gap:0.75rem}.selected{position:relative}.wrapper.sm .selected{width:var(--selected-color-width, 1rem);height:var(--selected-color-height, 1rem)}.wrapper.md .selected{width:var(--selected-color-width, 1.25rem);height:var(--selected-color-height, 1.25rem)}.wrapper.lg .selected{width:var(--selected-color-width, 1.5rem);height:var(--selected-color-height, 1.5rem)}.text-wrapper{position:relative}.selected-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;color:var(--vertex-ui-neutral-700);text-align:center;font-family:var(--vertex-ui-font-family)}.hidden-text{visibility:hidden;pointer-events:none;font-family:var(--vertex-ui-font-family-monospace)}.wrapper.sm .selected-text,.wrapper.sm .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.md .selected-text,.wrapper.md .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.lg .selected-text,.wrapper.lg .hidden-text{font-size:var(--vertex-ui-text-xs)}.no-value{width:100%;height:100%;stroke:var(--vertex-ui-red-400)}.right-gutter{display:flex;align-items:center;margin-left:auto}slot[name="right-gutter"]::slotted(*){padding:0}.input{display:flex;position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}';export{a as C}

package/dist/components/p-f6f2bc86.entry.js

@@ -0,0 +1 @@
+export{B as vertex_button}from"./p-1e645c1f.js";import"./p-6834631c.js";import"./p-fe062eb0.js";

package/dist/esm/banner-38e7885a.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.js';
+import { g as getSvg } from './icon-helper-94d45002.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) {
+    registerInstance(this, hostRef);
+    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"]
+  }; }
+};
+Banner.style = bannerCss;
+
+export { Banner as B };

package/dist/esm/button-81207236.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+Button.style = buttonCss;
+
+export { Button as B };

package/dist/esm/color-picker-16b97934.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
+import { c as classnames } from './index-9c609209.js';
+import { i as isValidHexColor } from './lib-73fbca8b.js';
+
+const colorPickerCss = ":host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.expand-full{width:100%}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{width:100%;display:inline-flex;position:relative;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected-wrapper{position:relative;display:flex;align-items:center}.wrapper.full .selected-wrapper{gap:0.75rem}.selected{position:relative}.wrapper.sm .selected{width:var(--selected-color-width, 1rem);height:var(--selected-color-height, 1rem)}.wrapper.md .selected{width:var(--selected-color-width, 1.25rem);height:var(--selected-color-height, 1.25rem)}.wrapper.lg .selected{width:var(--selected-color-width, 1.5rem);height:var(--selected-color-height, 1.5rem)}.text-wrapper{position:relative}.selected-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;color:var(--vertex-ui-neutral-700);text-align:center;font-family:var(--vertex-ui-font-family)}.hidden-text{visibility:hidden;pointer-events:none;font-family:var(--vertex-ui-font-family-monospace)}.wrapper.sm .selected-text,.wrapper.sm .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.md .selected-text,.wrapper.md .hidden-text{font-size:var(--vertex-ui-text-xs)}.wrapper.lg .selected-text,.wrapper.lg .hidden-text{font-size:var(--vertex-ui-text-xs)}.no-value{width:100%;height:100%;stroke:var(--vertex-ui-red-400)}.right-gutter{display:flex;align-items:center;margin-left:auto}slot[name=\"right-gutter\"]::slotted(*){padding:0}.input{display:flex;position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
+
+const ColorPicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueInput = createEvent(this, "valueInput", 7);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.handleInput = (event) => {
+      const input = event.target;
+      this.value = input.value || '';
+    };
+    this.handleChange = (event) => {
+      this.valueChanged.emit(this.value);
+    };
+    this.value = undefined;
+    this.size = 'md';
+    this.variant = 'full';
+    this.expand = 'block';
+    this.disabled = false;
+  }
+  valueChange() {
+    this.valueInput.emit(this.value);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { class: classnames('wrapper', this.variant, this.size, `expand-${this.expand}`) }, h("label", { class: classnames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: classnames('selected-wrapper', this.variant) }, h("div", { class: "selected", title: this.value }, h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (h("div", { class: "text-wrapper" }, h("div", { class: "hidden-text" }, "#FFFFFF"), h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default')))), h("div", { class: "right-gutter" }, h("slot", { name: "right-gutter" }))))));
+  }
+  getDisplayedValue() {
+    var _a;
+    if (this.value != null && isValidHexColor(this.value)) {
+      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+    }
+    return undefined;
+  }
+  static get watchers() { return {
+    "value": ["valueChange"]
+  }; }
+};
+ColorPicker.style = colorPickerCss;
+
+export { ColorPicker as C };

package/dist/esm/components.js

@@ -85,5 +85,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
+  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-banner",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
 });

package/dist/esm/index.js

@@ -2,14 +2,15 @@ export { A as AutoResizeTextArea } from './auto-resize-textarea-087fecdb.js';
 export { A as Avatar } from './avatar-775455a5.js';
 export { A as AvatarGroup } from './avatar-group-e5ca86bf.js';
 export { B as Badge } from './badge-6d27ca92.js';
-export { B as Button } from './button-547336b8.js';
+export { B as Banner } from './banner-38e7885a.js';
+export { B as Button } from './button-81207236.js';
 export { C as Card } from './card-1e8790aa.js';
 export { C as CardGroup } from './card-group-4e8e0421.js';
 export { C as Chip } from './chip-4e568eee.js';
 export { C as ClickToEditTextField } from './click-to-edit-text-field-d9b27cd0.js';
 export { C as Collapsible } from './collapsible-b52960e6.js';
 export { C as ColorCirclePicker } from './color-circle-picker-35ad3b3e.js';
-export { C as ColorPicker } from './color-picker-1d67effe.js';
+export { C as ColorPicker } from './color-picker-16b97934.js';
 export { C as ColorSwatch } from './color-swatch-0e62d13d.js';
 export { C as ContextMenu } from './context-menu-12f1afe1.js';
 export { D as Dialog } from './dialog-1cef715c.js';
@@ -41,8 +42,8 @@ export { T as Tooltip } from './tooltip-db8ebd41.js';
 import './index-72f28b71.js';
 import './slots-fbb5afb3.js';
 import './index-9c609209.js';
-import './lib-73fbca8b.js';
 import './icon-helper-94d45002.js';
+import './lib-73fbca8b.js';
 import './templates-797420bf.js';
 import './tslib.es6-99cd0de8.js';
 import './dom-9d0f7bf4.js';

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
+  return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-banner",[[1,"vertex-banner",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"expand":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,4 @@
+export { B as vertex_banner } from './banner-38e7885a.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';
+import './icon-helper-94d45002.js';

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

@@ -1,3 +1,3 @@
-export { B as vertex_button } from './button-547336b8.js';
+export { B as vertex_button } from './button-81207236.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';

package/dist/esm/vertex-color-picker.entry.js

@@ -1,4 +1,4 @@
-export { C as vertex_color_picker } from './color-picker-1d67effe.js';
+export { C as vertex_color_picker } from './color-picker-16b97934.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './lib-73fbca8b.js';

package/dist/types/components/banner/banner.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export type BannerType = 'info' | 'success' | 'warn' | 'error';
+export type BannerPlacement = 'top-left' | 'top' | 'top-right';
+export declare class Banner {
+  /**
+   * The content to display in this banner. This can also
+   * be provided by inserting an element with the `content` slot
+   * to support additional elements.
+   */
+  content?: string;
+  /**
+   * The placement of the banner.
+   * This can be any of the following values:
+   *
+   * 'top', 'top-left', or 'top-right'.
+   */
+  placement: BannerPlacement;
+  /**
+   * The duration this banner will appear for.
+   * Can be set to `0` to display the banner until
+   * explicitly dismissed, and defaults to 3000ms.
+   */
+  duration: number;
+  /**
+   * Whether this banner should be animated.
+   * Defaults to true.
+   */
+  animated: boolean;
+  /**
+   * Whether this banner is visible. Updating this
+   * property to `true` will restart the timer to hide
+   * the banner. Defaults to false.
+   */
+  open: boolean;
+  /**
+   * The type of banner. This will change the styling of the banner
+   */
+  type: BannerType;
+  /**
+   * An event that is dispatched when this banner is closed.
+   */
+  closed: EventEmitter<void>;
+  isOpen?: boolean;
+  private closeTimeout?;
+  constructor();
+  componentDidLoad(): void;
+  protected handleOpenChanged(open: boolean): Promise<void>;
+  render(): h.JSX.IntrinsicElements;
+  private handleClose;
+  private startCloseTimeout;
+  private clearCloseTimeout;
+  private restartCloseTimeout;
+  private getPopoverPlacement;
+  private getIconName;
+}

package/dist/types/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { h } from '../../stencil-public-runtime';
 export type ButtonType = 'button' | 'submit';
 export type ButtonColor = 'primary' | 'secondary' | 'danger';
-export type ButtonVariant = 'solid' | 'text' | 'plaintext';
+export type ButtonVariant = 'solid' | 'text' | 'plaintext' | 'outline';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonExpand = 'full' | 'block';
 export declare class Button {

package/dist/types/components/color-picker/color-picker.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { ColorSwatchSize } from '../color-swatch/color-swatch';
 export type ColorPickerVariant = 'full' | 'swatch';
+export type ColorPickerExpand = 'full' | 'block';
 export declare class ColorPicker {
   /**
    * Optional value property to set the initial
@@ -23,6 +24,14 @@ export declare class ColorPicker {
    * `swatch` will display only the visual color swatch.
    */
   variant: ColorPickerVariant;
+  /**
+   * The expansion behavior of this <vertex-color-picker>.
+   * Can be set to "full" to cause the color picker to stretch to fill
+   * its container, or "block" to cause the color picker to be sized based
+   * on its contents.
+   * Defaults to "block".
+   */
+  expand: ColorPickerExpand;
   /**
    * Whether this color picker is disabled.
    */

package/dist/types/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './auto-resize-textarea/auto-resize-textarea';
 export * from './avatar/avatar';
 export * from './avatar-group/avatar-group';
 export * from './badge/badge';
+export * from './banner/banner';
 export * from './button/button';
 export * from './card/card';
 export * from './card-group/card-group';