@esri/calcite-components 5.0.0-next.2 → 5.0.0-next.21

package/dist/components/calcite-date-picker/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -5,7 +8,7 @@ import { a as dateFromISO, c as dateToISO, n as nextMonth, p as prevMonth, o as
 import { n as numberStringFormatter, g as getDateTimeFormat } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { g as getValueAsDateRange, a as getLocaleData } from "../../chunks/utils3.js";
+import { g as getValueAsDateRange, a as applyLocaleOverride, b as getLocaleData } from "../../chunks/utils3.js";
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 const CSS = {
@@ -122,13 +125,14 @@ class DatePicker extends LitElement {
     if (isServer) {
       return;
     }
+    const locale = applyLocaleOverride(this.messages._lang);
     numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
-      locale: this.messages._lang,
+      locale,
       useGrouping: false
     };
-    this.localeData = await getLocaleData(this.messages._lang);
-    this.dateTimeFormat = getDateTimeFormat(this.messages._lang, DATE_PICKER_FORMAT_OPTIONS);
+    this.localeData = await getLocaleData(locale);
+    this.dateTimeFormat = getDateTimeFormat(locale, DATE_PICKER_FORMAT_OPTIONS);
   }
   monthHeaderSelectChange(event) {
     const date = new Date(event.detail.date);

package/dist/components/calcite-date-picker/utils.d.ts

@@ -1,3 +1,4 @@
+import { Locale } from '../../utils/locale';
 /**
  * Translation resource data structure
  *
@@ -31,21 +32,23 @@ export interface DateLocaleData {
  *
  * @private
  */
-export declare const translationCache: Record<string, DateLocaleData>;
+export declare const translationCache: Record<Locale, DateLocaleData>;
 /**
  * CLDR request cache.
  * Exported for testing purposes.
  *
  * @private
  */
-export declare const requestCache: Record<string, Promise<DateLocaleData>>;
+export declare const requestCache: Record<Locale, Promise<DateLocaleData>>;
+export declare const supportedNlsLocales: ("en" | "id" | "el" | "sl" | "it" | "de" | "es" | "ar" | "th" | "ca" | "et" | "da" | "pt" | "sk" | "fi" | "sv" | "fr" | "he" | "hi" | "cs" | "lt" | "no" | "pl" | "ro" | "ru" | "tr" | "vi" | "bs" | "hr" | "bg" | "hu" | "ja" | "ko" | "lv" | "nl" | "nb" | "pt-BR" | "pt-PT" | "sr" | "uk" | "zh-CN" | "zh-HK" | "zh-TW" | "es-MX" | "mk" | "it-CH" | "de-CH" | "de-AT" | "en-AU" | "en-CA" | "en-GB" | "fr-CA" | "fr-CH")[];
 /**
- * Fetch calendar data for a given locale from list of supported languages
- *
- * @param lang
- * @public
+ * Fetch NLS data used for localized calendar rendering
+ */
+export declare function getLocaleData(locale: Locale): Promise<DateLocaleData>;
+/**
+ * Ensures consistent locale is used across browsers
  */
-export declare function getLocaleData(lang: string): Promise<DateLocaleData>;
+export declare function applyLocaleOverride(locale: Locale): Locale;
 /**
  * Maps value to valueAsDate
  *

package/dist/components/calcite-date-picker-day/customElement.d.ts

@@ -1,6 +1,5 @@
 /// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
 import { Scale } from '../interfaces';
 
 export declare class DatePickerDay extends LitElement {
@@ -71,6 +70,7 @@ export declare class DatePickerDay extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      */

package/dist/components/calcite-date-picker-day/customElement.js

@@ -1,12 +1,15 @@
+/*! 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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { c as dateToISO } from "../../chunks/date.js";
 import { o as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.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:flex;cursor:pointer;outline:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-wrapper{position:relative;display:flex;inline-size:100%;flex-direction:column;align-items:center;justify-content:center}.day{position:relative;display:flex;inline-size:100%;align-items:center;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;line-height:var(--calcite-font-line-height-fixed-base);block-size:var(--calcite-internal-day-size);outline-color:var(--calcite-color-transparent);background-color:var(--calcite-date-picker-day-background-color);color:var(--calcite-date-picker-day-text-color, var(--calcite-color-text-1))}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size: 32px}:host([scale=s]) .day{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-day-size: 40px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size: 44px}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-full);color:var(--calcite-color-text-3)}:host(:focus:not([disabled]):not([selected]):not([current-month])) .day{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .day{background-color:var(--calcite-date-picker-day-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-text-color-hover, var(--calcite-color-text-1))}:host(:not([range]):not([selected]).current-day) .day{color:var(--calcite-date-picker-current-day-text-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-bold)}:host(:focus[selected]) .day{z-index:var(--calcite-z-index);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(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host(:focus:not([disabled]):not([selected])) .day{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))))}:host(:hover:not([disabled]):not([selected])) .day{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))))}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-date-picker-day-background-color-selected, var(--calcite-color-brand));color:var(--calcite-date-picker-day-text-color-selected, var(--calcite-color-foreground-1))}:host([range-hover]:not([selected])) .day{background-color:var(--calcite-date-picker-day-outside-range-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-outside-range-text-color-hover, var(--calcite-color-text-1))}:host([highlighted]:not([selected])) .day,:host(:hover[highlighted]:not([selected])) .day{color:var(--calcite-date-picker-day-range-text-color, var(--calcite-color-text-highlight));background-color:var(--calcite-date-picker-day-range-background-color, var(--calcite-color-surface-highlight))}:host([disabled]) .day{color:var(--calcite-color-text-2);text-decoration-line:line-through;opacity:var(--calcite-opacity-disabled)}@media(forced-colors:active){.day{border-radius:0}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day,:host([highlighted]) .day,:host([range-hover]:not([selected])) .day{background-color:highlight}:host([range-hover]) .day,:host([range][selected][start-of-range]) .day,:host([range][selected][end-of-range]) .day{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   dayWrapper: "day-wrapper",
@@ -17,6 +20,7 @@ class DatePickerDay extends LitElement {
   constructor() {
     super();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.active = false;
     this.currentMonth = false;
     this.disabled = false;
@@ -44,9 +48,6 @@ class DatePickerDay extends LitElement {
   load() {
     this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   onClick() {
     if (this.disabled) {
       return;
@@ -84,7 +85,7 @@ class DatePickerDay extends LitElement {
     setAttribute(this.el, "id", dayId);
     this.el.role = "button";
     setAttribute(this.el, "tabIndex", this.active && !this.disabled ? 0 : -1);
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div aria-hidden=true class=${safeClassMap(CSS.dayWrapper)}><span class=${safeClassMap(CSS.day)}><span class=${safeClassMap(CSS.text)}>${formattedDay}</span></span></div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div aria-hidden=true class=${safeClassMap(CSS.dayWrapper)}><span class=${safeClassMap(CSS.day)}><span class=${safeClassMap(CSS.text)}>${formattedDay}</span></span></div>` });
   }
 }
 customElement("calcite-date-picker-day", DatePickerDay);

package/dist/components/calcite-date-picker-month/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
@@ -338,7 +341,7 @@ class DatePickerMonth extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.calendar]: true,
       [CSS.calendarStart]: !isEndCalendar
-    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} data-test-calendar=${isEndCalendar ? "end" : "start"} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
+    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
   }
   renderMonthCalendar(weekDays, days, isEndCalendar = false) {
     const endCalendarStartIndex = 50;

package/dist/components/calcite-date-picker-month-header/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";

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

@@ -46,8 +46,8 @@ export declare class Dialog extends LitElement {
      *
      * By default, an open dialog can be dismissed by pressing the Esc key.
      *
-     * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility).
      * @default false
+     * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility).
      */
     escapeDisabled: boolean;
     /**
@@ -144,7 +144,7 @@ export declare class Dialog extends LitElement {
     /**
      * Specifies the width of the component.
      *
-     * @deprecated Use the `width` property instead.
+     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
      * @default "m"
      */
     widthScale: Scale;
@@ -153,6 +153,7 @@ export declare class Dialog extends LitElement {
     /**
      * Scrolls the component's content to a specified set of coordinates.
      *
+     * @param options
      * @example
      * myCalciteFlowItem.scrollContentTo({
      *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
@@ -166,6 +167,7 @@ export declare class Dialog extends LitElement {
     /**
      * Sets focus on the component's "close" button (the first focusable item).
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      * @returns - A promise that is resolved when the operation has completed.
@@ -174,6 +176,7 @@ export declare class Dialog extends LitElement {
     /**
      * Updates the element(s) that are included in the focus-trap of the component.
      *
+     * @param extraContainers
      * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
      */
     updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;

package/dist/components/calcite-dialog/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.21 */
 import { a as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { i as interact } from "../../chunks/interact.min.js";

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

@@ -2,7 +2,6 @@
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { InteractiveComponent } from '../../utils/interactive';
 import { Scale, Width } from '../interfaces';
 import { DropdownItem } from '../calcite-dropdown-item/customElement.js';
 
@@ -85,7 +84,7 @@ export declare class Dropdown extends LitElement {
     /**
      * Specifies the width of the component.
      *
-     * @deprecated Use the `width` property instead.
+     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
      */
     widthScale: Scale;
     /** Specifies the width of the component. */
@@ -94,11 +93,13 @@ export declare class Dropdown extends LitElement {
      * Updates the position of the component.
      *
      * @param delayed
+     * @param delayed
      */
     reposition(delayed?: boolean): Promise<void>;
     /**
      * Sets focus on the component's first focusable element.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      */

package/dist/components/calcite-dropdown/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";
@@ -6,12 +9,12 @@ import { queryAssignedElements } from "lit/decorators.js";
 import { d as focusElementInGroup, b as focusElement, z as nextFrame } from "../../chunks/dom.js";
 import { b as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const SLOTS = {
   trigger: "trigger"
 };
@@ -46,6 +49,7 @@ class Dropdown extends LitElement {
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.closeOnSelectDisabled = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -122,9 +126,6 @@ class Dropdown extends LitElement {
       this.handlePropsChange();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.updateSelectedItems();
     connectFloatingUI(this);
@@ -369,7 +370,7 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open, guid: guid2 } = this;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} id=${IDS.menuButton(guid2) ?? nothing} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot aria-controls=${IDS.menu(guid2) ?? nothing} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div .ariaHidden=${!open} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} id=${IDS.menuButton(guid2) ?? nothing} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot aria-controls=${IDS.menu(guid2) ?? nothing} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div .ariaHidden=${!open} class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} popover=manual ${ref(this.setFloatingEl)}><div aria-labelledby=${IDS.menuButton(guid2) ?? nothing} class=${safeClassMap({

package/dist/components/calcite-dropdown-group/customElement.d.ts

@@ -11,8 +11,8 @@ export declare class DropdownGroup extends LitElement {
     /**
      * The position of the group in the dropdown menu.
      *
-     * @internal
      * @default -1
+     * @internal
      */
     position: number;
     /**

package/dist/components/calcite-dropdown-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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -3,7 +3,6 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { ItemKeyboardEvent } from '../calcite-dropdown/interfaces';
 import { RequestedItem } from '../calcite-dropdown-group/interfaces';
 import { FlipContext, Scale, SelectionMode } from '../interfaces';
-import { InteractiveComponent } from '../../utils/interactive';
 import { IconName } from '../calcite-icon/interfaces';
 
 /** @slot  - A slot for adding text. */
@@ -41,6 +40,7 @@ export declare class DropdownItem extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      */

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

@@ -1,18 +1,22 @@
+/*! 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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing, setAttribute } from "@arcgis/lumina";
 import { t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS, I as ICONS } from "../../chunks/resources7.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:flex;flex-grow:1;align-items:center;outline-color:transparent}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));text-align:start;outline-color:transparent}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}.dropdown-item-content{flex:1 1 auto;padding-block:.125rem}.dropdown-item-icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-item-icon,:host([scale=s]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .dropdown-item-icon,:host([scale=m]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:.625rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-item-icon,:host([scale=l]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container{text-decoration-line:none;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))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .dropdown-link,:host(:active:not([disabled])) .dropdown-link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .dropdown-link calcite-icon{color:var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .dropdown-item-icon{opacity:1}: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{--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:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}.dropdown-item-content{flex:1 1 auto}.dropdown-item-icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-item-icon,:host([scale=s]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .dropdown-item-icon,:host([scale=m]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:.625rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-item-icon,:host([scale=l]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container{text-decoration-line:none;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))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .dropdown-link,:host(:active:not([disabled])) .dropdown-link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .dropdown-link calcite-icon{color:var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .dropdown-item-icon{opacity:1}: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 DropdownItem extends LitElement {
   constructor() {
     super();
     this.childLinkRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";
     this.selected = false;
@@ -41,9 +45,6 @@ class DropdownItem extends LitElement {
   load() {
     this.initialize();
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   onClick() {
     this.emitRequestedItem();
   }
@@ -128,7 +129,7 @@ class DropdownItem extends LitElement {
     this.el.ariaLabel = !href ? label : "";
     this.el.role = itemRole;
     setAttribute(this.el, "tabIndex", disabled ? -1 : 0);
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerNone]: selectionMode === "none"
     })}>${selectionMode !== "none" ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .icon=${selectionMode === "multiple" ? ICONS.check : ICONS.bulletPoint} .scale=${getIconScale(this.scale)}></calcite-icon>` : null}${contentEl}</div>` });

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

@@ -1,6 +1,5 @@
 /// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
 import { Appearance, Kind, Scale } from '../interfaces';
 import { IconName } from '../calcite-icon/interfaces';
 
@@ -60,6 +59,7 @@ export declare class Fab extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      */

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

@@ -1,9 +1,12 @@
+/*! 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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   button: "button"
 };
@@ -16,6 +19,7 @@ class Fab extends LitElement {
     super(...arguments);
     this.buttonRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.appearance = "solid";
     this.disabled = false;
     this.icon = ICONS.plus;
@@ -34,13 +38,10 @@ class Fab extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.buttonRef.value, options);
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   render() {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl } = this;
     const title = !textEnabled ? label || text || null : null;
-    return InteractiveContainer({ disabled, children: html`<calcite-button .appearance=${appearance === "solid" ? "solid" : "outline-fill"} class=${safeClassMap(CSS.button)} .disabled=${disabled} .iconFlipRtl=${iconFlipRtl ? "start" : null} .iconStart=${icon} .kind=${kind} .label=${label} .loading=${loading} round .scale=${scale} title=${title ?? nothing} type=button width=auto ${ref(this.buttonRef)}>${this.textEnabled ? this.text : null}</calcite-button>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-button .appearance=${appearance === "solid" ? "solid" : "outline-fill"} class=${safeClassMap(CSS.button)} .disabled=${disabled} .iconFlipRtl=${iconFlipRtl ? "start" : null} .iconStart=${icon} .kind=${kind} .label=${label} .loading=${loading} round .scale=${scale} title=${title ?? nothing} type=button width=auto ${ref(this.buttonRef)}>${this.textEnabled ? this.text : null}</calcite-button>` });
   }
 }
 customElement("calcite-fab", Fab);

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

@@ -1,7 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
 import { Scale } from '../interfaces';
 
 export declare class Filter extends LitElement {
@@ -43,6 +42,7 @@ export declare class Filter extends LitElement {
      *
      * This method can be useful because filtering is delayed and asynchronous.
      *
+     * @param value
      * @param value - The filter text value.
      * @returns
      */
@@ -50,6 +50,7 @@ export declare class Filter extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      */

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

@@ -1,13 +1,16 @@
+/*! 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.21 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { f as filter } from "../../chunks/filter.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container"
 };
@@ -24,6 +27,7 @@ class Filter extends LitElement {
     this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.filteredItems = [];
     this.items = [];
@@ -70,9 +74,6 @@ class Filter extends LitElement {
       this.filterDebounced(this.value);
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   valueHandler(value) {
     this.filterDebounced(value);
   }
@@ -107,7 +108,7 @@ class Filter extends LitElement {
   }
   render() {
     const { disabled, scale } = this;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)}><label><calcite-input clearable .disabled=${disabled} .icon=${ICONS.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${scale} type=text .value=${this.value} ${ref(this.textInputRef)}></calcite-input></label></div>` });
   }
 }
 customElement("calcite-filter", Filter);

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

@@ -15,6 +15,7 @@ export declare class Flow extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      * @returns Promise<void>

package/dist/components/calcite-flow/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

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

@@ -1,7 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
 import { HeadingLevel } from '../functional/Heading';
 import { OverlayPositioning } from '../../utils/floating-ui';
 import { CollapseDirection, Scale } from '../interfaces';
@@ -110,13 +109,14 @@ export declare class FlowItem extends LitElement {
     /**
      * When `true`, displays a back button in the component's header.
      *
-     * @internal
      * @default false
+     * @internal
      */
     showBackButton: boolean;
     /**
      * Scrolls the component's content to a specified set of coordinates.
      *
+     * @param options
      * @example
      * myCalciteFlowItem.scrollContentTo({
      *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
@@ -130,6 +130,7 @@ export declare class FlowItem extends LitElement {
     /**
      * Sets focus on the component.
      *
+     * @param options
      * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
      * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
      * @returns promise.

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

@@ -1,13 +1,16 @@
+/*! 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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { g as getElementDir } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { S as SLOTS$1 } from "../../chunks/resources3.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   backButton: "back-button"
 };
@@ -37,6 +40,7 @@ class FlowItem extends LitElement {
     this.containerRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.closable = false;
     this.closed = false;
     this.collapseDirection = "down";
@@ -82,9 +86,6 @@ class FlowItem extends LitElement {
       }
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   handleInternalPanelScroll(event) {
     if (event.target !== this.containerRef.value) {
       return;
@@ -121,7 +122,7 @@ class FlowItem extends LitElement {
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return InteractiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

package/dist/components/calcite-graph/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.21 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, svg } from "lit";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";