@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.31

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

@@ -12,7 +12,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  */
 export abstract class AutocompleteItem extends LitElement {
-  /** Specifies a description for the component. Displays below the label text. */
+  /** Specifies a description for the component. Displays below the `label`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -24,7 +24,7 @@ const idPrefix = "autocomplete-item";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-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}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host([selected]) .container{color:var(--calcite-color-text-1);background-color:var(--calcite-color-surface-highlight)}:host([selected]) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+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}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);overflow-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host([selected]) .container{color:var(--calcite-color-text-1);background-color:var(--calcite-color-surface-highlight)}:host([selected]) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class AutocompleteItem extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { d as getModeName } from "../../chunks/dom.js";
+import { e as getModeName } from "../../chunks/dom.js";
 import { h as hexToRGB, i as isValidHex } from "../../chunks/utils.js";
 const CSS = {
   thumbnail: "thumbnail",

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

@@ -35,7 +35,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor collapsible: boolean;
-  /** Specifies a description for the component. Displays below the heading. */
+  /** Specifies a description for the component. Displays below the `heading`. */
   accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -80,7 +80,7 @@ export abstract class Block extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * Determines where the action menu will be positioned.
@@ -88,12 +88,16 @@ export abstract class Block extends LitElement {
    * @default "bottom-end"
    */
   accessor menuPlacement: LogicalPlacement;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
-      loading?: string;
-      options?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
+      loading?: string | undefined;
+      options?: string | undefined;
   };
   /**
    * When `true`, expands the component and its contents.
@@ -131,9 +135,7 @@ export abstract class Block extends LitElement {
    */
   accessor status: Status | undefined;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -6,9 +6,9 @@ import type { BlockDragDetail } from "./interfaces.js";
 /** @slot  - A slot for adding `calcite-block` elements. */
 export abstract class BlockGroup extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the component. */
-  accessor canPull: (detail: BlockDragDetail) => boolean | "clone";
+  accessor canPull: ((detail: BlockDragDetail) => boolean | "clone") | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another component. */
-  accessor canPut: (detail: BlockDragDetail) => boolean;
+  accessor canPut: ((detail: BlockDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *

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

@@ -4,7 +4,7 @@ import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { e as getRootNode, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { h as getRootNode, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";

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

@@ -26,10 +26,14 @@ export abstract class BlockSection extends LitElement {
   accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * When `true`, expands the component and its contents.

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

@@ -34,7 +34,7 @@ const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
 };
-const styles = css`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;overflow-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
 class BlockSection extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -45,11 +45,7 @@ export abstract class Button extends LitElement {
    * @see [MDN - Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
    */
   accessor download: string | boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
   accessor href: string | undefined;
@@ -73,8 +69,12 @@ export abstract class Button extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { loading?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { loading?: string | undefined; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
   accessor name: string | undefined;
   /**

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

@@ -5,11 +5,12 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { h as hasVisibleContent } from "../../chunks/dom.js";
+import { i as hasVisibleContent } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
@@ -39,6 +40,7 @@ class Button extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.messages = useT9n();
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.hasContent = false;
     this.alignment = "center";
     this.appearance = "solid";
@@ -67,7 +69,6 @@ class Button extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.setupTextContentObserver();
-    connectLabel(this);
   }
   async load() {
     this.updateHasContent();
@@ -78,7 +79,6 @@ class Button extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    disconnectLabel(this);
     this.resizeObserver?.disconnect();
   }
   handleGlobalAttributesChanged() {

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

@@ -37,10 +37,14 @@ export abstract class Card extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      select?: string;
-      loading?: string;
+      select?: string | undefined;
+      loading?: string | undefined;
   };
   /**
    * Specifies the size of the component. When contained in a parent `calcite-card-group`, inherits the parent's `scale` value, but can be overridden if needed.

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

@@ -54,15 +54,19 @@ export abstract class Carousel extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      previous?: string;
-      next?: string;
-      play?: string;
-      pause?: string;
-      carousel?: string;
-      carouselItemProgress?: string;
-      paginationStatus?: string;
+      previous?: string | undefined;
+      next?: string | undefined;
+      play?: string | undefined;
+      pause?: string | undefined;
+      carousel?: string | undefined;
+      carouselItemProgress?: string | undefined;
+      paginationStatus?: string | undefined;
   };
   /**
    * When `true`, the component's pagination controls are hidden.

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

@@ -87,7 +87,7 @@ class Carousel extends LitElement {
         this.slideDurationRemaining = time;
       }
     };
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.itemDirection = "standby";
@@ -287,7 +287,7 @@ class Carousel extends LitElement {
   }
   handleItemSelection(event) {
     const item = event.currentTarget;
-    const requestedPosition = parseInt(item.dataset.index);
+    const requestedPosition = parseInt(item.dataset.index, 10);
     if (requestedPosition === this.selectedIndex) {
       return;
     }

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

@@ -22,11 +22,7 @@ export abstract class Checkbox extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
    * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
@@ -41,8 +37,12 @@ export abstract class Checkbox extends LitElement {
   accessor label: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { required?: string | undefined; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
   accessor name: string | undefined;
   /**

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

@@ -5,12 +5,13 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.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 { u as useForm } from "../../chunks/useForm.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 const CSS = {
   toggle: "toggle",
   check: "check-svg"
@@ -23,6 +24,7 @@ class Checkbox extends LitElement {
     this.direction = useDirection();
     this.formSupport = useForm({ inputType: "checkbox" })(this);
     this.indeterminatePath = "M13 8v1H3V8z";
+    this.labelable = useLabel(this);
     this.onLabelClick = () => {
       this.toggle();
     };
@@ -55,14 +57,6 @@ class Checkbox extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.toggleRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   getPath() {
     return this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
   }

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

@@ -48,7 +48,7 @@ export abstract class Chip extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -67,8 +67,12 @@ export abstract class Chip extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { dismissLabel?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { dismissLabel?: string | undefined; };
   /**
    * Specifies the size of the component.
    *

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { i as focusElement, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { j as focusElement, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -16,7 +16,7 @@ class Chip extends LitElement {
     super();
     this.closeButtonRef = createRef();
     this.containerRef = createRef();
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasImage = false;
@@ -53,6 +53,7 @@ class Chip extends LitElement {
       } else if (this.closable) {
         return this.closeButtonRef.value;
       }
+      return;
     }, options);
   }
   async load() {
@@ -135,7 +136,7 @@ class Chip extends LitElement {
     if (this.selectionMode === "single") {
       this.calciteInternalSyncSelectedChips.emit();
     }
-    const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);
+    const selectedInParent = this.parentChipGroup?.selectedItems.includes(this.el);
     if (!selectedInParent && selected && this.selectionMode !== "multiple") {
       this.calciteInternalChipSelect.emit();
     }
@@ -162,7 +163,7 @@ class Chip extends LitElement {
   render() {
     const { disabled } = this;
     const disableInteraction = disabled || !disabled && !this.interactive;
-    const role = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : "img";
+    const role = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : this.closable ? void 0 : "img";
     return this.interactiveContainer({ disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.textSlotted]: this.hasText,

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

@@ -71,28 +71,32 @@ export abstract class ColorPicker extends LitElement {
    * @default false
    */
   accessor hexDisabled: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      b?: string;
-      blue?: string;
-      deleteColor?: string;
-      g?: string;
-      green?: string;
-      h?: string;
-      hsv?: string;
-      hex?: string;
-      hue?: string;
-      noColor?: string;
-      opacity?: string;
-      r?: string;
-      red?: string;
-      rgb?: string;
-      s?: string;
-      saturation?: string;
-      saveColor?: string;
-      saved?: string;
-      v?: string;
-      value?: string;
+      b?: string | undefined;
+      blue?: string | undefined;
+      deleteColor?: string | undefined;
+      g?: string | undefined;
+      green?: string | undefined;
+      h?: string | undefined;
+      hsv?: string | undefined;
+      hex?: string | undefined;
+      hue?: string | undefined;
+      noColor?: string | undefined;
+      opacity?: string | undefined;
+      r?: string | undefined;
+      red?: string | undefined;
+      rgb?: string | undefined;
+      s?: string | undefined;
+      saturation?: string | undefined;
+      saveColor?: string | undefined;
+      saved?: string | undefined;
+      v?: string | undefined;
+      value?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;

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

@@ -8,7 +8,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { j as isPrimaryPointerButton } from "../../chunks/dom.js";
+import { k as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { r as remap, c as clamp, a as closeToRangeEdge } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -828,7 +828,10 @@ class ColorPicker extends LitElement {
     return channels;
   }
   getAdjustedScopePosition(left, top) {
-    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
+    return [
+      left === void 0 ? NaN : left - SCOPE_SIZE / 2,
+      top === void 0 ? NaN : top - SCOPE_SIZE / 2
+    ];
   }
   render() {
     const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, staticDimensions: { thumb: { radius: thumbRadius } }, fieldDisabled, hexDisabled, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation } = this;
@@ -876,7 +879,8 @@ class ColorPicker extends LitElement {
     return keyed(channelMode, html`<calcite-tab class=${safeClassMap(CSS.control)} .selected=${selected}><div class=${safeClassMap(CSS.channels)} dir=ltr>${channelsToRender.map((channelValue, index) => {
       const isAlphaChannel = index === 3;
       if (isAlphaChannel) {
-        channelValue = clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
+        channelValue = // channels can only be undefined when clearable
+        clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
       }
       return this.renderChannel(channelValue, index, channelAriaLabels[index], direction, isAlphaChannel ? "%" : "");
     })}</div></calcite-tab>`);

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { d as getModeName } from "../../chunks/dom.js";
+import { e as getModeName } from "../../chunks/dom.js";
 import { b as hexify } from "../../chunks/utils.js";
 const CSS = {
   swatch: "swatch",