@esri/calcite-components 2.8.1-next.5 → 2.8.1

package/dist/components/calcite-text-area.js.map

@@ -1 +1 @@
-{"file":"calcite-text-area.js","mappings":"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","names":[],"sources":["src/components/text-area/resources.ts","src/components/text-area/text-area.scss?tag=calcite-text-area&encapsulation=shadow","src/components/text-area/text-area.tsx"],"sourcesContent":["export const CSS = {\n  assistiveText: \"assistive-text\",\n  characterLimit: \"character-limit\",\n  content: \"content\",\n  container: \"container\",\n  footer: \"footer\",\n  resizeDisabled: \"resize--disabled\",\n  resizeDisabledX: \"resize--disabled-x\",\n  resizeDisabledY: \"resize--disabled-y\",\n  characterOverLimit: \"character--over-limit\",\n  readOnly: \"readonly\",\n  textAreaInvalid: \"text-area--invalid\",\n  footerSlotted: \"footer--slotted\",\n  borderColor: \"border--color\",\n  hide: \"hide\",\n  blockSizeFull: \"block-size--full\",\n  footerEndSlotOnly: \"footer--end-only\",\n};\n\nexport const SLOTS = {\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n};\n\nexport const RESIZE_TIMEOUT = 100;\n",":host {\n  @apply inline-block\n  relative\n  w-full\n  h-full;\n}\n\ntextarea {\n  @apply font-sans\n    text-color-1\n    relative\n    block\n    bg-foreground-1\n    box-border\n    border-color-input\n    border\n    w-full\n    m-0;\n  min-inline-size: theme(\"spacing.48\");\n  border-block-end: 1px solid var(--calcite-color-border-3);\n  @media screen and (max-width: 480px) {\n    @apply resize-none;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &.text-area--invalid {\n    @apply border-color-danger\n    border\n    border-solid\n    border-b;\n    &:focus {\n      @apply focus-inset-danger;\n    }\n  }\n  &.footer--slotted {\n    min-inline-size: theme(\"spacing.72\");\n  }\n}\n\n.footer {\n  @apply flex\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  border-solid\n  border-t-0\n  items-center;\n}\n\n.character-limit {\n  @apply flex\n  justify-end\n  text-color-2\n  items-center\n  font-normal\n  whitespace-nowrap;\n}\n\n.character--over-limit {\n  @apply font-bold\n  text-danger;\n}\n\n:host([resize=\"none\"]) textarea {\n  @apply resize-none;\n}\n\n:host([resize=\"horizontal\"]) textarea {\n  @apply resize-x;\n}\n\n:host([resize=\"vertical\"]) textarea {\n  @apply resize-y;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2;\n  .footer {\n    @apply py-1\n    px-2;\n    min-block-size: 1.75rem;\n  }\n  textarea {\n    @apply py-1\n    px-2;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n2\n    pl-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea {\n    @apply py-2\n    px-3;\n  }\n  .footer {\n    @apply py-2\n    px-3;\n    min-block-size: 2.25rem;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n1\n    pl-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0;\n  textarea {\n    @apply py-3\n    px-4;\n  }\n  .footer {\n    @apply py-3\n    px-4;\n    min-block-size: 2.75rem;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-0\n    pl-4;\n  }\n}\n\n:host([status=\"invalid\"]) {\n  textarea {\n    @apply border-color-danger;\n  }\n  textarea:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.readonly {\n  @apply bg-background font-medium;\n}\n\n:host([disabled]) {\n  textarea,\n  footer {\n    @apply opacity-50;\n  }\n}\n\n.border--color {\n  @apply border-b border-color-input;\n  &:focus {\n    @apply border-b-2;\n  }\n}\n\ntextarea.block-size--full {\n  @apply h-full;\n}\n\n.content,\n.hide {\n  @apply hidden;\n}\n\n.container {\n  @apply flex\n  justify-between\n  w-full;\n}\n\n.footer--end-only {\n  @apply justify-end;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  VNode,\n  Watch,\n  Method,\n  Host,\n  State,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { throttle } from \"lodash-es\";\nimport {\n  connectForm,\n  disconnectForm,\n  FormComponent,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  componentLoaded,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { guid } from \"../../utils/guid\";\nimport { Status } from \"../interfaces\";\nimport { Validation } from \"../functional/Validation\";\nimport { syncHiddenFormInput, TextualInputComponent } from \"../input/common/input\";\nimport { CharacterLengthObj } from \"./interfaces\";\nimport { TextAreaMessages } from \"./assets/text-area/t9n\";\nimport { CSS, SLOTS, RESIZE_TIMEOUT } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n * @slot footer-start - A slot for adding content to the start of the component's footer.\n * @slot footer-end - A slot for adding content to the end of the component's footer.\n */\n\n@Component({\n  tag: \"calcite-text-area\",\n  styleUrl: \"text-area.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TextArea\n  implements\n    FormComponent,\n    LabelableComponent,\n    LocalizedComponent,\n    LoadableComponent,\n    T9nComponent,\n    InteractiveComponent,\n    Omit<TextualInputComponent, \"pattern\">\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"autofocus\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the component's number of columns.\n   *\n   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)\n   */\n  @Prop({ reflect: true }) columns: number;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   *\n   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Specifies the minimum number of characters allowed.\n   *\n   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)\n   */\n  @Prop({ reflect: true }) minLength: number;\n\n  /**\n   * Specifies the maximum number of characters allowed.\n   *\n   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)\n   */\n  @Prop({ reflect: true }) maxLength: number;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TextAreaMessages;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /**\n   * Specifies the name of the component.\n   *\n   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /**\n   * Specifies the placeholder text for the component.\n   *\n   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * When `true`, the component's `value` can be read, but cannot be modified.\n   *\n   * @readonly\n   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies if the component is resizable. */\n  @Prop({ reflect: true }) resize: \"both\" | \"horizontal\" | \"vertical\" | \"none\" = \"both\";\n\n  /**\n   * Specifies the component's number of rows.\n   *\n   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)\n   */\n  @Prop({ reflect: true }) rows: number;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: \"l\" | \"m\" | \"s\" = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Specifies the wrapping mechanism for the text.\n   *\n   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)\n   */\n  @Prop({ reflect: true }) wrap: \"soft\" | \"hard\" = \"soft\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TextAreaMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Emitters\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Fires each time a new `value` is typed.\n   */\n  @Event() calciteTextAreaInput: EventEmitter<void>;\n\n  /**\n   * Fires each time a new `value` is typed and committed.\n   */\n  @Event() calciteTextAreaChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n    this.setTextAreaHeight();\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <textarea\n            aria-describedby={this.guid}\n            aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}\n            aria-label={getLabelText(this)}\n            autofocus={this.el.autofocus}\n            class={{\n              [CSS.readOnly]: this.readOnly,\n              [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),\n              [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,\n              [CSS.blockSizeFull]: !hasFooter,\n              [CSS.borderColor]: !hasFooter,\n            }}\n            cols={this.columns}\n            disabled={this.disabled}\n            name={this.name}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n            readOnly={this.readOnly}\n            required={this.required}\n            rows={this.rows}\n            value={this.value}\n            wrap={this.wrap}\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.setTextAreaEl}\n          />\n          <span class={{ [CSS.content]: true }}>\n            <slot onSlotchange={this.contentSlotChangeHandler} />\n          </span>\n          <footer\n            class={{\n              [CSS.footer]: true,\n              [CSS.readOnly]: this.readOnly,\n              [CSS.hide]: !hasFooter,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n            ref={(el) => (this.footerEl = el as HTMLElement)}\n          >\n            <div\n              class={{\n                [CSS.container]: true,\n                [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,\n              }}\n            >\n              <slot\n                name={SLOTS.footerStart}\n                onSlotchange={(event) =>\n                  (this.startSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n              <slot\n                name={SLOTS.footerEnd}\n                onSlotchange={(event) =>\n                  (this.endSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n            </div>\n            {this.renderCharacterLimit()}\n          </footer>\n          <HiddenFormInputSlot component={this} />\n          {this.isCharacterLimitExceeded() && (\n            <span aria-hidden={true} aria-live=\"polite\" class={CSS.assistiveText} id={this.guid}>\n              {this.replacePlaceHoldersInMessages()}\n            </span>\n          )}\n          {this.validationMessage && this.status === \"invalid\" ? (\n            <Validation\n              icon={this.validationIcon}\n              message={this.validationMessage}\n              scale={this.scale}\n              status={this.status}\n            />\n          ) : null}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.textAreaEl.focus();\n  }\n\n  /** Selects the text of the component's `value`. */\n  @Method()\n  async selectText(): Promise<void> {\n    await componentLoaded(this);\n    this.textAreaEl.select();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTextAreaElement;\n\n  defaultValue: TextArea[\"value\"];\n\n  footerEl: HTMLElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  textAreaEl: HTMLTextAreaElement;\n\n  @State() defaultMessages: TextAreaMessages;\n\n  @State() endSlotHasElements: boolean;\n\n  @State() startSlotHasElements: boolean;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  private guid = guid();\n\n  private localizedCharacterLengthObj: CharacterLengthObj;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  handleInput = (event: InputEvent): void => {\n    this.value = event.target[\"value\"];\n    this.calciteTextAreaInput.emit();\n  };\n\n  handleChange = (): void => {\n    this.calciteTextAreaChange.emit();\n  };\n\n  contentSlotChangeHandler = (): void => {\n    if (!this.value) {\n      const nodes = this.el.childNodes;\n      nodes.forEach((el) => {\n        if (el.nodeName === \"#text\") {\n          this.value = el.nodeValue.trim();\n        }\n      });\n    }\n  };\n\n  renderCharacterLimit = (): VNode | null => {\n    if (this.maxLength) {\n      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();\n      return (\n        <span class={CSS.characterLimit}>\n          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>\n            {this.localizedCharacterLengthObj.currentLength}\n          </span>\n          {\"/\"}\n          {this.localizedCharacterLengthObj.maxLength}\n        </span>\n      );\n    }\n    return null;\n  };\n\n  getLocalizedCharacterLength(): CharacterLengthObj {\n    const currentLength = this.value ? this.value.length.toString() : \"0\";\n    const maxLength = this.maxLength.toString();\n    if (this.numberingSystem === \"latn\") {\n      return { currentLength, maxLength };\n    }\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"never\",\n      useGrouping: this.groupSeparator,\n    };\n    return {\n      currentLength: numberStringFormatter.localize(currentLength),\n      maxLength: numberStringFormatter.localize(maxLength),\n    };\n  }\n\n  resizeObserver = createObserver(\"resize\", async () => {\n    await componentLoaded(this);\n    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =\n      this.getHeightAndWidthOfElements();\n    if (footerWidth > 0 && footerWidth !== textAreaWidth) {\n      this.footerEl.style.width = `${textAreaWidth}px`;\n    }\n    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {\n      this.setHeightAndWidthToAuto();\n    }\n  });\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.setCustomValidity(\"\");\n    if (this.isCharacterLimitExceeded()) {\n      input.setCustomValidity(this.replacePlaceHoldersInMessages());\n    }\n\n    syncHiddenFormInput(\"textarea\", this, input);\n  }\n\n  setTextAreaEl = (el: HTMLTextAreaElement): void => {\n    this.textAreaEl = el;\n    this.resizeObserver.observe(el);\n  };\n\n  setTextAreaHeight(): void {\n    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();\n    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {\n      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;\n    }\n  }\n\n  getHeightAndWidthOfElements(): {\n    textAreaHeight: number;\n    textAreaWidth: number;\n    elHeight: number;\n    elWidth: number;\n    footerHeight: number;\n    footerWidth: number;\n  } {\n    const { height: textAreaHeight, width: textAreaWidth } =\n      this.textAreaEl.getBoundingClientRect();\n    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();\n    const { height: footerHeight, width: footerWidth } = this.footerEl.getBoundingClientRect();\n\n    return {\n      textAreaHeight,\n      textAreaWidth,\n      elHeight,\n      elWidth,\n      footerHeight,\n      footerWidth,\n    };\n  }\n\n  private replacePlaceHoldersInMessages(): string {\n    return this.messages.tooLong\n      .replace(\"{maxLength}\", this.localizedCharacterLengthObj.maxLength)\n      .replace(\"{currentLength}\", this.localizedCharacterLengthObj.currentLength);\n  }\n\n  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.\n  // throttle is used to avoid flashing of textarea when user resizes.\n  private setHeightAndWidthToAuto = throttle(\n    (): void => {\n      if (this.resize === \"vertical\" || this.resize === \"both\") {\n        this.el.style.height = \"auto\";\n      }\n      if (this.resize === \"horizontal\" || this.resize === \"both\") {\n        this.el.style.width = \"auto\";\n      }\n    },\n    RESIZE_TIMEOUT,\n    { leading: false },\n  );\n\n  private isCharacterLimitExceeded(): boolean {\n    return this.value?.length > this.maxLength;\n  }\n}\n"],"version":3}
+{"file":"calcite-text-area.js","mappings":"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","names":[],"sources":["src/components/text-area/resources.ts","src/components/text-area/text-area.scss?tag=calcite-text-area&encapsulation=shadow","src/components/text-area/text-area.tsx"],"sourcesContent":["export const CSS = {\n  assistiveText: \"assistive-text\",\n  characterLimit: \"character-limit\",\n  content: \"content\",\n  container: \"container\",\n  footer: \"footer\",\n  resizeDisabled: \"resize--disabled\",\n  resizeDisabledX: \"resize--disabled-x\",\n  resizeDisabledY: \"resize--disabled-y\",\n  characterOverLimit: \"character--over-limit\",\n  readOnly: \"readonly\",\n  textAreaInvalid: \"text-area--invalid\",\n  footerSlotted: \"footer--slotted\",\n  borderColor: \"border--color\",\n  hide: \"hide\",\n  blockSizeFull: \"block-size--full\",\n  footerEndSlotOnly: \"footer--end-only\",\n};\n\nexport const SLOTS = {\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n};\n\nexport const RESIZE_TIMEOUT = 100;\n",":host {\n  @apply inline-block\n  relative\n  w-full\n  h-full;\n}\n\ntextarea {\n  @apply font-sans\n    text-color-1\n    relative\n    block\n    bg-foreground-1\n    box-border\n    border-color-input\n    border\n    w-full\n    m-0;\n  min-inline-size: theme(\"spacing.48\");\n  border-block-end: 1px solid var(--calcite-color-border-3);\n  @media screen and (max-width: 480px) {\n    @apply resize-none;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &.text-area--invalid {\n    @apply border-color-danger\n    border\n    border-solid\n    border-b;\n    &:focus {\n      @apply focus-inset-danger;\n    }\n  }\n  &.footer--slotted {\n    min-inline-size: theme(\"spacing.72\");\n  }\n}\n\n.footer {\n  @apply flex\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  border-solid\n  border-t-0\n  items-center;\n}\n\n.character-limit {\n  @apply flex\n  justify-end\n  text-color-2\n  items-center\n  font-normal\n  whitespace-nowrap;\n}\n\n.character--over-limit {\n  @apply font-bold\n  text-danger;\n}\n\n:host([resize=\"none\"]) textarea {\n  @apply resize-none;\n}\n\n:host([resize=\"horizontal\"]) textarea {\n  @apply resize-x;\n}\n\n:host([resize=\"vertical\"]) textarea {\n  @apply resize-y;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2;\n  .footer {\n    @apply py-1\n    px-2;\n    min-block-size: 1.75rem;\n  }\n  textarea {\n    @apply py-1\n    px-2;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n2\n    pl-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea {\n    @apply py-2\n    px-3;\n  }\n  .footer {\n    @apply py-2\n    px-3;\n    min-block-size: 2.25rem;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n1\n    pl-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0;\n  textarea {\n    @apply py-3\n    px-4;\n  }\n  .footer {\n    @apply py-3\n    px-4;\n    min-block-size: 2.75rem;\n  }\n\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-0\n    pl-4;\n  }\n}\n\n:host([status=\"invalid\"]) {\n  textarea {\n    @apply border-color-danger;\n  }\n  textarea:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.readonly {\n  @apply bg-background font-medium;\n}\n\n:host([disabled]) {\n  textarea,\n  footer {\n    @apply opacity-50;\n  }\n}\n\n.border--color {\n  @apply border-b border-color-input;\n  &:focus {\n    @apply border-b-2;\n  }\n}\n\ntextarea.block-size--full {\n  @apply h-full;\n}\n\n.content,\n.hide {\n  @apply hidden;\n}\n\n.container {\n  @apply flex\n  justify-between\n  w-full;\n}\n\n.footer--end-only {\n  @apply justify-end;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  VNode,\n  Watch,\n  Method,\n  Host,\n  State,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { throttle } from \"lodash-es\";\nimport {\n  connectForm,\n  disconnectForm,\n  FormComponent,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  componentLoaded,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { guid } from \"../../utils/guid\";\nimport { Status } from \"../interfaces\";\nimport { Validation } from \"../functional/Validation\";\nimport { syncHiddenFormInput, TextualInputComponent } from \"../input/common/input\";\nimport { CharacterLengthObj } from \"./interfaces\";\nimport { TextAreaMessages } from \"./assets/text-area/t9n\";\nimport { CSS, SLOTS, RESIZE_TIMEOUT } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n * @slot footer-start - A slot for adding content to the start of the component's footer.\n * @slot footer-end - A slot for adding content to the end of the component's footer.\n */\n\n@Component({\n  tag: \"calcite-text-area\",\n  styleUrl: \"text-area.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TextArea\n  implements\n    FormComponent,\n    LabelableComponent,\n    LocalizedComponent,\n    LoadableComponent,\n    T9nComponent,\n    InteractiveComponent,\n    Omit<TextualInputComponent, \"pattern\">\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"autofocus\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the component's number of columns.\n   *\n   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)\n   */\n  @Prop({ reflect: true }) columns: number;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   *\n   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Specifies the minimum number of characters allowed.\n   *\n   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)\n   */\n  @Prop({ reflect: true }) minLength: number;\n\n  /**\n   * Specifies the maximum number of characters allowed.\n   *\n   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)\n   */\n  @Prop({ reflect: true }) maxLength: number;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TextAreaMessages;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /**\n   * Specifies the name of the component.\n   *\n   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /**\n   * Specifies the placeholder text for the component.\n   *\n   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * When `true`, the component's `value` can be read, but cannot be modified.\n   *\n   * @readonly\n   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies if the component is resizable. */\n  @Prop({ reflect: true }) resize: \"both\" | \"horizontal\" | \"vertical\" | \"none\" = \"both\";\n\n  /**\n   * Specifies the component's number of rows.\n   *\n   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)\n   */\n  @Prop({ reflect: true }) rows: number;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: \"l\" | \"m\" | \"s\" = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Specifies the wrapping mechanism for the text.\n   *\n   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)\n   */\n  @Prop({ reflect: true }) wrap: \"soft\" | \"hard\" = \"soft\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TextAreaMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Emitters\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Fires each time a new `value` is typed.\n   */\n  @Event() calciteTextAreaInput: EventEmitter<void>;\n\n  /**\n   * Fires each time a new `value` is typed and committed.\n   */\n  @Event() calciteTextAreaChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n    this.setTextAreaHeight();\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <textarea\n            aria-describedby={this.guid}\n            aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}\n            aria-label={getLabelText(this)}\n            autofocus={this.el.autofocus}\n            class={{\n              [CSS.readOnly]: this.readOnly,\n              [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),\n              [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,\n              [CSS.blockSizeFull]: !hasFooter,\n              [CSS.borderColor]: !hasFooter,\n            }}\n            cols={this.columns}\n            disabled={this.disabled}\n            name={this.name}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n            readOnly={this.readOnly}\n            required={this.required}\n            rows={this.rows}\n            value={this.value}\n            wrap={this.wrap}\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.setTextAreaEl}\n          />\n          <span class={{ [CSS.content]: true }}>\n            <slot onSlotchange={this.contentSlotChangeHandler} />\n          </span>\n          <footer\n            class={{\n              [CSS.footer]: true,\n              [CSS.readOnly]: this.readOnly,\n              [CSS.hide]: !hasFooter,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n            ref={(el) => (this.footerEl = el as HTMLElement)}\n          >\n            <div\n              class={{\n                [CSS.container]: true,\n                [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,\n              }}\n            >\n              <slot\n                name={SLOTS.footerStart}\n                onSlotchange={(event) =>\n                  (this.startSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n              <slot\n                name={SLOTS.footerEnd}\n                onSlotchange={(event) =>\n                  (this.endSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n            </div>\n            {this.renderCharacterLimit()}\n          </footer>\n          <HiddenFormInputSlot component={this} />\n          {this.isCharacterLimitExceeded() && (\n            <span aria-hidden={true} aria-live=\"polite\" class={CSS.assistiveText} id={this.guid}>\n              {this.replacePlaceHoldersInMessages()}\n            </span>\n          )}\n          {this.validationMessage && this.status === \"invalid\" ? (\n            <Validation\n              icon={this.validationIcon}\n              message={this.validationMessage}\n              scale={this.scale}\n              status={this.status}\n            />\n          ) : null}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.textAreaEl.focus();\n  }\n\n  /** Selects the text of the component's `value`. */\n  @Method()\n  async selectText(): Promise<void> {\n    await componentLoaded(this);\n    this.textAreaEl.select();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTextAreaElement;\n\n  defaultValue: TextArea[\"value\"];\n\n  footerEl: HTMLElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  textAreaEl: HTMLTextAreaElement;\n\n  @State() defaultMessages: TextAreaMessages;\n\n  @State() endSlotHasElements: boolean;\n\n  @State() startSlotHasElements: boolean;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  private guid = guid();\n\n  private localizedCharacterLengthObj: CharacterLengthObj;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  handleInput = (event: InputEvent): void => {\n    this.value = event.target[\"value\"];\n    this.calciteTextAreaInput.emit();\n  };\n\n  handleChange = (): void => {\n    this.calciteTextAreaChange.emit();\n  };\n\n  contentSlotChangeHandler = (): void => {\n    if (!this.value) {\n      const nodes = this.el.childNodes;\n      nodes.forEach((el) => {\n        if (el.nodeName === \"#text\") {\n          this.value = el.nodeValue.trim();\n        }\n      });\n    }\n  };\n\n  renderCharacterLimit = (): VNode | null => {\n    if (this.maxLength) {\n      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();\n      return (\n        <span class={CSS.characterLimit}>\n          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>\n            {this.localizedCharacterLengthObj.currentLength}\n          </span>\n          {\"/\"}\n          {this.localizedCharacterLengthObj.maxLength}\n        </span>\n      );\n    }\n    return null;\n  };\n\n  getLocalizedCharacterLength(): CharacterLengthObj {\n    const currentLength = this.value ? this.value.length.toString() : \"0\";\n    const maxLength = this.maxLength.toString();\n    if (this.numberingSystem === \"latn\") {\n      return { currentLength, maxLength };\n    }\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"never\",\n      useGrouping: this.groupSeparator,\n    };\n    return {\n      currentLength: numberStringFormatter.localize(currentLength),\n      maxLength: numberStringFormatter.localize(maxLength),\n    };\n  }\n\n  resizeObserver = createObserver(\"resize\", async () => {\n    await componentLoaded(this);\n    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =\n      this.getHeightAndWidthOfElements();\n    if (footerWidth > 0 && footerWidth !== textAreaWidth) {\n      this.footerEl.style.width = `${textAreaWidth}px`;\n    }\n    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {\n      this.setHeightAndWidthToAuto();\n    }\n  });\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.setCustomValidity(\"\");\n    if (this.isCharacterLimitExceeded()) {\n      input.setCustomValidity(this.replacePlaceHoldersInMessages());\n    }\n\n    syncHiddenFormInput(\"textarea\", this, input);\n  }\n\n  setTextAreaEl = (el: HTMLTextAreaElement): void => {\n    this.textAreaEl = el;\n    this.resizeObserver.observe(el);\n  };\n\n  setTextAreaHeight(): void {\n    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();\n    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {\n      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;\n    }\n  }\n\n  getHeightAndWidthOfElements(): {\n    textAreaHeight: number;\n    textAreaWidth: number;\n    elHeight: number;\n    elWidth: number;\n    footerHeight: number;\n    footerWidth: number;\n  } {\n    const { height: textAreaHeight, width: textAreaWidth } =\n      this.textAreaEl.getBoundingClientRect();\n    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();\n    const { height: footerHeight, width: footerWidth } = this.footerEl?.getBoundingClientRect();\n\n    return {\n      textAreaHeight,\n      textAreaWidth,\n      elHeight,\n      elWidth,\n      footerHeight,\n      footerWidth,\n    };\n  }\n\n  private replacePlaceHoldersInMessages(): string {\n    return this.messages.tooLong\n      .replace(\"{maxLength}\", this.localizedCharacterLengthObj.maxLength)\n      .replace(\"{currentLength}\", this.localizedCharacterLengthObj.currentLength);\n  }\n\n  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.\n  // throttle is used to avoid flashing of textarea when user resizes.\n  private setHeightAndWidthToAuto = throttle(\n    (): void => {\n      if (this.resize === \"vertical\" || this.resize === \"both\") {\n        this.el.style.height = \"auto\";\n      }\n      if (this.resize === \"horizontal\" || this.resize === \"both\") {\n        this.el.style.width = \"auto\";\n      }\n    },\n    RESIZE_TIMEOUT,\n    { leading: false },\n  );\n\n  private isCharacterLimitExceeded(): boolean {\n    return this.value?.length > this.maxLength;\n  }\n}\n"],"version":3}

package/dist/components/calcite-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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -60,19 +60,7 @@ const TileGroup = /*@__PURE__*/ proxyCustomElement(class TileGroup extends HTMLE
             this.slotEl = el;
         };
         this.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 ?? [];
-            }
+            this.selectedItems = this.items?.filter((el) => el.selected);
         };
         this.updateTiles = () => {
             this.items = this.getSlottedTiles();
@@ -156,7 +144,7 @@ const TileGroup = /*@__PURE__*/ proxyCustomElement(class TileGroup extends HTMLE
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(InteractiveContainer, { key: '9ebb89ffa981db073600a94e8f0bf4fdcc1067bc', disabled: this.disabled }, h("div", { key: '2c918d74278fd2a942242711257dc9c27a6db5fe', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: 'bda281a02883aa1abbf720fe887bfd3edf86c44d', onSlotchange: this.updateTiles,
+        return (h(InteractiveContainer, { key: 'c110d46fa4746db6ea85f59b63e0180c16ab5430', disabled: this.disabled }, h("div", { key: 'a72b6f20351cefc6558b63cd695914feaa7a770c', "aria-label": this.label, class: CSS.container, role: role }, h("slot", { key: 'd4fb2bbb7c8a2aa71aba9949681c6628fb69e7cd', onSlotchange: this.updateTiles,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
             ref: this.setSlotEl }))));
     }

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

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

package/dist/components/calcite-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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';

package/dist/components/calcite-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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/calcite-tile.js

@@ -1,21 +1,19 @@
 /*!
  * 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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
-import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
+import { t as toAriaBoolean } from './dom.js';
 import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './link.js';
 
 const CSS = {
+    column: "column",
     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",
     interactive: "interactive",
@@ -38,7 +36,7 @@ const SLOTS = {
     contentTop: "content-top",
 };
 
-const tileCss = ":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{--calcite-tile-background-color:var(--calcite-color-foreground-1);--calcite-tile-border-color:var(--calcite-color-border-2);--calcite-tile-description-text-color:var(--calcite-color-text-3);--calcite-tile-heading-text-color:var(--calcite-color-text-2);--calcite-ui-icon-color:var(--calcite-color-text-3);box-sizing:border-box;display:inline-block}.container{background-color:var(--calcite-tile-background-color);block-size:var(--calcite-container-size-content-fluid);box-sizing:border-box;inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);-webkit-user-select:none;user-select:none}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-color-brand);position:relative}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}.container.interactive.selected{z-index:var(--calcite-z-index)}.container.interactive:focus{box-shadow:inset 0px 0px 0px 1px var(--calcite-color-brand);z-index:var(--calcite-z-index-sticky)}.content-container,.row{align-items:flex-start;display:flex}.content-container{flex-direction:column}.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);font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated calcite-icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .text-content-container{justify-content:center}.description{color:var(--calcite-tile-description-text-color);font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}:host([alignment=center]) .row,:host([alignment=center]) .content-container{align-items:center;text-align:center}:host([alignment=center]) slot[name=content-start]::slotted(*),:host([alignment=center]) slot[name=content-end]::slotted(*){align-self:center}:host([scale=s]){max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=s]) .content-container--has-content,:host([scale=s]) .row{gap:var(--calcite-spacing-sm)}: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: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;min-inline-size:140px}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=m]) .content-container--has-content,:host([scale=m]) .row{gap:var(--calcite-spacing-md)}: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=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;min-inline-size:160px}:host([scale=l]) .container{padding:var(--calcite-spacing-xl)}:host([scale=l]) .content-container--has-content,:host([scale=l]) .row{gap:var(--calcite-spacing-xl)}: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}: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{block-size:100%;box-shadow:inset 0px 0px 0px 1px 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 0px -4px 0px 0px var(--calcite-color-brand)}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0px 0px 0px var(--calcite-color-brand)}:host([href]:focus:not([disabled])),:host([href]:hover:not([disabled])){--calcite-tile-border-color:var(--calcite-color-text-link);--calcite-tile-heading-text-color:var(--calcite-color-text-link);--calcite-ui-icon-color:var(--calcite-color-text-link)}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{position:relative;z-index:var(--calcite-z-index)}:host([href]:active:not([disabled])) .container{box-shadow:0 0 0 3px var(--calcite-tile-border-color)}:host([embed]) .container{box-shadow:none;padding:0}:host([selection-mode=none]) .container{outline-color:var(--calcite-tile-border-color)}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-color-brand);position:relative}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host(:hover:not([disabled])),:host([active]:not([disabled])){--calcite-tile-description-text-color:var(--calcite-color-text-2);--calcite-tile-heading-text-color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const tileCss = ":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{--calcite-tile-background-color:var(--calcite-color-foreground-1);--calcite-tile-border-color:var(--calcite-color-border-2);--calcite-tile-description-text-color:var(--calcite-color-text-3);--calcite-tile-heading-text-color:var(--calcite-color-text-2);--calcite-ui-icon-color:var(--calcite-color-text-3);box-sizing:border-box;display:inline-block}.container{background-color:var(--calcite-tile-background-color);block-size:var(--calcite-container-size-content-fluid);box-sizing:border-box;inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);-webkit-user-select:none;user-select:none}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-color-brand);position:relative}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}.container.interactive.selected{z-index:var(--calcite-z-index)}.container.interactive:focus{box-shadow:inset 0px 0px 0px 1px var(--calcite-color-brand);z-index:var(--calcite-z-index-sticky)}.column,.row{align-items:flex-start;display:flex}.column{flex-direction:column}.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);font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated calcite-icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .content-container{justify-content:center}.description{color:var(--calcite-tile-description-text-color);font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}:host([alignment=center]) .row,:host([alignment=center]) .column{align-items:center;text-align:center}:host([alignment=center]) slot[name=content-start]::slotted(*),:host([alignment=center]) slot[name=content-end]::slotted(*){align-self:center}:host([scale=s]){max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=s]) .column,:host([scale=s]) .row{gap:var(--calcite-spacing-sm)}: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:0.85938rem}:host([scale=m]){max-inline-size:460px;min-inline-size:140px}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=m]) .column,:host([scale=m]) .row{gap:var(--calcite-spacing-md)}: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]){max-inline-size:520px;min-inline-size:160px}:host([scale=l]) .container{padding:var(--calcite-spacing-xl)}:host([scale=l]) .column,:host([scale=l]) .row{gap:var(--calcite-spacing-xl)}: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}: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 0px 0px 0px 1px 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 0px -4px 0px 0px var(--calcite-color-brand)}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0px 0px 0px var(--calcite-color-brand)}:host([href]:focus:not([disabled])),:host([href]:hover:not([disabled])){--calcite-tile-border-color:var(--calcite-color-text-link);--calcite-tile-heading-text-color:var(--calcite-color-text-link);--calcite-ui-icon-color:var(--calcite-color-text-link)}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{position:relative;z-index:var(--calcite-z-index)}:host([href]:active:not([disabled])) .container{box-shadow:0 0 0 3px var(--calcite-tile-border-color)}:host([embed]) .container{box-shadow:none;padding:0}:host([selection-mode=none]) .container{outline-color:var(--calcite-tile-border-color)}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-color-brand);position:relative}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host(:hover:not([disabled])),:host([active]:not([disabled])){--calcite-tile-description-text-color:var(--calcite-color-text-2);--calcite-tile-heading-text-color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTileStyle0 = tileCss;
 
 const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
@@ -67,10 +65,6 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
             }
             this.calciteTileSelect.emit();
         };
-        this.handleSlotChange = (event) => {
-            const slotName = event.target.dataset.name;
-            this[`has${slotName}`] = slotChangeHasAssignedElement(event);
-        };
         this.setContainerEl = (el) => {
             this.containerEl = el;
         };
@@ -90,10 +84,6 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         this.selected = false;
         this.selectionAppearance = "icon";
         this.selectionMode = "none";
-        this.hasContentBottom = false;
-        this.hasContentEnd = false;
-        this.hasContentStart = false;
-        this.hasContentTop = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -171,7 +161,7 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         return;
     }
     renderTile() {
-        const { description, disabled, hasContentBottom, hasContentEnd, hasContentStart, hasContentTop, heading, icon, iconFlipRtl, interactive, selectionMode, } = this;
+        const { description, disabled, heading, icon, iconFlipRtl, interactive, selectionMode } = this;
         const isLargeVisual = heading && icon && !Boolean(description);
         const disableInteraction = Boolean(this.href) || !interactive;
         const role = selectionMode === "multiple" && interactive
@@ -181,8 +171,6 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
                 : 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,
@@ -192,15 +180,11 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
                 [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.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 }))));
+            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 }))));
     }
     render() {
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: '7f10b5f251ef8a2e615d32c83c5ab3ad2ab17b75', disabled: disabled }, !!this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (h(InteractiveContainer, { key: '0498410835d5fc00d19eb6787aa89862ce784c46', disabled: disabled }, !!this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return this; }
     static get style() { return CalciteTileStyle0; }
@@ -221,10 +205,6 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         "selected": [516],
         "selectionAppearance": [513, "selection-appearance"],
         "selectionMode": [513, "selection-mode"],
-        "hasContentBottom": [32],
-        "hasContentEnd": [32],
-        "hasContentStart": [32],
-        "hasContentTop": [32],
         "setFocus": [64]
     }, [[0, "keydown", "keyDownHandler"]]]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"calcite-tile.js","mappings":"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","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentContainer: \"content-container\",\n  contentContainerHasContent: \"content-container--has-content\",\n  contentContainerHasOnlyContentTopAndBottom: \"content-container--has-only-content-top-and-bottom\",\n  textContentContainer: \"text-content-container\",\n  description: \"description\",\n  heading: \"heading\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n};\n\nexport const SLOTS = {\n  contentBottom: \"content-bottom\",\n  contentEnd: \"content-end\",\n  contentStart: \"content-start\",\n  contentTop: \"content-top\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n.container {\n  background-color: var(--calcite-tile-background-color);\n  block-size: var(--calcite-container-size-content-fluid);\n  box-sizing: border-box;\n  inline-size: var(--calcite-container-size-content-fluid);\n  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);\n  user-select: none;\n  &.interactive {\n    cursor: pointer;\n    &:hover,\n    &:focus,\n    &.selected {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n      .selection-icon {\n        --calcite-ui-icon-color: var(--calcite-color-brand);\n      }\n    }\n    &.selected {\n      z-index: var(--calcite-z-index);\n    }\n    &:focus {\n      box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);\n      z-index: var(--calcite-z-index-sticky);\n    }\n  }\n}\n\n.content-container,\n.row {\n  align-items: flex-start;\n  display: flex;\n}\n\n.content-container {\n  flex-direction: column;\n}\n\n.text-content-container {\n  inline-size: 100%;\n  outline-color: transparent;\n  padding: 0;\n}\n\n.text-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.heading {\n  color: var(--calcite-tile-heading-text-color);\n  font-weight: var(--calcite-font-weight-medium);\n  line-height: 1.20313rem;\n  overflow-wrap: break-word;\n}\n\n/* [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead */\n.large-visual-deprecated {\n  align-items: center;\n  justify-content: center;\n  min-block-size: 12rem;\n  text-align: center;\n\n  calcite-icon {\n    align-self: center;\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .text-content-container {\n    justify-content: center;\n  }\n}\n\n.description {\n  color: var(--calcite-tile-description-text-color);\n  font-weight: var(--calcite-font-weight-regular);\n  overflow-wrap: break-word;\n}\n\n:host([alignment=\"center\"]) {\n  .row,\n  .content-container {\n    align-items: center;\n    text-align: center;\n  }\n  slot[name=\"content-start\"]::slotted(*),\n  slot[name=\"content-end\"]::slotted(*) {\n    align-self: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-sm);\n  }\n}\n\n:host([scale=\"m\"]) {\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n  .container {\n    padding: var(--calcite-spacing-md);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-md);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-md);\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n  .content-container--has-content,\n  .row {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .content-container--has-only-content-top-and-bottom slot[name=\"content-top\"]::slotted(*) {\n    margin-block-end: var(--calcite-spacing-xl);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]),\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected:focus::before {\n    block-size: 100%;\n    box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);\n    content: \"\";\n    display: block;\n    inline-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]) {\n  .container.selected {\n    box-shadow: inset 0px -4px 0px 0px var(--calcite-color-brand);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected {\n    box-shadow: inset 4px 0px 0px 0px var(--calcite-color-brand);\n  }\n}\n\n:host([href]:focus:not([disabled])),\n:host([href]:hover:not([disabled])) {\n  --calcite-tile-border-color: var(--calcite-color-text-link);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  --calcite-ui-icon-color: var(--calcite-color-text-link);\n  .container {\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n\n:host([href]:active:not([disabled])) {\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n:host([embed]) {\n  .container {\n    box-shadow: none;\n    padding: 0;\n  }\n}\n\n:host([selection-mode=\"none\"]) {\n  .container {\n    outline-color: var(--calcite-tile-border-color);\n    &:focus {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n    }\n  }\n}\n\n@include disabled();\n\n:host(:hover:not([disabled])),\n:host([active]:not([disabled])) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n","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"],"version":3}
+{"file":"calcite-tile.js","mappings":"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","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  column: \"column\",\n  container: \"container\",\n  contentContainer: \"content-container\",\n  description: \"description\",\n  heading: \"heading\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n};\n\nexport const SLOTS = {\n  contentBottom: \"content-bottom\",\n  contentEnd: \"content-end\",\n  contentStart: \"content-start\",\n  contentTop: \"content-top\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n.container {\n  background-color: var(--calcite-tile-background-color);\n  block-size: var(--calcite-container-size-content-fluid);\n  box-sizing: border-box;\n  inline-size: var(--calcite-container-size-content-fluid);\n  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);\n  user-select: none;\n  &.interactive {\n    cursor: pointer;\n    &:hover,\n    &:focus,\n    &.selected {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n      .selection-icon {\n        --calcite-ui-icon-color: var(--calcite-color-brand);\n      }\n    }\n    &.selected {\n      z-index: var(--calcite-z-index);\n    }\n    &:focus {\n      box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);\n      z-index: var(--calcite-z-index-sticky);\n    }\n  }\n}\n\n.column,\n.row {\n  align-items: flex-start;\n  display: flex;\n}\n\n.column {\n  flex-direction: column;\n}\n\n.content-container {\n  inline-size: 100%;\n  outline-color: transparent;\n  padding: 0;\n}\n\n.text-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.heading {\n  color: var(--calcite-tile-heading-text-color);\n  font-weight: var(--calcite-font-weight-medium);\n  line-height: 1.20313rem;\n  overflow-wrap: break-word;\n}\n\n/* [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead */\n.large-visual-deprecated {\n  align-items: center;\n  justify-content: center;\n  min-block-size: 12rem;\n  text-align: center;\n\n  calcite-icon {\n    align-self: center;\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .content-container {\n    justify-content: center;\n  }\n}\n\n.description {\n  color: var(--calcite-tile-description-text-color);\n  font-weight: var(--calcite-font-weight-regular);\n  overflow-wrap: break-word;\n}\n\n:host([alignment=\"center\"]) {\n  .row,\n  .column {\n    align-items: center;\n    text-align: center;\n  }\n  slot[name=\"content-start\"]::slotted(*),\n  slot[name=\"content-end\"]::slotted(*) {\n    align-self: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n  .column,\n  .row {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n  .container {\n    padding: var(--calcite-spacing-md);\n  }\n  .column,\n  .row {\n    gap: var(--calcite-spacing-md);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n  .column,\n  .row {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]),\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected:focus::before {\n    block-size: 100%;\n    box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);\n    content: \"\";\n    display: block;\n    inline-size: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"horizontal\"]) {\n  .container.selected {\n    box-shadow: inset 0px -4px 0px 0px var(--calcite-color-brand);\n  }\n}\n\n:host([selection-appearance=\"border\"][layout=\"vertical\"]) {\n  .container.selected {\n    box-shadow: inset 4px 0px 0px 0px var(--calcite-color-brand);\n  }\n}\n\n:host([href]:focus:not([disabled])),\n:host([href]:hover:not([disabled])) {\n  --calcite-tile-border-color: var(--calcite-color-text-link);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  --calcite-ui-icon-color: var(--calcite-color-text-link);\n  .container {\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n\n:host([href]:active:not([disabled])) {\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n:host([embed]) {\n  .container {\n    box-shadow: none;\n    padding: 0;\n  }\n}\n\n:host([selection-mode=\"none\"]) {\n  .container {\n    outline-color: var(--calcite-tile-border-color);\n    &:focus {\n      outline-color: var(--calcite-color-brand);\n      position: relative;\n    }\n  }\n}\n\n@include disabled();\n\n:host(:hover:not([disabled])),\n:host([active]:not([disabled])) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n","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}

package/dist/components/calcite-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.1-next.5
+ * v2.8.1
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-tooltip.js

@@ -1,10 +1,10 @@
 /*!
  * 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.1-next.5
+ * v2.8.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { q as queryElementRoots, E as getShadowRootNode, t as toAriaBoolean } from './dom.js';
+import { q as queryElementRoots, F as getShadowRootNode, t as toAriaBoolean } from './dom.js';
 import { c as connectFloatingUI, d as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { g as guid } from './guid.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';