@esri/calcite-components 3.0.0-next.98 → 3.0.0

package/dist/components/calcite-carousel/customElement.js

@@ -1,23 +1,21 @@
 import { c as H } from "../../chunks/runtime.js";
-import { ref as b } from "lit-html/directives/ref.js";
+import { ref as y } from "lit-html/directives/ref.js";
 import { repeat as E } from "lit-html/directives/repeat.js";
 import { html as d, nothing as l } from "lit";
 import { LitElement as A, createEvent as m, safeClassMap as c } from "@arcgis/lumina";
 import { z as F, s as L, d as v, g as M } from "../../chunks/dom.js";
 import { g as U } from "../../chunks/guid.js";
 import { u as B, I as W } from "../../chunks/interactive.js";
-import { c as K, s as N, a as j } from "../../chunks/loadable.js";
-import { c as q } from "../../chunks/observers.js";
-import { b as y } from "../../chunks/responsive.js";
+import { c as K } from "../../chunks/loadable.js";
+import { c as N } from "../../chunks/observers.js";
+import { b } from "../../chunks/responsive.js";
 import { g as R } from "../../chunks/array.js";
-import { u as G } from "../../chunks/useT9n.js";
-import { css as V } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-const Z = 6e3, a = {
+import { u as j } from "../../chunks/useT9n.js";
+import { css as q } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
+const V = 6e3, a = {
   container: "container",
   containerOverlaid: "container--overlaid",
   containerEdged: "container--edged",
@@ -48,23 +46,23 @@ const Z = 6e3, a = {
   small: 5,
   xsmall: 3,
   xxsmall: 1
-}, Y = V`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-internal-carousel-item-space: 1.5rem;--calcite-internal-internal-carousel-item-space-wide: 3.5rem;--calcite-internal-internal-carousel-item-background-color: var( --calcite-internal-carousel-item-background-color, var(--calcite-color-foreground-1) );--calcite-internal-internal-carousel-item-background-color-hover: var( --calcite-internal-carousel-item-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-internal-carousel-item-background-color-active: var( --calcite-internal-carousel-item-background-color-active, var(--calcite-color-foreground-2) );--calcite-internal-internal-carousel-item-background-color-selected: var( --calcite-internal-carousel-item-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-internal-carousel-item-icon-color-hover: var( --calcite-internal-carousel-item-icon-color-hover, var(--calcite-action-color-transparent-hover) );--calcite-internal-internal-carousel-item-icon-color: var( --calcite-internal-carousel-item-icon-color, var(--calcite-color-border-3) );--calcite-internal-internal-carousel-item-icon-color-selected: var( --calcite-internal-carousel-item-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-internal-carousel-control-color-hover: var( --calcite-internal-carousel-control-color-hover, var(--calcite-internal-carousel-item-icon-color-hover) );--calcite-internal-internal-carousel-control-color: var( --calcite-internal-carousel-item-icon-color, var(--calcite-color-border-input) );--calcite-internal-internal-carousel-autoplay-progress-background-color: var( --calcite-internal-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-internal-carousel-autoplay-progress-fill-color: var( --calcite-internal-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);outline-color:transparent}.container:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-internal-carousel-item-space-wide);inline-size:calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{margin:.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-internal-carousel-control-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-internal-carousel-control-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-internal-carousel-control-color);--calcite-color-brand: var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);--calcite-color-border-3: var(--calcite-internal-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;--calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color);color:var(--calcite-internal-internal-carousel-item-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{--calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color-selected);--calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);color:var(--calcite-internal-internal-carousel-item-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-internal-carousel-item-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
-class J extends A {
+}, G = q`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-internal-carousel-item-space: 1.5rem;--calcite-internal-internal-carousel-item-space-wide: 3.5rem;--calcite-internal-internal-carousel-item-background-color: var( --calcite-internal-carousel-item-background-color, var(--calcite-color-foreground-1) );--calcite-internal-internal-carousel-item-background-color-hover: var( --calcite-internal-carousel-item-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-internal-carousel-item-background-color-active: var( --calcite-internal-carousel-item-background-color-active, var(--calcite-color-foreground-2) );--calcite-internal-internal-carousel-item-background-color-selected: var( --calcite-internal-carousel-item-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-internal-carousel-item-icon-color-hover: var( --calcite-internal-carousel-item-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-internal-carousel-item-icon-color: var( --calcite-internal-carousel-item-icon-color, var(--calcite-color-border-1) );--calcite-internal-internal-carousel-item-icon-color-selected: var( --calcite-internal-carousel-item-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-internal-carousel-control-color-hover: var( --calcite-internal-carousel-control-color-hover, var(--calcite-color-text-1) );--calcite-internal-internal-carousel-control-color: var( --calcite-internal-carousel-item-icon-color, var(--calcite-color-text-3) );--calcite-internal-internal-carousel-autoplay-progress-background-color: var( --calcite-internal-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-internal-carousel-autoplay-progress-fill-color: var( --calcite-internal-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);outline-color:transparent}.container:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-internal-carousel-item-space-wide);inline-size:calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{margin:.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-internal-carousel-control-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-internal-carousel-control-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-internal-carousel-control-color);--calcite-progress-fill-color: var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;--calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color);color:var(--calcite-internal-internal-carousel-item-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{--calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color-selected);--calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);color:var(--calcite-internal-internal-carousel-item-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-internal-carousel-item-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+class Z extends A {
   constructor() {
     super(...arguments), this.autoplayHandler = () => {
       this.clearIntervals(), this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);
     }, this.containerId = `calcite-carousel-container-${U()}`, this.resizeHandler = ({ contentRect: { width: e } }) => {
       this.setMaxItemsToBreakpoint(e);
-    }, this.resizeObserver = q("resize", (e) => e.forEach(this.resizeHandler)), this.slideDurationInterval = null, this.slideInterval = null, this.timer = () => {
+    }, this.resizeObserver = N("resize", (e) => e.forEach(this.resizeHandler)), this.slideDurationInterval = null, this.slideInterval = null, this.timer = () => {
       let e = this.slideDurationRemaining;
-      (!this.suspendedDueToFocus && !this.suspendedDueToHover || this.userPreventsSuspend) && (e <= 0.01 ? (e = 1, this.nextItem(!1)) : e = e - 0.01), e > 0 && (this.slideDurationRemaining = e);
-    }, this.direction = "standby", this.items = [], this.maxItems = g.xxsmall, this.playing = !1, this.slideDurationRemaining = 1, this.suspendedDueToFocus = !1, this.suspendedDueToHover = !1, this.suspendedSlideDurationRemaining = 1, this.userPreventsSuspend = !1, this.arrowType = "inline", this.autoplay = !1, this.autoplayDuration = Z, this.controlOverlay = !1, this.disabled = !1, this.messages = G(), this.calciteCarouselChange = m({ cancelable: !1 }), this.calciteCarouselPause = m({ cancelable: !1 }), this.calciteCarouselPlay = m({ cancelable: !1 }), this.calciteCarouselResume = m({ cancelable: !1 }), this.calciteCarouselStop = m({ cancelable: !1 });
+      (!this.suspendedDueToFocus && !this.suspendedDueToHover || this.userPreventsSuspend) && (e <= 0.01 ? (e = 1, this.direction = "forward", this.nextItem(!1)) : e = e - 0.01), e > 0 && (this.slideDurationRemaining = e);
+    }, this.direction = "standby", this.items = [], this.maxItems = g.xxsmall, this.playing = !1, this.slideDurationRemaining = 1, this.suspendedDueToFocus = !1, this.suspendedDueToHover = !1, this.suspendedSlideDurationRemaining = 1, this.userPreventsSuspend = !1, this.arrowType = "inline", this.autoplay = !1, this.autoplayDuration = V, this.controlOverlay = !1, this.disabled = !1, this.messages = j(), this.calciteCarouselChange = m({ cancelable: !1 }), this.calciteCarouselPause = m({ cancelable: !1 }), this.calciteCarouselPlay = m({ cancelable: !1 }), this.calciteCarouselResume = m({ cancelable: !1 }), this.calciteCarouselStop = m({ cancelable: !1 });
   }
   static {
     this.properties = { direction: 16, items: 16, maxItems: 16, playing: 16, selectedIndex: 16, slideDurationRemaining: 16, suspendedDueToFocus: 16, suspendedDueToHover: 16, suspendedSlideDurationRemaining: 16, userPreventsSuspend: 16, arrowType: 3, autoplay: 3, autoplayDuration: 11, controlOverlay: 7, disabled: 7, label: 1, messageOverrides: 0, paused: 5, selectedItem: 0 };
   }
   static {
-    this.styles = Y;
+    this.styles = G;
   }
   // #endregion
   // #region Public Methods
@@ -86,7 +84,7 @@ class J extends A {
     super.connectedCallback(), this.resizeObserver?.observe(this.el);
   }
   async load() {
-    (this.autoplay === "" || this.autoplay) && this.autoplay !== "paused" ? this.handlePlay(!1) : this.autoplay === "paused" && (this.paused = !0), N(this);
+    (this.autoplay === "" || this.autoplay) && this.autoplay !== "paused" ? this.handlePlay(!1) : this.autoplay === "paused" && (this.paused = !0);
   }
   willUpdate(e) {
     e.has("autoplay") && this.hasUpdated && this.autoplayWatcher(this.autoplay), e.has("direction") && (this.hasUpdated || this.direction !== "standby") && this.directionWatcher(this.direction), e.has("playing") && (this.hasUpdated || this.playing !== !1) && (this.paused = !this.playing), (e.has("suspendedDueToFocus") && (this.hasUpdated || this.suspendedDueToFocus !== !1) || e.has("suspendedDueToHover") && (this.hasUpdated || this.suspendedDueToHover !== !1)) && this.suspendWatcher();
@@ -95,7 +93,6 @@ class J extends A {
     B(this);
   }
   loaded() {
-    j(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.clearIntervals(), this.resizeObserver?.disconnect();
@@ -113,15 +110,15 @@ class J extends A {
   }
   setMaxItemsToBreakpoint(e) {
     if (e) {
-      if (e >= y.width.small) {
+      if (e >= b.width.small) {
         this.maxItems = g.medium;
         return;
       }
-      if (e >= y.width.xsmall) {
+      if (e >= b.width.xsmall) {
         this.maxItems = g.small;
         return;
       }
-      if (e >= y.width.xxsmall) {
+      if (e >= b.width.xxsmall) {
         this.maxItems = g.xsmall;
         return;
       }
@@ -169,7 +166,7 @@ class J extends A {
   }
   handleArrowClick(e) {
     const t = e.target.dataset.direction;
-    t === "next" ? (this.direction = "forward", this.nextItem(!0)) : t === "previous" && (this.direction = "backward", this.previousItem());
+    this.playing && this.handlePause(!0), t === "next" ? (this.direction = "forward", this.nextItem(!0)) : t === "previous" && (this.direction = "backward", this.previousItem());
   }
   handleItemSelection(e) {
     const t = e.target, i = parseInt(t.dataset.index);
@@ -250,22 +247,22 @@ class J extends A {
   // #endregion
   // #region Rendering
   renderRotationControl() {
-    const e = this.playing ? this.messages.pause : this.messages.play;
+    const e = this.playing ? this.messages.pause : this.messages.play, t = this.slideDurationRemaining * 100;
     return d`<button .ariaLabel=${e} class=${c({
       [a.paginationItem]: !0,
       [a.autoplayControl]: !0
-    })} @click=${this.toggleRotation} title=${e ?? l}><calcite-icon .icon=${this.playing ? p.pause : p.play} scale=s></calcite-icon>${this.playing && d`<calcite-progress class=${c(a.autoplayProgress)} .label=${this.messages.carouselItemProgress} .value=${this.slideDurationRemaining}></calcite-progress>` || ""}</button>`;
+    })} @click=${this.toggleRotation} title=${e ?? l}><calcite-icon .icon=${this.playing ? p.pause : p.play} scale=s></calcite-icon>${this.playing && d`<calcite-progress class=${c(a.autoplayProgress)} .label=${this.messages.carouselItemProgress} .value=${t}></calcite-progress>` || ""}</button>`;
   }
   renderPaginationArea() {
     return d`<div class=${c({
       [a.pagination]: !0,
       [a.containerOverlaid]: this.controlOverlay
-    })} @keydown=${this.tabListKeyDownHandler} ${b(this.storeTabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.renderArrow("previous") || ""}${this.renderPaginationItems()}${this.arrowType === "inline" && this.renderArrow("next") || ""}</div>`;
+    })} @keydown=${this.tabListKeyDownHandler} ${y(this.storeTabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.renderArrow("previous") || ""}${this.renderPaginationItems()}${this.arrowType === "inline" && this.renderArrow("next") || ""}</div>`;
   }
   renderPaginationItems() {
     const { selectedIndex: e, maxItems: t, items: i, label: r, handleItemSelection: s } = this;
     return d`<div .ariaLabel=${r} class=${c(a.paginationItems)} role=tablist>${E(i, (o) => o.id, (o, n) => {
-      const h = i.length, u = n === e, S = n === 0, T = n === h - 1, I = h - t - 1, f = e < t, k = e >= I, x = f ? 0 : e - Math.floor(t / 2), P = k ? h : x + t, w = f ? 0 : k ? I : x, D = f ? t + 1 : P, z = !S && !T && !u && (n === w - 1 || n === D), $ = u || n <= D && n >= w - 1, C = h - 1 <= t, O = u ? p.active : p.inactive;
+      const h = i.length, u = n === e, S = n === 0, P = n === h - 1, I = h - t - 1, f = e < t, k = e >= I, x = f ? 0 : e - Math.floor(t / 2), T = k ? h : x + t, w = f ? 0 : k ? I : x, D = f ? t + 1 : T, z = !S && !P && !u && (n === w - 1 || n === D), $ = u || n <= D && n >= w - 1, C = h - 1 <= t, O = u ? p.active : p.inactive;
       return d`<button aria-controls=${(u ? void 0 : o.id) ?? l} .ariaSelected=${u} class=${c({
         [a.paginationItem]: !0,
         [a.paginationItemIndividual]: !0,
@@ -286,14 +283,14 @@ class J extends A {
       [a.container]: !0,
       [a.containerOverlaid]: this.controlOverlay,
       [a.containerEdged]: this.arrowType === "edge"
-    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${b(this.storeContainerRef)}><section class=${c({
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${y(this.storeContainerRef)}><section class=${c({
       [a.itemContainer]: !0,
       [a.itemContainerForward]: e === "forward",
       [a.itemContainerBackward]: e === "backward"
-    })} id=${this.containerId ?? l} ${b(this.storeItemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>${this.items.length > 1 && this.renderPaginationArea() || ""}${this.arrowType === "edge" && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.renderArrow("next") || ""}</div>` });
+    })} id=${this.containerId ?? l} ${y(this.storeItemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>${this.items.length > 1 && this.renderPaginationArea() || ""}${this.arrowType === "edge" && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.renderArrow("next") || ""}</div>` });
   }
 }
-H("calcite-carousel", J);
+H("calcite-carousel", Z);
 export {
-  J as Carousel
+  Z as Carousel
 };

package/dist/components/calcite-carousel-item/customElement.js

@@ -3,11 +3,9 @@ import { html as i } from "lit-html";
 import { LitElement as l, setAttribute as o, safeClassMap as a } from "@arcgis/lumina";
 import { g as c } from "../../chunks/guid.js";
 import { css as n } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const e = {
   container: "container",
   selected: "selected"

package/dist/components/calcite-checkbox/customElement.d.ts

@@ -34,7 +34,10 @@ export declare class Checkbox extends LitElement {
      * Required to pass the component's `value` on form submission.
      */
     name: string;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;

package/dist/components/calcite-checkbox/customElement.js

@@ -1,30 +1,28 @@
 import { C as c, c as a } from "../../chunks/runtime.js";
-import { html as l, svg as n } from "lit-html";
-import { createRef as r, ref as h } from "lit-html/directives/ref.js";
+import { html as l, svg as r } from "lit-html";
+import { createRef as n, ref as h } from "lit-html/directives/ref.js";
 import { LitElement as d, createEvent as t, safeClassMap as o, nothing as i } from "@arcgis/lumina";
 import { g } from "../../chunks/dom.js";
-import { c as b, d as m, H as p } from "../../chunks/form.js";
-import { u, I as f } from "../../chunks/interactive.js";
+import { c as b, d as u, H as m } from "../../chunks/form.js";
+import { u as p, I as f } from "../../chunks/interactive.js";
 import { i as k } from "../../chunks/key.js";
 import { c as v, d as x, g as y } from "../../chunks/label.js";
-import { c as C, s as z, a as w } from "../../chunks/loadable.js";
-import { css as I } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { c as C } from "../../chunks/loadable.js";
+import { css as z } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const s = {
   toggle: "toggle",
   check: "check-svg"
-}, L = I`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size--1));block-size:var(--calcite-checkbox-size, var(--calcite-font-size--1))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media (forced-colors: active){.check-svg{border:1px solid currentColor}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
-class F extends d {
+}, w = z`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size--1));block-size:var(--calcite-checkbox-size, var(--calcite-font-size--1))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media (forced-colors: active){.check-svg{border:1px solid currentColor}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+class I extends d {
   // #endregion
   // #region Lifecycle
   constructor() {
     super(), this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z", this.indeterminatePath = "M13 8v1H3V8z", this.onLabelClick = () => {
       this.toggle();
-    }, this.toggleEl = r(), this.checked = !1, this.disabled = !1, this.hovered = !1, this.indeterminate = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
+    }, this.toggleEl = n(), this.checked = !1, this.disabled = !1, this.hovered = !1, this.indeterminate = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
       valid: !1,
       badInput: !1,
       customError: !1,
@@ -42,7 +40,7 @@ class F extends d {
     this.properties = { checked: 7, disabled: 7, form: 3, hovered: 7, indeterminate: 7, label: 1, name: 3, required: 7, scale: 3, status: 3, validity: 0, value: 1 };
   }
   static {
-    this.styles = L;
+    this.styles = w;
   }
   // #endregion
   // #region Public Methods
@@ -54,16 +52,14 @@ class F extends d {
     super.connectedCallback(), v(this), b(this);
   }
   load() {
-    z(this);
   }
   updated() {
-    u(this);
+    p(this);
   }
   loaded() {
-    w(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), x(this), m(this);
+    super.disconnectedCallback(), x(this), u(this);
   }
   // #endregion
   // #region Private Methods
@@ -95,10 +91,10 @@ class F extends d {
     return f({ disabled: this.disabled, children: l`<div .ariaChecked=${this.checked} .ariaLabel=${y(this)} class=${o({
       [s.toggle]: !0,
       [c.rtl]: e
-    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? i} ${h(this.toggleEl)}><svg aria-hidden=true class=${o(s.check)} viewBox="0 0 16 16">${n`<path d=${this.getPath() ?? i} />`}</svg><slot></slot></div>${p({ component: this })}` });
+    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? i} ${h(this.toggleEl)}><svg aria-hidden=true class=${o(s.check)} viewBox="0 0 16 16">${r`<path d=${this.getPath() ?? i} />`}</svg><slot></slot></div>${m({ component: this })}` });
   }
 }
-a("calcite-checkbox", F);
+a("calcite-checkbox", I);
 export {
-  F as Checkbox
+  I as Checkbox
 };

package/dist/components/calcite-chip/customElement.js

@@ -1,20 +1,18 @@
-import { i as p, c as d } from "../../chunks/runtime.js";
+import { i as h, c as d } from "../../chunks/runtime.js";
 import { html as i } from "lit";
 import { createRef as o, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as a, safeClassMap as c } from "@arcgis/lumina";
-import { a as u } from "../../chunks/dom.js";
-import { c as g, s as v, a as b } from "../../chunks/loadable.js";
-import { u as x, I as f } from "../../chunks/interactive.js";
-import { i as k } from "../../chunks/key.js";
+import { LitElement as m, createEvent as a, safeClassMap as t } from "@arcgis/lumina";
+import { a as v } from "../../chunks/dom.js";
+import { c as g } from "../../chunks/loadable.js";
+import { u as x, I as u } from "../../chunks/interactive.js";
+import { i as b } from "../../chunks/key.js";
 import { g as n } from "../../chunks/component.js";
-import { u as y } from "../../chunks/useT9n.js";
-import { css as z } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-const t = {
+import { u as f } from "../../chunks/useT9n.js";
+import { css as k } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
+const c = {
   title: "title",
   close: "close",
   imageContainer: "image-container",
@@ -31,25 +29,25 @@ const t = {
   nonInteractive: "non-interactive",
   isCircle: "is-circle",
   selected: "selected"
-}, C = {
+}, z = {
   image: "image"
 }, l = {
   close: "x",
   checkedSingle: "circle-f",
   uncheckedMultiple: "square",
   checkedMultiple: "check-square-f"
-}, I = z`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{--calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]):host([kind=brand]) .container,:host([appearance=outline-fill]):host([kind=brand]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]) .container,:host([appearance=outline-fill]):host([kind=inverse]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]) .container,:host([appearance=outline-fill]):host([kind=neutral]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]) .container{background-color:transparent}:host([appearance=outline-fill]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]) .container{border-color:transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=neutral]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{--calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([selected]) .select-icon{opacity:1}:host([scale=s]) .container{--calcite-internal-chip-block-size: 1.5rem ;--calcite-internal-chip-container-space-x-end: .25rem ;--calcite-internal-chip-container-space-x-start: .25rem ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: 1rem ;--calcite-internal-chip-icon-space: .25rem ;--calcite-internal-chip-image-size: 1.25rem ;--calcite-internal-chip-title-space: .25rem ;--calcite-internal-close-size: 1rem }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .25rem }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: .375rem ;--calcite-internal-chip-select-space-x-start: 0}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .25rem ;--calcite-internal-chip-select-space-x-end: .25rem ;--calcite-internal-chip-select-space-x-start: .25rem }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .375rem ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: .375rem }:host([scale=m]) .container{--calcite-internal-chip-block-size: 2rem ;--calcite-internal-chip-container-space-x-end: .375rem ;--calcite-internal-chip-container-space-x-start: .375rem ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: 1.5rem ;--calcite-internal-chip-icon-space: .375rem ;--calcite-internal-chip-image-size: 1.5rem ;--calcite-internal-chip-title-space: .375rem ;--calcite-internal-close-size: 1.5rem }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: .25rem }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .375rem }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: .25rem }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: 0}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .25rem ;--calcite-internal-chip-select-space-x-start: .375rem }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .25rem }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: .25rem }:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: 2rem ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: 2rem ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: 2rem }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: .25rem ;--calcite-internal-chip-container-space-x-start: .25rem }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: .375rem }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: .375rem }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: .25rem ;--calcite-internal-chip-select-space-x-start: 0}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .375rem ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: .25rem ;--calcite-internal-chip-select-space-x-start: .25rem }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: .375rem }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:1}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:0}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, 1.5rem);inline-size:var(--calcite-internal-chip-image-size, 1.5rem);padding-inline-start:0;padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, .375rem)}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:.5;color:var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, 1.5rem);inline-size:var(--calcite-internal-chip-icon-size, 1.5rem)}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0;cursor:pointer;align-items:center;border-radius:50%;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color, var(--calcite-color-text-1))));block-size:var(--calcite-internal-close-size, 1.5rem);inline-size:var(--calcite-internal-close-size, 1.5rem);padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
-class S extends m {
+}, y = k`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]) .close,:host([appearance=outline-fill]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([appearance=outline]):host([kind=brand]) .container,:host([appearance=outline-fill]):host([kind=brand]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]) .container,:host([appearance=outline-fill]):host([kind=inverse]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]) .container,:host([appearance=outline-fill]):host([kind=neutral]) .container{border-color:var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]) .container{background-color:transparent}:host([appearance=outline-fill]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]) .container{border-color:transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=inverse]) .close:hover{background-color:var(--calcite-color-inverse-hover)}:host([appearance=solid]):host([kind=inverse]) .close:active{background-color:var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=neutral]) .container{background-color:var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([kind=neutral]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([selected]) .select-icon{opacity:1}:host([scale=s]) .container{--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: var(--calcite-size-xs, 1rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-image-size: var(--calcite-spacing-xl, 1.25rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-close-size: var(--calcite-size-xs, 1rem) }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container{--calcite-internal-chip-block-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-image-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-close-size: var(--calcite-size-sm, 1.5rem) }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: var(--calcite-size-md, 2rem) }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:var(--calcite-opacity-full, 1)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:var(--calcite-spacing-none, 0)}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));padding-inline-start:var(--calcite-spacing-none, 0);padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, var(--calcite-spacing-xs, .375rem))}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:var(--calcite-opacity-half, .5);color:var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem))}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0;cursor:pointer;align-items:center;border-radius:50%;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));block-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+class C extends m {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.closeButtonEl = o(), this.containerEl = o(), this.hasImage = !1, this.hasText = !1, this.appearance = "solid", this.closable = !1, this.closed = !1, this.closeOnDelete = !1, this.disabled = !1, this.iconFlipRtl = !1, this.interactive = !1, this.kind = "neutral", this.messages = y(), this.scale = "m", this.selected = !1, this.selectionMode = "none", this.calciteChipClose = a({ cancelable: !1 }), this.calciteChipSelect = a({ cancelable: !1 }), this.calciteInternalChipKeyEvent = a({ cancelable: !1 }), this.calciteInternalChipSelect = a({ cancelable: !1 }), this.calciteInternalSyncSelectedChips = a({ cancelable: !1 }), this.listen("keydown", this.keyDownHandler), this.listen("click", this.clickHandler);
+    super(), this.closeButtonEl = o(), this.containerEl = o(), this.hasImage = !1, this.hasText = !1, this.appearance = "solid", this.closable = !1, this.closed = !1, this.closeOnDelete = !1, this.disabled = !1, this.iconFlipRtl = !1, this.interactive = !1, this.kind = "neutral", this.messages = f(), this.scale = "m", this.selected = !1, this.selectionMode = "none", this.calciteChipClose = a({ cancelable: !1 }), this.calciteChipSelect = a({ cancelable: !1 }), this.calciteInternalChipKeyEvent = a({ cancelable: !1 }), this.calciteInternalChipSelect = a({ cancelable: !1 }), this.calciteInternalSyncSelectedChips = a({ cancelable: !1 }), this.listen("keydown", this.keyDownHandler), this.listen("click", this.clickHandler);
   }
   static {
     this.properties = { hasImage: 16, hasText: 16, appearance: 3, closable: 7, closed: 7, closeOnDelete: 7, disabled: 7, icon: 3, iconFlipRtl: 7, interactive: 5, kind: 3, label: 1, messageOverrides: 0, parentChipGroup: 0, scale: 3, selected: 7, selectionMode: 1, value: 1 };
   }
   static {
-    this.styles = I;
+    this.styles = y;
   }
   // #endregion
   // #region Public Methods
@@ -58,7 +56,7 @@ class S extends m {
     await g(this), !this.disabled && this.interactive ? this.containerEl.value?.focus() : !this.disabled && this.closable && this.closeButtonEl.value?.focus();
   }
   async load() {
-    v(this), p() && this.updateHasText();
+    h() && this.updateHasText();
   }
   willUpdate(e) {
     e.has("selected") && this.hasUpdated && this.watchSelected(this.selected);
@@ -67,7 +65,7 @@ class S extends m {
     x(this);
   }
   loaded() {
-    b(this), this.selectionMode !== "none" && this.interactive && this.selected && this.handleSelectionPropertyChange(this.selected);
+    this.selectionMode !== "none" && this.interactive && this.selected && this.handleSelectionPropertyChange(this.selected);
   }
   // #endregion
   // #region Private Methods
@@ -103,13 +101,13 @@ class S extends m {
     this.calciteChipClose.emit(), this.selected = !1, this.closed = !0;
   }
   closeButtonKeyDownHandler(e) {
-    k(e.key) && (e.preventDefault(), this.close());
+    b(e.key) && (e.preventDefault(), this.close());
   }
   updateHasText() {
     this.hasText = this.el.textContent.trim().length > 0;
   }
   handleSlotImageChange(e) {
-    this.hasImage = u(e);
+    this.hasImage = v(e);
   }
   handleEmittingEvent() {
     this.interactive && this.calciteChipSelect.emit();
@@ -120,38 +118,38 @@ class S extends m {
   // #endregion
   // #region Rendering
   renderChipImage() {
-    return i`<div class=${c(t.imageContainer)}><slot name=${C.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
+    return i`<div class=${t(c.imageContainer)}><slot name=${z.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
   }
   renderSelectionIcon() {
     const e = this.selectionMode === "multiple" ? this.selected ? l.checkedMultiple : l.uncheckedMultiple : this.selected ? l.checkedSingle : void 0;
-    return i`<div class=${c({
-      [t.selectIcon]: !0,
-      [t.selectIconActive]: this.selectionMode === "multiple" || this.selected
+    return i`<div class=${t({
+      [c.selectIcon]: !0,
+      [c.selectIconActive]: this.selectionMode === "multiple" || this.selected
     })}>${e ? i`<calcite-icon .icon=${e} .scale=${n(this.scale)}></calcite-icon>` : null}</div>`;
   }
   renderCloseButton() {
-    return i`<button .ariaLabel=${this.messages.dismissLabel} class=${c(t.close)} @click=${this.close} @keydown=${this.closeButtonKeyDownHandler} .tabIndex=${this.disabled ? -1 : 0} ${r(this.closeButtonEl)}><calcite-icon .icon=${l.close} .scale=${n(this.scale)}></calcite-icon></button>`;
+    return i`<button .ariaLabel=${this.messages.dismissLabel} class=${t(c.close)} @click=${this.close} @keydown=${this.closeButtonKeyDownHandler} .tabIndex=${this.disabled ? -1 : 0} ${r(this.closeButtonEl)}><calcite-icon .icon=${l.close} .scale=${n(this.scale)}></calcite-icon></button>`;
   }
   renderIcon() {
-    return i`<calcite-icon class=${c(t.chipIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} .scale=${n(this.scale)}></calcite-icon>`;
+    return i`<calcite-icon class=${t(c.chipIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} .scale=${n(this.scale)}></calcite-icon>`;
   }
   render() {
-    const { disabled: e } = this, s = e || !e && !this.interactive, h = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : "img";
-    return f({ disabled: e, children: i`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${this.label} class=${c({
-      [t.container]: !0,
-      [t.textSlotted]: this.hasText,
-      [t.imageSlotted]: this.hasImage,
-      [t.selectable]: this.selectionMode !== "none",
-      [t.multiple]: this.selectionMode === "multiple",
-      [t.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
-      [t.selected]: this.selected,
-      [t.closable]: this.closable,
-      [t.nonInteractive]: !this.interactive,
-      [t.isCircle]: !this.closable && !this.hasText && (!this.icon || !this.hasImage) && (this.selectionMode === "none" || !!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)
-    })} @click=${this.handleEmittingEvent} .role=${h} .tabIndex=${s ? -1 : 0} ${r(this.containerEl)}>${this.selectionMode !== "none" && this.renderSelectionIcon() || ""}${this.renderChipImage()}${this.icon && this.renderIcon() || ""}<span class=${c(t.title)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></span>${this.closable && this.renderCloseButton() || ""}</div>` });
+    const { disabled: e } = this, s = e || !e && !this.interactive, p = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : "img";
+    return u({ disabled: e, children: i`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${this.label} class=${t({
+      [c.container]: !0,
+      [c.textSlotted]: this.hasText,
+      [c.imageSlotted]: this.hasImage,
+      [c.selectable]: this.selectionMode !== "none",
+      [c.multiple]: this.selectionMode === "multiple",
+      [c.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
+      [c.selected]: this.selected,
+      [c.closable]: this.closable,
+      [c.nonInteractive]: !this.interactive,
+      [c.isCircle]: !this.closable && !this.hasText && (!this.icon || !this.hasImage) && (this.selectionMode === "none" || !!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)
+    })} @click=${this.handleEmittingEvent} .role=${p} .tabIndex=${s ? -1 : 0} ${r(this.containerEl)}>${this.selectionMode !== "none" && this.renderSelectionIcon() || ""}${this.renderChipImage()}${this.icon && this.renderIcon() || ""}<span class=${t(c.title)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></span>${this.closable && this.renderCloseButton() || ""}</div>` });
   }
 }
-d("calcite-chip", S);
+d("calcite-chip", C);
 export {
-  S as Chip
+  C as Chip
 };

package/dist/components/calcite-chip-group/customElement.js

@@ -4,15 +4,13 @@ import { createRef as o, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as r, createEvent as h } from "@arcgis/lumina";
 import { d as i, s as d } from "../../chunks/dom.js";
 import { u as p, I as m } from "../../chunks/interactive.js";
-import { c as f, s as u, a as g } from "../../chunks/loadable.js";
-import { css as I } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-const b = I`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
-class C extends r {
+import { c as f } from "../../chunks/loadable.js";
+import { css as u } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
+const g = u`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+class I extends r {
   // #endregion
   // #region Lifecycle
   constructor() {
@@ -22,7 +20,7 @@ class C extends r {
     this.properties = { disabled: 7, label: 1, scale: 3, selectedItems: 0, selectionMode: 3 };
   }
   static {
-    this.styles = b;
+    this.styles = g;
   }
   // #endregion
   // #region Public Methods
@@ -32,7 +30,6 @@ class C extends r {
       return (this.selectedItems[0] || this.items[0])?.setFocus();
   }
   load() {
-    u(this);
   }
   willUpdate(e) {
     e.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") && this.updateItems();
@@ -41,7 +38,6 @@ class C extends r {
     p(this);
   }
   loaded() {
-    g(this);
   }
   // #endregion
   // #region Private Methods
@@ -110,7 +106,7 @@ class C extends r {
     return m({ disabled: t, children: c`<div .ariaLabel=${this.label} class="container" .role=${e}><slot @slotchange=${this.updateItems} ${n(this.slotRefEl)}></slot></div>` });
   }
 }
-a("calcite-chip-group", C);
+a("calcite-chip-group", I);
 export {
-  C as ChipGroup
+  I as ChipGroup
 };

package/dist/components/calcite-color-picker/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { Scale } from '../interfaces';
 import { InteractiveComponent } from '../../utils/interactive';
 import { LoadableComponent } from '../../utils/loadable';