@esri/calcite-components 5.2.0-next.4 → 5.2.0-next.41

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";
@@ -53,7 +55,7 @@ class Button extends LitElement {
     this.width = "auto";
   }
   static {
-    this.properties = { hasContent: [16, {}, { state: true }], tooltipText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], form: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], round: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], splitChild: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], type: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { hasContent: [16, {}, { state: true }], tooltipText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], form: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], round: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], splitChild: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], type: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.formAssociated = true;
@@ -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

@@ -37,9 +37,17 @@ 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; };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * 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;
   /**
    * When `true` and the component resides in a form,

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

@@ -5,17 +5,18 @@ 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"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base));block-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([status=invalid]:not([checked])) .toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .toggle:hover .check-svg,:host([indeterminate]) .toggle:hover .check-svg{background-color:var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}:host([checked]) .toggle:active .check-svg,:host([indeterminate]) .toggle:active .check-svg{background-color:var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press));box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}.toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media(forced-colors:active){.check-svg{border:1px solid currentColor}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base));block-size:var(--calcite-checkbox-size, var(--calcite-font-size-relative-base))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([status=invalid]:not([checked])) .toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .toggle:hover .check-svg,:host([indeterminate]) .toggle:hover .check-svg{background-color:var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}:host([checked]) .toggle:active .check-svg,:host([indeterminate]) .toggle:active .check-svg{background-color:var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press));box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand-hover))}.toggle:active .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-press, var(--calcite-color-brand-press))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media(forced-colors:active){.check-svg{border:1px solid currentColor}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Checkbox extends LitElement {
   constructor() {
     super();
@@ -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;
@@ -41,7 +41,7 @@ class Chip extends LitElement {
     this.listen("click", this.clickHandler);
   }
   static {
-    this.properties = { hasImage: [16, {}, { state: true }], hasText: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], closeOnDelete: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], parentChipGroup: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, value: 1 };
+    this.properties = { hasImage: [16, {}, { state: true }], hasText: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], closeOnDelete: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], parentChipGroup: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, value: 1 };
   }
   static {
     this.styles = styles;
@@ -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-chip-group/customElement.d.ts

@@ -26,15 +26,12 @@ export abstract class ChipGroup extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): Chip[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

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",

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,13 +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 its initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  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;
+  accessor form: string | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -54,29 +55,37 @@ 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.
    *
    * @default 0
    */
   accessor maxItems: number;
-  /** 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: {
-      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;
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
+  accessor name: string | undefined;
   /**
    * When `true`, displays and positions the component.
    *
@@ -84,19 +93,19 @@ export abstract class Combobox extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
   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`.
    *
@@ -137,37 +146,31 @@ export abstract class Combobox extends LitElement {
   /** The component's selected items. */
   get selectedItems(): HTMLCalciteComboboxItemElement[];
   /**
-   * Specifies the selection appearance, where
+   * Specifies the selection appearance.
    *
-   * `"icon"` displays a checkmark or dot, and
-   *
-   * `"highlight"` displays a background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays a background highlight.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "highlight", SelectionAppearance>;
   /**
-   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
-   *
-   * `"all"` displays all selections with individual `calcite-chip`s,
-   *
-   * `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and
+   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections.
    *
-   * `"single"` displays one `calcite-chip` with the total number of selections.
+   * - `"all"` displays all selections with individual `calcite-chip`s.
+   * - `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed.
+   * - `"single"` displays one `calcite-chip` with the total number of selections.
    *
    * @default "all"
    */
   accessor selectionDisplay: SelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    *
    * @default "multiple"
    */
@@ -186,9 +189,9 @@ export abstract class Combobox extends LitElement {
    */
   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.
    *