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

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

@@ -1,13 +1,21 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout, Position, Scale, SelectionAppearance } from "../interfaces.js";
+import type { Layout, Position, Scale, SelectionAppearance } from "../types.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border radius. */
+  "--calcite-action-pad-corner-radius": "*";
+  /** When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width. */
+  "--calcite-action-pad-expanded-max-width": "*";
+  /** Specifies the component's space between slotted components. */
+  "--calcite-action-pad-items-space": "*";
+}
+}
+
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead.
- * @cssproperty [--calcite-action-pad-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-action-pad-expanded-max-width] - When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width.
- * @cssproperty [--calcite-action-pad-items-space] - Specifies the component's space between slotted components.
  * @slot  - A slot for adding `calcite-action`s to the component.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
@@ -32,19 +40,23 @@ export abstract class ActionPad extends LitElement {
    * @default "vertical"
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** 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: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -1,15 +1,15 @@
 /* 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 { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
-import { t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
+import { b as slotChangeGetAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
+import { l as legacyToggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as isAction } from "../../chunks/resources.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { l as logger } from "../../chunks/logger.js";
+import { i as isTooltip } from "../../chunks/resources11.js";
+import { i as isAction } from "../../chunks/resources4.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 const CSS = {
   actionGroupEnd: "action-group--end",
   container: "container"
@@ -17,7 +17,7 @@ const CSS = {
 const SLOTS = {
   expandTooltip: "expand-tooltip"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-pad-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-sm));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm-plus)}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px;padding-block-end:var(--calcite-internal-action-pad-padding)}.container{display:inline-flex;flex-direction:column;overflow:hidden;box-shadow:var(--calcite-shadow-md);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1));color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-pad-gap: var( --calcite-action-pad-items-space, var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs)) );--calcite-internal-action-pad-padding: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=m]){--calcite-internal-action-pad-gap: var( --calcite-action-pad-items-space, var(--calcite-theme-space-sm, var(--calcite-spacing-sm)) );--calcite-internal-action-pad-padding: var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-theme-space-sm-plus, var(--calcite-spacing-sm-plus))}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px;padding-block-end:var(--calcite-internal-action-pad-padding)}.container{display:inline-flex;flex-direction:column;overflow:hidden;box-shadow:var(--calcite-shadow-md);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionPad extends LitElement {
   constructor() {
     super();
@@ -29,7 +29,7 @@ class ActionPad extends LitElement {
       this.calciteActionPadToggle.emit();
     };
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -69,7 +69,7 @@ class ActionPad extends LitElement {
   }
   willUpdate(changes) {
     if (changes.has("expanded") && this.hasUpdated) {
-      toggleChildActionText({ el: this.el, expanded: this.expanded });
+      legacyToggleChildActionText({ el: this.el, expanded: this.expanded });
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.updateGroups();
@@ -113,7 +113,7 @@ class ActionPad extends LitElement {
     this.updateActions();
   }
   handleTooltipSlotChange(event) {
-    const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
+    const tooltips = slotChangeGetAssignedElements(event).filter(isTooltip);
     this.expandTooltip = tooltips[0];
   }
   handleKeyDown(event) {

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

@@ -2,19 +2,29 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { MenuPlacement } from "../../utils/floating-ui.js";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { Kind, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
-import type { AlertDuration, AlertQueue } from "./interfaces.js";
+import type { Kind, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+import type { AlertDuration, AlertQueue } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's width. */
+  "--calcite-alert-width": "*";
+  /** Specifies the component's background color. */
+  "--calcite-alert-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-alert-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-alert-shadow": "*";
+  /** Specifies the component's `placement` offset. */
+  "--calcite-alert-offset-size": "*";
+}
+}
 
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  *
- * @cssproperty [--calcite-alert-width] - Specifies the component's width.
- * @cssproperty [--calcite-alert-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-alert-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-alert-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-alert-offset-size] - Specifies the component's `placement` offset.
  * @slot [title] - A slot for adding a title to the component.
  * @slot [message] - A slot for adding main text to the component.
  * @slot [link] - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
@@ -56,8 +66,12 @@ export abstract class Alert extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
   /**
@@ -85,9 +99,7 @@ export abstract class Alert extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -4,38 +4,15 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, b as setRequestedIcon } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, v as setRequestedIcon } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { N as NumberStringFormat } from "../../chunks/locale.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources4.js";
+import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources3.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-const DURATIONS = {
-  slow: 14e3,
-  medium: 1e4,
-  fast: 6e3
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  title: "title",
-  message: "message",
-  link: "link"
-};
-const CSS = {
-  actionsEnd: "actions-end",
-  close: "close",
-  container: "container",
-  containerActive: "container--active",
-  dismissProgress: "dismiss-progress",
-  icon: "icon",
-  containerEmbedded: "container--embedded",
-  queueCount: "queue-count",
-  queueCountActive: "queue-count--active",
-  textContainer: "text-container",
-  focused: "focused"
-};
+import { D as DURATIONS, S as SLOTS, C as CSS } from "../../chunks/resources13.js";
 const alertQueueTimeoutMs = 300;
 class AlertManager {
   constructor() {
@@ -90,7 +67,7 @@ class AlertManager {
     });
   }
 }
-const styles = css`:host([scale=s]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-xs)}:host([scale=m]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-xs)}:host([scale=l]){--calcite-internal-alert-action-spacing: var(--calcite-spacing-sm)}:host{display:block;inline-size:var(--calcite-alert-width)}.container--embedded,.container[popover]{pointer-events:none;position:fixed;margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;padding:0;text-align:start;opacity:0;inset:initial;box-shadow:var(--calcite-alert-shadow, var(--calcite-shadow-md));background-color:var(--calcite-alert-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);max-inline-size:calc(100% - var(--calcite-alert-offset-size, 2rem) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,all var(--calcite-animation-timing) ease-in-out;overflow:visible}.container--bottom,.container--top,.container--bottom[popover],.container--top[popover]{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),0);inset-block-end:var(--calcite-alert-offset-size, 2rem)}.container[class*=top]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),0);inset-block-start:var(--calcite-alert-offset-size, 2rem)}.container[class*=start]{inset-inline-start:var(--calcite-alert-offset-size, 2rem);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-offset-size, 2rem);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-block:auto;margin-inline-end:auto}.close{margin-inline-end:var(--calcite-internal-alert-action-spacing)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-color-transparent-tint);inset-inline-end:0}.actions-end{display:flex;gap:var(--calcite-internal-alert-action-spacing);padding-block:var(--calcite-internal-alert-action-spacing);padding-inline:0 var(--calcite-internal-alert-action-spacing)}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) .queue-count{margin-inline:.5rem}:host([scale=s]) .container{--calcite-internal-alert-min-height: 3.5rem;inline-size:var(--calcite-alert-width, 40em)}:host([scale=s]) .icon{padding-inline-start:.75rem}:host([scale=s]) .text-container{padding-block:.5rem;padding-inline:.75rem .5rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) .queue-count{margin-inline:.75rem}:host([scale=m]) .container{--calcite-internal-alert-min-height: 4.1875rem;inline-size:var(--calcite-alert-width, 50em)}:host([scale=m]) .icon{padding-inline-start:1rem}:host([scale=m]) .text-container{padding-block:.75rem;padding-inline:1rem .75rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-internal-alert-min-height: 5.625rem;inline-size:var(--calcite-alert-width, 60em)}:host([scale=l]) .icon{padding-inline-start:1.25rem}:host([scale=l]) .text-container{padding-block:1rem;padding-inline:1.25rem 1rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0;display:inline;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal);margin-inline-end:.5rem;color:var(--calcite-color-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){color:var(--calcite-color-text-link)}slot[name=link]::slotted(:not(calcite-link)){display:inline-flex}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress calc(6s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress calc(10s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress calc(14s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:.75}to{inline-size:100%;opacity:1}}:host([top-layer-disabled]) .container,.container--embedded{z-index:var(--calcite-z-index-toast)}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}`;
+const styles = css`:host([scale=s]){--calcite-internal-alert-action-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}:host([scale=m]){--calcite-internal-alert-action-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}:host([scale=l]){--calcite-internal-alert-action-spacing: var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host{display:block;inline-size:var(--calcite-alert-width)}.container--embedded,.container[popover]{pointer-events:none;position:fixed;margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;padding:0;text-align:start;opacity:0;inset:initial;box-shadow:var(--calcite-alert-shadow, var(--calcite-shadow-md));background-color:var(--calcite-alert-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));border-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);max-inline-size:calc(100% - var(--calcite-alert-offset-size, 2rem) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,all var(--calcite-animation-timing) ease-in-out;overflow:visible}.container--bottom,.container--top,.container--bottom[popover],.container--top[popover]{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),0);inset-block-end:var(--calcite-alert-offset-size, 2rem)}.container[class*=top]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),0);inset-block-start:var(--calcite-alert-offset-size, 2rem)}.container[class*=start]{inset-inline-start:var(--calcite-alert-offset-size, 2rem);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-offset-size, 2rem);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-block:auto;margin-inline-end:auto}.close{margin-inline-end:var(--calcite-internal-alert-action-spacing)}.queue-count{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-color-transparent-tint);inset-inline-end:0}.actions-end{display:flex;gap:var(--calcite-internal-alert-action-spacing);padding-block:var(--calcite-internal-alert-action-spacing);padding-inline:0 var(--calcite-internal-alert-action-spacing)}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) .queue-count{margin-inline:.5rem}:host([scale=s]) .container{--calcite-internal-alert-min-height: 3.5rem;inline-size:var(--calcite-alert-width, 40em)}:host([scale=s]) .icon{padding-inline-start:.75rem}:host([scale=s]) .text-container{padding-block:.5rem;padding-inline:.75rem .5rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) .queue-count{margin-inline:.75rem}:host([scale=m]) .container{--calcite-internal-alert-min-height: 4.1875rem;inline-size:var(--calcite-alert-width, 50em)}:host([scale=m]) .icon{padding-inline-start:1rem}:host([scale=m]) .text-container{padding-block:.75rem;padding-inline:1rem .75rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-internal-alert-min-height: 5.625rem;inline-size:var(--calcite-alert-width, 60em)}:host([scale=l]) .icon{padding-inline-start:1.25rem}:host([scale=l]) .text-container{padding-block:1rem;padding-inline:1.25rem 1rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0;display:inline;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal);margin-inline-end:.5rem;color:var(--calcite-color-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){color:var(--calcite-color-text-link)}slot[name=link]::slotted(:not(calcite-link)){display:inline-flex}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress calc(6s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress calc(10s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress calc(14s * var(--calcite-internal-duration-factor)) ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:.75}to{inline-size:100%;opacity:1}}:host([top-layer-disabled]) .container,.container--embedded{z-index:var(--calcite-z-index-toast)}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}`;
 const manager = new AlertManager();
 class Alert extends LitElement {
   constructor() {
@@ -103,7 +80,7 @@ class Alert extends LitElement {
     this.totalOpenTime = 0;
     this.transitionRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
       target: this.transitionRef
@@ -129,7 +106,7 @@ class Alert extends LitElement {
     this.calciteAlertOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasEndActions: [16, {}, { state: true }], isFocused: [16, {}, { state: true }], numberStringFormatter: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], autoClose: [7, {}, { reflect: true, type: Boolean }], autoCloseDuration: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], openAlertCount: [9, {}, { type: Number }], placement: [3, {}, { reflect: true }], queue: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasEndActions: [16, {}, { state: true }], isFocused: [16, {}, { state: true }], numberStringFormatter: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], autoClose: [7, {}, { reflect: true, type: Boolean }], autoCloseDuration: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], openAlertCount: [9, {}, { type: Number }], placement: [3, {}, { reflect: true }], queue: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;

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

@@ -1,33 +1,61 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { Alignment, Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Alignment, Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-autocomplete-background-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-autocomplete-corner-radius": "*";
+  /** Specifies the component's text color. */
+  "--calcite-autocomplete-text-color": "*";
+  /** Specifies the maximum height of the component's menu. */
+  "--calcite-autocomplete-menu-max-size-y": "*";
+  /** Specifies the input's prefix width, when present. */
+  "--calcite-autocomplete-input-prefix-size": "*";
+  /** Specifies the input's suffix width, when present. */
+  "--calcite-autocomplete-input-suffix-size": "*";
+  /** Specifies the background color of the component's input. */
+  "--calcite-autocomplete-input-background-color": "*";
+  /** Specifies the border color of the component's input. */
+  "--calcite-autocomplete-input-border-color": "*";
+  /** Specifies the corner radius of the component's input. */
+  "--calcite-autocomplete-input-corner-radius": "*";
+  /** Specifies the shadow of the component's input. */
+  "--calcite-autocomplete-input-shadow": "*";
+  /** Specifies the icon color of the component's input. */
+  "--calcite-autocomplete-input-icon-color": "*";
+  /** Specifies the text color of the component's input. */
+  "--calcite-autocomplete-input-text-color": "*";
+  /** Specifies the placeholder text color of the component's input. */
+  "--calcite-autocomplete-input-placeholder-text-color": "*";
+  /** Specifies the background color of the input's `clearable` element. */
+  "--calcite-autocomplete-input-actions-background-color": "*";
+  /** Specifies the background color of the input's `clearable` element when hovered. */
+  "--calcite-autocomplete-input-actions-background-color-hover": "*";
+  /** Specifies the background color of the input's `clearable` element when pressed. */
+  "--calcite-autocomplete-input-actions-background-color-press": "*";
+  /** Specifies the icon color of the input's `clearable` element. */
+  "--calcite-autocomplete-input-actions-icon-color": "*";
+  /** Specifies the icon color of the input's `clearable` element when hovered. */
+  "--calcite-autocomplete-input-actions-icon-color-hover": "*";
+  /** Specifies the icon color of the input's `clearable` element when pressed. */
+  "--calcite-autocomplete-input-actions-icon-color-press": "*";
+  /** Specifies the background color of the Input's `loading` element, when present. */
+  "--calcite-autocomplete-input-loading-background-color": "*";
+  /** Specifies the fill color of the Input's `loading` element, when present. */
+  "--calcite-autocomplete-input-loading-fill-color": "*";
+  /** Specifies the text color of the Input's prefix, when present. */
+  "--calcite-autocomplete-input-prefix-text-color": "*";
+  /** Specifies the text color of the Input's suffix, when present. */
+  "--calcite-autocomplete-input-suffix-text-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-autocomplete-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-autocomplete-menu-max-size-y] - Specifies the maximum height of the component's menu.
- * @cssproperty [--calcite-autocomplete-input-prefix-size] - Specifies the input's prefix width, when present.
- * @cssproperty [--calcite-autocomplete-input-suffix-size] - Specifies the input's suffix width, when present.
- * @cssproperty [--calcite-autocomplete-input-background-color] - Specifies the background color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-border-color] - Specifies the border color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-corner-radius] - Specifies the corner radius of the component's input.
- * @cssproperty [--calcite-autocomplete-input-shadow] - Specifies the shadow of the component's input.
- * @cssproperty [--calcite-autocomplete-input-icon-color] - Specifies the icon color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-text-color] - Specifies the text color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-placeholder-text-color] - Specifies the placeholder text color of the component's input.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color] - Specifies the background color of the input's `clearable` element.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-autocomplete-input-actions-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color] - Specifies the icon color of the input's `clearable` element.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color-hover] - Specifies the icon color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-autocomplete-input-actions-icon-color-press] - Specifies the icon color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-autocomplete-input-loading-background-color] - Specifies the background color of the Input's `loading` element, when present.
- * @cssproperty [--calcite-autocomplete-input-loading-fill-color] - Specifies the fill color of the Input's `loading` element, when present.
- * @cssproperty [--calcite-autocomplete-input-prefix-text-color] - Specifies the text color of the Input's prefix, when present.
- * @cssproperty [--calcite-autocomplete-input-suffix-text-color] - Specifies the text color of the Input's suffix, when present.
  * @slot  - A slot for adding `calcite-autocomplete-item` elements.
  * @slot [content-bottom] - A slot for adding content below `calcite-autocomplete-item` elements.
  * @slot [content-top] - A slot for adding content above `calcite-autocomplete-item` elements.
@@ -53,13 +81,9 @@ export abstract class Autocomplete extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
@@ -92,11 +116,15 @@ export abstract class Autocomplete extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
   accessor maxLength: number | 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: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      clear?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -120,11 +148,11 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -180,9 +208,7 @@ export abstract class Autocomplete extends LitElement {
   /** Specifies the component's suffix text. */
   accessor suffixText: string | undefined;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
@@ -199,7 +225,7 @@ export abstract class Autocomplete extends LitElement {
    */
   get validity(): ValidityState;
   /**
-   * Specifies the selected `autocomplete-item`. When the component resides in a form, the `value` is submitted with the form.
+   * Specifies the value of the selected `autocomplete-item`. When the component resides in a form, the `value` is submitted with the form.
    *
    * @default ""
    */