@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

package/dist/components/calcite-checkbox2.js

@@ -0,0 +1,203 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { f as focusElement, d as closestElementCrossShadowBoundary } from './dom.js';
+import { h as hiddenInputStyle } from './form.js';
+import { c as connectLabel, g as getLabelText, d as disconnectLabel } from './label.js';
+
+const calciteCheckboxCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{overflow:hidden;display:block;background-color:var(--calcite-ui-foreground-1);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);stroke:currentColor;stroke-width:1;fill:currentColor;width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host ::slotted(input){width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size)}:host(:hover) .check-svg,:host([hovered]) .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host .focused .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
+
+let CalciteCheckbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 7);
+    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 7);
+    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The checked state of the checkbox. */
+    this.checked = false;
+    /** True if the checkbox is disabled */
+    this.disabled = false;
+    /**
+     * The hovered state of the checkbox.
+     * @internal
+     */
+    this.hovered = false;
+    /**
+     * True if the checkbox is initially indeterminate,
+     * which is independent from its checked state
+     * https://css-tricks.com/indeterminate-checkboxes/
+     * */
+    this.indeterminate = false;
+    /** The name of the checkbox input */
+    this.name = "";
+    /** specify the scale of the checkbox, defaults to m */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    //--------------------------------------------------------------------------
+    this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+    this.indeterminatePath = "M13 8v1H3V8z";
+    //--------------------------------------------------------------------------
+    //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    /** The focused state of the checkbox. */
+    this.focused = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.getPath = () => this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
+    this.toggle = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        focusElement(this.input);
+        this.indeterminate = false;
+        this.calciteCheckboxChange.emit();
+      }
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.formResetHandler = () => {
+      this.checked = this.initialChecked;
+    };
+  }
+  checkedWatcher(newChecked) {
+    this.input.checked = newChecked;
+  }
+  disabledChanged(disabled) {
+    this.input.disabled = disabled;
+  }
+  nameChanged(newName) {
+    this.input.name = newName;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.input);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  mouseenter() {
+    this.hovered = true;
+  }
+  mouseleave() {
+    this.hovered = false;
+  }
+  onInputBlur() {
+    this.focused = false;
+    this.calciteInternalCheckboxBlur.emit(false);
+  }
+  onInputFocus() {
+    this.focused = true;
+    this.calciteInternalCheckboxFocus.emit(true);
+  }
+  onLabelClick() {
+    this.toggle();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    this.initialChecked = this.checked;
+    this.renderHiddenCheckboxInput();
+    const form = closestElementCrossShadowBoundary(this.el, "form");
+    if (form) {
+      form.addEventListener("reset", this.formResetHandler);
+    }
+    connectLabel(this);
+  }
+  componentDidLoad() {
+    this.input.setAttribute("aria-label", getLabelText(this));
+  }
+  disconnectedCallback() {
+    this.input.parentNode.removeChild(this.input);
+    const form = closestElementCrossShadowBoundary(this.el, "form");
+    if (form) {
+      form.removeEventListener("reset", this.formResetHandler);
+    }
+    disconnectLabel(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHiddenCheckboxInput() {
+    this.input = document.createElement("input");
+    this.checked && this.input.setAttribute("checked", "");
+    this.input.disabled = this.disabled;
+    this.input.id = `${this.guid}-input`;
+    this.input.name = this.name;
+    this.input.onblur = this.onInputBlur.bind(this);
+    this.input.onfocus = this.onInputFocus.bind(this);
+    this.input.style.cssText = hiddenInputStyle;
+    this.input.type = "checkbox";
+    this.input.setAttribute("aria-label", getLabelText(this));
+    if (this.value) {
+      this.input.value = this.value != null ? this.value.toString() : "";
+    }
+    this.el.appendChild(this.input);
+  }
+  render() {
+    return (h(Host, { onClick: this.clickHandler }, h("div", { class: { focused: this.focused } }, h("svg", { class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedWatcher"],
+    "disabled": ["disabledChanged"],
+    "name": ["nameChanged"]
+  }; }
+  static get style() { return calciteCheckboxCss; }
+};
+CalciteCheckbox = /*@__PURE__*/ proxyCustomElement(CalciteCheckbox, [1, "calcite-checkbox", {
+    "checked": [1540],
+    "disabled": [516],
+    "guid": [1537],
+    "hovered": [1540],
+    "indeterminate": [1540],
+    "label": [1],
+    "name": [513],
+    "scale": [513],
+    "value": [8],
+    "focused": [32],
+    "setFocus": [64]
+  }, [[1, "mouseenter", "mouseenter"], [1, "mouseleave", "mouseleave"]]]);
+function defineCustomElement() {
+  const components = ["calcite-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteCheckbox);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteCheckbox as C, defineCustomElement as d };

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

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

package/dist/components/calcite-chip.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalciteChip$1, d as defineCustomElement$1 } from './calcite-chip2.js';
+
+const CalciteChip = CalciteChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteChip, defineCustomElement };

package/dist/components/calcite-chip2.js

@@ -0,0 +1,121 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { b as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { g as guid } from './guid.js';
+import { d as defineCustomElement$1 } from './calcite-icon2.js';
+
+const CSS = {
+  title: "title",
+  close: "close",
+  chipImageContainer: "chip-image-container",
+  calciteChipIcon: "calcite-chip--icon"
+};
+const TEXT = {
+  close: "Close"
+};
+const SLOTS = {
+  image: "image"
+};
+const ICONS = {
+  close: "x"
+};
+
+const calciteChipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){height:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-unit-l:0.5rem;--calcite-chip-spacing-unit-s:0.25rem}:host([scale=s]) .chip-image-container{height:1.25rem;width:1.25rem}:host([scale=m]){height:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-unit-l:0.75rem;--calcite-chip-spacing-unit-s:6px}:host([scale=m]) .chip-image-container{height:1.5rem;width:1.5rem;padding-left:0.25rem}:host([scale=l]){height:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-unit-l:1rem;--calcite-chip-spacing-unit-s:0.5rem}:host([scale=l]) .chip-image-container{height:2rem;width:2rem;padding-left:0.25rem}:host([scale=m]) .calcite--rtl .chip-image-container{padding-left:0;padding-right:0.25rem}:host([scale=l]) .calcite--rtl .chip-image-container{padding-left:0;padding-right:0.25rem}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium);cursor:default;border-radius:9999px;-webkit-box-sizing:border-box;box-sizing:border-box;--calcite-chip-button-border-radius:0 50px 50px 0}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:100%;max-width:100%}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calcite--rtl{text-align:right;--calcite-chip-button-border-radius:50px 0 0 50px}:host span{padding:0 var(--calcite-chip-spacing-unit-l)}:host([dismissible]) span{padding:0 var(--calcite-chip-spacing-unit-s) 0 var(--calcite-chip-spacing-unit-l)}:host([dismissible]) .calcite--rtl span{padding:0 var(--calcite-chip-spacing-unit-l) 0 var(--calcite-chip-spacing-unit-s)}:host([icon]:not([dismissible])) span{padding:0 var(--calcite-chip-spacing-unit-l)}:host([icon]:not([dismissible])) .calcite--rtl span{padding:0 var(--calcite-chip-spacing-unit-l)}:host button{margin:0;background-color:transparent;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;display:-ms-inline-flexbox;display:inline-flex;min-height:100%;max-height:100%;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;border-style:none;cursor:pointer;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;color:var(--calcite-ui-text-1);-webkit-appearance:none;border-radius:var(--calcite-chip-button-border-radius);padding:0 var(--calcite-chip-spacing-unit-s);color:inherit;--calcite-chip-transparent-hover:var(--calcite-button-transparent-hover);--calcite-chip-transparent-press:var(--calcite-button-transparent-press)}:host button:hover{background-color:var(--calcite-chip-transparent-hover)}:host button:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host button:active{background-color:var(--calcite-chip-transparent-press)}.chip-image-container{border-radius:50%;overflow:hidden;display:-ms-inline-flexbox;display:inline-flex}:host slot[name=image]::slotted(*){display:-ms-flexbox;display:flex;height:100%;width:100%;border-radius:50%;overflow:hidden}.calcite-chip--icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin-top:0;margin-bottom:0;margin-right:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-left:var(--calcite-chip-spacing-unit-l);border-radius:var(--calcite-chip-button-border-radius)}.calcite--rtl .calcite-chip--icon{margin-top:0;margin-bottom:0;margin-left:0;margin-right:var(--calcite-chip-spacing-unit-l)}:host([color=blue][appearance=solid]){border-color:transparent;background-color:var(--calcite-ui-info);color:var(--calcite-ui-text-inverse)}:host([color=red][appearance=solid]){border-color:transparent;background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}:host([color=yellow][appearance=solid]){border-color:transparent;background-color:var(--calcite-ui-warning);color:#151515}:host([color=green][appearance=solid]){border-color:transparent;background-color:var(--calcite-ui-success);color:#151515}:host([color=grey][appearance=solid]){border-color:transparent;background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host([color=grey][appearance=solid]) button,:host([color=grey][appearance=solid]) calcite-icon{color:var(--calcite-ui-text-3)}:host([color=blue][appearance=clear]){border-color:var(--calcite-ui-info)}:host([color=blue][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-info)}:host([color=red][appearance=clear]){border-color:var(--calcite-ui-danger)}:host([color=red][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-danger)}:host([color=yellow][appearance=clear]){border-color:var(--calcite-ui-warning)}:host([color=yellow][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-warning)}:host([color=green][appearance=clear]){border-color:var(--calcite-ui-success)}:host([color=green][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-success)}:host([color=grey][appearance=clear]){border-color:var(--calcite-ui-border-1)}:host([color=grey][appearance=clear]) .calcite-chip--icon{color:var(--calcite-ui-text-3)}";
+
+let CalciteChip = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** specify the appearance style of the button, defaults to solid. */
+    this.appearance = "solid";
+    /** specify the color of the button, defaults to blue */
+    this.color = "grey";
+    /** Optionally show a button the user can click to dismiss the chip */
+    this.dismissible = false;
+    /** Aria label for the "x" button
+     * @default "Close"
+     */
+    this.dismissLabel = TEXT.close;
+    /** flip the icon in rtl */
+    this.iconFlipRtl = false;
+    /** specify the scale of the chip, defaults to m */
+    this.scale = "m";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.closeClickHandler = (event) => {
+      event.preventDefault();
+      this.calciteChipDismiss.emit(this.el);
+    };
+    this.guid = guid();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderChipImage() {
+    const { el } = this;
+    const hasChipImage = getSlotted(el, SLOTS.image);
+    return hasChipImage ? (h("div", { class: CSS.chipImageContainer }, h("slot", { name: SLOTS.image }))) : null;
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: ICONS.close, scale: "s" })));
+    return (h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.dismissible ? closeButton : null));
+  }
+  get el() { return this; }
+  static get style() { return calciteChipCss; }
+};
+CalciteChip = /*@__PURE__*/ proxyCustomElement(CalciteChip, [1, "calcite-chip", {
+    "appearance": [513],
+    "color": [513],
+    "dismissible": [516],
+    "dismissLabel": [1, "dismiss-label"],
+    "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
+    "scale": [513],
+    "value": [8],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-chip", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteChip);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteChip as C, defineCustomElement as d };

package/dist/components/calcite-color-picker-hex-input.d.ts

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

package/dist/components/calcite-color-picker-hex-input.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { c as CalciteColorPickerHexInput$1, d as defineCustomElement$1 } from './calcite-color-picker-hex-input2.js';
+
+const CalciteColorPickerHexInput = CalciteColorPickerHexInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteColorPickerHexInput, defineCustomElement };