@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/esm/calcite-tile-group.entry.js

@@ -1,15 +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.
- * v2.12.0
+ * v2.13.0-next.1
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-42a09246.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-31600299.js';
-import { c as createObserver } from './observers-a1e25392.js';
-import { k as focusElementInGroup } from './dom-14c76f9f.js';
-import './browser-71ae41c0.js';
-import './guid-295f272c.js';
-import './resources-29b6200e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-acdcefa7.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-415c1964.js';
+import { c as createObserver } from './observers-d7d4dc40.js';
+import { k as focusElementInGroup } from './dom-f8a9a05b.js';
+import './browser-9825271f.js';
+import './guid-aa009f8b.js';
+import './resources-2de24c26.js';
 
 const CSS = {
     container: "container",
@@ -108,7 +108,6 @@ const TileGroup = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         this.mutationObserver?.observe(this.el, { childList: true });
         this.updateTiles();
     }
@@ -116,7 +115,6 @@ const TileGroup = class {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         this.mutationObserver?.disconnect();
     }
     //--------------------------------------------------------------------------
@@ -159,7 +157,7 @@ const TileGroup = class {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(InteractiveContainer, { key: '85de45a7ce2b724d46e4e7a6456e94da0b34ddb9', disabled: this.disabled }, h("div", { key: '97b55eb827e1bd60b999eb42483119ff32a364a1', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: 'ae45a8ec397c2a71c8e363eb4a37106b79807d6e', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
+        return (h(InteractiveContainer, { key: '857312cdc8242d2a7db679075bf8f12b94d88f84', disabled: this.disabled }, h("div", { key: 'a14b54eaa63c41c4ffcb26f8385b2cc18c78a7ee', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: '115384f75f7c3c103793c7c8fb40805b9949d13a', onSlotchange: this.updateTiles, ref: this.setSlotEl }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/calcite-tile-group.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-tile-group.entry.js","mappings":"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","names":[],"sources":["src/components/tile-group/resources.ts","src/components/tile-group/tile-group.scss?tag=calcite-tile-group&encapsulation=shadow","src/components/tile-group/tile-group.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n};\n",":host {\n  box-sizing: border-box;\n  display: inline-block;\n\n  ::slotted(calcite-tile) {\n    margin-block-end: var(--calcite-spacing-px);\n    margin-inline-end: var(--calcite-spacing-px);\n  }\n}\n.container {\n  display: grid;\n  grid-auto-rows: minmax(auto, 1fr);\n}\n:host([scale=\"s\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n  }\n}\n:host([scale=\"m\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  }\n}\n:host([scale=\"l\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  }\n}\n:host([layout=\"vertical\"]) {\n  .container {\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { focusElementInGroup } from \"../../utils/dom\";\nimport { SelectableGroupComponent } from \"../../utils/selectableComponent\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tile` elements.\n */\n@Component({\n  tag: \"calcite-tile-group\",\n  styleUrl: \"tile-group.scss\",\n  shadow: true,\n})\nexport class TileGroup implements InteractiveComponent, SelectableGroupComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the alignment of each `calcite-tile`'s content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: Extract<Layout, \"horizontal\" | \"vertical\"> = \"horizontal\";\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  scaleWatcher(): void {\n    this.updateTiles();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteTileElement[] = [];\n\n  /**\n   * Specifies the selection appearance, where:\n   *\n   * - `\"icon\"` (displays a checkmark or dot), or\n   * - `\"border\"` (displays a border).\n   */\n  @Prop({ reflect: true }) selectionAppearance: SelectionAppearance = \"icon\";\n\n  /**\n   * Specifies the selection mode, where:\n   *\n   * - `\"multiple\"` (allows any number of selected items),\n   * - `\"single\"` (allows only one selected item),\n   * - `\"single-persist\"` (allows only one selected item and prevents de-selection),\n   * - `\"none\"` (allows no selected items).\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"none\" | \"single\" | \"single-persist\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  @Watch(\"selectionAppearance\")\n  handleSelectionModeOrAppearanceChange(): void {\n    this.updateTiles();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileGroupElement;\n\n  private items: HTMLCalciteTileElement[] = [];\n\n  private slotEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private getSlottedTiles = (): HTMLCalciteTileElement[] => {\n    return this.slotEl\n      ?.assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-tile\")) as HTMLCalciteTileElement[];\n  };\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateTiles());\n\n  private selectItem = (item: HTMLCalciteTileElement): void => {\n    if (!item) {\n      return;\n    }\n    this.items?.forEach((el) => {\n      const matchingEl = item === el;\n      switch (this.selectionMode) {\n        case \"multiple\":\n          if (matchingEl) {\n            el.selected = !el.selected;\n          }\n          break;\n\n        case \"single\":\n          el.selected = matchingEl && !el.selected;\n          break;\n\n        case \"single-persist\":\n          el.selected = !!matchingEl;\n          break;\n      }\n    });\n    this.updateSelectedItems();\n    this.calciteTileGroupSelect.emit();\n  };\n\n  private setSlotEl = (el: HTMLSlotElement): void => {\n    this.slotEl = el;\n  };\n\n  private updateSelectedItems = (): void => {\n    const selectedItems = this.items?.filter((el) => el.selected);\n    if (\n      (this.selectionMode === \"single\" || this.selectionMode === \"single-persist\") &&\n      selectedItems?.length > 1\n    ) {\n      this.selectedItems = [selectedItems.pop()];\n      this.items?.forEach((el) => {\n        if (this.selectedItems.indexOf(el) === -1) {\n          el.selected = false;\n        }\n      });\n    } else {\n      this.selectedItems = selectedItems ?? [];\n    }\n  };\n\n  private updateTiles = (): void => {\n    this.items = this.getSlottedTiles();\n    this.items?.forEach((el) => {\n      el.alignment = this.alignment;\n      el.interactive = true;\n      el.layout = this.layout;\n      el.scale = this.scale;\n      el.selectionAppearance = this.selectionAppearance;\n      el.selectionMode = this.selectionMode;\n    });\n    this.updateSelectedItems();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the component's selection changes. */\n  @Event({ cancelable: false }) calciteTileGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateTiles();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTileKeyEvent\")\n  calciteInternalTileKeyEventListener(event: CustomEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      event.preventDefault();\n      event.stopPropagation();\n      const interactiveItems = this.items?.filter((el) => !el.disabled);\n      switch (event.detail.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"next\");\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteTileSelect\")\n  calciteTileSelectHandler(event: CustomEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      this.selectItem(event.target as HTMLCalciteTileElement);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div aria-label={this.label} class={CSS.container} role={role}>\n          <slot onSlotchange={this.updateTiles} ref={this.setSlotEl} />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile-group.entry.js","mappings":"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","names":[],"sources":["src/components/tile-group/resources.ts","src/components/tile-group/tile-group.scss?tag=calcite-tile-group&encapsulation=shadow","src/components/tile-group/tile-group.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n};\n",":host {\n  box-sizing: border-box;\n  display: inline-block;\n\n  ::slotted(calcite-tile) {\n    margin-block-end: var(--calcite-spacing-px);\n    margin-inline-end: var(--calcite-spacing-px);\n  }\n}\n.container {\n  display: grid;\n  grid-auto-rows: minmax(auto, 1fr);\n}\n:host([scale=\"s\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n  }\n}\n:host([scale=\"m\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  }\n}\n:host([scale=\"l\"]) {\n  .container {\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  }\n}\n:host([layout=\"vertical\"]) {\n  .container {\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { focusElementInGroup } from \"../../utils/dom\";\nimport { SelectableGroupComponent } from \"../../utils/selectableComponent\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tile` elements.\n */\n@Component({\n  tag: \"calcite-tile-group\",\n  styleUrl: \"tile-group.scss\",\n  shadow: true,\n})\nexport class TileGroup implements InteractiveComponent, SelectableGroupComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the alignment of each `calcite-tile`'s content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: Extract<Layout, \"horizontal\" | \"vertical\"> = \"horizontal\";\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  scaleWatcher(): void {\n    this.updateTiles();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteTileElement[] = [];\n\n  /**\n   * Specifies the selection appearance, where:\n   *\n   * - `\"icon\"` (displays a checkmark or dot), or\n   * - `\"border\"` (displays a border).\n   */\n  @Prop({ reflect: true }) selectionAppearance: SelectionAppearance = \"icon\";\n\n  /**\n   * Specifies the selection mode, where:\n   *\n   * - `\"multiple\"` (allows any number of selected items),\n   * - `\"single\"` (allows only one selected item),\n   * - `\"single-persist\"` (allows only one selected item and prevents de-selection),\n   * - `\"none\"` (allows no selected items).\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"none\" | \"single\" | \"single-persist\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  @Watch(\"selectionAppearance\")\n  handleSelectionModeOrAppearanceChange(): void {\n    this.updateTiles();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileGroupElement;\n\n  private items: HTMLCalciteTileElement[] = [];\n\n  private slotEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private getSlottedTiles = (): HTMLCalciteTileElement[] => {\n    return this.slotEl\n      ?.assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-tile\")) as HTMLCalciteTileElement[];\n  };\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateTiles());\n\n  private selectItem = (item: HTMLCalciteTileElement): void => {\n    if (!item) {\n      return;\n    }\n    this.items?.forEach((el) => {\n      const matchingEl = item === el;\n      switch (this.selectionMode) {\n        case \"multiple\":\n          if (matchingEl) {\n            el.selected = !el.selected;\n          }\n          break;\n\n        case \"single\":\n          el.selected = matchingEl && !el.selected;\n          break;\n\n        case \"single-persist\":\n          el.selected = !!matchingEl;\n          break;\n      }\n    });\n    this.updateSelectedItems();\n    this.calciteTileGroupSelect.emit();\n  };\n\n  private setSlotEl = (el: HTMLSlotElement): void => {\n    this.slotEl = el;\n  };\n\n  private updateSelectedItems = (): void => {\n    const selectedItems = this.items?.filter((el) => el.selected);\n    if (\n      (this.selectionMode === \"single\" || this.selectionMode === \"single-persist\") &&\n      selectedItems?.length > 1\n    ) {\n      this.selectedItems = [selectedItems.pop()];\n      this.items?.forEach((el) => {\n        if (this.selectedItems.indexOf(el) === -1) {\n          el.selected = false;\n        }\n      });\n    } else {\n      this.selectedItems = selectedItems ?? [];\n    }\n  };\n\n  private updateTiles = (): void => {\n    this.items = this.getSlottedTiles();\n    this.items?.forEach((el) => {\n      el.alignment = this.alignment;\n      el.interactive = true;\n      el.layout = this.layout;\n      el.scale = this.scale;\n      el.selectionAppearance = this.selectionAppearance;\n      el.selectionMode = this.selectionMode;\n    });\n    this.updateSelectedItems();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the component's selection changes. */\n  @Event({ cancelable: false }) calciteTileGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateTiles();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTileKeyEvent\")\n  calciteInternalTileKeyEventListener(event: CustomEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      event.preventDefault();\n      event.stopPropagation();\n      const interactiveItems = this.items?.filter((el) => !el.disabled);\n      switch (event.detail.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"next\");\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.detail.target, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteTileSelect\")\n  calciteTileSelectHandler(event: CustomEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      this.selectItem(event.target as HTMLCalciteTileElement);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div aria-label={this.label} class={CSS.container} role={role}>\n          <slot onSlotchange={this.updateTiles} ref={this.setSlotEl} />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/calcite-tile-select_2.entry.js

@@ -1,15 +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.
- * v2.12.0
+ * v2.13.0-next.1
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-42a09246.js';
-import { g as guid } from './guid-295f272c.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-31600299.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-8f8e603e.js';
-import { l as logger } from './logger-d4491ace.js';
-import './browser-71ae41c0.js';
-import './config-8ecb98ae.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-acdcefa7.js';
+import { g as guid } from './guid-aa009f8b.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-415c1964.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-57f3ee06.js';
+import { l as logger } from './logger-2d1832fb.js';
+import './browser-9825271f.js';
+import './config-2e1c1468.js';
 
 const CSS = {
     checked: "checked",
@@ -154,7 +154,6 @@ const TileSelect = class {
     //--------------------------------------------------------------------------
     connectedCallback() {
         this.renderInput();
-        connectInteractive(this);
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
@@ -164,7 +163,6 @@ const TileSelect = class {
     }
     disconnectedCallback() {
         this.input.parentNode.removeChild(this.input);
-        disconnectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -197,7 +195,7 @@ const TileSelect = class {
         const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width, iconFlipRtl, } = this;
         const isLargeVisual = heading && icon && !description;
         const renderIcon = Boolean(icon);
-        return (h(InteractiveContainer, { key: 'fb4ce458ff761b577b3c588a7b2b17ab9db17927', disabled: disabled }, h("div", { key: '3963753f3f75f8e063287f65819dbcc558e49b03', class: {
+        return (h(InteractiveContainer, { key: 'd34cb1834c773504a630351fc90f265d266872a4', disabled: disabled }, h("div", { key: '64a7e7f4033b965e4bc543a790f00c24515cf00d', class: {
                 checked,
                 container: true,
                 [CSS.description]: Boolean(description),
@@ -214,7 +212,7 @@ const TileSelect = class {
                 [CSS.largeVisual]: isLargeVisual,
                 [CSS.widthAuto]: width === "auto",
                 [CSS.widthFull]: width === "full",
-            } }, h("div", { key: 'b4d6877710cb5da729a9e9f8e9ca0e1fbc6bbab0', class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (h("div", { key: 'b44c56e0db0efe86143620701bfeed24ded091f4', class: { [CSS.icon]: renderIcon } }, h("calcite-icon", { key: '756ffa642f294d7e0d7dbf947739d3d50f73480c', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), h("div", { key: '9ab6110c94d707582dd9b1e0a2bbf0b852f87b89', class: CSS.tileContentContainer }, h("div", { key: 'bf74512102c70a1716afc9ebc27ad7f3f5a18b3f', class: CSS.tileContent }, heading && h("div", { key: '1359f1524bfa52f3f4b0620680cf9c62bcdafe6e', class: CSS.tileHeading }, heading), description && h("div", { key: '01950e547acfe81b946fac0583df493a6f05ee8d', class: CSS.tileDescription }, description)))), h("slot", { key: 'd9bbd06c7808673fad6480de536a7b153574956b' }))));
+            } }, h("div", { key: '19d95921363014e65ed412616b7b11f6f45caabf', class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (h("div", { key: '6e1e71f45091b09d66154f15cc9f675bf14c2ed8', class: { [CSS.icon]: renderIcon } }, h("calcite-icon", { key: '285cd155c9ce566cf1fb62a8258fd9eea8e859dd', flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), h("div", { key: 'abde8bf3ba6c4a4828173c5c4b75874a09a56a7d', class: CSS.tileContentContainer }, h("div", { key: '93d42b9e22a21491e5f1841163ee68b45ec88150', class: CSS.tileContent }, heading && h("div", { key: '4e8163cbddc384383cbb2373d02248bad3436f18', class: CSS.tileHeading }, heading), description && h("div", { key: '2cf411773c01e32f1a73cfd2bbef10895b50165a', class: CSS.tileDescription }, description)))), h("slot", { key: '6a0d5b9e044bb4a6114ff641886340f93b67cc4f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -243,17 +241,11 @@ const TileSelectGroup = class {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     render() {
-        return (h(InteractiveContainer, { key: '9813d93d9b1307cd39ca8e109ef99d876710b328', disabled: this.disabled }, h("slot", { key: '1eec8241863a160777fd47f923996ba940c6de83' })));
+        return (h(InteractiveContainer, { key: 'd5c5a6b13cf03ccf550af70f3654be884c8f8507', disabled: this.disabled }, h("slot", { key: 'f0989f1aa6e91896544a3df2ca4b98387a4ad05d' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/calcite-tile-select_2.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-tile-select.calcite-tile-select-group.entry.js","mappings":"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","names":[],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx","src/components/tile-select-group/tile-select-group.scss?tag=calcite-tile-select-group&encapsulation=shadow","src/components/tile-select-group/tile-select-group.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow:\n            0 0 0 1px var(--calcite-color-brand),\n            inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\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 { Alignment, Width } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { logger } from \"../../utils/logger\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\nlogger.deprecated(\"component\", {\n  name: \"tile-select\",\n  removalVersion: 4,\n  suggested: [\"tile\", \"tile-group\"],\n});\n\n/**\n * @deprecated Use the `calcite-tile` component instead.\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"radio\"` is for single selection, and\n   *\n   * `\"checkbox\"` is for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\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    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input =\n      this.type === \"radio\"\n        ? /* we need to call createElement(x) separately to ensure supporting components are properly bundled */\n          document.createElement(\"calcite-radio-button\")\n        : document.createElement(\"calcite-checkbox\");\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.el.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div\n          class={{\n            checked,\n            container: true,\n            [CSS.description]: Boolean(description),\n            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n            disabled,\n            focused,\n            [CSS.heading]: Boolean(heading),\n            [CSS.headingOnly]: heading && !icon && !description,\n            [CSS.icon]: renderIcon,\n            [CSS.iconOnly]: !heading && icon && !description,\n            [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n            [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n            [CSS.inputEnabled]: inputEnabled,\n            [CSS.largeVisual]: isLargeVisual,\n            [CSS.widthAuto]: width === \"auto\",\n            [CSS.widthFull]: width === \"full\",\n          }}\n        >\n          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n            {icon && (\n              <div class={{ [CSS.icon]: renderIcon }}>\n                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n              </div>\n            )}\n            <div class={CSS.tileContentContainer}>\n              <div class={CSS.tileContent}>\n                {heading && <div class={CSS.tileHeading}>{heading}</div>}\n                {description && <div class={CSS.tileDescription}>{description}</div>}\n              </div>\n            </div>\n          </div>\n          <slot />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n",":host {\n  @apply flex flex-wrap;\n  ::slotted(calcite-tile-select) {\n    @apply mb-px;\n    margin-inline-end: theme(\"spacing.px\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { logger } from \"../../utils/logger\";\nimport { TileSelectGroupLayout } from \"./interfaces\";\n\nlogger.deprecated(\"component\", {\n  name: \"tile-select-group\",\n  removalVersion: 4,\n  suggested: [\"tile\", \"tile-group\"],\n});\n\n/**\n * @deprecated Use the `calcite-tile-group` component instead.\n * @slot - A slot for adding `calcite-tile-select` elements.\n */\n@Component({\n  tag: \"calcite-tile-select-group\",\n  styleUrl: \"tile-select-group.scss\",\n  shadow: true,\n})\nexport class TileSelectGroup implements InteractiveComponent {\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   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: TileSelectGroupLayout = \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  render(): VNode {\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <slot />\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile-select.calcite-tile-select-group.entry.js","mappings":"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","names":[],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx","src/components/tile-select-group/tile-select-group.scss?tag=calcite-tile-select-group&encapsulation=shadow","src/components/tile-select-group/tile-select-group.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow:\n            0 0 0 1px var(--calcite-color-brand),\n            inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Alignment, Width } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { logger } from \"../../utils/logger\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\nlogger.deprecated(\"component\", {\n  name: \"tile-select\",\n  removalVersion: 4,\n  suggested: [\"tile\", \"tile-group\"],\n});\n\n/**\n * @deprecated Use the `calcite-tile` component instead.\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"radio\"` is for single selection, and\n   *\n   * `\"checkbox\"` is for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\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    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input =\n      this.type === \"radio\"\n        ? /* we need to call createElement(x) separately to ensure supporting components are properly bundled */\n          document.createElement(\"calcite-radio-button\")\n        : document.createElement(\"calcite-checkbox\");\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.el.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div\n          class={{\n            checked,\n            container: true,\n            [CSS.description]: Boolean(description),\n            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n            disabled,\n            focused,\n            [CSS.heading]: Boolean(heading),\n            [CSS.headingOnly]: heading && !icon && !description,\n            [CSS.icon]: renderIcon,\n            [CSS.iconOnly]: !heading && icon && !description,\n            [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n            [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n            [CSS.inputEnabled]: inputEnabled,\n            [CSS.largeVisual]: isLargeVisual,\n            [CSS.widthAuto]: width === \"auto\",\n            [CSS.widthFull]: width === \"full\",\n          }}\n        >\n          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n            {icon && (\n              <div class={{ [CSS.icon]: renderIcon }}>\n                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n              </div>\n            )}\n            <div class={CSS.tileContentContainer}>\n              <div class={CSS.tileContent}>\n                {heading && <div class={CSS.tileHeading}>{heading}</div>}\n                {description && <div class={CSS.tileDescription}>{description}</div>}\n              </div>\n            </div>\n          </div>\n          <slot />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n",":host {\n  @apply flex flex-wrap;\n  ::slotted(calcite-tile-select) {\n    @apply mb-px;\n    margin-inline-end: theme(\"spacing.px\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { logger } from \"../../utils/logger\";\nimport { TileSelectGroupLayout } from \"./interfaces\";\n\nlogger.deprecated(\"component\", {\n  name: \"tile-select-group\",\n  removalVersion: 4,\n  suggested: [\"tile\", \"tile-group\"],\n});\n\n/**\n * @deprecated Use the `calcite-tile-group` component instead.\n * @slot - A slot for adding `calcite-tile-select` elements.\n */\n@Component({\n  tag: \"calcite-tile-select-group\",\n  styleUrl: \"tile-select-group.scss\",\n  shadow: true,\n})\nexport class TileSelectGroup implements InteractiveComponent {\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   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: TileSelectGroupLayout = \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <slot />\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +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.
- * v2.12.0
+ * v2.13.0-next.1
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-42a09246.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-31600299.js';
-import { b as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom-14c76f9f.js';
-import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable-8f8e603e.js';
-import './browser-71ae41c0.js';
-import './guid-295f272c.js';
-import './resources-29b6200e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-acdcefa7.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-415c1964.js';
+import { b as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom-f8a9a05b.js';
+import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable-57f3ee06.js';
+import './guid-aa009f8b.js';
+import './resources-2de24c26.js';
+import './browser-9825271f.js';
 
 const CSS = {
     container: "container",
@@ -112,15 +112,9 @@ const Tile = class {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
@@ -198,7 +192,7 @@ const Tile = class {
     }
     render() {
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: 'f865a9a77fa149a492adf4ccb7d620928ad1991e', disabled: disabled }, this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (h(InteractiveContainer, { key: '67397231371802b738a559481886905258dc374b', disabled: disabled }, this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"calcite-tile.entry.js","mappings":"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","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentContainer: \"content-container\",\n  contentContainerHasContent: \"content-container--has-content\",\n  contentContainerHasOnlyContentTopAndBottom: \"content-container--has-only-content-top-and-bottom\",\n  textContentContainer: \"text-content-container\",\n  description: \"description\",\n  heading: \"heading\",\n  icon: \"icon\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n} as const;\n\nexport const SLOTS = {\n  contentBottom: \"content-bottom\",\n  contentEnd: \"content-end\",\n  contentStart: \"content-start\",\n  contentTop: \"content-top\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n  --calcite-icon-color: var(--calcite-color-text-3);\n\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n.container {\n  background-color: var(--calcite-tile-background-color);\n  block-size: var(--calcite-container-size-content-fluid);\n  box-sizing: border-box;\n  inline-size: var(--calcite-container-size-content-fluid);\n  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);\n  user-select: none;\n  &.interactive {\n    cursor: pointer;\n    &:hover,\n    &:focus,\n    &.selected {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n      .selection-icon {\n        --calcite-icon-color: var(--calcite-color-brand);\n      }\n    }\n    &.selected {\n      z-index: var(--calcite-z-index);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n      z-index: var(--calcite-z-index-sticky);\n    }\n  }\n}\n\n.content-container,\n.row {\n  align-items: flex-start;\n  display: flex;\n}\n\n.content-container {\n  flex-direction: column;\n}\n\n.text-content-container {\n  inline-size: 100%;\n  outline-color: transparent;\n  padding: 0;\n}\n\n.text-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.heading {\n  color: var(--calcite-tile-heading-text-color);\n  font-weight: var(--calcite-font-weight-medium);\n  line-height: 1.20313rem;\n  overflow-wrap: break-word;\n}\n\n/* [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead */\n.large-visual-deprecated {\n  align-items: center;\n  justify-content: center;\n  min-block-size: 12rem;\n  text-align: center;\n\n  calcite-icon {\n    align-self: center;\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .text-content-container {\n    justify-content: center;\n  }\n}\n\n.description {\n  color: var(--calcite-tile-description-text-color);\n  font-weight: var(--calcite-font-weight-regular);\n  overflow-wrap: break-word;\n}\n\n:host([alignment=\"center\"]) {\n  .icon {\n    align-self: center;\n  }\n  .text-content-container {\n    justify-content: center;\n  }\n  .text-content {\n    text-align: center;\n  }\n  slot[name=\"content-start\"]::slotted(*),\n  slot[name=\"content-end\"]::slotted(*),\n  slot[name=\"content-top\"]::slotted(*),\n  slot[name=\"content-bottom\"]::slotted(*) {\n    align-self: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-sm);\n  }\n}\n\n:host([scale=\"m\"]) {\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n  .container {\n    padding: var(--calcite-spacing-md);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-md);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-md);\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-xl);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]),\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected:focus::before {\n    block-size: 100%;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n    content: \"\";\n    display: block;\n    inline-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]) {\n  .container.selected {\n    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected {\n    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);\n  }\n}\n\n:host([href]:focus:not([disabled])),\n:host([href]:hover:not([disabled])) {\n  --calcite-tile-border-color: var(--calcite-color-text-link);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  --calcite-icon-color: var(--calcite-color-text-link);\n  .container {\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n\n:host([href]:active:not([disabled])) {\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n:host([embed]) {\n  .container {\n    box-shadow: none;\n    padding: 0;\n  }\n}\n\n:host([selection-mode=\"none\"]) {\n  .container {\n    outline-color: var(--calcite-tile-border-color);\n    &:focus {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n    }\n  }\n}\n\n@include disabled();\n\n:host(:hover:not([disabled])),\n:host([active]:not([disabled])) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n\n::slotted(*) {\n  max-inline-size: 100%;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from \"../interfaces\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { SelectableComponent } from \"../../utils/selectableComponent\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot content-top - A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property.\n * @slot content-bottom - A slot for adding non-actionable elements below the component's content.\n * @slot content-start - [Deprecated] use `content-top` slot instead.  A slot for adding non-actionable elements before the component's content.\n * @slot content-end - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements InteractiveComponent, SelectableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   *\n   * @deprecated\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the alignment of the Tile's content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit.\n   * This is set to `true` by a parent Tile Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Extract<Layout, \"horizontal\" | \"vertical\"> = \"horizontal\";\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.\n   */\n  @Prop({ reflect: true }) selected = false;\n\n  /**\n   * Specifies the selection appearance, where:\n   *\n   * - `\"icon\"` (displays a checkmark or dot), or\n   * - `\"border\"` (displays a border).\n   *\n   * This property is set by the parent tile-group.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionAppearance: SelectionAppearance = \"icon\";\n\n  /**\n   * Specifies the selection mode, where:\n   *\n   * - `\"multiple\"` (allows any number of selected items),\n   * - `\"single\"` (allows only one selected item),\n   * - `\"single-persist\"` (allows only one selected item and prevents de-selection),\n   * - `\"none\"` (allows no selected items).\n   *\n   * This property is set by the parent tile-group.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"none\" | \"single\" | \"single-persist\",\n    SelectionMode\n  > = \"none\";\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    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  private clickHandler = (): void => {\n    if (this.interactive) {\n      this.setFocus();\n      this.handleSelectEvent();\n    }\n  };\n\n  private containerEl: HTMLDivElement;\n\n  @State() hasContentBottom = false;\n\n  @State() hasContentEnd = false;\n\n  @State() hasContentStart = false;\n\n  @State() hasContentTop = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTileKeyEvent: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event() calciteTileSelect: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleSelectEvent = (): void => {\n    if (\n      this.disabled ||\n      !this.interactive ||\n      (this.selectionMode === \"single-persist\" && this.selected === true)\n    ) {\n      return;\n    }\n    this.calciteTileSelect.emit();\n  };\n\n  private handleSlotChange = (event: Event): void => {\n    const slotName = (event.target as HTMLSlotElement).dataset.name;\n    this[`has${slotName}`] = slotChangeHasAssignedElement(event);\n  };\n\n  private setContainerEl = (el): void => {\n    this.containerEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleSelectEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalTileKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderSelectionIcon(): VNode {\n    const { selected, selectionAppearance, selectionMode } = this;\n    if (selectionAppearance === \"icon\" && selectionMode !== \"none\") {\n      return (\n        <calcite-icon\n          class={CSS.selectionIcon}\n          icon={\n            selected\n              ? selectionMode === \"multiple\"\n                ? ICONS.selectedMultiple\n                : ICONS.selectedSingle\n              : selectionMode === \"multiple\"\n                ? ICONS.unselectedMultiple\n                : ICONS.unselectedSingle\n          }\n          scale=\"s\"\n        />\n      );\n    }\n    return;\n  }\n\n  renderTile(): VNode {\n    const {\n      description,\n      disabled,\n      hasContentBottom,\n      hasContentEnd,\n      hasContentStart,\n      hasContentTop,\n      heading,\n      icon,\n      iconFlipRtl,\n      interactive,\n      selectionMode,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const disableInteraction = Boolean(this.href) || !interactive;\n    const role =\n      selectionMode === \"multiple\" && interactive\n        ? \"checkbox\"\n        : selectionMode !== \"none\" && interactive\n          ? \"radio\"\n          : interactive\n            ? \"button\"\n            : undefined;\n    const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);\n    const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;\n    return (\n      <div\n        aria-checked={\n          selectionMode !== \"none\" && interactive ? toAriaBoolean(this.selected) : undefined\n        }\n        aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n        aria-label={role && this.label}\n        class={{\n          [CSS.container]: true,\n          [CSS.interactive]: interactive,\n          // [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead\n          [CSS.largeVisualDeprecated]: isLargeVisual,\n          [CSS.row]: true,\n          [CSS.selected]: this.selected,\n        }}\n        onClick={this.clickHandler}\n        ref={this.setContainerEl}\n        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n      >\n        {this.renderSelectionIcon()}\n        <div\n          class={{\n            [CSS.contentContainer]: true,\n            [CSS.contentContainerHasContent]: hasContent,\n            [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom,\n          }}\n        >\n          <slot\n            data-name=\"ContentTop\"\n            name={SLOTS.contentTop}\n            onSlotchange={this.handleSlotChange}\n          />\n          {icon && <calcite-icon class={CSS.icon} flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n          <div class={{ [CSS.textContentContainer]: true, [CSS.row]: true }}>\n            <slot\n              data-name=\"ContentStart\"\n              name={SLOTS.contentStart}\n              onSlotchange={this.handleSlotChange}\n            />\n            <div class={CSS.textContent}>\n              {heading && <div class={CSS.heading}>{heading}</div>}\n              {description && <div class={CSS.description}>{description}</div>}\n            </div>\n            <slot\n              data-name=\"ContentEnd\"\n              name={SLOTS.contentEnd}\n              onSlotchange={this.handleSlotChange}\n            />\n          </div>\n          <slot\n            data-name=\"ContentBottom\"\n            name={SLOTS.contentBottom}\n            onSlotchange={this.handleSlotChange}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile.entry.js","mappings":"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","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentContainer: \"content-container\",\n  contentContainerHasContent: \"content-container--has-content\",\n  contentContainerHasOnlyContentTopAndBottom: \"content-container--has-only-content-top-and-bottom\",\n  textContentContainer: \"text-content-container\",\n  description: \"description\",\n  heading: \"heading\",\n  icon: \"icon\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n} as const;\n\nexport const SLOTS = {\n  contentBottom: \"content-bottom\",\n  contentEnd: \"content-end\",\n  contentStart: \"content-start\",\n  contentTop: \"content-top\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n  --calcite-icon-color: var(--calcite-color-text-3);\n\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n.container {\n  background-color: var(--calcite-tile-background-color);\n  block-size: var(--calcite-container-size-content-fluid);\n  box-sizing: border-box;\n  inline-size: var(--calcite-container-size-content-fluid);\n  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);\n  user-select: none;\n  &.interactive {\n    cursor: pointer;\n    &:hover,\n    &:focus,\n    &.selected {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n      .selection-icon {\n        --calcite-icon-color: var(--calcite-color-brand);\n      }\n    }\n    &.selected {\n      z-index: var(--calcite-z-index);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n      z-index: var(--calcite-z-index-sticky);\n    }\n  }\n}\n\n.content-container,\n.row {\n  align-items: flex-start;\n  display: flex;\n}\n\n.content-container {\n  flex-direction: column;\n}\n\n.text-content-container {\n  inline-size: 100%;\n  outline-color: transparent;\n  padding: 0;\n}\n\n.text-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.heading {\n  color: var(--calcite-tile-heading-text-color);\n  font-weight: var(--calcite-font-weight-medium);\n  line-height: 1.20313rem;\n  overflow-wrap: break-word;\n}\n\n/* [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead */\n.large-visual-deprecated {\n  align-items: center;\n  justify-content: center;\n  min-block-size: 12rem;\n  text-align: center;\n\n  calcite-icon {\n    align-self: center;\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .text-content-container {\n    justify-content: center;\n  }\n}\n\n.description {\n  color: var(--calcite-tile-description-text-color);\n  font-weight: var(--calcite-font-weight-regular);\n  overflow-wrap: break-word;\n}\n\n:host([alignment=\"center\"]) {\n  .icon {\n    align-self: center;\n  }\n  .text-content-container {\n    justify-content: center;\n  }\n  .text-content {\n    text-align: center;\n  }\n  slot[name=\"content-start\"]::slotted(*),\n  slot[name=\"content-end\"]::slotted(*),\n  slot[name=\"content-top\"]::slotted(*),\n  slot[name=\"content-bottom\"]::slotted(*) {\n    align-self: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-sm);\n  }\n}\n\n:host([scale=\"m\"]) {\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n  .container {\n    padding: var(--calcite-spacing-md);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-md);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-md);\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-xl);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]),\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected:focus::before {\n    block-size: 100%;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n    content: \"\";\n    display: block;\n    inline-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]) {\n  .container.selected {\n    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected {\n    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);\n  }\n}\n\n:host([href]:focus:not([disabled])),\n:host([href]:hover:not([disabled])) {\n  --calcite-tile-border-color: var(--calcite-color-text-link);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  --calcite-icon-color: var(--calcite-color-text-link);\n  .container {\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n\n:host([href]:active:not([disabled])) {\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n:host([embed]) {\n  .container {\n    box-shadow: none;\n    padding: 0;\n  }\n}\n\n:host([selection-mode=\"none\"]) {\n  .container {\n    outline-color: var(--calcite-tile-border-color);\n    &:focus {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n    }\n  }\n}\n\n@include disabled();\n\n:host(:hover:not([disabled])),\n:host([active]:not([disabled])) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n\n::slotted(*) {\n  max-inline-size: 100%;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from \"../interfaces\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { SelectableComponent } from \"../../utils/selectableComponent\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot content-top - A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property.\n * @slot content-bottom - A slot for adding non-actionable elements below the component's content.\n * @slot content-start - [Deprecated] use `content-top` slot instead.  A slot for adding non-actionable elements before the component's content.\n * @slot content-end - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements InteractiveComponent, SelectableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   *\n   * @deprecated\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the alignment of the Tile's content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit.\n   * This is set to `true` by a parent Tile Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Extract<Layout, \"horizontal\" | \"vertical\"> = \"horizontal\";\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.\n   */\n  @Prop({ reflect: true }) selected = false;\n\n  /**\n   * Specifies the selection appearance, where:\n   *\n   * - `\"icon\"` (displays a checkmark or dot), or\n   * - `\"border\"` (displays a border).\n   *\n   * This property is set by the parent tile-group.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionAppearance: SelectionAppearance = \"icon\";\n\n  /**\n   * Specifies the selection mode, where:\n   *\n   * - `\"multiple\"` (allows any number of selected items),\n   * - `\"single\"` (allows only one selected item),\n   * - `\"single-persist\"` (allows only one selected item and prevents de-selection),\n   * - `\"none\"` (allows no selected items).\n   *\n   * This property is set by the parent tile-group.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"none\" | \"single\" | \"single-persist\",\n    SelectionMode\n  > = \"none\";\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    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  private clickHandler = (): void => {\n    if (this.interactive) {\n      this.setFocus();\n      this.handleSelectEvent();\n    }\n  };\n\n  private containerEl: HTMLDivElement;\n\n  @State() hasContentBottom = false;\n\n  @State() hasContentEnd = false;\n\n  @State() hasContentStart = false;\n\n  @State() hasContentTop = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTileKeyEvent: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event() calciteTileSelect: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleSelectEvent = (): void => {\n    if (\n      this.disabled ||\n      !this.interactive ||\n      (this.selectionMode === \"single-persist\" && this.selected === true)\n    ) {\n      return;\n    }\n    this.calciteTileSelect.emit();\n  };\n\n  private handleSlotChange = (event: Event): void => {\n    const slotName = (event.target as HTMLSlotElement).dataset.name;\n    this[`has${slotName}`] = slotChangeHasAssignedElement(event);\n  };\n\n  private setContainerEl = (el): void => {\n    this.containerEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleSelectEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalTileKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderSelectionIcon(): VNode {\n    const { selected, selectionAppearance, selectionMode } = this;\n    if (selectionAppearance === \"icon\" && selectionMode !== \"none\") {\n      return (\n        <calcite-icon\n          class={CSS.selectionIcon}\n          icon={\n            selected\n              ? selectionMode === \"multiple\"\n                ? ICONS.selectedMultiple\n                : ICONS.selectedSingle\n              : selectionMode === \"multiple\"\n                ? ICONS.unselectedMultiple\n                : ICONS.unselectedSingle\n          }\n          scale=\"s\"\n        />\n      );\n    }\n    return;\n  }\n\n  renderTile(): VNode {\n    const {\n      description,\n      disabled,\n      hasContentBottom,\n      hasContentEnd,\n      hasContentStart,\n      hasContentTop,\n      heading,\n      icon,\n      iconFlipRtl,\n      interactive,\n      selectionMode,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const disableInteraction = Boolean(this.href) || !interactive;\n    const role =\n      selectionMode === \"multiple\" && interactive\n        ? \"checkbox\"\n        : selectionMode !== \"none\" && interactive\n          ? \"radio\"\n          : interactive\n            ? \"button\"\n            : undefined;\n    const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);\n    const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;\n    return (\n      <div\n        aria-checked={\n          selectionMode !== \"none\" && interactive ? toAriaBoolean(this.selected) : undefined\n        }\n        aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n        aria-label={role && this.label}\n        class={{\n          [CSS.container]: true,\n          [CSS.interactive]: interactive,\n          // [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead\n          [CSS.largeVisualDeprecated]: isLargeVisual,\n          [CSS.row]: true,\n          [CSS.selected]: this.selected,\n        }}\n        onClick={this.clickHandler}\n        ref={this.setContainerEl}\n        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n      >\n        {this.renderSelectionIcon()}\n        <div\n          class={{\n            [CSS.contentContainer]: true,\n            [CSS.contentContainerHasContent]: hasContent,\n            [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom,\n          }}\n        >\n          <slot\n            data-name=\"ContentTop\"\n            name={SLOTS.contentTop}\n            onSlotchange={this.handleSlotChange}\n          />\n          {icon && <calcite-icon class={CSS.icon} flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n          <div class={{ [CSS.textContentContainer]: true, [CSS.row]: true }}>\n            <slot\n              data-name=\"ContentStart\"\n              name={SLOTS.contentStart}\n              onSlotchange={this.handleSlotChange}\n            />\n            <div class={CSS.textContent}>\n              {heading && <div class={CSS.heading}>{heading}</div>}\n              {description && <div class={CSS.description}>{description}</div>}\n            </div>\n            <slot\n              data-name=\"ContentEnd\"\n              name={SLOTS.contentEnd}\n              onSlotchange={this.handleSlotChange}\n            />\n          </div>\n          <slot\n            data-name=\"ContentBottom\"\n            name={SLOTS.contentBottom}\n            onSlotchange={this.handleSlotChange}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-42a09246.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1885c3b2.js';
-import { e as getSlotted, g as getElementDir, t as toAriaBoolean } from './dom-14c76f9f.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-1fb421c2.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-c8bd5ea9.js';
-import { H as Heading, c as constrainHeadingLevel } from './Heading-92af9aa3.js';
-import { l as logger } from './logger-d4491ace.js';
-import { c as createObserver } from './observers-a1e25392.js';
-import './guid-295f272c.js';
-import './resources-29b6200e.js';
-import './key-a886a13d.js';
-import './browser-71ae41c0.js';
-import './config-8ecb98ae.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-acdcefa7.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-5a66da95.js';
+import { e as getSlotted, g as getElementDir, t as toAriaBoolean } from './dom-f8a9a05b.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6a8e5573.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-04e8ac27.js';
+import { H as Heading, c as constrainHeadingLevel } from './Heading-c9a7b934.js';
+import { l as logger } from './logger-2d1832fb.js';
+import { c as createObserver } from './observers-d7d4dc40.js';
+import './guid-aa009f8b.js';
+import './resources-2de24c26.js';
+import './key-c1fc7d8d.js';
+import './browser-9825271f.js';
+import './config-2e1c1468.js';
 
 const CSS$1 = {
     container: "container",

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

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-42a09246.js';
-import { q as queryElementRoots, A as getShadowRootNode, t as toAriaBoolean } from './dom-14c76f9f.js';
-import { c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-bd353a44.js';
-import { g as guid } from './guid-295f272c.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-764c8b02.js';
-import { F as FloatingArrow } from './FloatingArrow-8f69a70d.js';
-import './resources-29b6200e.js';
-import './browser-71ae41c0.js';
-import './debounce-5279931d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-acdcefa7.js';
+import { q as queryElementRoots, A as getShadowRootNode, t as toAriaBoolean } from './dom-f8a9a05b.js';
+import { c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-fb8cca6f.js';
+import { g as guid } from './guid-aa009f8b.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-0ca09381.js';
+import { F as FloatingArrow } from './FloatingArrow-46de385c.js';
+import './resources-2de24c26.js';
+import './browser-9825271f.js';
+import './debounce-dec610f5.js';
 
 const CSS = {
     container: "container",