@geoscene/calcite-components 3.3.3

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

@@ -0,0 +1,153 @@
+/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
+
+v3.3.3 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { LitElement, createEvent, safeClassMap } from "@geoscene/lumina";
+import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+const CSS = {
+  container: "container",
+  contentContainer: "content-container",
+  contentContainerHasContent: "content-container--has-content",
+  contentContainerHasOnlyContentTopAndBottom: "content-container--has-only-content-top-and-bottom",
+  textContentContainer: "text-content-container",
+  description: "description",
+  heading: "heading",
+  icon: "icon",
+  interactive: "interactive",
+  largeVisualDeprecated: "large-visual-deprecated",
+  row: "row",
+  selected: "selected",
+  selectionIcon: "selection-icon",
+  textContent: "text-content"
+};
+const ICONS = {
+  selectedMultiple: "check-square-f",
+  selectedSingle: "circle-f",
+  unselectedMultiple: "square",
+  unselectedSingle: "circle"
+};
+const SLOTS = {
+  contentBottom: "content-bottom",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  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{text-align:center}:host([alignment=center]) slot[name=content-bottom]::slotted(*),:host([alignment=center]) slot[name=content-top]::slotted(*),:host([alignment=center]) slot[name=content-start]::slotted(*),:host([alignment=center]) slot[name=content-end]::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%}`;
+class Tile extends LitElement {
+  constructor() {
+    super();
+    this.focusSetter = useSetFocus()(this);
+    this.hasContentBottom = false;
+    this.hasContentEnd = false;
+    this.hasContentStart = false;
+    this.hasContentTop = false;
+    this.active = false;
+    this.alignment = "start";
+    this.disabled = false;
+    this.embed = false;
+    this.iconFlipRtl = false;
+    this.interactive = false;
+    this.layout = "horizontal";
+    this.scale = "m";
+    this.selected = false;
+    this.selectionAppearance = "icon";
+    this.selectionMode = "none";
+    this.calciteInternalTileKeyEvent = createEvent({ cancelable: false });
+    this.calciteTileSelect = createEvent();
+    this.listen("keydown", this.keyDownHandler);
+  }
+  static {
+    this.properties = { hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [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, {}, { 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;
+  }
+  async setFocus(options) {
+    return this.focusSetter(() => {
+      if (this.interactive) {
+        return this.containerEl;
+      }
+    }, options);
+  }
+  updated() {
+    updateHostInteraction(this);
+  }
+  clickHandler() {
+    if (this.interactive) {
+      this.setFocus();
+      this.handleSelectEvent();
+    }
+  }
+  handleSelectEvent() {
+    if (this.disabled || !this.interactive || this.selectionMode === "single-persist" && this.selected === true) {
+      return;
+    }
+    this.calciteTileSelect.emit();
+  }
+  handleSlotChange(event) {
+    const slotName = event.target.dataset.name;
+    this[`has${slotName}`] = slotChangeHasAssignedElement(event);
+  }
+  setContainerEl(el) {
+    this.containerEl = el;
+  }
+  keyDownHandler(event) {
+    if (event.target === this.el) {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          this.handleSelectEvent();
+          event.preventDefault();
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "Home":
+        case "End":
+          this.calciteInternalTileKeyEvent.emit(event);
+          event.preventDefault();
+          break;
+      }
+    }
+  }
+  renderSelectionIcon() {
+    const { selected, selectionAppearance, selectionMode } = this;
+    if (selectionAppearance === "icon" && selectionMode !== "none") {
+      return html`<calcite-icon class=${safeClassMap(CSS.selectionIcon)} .icon=${selected ? selectionMode === "multiple" ? ICONS.selectedMultiple : ICONS.selectedSingle : selectionMode === "multiple" ? ICONS.unselectedMultiple : ICONS.unselectedSingle} scale=s></calcite-icon>`;
+    }
+    return;
+  }
+  renderTile() {
+    const { description, disabled, hasContentBottom, hasContentEnd, hasContentStart, hasContentTop, heading, 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;
+    const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);
+    const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;
+    return html`<div .ariaChecked=${selectionMode !== "none" && interactive ? this.selected : void 0} .ariaDisabled=${disableInteraction ? disabled : void 0} .ariaLabel=${role && this.label} class=${safeClassMap({
+      [CSS.container]: true,
+      [CSS.interactive]: interactive,
+      // [Deprecated] Use the content-top slot for rendering icon with alignment="center" instead
+      [CSS.largeVisualDeprecated]: isLargeVisual,
+      [CSS.row]: true,
+      [CSS.selected]: this.selected
+    })} @click=${this.clickHandler} .role=${role} tabindex=${disableInteraction ? void 0 : 0} ${ref(this.setContainerEl)}>${this.renderSelectionIcon()}<div class=${safeClassMap({
+      [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 })}><slot name=${SLOTS.contentStart} @slotchange=${this.handleSlotChange}></slot><div class=${safeClassMap(CSS.textContent)}>${heading && html`<div class=${safeClassMap(CSS.heading)}>${heading}</div>` || ""}${description && html`<div class=${safeClassMap(CSS.description)}>${description}</div>` || ""}</div><slot name=${SLOTS.contentEnd} @slotchange=${this.handleSlotChange}></slot></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() });
+  }
+}
+customElement("calcite-tile", Tile);
+export {
+  Tile
+};

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

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

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

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

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

@@ -0,0 +1,28 @@
+export declare const CSS: {
+    container: string;
+    contentContainer: string;
+    contentContainerHasContent: string;
+    contentContainerHasOnlyContentTopAndBottom: string;
+    textContentContainer: string;
+    description: string;
+    heading: string;
+    icon: string;
+    interactive: string;
+    largeVisualDeprecated: string;
+    row: string;
+    selected: string;
+    selectionIcon: string;
+    textContent: string;
+};
+export declare const ICONS: {
+    readonly selectedMultiple: "check-square-f";
+    readonly selectedSingle: "circle-f";
+    readonly unselectedMultiple: "square";
+    readonly unselectedSingle: "circle";
+};
+export declare const SLOTS: {
+    contentBottom: string;
+    contentEnd: string;
+    contentStart: string;
+    contentTop: string;
+};

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

@@ -0,0 +1,67 @@
+/// <reference path="../../index.d.ts" />
+import { PropertyValues } from 'lit';
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@geoscene/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';
+
+/** @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: 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>;
+}

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

@@ -0,0 +1,147 @@
+/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
+
+v3.3.3 */
+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 "@geoscene/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";
+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)}: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.alignment = "start";
+    this.disabled = false;
+    this.layout = "horizontal";
+    this.scale = "m";
+    this.selectedItems = [];
+    this.selectionAppearance = "icon";
+    this.selectionMode = "none";
+    this.calciteTileGroupSelect = createEvent({ cancelable: false });
+    this.listen("calciteInternalTileKeyEvent", this.calciteInternalTileKeyEventListener);
+    this.listen("calciteTileSelect", this.calciteTileSelectHandler);
+  }
+  static {
+    this.properties = { alignment: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
+  }
+  static {
+    this.styles = styles;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateTiles();
+  }
+  willUpdate(changes) {
+    if (changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || changes.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "icon")) {
+      this.updateTiles();
+    }
+  }
+  updated() {
+    updateHostInteraction(this);
+  }
+  loaded() {
+    this.updateSelectedItems();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+  }
+  getSlottedTiles() {
+    return this.slotEl?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-tile"));
+  }
+  selectItem(item) {
+    if (!item) {
+      return;
+    }
+    this.items?.forEach((el) => {
+      const matchingEl = item === el;
+      switch (this.selectionMode) {
+        case "multiple":
+          if (matchingEl) {
+            el.selected = !el.selected;
+          }
+          break;
+        case "single":
+          el.selected = matchingEl && !el.selected;
+          break;
+        case "single-persist":
+          el.selected = !!matchingEl;
+          break;
+      }
+    });
+    this.updateSelectedItems();
+    this.calciteTileGroupSelect.emit();
+  }
+  setSlotEl(el) {
+    this.slotEl = el;
+  }
+  updateSelectedItems() {
+    const selectedItems = this.items?.filter((el) => el.selected);
+    if ((this.selectionMode === "single" || this.selectionMode === "single-persist") && selectedItems?.length > 1) {
+      this.selectedItems = [selectedItems.pop()];
+      this.items?.forEach((el) => {
+        if (this.selectedItems.indexOf(el) === -1) {
+          el.selected = false;
+        }
+      });
+    } else {
+      this.selectedItems = selectedItems ?? [];
+    }
+  }
+  updateTiles() {
+    this.items = this.getSlottedTiles();
+    this.items?.forEach((el) => {
+      el.alignment = this.alignment;
+      el.interactive = true;
+      el.layout = this.layout;
+      el.scale = this.scale;
+      el.selectionAppearance = this.selectionAppearance;
+      el.selectionMode = this.selectionMode;
+    });
+    this.updateSelectedItems();
+  }
+  calciteInternalTileKeyEventListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const interactiveItems = this.items?.filter((el) => !el.disabled);
+      switch (event.detail.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          focusElementInGroup(interactiveItems, event.detail.target, "next", true, false);
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          focusElementInGroup(interactiveItems, event.detail.target, "previous", true, false);
+          break;
+        case "Home":
+          focusElementInGroup(interactiveItems, event.detail.target, "first", true, false);
+          break;
+        case "End":
+          focusElementInGroup(interactiveItems, event.detail.target, "last", true, false);
+          break;
+      }
+    }
+  }
+  calciteTileSelectHandler(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.selectItem(event.target);
+    }
+  }
+  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>` });
+  }
+}
+customElement("calcite-tile-group", TileGroup);
+export {
+  TileGroup
+};

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

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1,3 @@
+export declare const CSS: {
+    container: string;
+};

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

@@ -0,0 +1,85 @@
+/// <reference path="../../index.d.ts" />
+import { PropertyValues } from 'lit';
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@geoscene/lumina';
+import { InteractiveComponent } from '../../utils/interactive';
+import { Alignment, Width } from '../interfaces';
+import { IconNameOrString } from '../calcite-icon/interfaces';
+import { TileSelectType } from './interfaces';
+
+/**
+ * @deprecated Use the `calcite-tile` component instead.
+ * @slot  - A slot for adding custom content.
+ */
+export declare class TileSelect extends LitElement {
+    /**
+     * When `true`, the component is checked.
+     *
+     * @default false
+     */
+    checked: boolean;
+    /** 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 header text, which displays between the icon and description. */
+    heading: string;
+    /** Specifies an icon to display. */
+    icon: IconNameOrString;
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
+    iconFlipRtl: boolean;
+    /**
+     * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component.
+     *
+     * @default "start"
+     */
+    inputAlignment: Extract<"end" | "start", Alignment>;
+    /**
+     * When `true`, displays an interactive input based on the `type` property.
+     *
+     * @default false
+     */
+    inputEnabled: boolean;
+    /** Specifies the name of the component on form submission. */
+    name: any;
+    /**
+     * Specifies the selection mode of the component, where:
+     *
+     * `"radio"` is for single selection, and
+     *
+     * `"checkbox"` is for multiple selections.
+     *
+     * @default "radio"
+     */
+    type: TileSelectType;
+    /** The component's value. */
+    value: any;
+    /**
+     * Specifies the width of the component.
+     *
+     * @default "auto"
+     */
+    width: Extract<"auto" | "full", Width>;
+    /**
+     * 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>;
+    /**
+     * Emits a custom change event.
+     *
+     * For checkboxes it emits when checked or unchecked.
+     *
+     * For radios it only emits when checked.
+     */
+    readonly calciteTileSelectChange: TargetedEvent<this, void>;
+}