@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

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

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { css, nothing, html } from "lit";
@@ -6,12 +9,10 @@ import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
+import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.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";
@@ -19,7 +20,10 @@ import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.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{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{width:100%;overflow-y:auto;max-block-size:var(--calcite-autocomplete-menu-max-size-y, 45vh);color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
   contentBottom: "content-bottom",
   contentTop: "content-top"
@@ -60,6 +64,10 @@ class Autocomplete extends LitElement {
     });
     this.cancelable = useCancelable()(this);
     this.getAllItemsDebounced = debounce(this.getAllItems, 0);
+    this.interactiveContainer = useInteractive(this);
+    this.topLayer = useTopLayer({
+      target: () => this.floatingEl
+    })(this);
     this.activeDescendant = "";
     this.activeIndex = -1;
     this.hasContentBottom = false;
@@ -77,6 +85,7 @@ class Autocomplete extends LitElement {
     this.required = false;
     this.scale = "m";
     this.status = "idle";
+    this.topLayerDisabled = false;
     this.validity = {
       valid: false,
       badInput: false,
@@ -102,7 +111,7 @@ class Autocomplete extends LitElement {
     this.listen("calciteAutocompleteItemSelect", this.handleAutocompleteItemSelect);
   }
   static {
-    this.properties = { activeDescendant: [16, {}, { state: true }], activeIndex: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], items: [16, {}, { state: true }], groups: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, placement: [3, {}, { reflect: true }], prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { activeDescendant: [16, {}, { state: true }], activeIndex: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], items: [16, {}, { state: true }], groups: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, placement: [3, {}, { reflect: true }], prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.styles = styles;
@@ -172,9 +181,6 @@ class Autocomplete extends LitElement {
       this.updateItems();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     afterConnectDefaultValueSet(this, this.value || "");
     this.defaultInputValue = this.inputValue || "";
@@ -188,17 +194,6 @@ class Autocomplete extends LitElement {
     disconnectForm(this);
     disconnectFloatingUI(this);
   }
-  async handlePopover() {
-    await this.componentOnReady();
-    if (!this.floatingEl) {
-      return;
-    }
-    if (this.open) {
-      this.floatingEl.showPopover();
-    } else {
-      this.floatingEl.hidePopover();
-    }
-  }
   setFloatingElSize() {
     const { referenceEl, floatingEl } = this;
     if (!referenceEl || !floatingEl) {
@@ -215,17 +210,16 @@ class Autocomplete extends LitElement {
     }
   }
   openHandler() {
-    toggleOpenClose(this);
-    if (!this.open) {
-      this.activeIndex = -1;
-    }
     if (this.disabled) {
       this.open = false;
       return;
     }
+    if (!this.open) {
+      this.activeIndex = -1;
+    }
+    toggleOpenClose(this);
     this.setFloatingElSize();
     this.reposition(true);
-    this.handlePopover();
   }
   async documentClickHandler(event) {
     if (this.disabled || event.composedPath().includes(this.el)) {
@@ -247,6 +241,7 @@ class Autocomplete extends LitElement {
   }
   onBeforeOpen() {
     this.calciteAutocompleteBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     this.calciteAutocompleteOpen.emit();
@@ -256,6 +251,7 @@ class Autocomplete extends LitElement {
   }
   onClose() {
     this.calciteAutocompleteClose.emit();
+    this.topLayer.hide();
   }
   emitChange() {
     this.calciteAutocompleteChange.emit();
@@ -395,14 +391,13 @@ class Autocomplete extends LitElement {
   setFloatingEl(el) {
     this.floatingEl = el;
     connectFloatingUI(this);
-    this.handlePopover();
   }
   render() {
     const { disabled, listId, inputId, isOpen } = this;
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    return InteractiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
       [CSS.contentContainer]: true,
       [CSS.floatingUIContainer]: true,
       [CSS.floatingUIContainerActive]: isOpen

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

@@ -1,3 +1 @@
-import "../calcite-input-message/index.js";
-import "../calcite-input/index.js";
 export * from "./customElement.js";

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

@@ -1,38 +1,44 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipContext, Scale } from '../interfaces';
-import { InteractiveComponent } from '../../utils/interactive';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-autocomplete-description-text-color] - Specifies the text color of the component's `description`.
+ * @cssproperty [--calcite-autocomplete-heading-text-color] - Specifies the text color of the component's `heading`.
+ * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
  * @slot [content-end] - A slot for adding non-actionable elements after content of the component.
  * @slot [content-start] - A slot for adding non-actionable elements before content of the component.
  */
-export declare class AutocompleteItem extends LitElement {
-    /** A description for the component. Displays below the label text. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Specifies heading text for the component.
-     *
-     * @required
-     */
-    heading: string;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Accessible name for the component. */
-    label: string;
-    /** The component's value. */
-    value: string;
-    /** Fires when the item has been selected. */
-    readonly calciteAutocompleteItemSelect: TargetedEvent<this, void>;
-}
+export abstract class AutocompleteItem extends LitElement {
+  /** Specifies a description for the component. Displays below the label text. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the component's heading text.
+   *
+   * @required
+   */
+  accessor heading: string;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the component's value. */
+  accessor value: string;
+  /** Fires when the item has been selected. */
+  readonly calciteAutocompleteItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteAutocompleteItemSelect: AutocompleteItem["calciteAutocompleteItemSelect"]["detail"];
+  };
+}

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

@@ -1,10 +1,13 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { g as getIconScale } from "../../chunks/component.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { g as guid } from "../../chunks/guid.js";
 import { h as highlightText } from "../../chunks/text.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
   containerActive: "container--active",
@@ -23,10 +26,11 @@ const idPrefix = "autocomplete-item";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: .625rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+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}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: .625rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}: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 AutocompleteItem extends LitElement {
   constructor() {
     super(...arguments);
+    this.interactiveContainer = useInteractive(this);
     this.active = false;
     this.disabled = false;
     this.guid = IDS.host(guid());
@@ -34,7 +38,7 @@ class AutocompleteItem extends LitElement {
     this.calciteAutocompleteItemSelect = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], inputValueMatchPattern: [2, {}, { reflect: true, attribute: false }], label: 1, scale: 1, value: 1 };
+    this.properties = { active: [5, {}, { type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], guid: 1, heading: 1, iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], inputValueMatchPattern: [3, {}, { reflect: true }], label: 1, scale: 1, value: 1 };
   }
   static {
     this.styles = styles;
@@ -42,16 +46,13 @@ class AutocompleteItem extends LitElement {
   emitSelectEvent() {
     this.calciteAutocompleteItemSelect.emit();
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   handleClick(event) {
     event.preventDefault();
     this.emitSelectEvent();
   }
   render() {
     const { active, description, heading, disabled, inputValueMatchPattern } = this;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerActive]: active && !disabled,
       [CSS.scale(this.scale)]: true

package/dist/components/calcite-autocomplete-item/index.d.ts

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

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

@@ -1,22 +1,26 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/** @slot  - A slot for adding `calcite-autocomplete-item`s. */
-export declare class AutocompleteItemGroup extends LitElement {
-    /**
-     * Specifies heading text for the component.
-     *
-     * @required
-     */
-    heading: string;
-    /** Accessible name for the component. */
-    label: any;
-    /**
-     * Specifies the position of the group in the autocomplete menu.
-     *
-     * @internal
-     * @default 0
-     */
-    position: number;
-}
+/**
+ * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-autocomplete-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
+ * @slot  - A slot for adding `calcite-autocomplete-item`s.
+ */
+export abstract class AutocompleteItemGroup extends LitElement {
+  /**
+   * Specifies the component's heading text.
+   *
+   * @required
+   */
+  accessor heading: string;
+  /** Specifies an accessible label for the component. */
+  accessor label: any;
+  /**
+   * Specifies the position of the group in the autocomplete menu.
+   *
+   * @default 0
+   * @internal
+   */
+  accessor position: number;
+}

package/dist/components/calcite-autocomplete-item-group/customElement.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
@@ -9,7 +12,7 @@ const CSS = {
   scale: (scale) => `scale--${scale}`,
   separator: "separator"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host{margin:0;display:flex;flex-direction:column}.container{display:flex;flex-direction:column;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1))}.container--no-spacing{padding-block-start:0}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-autocomplete-border-color, var(--calcite-color-border-3))}.heading{box-sizing:border-box;inline-size:100%;min-inline-size:0px;max-inline-size:100%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));padding-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);padding-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-autocomplete-item-group-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-internal-autocomplete-item-group-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);margin-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host{margin:0;display:flex;flex-direction:column}.container{display:flex;flex-direction:column;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1))}.container--no-spacing{padding-block-start:0}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-autocomplete-border-color, var(--calcite-color-border-3))}.heading{box-sizing:border-box;inline-size:100%;min-inline-size:0px;max-inline-size:100%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));padding-block:var(--calcite-internal-autocomplete-item-group-vertical-spacing-unit);padding-inline:var(--calcite-internal-autocomplete-item-group-horizontal-spacing-unit)}:host([hidden]){display:none}[hidden]{display:none}`;
 class AutocompleteItemGroup extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -1,22 +1,27 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
 
-export declare class Avatar extends LitElement {
-    /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
-    fullName: string;
-    /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. */
-    label: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the `src` to an image (remember to add a token if the user is private). */
-    thumbnail: string;
-    /** Specifies the unique id of the user. */
-    userId: string;
-    /** Specifies the username of the user. */
-    username: string;
-}
+/**
+ * @cssproperty [--calcite-avatar-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-avatar-color] - Specifies the component's icon or initial color.
+ * @cssproperty [--calcite-avatar-background-color] - Specifies the component's background color.
+ */
+export abstract class Avatar extends LitElement {
+  /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
+  accessor fullName: string;
+  /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the `src` to an image. If the image is private, include an access token in the URL. */
+  accessor thumbnail: string;
+  /** Specifies the unique id of the user. */
+  accessor userId: string;
+  /** Specifies the username of the user. */
+  accessor username: string;
+}

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

@@ -1,8 +1,11 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { C as getModeName } from "../../chunks/dom.js";
-import { w as hexToRGB, i as isValidHex } from "../../chunks/utils.js";
+import { e as getModeName } from "../../chunks/dom.js";
+import { h as hexToRGB, i as isValidHex } from "../../chunks/utils.js";
 const CSS = {
   thumbnail: "thumbnail",
   background: "background",
@@ -55,7 +58,7 @@ function rgbToHue(rgb) {
 function hexToHue(hex) {
   return rgbToHue(hexToRGB(hex));
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-block;overflow:hidden;border-radius:var(--calcite-avatar-corner-radius, 50%);color:var(--calcite-avatar-color, var(--calcite-color-text-2))}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:var(--calcite-avatar-corner-radius, 50%)}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase}.thumbnail{block-size:100%;inline-size:100%;border-radius:var(--calcite-avatar-corner-radius, 50%)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-block;overflow:hidden;border-radius:var(--calcite-avatar-corner-radius, 50%);color:var(--calcite-avatar-color, var(--calcite-color-text-2))}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size-relative-xs)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size-relative-sm)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-relative-md)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:var(--calcite-avatar-corner-radius, 50%)}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase}.thumbnail{block-size:100%;inline-size:100%;border-radius:var(--calcite-avatar-corner-radius, 50%)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Avatar extends LitElement {
   constructor() {
     super(...arguments);

package/dist/components/calcite-avatar/index.d.ts

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";