@esri/calcite-components 5.1.1-next.5 → 5.1.1

package/dist/chunks/utils2.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { isServer } from "lit";
 import { n as nodeListToArray } from "./dom.js";
-import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources5.js";
+import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources6.js";
 function getAncestors(element) {
   const parent = element.parentElement?.closest(AllComboboxChildrenSelector);
   const grandparent = parent?.parentElement?.closest(AllComboboxChildrenSelector);
@@ -47,12 +47,65 @@ function isSingleLike(selectionMode) {
 function getLabel(item) {
   return item.shortHeading || item.heading;
 }
+function orderByPrevious(items, previousItems) {
+  if (items.length < 2 || previousItems.length === 0) {
+    return items;
+  }
+  const previousItemOrder = new Map(previousItems.map((item, index) => [item, index]));
+  return [...items].sort((a, b) => {
+    const aOrder = previousItemOrder.get(a);
+    const bOrder = previousItemOrder.get(b);
+    if (aOrder !== void 0 && bOrder !== void 0) {
+      return aOrder - bOrder;
+    }
+    if (aOrder !== void 0) {
+      return -1;
+    }
+    if (bOrder !== void 0) {
+      return 1;
+    }
+    return 0;
+  });
+}
+function consumeValue(counts, value) {
+  const count = counts.get(value) ?? 0;
+  if (count === 0) {
+    return false;
+  }
+  if (count === 1) {
+    counts.delete(value);
+  } else {
+    counts.set(value, count - 1);
+  }
+  return true;
+}
+function orderValuesByPrevious(selectedValues, previousValues) {
+  if (selectedValues.length < 2 || previousValues.length === 0) {
+    return selectedValues;
+  }
+  const selectedValueCounts = /* @__PURE__ */ new Map();
+  selectedValues.forEach((value) => {
+    selectedValueCounts.set(value, (selectedValueCounts.get(value) ?? 0) + 1);
+  });
+  const orderedSelectedValues = previousValues.filter((value) => consumeValue(selectedValueCounts, value));
+  if (orderedSelectedValues.length === 0) {
+    return selectedValues;
+  }
+  selectedValues.forEach((value) => {
+    if (consumeValue(selectedValueCounts, value)) {
+      orderedSelectedValues.push(value);
+    }
+  });
+  return orderedSelectedValues;
+}
 export {
-  getItemAncestors as a,
-  getItemChildren as b,
-  getAncestors as c,
-  getDepth as d,
+  orderByPrevious as a,
+  getItemAncestors as b,
+  getItemChildren as c,
+  getAncestors as d,
+  getDepth as e,
   getLabel as g,
   hasActiveChildren as h,
-  isSingleLike as i
+  isSingleLike as i,
+  orderValuesByPrevious as o
 };

package/dist/components/calcite-accordion-item/customElement.d.ts

@@ -31,7 +31,7 @@ import type { HeadingLevel } from "../functional/Heading.js";
  */
 export abstract class AccordionItem extends LitElement {
   /** Specifies a description for the component. */
-  accessor description: string | undefined;
+  accessor description: string;
   /**
    * When `true`, expands the component and its contents.
    *
@@ -39,15 +39,15 @@ export abstract class AccordionItem extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string | undefined;
+  accessor heading: string;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel | undefined;
+  accessor headingLevel: HeadingLevel;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName | undefined;
+  accessor iconEnd: IconName;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       collapse?: string;

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

@@ -70,7 +70,7 @@ class AccordionItem extends LitElement {
     this.listenOn(document, "calciteInternalAccordionItemsSync", this.accordionItemSyncHandler);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], accordionParent: [0, {}, { attribute: false }], description: 1, expanded: [7, {}, { reflect: true, type: Boolean }], heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], appearance: 1, headingLevel: [11, {}, { type: Number, reflect: true }], iconPosition: 1, iconStart: [3, { type: String }, { reflect: true }], iconType: 1, scale: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

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

@@ -37,7 +37,7 @@ export abstract class Alert extends LitElement {
    * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
-  accessor icon: IconName | boolean | undefined;
+  accessor icon: IconName | boolean;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -59,7 +59,7 @@ export abstract class Alert extends LitElement {
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { close?: string; };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem | undefined;
+  accessor numberingSystem: NumberingSystem;
   /**
    * When `true`, displays and positions the component.
    *

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

@@ -95,9 +95,7 @@ const manager = new AlertManager();
 class Alert extends LitElement {
   constructor() {
     super(...arguments);
-    this.initialOpenTime = -1;
-    this.isHovered = false;
-    this.lastMouseOverBegin = -1;
+    this.autoCloseTimeoutId = null;
     this.transitionProp = "opacity";
     this.totalHoverTime = 0;
     this.totalOpenTime = 0;
@@ -228,7 +226,7 @@ class Alert extends LitElement {
   }
   clearAutoCloseTimeout() {
     window.clearTimeout(this.autoCloseTimeoutId);
-    this.autoCloseTimeoutId = void 0;
+    this.autoCloseTimeoutId = null;
   }
   closeAlert() {
     this.open = false;
@@ -288,10 +286,10 @@ class Alert extends LitElement {
       [`${CSS.container}--${placement}`]: true,
       [CSS.containerEmbedded]: this.embedded,
       [CSS.focused]: this.isFocused
-    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : void 0} @pointerleave=${this.autoClose ? this.handleMouseLeave : void 0} .popover=${!this.embedded ? "manual" : void 0} ${ref(this.transitionRef)}>${effectiveIcon && this.renderIcon(effectiveIcon) || ""}<div class=${safeClassMap(CSS.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0}><slot name=${SLOTS.title}></slot><slot name=${SLOTS.message}></slot><slot name=${SLOTS.link}></slot></div>${this.renderActionsEnd()}${hasQueuedAlerts ? this.renderQueueCount() : void 0}${this.renderCloseButton()}${open && active && autoClose ? html`<div class=${safeClassMap(CSS.dismissProgress)}></div>` : void 0}</div>`;
+    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} @pointerleave=${this.autoClose ? this.handleMouseLeave : null} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}>${effectiveIcon && this.renderIcon(effectiveIcon) || ""}<div class=${safeClassMap(CSS.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null}><slot name=${SLOTS.title}></slot><slot name=${SLOTS.message}></slot><slot name=${SLOTS.link}></slot></div>${this.renderActionsEnd()}${hasQueuedAlerts ? this.renderQueueCount() : null}${this.renderCloseButton()}${open && active && autoClose ? html`<div class=${safeClassMap(CSS.dismissProgress)}></div>` : null}</div>`;
   }
   renderCloseButton() {
-    return html`<calcite-action class=${safeClassMap(CSS.close)} icon=x .label=${this.messages.close} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : void 0} @focusout=${this.autoClose ? this.handleKeyBoardBlur : void 0} .scale=${this.scale} .text=${this.messages.close}></calcite-action>`;
+    return html`<calcite-action class=${safeClassMap(CSS.close)} icon=x .label=${this.messages.close} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null} .scale=${this.scale} .text=${this.messages.close}></calcite-action>`;
   }
   renderQueueCount() {
     const { openAlertCount } = this;

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

@@ -46,7 +46,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill | undefined;
+  accessor autocomplete: AutoFill;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -54,19 +54,19 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[] | undefined;
+  accessor flipPlacements: FlipPlacement[];
   /**
    * Specifies the `id` of the component's associated form.
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    *
    * To hide the default icon, set the property to `false` using JavaScript.
    */
-  accessor icon: IconName | boolean | undefined;
+  accessor icon: IconName | boolean;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -74,11 +74,11 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies the text typed into the component and is used to filter slotted `autocomplete-item`s. */
-  accessor inputValue: string | undefined;
+  accessor inputValue: string;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -91,7 +91,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number | undefined;
+  accessor maxLength: number;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       clear?: string;
@@ -104,7 +104,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number | undefined;
+  accessor minLength: number;
   /**
    * Specifies the name of the component.
    *
@@ -112,7 +112,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string | undefined;
+  accessor name: string;
   /**
    * When `true`, displays and positions the component.
    *
@@ -136,13 +136,13 @@ export abstract class Autocomplete extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string | undefined;
+  accessor pattern: string;
   /**
    * Specifies placeholder text for the component.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string | undefined;
+  accessor placeholder: string;
   /**
    * Determines where the component will be positioned relative to the container element.
    *
@@ -150,7 +150,7 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor placement: MenuPlacement;
   /** Specifies the component's prefix text. */
-  accessor prefixText: string | undefined;
+  accessor prefixText: string;
   /**
    * When `true`, the component's value can be read, but cannot be modified.
    *
@@ -178,7 +178,7 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor status: Status;
   /** Specifies the component's suffix text. */
-  accessor suffixText: string | undefined;
+  accessor suffixText: string;
   /**
    * When `true` and the component is `open`, disables top layer placement.
    *
@@ -189,9 +189,9 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean | undefined;
+  accessor validationIcon: IconName | boolean;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string | undefined;
+  accessor validationMessage: string;
   /**
    * The component's current validation state.
    *

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

@@ -130,7 +130,7 @@ class Autocomplete extends LitElement {
     this.transitionRef.value?.scrollTo(options);
   }
   async selectText() {
-    return this.referenceEl?.selectText();
+    return this.referenceEl.selectText();
   }
   async setFocus(options) {
     return this.focusSetter(() => this.referenceEl, options);
@@ -163,7 +163,7 @@ class Autocomplete extends LitElement {
     }
     let itemsAndGroupsUpdated = false;
     if (changes.has("inputValue") && (this.hasUpdated || this.inputValue)) {
-      this.inputValueMatchPattern = this.inputValue ? new RegExp(`(${escapeRegExp(this.inputValue)})`, "i") : void 0;
+      this.inputValueMatchPattern = this.inputValue && new RegExp(`(${escapeRegExp(this.inputValue)})`, "i");
       this.updateItems();
       this.updateGroups();
       itemsAndGroupsUpdated = true;
@@ -260,7 +260,7 @@ class Autocomplete extends LitElement {
     });
   }
   updateItems() {
-    let activeDescendant = "";
+    let activeDescendant = null;
     this.items.forEach((item) => {
       item.scale = this.scale;
       item.inputValueMatchPattern = this.inputValueMatchPattern;
@@ -386,7 +386,7 @@ class Autocomplete extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
       [CSS.contentContainer]: true,
       [CSS.floatingUIContainer]: true,
       [CSS.floatingUIContainerActive]: isOpen

package/dist/components/calcite-autocomplete-item/customElement.d.ts

@@ -13,7 +13,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class AutocompleteItem extends LitElement {
   /** Specifies a description for the component. Displays below the label text. */
-  accessor description: string | undefined;
+  accessor description: string;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -27,13 +27,13 @@ export abstract class AutocompleteItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName | undefined;
+  accessor iconEnd: IconName;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true`, the component is selected.
    *

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

@@ -9,9 +9,9 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Avatar extends LitElement {
   /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
-  accessor fullName: string | undefined;
+  accessor fullName: string;
   /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * Specifies the size of the component.
    *
@@ -19,9 +19,9 @@ export abstract class Avatar extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the `src` to an image. If the image is private, include an access token in the URL. */
-  accessor thumbnail: string | undefined;
+  accessor thumbnail: string;
   /** Specifies the unique id of the user. */
-  accessor userId: string | undefined;
+  accessor userId: string;
   /** Specifies the username of the user. */
-  accessor username: string | undefined;
+  accessor username: string;
 }

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

@@ -30,7 +30,7 @@ export abstract class Card extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true`, a busy indicator is displayed.
    *

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

@@ -70,6 +70,8 @@ class Carousel extends LitElement {
       this.setMaxItemsToBreakpoint(width);
     };
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
+    this.slideDurationInterval = null;
+    this.slideInterval = null;
     this.tabListRef = createRef();
     this.timer = () => {
       let time = this.slideDurationRemaining;
@@ -95,7 +97,6 @@ class Carousel extends LitElement {
     this.items = [];
     this.maxItems = centerItemsByBreakpoint.xxsmall;
     this.playing = false;
-    this.selectedIndex = 0;
     this.slideDurationRemaining = 1;
     this.suspendedDueToFocus = false;
     this.suspendedDueToHover = false;
@@ -121,7 +122,7 @@ class Carousel extends LitElement {
     this.styles = styles;
   }
   async play() {
-    if (this.playing || !this.hasMultiple || this.autoplay !== "" && this.autoplay !== true && this.autoplay !== "paused") {
+    if (this.playing || !this.hasMultiple || this.autoplay !== "" && !this.autoplay && this.autoplay !== "paused") {
       return;
     }
     this.handlePlay(true);
@@ -286,7 +287,7 @@ class Carousel extends LitElement {
     }
   }
   handleItemSelection(event) {
-    const item = event.currentTarget;
+    const item = event.target;
     const requestedPosition = parseInt(item.dataset.index);
     if (requestedPosition === this.selectedIndex) {
       return;
@@ -354,7 +355,7 @@ class Carousel extends LitElement {
       case " ":
       case "Enter":
         event.preventDefault();
-        if (this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") {
+        if (this.autoplay === "" || this.autoplay || this.autoplay === "paused") {
           this.toggleRotation();
         }
         break;
@@ -424,7 +425,7 @@ class Carousel extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.pagination]: true,
       [CSS.containerOverlaid]: this.controlOverlay
-    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
+    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
   }
   renderPaginationItems() {
     const { selectedIndex, maxItems, items, label, handleItemSelection } = this;

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

@@ -27,7 +27,7 @@ export abstract class Checkbox extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /**
    * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
    *
@@ -38,13 +38,13 @@ export abstract class Checkbox extends LitElement {
    */
   accessor indeterminate: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string | undefined;
+  accessor labelText: string;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { required?: string; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string | undefined;
+  accessor name: string;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value in order for the form to submit.

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

@@ -15,7 +15,7 @@ const CSS = {
   toggle: "toggle",
   check: "check-svg"
 };
-const styles = css`: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-relative-base));block-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base))}: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:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand-hover)}:host([status=invalid]:not([checked])) .toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([status=invalid]:not([checked])) .toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(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([checked]) .toggle:hover .check-svg,:host([indeterminate]) .toggle:hover .check-svg{background-color:var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}:host([checked]) .toggle:active .check-svg,:host([indeterminate]) .toggle:active .check-svg{background-color:var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press));box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}: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-hover))}.toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}: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}`;
+const styles = css`: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-relative-base));block-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base))}: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:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([status=invalid]:not([checked])) .toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(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([checked]) .toggle:hover .check-svg,:host([indeterminate]) .toggle:hover .check-svg{background-color:var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}:host([checked]) .toggle:active .check-svg,:host([indeterminate]) .toggle:active .check-svg{background-color:var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press));box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}: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-hover))}.toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}: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 Checkbox extends LitElement {
   constructor() {
     super();

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

@@ -9,33 +9,7 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  title: "title",
-  close: "close",
-  imageContainer: "image-container",
-  chipIcon: "chip-icon",
-  textSlotted: "text--slotted",
-  container: "container",
-  imageSlotted: "image--slotted",
-  closable: "closable",
-  multiple: "multiple",
-  single: "single",
-  selectable: "selectable",
-  selectIcon: "select-icon",
-  selectIconActive: "select-icon--active",
-  nonInteractive: "non-interactive",
-  isCircle: "is-circle",
-  selected: "selected"
-};
-const SLOTS = {
-  image: "image"
-};
-const ICONS = {
-  close: "x",
-  checkedSingle: "circle-f",
-  uncheckedMultiple: "square",
-  checkedMultiple: "check-square-f"
-};
+import { S as SLOTS, C as CSS, I as ICONS } from "../../chunks/resources5.js";
 const styles = css`: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]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));--calcite-internal-chip-selectable-hover-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));--calcite-internal-chip-selectable-active-border-color: var( --calcite-chip-border-color, var(--calcite-color-brand) )}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]){--calcite-internal-chip-background-color: transparent}:host([appearance=outline-fill]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]){--calcite-internal-chip-border-color: transparent;--calcite-internal-chip-selectable-hover-border-color: transparent;--calcite-internal-chip-selectable-active-border-color: transparent}:host([appearance=solid]):host([kind=brand]),:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-close-background-color-hover: var(--calcite-color-transparent-inverse-hover);--calcite-internal-chip-close-background-color-press: var(--calcite-color-transparent-inverse-press);--calcite-internal-chip-close-icon-color: var(--calcite-color-text-inverse);--calcite-internal-chip-close-icon-color-hover: var(--calcite-color-text-inverse)}: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{--calcite-color-focus: var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-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([selected]) .select-icon{opacity:1}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-border-2)}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-inverse-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-brand-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline-fill]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press)}:host([scale=s]){--calcite-internal-chip-close-padding: var(--calcite-spacing-none)}: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]){--calcite-internal-chip-close-padding: var(--calcite-spacing-xxs)}: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]){--calcite-internal-chip-close-padding: var(--calcite-spacing-xxs)}: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;background-color:var(--calcite-internal-chip-background-color);border-color:var(--calcite-internal-chip-border-color);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.selectable:hover{background-color:var(--calcite-internal-chip-selectable-hover-background-color);border-color:var(--calcite-internal-chip-selectable-hover-border-color)}.container.selectable:active{background-color:var(--calcite-internal-chip-selectable-active-background-color);border-color:var(--calcite-internal-chip-selectable-active-border-color)}.container:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, var(--calcite-ui-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-press, 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))}.close{--calcite-action-background-color-hover: var(--calcite-internal-chip-close-background-color-hover);--calcite-action-background-color-press: var(--calcite-internal-chip-close-background-color-press);--calcite-action-corner-radius: var(--calcite-corner-radius-pill);--calcite-action-text-color: var( --calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color)) );--calcite-action-text-color-press: var( --calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color-hover)) );--calcite-icon-color: var(--calcite-action-text-color);--calcite-internal-action-min-height: unset;--calcite-internal-action-spacing: var(--calcite-internal-chip-close-padding)}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}: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 Chip extends LitElement {
   constructor() {

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

@@ -91,7 +91,7 @@ class ChipGroup extends LitElement {
     event.stopPropagation();
   }
   updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip")) || [];
+    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip"));
     this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
     if (this.items?.length < 1) {
       return;

package/dist/components/calcite-color-picker/customElement.js

@@ -879,7 +879,7 @@ class ColorPicker extends LitElement {
     })}</div></calcite-tab>`);
   }
   renderChannel(value, index, ariaLabel, direction, suffix) {
-    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} @keydown=${this.handleKeyDown} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
+    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
       marginLeft: index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : ""
     })} .suffixText=${suffix} .value=${value?.toString()}></calcite-input-number>`);
   }

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

@@ -223,7 +223,7 @@ class ColorPickerHexInput extends LitElement {
     const hexInputValue = this.formatHexForInternalInput(value);
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
-    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
+    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
   }
 }
 customElement("calcite-color-picker-hex-input", ColorPickerHexInput);