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

package/dist/types/components.d.ts

@@ -7,13 +7,14 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AvatarVariant } from "./components/avatar/avatar";
 import { BadgeIconColor } from "./components/badge/badge";
+import { BannerPlacement, BannerType } from "./components/banner/banner";
 import { ButtonColor, ButtonExpand, ButtonSize, ButtonType, ButtonVariant } from "./components/button/button";
 import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
 import { InputChangeEventDetail, TextSize } from "./components/text-field/text-field";
 import { SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
 import { ColorSwatchSize } from "./components/color-swatch/color-swatch";
-import { ColorPickerVariant } from "./components/color-picker/color-picker";
+import { ColorPickerExpand, ColorPickerVariant } from "./components/color-picker/color-picker";
 import { ColorSwatchSize as ColorSwatchSize1, ColorSwatchTheme, ColorSwatchVariant } from "./components/color-swatch/color-swatch";
 import { Point } from "./types/point";
 import { Popover, PopoverPlacement } from "./components/popover/popover";
@@ -84,6 +85,32 @@ export namespace Components {
          */
         "badgeText"?: string;
     }
+    interface VertexBanner {
+        /**
+          * Whether this banner should be animated. Defaults to true.
+         */
+        "animated": boolean;
+        /**
+          * 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 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 is visible. Updating this property to `true` will restart the timer to hide the banner. Defaults to false.
+         */
+        "open": boolean;
+        /**
+          * The placement of the banner. This can be any of the following values:  'top', 'top-left', or 'top-right'.
+         */
+        "placement": BannerPlacement;
+        /**
+          * The type of banner. This will change the styling of the banner
+         */
+        "type": BannerType;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -235,6 +262,10 @@ export namespace Components {
           * Whether this color picker is disabled.
          */
         "disabled": boolean;
+        /**
+          * 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;
         /**
           * The size of the swatch displayed for this color picker. Can be `sm`, `md`, `lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value will also increase the size of the associated hexadecimal value.
          */
@@ -836,6 +867,10 @@ export namespace Components {
         "placement": PopoverPlacement;
     }
 }
+export interface VertexBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVertexBannerElement;
+}
 export interface VertexCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVertexCardElement;
@@ -957,6 +992,12 @@ declare global {
         prototype: HTMLVertexBadgeElement;
         new (): HTMLVertexBadgeElement;
     };
+    interface HTMLVertexBannerElement extends Components.VertexBanner, HTMLStencilElement {
+    }
+    var HTMLVertexBannerElement: {
+        prototype: HTMLVertexBannerElement;
+        new (): HTMLVertexBannerElement;
+    };
     interface HTMLVertexButtonElement extends Components.VertexButton, HTMLStencilElement {
     }
     var HTMLVertexButtonElement: {
@@ -1178,6 +1219,7 @@ declare global {
         "vertex-avatar": HTMLVertexAvatarElement;
         "vertex-avatar-group": HTMLVertexAvatarGroupElement;
         "vertex-badge": HTMLVertexBadgeElement;
+        "vertex-banner": HTMLVertexBannerElement;
         "vertex-button": HTMLVertexButtonElement;
         "vertex-card": HTMLVertexCardElement;
         "vertex-card-group": HTMLVertexCardGroupElement;
@@ -1269,6 +1311,36 @@ declare namespace LocalJSX {
          */
         "badgeText"?: string;
     }
+    interface VertexBanner {
+        /**
+          * Whether this banner should be animated. Defaults to true.
+         */
+        "animated"?: boolean;
+        /**
+          * 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 duration this banner will appear for. Can be set to `0` to display the banner until explicitly dismissed, and defaults to 3000ms.
+         */
+        "duration"?: number;
+        /**
+          * An event that is dispatched when this banner is closed.
+         */
+        "onClosed"?: (event: VertexBannerCustomEvent<void>) => void;
+        /**
+          * Whether this banner is visible. Updating this property to `true` will restart the timer to hide the banner. Defaults to false.
+         */
+        "open"?: boolean;
+        /**
+          * The placement of the banner. This can be any of the following values:  'top', 'top-left', or 'top-right'.
+         */
+        "placement"?: BannerPlacement;
+        /**
+          * The type of banner. This will change the styling of the banner
+         */
+        "type"?: BannerType;
+    }
     interface VertexButton {
         /**
           * The color of this <vertex-button>. Can be "primary", "secondary", or "danger" and defaults to "secondary".
@@ -1445,6 +1517,10 @@ declare namespace LocalJSX {
           * Whether this color picker is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * 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;
         /**
           * Emitted when the value has changed.
          */
@@ -2170,6 +2246,7 @@ declare namespace LocalJSX {
         "vertex-avatar": VertexAvatar;
         "vertex-avatar-group": VertexAvatarGroup;
         "vertex-badge": VertexBadge;
+        "vertex-banner": VertexBanner;
         "vertex-button": VertexButton;
         "vertex-card": VertexCard;
         "vertex-card-group": VertexCardGroup;
@@ -2216,6 +2293,7 @@ declare module "@stencil/core" {
             "vertex-avatar": LocalJSX.VertexAvatar & JSXBase.HTMLAttributes<HTMLVertexAvatarElement>;
             "vertex-avatar-group": LocalJSX.VertexAvatarGroup & JSXBase.HTMLAttributes<HTMLVertexAvatarGroupElement>;
             "vertex-badge": LocalJSX.VertexBadge & JSXBase.HTMLAttributes<HTMLVertexBadgeElement>;
+            "vertex-banner": LocalJSX.VertexBanner & JSXBase.HTMLAttributes<HTMLVertexBannerElement>;
             "vertex-button": LocalJSX.VertexButton & JSXBase.HTMLAttributes<HTMLVertexButtonElement>;
             "vertex-card": LocalJSX.VertexCard & JSXBase.HTMLAttributes<HTMLVertexCardElement>;
             "vertex-card-group": LocalJSX.VertexCardGroup & JSXBase.HTMLAttributes<HTMLVertexCardGroupElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.1-canary.0",
+  "version": "0.1.1-canary.2",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.21.0",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "95dd86df1f5adacedad3e2b713c8d4322cff3b9c"
+  "gitHead": "37339dbab45685958909e3593794af7f6ca28ccb"
 }

package/dist/cjs/button-edd366d8.js

@@ -1,67 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.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,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{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,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{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{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,.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{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{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{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,.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,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{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}";
-
-const Button = class {
-  constructor(hostRef) {
-    index.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 = index$1.classnames('btn', {
-      'btn-full': this.expand === 'full',
-      'btn-sm': this.size === 'sm',
-      'btn-md': this.size === 'md',
-      'btn-lg': this.size === 'lg',
-      'btn-primary': this.color === 'primary' && this.variant === 'solid',
-      'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
-      'btn-danger': this.color === 'danger' && this.variant === 'solid',
-      'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
-      'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
-      'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
-      'btn-plaintext': this.variant === 'plaintext',
-      disabled: this.disabled,
-    });
-    if (this.href != null && this.type != null) {
-      console.warn('The type attribute is ignored when href is provided');
-    }
-    return (index.h(index.Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (index.h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, index.h("slot", null))) : (index.h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "left" }), index.h("slot", null)))));
-  }
-  handleClick(event) {
-    if (this.fakeButton != null) {
-      event.preventDefault();
-      this.fakeButton.click();
-    }
-  }
-  get hostElement() { return index.getElement(this); }
-};
-Button.style = buttonCss;
-
-exports.Button = Button;

package/dist/cjs/color-picker-2a4820fa.js

@@ -1,46 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-const lib = require('./lib-1bd1e383.js');
-
-const colorPickerCss = ":host{display:flex;--selected-color-width:initial;--selected-color-height:initial}.wrapper{display:inline-flex;align-items:center}.wrapper.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{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) {
-    index.registerInstance(this, hostRef);
-    this.valueInput = index.createEvent(this, "valueInput", 7);
-    this.valueChanged = index.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.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    var _a;
-    return (index.h(index.Host, null, index.h("div", { class: index$1.classnames('wrapper', this.variant, this.size) }, index.h("label", { class: index$1.classnames('color-picker', { disabled: this.disabled }) }, index.h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: index$1.classnames('selected-wrapper', this.variant) }, index.h("div", { class: "selected", title: this.value }, index.h("vertex-color-swatch", { class: "selected-color", supplementalColor: "var(--vertex-ui-neutral-400)", color: this.value, variant: "square", size: this.size }, index.h("slot", { name: "overlay", slot: "overlay" }, (this.value == null || this.value === '') && (index.h("svg", { class: "no-value", slot: "overlay", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("path", { d: "M16,0L0,16" })))))), this.variant === 'full' && (index.h("div", { class: "text-wrapper" }, index.h("div", { class: "hidden-text" }, "#FFFFFF"), index.h("div", { class: "selected-text" }, (_a = this.getDisplayedValue()) !== null && _a !== void 0 ? _a : 'Default'))))), index.h("div", { class: "right-gutter" }, index.h("slot", { name: "right-gutter" })))));
-  }
-  getDisplayedValue() {
-    var _a;
-    if (this.value != null && lib.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;
-
-exports.ColorPicker = ColorPicker;

package/dist/components/p-2b4aedaa.entry.js

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

package/dist/components/p-64e8b92c.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as r,g as n}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const a=class{constructor(e){t(this,e),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 t=this.hostElement.closest("form");null!=t&&(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"),t.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const t=o("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-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"),e(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?e("a",{href:this.href,target:this.target,class:t,tabIndex:this.disabled?-1:0},e("slot",null)):e("button",{class:t,disabled:this.disabled,type:this.type,onClick:t=>this.handleClick(t)},e("slot",{name:"left"}),e("slot",null)))}handleClick(t){null!=this.fakeButton&&(t.preventDefault(),this.fakeButton.click())}get hostElement(){return n(this)}};a.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,.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,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{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,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{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{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,.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{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{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{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,.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,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{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}';export{a as B}

package/dist/components/p-655053df.js

@@ -1 +0,0 @@
-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.disabled=!1}valueChange(){this.valueInput.emit(this.value)}render(){var e;return i(r,null,i("div",{class:s("wrapper",this.variant,this.size)},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.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{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-fca52578.entry.js

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

package/dist/esm/button-547336b8.js

@@ -1,65 +0,0 @@
-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,.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,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{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,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{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{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,.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{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{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{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,.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,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{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}";
-
-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-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-1d67effe.js

@@ -1,44 +0,0 @@
-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.full{padding:0.375rem 0.5rem;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.color-picker{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.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("div", { class: classnames('wrapper', this.variant, this.size) }, 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 };