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

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

@@ -1,78 +1,91 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from '../interfaces';
-import { SelectableComponent } from '../../utils/selectableComponent';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Alignment, Scale } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { HeadingLevel } from "../functional/Heading.js";
 
 /**
+ * @cssproperty [--calcite-tile-accent-color-press] - When the parent `calcite-tile-group` has a `selectionMode` that is not `"none"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border.
+ * @cssproperty [--calcite-tile-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-tile-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-tile-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-tile-heading-text-color] - Specifies the component's `heading` text color.
+ * @cssproperty [--calcite-tile-link-color] - When `href` is present, specifies the component's link color.
+ * @cssproperty [--calcite-tile-shadow] - Specifies the shadow around the component.
+ * @cssproperty [--calcite-tile-text-color] - Specifies the component's `description` and `icon` text color, but not the `heading` text color.
+ * @cssproperty [--calcite-tile-link-text-color] - Specifies the component's link text color.
  * @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.
  * @slot [content-bottom] - A slot for adding non-actionable elements below the component's content.
  */
-export declare class Tile extends LitElement {
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated in v2.8.0, removal target v6.0.0 - No longer necessary.
-     * @default false
-     */
-    active: boolean;
-    /**
-     * Specifies the alignment of the Tile's content.
-     *
-     * @default "start"
-     */
-    alignment: Exclude<Alignment, "end">;
-    /** A description for the component, which displays below the heading. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The component's embed mode.
-     *
-     * When `true`, renders without a border and padding for use by other components.
-     *
-     * @deprecated in v2.6.0, removal target v6.0.0 - No longer necessary.
-     * @default false
-     */
-    embed: boolean;
-    /** The component header text, which displays between the icon and description. */
-    heading: string;
-    /** When embed is `"false"`, the URL for the component. */
-    href: string;
-    /** Specifies an icon to display. */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the selected state of the component changes. */
-    readonly calciteTileSelect: TargetedEvent<this, void>;
-}
+export abstract class Tile extends LitElement {
+  /**
+   * When `true`, the component is active.
+   *
+   * @deprecated in v2.8.0, removal target v6.0.0 - No longer necessary.
+   * @default false
+   */
+  accessor active: boolean;
+  /**
+   * Specifies alignment of the component's content.
+   *
+   * @default "start"
+   */
+  accessor alignment: Exclude<Alignment, "end">;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the component's embed mode.
+   *
+   * When `true`, renders without a border and padding for use by other components.
+   *
+   * @deprecated in v2.6.0, removal target v6.0.0 - No longer necessary.
+   * @default false
+   */
+  accessor embed: boolean;
+  /** Specifies the component's heading text. displays between the `icon` and `description`. */
+  accessor heading: string;
+  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /** When embed is `false`, specifies the URL for the component. */
+  accessor href: string;
+  /** Specifies an icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * Specifies the component's size.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the selected state of the component changes. */
+  readonly calciteTileSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTileSelect: Tile["calciteTileSelect"]["detail"];
+  };
+}

package/dist/components/calcite-tile/customElement.js

@@ -1,10 +1,14 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { H as Heading } from "../../chunks/Heading.js";
 const CSS = {
   container: "container",
   contentContainer: "content-container",
@@ -31,11 +35,12 @@ const SLOTS = {
   contentBottom: "content-bottom",
   contentTop: "content-top"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-shadow:var(--calcite-tile-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:inline-block}calcite-link{--calcite-link-text-color: var(--calcite-tile-link-text-color)}.container{background-color:var(--calcite-tile-background-color, var(--calcite-color-foreground-1));block-size:var(--calcite-container-size-content-fluid);border-radius:var(--calcite-tile-corner-radius, var(--calcite-corner-radius));box-sizing:border-box;color:var(--calcite-tile-text-color, var(--calcite-color-text-3));inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));padding:var(--calcite-internal-tile-spacing);position:relative;-webkit-user-select:none;user-select:none}.container .selection-icon{color:var(--calcite-tile-text-color, var(--calcite-color-text-3))}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index)}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}.container.interactive:focus{box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:calc(var(--calcite-z-index) + 1)}.content-container,.row{align-items:flex-start;display:flex}.content-container{flex-direction:column;word-wrap:break-word;word-break:break-word;inline-size:var(--calcite-container-size-content-fluid)}.text-content-container{inline-size:100%;outline-color:transparent;padding:0}.text-content{display:flex;flex-direction:column}.heading{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.description{font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated .icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .selection-icon{position:absolute;inset-inline-start:var(--calcite-internal-tile-spacing);inset-block-start:var(--calcite-internal-tile-spacing);z-index:var(--calcite-z-index)}.large-visual-deprecated .text-content-container{justify-content:center}:host([alignment=center]) .icon{align-self:center}:host([alignment=center]) .text-content-container{justify-content:center}:host([alignment=center]) .text-content{text-align:center}:host([alignment=center]) slot[name=content-bottom]::slotted(*),:host([alignment=center]) slot[name=content-top]::slotted(*){align-self:center}:host([scale=s]){--calcite-internal-tile-spacing: var(--calcite-spacing-sm);max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=s]) .description{font-size:var(--calcite-font-size--3);line-height:.85938rem}:host([scale=m]){--calcite-internal-tile-spacing: var(--calcite-spacing-md);max-inline-size:460px;min-inline-size:140px}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host([scale=m]) .description{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=l]){--calcite-internal-tile-spacing: var(--calcite-spacing-lg);max-inline-size:520px;min-inline-size:160px}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0);line-height:1.375rem}:host([scale=l]) .description{font-size:var(--calcite-font-size--1);line-height:1.20313rem}.content-container--has-content,.row{gap:var(--calcite-internal-tile-spacing)}.content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*){margin-block-end:var(--calcite-internal-tile-spacing)}:host([selection-appearance=border][layout=horizontal]) .container.selected:focus:before,:host([selection-appearance=border][layout=vertical]) .container.selected:focus:before{block-size:100%;box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));content:"";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}:host([selection-appearance=border][layout=horizontal]) .container.selected{box-shadow:inset 0 -4px 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .heading,:host([active]:not([disabled])) .heading{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .description,:host([active]:not([disabled])) .description{color:var(--calcite-tile-text-color, var(--calcite-color-text-2))}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link));z-index:var(--calcite-z-index)}:host([href]:focus:not([disabled])) .icon,:host([href]:hover:not([disabled])) .icon{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:focus:not([disabled])) .heading,:host([href]:hover:not([disabled])) .heading{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:active:not([disabled])) .container{box-shadow:inset 0 0 0 1px var(--calcite-tile-link-color, var(--calcite-color-text-link));outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([embed]) .container{padding:0}:host([selection-mode=none]) .container:hover,:host([selection-mode=none]) .container.selected{outline-color:var(--calcite-tile-border-color, var(--calcite-color-border-2))}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::slotted(*){max-inline-size:100%}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-shadow:var(--calcite-tile-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:inline-block}calcite-link{--calcite-link-text-color: var(--calcite-tile-link-text-color)}.container{background-color:var(--calcite-tile-background-color, var(--calcite-color-foreground-1));block-size:var(--calcite-container-size-content-fluid);border-radius:var(--calcite-tile-corner-radius, var(--calcite-corner-radius));box-sizing:border-box;color:var(--calcite-tile-text-color, var(--calcite-color-text-3));inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));padding:var(--calcite-internal-tile-spacing);position:relative;-webkit-user-select:none;user-select:none}.container .selection-icon{color:var(--calcite-tile-text-color, var(--calcite-color-text-3))}.container ::slotted(calcite-chip){--calcite-icon-color: var(--calcite-tile-text-color, var(--calcite-color-text-3))}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index)}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}.container.interactive:hover .icon,.container.interactive:focus .icon,.container.interactive.selected .icon{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-1))}.container.interactive:hover ::slotted(calcite-chip),.container.interactive:focus ::slotted(calcite-chip),.container.interactive.selected ::slotted(calcite-chip){--calcite-icon-color: var(--calcite-tile-text-color, var(--calcite-color-text-1))}.container.interactive:focus{box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));z-index:calc(var(--calcite-z-index) + 1)}.content-container,.row{align-items:flex-start;display:flex}.content-container{flex-direction:column;word-wrap:break-word;word-break:break-word;inline-size:var(--calcite-container-size-content-fluid)}.text-content-container{inline-size:100%;outline-color:transparent;padding:0}.text-content{display:flex;flex-direction:column}.heading{margin:0;padding:0;color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.description{color:var(--calcite-tile-text-color, var(--calcite-color-text-2));font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated .icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .selection-icon{position:absolute;inset-inline-start:var(--calcite-internal-tile-spacing);inset-block-start:var(--calcite-internal-tile-spacing);z-index:var(--calcite-z-index)}.large-visual-deprecated .text-content-container{justify-content:center}:host([alignment=center]) .icon{align-self:center}:host([alignment=center]) .text-content-container{justify-content:center}:host([alignment=center]) .text-content{text-align:center}:host([alignment=center]) slot[name=content-bottom]::slotted(*),:host([alignment=center]) slot[name=content-top]::slotted(*){align-self:center}:host([scale=s]){--calcite-internal-tile-spacing: var(--calcite-spacing-sm);max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=s]) .description{font-size:var(--calcite-font-size--3);line-height:.85938rem}:host([scale=m]){--calcite-internal-tile-spacing: var(--calcite-spacing-md);max-inline-size:460px;min-inline-size:140px}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host([scale=m]) .description{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=l]){--calcite-internal-tile-spacing: var(--calcite-spacing-lg);max-inline-size:520px;min-inline-size:160px}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0);line-height:1.375rem}:host([scale=l]) .description{font-size:var(--calcite-font-size--1);line-height:1.20313rem}.content-container--has-content,.row{gap:var(--calcite-internal-tile-spacing)}.content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*){margin-block-end:var(--calcite-internal-tile-spacing)}:host([selection-appearance=border][layout=horizontal]) .container.selected:focus:before,:host([selection-appearance=border][layout=vertical]) .container.selected:focus:before{block-size:100%;box-shadow:inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));content:"";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}:host([selection-appearance=highlight]) .container.selected{background-color:var(--calcite-color-surface-highlight)}:host([selection-appearance=border][layout=horizontal]) .container.selected{box-shadow:inset 0 -4px 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .heading,:host([active]:not([disabled])) .heading{color:var(--calcite-tile-heading-text-color, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .description,:host([active]:not([disabled])) .description{color:var(--calcite-tile-text-color, var(--calcite-color-text-2))}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link));z-index:var(--calcite-z-index)}:host([href]:focus:not([disabled])) .icon,:host([href]:hover:not([disabled])) .icon{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:focus:not([disabled])) .heading,:host([href]:hover:not([disabled])) .heading{color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([href]:active:not([disabled])) .container{box-shadow:inset 0 0 0 1px var(--calcite-tile-link-color, var(--calcite-color-text-link));outline-color:var(--calcite-tile-link-color, var(--calcite-color-text-link))}:host([embed]) .container{padding:0}:host([selection-mode=none]) .container:hover,:host([selection-mode=none]) .container.selected{outline-color:var(--calcite-tile-border-color, var(--calcite-color-border-2))}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-tile-accent-color-press, var(--calcite-color-brand))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}::slotted(*){max-inline-size:100%}`;
 class Tile extends LitElement {
   constructor() {
     super();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.hasContentBottom = false;
     this.hasContentTop = false;
     this.active = false;
@@ -54,7 +59,7 @@ class Tile extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], description: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], embed: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
+    this.properties = { hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], description: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], embed: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], href: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -62,9 +67,6 @@ class Tile extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.interactive ? this.containerEl : void 0, options);
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   clickHandler() {
     if (this.interactive) {
       this.setFocus();
@@ -112,7 +114,7 @@ class Tile extends LitElement {
     return;
   }
   renderTile() {
-    const { description, disabled, hasContentBottom, hasContentTop, heading, icon, iconFlipRtl, interactive, selectionMode } = this;
+    const { description, disabled, hasContentBottom, hasContentTop, heading, headingLevel, icon, iconFlipRtl, interactive, selectionMode } = this;
     const isLargeVisual = heading && icon && !description;
     const disableInteraction = Boolean(this.href) || !interactive;
     const role = selectionMode === "multiple" && interactive ? "checkbox" : selectionMode !== "none" && interactive ? "radio" : interactive ? "button" : void 0;
@@ -129,11 +131,11 @@ class Tile extends LitElement {
       [CSS.contentContainer]: true,
       [CSS.contentContainerHasContent]: hasContent,
       [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom
-    })}><slot name=${SLOTS.contentTop} @slotchange=${this.handleSlotChange}></slot>${icon && html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${iconFlipRtl} .icon=${icon} scale=l></calcite-icon>` || ""}<div class=${safeClassMap({ [CSS.textContentContainer]: true, [CSS.row]: true })}><div class=${safeClassMap(CSS.textContent)}>${heading && html`<div class=${safeClassMap(CSS.heading)}>${heading}</div>` || ""}${description && html`<div class=${safeClassMap(CSS.description)}>${description}</div>` || ""}</div></div><slot name=${SLOTS.contentBottom} @slotchange=${this.handleSlotChange}></slot></div></div>`;
+    })}><slot name=${SLOTS.contentTop} @slotchange=${this.handleSlotChange}></slot>${icon && html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${iconFlipRtl} .icon=${icon} scale=l></calcite-icon>` || ""}<div class=${safeClassMap({ [CSS.textContentContainer]: true, [CSS.row]: true })}><div class=${safeClassMap(CSS.textContent)}>${heading && Heading({ class: CSS.heading, level: headingLevel, children: heading }) || ""}${description && html`<div class=${safeClassMap(CSS.description)}>${description}</div>` || ""}</div></div><slot name=${SLOTS.contentBottom} @slotchange=${this.handleSlotChange}></slot></div></div>`;
   }
   render() {
     const { disabled } = this;
-    return InteractiveContainer({ disabled, children: this.href ? html`<calcite-link .disabled=${disabled} .href=${this.href}>${this.renderTile()}</calcite-link>` : this.renderTile() });
+    return this.interactiveContainer({ disabled, children: this.href ? html`<calcite-link .disabled=${disabled} .href=${this.href}>${this.renderTile()}</calcite-link>` : this.renderTile() });
   }
 }
 customElement("calcite-tile", Tile);

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

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

package/dist/components/calcite-tile-group/customElement.d.ts

@@ -1,67 +1,68 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from '../interfaces';
-import { SelectableGroupComponent } from '../../utils/selectableComponent';
-import { Tile } from '../calcite-tile/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../interfaces.js";
+import type { Tile } from "../calcite-tile/customElement.js";
 
 /** @slot  - A slot for adding `calcite-tile` elements. */
-export declare class TileGroup extends LitElement {
-    /**
-     * Specifies the alignment of each `calcite-tile`'s content.
-     *
-     * @default "start"
-     */
-    alignment: Exclude<Alignment, "end">;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Defines the layout of the component.
-     *
-     * Use `"horizontal"` for rows, and `"vertical"` for a single column.
-     *
-     * @default "horizontal"
-     */
-    layout: Extract<Layout, "horizontal" | "vertical">;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteTileElement[];
-    /**
-     * Specifies the selection appearance, where:
-     *
-     * - `"icon"` (displays a checkmark or dot), or
-     * - `"border"` (displays a border).
-     *
-     * @default "icon"
-     */
-    selectionAppearance: Extract<"icon" | "border", SelectionAppearance>;
-    /**
-     * Specifies the selection mode, where:
-     *
-     * - `"multiple"` (allows any number of selected items),
-     * - `"single"` (allows only one selected item),
-     * - `"single-persist"` (allows only one selected item and prevents de-selection),
-     * - `"none"` (allows no selected items).
-     *
-     * @default "none"
-     */
-    selectionMode: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>;
-    /** Fires when the component's selection changes. */
-    readonly calciteTileGroupSelect: TargetedEvent<this, void>;
-}
+export abstract class TileGroup extends LitElement {
+  /**
+   * Specifies the alignment of each `calcite-tile`'s content.
+   *
+   * @default "start"
+   */
+  accessor alignment: Exclude<Alignment, "end">;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * Defines the layout of the component.
+   *
+   * Use `"horizontal"` for rows, and `"vertical"` for a single column.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: Extract<Layout, "horizontal" | "vertical">;
+  /**
+   * Specifies the component's size.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the component's selected items. */
+  get selectedItems(): Tile[];
+  /**
+   * Specifies the selection appearance, where:
+   *
+   * - `"icon"` (displays a checkmark or dot),
+   * - `"highlight"` (changes the background color), and
+   * - `"border"` (displays a border). [Deprecated] The `"border"` value is deprecated in v5.0.0, removal target v6.0.0 - Use `"highlight"` instead.
+   *
+   * @default "icon"
+   */
+  accessor selectionAppearance: Extract<"icon" | "highlight" | "border", SelectionAppearance>;
+  /**
+   * Specifies the selection mode, where:
+   *
+   * - `"multiple"` (allows any number of selected items),
+   * - `"single"` (allows only one selected item),
+   * - `"single-persist"` (allows only one selected item and prevents de-selection), and
+   * - `"none"` (allows no selected items).
+   *
+   * @default "none"
+   */
+  accessor selectionMode: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>;
+  /** Fires when the component's selection changes. */
+  readonly calciteTileGroupSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTileGroupSelect: TileGroup["calciteTileGroupSelect"]["detail"];
+  };
+}

package/dist/components/calcite-tile-group/customElement.js

@@ -1,19 +1,23 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { d as focusElementInGroup } from "../../chunks/dom.js";
+import { f as focusElementInGroup } from "../../chunks/dom.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-sizing:border-box;display:inline-block}:host ::slotted(calcite-tile){margin-block-end:var(--calcite-spacing-px);margin-inline-end:var(--calcite-spacing-px)}.container{display:grid;grid-auto-rows:minmax(auto,1fr);grid-auto-flow:column}:host([scale=s]) .container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}:host([scale=m]) .container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}:host([scale=l]) .container{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}:host([layout=vertical]) .container{display:flex;flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-sizing:border-box;display:inline-block}:host ::slotted(calcite-tile){margin-block-end:var(--calcite-spacing-px);margin-inline-end:var(--calcite-spacing-px)}.container{display:grid;grid-auto-rows:minmax(auto,1fr);grid-auto-flow:column}:host([scale=s]) .container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}:host([scale=m]) .container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}:host([scale=l]) .container{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}:host([layout=vertical]) .container{display:flex;flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class TileGroup extends LitElement {
   constructor() {
     super();
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => this.updateTiles());
+    this.interactiveContainer = useInteractive(this);
     this.alignment = "start";
     this.disabled = false;
     this.layout = "horizontal";
@@ -41,9 +45,6 @@ class TileGroup extends LitElement {
       this.updateTiles();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.updateSelectedItems();
   }
@@ -135,7 +136,7 @@ class TileGroup extends LitElement {
   }
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.updateTiles} ${ref(this.setSlotEl)}></slot></div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.updateTiles} ${ref(this.setSlotEl)}></slot></div>` });
   }
 }
 customElement("calcite-tile-group", TileGroup);

package/dist/components/calcite-time-picker/customElement.d.ts

@@ -1,82 +1,78 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
-import { NumberingSystem } from '../../utils/locale';
-import { HourFormat } from '../../utils/time';
-import { TimeComponent, useTime } from '../../controllers/useTime';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { HourFormat } from "../../utils/time.js";
+import type { useTime } from "../../controllers/useTime.js";
 
-export declare class TimePicker extends LitElement {
-    /** @internal */
-    time: ReturnType<typeof useTime>;
-    /**
-     * Specifies the component's hour format, where:
-     *
-     * `"user"` displays the user's locale format,
-     * `"12"` displays a 12-hour format, and
-     * `"24"` displays a 24-hour format.
-     *
-     * @default "user"
-     */
-    hourFormat: HourFormat;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies the granularity the `value` must adhere to (in seconds).
-     *
-     * @default 60
-     */
-    step: number;
-    /** The component's value in UTC (always 24-hour format). */
-    value: string;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when a user changes the component's time */
-    readonly calciteTimePickerChange: TargetedEvent<this, void>;
-    private messages: Partial<{
-        fractionalSecond: string;
-        fractionalSecondDown: string;
-        fractionalSecondUp: string;
-        hour: string;
-        hourDown: string;
-        hourUp: string;
-        meridiem: string;
-        meridiemDown: string;
-        meridiemUp: string;
-        minute: string;
-        minuteDown: string;
-        minuteUp: string;
-        second: string;
-        secondDown: string;
-        secondUp: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        fractionalSecond: string;
-        fractionalSecondDown: string;
-        fractionalSecondUp: string;
-        hour: string;
-        hourDown: string;
-        hourUp: string;
-        meridiem: string;
-        meridiemDown: string;
-        meridiemUp: string;
-        minute: string;
-        minuteDown: string;
-        minuteUp: string;
-        second: string;
-        secondDown: string;
-        secondUp: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-time-picker-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-time-picker-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-time-picker-corner-radius] - Specifies the component's border radius.
+ * @cssproperty [--calcite-time-picker-button-background-color-hover] - Specifies the button's background color when hovered or focused.
+ * @cssproperty [--calcite-time-picker-button-background-color-press] - Specifies the button's background color when active.
+ * @cssproperty [--calcite-time-picker-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-time-picker-icon-color] - Specifies the component's icon color.
+ * @cssproperty [--calcite-time-picker-input-border-color-press] - Specifies the input's border color when active.
+ * @cssproperty [--calcite-time-picker-input-border-color-hover] - Specifies the input's border color when hovered.
+ */
+export abstract class TimePicker extends LitElement {
+  /**
+   * Specifies the component's hour format, where:
+   *
+   * `"user"` displays the user's locale format,
+   * `"12"` displays a 12-hour format, and
+   * `"24"` displays a 24-hour format.
+   *
+   * @default "user"
+   */
+  accessor hourFormat: HourFormat;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      fractionalSecond?: string;
+      fractionalSecondDown?: string;
+      fractionalSecondUp?: string;
+      hour?: string;
+      hourDown?: string;
+      hourUp?: string;
+      meridiem?: string;
+      meridiemDown?: string;
+      meridiemUp?: string;
+      minute?: string;
+      minuteDown?: string;
+      minuteUp?: string;
+      second?: string;
+      secondDown?: string;
+      secondUp?: string;
+  };
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * Specifies the component's size.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the granularity the `value` must adhere to (in seconds).
+   *
+   * @default 60
+   */
+  accessor step: number;
+  /** @internal */
+  accessor time: ReturnType<typeof useTime>;
+  /** The component's value in UTC (always 24-hour format). */
+  accessor value: string;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when a user changes the component's time */
+  readonly calciteTimePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTimePickerChange: TimePicker["calciteTimePickerChange"]["detail"];
+  };
+}