@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.91

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.
@@ -19,9 +25,9 @@ import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
  */
 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";
+  accessor canPull: ((detail: ListDragDetail) => boolean | "clone") | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: ListDragDetail) => boolean;
+  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.
    *
@@ -85,13 +90,10 @@ export abstract class List extends LitElement {
    */
   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,37 +1,23 @@
 /* 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"
-};
+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-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}`;
 const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
 class List extends LitElement {
@@ -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;

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

@@ -1,20 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { isEqual } from "es-toolkit";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { s as slotChangeHasAssignedElement, y as getFirstTabbable } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, p as getFirstTabbable } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { l as logger } from "../../chunks/logger.js";
 import { s as styles$1 } from "../../chunks/sortable.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 { a as listSelector, g as getDepth, c as getListItemChildren } from "../../chunks/utils4.js";
-import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources11.js";
+import { l as listSelector, g as getDepth, a as getListItemChildren } from "../../chunks/utils4.js";
+import { a as activeCellTestAttribute, I as ICONS, b as CSS, S as SLOTS } from "../../chunks/resources34.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:flex;flex-direction:column}: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([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--border-selected:focus{box-shadow:inset var(--calcite-border-width-lg) 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}:host(:not([interaction-mode=static])):not([disabled]):not([selected]) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([interaction-mode=static])):not([disabled]) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host(:not([interaction-mode=static]))[selected]:hover .selection-container,:host(:not([interaction-mode=static]))[selected]:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}:host(:not([interaction-mode=static])) .content-container{-webkit-user-select:none;user-select:none}:host(:not([interaction-mode=static])) .container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([interaction-mode=static])) .container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}:host(:not([interaction-mode=static])) .icon:hover,:host(:not([interaction-mode=static])) .icon:active{color:var(--calcite-color-text-1)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.actions-start,.actions-end{margin-inline-end:var(--calcite-internal-list-action-spacing);gap:var(--calcite-internal-list-action-spacing)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:var(--calcite-space-sm-plus);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container,.close{display:flex;align-items:center}.drag-container,.selection-container,.expanded-container{padding-block-end:var(--calcite-spacing-px)}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){color:inherit}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}.drag-container calcite-action,.drag-container ::slotted(calcite-action),.actions-start calcite-action,.actions-start ::slotted(calcite-action),.actions-end calcite-action,.actions-end ::slotted(calcite-action),.close calcite-action,.close ::slotted(calcite-action){align-items:center}.drag-container{margin-inline:var(--calcite-spacing-xxs)}:host([display-mode=nested]) .drag-container,:host([selection-appearance=icon]:not([selection-mode=none])) .drag-container{margin-inline:var(--calcite-spacing-xxs) 0}:host([hidden]){display:none}[hidden]{display:none}`;
 const focusMap = /* @__PURE__ */ new Map();
 class ListItem extends LitElement {
@@ -28,7 +27,7 @@ class ListItem extends LitElement {
     this.direction = useDirection();
     this.handleGridRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
@@ -74,7 +73,7 @@ class ListItem extends LitElement {
     this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { type: String }, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles, styles$1];

package/dist/components/calcite-list-item/{interfaces.d.ts → types.d.ts}

@@ -1,9 +1,9 @@
 import type { ListItem } from "./customElement.js";
 
 export type ItemData = {
-  label: string;
-  description: string;
-  metadata: Record<string, unknown>;
+  label?: string;
+  description?: string;
+  metadata?: Record<string, unknown>;
   el: ListItem;
   heading?: string[];
 };