@esri/calcite-components 5.2.0-next.10 → 5.2.0-next.100

package/dist/components/calcite-input-time-zone/customElement.js

@@ -5,10 +5,10 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as connectLabel, d as disconnectLabel } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { S as SLOTS$1 } from "../../chunks/resources7.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { S as SLOTS$1 } from "../../chunks/resources10.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 import { g as getDateTimeFormat } from "../../chunks/locale.js";
@@ -157,14 +157,18 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
   }).filter((group) => !!group).sort((groupA, groupB) => groupA.value - groupB.value);
 }
 function getTimeZoneLabel(timeZone, messages) {
-  return messages[timeZone] || getCity(timeZone);
+  return getMessage(messages, timeZone) || getCity(timeZone);
 }
 function getSelectedRegionTimeZoneLabel(city, country, messages) {
   const template = messages.timeZoneRegionLabel;
   return template.replace("{city}", city).replace("{country}", getMessageOrKeyFallback(messages, country));
 }
 function getMessageOrKeyFallback(messages, key) {
-  return messages[key] || key;
+  return getMessage(messages, key) || key;
+}
+function getMessage(messages, key) {
+  const message = messages[key];
+  return typeof message === "string" ? message : void 0;
 }
 function getCity(timeZone) {
   return timeZone.split("/").pop() ?? "";
@@ -197,16 +201,16 @@ function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     )
   );
 }
-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{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}: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}`;
+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{display:block;--calcite-combobox-corner-radius: var(--calcite-input-time-zone-corner-radius, var(--calcite-corner-radius))}.offset{white-space:nowrap}: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 InputTimeZone extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.comboboxRef = createRef();
     this.formSupport = useForm({
       inputType: "text"
     })(this);
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.#valueUpdateContext = null;
     this.clearable = false;
@@ -226,9 +230,10 @@ class InputTimeZone extends LitElement {
     this.calciteInputTimeZoneChange = createEvent({ cancelable: false });
     this.calciteInputTimeZoneClose = createEvent({ cancelable: false });
     this.calciteInputTimeZoneOpen = createEvent({ cancelable: false });
+    useLabel(this);
   }
   static {
-    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -250,10 +255,6 @@ class InputTimeZone extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.comboboxRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
   async load() {
     this.normalizer = await getNormalizer(this.mode);
     await this.updateTimeZoneItems();
@@ -278,10 +279,6 @@ class InputTimeZone extends LitElement {
   loaded() {
     this.openChanged();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   async handleTimeZoneItemPropsChange() {
     if (!this.timeZoneItems || !this.hasUpdated) {
       return;
@@ -407,7 +404,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
   }
   renderItems() {
     if (this.mode === "region") {

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

@@ -1,12 +1,17 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale } from "../interfaces.js";
+import type { Alignment, Scale } from "../types.js";
 
-/**
- * @cssproperty [--calcite-label-margin-bottom] - Specifies the component's bottom spacing.
- * @cssproperty [--calcite-label-text-color] - Specifies the component's text color.
- * @slot  - A slot for adding text and a component that can be labeled.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's bottom spacing. */
+  "--calcite-label-margin-bottom": "*";
+  /** Specifies the component's text color. */
+  "--calcite-label-text-color": "*";
+}
+}
+
+/** @slot  - A slot for adding text and a component that can be labeled. */
 export abstract class Label extends LitElement {
   /**
    * Specifies the component's text alignment.
@@ -17,9 +22,11 @@ export abstract class Label extends LitElement {
   /** Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. */
   accessor for: string | undefined;
   /**
-   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.  [Deprecated] The `"default"` value is deprecated, use `"block"` instead.
+   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.
+   *
+   * [Deprecated] The `"default"` value is deprecated in v3.3.0, removal target v6.0.0 - use `"block"` instead.
    *
-   * @default "default"
+   * @default "block"
    */
   accessor layout: "block" | "inline" | "inline-space-between" | "default";
   /**

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledComponent, b as labelDisconnectedEvent } from "../../chunks/label.js";
+import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledComponent, b as labelDisconnectedEvent } from "../../chunks/useLabel.js";
 const CSS = {
   container: "container"
 };
@@ -11,7 +11,7 @@ class Label extends LitElement {
   constructor() {
     super();
     this.alignment = "start";
-    this.layout = "default";
+    this.layout = "block";
     this.scale = "m";
     this.calciteInternalLabelClick = createEvent({ bubbles: false, cancelable: false });
     this.listen("click", this.labelClickHandler);

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

@@ -1,7 +1,14 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-link-text-color": "*";
+}
+}
 
 /**
  * Any attributes placed on <calcite-link> component will propagate to the rendered child
@@ -10,7 +17,6 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  *
  * It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission
  *
- * @cssproperty [--calcite-link-text-color] - Specifies the component's text color.
  * @slot  - A slot for adding text.
  */
 export abstract class Link extends LitElement {

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

@@ -4,21 +4,22 @@ import { css, html } from "lit";
 import { LitElement, stringOrBoolean, nothing, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-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{display:inline}:host a{cursor:pointer;font-family:inherit;text-decoration-line:none;outline-color:transparent;font-size:inherit;-webkit-appearance:none;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0 100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat;background-size:0% var(--calcite-border-width-sm),100% var(--calcite-border-width-sm)}:host a:hover,:host a:focus{background-size:100% var(--calcite-border-width-sm),100% var(--calcite-border-width-sm)}:host a:focus{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))))}:host a:active{background-size:100% var(--calcite-border-width-md),100% var(--calcite-border-width-md)}:host a:active.calcite--rtl{background-position:100% 100%,100% 100%}:host a{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,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}: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{display:inline}:host a{cursor:pointer;font-family:inherit;text-decoration-line:none;outline-color:transparent;font-size:inherit;-webkit-appearance:none;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial}:host a:focus{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))))}.link--text{text-decoration-line:var(--calcite-internal-link-text-decoration-line, underline);text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-decoration-thickness:var(--calcite-border-width-sm);text-underline-offset:.33em;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,text-decoration-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}:host a:hover .link--text{text-decoration-color:currentColor}:host a:active .link--text{text-decoration-color:currentColor}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.link--icon{vertical-align:middle;margin-block-start:-.25em}.link--icon.icon-start{margin-inline-end:var(--calcite-space-2xs)}.link--icon.icon-end{margin-inline-start:var(--calcite-space-2xs)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
-  calciteLinkIcon: "calcite-link--icon",
+  icon: "link--icon",
   iconStart: "icon-start",
-  iconEnd: "icon-end"
+  iconEnd: "icon-end",
+  text: "link--text"
 };
 class Link extends LitElement {
   constructor() {
     super();
     this.anchorRef = createRef();
     this.direction = useDirection();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.keyDownHandler = (event) => {
       if (isActivationKey(event.key)) {
@@ -36,7 +37,7 @@ class Link extends LitElement {
     this.listen("click", this.clickHandler);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], rel: 1, target: 1 };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], rel: 1, target: 1 };
   }
   static {
     this.styles = styles;
@@ -54,14 +55,14 @@ class Link extends LitElement {
     const dir = this.direction;
     const actAsButton = !this.href;
     this.el.role = "presentation";
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<a class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(download === true || download === "" ? "" : download || void 0) ?? nothing} href=${(this.href || void 0) ?? nothing} @click=${this.anchorClickHandler} @keydown=${actAsButton ? this.keyDownHandler : void 0} rel=${this.rel ?? nothing} .role=${actAsButton ? "button" : void 0} tabindex=${(actAsButton ? 0 : void 0) ?? nothing} target=${(this.href ? this.target : void 0) ?? nothing} ${ref(this.anchorRef)}>${html`${this.iconStart ? this.renderIcon("start") : null}<slot></slot>${this.iconEnd ? this.renderIcon("end") : null}`}</a>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<a class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(download === true || download === "" ? "" : download || void 0) ?? nothing} href=${(this.href || void 0) ?? nothing} @click=${this.anchorClickHandler} @keydown=${actAsButton ? this.keyDownHandler : void 0} rel=${this.rel ?? nothing} .role=${actAsButton ? "button" : void 0} tabindex=${(actAsButton ? 0 : void 0) ?? nothing} target=${(this.href ? this.target : void 0) ?? nothing} ${ref(this.anchorRef)}>${html`${this.iconStart ? this.renderIcon("start") : null}<span class=${safeClassMap(CSS.text)}><slot></slot></span>${this.iconEnd ? this.renderIcon("end") : null}`}</a>` });
   }
   renderIcon(position) {
     const isStart = position === "start";
     const icon = isStart ? this.iconStart : this.iconEnd;
     const shouldFlip = this.iconFlipRtl === "both" || this.iconFlipRtl === position;
     return html`<calcite-icon class=${safeClassMap({
-      [CSS.calciteLinkIcon]: true,
+      [CSS.icon]: true,
       [isStart ? CSS.iconStart : CSS.iconEnd]: true
     })} .flipRtl=${shouldFlip} .icon=${icon} scale=s></calcite-icon>`;
   }

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

@@ -1,16 +1,22 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { InteractionMode, Scale, SelectionMode } from "../interfaces.js";
-import type { ItemData } from "../calcite-list-item/interfaces.js";
+import type { InteractionMode, Scale, SelectionMode } from "../types.js";
+import type { ItemData } from "../calcite-list-item/types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { ListItem } from "../calcite-list-item/customElement.js";
 import type { SelectionAppearance } from "./resources.js";
-import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
+import type { ListDisplayMode, ListDragDetail } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-list-background-color": "*";
+}
+}
 
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
- * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
  * @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot [empty-content] - A slot for adding content to display when the component has no `calcite-list-item`s.
  * @slot [filter-actions-start] - A slot for adding actionable `calcite-action` elements before the filter component.
@@ -18,10 +24,10 @@ import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
  * @slot [filter-no-results] - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.
  */
 export abstract class List extends LitElement {
-  /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: ListDragDetail) => boolean | "clone";
-  /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: ListDragDetail) => boolean;
+  /** When provided, the method will be called to determine whether the element can be moved from the component. */
+  accessor canPull: ((detail: ListDragDetail) => boolean | "clone") | undefined;
+  /** When provided, the method will be called to determine whether the element can be added from another `calcite-list`. */
+  accessor canPut: ((detail: ListDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -29,11 +35,10 @@ export abstract class List extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * Specifies the nesting behavior of `calcite-list-item`s, where
-   *
-   * `"flat"` displays `calcite-list-item`s in a uniform list, and
+   * Specifies the nesting behavior of `calcite-list-item`s.
    *
-   * `"nested"` displays `calcite-list-item`s under their parent element.
+   * - `"flat"` displays `calcite-list-item`s in a uniform list.
+   * - `"nested"` displays `calcite-list-item`s under their parent element.
    *
    *  The parent component's behavior should follow throughout its child elements.
    *
@@ -79,19 +84,16 @@ export abstract class List extends LitElement {
    */
   accessor filterText: string;
   /**
-   * The component's group identifier.
+   * Specifies the component's group identifier.
    *
-   * To drag elements from one list into another, both lists must have the same group value.
+   * To drag elements from one `calcite-list` into another, both must have the same group value.
    */
   accessor group: string | undefined;
   /**
-   * Specifies the interaction mode of the component, where
-   *
-   * `"interactive"` allows interaction styling and pointer changes on hover,
+   * Specifies the interaction mode of the component.
    *
-   * `"static"` does not allow interaction styling and pointer changes on hover -
-   *
-   * the `"static"` value should only be used when `selectionMode` is `"none"`.
+   * - `"interactive"` allows interaction styling and pointer changes on hover.
+   * - `"static"` does not allow interaction styling and pointer changes on hover. Should only be used when `selectionMode` is `"none"`.
    *
    * @default "interactive"
    */
@@ -110,10 +112,14 @@ export abstract class List 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: {
-      filterEnabled?: string;
-      total?: string;
+      filterEnabled?: string | undefined;
+      total?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
@@ -126,27 +132,22 @@ export abstract class List extends LitElement {
   /** The currently selected items. */
   get selectedItems(): ListItem[];
   /**
-   * Specifies the selection appearance, where
-   *
-   * `"icon"` displays a checkmark or dot,
-   *
-   * `"border"` [Deprecated] - Use `"highlight"` instead - displays a border, or
+   * Specifies the selection appearance.
    *
-   * `"highlight"` displays background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays background highlight.
+   * - `"border"` displays a border. [Deprecated] in v5.0.0, removal target v6.0.0 - use `"highlight"` instead.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "border" | "highlight", SelectionAppearance>;
   /**
-   * 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.
    *
-   * `"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-list/customElement.js

@@ -1,38 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
+import { D as DEBOUNCE, l as logger, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
+import { r as slotChangeHasContent, s as slotChangeHasAssignedElement, g as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
-import { S as SLOTS$1 } from "../../chunks/resources10.js";
+import { b as listItemSelector, l as listSelector, u as updateListItemChildren, c as listItemGroupSelector, e as expandedAncestors, S as SLOTS, C as CSS } from "../../chunks/utils4.js";
+import { S as SLOTS$1 } from "../../chunks/resources19.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
-const CSS = {
-  container: "container",
-  table: "table",
-  scrim: "scrim",
-  stack: "stack",
-  tableContainer: "table-container",
-  sticky: "sticky-pos",
-  assistiveText: "assistive-text",
-  containerHeight: "container-height"
-};
-const SLOTS = {
-  emptyContent: "empty-content",
-  filterNoResults: "filter-no-results",
-  filterActionsStart: "filter-actions-start",
-  filterActionsEnd: "filter-actions-end"
-};
-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{display:block}:host([scale=s]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xs)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container-height{block-size:100%}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:calc(var(--calcite-z-index-sticky) + 1);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::slotted(:is(calcite-action[slot=filter-actions-start],calcite-action[slot=filter-actions-end])){gap:var(--calcite-internal-list-action-spacing);align-self:center}::slotted(calcite-action[slot=filter-actions-start]){margin-inline-start:var(--calcite-internal-list-action-spacing)}::slotted(calcite-action[slot=filter-actions-end]){margin-inline-end:var(--calcite-internal-list-action-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { c as isListItem } from "../../chunks/resources34.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
+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{display:block}:host([scale=s]){--calcite-internal-list-action-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=m]){--calcite-internal-list-action-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l]){--calcite-internal-list-action-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}.container-height{block-size:100%}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:calc(var(--calcite-z-index-sticky) + 1);background-color:var(--calcite-list-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::slotted(:is(calcite-action[slot=filter-actions-start],calcite-action[slot=filter-actions-end])){gap:var(--calcite-internal-list-action-spacing);align-self:center}::slotted(calcite-action[slot=filter-actions-start]){margin-inline-start:var(--calcite-internal-list-action-spacing)}::slotted(calcite-action[slot=filter-actions-end]){margin-inline-end:var(--calcite-internal-list-action-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
 const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
 class List extends LitElement {
   constructor() {
@@ -53,7 +39,7 @@ class List extends LitElement {
     this.willFilterEmit = false;
     this.willPerformFilter = false;
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.filterRowResizeObserver = createObserver("resize", () => this.updateFilterRowHeight());
     this.setFilterContainerEl = (el) => {
@@ -563,7 +549,7 @@ class List extends LitElement {
   }
   handleInteractionModeWarning() {
     if (this.interactionMode === "static" && this.selectionMode !== "none" && this.selectionAppearance === "border") {
-      console.warn(`selection-appearance="border" requires interaction-mode="interactive"`);
+      logger.warn(`selection-appearance="border" requires interaction-mode="interactive"`);
     }
   }
   validateSortMenuItem({ fromEl, toEl, dragEl, newIndex, oldIndex, type }) {
@@ -687,7 +673,7 @@ class List extends LitElement {
       [CSS.containerHeight]: this.listItems.length < 1 && loading
     })} style=${safeStyleMap({
       ["--calcite-internal-filter-enabled-offset"]: `${this.filterRowHeight}px`
-    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup ${ref(this.setFilterContainerEl)}><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup ${ref(this.setFilterContainerEl)}><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;

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

@@ -1,18 +1,32 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color when hovered. */
+  "--calcite-list-background-color-hover": "*";
+  /** Specifies the component's background color when pressed. */
+  "--calcite-list-background-color-press": "*";
+  /** Specifies the component's background color. */
+  "--calcite-list-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-list-border-color": "*";
+  /** Specifies the content color. */
+  "--calcite-list-content-text-color": "*";
+  /** Specifies the `description` color. */
+  "--calcite-list-description-text-color": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-list-icon-color": "*";
+  /** Specifies the `label` color. */
+  "--calcite-list-label-text-color": "*";
+  /** Specifies the component's selection border color. */
+  "--calcite-list-selection-border-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-list-background-color-hover] - Specifies the component's background color when hovered.
- * @cssproperty [--calcite-list-background-color-press] - Specifies the component's background color when pressed.
- * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-list-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-list-content-text-color] - Specifies the content color.
- * @cssproperty [--calcite-list-description-text-color] - Specifies the `description` color.
- * @cssproperty [--calcite-list-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-list-label-text-color] - Specifies the `label` color.
- * @cssproperty [--calcite-list-selection-border-color] - Specifies the component's selection border color.
  * @slot  - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot [actions-start] - A slot for adding actionable `calcite-action` elements before the content of the component.
  * @slot [content-start] - A slot for adding non-actionable elements before the component's `label` and `description`.
@@ -62,11 +76,15 @@ export abstract class ListItem extends LitElement {
   accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component, displays above the `description`. */
   accessor label: string | 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: {
-      close?: string;
-      expand?: string;
-      collapse?: string;
+      close?: string | undefined;
+      expand?: string | undefined;
+      collapse?: string | undefined;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
   accessor metadata: Record<string, unknown> | undefined;