@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/label.js

@@ -9,7 +9,7 @@ import { c as componentOnReady } from './component.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 /**
  * Exported for testing purposes only
@@ -26,34 +26,34 @@ const onLabelConnectedMap = new WeakMap();
 const onLabelDisconnectedMap = new WeakMap();
 const unlabeledComponents = new Set();
 const findLabelForComponent = (componentEl) => {
-  const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
-  if (forLabel) {
-    return forLabel;
-  }
-  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
-  if (!parentLabel ||
-    // labelable components within other custom elements are not considered labelable
-    hasAncestorCustomElements(parentLabel, componentEl)) {
-    return null;
-  }
-  return parentLabel;
+    const { id } = componentEl;
+    const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+    if (forLabel) {
+        return forLabel;
+    }
+    const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+    if (!parentLabel ||
+        // labelable components within other custom elements are not considered labelable
+        hasAncestorCustomElements(parentLabel, componentEl)) {
+        return null;
+    }
+    return parentLabel;
 };
 function hasAncestorCustomElements(label, componentEl) {
-  let traversedElements;
-  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
-  const listener = (event) => {
-    event.stopImmediatePropagation();
-    const composedPath = event.composedPath();
-    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
-  };
-  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
-  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
-  label.removeEventListener(customElementAncestorCheckEventType, listener);
-  const ancestorCustomElements = traversedElements
-    .filter((el) => el !== componentEl && el !== label)
-    .filter((el) => el.tagName?.includes("-"));
-  return ancestorCustomElements.length > 0;
+    let traversedElements;
+    const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+    const listener = (event) => {
+        event.stopImmediatePropagation();
+        const composedPath = event.composedPath();
+        traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+    };
+    label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+    componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+    label.removeEventListener(customElementAncestorCheckEventType, listener);
+    const ancestorCustomElements = traversedElements
+        .filter((el) => el !== componentEl && el !== label)
+        .filter((el) => el.tagName?.includes("-"));
+    return ancestorCustomElements.length > 0;
 }
 /**
  * Helper to set up label interactions on connectedCallback.
@@ -61,33 +61,33 @@ function hasAncestorCustomElements(label, componentEl) {
  * @param component
  */
 function connectLabel(component) {
-  if (!component) {
-    return;
-  }
-  const labelEl = findLabelForComponent(component.el);
-  if ((onLabelClickMap.has(labelEl) && labelEl === component.labelEl) ||
-    (!labelEl && unlabeledComponents.has(component))) {
-    return;
-  }
-  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
-  if (labelEl) {
-    component.labelEl = labelEl;
-    const labelables = labelToLabelables.get(labelEl) || [];
-    labelables.push(component);
-    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
-    if (!onLabelClickMap.has(component.labelEl)) {
-      onLabelClickMap.set(component.labelEl, onLabelClick);
-      component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+    if (!component) {
+        return;
+    }
+    const labelEl = findLabelForComponent(component.el);
+    if ((onLabelClickMap.has(labelEl) && labelEl === component.labelEl) ||
+        (!labelEl && unlabeledComponents.has(component))) {
+        return;
+    }
+    const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+    if (labelEl) {
+        component.labelEl = labelEl;
+        const labelables = labelToLabelables.get(labelEl) || [];
+        labelables.push(component);
+        labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
+        if (!onLabelClickMap.has(component.labelEl)) {
+            onLabelClickMap.set(component.labelEl, onLabelClick);
+            component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+        }
+        unlabeledComponents.delete(component);
+        document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+        onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+        document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+    }
+    else if (!unlabeledComponents.has(component)) {
+        boundOnLabelDisconnected();
+        document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
     }
-    unlabeledComponents.delete(component);
-    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
-    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
-  }
-  else if (!unlabeledComponents.has(component)) {
-    boundOnLabelDisconnected();
-    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  }
 }
 /**
  * Helper to tear down label interactions on disconnectedCallback on labelable components.
@@ -95,27 +95,27 @@ function connectLabel(component) {
  * @param component
  */
 function disconnectLabel(component) {
-  if (!component) {
-    return;
-  }
-  unlabeledComponents.delete(component);
-  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  onLabelConnectedMap.delete(component);
-  onLabelDisconnectedMap.delete(component);
-  if (!component.labelEl) {
-    return;
-  }
-  const labelables = labelToLabelables.get(component.labelEl);
-  if (labelables.length === 1) {
-    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
-    onLabelClickMap.delete(component.labelEl);
-  }
-  labelToLabelables.set(component.labelEl, labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder));
-  component.labelEl = null;
+    if (!component) {
+        return;
+    }
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+    onLabelConnectedMap.delete(component);
+    onLabelDisconnectedMap.delete(component);
+    if (!component.labelEl) {
+        return;
+    }
+    const labelables = labelToLabelables.get(component.labelEl);
+    if (labelables.length === 1) {
+        component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
+        onLabelClickMap.delete(component.labelEl);
+    }
+    labelToLabelables.set(component.labelEl, labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder));
+    component.labelEl = null;
 }
 function sortByDOMOrder(a, b) {
-  return isBefore(a.el, b.el) ? -1 : 1;
+    return isBefore(a.el, b.el) ? -1 : 1;
 }
 /**
  * Helper to get the label text from a component.
@@ -123,33 +123,33 @@ function sortByDOMOrder(a, b) {
  * @param component
  */
 function getLabelText(component) {
-  return component.label || component.labelEl?.textContent?.trim() || "";
+    return component.label || component.labelEl?.textContent?.trim() || "";
 }
 function onLabelClick(event) {
-  const labelClickTarget = event.detail.sourceEvent.target;
-  const labelables = labelToLabelables.get(this);
-  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
-  const labelableChildClicked = labelables.includes(clickedLabelable);
-  if (labelableChildClicked) {
-    // no need to forward click as labelable will receive focus
-    return;
-  }
-  const firstLabelable = labelables[0];
-  if (firstLabelable.disabled) {
-    return;
-  }
-  firstLabelable.onLabelClick(event);
+    const labelClickTarget = event.detail.sourceEvent.target;
+    const labelables = labelToLabelables.get(this);
+    const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
+    const labelableChildClicked = labelables.includes(clickedLabelable);
+    if (labelableChildClicked) {
+        // no need to forward click as labelable will receive focus
+        return;
+    }
+    const firstLabelable = labelables[0];
+    if (firstLabelable.disabled) {
+        return;
+    }
+    firstLabelable.onLabelClick(event);
 }
 function onLabelConnected() {
-  if (unlabeledComponents.has(this)) {
-    connectLabel(this);
-  }
+    if (unlabeledComponents.has(this)) {
+        connectLabel(this);
+    }
 }
 function onLabelDisconnected() {
-  unlabeledComponents.add(this);
-  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
-  onLabelConnectedMap.set(this, boundOnLabelConnected);
-  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+    unlabeledComponents.add(this);
+    const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+    onLabelConnectedMap.set(this, boundOnLabelConnected);
+    document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
 }
 /**
  * Helper to associate an explicit label (i.e., using `for`) with a labelable component that does not have an associated label.
@@ -157,23 +157,23 @@ function onLabelDisconnected() {
  * @param label - the label element
  */
 async function associateExplicitLabelToUnlabeledComponent(label) {
-  await componentOnReady(label);
-  const alreadyLabeled = labelToLabelables.has(label);
-  if (alreadyLabeled) {
-    return;
-  }
-  const forComponentEl = label.ownerDocument?.getElementById(label.for);
-  if (!forComponentEl) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    for (const labelable of unlabeledComponents) {
-      if (labelable.el === forComponentEl) {
-        connectLabel(labelable);
-        break;
-      }
+    await componentOnReady(label);
+    const alreadyLabeled = labelToLabelables.has(label);
+    if (alreadyLabeled) {
+        return;
+    }
+    const forComponentEl = label.ownerDocument?.getElementById(label.for);
+    if (!forComponentEl) {
+        return;
     }
-  });
+    requestAnimationFrame(() => {
+        for (const labelable of unlabeledComponents) {
+            if (labelable.el === forComponentEl) {
+                connectLabel(labelable);
+                break;
+            }
+        }
+    });
 }
 
 export { associateExplicitLabelToUnlabeledComponent as a, labelDisconnectedEvent as b, connectLabel as c, disconnectLabel as d, getLabelText as g, labelConnectedEvent as l };

package/dist/components/label2.js

@@ -9,13 +9,13 @@ import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEve
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
+    container: "container",
 };
 
-const labelCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.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)}: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:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.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}:host([hidden]){display:none}[hidden]{display:none}";
+const labelCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.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)}: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:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.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 Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     constructor() {

package/dist/components/layer-list2.js

@@ -78,7 +78,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+        return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
             h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
             h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
     }

package/dist/components/layer-table2.js

@@ -1139,7 +1139,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1283,7 +1283,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         exportInfos, false, // formatUsingLayerPopup
         false, // removeDuplicates
         true, // addColumnTitle
-        fields);
+        fields, true);
     }
     /**
      * Refreshes the table and maintains the curent scroll position

package/dist/components/link.js

@@ -5,12 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getElementDir, f as focusElement } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { C as CSS_UTILITY } from './resources.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const linkCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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 span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;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 span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.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}:host([hidden]){display:none}[hidden]{display:none}";
+const linkCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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 span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;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 span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.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 Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     constructor() {
@@ -69,14 +69,14 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (h(Host, { role: "presentation" }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { role: "presentation" }, h(InteractiveContainer, { disabled: this.disabled }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
             /*
-            When the 'download' property of type 'boolean | string' is set to true, the value is "".
-            This works around that issue for now.
-            */
+          When the 'download' property of type 'boolean | string' is set to true, the value is "".
+          This works around that issue for now.
+          */
             download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
+            ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //