@esri/calcite-components 2.8.0 → 2.8.1-next.1

package/dist/collection/components/tile/tile.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
@@ -82,17 +82,17 @@
   z-index: var(--calcite-z-index-sticky);
 }
 
-.column,
+.content-container,
 .row {
   align-items: flex-start;
   display: flex;
 }
 
-.column {
+.content-container {
   flex-direction: column;
 }
 
-.content-container {
+.text-content-container {
   inline-size: 100%;
   outline-color: transparent;
   padding: 0;
@@ -122,7 +122,7 @@
   block-size: 64px;
   inline-size: 64px;
 }
-.large-visual-deprecated .content-container {
+.large-visual-deprecated .text-content-container {
   justify-content: center;
 }
 
@@ -133,7 +133,7 @@
 }
 
 :host([alignment=center]) .row,
-:host([alignment=center]) .column {
+:host([alignment=center]) .content-container {
   align-items: center;
   text-align: center;
 }
@@ -149,7 +149,7 @@
 :host([scale=s]) .container {
   padding: var(--calcite-spacing-sm);
 }
-:host([scale=s]) .column,
+:host([scale=s]) .content-container--has-content,
 :host([scale=s]) .row {
   gap: var(--calcite-spacing-sm);
 }
@@ -161,6 +161,9 @@
   font-size: var(--calcite-font-size--3);
   line-height: 0.85938rem;
 }
+:host([scale=s]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
+  margin-block-end: var(--calcite-spacing-sm);
+}
 
 :host([scale=m]) {
   max-inline-size: 460px;
@@ -169,7 +172,7 @@
 :host([scale=m]) .container {
   padding: var(--calcite-spacing-md);
 }
-:host([scale=m]) .column,
+:host([scale=m]) .content-container--has-content,
 :host([scale=m]) .row {
   gap: var(--calcite-spacing-md);
 }
@@ -181,6 +184,9 @@
   font-size: var(--calcite-font-size--2);
   line-height: 1.03125rem;
 }
+:host([scale=m]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
+  margin-block-end: var(--calcite-spacing-md);
+}
 
 :host([scale=l]) {
   max-inline-size: 520px;
@@ -189,7 +195,7 @@
 :host([scale=l]) .container {
   padding: var(--calcite-spacing-xl);
 }
-:host([scale=l]) .column,
+:host([scale=l]) .content-container--has-content,
 :host([scale=l]) .row {
   gap: var(--calcite-spacing-xl);
 }
@@ -201,6 +207,9 @@
   font-size: var(--calcite-font-size--1);
   line-height: 1.20313rem;
 }
+:host([scale=l]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
+  margin-block-end: var(--calcite-spacing-xl);
+}
 
 :host([selection-appearance=border][layout=horizontal]) .container.selected:focus::before,
 :host([selection-appearance=border][layout=vertical]) .container.selected:focus::before {

package/dist/collection/components/tile/tile.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";

package/dist/collection/components/tile/tile.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { h, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";
-import { toAriaBoolean } from "../../utils/dom";
+import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { CSS, ICONS, SLOTS } from "./resources";
 /**
@@ -35,6 +35,10 @@ export class Tile {
             }
             this.calciteTileSelect.emit();
         };
+        this.handleSlotChange = (event) => {
+            const slotName = event.target.dataset.name;
+            this[`has${slotName}`] = slotChangeHasAssignedElement(event);
+        };
         this.setContainerEl = (el) => {
             this.containerEl = el;
         };
@@ -54,6 +58,10 @@ export class Tile {
         this.selected = false;
         this.selectionAppearance = "icon";
         this.selectionMode = "none";
+        this.hasContentBottom = false;
+        this.hasContentEnd = false;
+        this.hasContentStart = false;
+        this.hasContentTop = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -131,7 +139,7 @@ export class Tile {
         return;
     }
     renderTile() {
-        const { description, disabled, heading, icon, iconFlipRtl, interactive, selectionMode } = this;
+        const { description, disabled, hasContentBottom, hasContentEnd, hasContentStart, hasContentTop, heading, icon, iconFlipRtl, interactive, selectionMode, } = this;
         const isLargeVisual = heading && icon && !Boolean(description);
         const disableInteraction = Boolean(this.href) || !interactive;
         const role = selectionMode === "multiple" && interactive
@@ -141,6 +149,8 @@ export class Tile {
                 : interactive
                     ? "button"
                     : undefined;
+        const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);
+        const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;
         return (h("div", { "aria-checked": selectionMode !== "none" && interactive ? toAriaBoolean(this.selected) : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": role && this.label, class: {
                 [CSS.container]: true,
                 [CSS.interactive]: interactive,
@@ -150,11 +160,15 @@ export class Tile {
                 [CSS.selected]: this.selected,
             }, onClick: this.clickHandler, role: role, tabIndex: disableInteraction ? undefined : 0,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setContainerEl }, this.renderSelectionIcon(), h("div", { class: CSS.column }, h("slot", { name: SLOTS.contentTop }), icon && h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }), h("div", { class: { [CSS.contentContainer]: true, [CSS.row]: true } }, h("slot", { name: SLOTS.contentStart }), h("div", { class: CSS.textContent }, heading && h("div", { class: CSS.heading }, heading), description && h("div", { class: CSS.description }, description)), h("slot", { name: SLOTS.contentEnd })), h("slot", { name: SLOTS.contentBottom }))));
+            ref: this.setContainerEl }, this.renderSelectionIcon(), h("div", { class: {
+                [CSS.contentContainer]: true,
+                [CSS.contentContainerHasContent]: hasContent,
+                [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom,
+            } }, h("slot", { "data-name": "ContentTop", name: SLOTS.contentTop, onSlotchange: this.handleSlotChange }), icon && h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }), h("div", { class: { [CSS.textContentContainer]: true, [CSS.row]: true } }, h("slot", { "data-name": "ContentStart", name: SLOTS.contentStart, onSlotchange: this.handleSlotChange }), h("div", { class: CSS.textContent }, heading && h("div", { class: CSS.heading }, heading), description && h("div", { class: CSS.description }, description)), h("slot", { "data-name": "ContentEnd", name: SLOTS.contentEnd, onSlotchange: this.handleSlotChange })), h("slot", { "data-name": "ContentBottom", name: SLOTS.contentBottom, onSlotchange: this.handleSlotChange }))));
     }
     render() {
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: '0498410835d5fc00d19eb6787aa89862ce784c46', disabled: disabled }, !!this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (h(InteractiveContainer, { key: '7f10b5f251ef8a2e615d32c83c5ab3ad2ab17b75', disabled: disabled }, !!this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     static get is() { return "calcite-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -518,6 +532,14 @@ export class Tile {
             }
         };
     }
+    static get states() {
+        return {
+            "hasContentBottom": {},
+            "hasContentEnd": {},
+            "hasContentStart": {},
+            "hasContentTop": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "calciteInternalTileKeyEvent",

package/dist/collection/components/tile/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../../src/components/tile/tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\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 { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { SelectableComponent } from \"../../utils/selectableComponent\";\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: string;\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: Exclude<Layout, \"grid\"> = \"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   * @internal\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  //--------------------------------------------------------------------------\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 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 { description, disabled, heading, icon, iconFlipRtl, interactive, selectionMode } = this;\n    const isLargeVisual = heading && icon && !Boolean(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    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        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={this.setContainerEl}\n      >\n        {this.renderSelectionIcon()}\n        <div class={CSS.column}>\n          <slot name={SLOTS.contentTop} />\n          {icon && <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n          <div class={{ [CSS.contentContainer]: true, [CSS.row]: true }}>\n            <slot name={SLOTS.contentStart} />\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 name={SLOTS.contentEnd} />\n          </div>\n          <slot name={SLOTS.contentBottom} />\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":"tile.js","sourceRoot":"","sources":["../../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EAErB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;GAKG;AAMH,MAAM,OAAO,IAAI;;QAuIP,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QA4BF,6EAA6E;QAC7E,EAAE;QACF,mBAAmB;QACnB,EAAE;QACF,6EAA6E;QAErE,sBAAiB,GAAG,GAAS,EAAE;YACrC,IACE,IAAI,CAAC,QAAQ;gBACb,CAAC,IAAI,CAAC,WAAW;gBACjB,CAAC,IAAI,CAAC,aAAa,KAAK,gBAAgB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,EACnE,CAAC;gBACD,OAAO;YACT,CAAC;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAChD,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA0B,CAAC,OAAO,CAAC,IAAI,CAAC;YAChE,IAAI,CAAC,MAAM,QAAQ,EAAE,CAAC,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,EAAE,EAAQ,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACxB,CAAC,CAAC;sBApLgC,KAAK;yBAKyB,OAAO;;wBAUnC,KAAK;qBASR,KAAK;;;;2BAaC,KAAK;2BAQtB,KAAK;;sBAYgC,YAAY;qBAK/B,GAAG;wBAOP,KAAK;mCAY2B,MAAM;6BAiBtE,MAAM;gCAkCkB,KAAK;6BAER,KAAK;+BAEH,KAAK;6BAEP,KAAK;;IAtC9B,4EAA4E;IAC5E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,4EAA4E;IAE5E,mCAAmC;IAEnC,KAAK,CAAC,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAqED,6EAA6E;IAC7E,EAAE;IACF,aAAa;IACb,EAAE;IACF,6EAA6E;IAE7E,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,4EAA4E;IAC5E,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,4EAA4E;IAG5E,cAAc,CAAC,KAAoB;QACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;YAC7B,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACzB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY,CAAC;gBAClB,KAAK,SAAS,CAAC;gBACf,KAAK,MAAM,CAAC;gBACZ,KAAK,KAAK;oBACR,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAED,6EAA6E;IAC7E,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,6EAA6E;IAE7E,mBAAmB;QACjB,MAAM,EAAE,QAAQ,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC9D,IAAI,mBAAmB,KAAK,MAAM,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC/D,OAAO,CACL,oBACE,KAAK,EAAE,GAAG,CAAC,aAAa,EACxB,IAAI,EACF,QAAQ;oBACN,CAAC,CAAC,aAAa,KAAK,UAAU;wBAC5B,CAAC,CAAC,KAAK,CAAC,gBAAgB;wBACxB,CAAC,CAAC,KAAK,CAAC,cAAc;oBACxB,CAAC,CAAC,aAAa,KAAK,UAAU;wBAC5B,CAAC,CAAC,KAAK,CAAC,kBAAkB;wBAC1B,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAE9B,KAAK,EAAC,GAAG,GACT,CACH,CAAC;QACJ,CAAC;QACD,OAAO;IACT,CAAC;IAED,UAAU;QACR,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,aAAa,EACb,OAAO,EACP,IAAI,EACJ,WAAW,EACX,WAAW,EACX,aAAa,GACd,GAAG,IAAI,CAAC;QACT,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC/D,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QAC9D,MAAM,IAAI,GACR,aAAa,KAAK,UAAU,IAAI,WAAW;YACzC,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,aAAa,KAAK,MAAM,IAAI,WAAW;gBACvC,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,WAAW;oBACX,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,SAAS,CAAC;QACpB,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,WAAW,IAAI,aAAa,IAAI,eAAe,IAAI,OAAO,IAAI,IAAI,CAAC,CAAC;QAC1F,MAAM,0BAA0B,GAAG,CAAC,UAAU,IAAI,aAAa,IAAI,gBAAgB,CAAC;QACpF,OAAO,CACL,2BAEI,aAAa,KAAK,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,mBAErE,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC3D,IAAI,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,IAAI;gBACrB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,WAAW;gBAC9B,2FAA2F;gBAC3F,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,aAAa;gBAC1C,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,IAAI;gBACf,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;aAC9B,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAC5C,oKAAoK;YACpK,GAAG,EAAE,IAAI,CAAC,cAAc;YAEvB,IAAI,CAAC,mBAAmB,EAAE;YAC3B,WACE,KAAK,EAAE;oBACL,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,IAAI;oBAC5B,CAAC,GAAG,CAAC,0BAA0B,CAAC,EAAE,UAAU;oBAC5C,CAAC,GAAG,CAAC,0CAA0C,CAAC,EAAE,0BAA0B;iBAC7E;gBAED,yBACY,YAAY,EACtB,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACnC;gBACD,IAAI,IAAI,oBAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG;gBACrE,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE;oBAC/D,yBACY,cAAc,EACxB,IAAI,EAAE,KAAK,CAAC,YAAY,EACxB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACnC;oBACF,WAAK,KAAK,EAAE,GAAG,CAAC,WAAW;wBACxB,OAAO,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IAAG,OAAO,CAAO;wBACnD,WAAW,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAO,CAC5D;oBACN,yBACY,YAAY,EACtB,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACnC,CACE;gBACN,yBACY,eAAe,EACzB,IAAI,EAAE,KAAK,CAAC,aAAa,EACzB,YAAY,EAAE,IAAI,CAAC,gBAAgB,GACnC,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,OAAO,CACL,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,QAAQ,IACrC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACb,oBAAc,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC9C,IAAI,CAAC,UAAU,EAAE,CACL,CAChB,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,UAAU,EAAE,CAClB,CACoB,CACxB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 { 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: string;\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: Exclude<Layout, \"grid\"> = \"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   * @internal\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 && !Boolean(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        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={this.setContainerEl}\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 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"]}

package/dist/collection/components/tile-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/tile-group/tile-group.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tile-group/tile-group.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, reflects, renders, hidden } from "../../tests/commonTests";

package/dist/collection/components/tile-group/tile-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { h, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";

package/dist/collection/components/tile-select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 export const CSS = {
     checked: "checked",

package/dist/collection/components/tile-select/tile-select.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tile-select/tile-select.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, reflects, renders } from "../../tests/commonTests";

package/dist/collection/components/tile-select/tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { h, } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/tile-select-group.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tile-select-group/tile-select-group.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { accessible, defaults, disabled, reflects, renders, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";

package/dist/collection/components/tile-select-group/tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { h } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, InteractiveContainer, updateHostInteraction, } from "../../utils/interactive";

package/dist/collection/components/time-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 export const CSS = {
     button: "button",

package/dist/collection/components/time-picker/time-picker.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/time-picker/time-picker.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";

package/dist/collection/components/time-picker/time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { h, } from "@stencil/core";
 import { numberKeys } from "../../utils/key";

package/dist/collection/components/tip/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 export const CSS = {
     container: "container",

package/dist/collection/components/tip/tip.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tip/tip.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, defaults, slots, t9n } from "../../tests/commonTests";

package/dist/collection/components/tip/tip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { Fragment, h, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/tip-group/tip-group.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:10 GMT
+ * Generated on Fri, 03 May 2024 17:37:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:08 GMT
+ * Generated on Fri, 03 May 2024 17:37:02 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/tip-group/tip-group.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.0
+ * v2.8.1-next.1
  */
 import { accessible, hidden, renders } from "../../tests/commonTests";
 describe("calcite-tip-group", () => {