@esri/calcite-components 1.0.0-next.686 → 1.0.0-next.688

package/dist/components/calcite-tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';

package/dist/components/calcite-tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -43,6 +43,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.heading = undefined;
     this.hidden = false;
     this.icon = undefined;
+    this.iconFlipRtl = false;
     this.name = undefined;
     this.inputEnabled = false;
     this.inputAlignment = "start";
@@ -173,7 +174,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.insertAdjacentElement("beforeend", this.input);
   }
   render() {
-    const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
+    const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width, iconFlipRtl } = this;
     return (h("div", { class: {
         checked,
         container: true,
@@ -191,7 +192,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS.largeVisual]: heading && icon && !description,
         [CSS.widthAuto]: width === "auto",
         [CSS.widthFull]: width === "full"
-      } }, h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }), h("slot", null)));
+      } }, h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon, iconFlipRtl: iconFlipRtl }), h("slot", null)));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -206,6 +207,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "heading": [513],
     "hidden": [516],
     "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "name": [520],
     "inputEnabled": [516, "input-enabled"],
     "inputAlignment": [513, "input-alignment"],

package/dist/components/calcite-tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { T as Tile, d as defineCustomElement$1 } from './tile.js';
 

package/dist/components/calcite-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';

package/dist/components/calcite-tooltip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
 

package/dist/components/calcite-tree-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, c as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, m as filterDirectChildren, n as nodeListToArray } from './dom.js';

package/dist/components/calcite-tree.js

@@ -1,10 +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.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { f as focusElement, n as nodeListToArray, l as getRootNode } from './dom.js';
+import { h as focusElement, n as nodeListToArray, l as getRootNode } from './dom.js';
 
 function isTreeItem(element) {
   return element?.matches("calcite-tree-item");

package/dist/components/calcite-value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { I as ICON_TYPES } from './resources3.js';
@@ -57,6 +57,7 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.nonInteractive = false;
     this.handleActivated = false;
     this.icon = null;
+    this.iconFlipRtl = false;
     this.label = undefined;
     this.metadata = undefined;
     this.removable = false;
@@ -122,12 +123,12 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: SLOTS$1.actionsStart })) : null;
   }
   renderHandle() {
-    const { icon } = this;
+    const { icon, iconFlipRtl } = this;
     if (icon === ICON_TYPES.grip) {
       return (h("span", { class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
-        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
     }
   }
   render() {
@@ -142,6 +143,7 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "nonInteractive": [516, "non-interactive"],
     "handleActivated": [1028, "handle-activated"],
     "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "label": [513],
     "metadata": [16],
     "removable": [516],

package/dist/components/calcite-value-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { S as Sortable } from './sortable.esm.js';

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/chip.js

@@ -1,15 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
-import { b as getSlotted } from './dom.js';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { s as setComponentLoaded, a as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
+import { c as createObserver } from './observers.js';
+import { s as slotChangeHasAssignedElement } from './dom.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const CSS = {
@@ -17,7 +18,10 @@ const CSS = {
   close: "close",
   imageContainer: "image-container",
   chipIcon: "chip-icon",
-  closeIcon: "close-icon"
+  closeIcon: "close-icon",
+  contentSlotted: "content--slotted",
+  container: "container",
+  imageSlotted: "image--slotted"
 };
 const SLOTS = {
   image: "image"
@@ -26,7 +30,7 @@ const ICONS = {
   close: "x"
 };
 
-const chipCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([scale=s]){block-size: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]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-unit-l:0.75rem;--calcite-chip-spacing-unit-s:6px}:host([scale=m]) .image-container{block-size:1.5rem;inline-size:1.5rem;padding-inline-start:0.25rem}:host([scale=l]){block-size: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]) .image-container{block-size:2rem;inline-size:2rem;padding-inline-start:0.25rem}:host{box-sizing:border-box;display:inline-flex;cursor:default;align-items:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container{display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host span{padding-block:0;padding-inline:var(--calcite-chip-spacing-unit-l)}:host([closable]) span{padding-inline:var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s)}:host([icon]:not([closable])) span{padding-block:0;padding-inline:var(--calcite-chip-spacing-unit-l)}:host button{margin:0px;display:inline-flex;max-block-size:100%;min-block-size:100%;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-ui-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;border-start-start-radius:0;border-start-end-radius:50px;border-end-end-radius:50px;border-end-start-radius:0;padding-block:0;padding-inline: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)}.image-container{display:inline-flex;overflow:hidden;border-radius:50%}:host slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:0;margin-inline-start:var(--calcite-chip-spacing-unit-l);border-start-start-radius:0;border-start-end-radius:50px;border-end-end-radius:50px;border-end-start-radius:0}:host([color=blue]){border-color:transparent;background-color:var(--calcite-ui-info);color:var(--calcite-ui-text-inverse)}:host([color=red]){border-color:transparent;background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}:host([color=yellow]){border-color:transparent;background-color:var(--calcite-ui-warning);color:#151515}:host([color=green]){border-color:transparent;background-color:var(--calcite-ui-success);color:#151515}:host([color=grey]){border-color:transparent;background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host([color=grey]) button,:host([color=grey]) .close-icon{color:var(--calcite-ui-text-3)}:host([color=grey]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([appearance=clear]),:host([appearance=transparent]){background-color:transparent;color:var(--calcite-ui-text-1)}:host([color=blue][appearance=clear]),:host([color=blue][appearance=transparent]){border-color:var(--calcite-ui-info)}:host([color=blue][appearance=clear]) .chip-icon,:host([color=blue][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-info))}:host([color=red][appearance=clear]),:host([color=red][appearance=transparent]){border-color:var(--calcite-ui-danger)}:host([color=red][appearance=clear]) .chip-icon,:host([color=red][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-danger))}:host([color=yellow][appearance=clear]),:host([color=yellow][appearance=transparent]){border-color:var(--calcite-ui-warning)}:host([color=yellow][appearance=clear]) .chip-icon,:host([color=yellow][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-warning))}:host([color=green][appearance=clear]),:host([color=green][appearance=transparent]){border-color:var(--calcite-ui-success)}:host([color=green][appearance=clear]) .chip-icon,:host([color=green][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-success))}:host([color=grey][appearance=clear]),:host([color=grey][appearance=transparent]){border-color:var(--calcite-ui-border-1)}:host([color=grey][appearance=clear]) .chip-icon,:host([color=grey][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([closed]){display:none}";
+const chipCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([scale=s]){block-size: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]) .image-container{block-size:1.25rem;inline-size:1.25rem;padding-inline-start:0.125rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-unit-l:0.75rem;--calcite-chip-spacing-unit-s:calc(0.75rem / 2)}:host([scale=m]) .image-container{block-size:1.5rem;inline-size:1.5rem;padding-inline-start:0.25rem}:host([scale=l]){block-size: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]) .image-container{block-size:2rem;inline-size:2rem;padding-inline-start:0.5rem}:host{box-sizing:border-box;display:inline-flex;cursor:default;align-items:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container{display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:0}.content--slotted .title{padding-inline:var(--calcite-chip-spacing-unit-l)}:host([closable][icon]) .container:not(.content--slotted) .title{padding-inline:0 var(--calcite-chip-spacing-unit-s)}:host(:not([closable])) .container:not(.content--slotted) .chip-icon{margin-inline:auto}.container:not(.image--slotted) .image-container{display:none}:host([scale=s][closable]) .container:not(.content--slotted) .image-container{margin-inline-end:0.125rem}:host([scale=m][closable]) .container:not(.content--slotted) .image-container{margin-inline-end:0.25rem}:host([scale=l][closable]) .container:not(.content--slotted) .image-container{margin-inline-end:0.5rem}:host([scale=s]:not([closable])) .container:not(.content--slotted){block-size:1.5rem;inline-size:1.5rem}:host([scale=s]:not([closable])) .container:not(.content--slotted) .image-container{padding-inline:0.125rem}:host([scale=m]:not([closable])) .container:not(.content--slotted){block-size:2rem;inline-size:2rem}:host([scale=m]:not([closable])) .container:not(.content--slotted) .image-container{padding-inline:0.25rem}:host([scale=l]:not([closable])) .container:not(.content--slotted){block-size:2.75rem;inline-size:2.75rem}:host([scale=l]:not([closable])) .container:not(.content--slotted) .image-container{padding-inline:calc(0.75rem / 2)}:host([closable]) .content--slotted .title{padding-inline:var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s)}:host([scale=s]) button{inline-size:1rem;block-size:1rem;margin-inline-end:0.125rem}:host([scale=m]) button{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:0.25rem}:host([scale=l]) button{inline-size:2rem;block-size:2rem;margin-inline-end:0.5rem}button{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-ui-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;padding-inline:var(--calcite-chip-spacing-unit-s);color:inherit;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-button-transparent-hover);--calcite-chip-transparent-press:var(--calcite-button-transparent-press)}button:hover{background-color:var(--calcite-chip-transparent-hover)}button:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}button:active{background-color:var(--calcite-chip-transparent-press)}.image-container{display:inline-flex;overflow:hidden}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:0;margin-inline-start:var(--calcite-chip-spacing-unit-l)}:host([kind=neutral]){border-color:transparent;background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host([kind=neutral]) button,:host([kind=neutral]) .close-icon{color:var(--calcite-ui-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([kind=inverse]){border-color:transparent;background-color:var(--calcite-ui-inverse);color:var(--calcite-ui-text-inverse)}:host([kind=inverse]) button,:host([kind=inverse]) .close-icon{color:var(--calcite-ui-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse))}:host([kind=brand]){border-color:transparent;background-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-inverse)}:host([kind=brand]) button,:host([kind=brand]) .close-icon{color:var(--calcite-ui-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) .close-icon,:host([appearance=outline]) button,:host([appearance=outline]) .close-icon{color:var(--calcite-ui-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-ui-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]),:host([kind=neutral][appearance=outline]){border-color:var(--calcite-ui-border-1)}:host([kind=inverse][appearance=outline-fill]),:host([kind=inverse][appearance=outline]){border-color:var(--calcite-ui-border-inverse)}:host([kind=brand][appearance=outline-fill]),:host([kind=brand][appearance=outline]){border-color:var(--calcite-ui-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-ui-text-inverse)}:host([closed]){display:none}";
 
 const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -44,9 +48,19 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.calciteChipClose.emit();
       this.closed = true;
     };
+    this.handleSlotImageChange = (event) => {
+      this.hasImage = slotChangeHasAssignedElement(event);
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /** watches for changing text content */
+    this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     this.guid = guid();
     this.appearance = "solid";
-    this.color = "grey";
+    this.kind = "neutral";
     this.closable = false;
     this.icon = undefined;
     this.iconFlipRtl = false;
@@ -57,6 +71,8 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.messages = undefined;
     this.defaultMessages = undefined;
     this.effectiveLocale = undefined;
+    this.hasContent = false;
+    this.hasImage = false;
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -73,6 +89,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
+    this.setupTextContentObserver();
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -84,7 +101,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await setUpMessages(this);
+    if (Build.isBrowser) {
+      await setUpMessages(this);
+      this.updateHasContent();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -96,20 +116,32 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     await componentLoaded(this);
     this.closeButton?.focus();
   }
+  updateHasContent() {
+    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
+    this.hasContent =
+      this.el.childNodes.length > 0 && this.el.childNodes[0]?.nodeName === "#text"
+        ? this.el.textContent?.trim().length > 0
+        : slottedContent;
+  }
+  setupTextContentObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
   //--------------------------------------------------------------------------
   //
   //  Render Methods
   //
   //--------------------------------------------------------------------------
   renderChipImage() {
-    const { el } = this;
-    const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image }))) : null;
+    return (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
   }
   render() {
-    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: "s" })));
-    return (h("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
+    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
+    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" })));
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.contentSlotted]: this.hasContent,
+        [CSS.imageSlotted]: this.hasImage
+      } }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
@@ -120,7 +152,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return chipCss; }
 }, [1, "calcite-chip", {
     "appearance": [513],
-    "color": [513],
+    "kind": [513],
     "closable": [1540],
     "icon": [513],
     "iconFlipRtl": [516, "icon-flip-rtl"],
@@ -131,6 +163,8 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "messages": [1040],
     "defaultMessages": [32],
     "effectiveLocale": [32],
+    "hasContent": [32],
+    "hasImage": [32],
     "setFocus": [64]
   }]);
 function defineCustomElement() {

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

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { i as isValidHex, a as isLonghandHex, r as rgbToHex, n as normalizeHex, b as hexChar } from './utils.js';
 import { c as color, d as defineCustomElement$4 } from './color-picker-swatch.js';
-import { f as focusElement } from './dom.js';
+import { h as focusElement } from './dom.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './input.js';

package/dist/components/color-picker-swatch.js

@@ -1,10 +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.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
-import { h as getThemeName } from './dom.js';
+import { f as getThemeName } from './dom.js';
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {

package/dist/components/conditionalSlot.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/date-picker-day.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { o as closestElementCrossShadowBoundary, c as getElementDir, C as CSS_UTILITY } from './dom.js';

package/dist/components/date-picker-month-header.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { h as getOrder, e as dateFromRange, n as nextMonth, p as prevMonth } from './date.js';

package/dist/components/date-picker-month.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as sameDate, e as dateFromRange, i as inRange } from './date.js';

package/dist/components/date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale.js';
@@ -456,6 +456,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getActiveEndDate(value, min, max) {
     return (dateFromRange(this.activeEndDate, min, max) || value || dateFromRange(new Date(), min, max));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
@@ -470,7 +471,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": ["valueHandler"]
   }; }
   static get style() { return datePickerCss; }
-}, [1, "calcite-date-picker", {
+}, [17, "calcite-date-picker", {
     "activeDate": [1040],
     "activeRange": [513, "active-range"],
     "value": [1025],

package/dist/components/date.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { n as numberStringFormatter } from './locale.js';
 

package/dist/components/debounce.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { g as guid } from './guid.js';
 
@@ -243,4 +243,4 @@ function isPrimaryPointerButton(event) {
   return !!(event.isPrimary && event.button === 0);
 }
 
-export { CSS_UTILITY as C, autoTheme as a, getSlotted as b, getElementDir as c, darkTheme as d, setRequestedIcon as e, focusElement as f, getElementProp as g, getThemeName as h, isPrimaryPointerButton as i, ensureId as j, intersects as k, getRootNode as l, filterDirectChildren as m, nodeListToArray as n, closestElementCrossShadowBoundary as o, containsCrossShadowBoundary as p, queryElementRoots as q, slotChangeHasAssignedElement as s, toAriaBoolean as t };
+export { CSS_UTILITY as C, autoTheme as a, getSlotted as b, getElementDir as c, darkTheme as d, setRequestedIcon as e, getThemeName as f, getElementProp as g, focusElement as h, isPrimaryPointerButton as i, ensureId as j, intersects as k, getRootNode as l, filterDirectChildren as m, nodeListToArray as n, closestElementCrossShadowBoundary as o, containsCrossShadowBoundary as p, queryElementRoots as q, slotChangeHasAssignedElement as s, toAriaBoolean as t };

package/dist/components/dropdown.js

@@ -1,10 +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.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, f as focusElement } from './dom.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, h as focusElement } from './dom.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, u as updateAfterClose, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
@@ -406,6 +406,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       : item;
     focusElement(target);
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get watchers() { return {
     "open": ["openHandler"],
@@ -416,7 +417,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "placement": ["placementHandler"]
   }; }
   static get style() { return dropdownCss; }
-}, [1, "calcite-dropdown", {
+}, [17, "calcite-dropdown", {
     "open": [1540],
     "closeOnSelectDisabled": [516, "close-on-select-disabled"],
     "disabled": [516],

package/dist/components/filter.js

@@ -1,10 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
-import { f as focusElement } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { f as filter } from './filter2.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
@@ -114,7 +113,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    focusElement(this.textInput);
+    this.el?.focus();
   }
   updateFiltered(filtered, emit = false) {
     this.filteredItems.length = 0;
@@ -134,6 +133,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.textInput = el;
       }, scale: scale, type: "text", value: this.value })))));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
@@ -143,7 +143,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return filterCss; }
-}, [1, "calcite-filter", {
+}, [17, "calcite-filter", {
     "items": [1040],
     "disabled": [516],
     "filteredItems": [1040],

package/dist/components/filter2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/floating-ui.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { c as getElementDir, o as closestElementCrossShadowBoundary } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';

package/dist/components/focusTrapComponent.js

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
-import { f as focusElement } from './dom.js';
+import { h as focusElement } from './dom.js';
 
 /*!
 * tabbable 6.0.1

package/dist/components/form.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.686
+ * v1.0.0-next.688
  */
 import { o as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client/index.js';