@esri/calcite-components 2.9.0-next.2 → 2.9.0-next.20

package/dist/esm/calcite-link.entry.js

@@ -1,15 +1,16 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-83937316.js';
-import { g as getElementDir, d as focusElement } from './dom-63b96658.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-9e5e40e3.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-38c7a128.js';
-import { C as CSS_UTILITY } from './resources-3625820f.js';
-import './guid-e88236cd.js';
-import './browser-08b65933.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6356d89d.js';
+import { g as getElementDir, d as focusElement } from './dom-ca168555.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-0082d873.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-6fb95cc3.js';
+import { C as CSS_UTILITY } from './resources-a24f17b0.js';
+import './guid-95f744cf.js';
+import './browser-096308d4.js';
+import './component-e47bd838.js';
 
 const linkCss = ":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 span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition: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 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-ui-focus-color, 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: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 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: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 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 CalciteLinkStyle0 = linkCss;
@@ -64,17 +65,17 @@ const Link = class {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (h("calcite-icon", { key: 'f3c88f34e5fddf3cb7779cabbac20ecd7fc62be1', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (h("calcite-icon", { key: '684df779ad349e596dbe9f128c035077d0c75d93', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (h("calcite-icon", { key: '886638422905f1ae6b0cc0a9bcb2e2147067e7c8', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (h("calcite-icon", { key: 'ace6f2ec903c70f16f2ea61114877a239d515c71', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (h(Host, { key: 'b8bf6a472945947d6bac9853d2322f8fedca5102', role: "presentation" }, h(InteractiveContainer, { key: 'e410a5b86b4d11dc12dbc4f60f8eae6e315f3b7d', disabled: this.disabled }, h(Tag, { key: '8aa327a3bea5548490fcff3bd0738e340f251924', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { key: '0377328ab74b27adeb8d65193f7041fc92de340f', role: "presentation" }, h(InteractiveContainer, { key: '5d36a120545f630ec54069e9d71a4171e9b0d777', disabled: this.disabled }, h(Tag, { key: 'bff624c9f7b58e66af31fef464bdc26b4d69937e', 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.
           */
-            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", { key: 'f9a0689fa0cc13b9c33315e1194a1764e353141c' }), this.iconEnd ? iconEndEl : null))));
+            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", { key: 'fdc152ba2dad60b16415159ad82de9208897e26d' }), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/calcite-link.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-link.entry.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=calcite-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\n// link base\n:host a,\n:host span {\n  @apply font-inherit\n    transition-default\n    relative\n    flex\n    cursor-pointer\n    items-center\n    justify-center\n    rounded-none\n    border-none;\n  text-decoration: none;\n  line-height: inherit;\n  font-size: inherit;\n  -webkit-appearance: none;\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n// focus styles\n:host a,\n:host span {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\ncalcite-icon {\n  inline-size: 1em;\n  block-size: 1em;\n  min-inline-size: unset;\n  min-block-size: unset;\n}\n\n.calcite-link--icon {\n  @apply transition-default align-middle;\n  margin-block-start: -0.25em;\n}\n\n// icon positioning and styles\n:host .calcite-link--icon.icon-start {\n  margin-inline-end: theme(\"margin.2\");\n}\n\n:host .calcite-link--icon.icon-end {\n  margin-inline-start: theme(\"margin.2\");\n}\n\n:host {\n  span,\n  a {\n    @apply text-color-link\n      transition-default\n      relative\n      inline\n      border-none\n      bg-transparent\n      p-0;\n    line-height: inherit;\n    white-space: initial;\n    background-image: linear-gradient(currentColor, currentColor),\n      linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));\n    background-position-x: 0%, 100%;\n    background-position-y: min(1.5em, 100%);\n    background-repeat: no-repeat, no-repeat;\n    background-size:\n      0% 1px,\n      100% 1px;\n\n    &:hover,\n    &:focus {\n      background-size:\n        100% 1px,\n        100% 1px;\n    }\n    &:active {\n      background-size:\n        100% 2px,\n        100% 2px;\n    }\n    &.calcite--rtl {\n      background-position:\n        100% 100%,\n        100% 100%;\n    }\n  }\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Host, Listen, Method, Prop, VNode } from \"@stencil/core\";\nimport { focusElement, getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { FlipContext } from \"../interfaces\";\n\n/** Any attributes placed on <calcite-link> component will propagate to the rendered child */\n/** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-link\",\n  styleUrl: \"link.scss\",\n  shadow: true,\n})\nexport class Link implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\n   * Without a value, the browser will suggest a filename/extension\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.\n   */\n  @Prop({ reflect: true }) download: string | boolean = false;\n\n  /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies the relationship to the linked document defined in `href`. */\n  @Prop() rel: string;\n\n  /** Specifies the frame or window to open the linked document. */\n  @Prop() target: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  render(): VNode {\n    const { download, el } = this;\n    const dir = getElementDir(el);\n    const childElType = this.href ? \"a\" : \"span\";\n    const iconStartEl = (\n      <calcite-icon\n        class=\"calcite-link--icon icon-start\"\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale=\"s\"\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class=\"calcite-link--icon icon-end\"\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale=\"s\"\n      />\n    );\n\n    const Tag = childElType;\n    const role = childElType === \"span\" ? \"link\" : null;\n    const tabIndex = childElType === \"span\" ? 0 : null;\n\n    return (\n      <Host role=\"presentation\">\n        <InteractiveContainer disabled={this.disabled}>\n          <Tag\n            class={{ [CSS_UTILITY.rtl]: dir === \"rtl\" }}\n            /*\n          When the 'download' property of type 'boolean | string' is set to true, the value is \"\".\n          This works around that issue for now.\n          */\n            download={Tag === \"a\" && (download === \"\" || download) ? download : null}\n            href={Tag === \"a\" && this.href}\n            onClick={this.childElClickHandler}\n            ref={this.storeTagRef}\n            rel={Tag === \"a\" && this.rel}\n            role={role}\n            tabIndex={tabIndex}\n            target={Tag === \"a\" && this.target}\n          >\n            {this.iconStart ? iconStartEl : null}\n            <slot />\n            {this.iconEnd ? iconEndEl : null}\n          </Tag>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"click\")\n  clickHandler(event: PointerEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    // forwards the click() to the internal link for non user-initiated events\n    if (!event.isTrusted) {\n      this.childEl.click();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.childEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLinkElement;\n\n  /** the rendered child element */\n  private childEl: HTMLAnchorElement | HTMLSpanElement;\n\n  private childElClickHandler = (event: PointerEvent): void => {\n    if (!event.isTrusted) {\n      // click was invoked internally, we stop it here\n      event.stopPropagation();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private storeTagRef = (el: Link[\"childEl\"]): void => {\n    this.childEl = el;\n  };\n}\n"],"version":3}
+{"file":"calcite-link.entry.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=calcite-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\n// link base\n:host a,\n:host span {\n  @apply font-inherit\n    transition-default\n    relative\n    flex\n    cursor-pointer\n    items-center\n    justify-center\n    rounded-none\n    border-none;\n  text-decoration: none;\n  line-height: inherit;\n  font-size: inherit;\n  -webkit-appearance: none;\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n// focus styles\n:host a,\n:host span {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\ncalcite-icon {\n  inline-size: 1em;\n  block-size: 1em;\n  min-inline-size: unset;\n  min-block-size: unset;\n}\n\n.calcite-link--icon {\n  @apply transition-default align-middle;\n  margin-block-start: -0.25em;\n}\n\n// icon positioning and styles\n:host .calcite-link--icon.icon-start {\n  margin-inline-end: theme(\"margin.2\");\n}\n\n:host .calcite-link--icon.icon-end {\n  margin-inline-start: theme(\"margin.2\");\n}\n\n:host {\n  span,\n  a {\n    @apply text-color-link\n      transition-default\n      relative\n      inline\n      border-none\n      bg-transparent\n      p-0;\n    line-height: inherit;\n    white-space: initial;\n    background-image: linear-gradient(currentColor, currentColor),\n      linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));\n    background-position-x: 0%, 100%;\n    background-position-y: min(1.5em, 100%);\n    background-repeat: no-repeat, no-repeat;\n    background-size:\n      0% 1px,\n      100% 1px;\n\n    &:hover,\n    &:focus {\n      background-size:\n        100% 1px,\n        100% 1px;\n    }\n    &:active {\n      background-size:\n        100% 2px,\n        100% 2px;\n    }\n    &.calcite--rtl {\n      background-position:\n        100% 100%,\n        100% 100%;\n    }\n  }\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Host, Listen, Method, Prop, VNode } from \"@stencil/core\";\nimport { focusElement, getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { FlipContext } from \"../interfaces\";\n\n/** Any attributes placed on <calcite-link> component will propagate to the rendered child */\n/** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-link\",\n  styleUrl: \"link.scss\",\n  shadow: true,\n})\nexport class Link implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\n   * Without a value, the browser will suggest a filename/extension\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.\n   */\n  @Prop({ reflect: true }) download: string | boolean = false;\n\n  /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies the relationship to the linked document defined in `href`. */\n  @Prop() rel: string;\n\n  /** Specifies the frame or window to open the linked document. */\n  @Prop() target: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  render(): VNode {\n    const { download, el } = this;\n    const dir = getElementDir(el);\n    const childElType = this.href ? \"a\" : \"span\";\n    const iconStartEl = (\n      <calcite-icon\n        class=\"calcite-link--icon icon-start\"\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale=\"s\"\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class=\"calcite-link--icon icon-end\"\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale=\"s\"\n      />\n    );\n\n    const Tag = childElType;\n    const role = childElType === \"span\" ? \"link\" : null;\n    const tabIndex = childElType === \"span\" ? 0 : null;\n\n    return (\n      <Host role=\"presentation\">\n        <InteractiveContainer disabled={this.disabled}>\n          <Tag\n            class={{ [CSS_UTILITY.rtl]: dir === \"rtl\" }}\n            /*\n          When the 'download' property of type 'boolean | string' is set to true, the value is \"\".\n          This works around that issue for now.\n          */\n            download={Tag === \"a\" && (download === \"\" || download) ? download : null}\n            href={Tag === \"a\" && this.href}\n            onClick={this.childElClickHandler}\n            ref={this.storeTagRef}\n            rel={Tag === \"a\" && this.rel}\n            role={role}\n            tabIndex={tabIndex}\n            target={Tag === \"a\" && this.target}\n          >\n            {this.iconStart ? iconStartEl : null}\n            <slot />\n            {this.iconEnd ? iconEndEl : null}\n          </Tag>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"click\")\n  clickHandler(event: PointerEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    // forwards the click() to the internal link for non user-initiated events\n    if (!event.isTrusted) {\n      this.childEl.click();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.childEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLinkElement;\n\n  /** the rendered child element */\n  private childEl: HTMLAnchorElement | HTMLSpanElement;\n\n  private childElClickHandler = (event: PointerEvent): void => {\n    if (!event.isTrusted) {\n      // click was invoked internally, we stop it here\n      event.stopPropagation();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private storeTagRef = (el: Link[\"childEl\"]): void => {\n    this.childEl = el;\n  };\n}\n"],"version":3}

package/dist/esm/calcite-list_3.entry.js

@@ -1,22 +1,23 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-83937316.js';
-import { b as slotChangeHasAssignedElement, t as toAriaBoolean, E as getFirstTabbable, g as getElementDir } from './dom-63b96658.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-9e5e40e3.js';
-import { c as createObserver } from './observers-b1ddc634.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-d6d6073a.js';
-import { S as SLOTS$2 } from './resources-77de6f53.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-38c7a128.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-743d8f1f.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-98b6e661.js';
-import { d as debounce } from './debounce-012012be.js';
-import './guid-e88236cd.js';
-import './resources-3625820f.js';
-import './browser-08b65933.js';
-import './key-b5c2cd7d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-6356d89d.js';
+import { b as slotChangeHasAssignedElement, t as toAriaBoolean, F as getFirstTabbable, g as getElementDir } from './dom-ca168555.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-0082d873.js';
+import { c as createObserver } from './observers-39d61a28.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-2c9b82ec.js';
+import { S as SLOTS$2 } from './resources-d40f6e99.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-6fb95cc3.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-e7f9e515.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-6c2f9fbe.js';
+import { d as debounce } from './debounce-1ec97930.js';
+import './guid-95f744cf.js';
+import './resources-a24f17b0.js';
+import './browser-096308d4.js';
+import './component-e47bd838.js';
+import './key-8328efaf.js';
 
 const CSS$2 = {
     wrapper: "wrapper",
@@ -477,7 +478,7 @@ const List = class {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, } = this;
-        return (h(InteractiveContainer, { key: 'a9ca5e6a4f835c3d88ef153016afc35fef1d2e2f', disabled: this.disabled }, h("div", { key: '604bdfa4b7a66572817d486623f0e73179a50814', class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { key: 'c4825209341da04a9815634e9287eeb367649f52', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", { class: CSS$1.sticky }, h("tr", null, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$2.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$2.actionsEnd })))))) : null, h("tbody", { key: '5045b9404be099fd2b64d79db48cd6844fbe2a48', class: CSS$1.tableContainer }, h("slot", { key: 'ec7f468b24bdd0262c97731950ef3482e2f4e69b', onSlotchange: this.handleDefaultSlotChange }))), h("div", { key: '8219e522fd2b22dcc7d02ed65b90323a7b6e33fd', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, h("slot", { key: '274d4c87840df0c0c078080053c3371141f34004', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+        return (h(InteractiveContainer, { key: 'b452cef2f749d331f569ca9a46af9c72017f2eed', disabled: this.disabled }, h("div", { key: 'c43a5ce24d7954194c48f6220a3ac6589214671b', class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { key: 'd9d8e7472334bd7738b3252883947d0190071853', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", { class: CSS$1.sticky }, h("tr", null, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$2.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$2.actionsEnd })))))) : null, h("tbody", { key: '47c586b403bafc6e2c69515ea0648720ad492bc0', class: CSS$1.tableContainer }, h("slot", { key: 'c504daf59190b78c94ec03898556ffffc5bd7ec5', onSlotchange: this.handleDefaultSlotChange }))), h("div", { key: 'da507415d70da415e5c1f49dd305f0c77097b4cf', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, h("slot", { key: '4ecb6dc9a2bc0b0dd26ee9bda042fcefa77ea75e', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -1000,13 +1001,13 @@ const ListItem = class {
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (h(Host, { key: 'ca528a359b955dfd237ca4ec6ea44bcaf06cef13' }, h(InteractiveContainer, { key: 'e0bb67bf10210a5055b0cfa227b77b1257d581f8', disabled: disabled }, h("div", { key: 'bac03d90689c992995fcb2627c6970d3838439be', class: { [CSS$2.wrapper]: true, [CSS$2.wrapperBordered]: bordered } }, h("tr", { key: '8b8184d7f6f150ed4d333bd7b5ad4db8994556e2', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (h(Host, { key: '16f6ec1a905814658f476cd1b1e267c789049c70' }, h(InteractiveContainer, { key: 'ee4cc1488a237e8cb25d30d3d4f3925972745fec', disabled: disabled }, h("div", { key: 'f8a5f0520817d8243e9b6fbc5c8467c727b72d52', class: { [CSS$2.wrapper]: true, [CSS$2.wrapperBordered]: bordered } }, h("tr", { key: 'b2dd6b114bea5f5f10e7bfcfd1a9d40d9ee4b3b1', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS$2.container]: true,
                 [CSS$2.containerHover]: true,
                 [CSS$2.containerBorder]: showBorder,
                 [CSS$2.containerBorderSelected]: borderSelected,
                 [CSS$2.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", tabIndex: active ? 0 : -1 }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom()), h("div", { key: '60b5b2d250ba72b3c821801856ed780ec0081b7f', class: CSS$2.indent }, this.renderDefaultContainer()))));
+            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", tabIndex: active ? 0 : -1 }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom()), h("div", { key: '43f56fd461303153e1b6311c44a5597b930b118d', class: CSS$2.indent }, this.renderDefaultContainer()))));
     }
     emitCalciteInternalListItemToggle() {
         this.calciteInternalListItemToggle.emit();
@@ -1097,7 +1098,7 @@ const ListItemGroup = class {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, heading } = this;
-        return (h(Host, { key: 'aced6e7f4e0f88658a55973c6451bd3ade9a1095' }, h(InteractiveContainer, { key: '6a7e77734cc737dfc7779c38f958e23ad19da06a', disabled: disabled }, h("tr", { key: '702a28ae4b478501503ab647fc46c33f25c1e8f7', class: CSS.container }, h("td", { key: '24f50d9130578bbac482ad2dce2777c962f19cc2', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: '67ff643701086e093115a93eca5cdb3e1c6559d5', onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { key: '72b362e6538638b434eaac9f4295059ab7407d2c' }, h(InteractiveContainer, { key: 'b6a3ad744cfdce9fd2e87b4e66e1ae570998231c', disabled: disabled }, h("tr", { key: '3abe960e3c55dc41c0ee098feb658127795a7204', class: CSS.container }, h("td", { key: '02a7a0797bee8da0ba6f45d8fd45b2285c7710ac', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: 'ed7a1afcaadd1b9071900f5ab6b032aca3a1deb7', onSlotchange: this.handleDefaultSlotChange }))));
     }
     get el() { return getElement(this); }
 };