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

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

@@ -1,15 +1,18 @@
+/* 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 { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { c as connectLabel, d as disconnectLabel } from "../../chunks/label.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { S as SLOTS$1 } from "../../chunks/resources6.js";
+import { S as SLOTS$1 } from "../../chunks/resources5.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { g as getDateTimeFormat } from "../../chunks/locale.js";
 const CSS = {
   offset: "offset"
@@ -196,13 +199,14 @@ function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     )
   );
 }
-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{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}`;
 class InputTimeZone extends LitElement {
   constructor() {
     super(...arguments);
     this.comboboxRef = createRef();
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.clearable = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -214,6 +218,7 @@ class InputTimeZone extends LitElement {
     this.required = false;
     this.scale = "m";
     this.status = "idle";
+    this.topLayerDisabled = false;
     this.validity = {
       valid: false,
       badInput: false,
@@ -234,7 +239,7 @@ class InputTimeZone extends LitElement {
     this.calciteInputTimeZoneOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -278,9 +283,6 @@ class InputTimeZone extends LitElement {
       this.openChanged();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.openChanged();
   }
@@ -328,7 +330,7 @@ class InputTimeZone extends LitElement {
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
     }
-    this.comboboxRef.value.selectedItems[0].textLabel = this.getItemLabel(this.selectedTimeZoneItem, open);
+    this.comboboxRef.value.selectedItems[0].heading = this.getItemLabel(this.selectedTimeZoneItem, open);
   }
   onComboboxBeforeClose(event) {
     event.stopPropagation();
@@ -403,7 +405,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return InteractiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>${HiddenFormInputSlot({ component: this })}` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>${HiddenFormInputSlot({ component: this })}` });
   }
   renderItems() {
     if (this.mode === "region") {
@@ -412,15 +414,15 @@ class InputTimeZone extends LitElement {
     return repeat(this.timeZoneItems, ({ label }) => label, (group) => {
       const selected = this.selectedTimeZoneItem === group;
       const { label, metadata, value } = group;
-      return html`<calcite-combobox-item data-label=${label ?? nothing} .metadata=${metadata} .selected=${selected} .textLabel=${label} .value=${value}></calcite-combobox-item>`;
+      return html`<calcite-combobox-item data-label=${label ?? nothing} .heading=${label} .metadata=${metadata} .selected=${selected} .value=${value}></calcite-combobox-item>`;
     });
   }
   renderRegionItems() {
     return this.timeZoneItems.flatMap(({ label, items }) => keyed(label, html`<calcite-combobox-item-group .label=${label}>${repeat(items, ({ label: label2 }) => label2, (item) => {
       const selected = this.selectedTimeZoneItem === item;
       const { label: label2, metadata, value } = item;
-      const textLabel = this.getItemLabel(item);
-      return html`<calcite-combobox-item data-label=${label2 ?? nothing} .description=${metadata.country} .metadata=${metadata} .selected=${selected} .textLabel=${textLabel} .value=${value}><span class=${safeClassMap(CSS.offset)} slot=content-end>${metadata.offset}</span></calcite-combobox-item>`;
+      const heading = this.getItemLabel(item);
+      return html`<calcite-combobox-item data-label=${label2 ?? nothing} .description=${metadata.country} .heading=${heading} .metadata=${metadata} .selected=${selected} .value=${value}><span class=${safeClassMap(CSS.offset)} slot=content-end>${metadata.offset}</span></calcite-combobox-item>`;
     })}</calcite-combobox-item-group>`));
   }
 }

package/dist/components/calcite-input-time-zone/index.d.ts

@@ -1,4 +1 @@
-import "../calcite-combobox/index.js";
-import "../calcite-combobox-item/index.js";
-import "../calcite-combobox-item-group/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-input-time-zone/interfaces.d.ts

@@ -1,25 +1,3 @@
-export type TimeZone = string;
-export interface TimeZoneGroup extends BasicTimeZoneGroup {
-    offsetGroupLabel: string;
-    offsetGroupRepTimeZone: string;
-    offsetGroupTimeZones: string[];
-}
-export interface BasicTimeZoneGroup {
-    offsetLabel: string;
-    offsetValue: number;
-}
 export type TimeZoneMode = "offset" | "name" | "region";
-export interface TimeZoneItem<T extends number | string = number | string> {
-    label: string;
-    value: T;
-    metadata: {
-        country?: string;
-        filterValue: string | string[];
-        offset?: string;
-    };
-}
-export interface TimeZoneItemGroup {
-    label: string;
-    items: TimeZoneItem<string>[];
-}
-export type OffsetStyle = "user" | "utc" | "gmt";
+
+export type OffsetStyle = "user" | "utc" | "gmt";

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

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

package/dist/components/calcite-label/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, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -5,7 +8,7 @@ import { l as labelConnectedEvent, a as associateExplicitLabelToUnlabeledCompone
 const CSS = {
   container: "container"
 };
-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{display:flex}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .5rem)}:host([scale=m]) .container{gap:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .75rem)}:host([scale=l]) .container{gap:.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-color-text-1);color:var(--calcite-label-text-color, var(--calcite-color-text-1))}:host([layout=block]) .container,:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host([layout=inline][scale=l]) .container{gap:.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity: 1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity: 0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);margin-block-end:var(--calcite-label-margin-bottom, .5rem)}:host([scale=m]) .container{gap:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);margin-block-end:var(--calcite-label-margin-bottom, .75rem)}:host([scale=l]) .container{gap:.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-color-text-1);color:var(--calcite-label-text-color, var(--calcite-color-text-1))}:host([layout=block]) .container,:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host([layout=inline][scale=l]) .container{gap:.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity: 1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity: 0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Label extends LitElement {
   constructor() {
     super();

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

@@ -1,8 +1,7 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { FlipContext } from '../interfaces';
-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";
 
 /**
  * Any attributes placed on <calcite-link> component will propagate to the rendered child
@@ -11,40 +10,41 @@ import { IconName } from '../calcite-icon/interfaces';
  *
  * It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission
  *
+ * @cssproperty [--calcite-link-text-color] - Specifies the component's text color.
  * @slot  - A slot for adding text.
  */
-export declare class Link extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
-     * Without a value, the browser will suggest a filename/extension.
-     *
-     * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
-     * @default false
-     */
-    download: string | boolean;
-    /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
-    href: 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;
-    /** Specifies the relationship to the linked document defined in `href`. */
-    rel: string;
-    /** Specifies the frame or window to open the linked document. */
-    target: string;
-    /**
-     * Sets focus on the component.
-     *
-     * @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)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-}
+export abstract class Link extends LitElement {
+  /**
+   * When `true`, prevents interaction and decreases the component's opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When specified, prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+   * Without a value, the browser will suggest a filename/extension.
+   *
+   * @default false
+   * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+   */
+  accessor download: string | boolean;
+  /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
+  accessor href: string;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `iconStart` and/or `iconEnd`. */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies the relationship to the linked resource defined in `href`. */
+  accessor rel: string;
+  /** Specifies the frame or window to open the linked resource. */
+  accessor target: string;
+  /**
+   * Sets focus on the component.
+   *
+   * @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)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+}

package/dist/components/calcite-link/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.90 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
-import { literal, html as html$1 } from "lit-html/static.js";
+import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.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{display:inline}:host a,:host button{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host button:hover{text-decoration:none}:host a,:host button{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent}:host a:focus,:host button:focus{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))))}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host button,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px}:host button:hover,:host button:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host button:active,:host a:active{background-size:100% 2px,100% 2px}:host button.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a,:host button{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host button:hover{text-decoration:none}:host a,:host button{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host button,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px}:host button:hover,:host button:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host button:active,:host a:active{background-size:100% 2px,100% 2px}:host button.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   calciteLinkIcon: "calcite-link--icon",
   iconStart: "icon-start",
@@ -17,6 +20,7 @@ class Link extends LitElement {
     super();
     this.childRef = createRef();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.download = false;
     this.listen("click", this.clickHandler);
@@ -30,9 +34,6 @@ class Link extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.childRef.value, options);
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   clickHandler(event) {
     if (this.disabled) {
       return;
@@ -55,7 +56,7 @@ class Link extends LitElement {
     const DynamicHtmlTag = childElType === "button" ? literal`button` : literal`a`;
     const tabIndex = childElType === "button" ? 0 : null;
     this.el.role = "presentation";
-    return InteractiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(childElType === "a" ? download === true || download === "" ? "" : download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} @click=${this.childElClickHandler} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${tabIndex ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} ${ref(
+    return this.interactiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} class=${safeClassMap({ [CSS_UTILITY.rtl]: dir === "rtl" })} download=${(childElType === "a" ? download === true || download === "" ? "" : download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} @click=${this.childElClickHandler} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${tabIndex ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} ${ref(
       this.childRef
       /* using unknown to workaround Lumina dynamic ref type issue */
     )}>${html`${this.iconStart ? iconStartEl : null}<slot></slot>${this.iconEnd ? iconEndEl : null}`}</${DynamicHtmlTag}>` });

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

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