@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.21

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -20,8 +20,9 @@ export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the first `calcite-action-group`. */
   accessor actionsStartGroupLabel: string | undefined;
   /**
-   * When `true`, the expand-toggling behavior is disabled.
+   * When `true`, the expand/collapse toggle button is not shown.
    *
+   * @deprecated in v5.2.0, removal target v6.0.0 - Use `expandToggleDisabled` instead.
    * @default false
    */
   accessor expandDisabled: boolean;
@@ -38,6 +39,12 @@ export abstract class ActionBar extends LitElement {
    * @default "end"
    */
   accessor expandPosition: Extract<"start" | "end", Position>;
+  /**
+   * When `true`, the expand/collapse toggle button is not shown.
+   *
+   * @default false
+   */
+  accessor expandToggleDisabled: boolean;
   /**
    * When `true`, the component is in a floating state.
    *
@@ -52,10 +59,10 @@ export abstract class ActionBar extends LitElement {
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
    * When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.
@@ -74,7 +81,7 @@ export abstract class ActionBar extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /**
-   * When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where:
+   * When `expandToggleDisabled` is `false`, specifies the expand toggle's chevron direction, where:
    *
    * `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and
    * `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.

package/dist/components/calcite-action-bar/customElement.js

@@ -10,6 +10,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
+import { l as logger } from "../../chunks/logger.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { i as isAction } from "../../chunks/resources.js";
 const calculateMaxItems = ({
@@ -59,15 +60,15 @@ class ActionBar extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
-      const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
+      const { expanded, expandToggleDisabled, layout, overflowActionsDisabled, expandPosition } = this;
       if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
         return;
       }
       this.updateGroups();
       const itemSizes = this.getItemSizes();
       const { actionGroups } = this;
-      const actionsEndCount = this.hasActionsEnd || !expandDisabled && expandPosition === "end" ? 1 : 0;
-      const actionsStartCount = this.hasActionsStart || !expandDisabled && expandPosition === "start" ? 1 : 0;
+      const actionsEndCount = this.hasActionsEnd || !expandToggleDisabled && expandPosition === "end" ? 1 : 0;
+      const actionsStartCount = this.hasActionsStart || !expandToggleDisabled && expandPosition === "start" ? 1 : 0;
       const groupCount = actionGroups.length + actionsEndCount + actionsStartCount;
       let bufferSize = groupCount;
       const actionBarContainerStyle = getComputedStyle(this.containerRef.value);
@@ -117,7 +118,7 @@ class ActionBar extends LitElement {
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
     this.floating = false;
-    this.expandDisabled = false;
+    this.expandToggleDisabled = false;
     this.expanded = false;
     this.expandPosition = "end";
     this.layout = "vertical";
@@ -132,11 +133,23 @@ class ActionBar extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandToggleDisabled: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
+  get expandDisabled() {
+    return this.expandToggleDisabled;
+  }
+  set expandDisabled(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "expandDisabled",
+      removalVersion: 6,
+      suggested: "expandToggleDisabled"
+    });
+    this.expandToggleDisabled = value;
+  }
   async overflowActions() {
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
@@ -153,7 +166,7 @@ class ActionBar extends LitElement {
     this.cancelable.add(this.resize);
   }
   willUpdate(changes) {
-    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
+    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandToggleDisabled") && (this.hasUpdated || this.expandToggleDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
       this.overflowActions();
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
@@ -306,9 +319,9 @@ class ActionBar extends LitElement {
     return ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip });
   }
   renderActionsGroup(position) {
-    const { expandDisabled, scale, layout, overlayPositioning, expandPosition } = this;
+    const { expandToggleDisabled, scale, layout, overlayPositioning, expandPosition } = this;
     const isStart = position === "start";
-    const hasExpandToggle = !expandDisabled && expandPosition === position;
+    const hasExpandToggle = !expandToggleDisabled && expandPosition === position;
     const slotName = isStart ? SLOTS.actionsStart : SLOTS.actionsEnd;
     const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
     const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;

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

@@ -32,7 +32,7 @@ export abstract class ActionGroup extends LitElement {
    * @internal
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** 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;
   /**
    * When `true`, the `calcite-action-menu` is open.
@@ -43,7 +43,7 @@ export abstract class ActionGroup extends LitElement {
   /** Specifies the position of the action menu. */
   accessor menuPlacement: LogicalPlacement | undefined;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { more?: string; };
+  accessor messageOverrides: { more?: string | undefined; };
   /**
    * When `true`, the component's actions will not be overflowed into a menu by a parent `calcite-action-bar`.
    *
@@ -83,9 +83,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor selectionMode: Extract<"single" | "single-persist" | "multiple" | "none", SelectionMode>;
   /**
-   * 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-action-menu/customElement.d.ts

@@ -22,8 +22,8 @@ export abstract class ActionMenu extends LitElement {
    * @default false
    */
   accessor expanded: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -59,9 +59,7 @@ export abstract class ActionMenu extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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-action-menu/customElement.js

@@ -177,7 +177,7 @@ class ActionMenu extends LitElement {
     }
     menuButtonEl.removeEventListener("click", this.menuButtonClick);
     menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-    this.menuButtonEl = null;
+    this.menuButtonEl = void 0;
   }
   setMenuButtonEl(event) {
     const actions = event.target.assignedElements({
@@ -213,7 +213,7 @@ class ActionMenu extends LitElement {
   setTooltipReferenceElement() {
     const { tooltipEl, expanded, menuButtonEl, open } = this;
     if (tooltipEl) {
-      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
+      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : void 0;
     }
   }
   updateActions(actions) {
@@ -288,7 +288,7 @@ class ActionMenu extends LitElement {
     const { actionElements, activeMenuItemIndex, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = activeAction?.id || null;
-    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
+    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? void 0 ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
   }
   render() {
     return html`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${SLOTS.tooltip} @slotchange=${this.updateTooltip}></slot>`;

package/dist/components/calcite-action-pad/customElement.d.ts

@@ -34,10 +34,10 @@ export abstract class ActionPad extends LitElement {
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
    * Specifies the type of positioning to use for overlaid content, where:

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

@@ -57,7 +57,7 @@ export abstract class Alert extends LitElement {
    */
   accessor label: string;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
   /**
@@ -85,9 +85,7 @@ export abstract class Alert extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * 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-autocomplete/customElement.d.ts

@@ -53,13 +53,9 @@ export abstract class Autocomplete extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
-  /**
-   * 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` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
@@ -94,9 +90,9 @@ export abstract class Autocomplete extends LitElement {
   accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      clear?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -180,9 +176,7 @@ export abstract class Autocomplete extends LitElement {
   /** Specifies the component's suffix text. */
   accessor suffixText: string | 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-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-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.
@@ -90,10 +90,10 @@ export abstract class Block extends LitElement {
   accessor menuPlacement: LogicalPlacement;
   /** Overrides individual strings used by the component. */
   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 +131,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-section/customElement.d.ts

@@ -28,8 +28,8 @@ export abstract class BlockSection extends LitElement {
   accessor iconStart: IconName | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      collapse?: string;
-      expand?: string;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * When `true`, expands the component and its contents.

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;
@@ -74,7 +70,7 @@ export abstract class Button extends LitElement {
    */
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { loading?: string; };
+  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-card/customElement.d.ts

@@ -39,8 +39,8 @@ export abstract class Card extends LitElement {
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
   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

@@ -56,13 +56,13 @@ export abstract class Carousel extends LitElement {
   accessor label: string;
   /** Overrides individual strings used by the component. */
   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.
@@ -42,7 +38,7 @@ export abstract class Checkbox extends LitElement {
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  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-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"`).
    *
@@ -68,7 +68,7 @@ export abstract class Chip extends LitElement {
    */
   accessor label: string;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { dismissLabel?: string; };
+  accessor messageOverrides: { dismissLabel?: string | undefined; };
   /**
    * Specifies the size of the component.
    *

package/dist/components/calcite-chip/customElement.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

@@ -73,26 +73,26 @@ export abstract class ColorPicker extends LitElement {
   accessor hexDisabled: boolean;
   /** Overrides individual strings used by the component. */
   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

@@ -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>`);