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

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

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

@@ -10,6 +10,7 @@ import type { SelectionDisplay } from "./interfaces.js";
  * @cssproperty [--calcite-combobox-divider-color] - Specifies the component's divider color.
  * @cssproperty [--calcite-combobox-icon-color] - Specifies the component's icon color.
  * @cssproperty [--calcite-combobox-icon-color-hover] - Specifies the component's icon color when hovered.
+ * @cssproperty [--calcite-combobox-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-combobox-background-color] - Specifies the background color of the component's listbox.
  * @cssproperty [--calcite-combobox-input-border-color] - Specifies the border color of the component's input.
  * @cssproperty [--calcite-combobox-input-background-color] - Specifies the background color of the component's input.
@@ -24,7 +25,7 @@ export abstract class Combobox extends LitElement {
    *
    * @default false
    */
-  accessor allowCustomValues: boolean;
+  accessor allowCustomValues: boolean | undefined;
   /**
    * When `true`, disables value-clearing.
    *
@@ -40,17 +41,13 @@ export abstract class Combobox extends LitElement {
   /** The component's filtered items. */
   get filteredItems(): HTMLCalciteComboboxItemElement[];
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, `shortHeading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /** The component's filter input field text. */
   accessor filterText: string;
-  /** 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 `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;
+  /** 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. */
+  accessor form: string | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +55,7 @@ export abstract class Combobox extends LitElement {
    */
   accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Specifies the maximum number of `calcite-combobox-item-group`s & `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
    *
@@ -67,20 +64,20 @@ export abstract class Combobox extends LitElement {
   accessor maxItems: number;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      add?: string;
-      all?: string;
-      allSelected?: string;
-      clear?: string;
-      noMatches?: string;
-      removeTag?: string;
-      required?: string;
-      selectAll?: string;
-      selected?: string;
-      nonEditable?: string;
-      disabledSelectedCount?: string;
+      add?: string | undefined;
+      all?: string | undefined;
+      allSelected?: string | undefined;
+      clear?: string | undefined;
+      noMatches?: string | undefined;
+      removeTag?: string | undefined;
+      required?: string | undefined;
+      selectAll?: string | undefined;
+      selected?: string | undefined;
+      nonEditable?: string | undefined;
+      disabledSelectedCount?: string | undefined;
   };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `true`, displays and positions the component.
    *
@@ -98,9 +95,9 @@ export abstract class Combobox extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /** Specifies the input's placeholder text. */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies the input's placeholder icon. */
-  accessor placeholderIcon: IconName;
+  accessor placeholderIcon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the input's `placeholderIcon`.
    *
@@ -183,18 +180,16 @@ export abstract class Combobox extends LitElement {
    */
   accessor status: Status;
   /**
-   * 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)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *