@esri/calcite-components 5.1.1-next.6 → 5.1.2-next.0

package/dist/chunks/resources8.js

@@ -1,19 +1,59 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 const CSS = {
+  actionBarContainer: "action-bar-container",
   container: "container",
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
+  header: "header",
+  headerContainer: "header-container",
+  headerContainerBorderEnd: "header-container--border-end",
+  headingTextContent: "heading-text-content",
+  heading: "heading",
+  description: "description",
+  headerContent: "header-content",
+  headerActions: "header-actions",
+  headerActionsEnd: "header-actions--end",
+  headerActionsStart: "header-actions--start",
+  icon: "icon",
+  contentWrapper: "content-wrapper",
+  fabContainer: "fab-container",
+  footer: "footer",
+  footerContent: "footer-content",
+  footerStart: "footer-start",
+  footerEnd: "footer-end",
+  headerSlottedContent: "header--slotted-content",
+  headerNonSlottedContent: "header--non-slotted-content",
+  menuAction: "menu-action"
+};
+const IDS = {
+  close: "close",
+  collapse: "collapse"
+};
+const ICONS = {
+  close: "x",
+  menu: "ellipsis",
+  expand: "chevron-down",
+  collapse: "chevron-up"
 };
 const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  actionBar: "action-bar",
+  alerts: "alerts",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
+  headerActionsStart: "header-actions-start",
+  headerActionsEnd: "header-actions-end",
+  description: "description",
+  heading: "heading",
+  headerMenuActions: "header-menu-actions",
+  headerContent: "header-content",
+  fab: "fab",
+  footer: "footer",
+  footerEnd: "footer-end",
+  footerStart: "footer-start"
 };
 export {
   CSS as C,
-  SLOTS as S
+  ICONS as I,
+  SLOTS as S,
+  IDS as a
 };

package/dist/chunks/resources9.js

@@ -1,63 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 const CSS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start",
-  description: "description",
-  close: "close",
   container: "container",
-  containerHover: "container--hover",
-  containerBorder: "container--border",
-  containerBorderSelected: "container--border-selected",
-  containerHighlightSelected: "container--highlight-selected",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentContainer: "content-container",
-  contentContainerHasCenterContent: "content-container--has-center-content",
-  contentContainerSelectable: "content-container--selectable",
-  contentContainerUnavailable: "content-container--unavailable",
-  contentContainerWrapper: "content-container-wrapper",
-  contentContainerWrapperBordered: "content-container-wrapper--bordered",
-  contentEnd: "content-end",
-  contentStart: "content-start",
-  customContent: "custom-content",
-  expandedContainer: "expanded-container",
-  dragContainer: "drag-container",
-  gridCell: "grid-cell",
+  containerNone: "container--none-selection",
   icon: "icon",
-  nestedContainer: "nested-container",
-  nestedContainerExpanded: "nested-container--expanded",
-  label: "label",
-  row: "row",
-  selectionContainer: "selection-container",
-  selectionContainerSingle: "selection-container--single",
-  wrapper: "wrapper",
-  wrapperBordered: "wrapper--bordered"
+  iconEnd: "icon--end",
+  iconStart: "icon--start",
+  itemContent: "content",
+  link: "link"
 };
-const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
-};
-const MAX_COLUMNS = 0;
 const ICONS = {
-  selectedMultiple: "check-square-f",
-  selectedSingle: "circle-inset-large",
-  unselectedMultiple: "square",
-  unselectedSingle: "circle",
-  collapsedLTR: "chevron-right",
-  collapsedRTL: "chevron-left",
-  open: "chevron-down",
-  blank: "blank",
-  close: "x"
+  check: "check"
 };
-const activeCellTestAttribute = "data-test-active";
 export {
   CSS as C,
-  ICONS as I,
-  MAX_COLUMNS as M,
-  SLOTS as S,
-  activeCellTestAttribute as a
+  ICONS as I
 };

package/dist/chunks/runtime.js

@@ -60,9 +60,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.1.1-next.6";
-const buildDate = "2026-06-08";
-const revision = "ffb6800bd";
+const version = "5.1.2-next.0";
+const buildDate = "2026-06-10";
+const revision = "f9640583f";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,7 +85,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.1-next.6/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.2-next.0/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/utils.js

@@ -1,6 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import Color from "color";
 import { c as calciteSpacingFixedXl, a as calciteSpacingFixedMd, b as calciteSpacingFixedSm } from "./global.js";
+import { omit } from "es-toolkit";
 const CSS = {
   channel: "channel",
   channels: "channels",
@@ -103,7 +104,7 @@ const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
 const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
 function colorFromValue(value, clearable = false, mode) {
   if (clearable && !value) {
-    return null;
+    return void 0;
   }
   return Color(
     value != null && typeof value === "object" && alphaCompatible(mode) ? normalizeColor(value) : value
@@ -136,7 +137,7 @@ function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
     hex = `#${hex}`;
   }
   if (isShorthandHex(hex, hasAlpha)) {
-    return rgbToHex(hexToRGB(hex, hasAlpha));
+    return rgbToHex(hexToRGB(hex));
   }
   if (hasAlpha && convertFromHexToHexa && isValidHex(
     hex,
@@ -144,7 +145,7 @@ function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
     /* we only care about RGB hex for conversion */
   )) {
     const isShorthand = isShorthandHex(hex, false);
-    return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`, true));
+    return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`));
   }
   return hex;
 }
@@ -163,23 +164,16 @@ function numToHex(num) {
   return num.toString(16).padStart(2, "0");
 }
 function normalizeAlpha(colorObject) {
-  const normalized = {
-    ...colorObject,
+  return {
+    ...omit(colorObject, ["alpha"]),
     a: colorObject.alpha ?? 1
     /* Color() will omit alpha if 1 */
   };
-  delete normalized.alpha;
-  return normalized;
 }
 function normalizeColor(alphaColorObject) {
-  const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
-  delete normalized.a;
-  return normalized;
+  return { ...omit(alphaColorObject, ["a"]), alpha: alphaColorObject.a ?? 1 };
 }
-function hexToRGB(hex, hasAlpha = false) {
-  if (!isValidHex(hex, hasAlpha)) {
-    return null;
-  }
+function hexToRGB(hex) {
   hex = hex.replace("#", "");
   let r;
   let g;
@@ -252,7 +246,7 @@ function parseMode(colorValue) {
       return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
     }
   }
-  return null;
+  return void 0;
 }
 function hasChannels(colorObject, ...channels) {
   return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);

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 "./resources7.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-block/customElement.d.ts

@@ -36,7 +36,7 @@ export abstract class Block extends LitElement {
    */
   accessor collapsible: boolean;
   /** Specifies a description for the component. Displays below the heading. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -63,17 +63,17 @@ export abstract class Block extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -81,7 +81,7 @@ export abstract class Block extends LitElement {
    */
   accessor loading: boolean;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * Determines where the action menu will be positioned.
    *
@@ -129,7 +129,7 @@ export abstract class Block extends LitElement {
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.
    */
-  accessor status: Status;
+  accessor status: Status | undefined;
   /**
    * When `true` and the component is `open`, disables top layer placement.
    *

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

@@ -15,46 +15,7 @@ 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";
-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"
-};
+import { C as CSS, I as ICONS, S as SLOTS, a as IDS } from "../../chunks/resources5.js";
 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() {
@@ -80,8 +41,6 @@ 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 });
@@ -216,12 +175,12 @@ class Block extends LitElement {
     return [loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null, defaultSlot];
   }
   renderLoaderStatusIcon() {
-    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({
+    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({
       [CSS.statusIcon]: true,
-      [CSS.valid]: status2 == "valid",
-      [CSS.invalid]: status2 == "invalid"
-    })} .icon=${ICONS[status2]} .scale=${getIconScale(this.scale)}></calcite-icon></div>`) : null;
+      [CSS.valid]: status == "valid",
+      [CSS.invalid]: status == "invalid"
+    })} .icon=${ICONS[status]} .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>`;
@@ -247,7 +206,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 } = this;
+    const { collapsible, loading, expanded, label, heading, messages, description, menuFlipPlacements, menuPlacement, moveToItems, addToItems, setPosition, setSize, dragDisabled, sortDisabled, iconEnd, hasContentEnd, hasContentStart, iconStart, status } = this;
     const toggleLabel = expanded ? messages.collapse : messages.expand;
     const headerHasContent = !!(heading || description || hasContentEnd || hasContentStart || iconStart || loading || status);
     const headerContent = html`<header class=${safeClassMap({
@@ -256,7 +215,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 : 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>`;
+    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>`;
     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,9 +10,7 @@ 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";
-function isBlock(element) {
-  return element.tagName === "CALCITE-BLOCK";
-}
+import { i as isBlock } from "../../chunks/resources5.js";
 const CSS = {
   container: "container",
   groupContainer: "group-container",
@@ -180,12 +178,12 @@ class BlockGroup extends LitElement {
     this.calciteBlockGroupOrderChange.emit(detail);
   }
   setParentBlockGroup() {
-    this.parentBlockGroupEl = this.el.parentElement?.closest(blockGroupSelector);
+    this.parentBlockGroupEl = this.el.parentElement?.closest(blockGroupSelector) || void 0;
   }
   handleDefaultSlotChange(event) {
     const blockChildren = [];
     this.blockAndGroups = slotChangeGetAssignedElements(event).filter((el) => {
-      if (el.matches(blockSelector)) {
+      if (isBlock(el)) {
         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;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** 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;
+  accessor status: Status | undefined;
   /** The component header text. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * 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 = ICONS[status] ?? false;
+    const statusIcon = status && ICONS[status];
     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;
+  accessor form: string | undefined;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /**
    * 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;
+  accessor label: string | undefined;
   /**
    * 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;
+  accessor rel: string | undefined;
   /**
    * 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;
+  accessor target: string | undefined;
   /**
    * 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 || null : null;
+      this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || void 0 : void 0;
     }
   }
   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 : null} .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 : void 0} .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 : 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}>` });
+    })} .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}>` });
   }
 }
 customElement("calcite-button", Button);