@esri/calcite-components 5.1.2-next.1 → 5.1.2

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

@@ -15,7 +15,46 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { s as styles$2 } from "../../chunks/sortable.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS, S as SLOTS, a as IDS } from "../../chunks/resources5.js";
+const IDS = {
+  content: "content",
+  toggle: "toggle",
+  header: "header"
+};
+const CSS = {
+  actionsEnd: "actions-end",
+  container: "container",
+  content: "content",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  description: "description",
+  header: "header",
+  headerContainer: "header-container",
+  headerHasContent: "header--has-content",
+  headerDraggable: "header--draggable",
+  heading: "heading",
+  icon: "icon",
+  iconStart: "icon--start",
+  iconEnd: "icon--end",
+  iconEndContainer: "icon-end-container",
+  invalid: "invalid",
+  statusIcon: "status-icon",
+  title: "title",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  valid: "valid"
+};
+const SLOTS = {
+  actionsEnd: "actions-end",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  headerMenuActions: "header-menu-actions"
+};
+const ICONS = {
+  expanded: "chevron-up",
+  collapsed: "chevron-down",
+  valid: "check-circle",
+  invalid: "exclamation-mark-triangle"
+};
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-collapsible-icon-color, var(--calcite-block-icon-color, var(--calcite-color-text-3)))}.toggle:hover .toggle-icon{color:var(--calcite-block-collapsible-icon-color-hover, var(--calcite-block-icon-color-hover, var(--calcite-color-text-1)))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%;opacity:0;padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline);transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start{color:var(--calcite-block-icon-start-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .icon--end{color:var(--calcite-block-icon-end-color, var(--calcite-block-icon-color, var(--calcite-color-text-1)))}:host([expanded]) .content{opacity:1}@starting-style{:host([expanded]){margin-block-start:0;opacity:0}}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Block extends LitElement {
   constructor() {
@@ -41,6 +80,8 @@ class Block extends LitElement {
     this.sortDisabled = false;
     this.overlayPositioning = "absolute";
     this.scale = "m";
+    this.setPosition = null;
+    this.setSize = null;
     this.sortHandleOpen = false;
     this.topLayerDisabled = false;
     this.calciteBlockBeforeClose = createEvent({ cancelable: false });
@@ -175,12 +216,12 @@ class Block extends LitElement {
     return [loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null, defaultSlot];
   }
   renderLoaderStatusIcon() {
-    const { loading, messages, status } = this;
-    return loading ? keyed("loader", html`<div class=${safeClassMap(CSS.icon)}><calcite-loader inline .label=${messages.loading} .scale=${this.scale}></calcite-loader></div>`) : status ? keyed("status-icon", html`<div class=${safeClassMap(CSS.icon)}><calcite-icon class=${safeClassMap({
+    const { loading, messages, status: status2 } = this;
+    return loading ? keyed("loader", html`<div class=${safeClassMap(CSS.icon)}><calcite-loader inline .label=${messages.loading} .scale=${this.scale}></calcite-loader></div>`) : status2 ? keyed("status-icon", html`<div class=${safeClassMap(CSS.icon)}><calcite-icon class=${safeClassMap({
       [CSS.statusIcon]: true,
-      [CSS.valid]: status == "valid",
-      [CSS.invalid]: status == "invalid"
-    })} .icon=${ICONS[status]} .scale=${getIconScale(this.scale)}></calcite-icon></div>`) : null;
+      [CSS.valid]: status2 == "valid",
+      [CSS.invalid]: status2 == "invalid"
+    })} .icon=${ICONS[status2]} .scale=${getIconScale(this.scale)}></calcite-icon></div>`) : null;
   }
   renderActionsEnd() {
     return html`<div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!this.hasEndActions}><slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
@@ -206,7 +247,7 @@ class Block extends LitElement {
     return keyed(iconValue, html`<calcite-icon class=${safeClassMap(iconClass)} .flipRtl=${flipRtl} .icon=${iconValue} .scale=${getIconScale(this.scale)}></calcite-icon>`);
   }
   render() {
-    const { collapsible, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart, status } = this;
+    const { collapsible, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart } = this;
     const toggleLabel = expanded ? messages.collapse : messages.expand;
     const headerHasContent = !!(heading || description || hasContentEnd || hasContentStart || iconStart || loading || status);
     const headerContent = html`<header class=${safeClassMap({
@@ -215,7 +256,7 @@ class Block extends LitElement {
       [CSS.headerDraggable]: this.dragHandle
     })} id=${IDS.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`;
     const collapseIcon = expanded ? ICONS.expanded : ICONS.collapsed;
-    const headerNode = html`<div class=${safeClassMap(CSS.headerContainer)}>${this.dragHandle ? html`<calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${heading || label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${collapsible ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${collapsible ? expanded : void 0} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing}>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}<calcite-icon class=${safeClassMap(CSS.toggleIcon)} .icon=${collapseIcon} .scale=${getIconScale(this.scale)}></calcite-icon></div></button>` : headerContent}${iconEnd && !collapsible ? html`<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}</div>` : !iconEnd && !collapsible ? this.renderContentEnd() : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
+    const headerNode = html`<div class=${safeClassMap(CSS.headerContainer)}>${this.dragHandle ? html`<calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${heading || label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle>` : null}${collapsible ? html`<button aria-controls=${IDS.content} aria-describedby=${IDS.header} .ariaExpanded=${collapsible ? expanded : null} class=${safeClassMap(CSS.toggle)} id=${IDS.toggle} @click=${this.onHeaderClick} title=${toggleLabel ?? nothing}>${headerContent}<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}<calcite-icon class=${safeClassMap(CSS.toggleIcon)} .icon=${collapseIcon} .scale=${getIconScale(this.scale)}></calcite-icon></div></button>` : headerContent}${iconEnd && !collapsible ? html`<div class=${safeClassMap(CSS.iconEndContainer)}>${this.renderContentEnd()}${this.renderIcon("end")}</div>` : !iconEnd && !collapsible ? this.renderContentEnd() : null}<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${messages.options} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled}><slot name=${SLOTS.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`<article aria-label=${label ?? nothing} .ariaBusy=${loading} class=${safeClassMap({
       [CSS.container]: true
     })}>${headerNode}<section aria-labelledby=${IDS.toggle} class=${safeClassMap(CSS.content)} .hidden=${!expanded} id=${IDS.content}>${this.renderScrim()}</section></article>` });

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

@@ -10,7 +10,9 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
-import { i as isBlock } from "../../chunks/resources5.js";
+function isBlock(element) {
+  return element.tagName === "CALCITE-BLOCK";
+}
 const CSS = {
   container: "container",
   groupContainer: "group-container",
@@ -178,12 +180,12 @@ class BlockGroup extends LitElement {
     this.calciteBlockGroupOrderChange.emit(detail);
   }
   setParentBlockGroup() {
-    this.parentBlockGroupEl = this.el.parentElement?.closest(blockGroupSelector) || void 0;
+    this.parentBlockGroupEl = this.el.parentElement?.closest(blockGroupSelector);
   }
   handleDefaultSlotChange(event) {
     const blockChildren = [];
     this.blockAndGroups = slotChangeGetAssignedElements(event).filter((el) => {
-      if (isBlock(el)) {
+      if (el.matches(blockSelector)) {
         blockChildren.push(el);
       }
       return el.matches(blockSelector) || el.matches(blockGroupSelector);

package/dist/components/calcite-block-section/customElement.d.ts

@@ -21,11 +21,11 @@ export abstract class BlockSection extends LitElement {
    */
   accessor expanded: boolean;
   /** 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;
@@ -49,9 +49,9 @@ export abstract class BlockSection extends LitElement {
    *
    * @deprecated in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.
    */
-  accessor status: Status | undefined;
+  accessor status: Status;
   /** The component header text. */
-  accessor text: string | undefined;
+  accessor text: string;
   /**
    * Specifies how the component's toggle is displayed, where:
    *

package/dist/components/calcite-block-section/customElement.js

@@ -94,7 +94,7 @@ class BlockSection extends LitElement {
   }
   renderStatusIcon() {
     const { status } = this;
-    const statusIcon = status && ICONS[status];
+    const statusIcon = ICONS[status] ?? false;
     const statusIconClasses = {
       [CSS.statusIcon]: true,
       [CSS.valid]: status == "valid",

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

@@ -50,15 +50,15 @@ export abstract class Button extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string | undefined;
+  accessor form: string;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
-  accessor href: string | undefined;
+  accessor href: 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 the kind of the component, which will apply to the border and background if applicable.
    *
@@ -66,7 +66,7 @@ export abstract class Button extends LitElement {
    */
   accessor kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -82,7 +82,7 @@ export abstract class Button extends LitElement {
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string | undefined;
+  accessor rel: string;
   /**
    * When `true`, adds a round style to the component.
    *
@@ -106,7 +106,7 @@ export abstract class Button extends LitElement {
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string | undefined;
+  accessor target: string;
   /**
    * Specifies the default behavior of the component.
    *

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

@@ -96,7 +96,7 @@ class Button extends LitElement {
   setTooltipText() {
     const { contentRef: { value: contentEl } } = this;
     if (contentEl) {
-      this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || void 0 : void 0;
+      this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;
     }
   }
   setChildEl(el) {
@@ -111,13 +111,13 @@ class Button extends LitElement {
     const iconStartEl = html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconStart]: true })} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
     const iconEndEl = html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconEnd]: true })} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`;
     const contentEl = html`<span class=${safeClassMap(CSS.content)} ${ref(this.contentRef)}><slot></slot></span>`;
-    return this.interactiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} .ariaBusy=${this.loading} .ariaExpanded=${this.el.ariaExpanded ? this.el.ariaExpanded : void 0} .ariaLabel=${!this.loading ? getLabelText(this) : this.messages.loading} aria-live=polite class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} .ariaBusy=${this.loading} .ariaExpanded=${this.el.ariaExpanded ? this.el.ariaExpanded : null} .ariaLabel=${!this.loading ? getLabelText(this) : this.messages.loading} aria-live=polite class=${safeClassMap({
       [CSS.buttonPadding]: noStartEndIcons,
       [CSS.buttonPaddingShrunk]: !noStartEndIcons,
       [CSS.contentSlotted]: this.hasContent,
       [CSS.iconStartEmpty]: !this.iconStart,
       [CSS.iconEndEmpty]: !this.iconEnd
-    })} .disabled=${childElType === "button" ? this.disabled : void 0} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || void 0 : void 0) ?? nothing} href=${(childElType === "a" ? this.href : void 0) ?? nothing} name=${(childElType === "button" ? this.name : void 0) ?? nothing} rel=${(childElType === "a" ? this.rel : void 0) ?? nothing} tabindex=${(this.disabled ? -1 : void 0) ?? nothing} target=${(childElType === "a" ? this.target : void 0) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : void 0) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
+    })} .disabled=${childElType === "button" ? this.disabled : null} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} name=${(childElType === "button" && this.name) ?? nothing} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${(this.disabled ? -1 : null) ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : null) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
   }
 }
 customElement("calcite-button", Button);

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-chip/customElement.js

@@ -9,7 +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";
-import { S as SLOTS, C as CSS, I as ICONS } from "../../chunks/resources6.js";
+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.d.ts

@@ -95,7 +95,7 @@ export abstract class ColorPicker extends LitElement {
       value?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem | undefined;
+  accessor numberingSystem: NumberingSystem;
   /**
    * When `true`, hides the saved colors section.
    *
@@ -109,7 +109,7 @@ export abstract class ColorPicker extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the storage ID for colors. */
-  accessor storageId: string | undefined;
+  accessor storageId: string;
   /**
    * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
    *
@@ -118,7 +118,7 @@ export abstract class ColorPicker extends LitElement {
    * @see [MDN - CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color),
    * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/color-picker/interfaces.ts#L10).
    */
-  accessor value: ColorValue | null | undefined;
+  accessor value: ColorValue | null;
   /**
    * Sets focus on the component's first focusable element.
    *

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

@@ -26,11 +26,13 @@ class ColorPicker extends LitElement {
     this.colorFieldScopeRef = createRef();
     this.direction = useDirection();
     this.hueScopeRef = createRef();
+    this.internalColorUpdateContext = null;
     this.isActiveChannelInputEmpty = false;
     this.mode = CSSColorMode.HEX;
     this.opacityScopeRef = createRef();
     this.resizeObserver = createObserver("resize", (entries) => this.resizeCanvas(entries));
     this.shiftKeyChannelAdjustment = 0;
+    this.upOrDownArrowKeyTracker = null;
     this._valueWasSet = false;
     this.messages = useT9n({ blocking: true });
     this.captureColorFieldColor = (x, y, skipEqual = true) => {
@@ -92,7 +94,7 @@ class ColorPicker extends LitElement {
         return;
       }
       const previouslyDragging = this.activeCanvasInfo;
-      this.activeCanvasInfo = void 0;
+      this.activeCanvasInfo = null;
       this.drawColorControls();
       if (previouslyDragging) {
         this.calciteColorPickerChange.emit();
@@ -166,9 +168,8 @@ class ColorPicker extends LitElement {
   }
   set value(value) {
     const oldValue = this._value;
-    const effectiveValue = value || void 0;
-    this._value = effectiveValue;
-    this.handleValueChange(effectiveValue, oldValue);
+    this._value = value;
+    this.handleValueChange(value, oldValue);
     this._valueWasSet = true;
   }
   async setFocus(options) {
@@ -183,8 +184,7 @@ class ColorPicker extends LitElement {
     if (!this._valueWasSet) {
       this._value ??= normalizeHex(hexify(DEFAULT_COLOR, this.alphaChannel));
     }
-    const { clearable, color, format } = this;
-    const value = this.value;
+    const { clearable, color, format, value } = this;
     const willSetNoColor = clearable && !value;
     const parsedMode = parseMode(value);
     const valueIsCompatible = willSetNoColor || format === "auto" && parsedMode || format === parsedMode;
@@ -197,11 +197,8 @@ class ColorPicker extends LitElement {
     this.updateStaticDimensions(this.scale);
     this.updateDynamicDimensions(STATIC_DIMENSIONS[this.scale].minWidth);
     const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
-    if (this.storageId) {
-      const storedItem = localStorage.getItem(storageKey);
-      if (storedItem) {
-        this.savedColors = JSON.parse(storedItem);
-      }
+    if (this.storageId && localStorage.getItem(storageKey)) {
+      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
     }
   }
   willUpdate(changes) {
@@ -266,7 +263,7 @@ class ColorPicker extends LitElement {
         return;
       }
       modeChanged = this.mode !== nextMode;
-      this.setMode(nextMode, this.internalColorUpdateContext === void 0);
+      this.setMode(nextMode, this.internalColorUpdateContext === null);
     }
     const dragging = this.activeCanvasInfo;
     if (this.internalColorUpdateContext === "initial") {
@@ -326,7 +323,7 @@ class ColorPicker extends LitElement {
     const input = event.target;
     const hex = input.value;
     if (clearable && !hex) {
-      this.internalColorSet(void 0);
+      this.internalColorSet(null);
       return;
     }
     const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));
@@ -347,7 +344,7 @@ class ColorPicker extends LitElement {
     if (!input.value) {
       inputValue = "";
       this.isActiveChannelInputEmpty = true;
-      this.upOrDownArrowKeyTracker = void 0;
+      this.upOrDownArrowKeyTracker = null;
     } else {
       const value = Number(input.value);
       const adjustedValue = value + this.shiftKeyChannelAdjustment;
@@ -367,7 +364,7 @@ class ColorPicker extends LitElement {
     const channels = [...this.channels];
     const restoreValueDueToEmptyInput = !input.value && !this.clearable;
     if (restoreValueDueToEmptyInput) {
-      input.value = channels[channelIndex]?.toString() ?? "";
+      input.value = channels[channelIndex]?.toString();
     }
   }
   handleChannelFocus(event) {
@@ -402,18 +399,18 @@ class ColorPicker extends LitElement {
   handleChannelChange(event) {
     const input = event.currentTarget;
     const channelIndex = Number(input.getAttribute("data-channel-index"));
+    const channels = [...this.channels];
     const shouldClearChannels = this.clearable && !input.value;
     if (shouldClearChannels) {
-      this.channels = [void 0, void 0, void 0, void 0];
-      this.internalColorSet(void 0);
+      this.channels = [null, null, null, null];
+      this.internalColorSet(null);
       return;
     }
-    const channels = [...this.channels];
     const isAlphaChannel = channelIndex === 3;
     if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
       input.value = this.upOrDownArrowKeyTracker === "up" ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex) ? channels[channelIndex] + 1 : this.getChannelInputLimit(channelIndex)).toString() : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
       this.isActiveChannelInputEmpty = false;
-      this.upOrDownArrowKeyTracker = void 0;
+      this.upOrDownArrowKeyTracker = null;
     }
     const value = input.value ? Number(input.value) : channels[channelIndex];
     channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;
@@ -500,11 +497,11 @@ class ColorPicker extends LitElement {
     this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.internalColorUpdateContext = void 0;
+    this.internalColorUpdateContext = null;
   }
   toValue(color, format = this.mode) {
     if (!color) {
-      return void 0;
+      return null;
     }
     const hexMode = "hex";
     if (format.includes(hexMode)) {
@@ -817,7 +814,7 @@ class ColorPicker extends LitElement {
     this.internalColorSet(Color(channels, this.channelMode));
   }
   updateChannelsFromColor(color) {
-    this.channels = color ? this.toChannels(color) : [void 0, void 0, void 0, void 0];
+    this.channels = color ? this.toChannels(color) : [null, null, null, null];
   }
   toChannels(color) {
     const { channelMode } = this;
@@ -833,7 +830,7 @@ class ColorPicker extends LitElement {
   render() {
     const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, staticDimensions: { thumb: { radius: thumbRadius } }, fieldDisabled, hexDisabled, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation } = this;
     const sliderWidth = this.effectiveSliderWidth;
-    const selectedColorInHex = color ? hexify(color, alphaChannel) : void 0;
+    const selectedColorInHex = color ? hexify(color, alphaChannel) : null;
     const hueTop = thumbRadius;
     const hueLeft = hueScopeLeft ?? sliderWidth * DEFAULT_COLOR.hue() / HSV_LIMITS.h;
     const opacityTop = thumbRadius;
@@ -882,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.d.ts

@@ -34,7 +34,7 @@ export abstract class ColorPickerHexInput extends LitElement {
    */
   accessor scale: Scale;
   /** The hex value. */
-  accessor value: string | undefined;
+  accessor value: string;
   /**
    * Sets focus on the component.
    *