@esri/calcite-components 2.9.0-next.2 → 2.9.0-next.20

package/dist/components/calcite-tile.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.9.0-next.2
+ * v2.9.0-next.20
  */
 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';
@@ -39,7 +39,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]) .icon{align-self:center}:host([alignment=center]) .text-content{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)}.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]) .icon{align-self:center}:host([alignment=center]) .text-content{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}::slotted(*){max-inline-size:100%}";
 const CalciteTileStyle0 = tileCss;
 
 const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {

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  icon: \"icon\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n};\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  .icon {\n    align-self: center;\n  }\n  .text-content {\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 && !description;\n    const disableInteraction = Boolean(this.href) || !interactive;\n    const role =\n      selectionMode === \"multiple\" && interactive\n        ? \"checkbox\"\n        : selectionMode !== \"none\" && interactive\n          ? \"radio\"\n          : interactive\n            ? \"button\"\n            : undefined;\n    const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);\n    const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;\n    return (\n      <div\n        aria-checked={\n          selectionMode !== \"none\" && interactive ? toAriaBoolean(this.selected) : undefined\n        }\n        aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n        aria-label={role && this.label}\n        class={{\n          [CSS.container]: true,\n          [CSS.interactive]: interactive,\n          // [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead\n          [CSS.largeVisualDeprecated]: isLargeVisual,\n          [CSS.row]: true,\n          [CSS.selected]: this.selected,\n        }}\n        onClick={this.clickHandler}\n        ref={this.setContainerEl}\n        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n      >\n        {this.renderSelectionIcon()}\n        <div\n          class={{\n            [CSS.contentContainer]: true,\n            [CSS.contentContainerHasContent]: hasContent,\n            [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom,\n          }}\n        >\n          <slot\n            data-name=\"ContentTop\"\n            name={SLOTS.contentTop}\n            onSlotchange={this.handleSlotChange}\n          />\n          {icon && <calcite-icon class={CSS.icon} flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n          <div class={{ [CSS.textContentContainer]: true, [CSS.row]: true }}>\n            <slot\n              data-name=\"ContentStart\"\n              name={SLOTS.contentStart}\n              onSlotchange={this.handleSlotChange}\n            />\n            <div class={CSS.textContent}>\n              {heading && <div class={CSS.heading}>{heading}</div>}\n              {description && <div class={CSS.description}>{description}</div>}\n            </div>\n            <slot\n              data-name=\"ContentEnd\"\n              name={SLOTS.contentEnd}\n              onSlotchange={this.handleSlotChange}\n            />\n          </div>\n          <slot\n            data-name=\"ContentBottom\"\n            name={SLOTS.contentBottom}\n            onSlotchange={this.handleSlotChange}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile.js","mappings":"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","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentContainer: \"content-container\",\n  contentContainerHasContent: \"content-container--has-content\",\n  contentContainerHasOnlyContentTopAndBottom: \"content-container--has-only-content-top-and-bottom\",\n  textContentContainer: \"text-content-container\",\n  description: \"description\",\n  heading: \"heading\",\n  icon: \"icon\",\n  interactive: \"interactive\",\n  largeVisualDeprecated: \"large-visual-deprecated\",\n  row: \"row\",\n  selected: \"selected\",\n  selectionIcon: \"selection-icon\",\n  textContent: \"text-content\",\n};\n\nexport const ICONS = {\n  selectedMultiple: \"check-square-f\",\n  selectedSingle: \"circle-f\",\n  unselectedMultiple: \"square\",\n  unselectedSingle: \"circle\",\n};\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  .icon {\n    align-self: center;\n  }\n  .text-content {\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\n::slotted(*) {\n  max-inline-size: 100%;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from \"../interfaces\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { SelectableComponent } from \"../../utils/selectableComponent\";\nimport { 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 && !description;\n    const disableInteraction = Boolean(this.href) || !interactive;\n    const role =\n      selectionMode === \"multiple\" && interactive\n        ? \"checkbox\"\n        : selectionMode !== \"none\" && interactive\n          ? \"radio\"\n          : interactive\n            ? \"button\"\n            : undefined;\n    const hasContent = !!(description || hasContentEnd || hasContentStart || heading || icon);\n    const hasOnlyContentTopAndBottom = !hasContent && hasContentTop && hasContentBottom;\n    return (\n      <div\n        aria-checked={\n          selectionMode !== \"none\" && interactive ? toAriaBoolean(this.selected) : undefined\n        }\n        aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n        aria-label={role && this.label}\n        class={{\n          [CSS.container]: true,\n          [CSS.interactive]: interactive,\n          // [Deprecated] Use the content-top slot for rendering icon with alignment=\"center\" instead\n          [CSS.largeVisualDeprecated]: isLargeVisual,\n          [CSS.row]: true,\n          [CSS.selected]: this.selected,\n        }}\n        onClick={this.clickHandler}\n        ref={this.setContainerEl}\n        role={role}\n        tabIndex={disableInteraction ? undefined : 0}\n      >\n        {this.renderSelectionIcon()}\n        <div\n          class={{\n            [CSS.contentContainer]: true,\n            [CSS.contentContainerHasContent]: hasContent,\n            [CSS.contentContainerHasOnlyContentTopAndBottom]: hasOnlyContentTopAndBottom,\n          }}\n        >\n          <slot\n            data-name=\"ContentTop\"\n            name={SLOTS.contentTop}\n            onSlotchange={this.handleSlotChange}\n          />\n          {icon && <calcite-icon class={CSS.icon} flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n          <div class={{ [CSS.textContentContainer]: true, [CSS.row]: true }}>\n            <slot\n              data-name=\"ContentStart\"\n              name={SLOTS.contentStart}\n              onSlotchange={this.handleSlotChange}\n            />\n            <div class={CSS.textContent}>\n              {heading && <div class={CSS.heading}>{heading}</div>}\n              {description && <div class={CSS.description}>{description}</div>}\n            </div>\n            <slot\n              data-name=\"ContentEnd\"\n              name={SLOTS.contentEnd}\n              onSlotchange={this.handleSlotChange}\n            />\n          </div>\n          <slot\n            data-name=\"ContentBottom\"\n            name={SLOTS.contentBottom}\n            onSlotchange={this.handleSlotChange}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/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.9.0-next.2
+ * v2.9.0-next.20
  */
 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.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 
@@ -16,7 +16,7 @@ const TipGroup = /*@__PURE__*/ proxyCustomElement(class TipGroup extends HTMLEle
         this.groupTitle = undefined;
     }
     render() {
-        return h("slot", { key: '1c37ce2b89bdd6c4e386dcaefbfd9aebcf91bd4c' });
+        return h("slot", { key: '284f8e5e3890d264b7131cfcb1ceb7f64f17705c' });
     }
     static get style() { return CalciteTipGroupStyle0; }
 }, [1, "calcite-tip-group", {

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

@@ -1 +1 @@
-{"file":"calcite-tip-group.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,4UAA4U,CAAC;AACjW,8BAAe,WAAW;;MCSb,QAAQ;;;;;;;IAanB,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tip-group/tip-group.scss?tag=calcite-tip-group&encapsulation=shadow","src/components/tip-group/tip-group.tsx"],"sourcesContent":[":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1h\n    box-border\n    block;\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n@include base-component();\n","import { Component, h, Prop, VNode } from \"@stencil/core\";\n\n/**\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-group\",\n  styleUrl: \"tip-group.scss\",\n  shadow: true,\n})\nexport class TipGroup {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * The component header text for all nested `calcite-tip`s.\n   *\n   */\n  @Prop() groupTitle: string;\n\n  render(): VNode {\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"calcite-tip-group.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,4UAA4U,CAAC;AACjW,8BAAe,WAAW;;MCUb,QAAQ;;;;;;;IAanB,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tip-group/tip-group.scss?tag=calcite-tip-group&encapsulation=shadow","src/components/tip-group/tip-group.tsx"],"sourcesContent":[":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1h\n    box-border\n    block;\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n@include base-component();\n","import { Component, h, Prop, VNode } from \"@stencil/core\";\n\n/**\n * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead.\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-group\",\n  styleUrl: \"tip-group.scss\",\n  shadow: true,\n})\nexport class TipGroup {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * The component header text for all nested `calcite-tip`s.\n   *\n   */\n  @Prop() groupTitle: string;\n\n  render(): VNode {\n    return <slot />;\n  }\n}\n"],"version":3}

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.9.0-next.2
+ * v2.9.0-next.20
  */
 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-manager.js.map

@@ -1 +1 @@
-{"file":"calcite-tip-manager.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,0BAA0B;IACjD,sBAAsB,EAAE,2BAA2B;IACnD,UAAU,EAAE,YAAY;IACxB,YAAY,EAAE,eAAe;IAC7B,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;CAC9B,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,GAAG;CACX;;AClBD,MAAM,aAAa,GAAG,onFAAonF,CAAC;AAC3oF,gCAAe,aAAa;;MCiCf,UAAU;;;;;;QAgErB,qBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QA8FtE,mBAAc,GAAG;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;SACpC,CAAC;QAkBF,oBAAe,GAAG;YAChB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC;QAEF,gBAAW,GAAG;YACZ,IAAI,CAAC,OAAO,EAAE,CAAC;SAChB,CAAC;QAEF,6BAAwB,GAAG,CAAC,KAAoB;YAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE;gBACnC,OAAO;aACR;YAED,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,YAAY;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,MAAM;gBACR,KAAK,WAAW;oBACd,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,WAAW,EAAE,CAAC;oBACnB,MAAM;gBACR,KAAK,MAAM;oBACT,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;oBACvB,MAAM;gBACR,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;oBACpC,MAAM;aACT;SACF,CAAC;QAEF,sBAAiB,GAAG,CAAC,EAAkB;YACrC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACrB,CAAC;sBA7M+C,KAAK;;;;;;;;;;+BA6D3B,EAAE;;IA1D7B,mBAAmB;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;IAsBD,gBAAgB;;KAEf;IAaD,qBAAqB;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAmBD,MAAM,qBAAqB;QACzB,MAAM,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;IAQD,iBAAiB;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;KAC7E;IAED,MAAM,iBAAiB;QACrB,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;QACpC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;;IAUD,MAAM,OAAO;QACX,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;KAC5D;;IAID,MAAM,WAAW;QACf,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAC9B,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;KAChE;;;;;;IAmBD,SAAS;QACP,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,OAAO;SACR;QACD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAwB,uBAAuB,CAAC,CAAC;QAE1F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,CAAC,CAAC,GAA0B;YACtC,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAOD,eAAe;QACb,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK;YAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC;YAChD,GAAG,CAAC,QAAQ,GAAG,UAAU,CAAC;YAC1B,GAAG,CAAC,MAAM,GAAG,CAAC,UAAU,CAAC;SAC1B,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAClD,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAC3D,IAAI,CAAC,UAAU,GAAG,SAAS,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,iBAAiB,CAAC;SAC7E;KACF;;;;;;IA6CD,gBAAgB;QACd,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEtD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC;QAChC,MAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC;QACxC,MAAM,eAAe,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAExD,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,IACpB,cAAQ,KAAK,EAAE,GAAG,CAAC,UAAU,IAC3B,sBACE,KAAK,EAAE,GAAG,CAAC,YAAY,EACvB,IAAI,EAAE,GAAG,KAAK,KAAK,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,EAC5D,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,aAAa,GACnB,EACF,YAAM,KAAK,EAAE,GAAG,CAAC,YAAY,IAAG,GAAG,eAAe,IAAI,aAAa,GAAG,CAAC,IAAI,KAAK,EAAE,CAAQ,EAC1F,sBACE,KAAK,EAAE,GAAG,CAAC,QAAQ,EACnB,IAAI,EAAE,GAAG,KAAK,KAAK,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,EAC5D,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,GACf,CACK,IACP,IAAI,CAAC;KACV;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7F,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC;QAElC,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QAED,QACE,8BACe,aAAa,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,CAAC,wBAAwB,EACxC,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,QAAQ,EAAE,CAAC,IAEX,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM,IACvB,EAAC,OAAO,IAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,IAC7C,UAAU,CACH,EACV,sBACE,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,UAAU,IAEhB,oBAAc,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,GAAG,GAAG,CAC9B,CACV,EACT,WACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI;gBACxB,CAAC,GAAG,CAAC,qBAAqB,GAAG,CAAC,MAAM,IAAI,SAAS,KAAK,WAAW;gBACjE,CAAC,GAAG,CAAC,sBAAsB,GAAG,CAAC,MAAM,IAAI,SAAS,KAAK,YAAY;aACpE,EACD,GAAG,EAAE,aAAa,EAClB,QAAQ,EAAE,CAAC,IAEX,eAAQ,CACJ,EACL,IAAI,CAAC,gBAAgB,EAAE,CAChB,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tip-manager/resources.ts","src/components/tip-manager/tip-manager.scss?tag=calcite-tip-manager&encapsulation=shadow","src/components/tip-manager/tip-manager.tsx"],"sourcesContent":["export const CSS = {\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  container: \"container\",\n  tipContainer: \"tip-container\",\n  tipContainerAdvancing: \"tip-container--advancing\",\n  tipContainerRetreating: \"tip-container--retreating\",\n  pagination: \"pagination\",\n  pagePosition: \"page-position\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  close: \"x\",\n};\n\nexport const TEXT = {\n  defaultGroupTitle: \"Tips\",\n  defaultPaginationLabel: \"Tip\",\n  close: \"Close\",\n  previous: \"Previous\",\n  next: \"Next\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tip-manager-height: The maximum height of the component.\n * @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.\n */\n\n:host {\n  @apply bg-foreground-1\n  text-color-2\n  text-n1h\n  box-border\n  block;\n\n  * {\n    @apply box-border;\n  }\n\n  --calcite-tip-manager-height: 19vh;\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply border-color-3\n    border-0\n    border-b\n    border-solid\n    py-0;\n\n  padding-inline-end: theme(\"padding.0\");\n  padding-inline-start: theme(\"padding.4\");\n\n  .heading {\n    @apply text-color-1\n      text-1h\n      p-0\n      font-bold;\n  }\n}\n\n.container {\n  @apply focus-base\n    relative\n    overflow-hidden;\n  min-block-size: 150px;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.tip-container {\n  @apply focus-base\n    mt-px\n    flex\n    items-start\n    justify-center\n    overflow-auto\n    p-4;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n  block-size: var(--calcite-tip-manager-height);\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n.tip-container--advancing {\n  animation-name: tip-advance;\n}\n\n.tip-container--retreating {\n  animation-name: tip-retreat;\n}\n\n/* Pagination Styles*/\n.pagination {\n  @apply flex\n  items-center\n  justify-center\n  px-0\n  pt-3\n  pb-2;\n}\n\n.page-position {\n  @apply text-n2h my-0 mx-2;\n}\n\n/* @keyframes*/\n@keyframes tip-advance {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n@keyframes tip-retreat {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(-50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipManagerMessages } from \"./assets/tip-manager/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-manager\",\n  styleUrl: \"tip-manager.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TipManager {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, does not display or position the component.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  @Watch(\"closed\")\n  closedChangeHandler(): void {\n    this.direction = null;\n  }\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\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: TipManagerMessages;\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<TipManagerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipManagerElement;\n\n  @State() selectedIndex: number;\n\n  @Watch(\"selectedIndex\")\n  selectedChangeHandler(): void {\n    this.showSelectedTip();\n    this.updateGroupTitle();\n  }\n\n  @State() tips: HTMLCalciteTipElement[];\n\n  @State() total: number;\n\n  @State() direction: \"advancing\" | \"retreating\";\n\n  @State() groupTitle: string;\n\n  mutationObserver = createObserver(\"mutation\", () => this.setUpTips());\n\n  container: HTMLDivElement;\n\n  @State() defaultMessages: TipManagerMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n    this.updateGroupTitle();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.setUpTips();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    this.updateGroupTitle();\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Selects the next `calcite-tip` to display. */\n  @Method()\n  async nextTip(): Promise<void> {\n    this.direction = \"advancing\";\n    const nextIndex = this.selectedIndex + 1;\n    this.selectedIndex = (nextIndex + this.total) % this.total;\n  }\n\n  /** Selects the previous `calcite-tip` to display. */\n  @Method()\n  async previousTip(): Promise<void> {\n    this.direction = \"retreating\";\n    const previousIndex = this.selectedIndex - 1;\n    this.selectedIndex = (previousIndex + this.total) % this.total;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipManagerClose: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setUpTips(): void {\n    const tips = Array.from(this.el.querySelectorAll(\"calcite-tip\"));\n    this.total = tips.length;\n    if (this.total === 0) {\n      return;\n    }\n    const selectedTip = this.el.querySelector<HTMLCalciteTipElement>(\"calcite-tip[selected]\");\n\n    this.tips = tips;\n    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;\n\n    tips.forEach((tip: HTMLCalciteTipElement) => {\n      tip.closeDisabled = true;\n    });\n    this.showSelectedTip();\n  }\n\n  hideTipManager = (): void => {\n    this.closed = true;\n    this.calciteTipManagerClose.emit();\n  };\n\n  showSelectedTip(): void {\n    this.tips.forEach((tip, index) => {\n      const isSelected = this.selectedIndex === index;\n      tip.selected = isSelected;\n      tip.hidden = !isSelected;\n    });\n  }\n\n  updateGroupTitle(): void {\n    if (this.tips) {\n      const selectedTip = this.tips[this.selectedIndex];\n      const tipParent = selectedTip.closest(\"calcite-tip-group\");\n      this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;\n    }\n  }\n\n  previousClicked = (): void => {\n    this.previousTip();\n  };\n\n  nextClicked = (): void => {\n    this.nextTip();\n  };\n\n  tipManagerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        this.nextTip();\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        this.previousTip();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.selectedIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.selectedIndex = this.total - 1;\n        break;\n    }\n  };\n\n  storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderPagination(): VNode {\n    const dir = getElementDir(this.el);\n    const { selectedIndex, tips, total, messages } = this;\n\n    const nextLabel = messages.next;\n    const previousLabel = messages.previous;\n    const paginationLabel = messages.defaultPaginationLabel;\n\n    return tips.length > 1 ? (\n      <footer class={CSS.pagination}>\n        <calcite-action\n          class={CSS.pagePrevious}\n          icon={dir === \"ltr\" ? ICONS.chevronLeft : ICONS.chevronRight}\n          onClick={this.previousClicked}\n          scale=\"m\"\n          text={previousLabel}\n        />\n        <span class={CSS.pagePosition}>{`${paginationLabel} ${selectedIndex + 1}/${total}`}</span>\n        <calcite-action\n          class={CSS.pageNext}\n          icon={dir === \"ltr\" ? ICONS.chevronRight : ICONS.chevronLeft}\n          onClick={this.nextClicked}\n          scale=\"m\"\n          text={nextLabel}\n        />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { closed, direction, headingLevel, groupTitle, selectedIndex, messages, total } = this;\n\n    const closeLabel = messages.close;\n\n    if (total === 0) {\n      return null;\n    }\n\n    return (\n      <section\n        aria-hidden={toAriaBoolean(closed)}\n        class={CSS.container}\n        hidden={closed}\n        onKeyDown={this.tipManagerKeyDownHandler}\n        ref={this.storeContainerRef}\n        tabIndex={0}\n      >\n        <header class={CSS.header}>\n          <Heading class={CSS.heading} level={headingLevel}>\n            {groupTitle}\n          </Heading>\n          <calcite-action\n            class={CSS.close}\n            onClick={this.hideTipManager}\n            scale=\"m\"\n            text={closeLabel}\n          >\n            <calcite-icon icon={ICONS.close} scale=\"m\" />\n          </calcite-action>\n        </header>\n        <div\n          class={{\n            [CSS.tipContainer]: true,\n            [CSS.tipContainerAdvancing]: !closed && direction === \"advancing\",\n            [CSS.tipContainerRetreating]: !closed && direction === \"retreating\",\n          }}\n          key={selectedIndex}\n          tabIndex={0}\n        >\n          <slot />\n        </div>\n        {this.renderPagination()}\n      </section>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tip-manager.js","mappings":"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","names":[],"sources":["src/components/tip-manager/resources.ts","src/components/tip-manager/tip-manager.scss?tag=calcite-tip-manager&encapsulation=shadow","src/components/tip-manager/tip-manager.tsx"],"sourcesContent":["export const CSS = {\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  container: \"container\",\n  tipContainer: \"tip-container\",\n  tipContainerAdvancing: \"tip-container--advancing\",\n  tipContainerRetreating: \"tip-container--retreating\",\n  pagination: \"pagination\",\n  pagePosition: \"page-position\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  close: \"x\",\n};\n\nexport const TEXT = {\n  defaultGroupTitle: \"Tips\",\n  defaultPaginationLabel: \"Tip\",\n  close: \"Close\",\n  previous: \"Previous\",\n  next: \"Next\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tip-manager-height: The maximum height of the component.\n * @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.\n */\n\n:host {\n  @apply bg-foreground-1\n  text-color-2\n  text-n1h\n  box-border\n  block;\n\n  * {\n    @apply box-border;\n  }\n\n  --calcite-tip-manager-height: 19vh;\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply border-color-3\n    border-0\n    border-b\n    border-solid\n    py-0;\n\n  padding-inline-end: theme(\"padding.0\");\n  padding-inline-start: theme(\"padding.4\");\n\n  .heading {\n    @apply text-color-1\n      text-1h\n      p-0\n      font-bold;\n  }\n}\n\n.container {\n  @apply focus-base\n    relative\n    overflow-hidden;\n  min-block-size: 150px;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.tip-container {\n  @apply focus-base\n    mt-px\n    flex\n    items-start\n    justify-center\n    overflow-auto\n    p-4;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n  block-size: var(--calcite-tip-manager-height);\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n.tip-container--advancing {\n  animation-name: tip-advance;\n}\n\n.tip-container--retreating {\n  animation-name: tip-retreat;\n}\n\n/* Pagination Styles*/\n.pagination {\n  @apply flex\n  items-center\n  justify-center\n  px-0\n  pt-3\n  pb-2;\n}\n\n.page-position {\n  @apply text-n2h my-0 mx-2;\n}\n\n/* @keyframes*/\n@keyframes tip-advance {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n@keyframes tip-retreat {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(-50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipManagerMessages } from \"./assets/tip-manager/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead.\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-manager\",\n  styleUrl: \"tip-manager.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TipManager {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, does not display or position the component.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  @Watch(\"closed\")\n  closedChangeHandler(): void {\n    this.direction = null;\n  }\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\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: TipManagerMessages;\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<TipManagerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipManagerElement;\n\n  @State() selectedIndex: number;\n\n  @Watch(\"selectedIndex\")\n  selectedChangeHandler(): void {\n    this.showSelectedTip();\n    this.updateGroupTitle();\n  }\n\n  @State() tips: HTMLCalciteTipElement[];\n\n  @State() total: number;\n\n  @State() direction: \"advancing\" | \"retreating\";\n\n  @State() groupTitle: string;\n\n  mutationObserver = createObserver(\"mutation\", () => this.setUpTips());\n\n  container: HTMLDivElement;\n\n  @State() defaultMessages: TipManagerMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n    this.updateGroupTitle();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.setUpTips();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    this.updateGroupTitle();\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Selects the next `calcite-tip` to display. */\n  @Method()\n  async nextTip(): Promise<void> {\n    this.direction = \"advancing\";\n    const nextIndex = this.selectedIndex + 1;\n    this.selectedIndex = (nextIndex + this.total) % this.total;\n  }\n\n  /** Selects the previous `calcite-tip` to display. */\n  @Method()\n  async previousTip(): Promise<void> {\n    this.direction = \"retreating\";\n    const previousIndex = this.selectedIndex - 1;\n    this.selectedIndex = (previousIndex + this.total) % this.total;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipManagerClose: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setUpTips(): void {\n    const tips = Array.from(this.el.querySelectorAll(\"calcite-tip\"));\n    this.total = tips.length;\n    if (this.total === 0) {\n      return;\n    }\n    const selectedTip = this.el.querySelector<HTMLCalciteTipElement>(\"calcite-tip[selected]\");\n\n    this.tips = tips;\n    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;\n\n    tips.forEach((tip: HTMLCalciteTipElement) => {\n      tip.closeDisabled = true;\n    });\n    this.showSelectedTip();\n  }\n\n  hideTipManager = (): void => {\n    this.closed = true;\n    this.calciteTipManagerClose.emit();\n  };\n\n  showSelectedTip(): void {\n    this.tips.forEach((tip, index) => {\n      const isSelected = this.selectedIndex === index;\n      tip.selected = isSelected;\n      tip.hidden = !isSelected;\n    });\n  }\n\n  updateGroupTitle(): void {\n    if (this.tips) {\n      const selectedTip = this.tips[this.selectedIndex];\n      const tipParent = selectedTip.closest(\"calcite-tip-group\");\n      this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;\n    }\n  }\n\n  previousClicked = (): void => {\n    this.previousTip();\n  };\n\n  nextClicked = (): void => {\n    this.nextTip();\n  };\n\n  tipManagerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        this.nextTip();\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        this.previousTip();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.selectedIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.selectedIndex = this.total - 1;\n        break;\n    }\n  };\n\n  storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderPagination(): VNode {\n    const dir = getElementDir(this.el);\n    const { selectedIndex, tips, total, messages } = this;\n\n    const nextLabel = messages.next;\n    const previousLabel = messages.previous;\n    const paginationLabel = messages.defaultPaginationLabel;\n\n    return tips.length > 1 ? (\n      <footer class={CSS.pagination}>\n        <calcite-action\n          class={CSS.pagePrevious}\n          icon={dir === \"ltr\" ? ICONS.chevronLeft : ICONS.chevronRight}\n          onClick={this.previousClicked}\n          scale=\"m\"\n          text={previousLabel}\n        />\n        <span class={CSS.pagePosition}>{`${paginationLabel} ${selectedIndex + 1}/${total}`}</span>\n        <calcite-action\n          class={CSS.pageNext}\n          icon={dir === \"ltr\" ? ICONS.chevronRight : ICONS.chevronLeft}\n          onClick={this.nextClicked}\n          scale=\"m\"\n          text={nextLabel}\n        />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { closed, direction, headingLevel, groupTitle, selectedIndex, messages, total } = this;\n\n    const closeLabel = messages.close;\n\n    if (total === 0) {\n      return null;\n    }\n\n    return (\n      <section\n        aria-hidden={toAriaBoolean(closed)}\n        class={CSS.container}\n        hidden={closed}\n        onKeyDown={this.tipManagerKeyDownHandler}\n        ref={this.storeContainerRef}\n        tabIndex={0}\n      >\n        <header class={CSS.header}>\n          <Heading class={CSS.heading} level={headingLevel}>\n            {groupTitle}\n          </Heading>\n          <calcite-action\n            class={CSS.close}\n            onClick={this.hideTipManager}\n            scale=\"m\"\n            text={closeLabel}\n          >\n            <calcite-icon icon={ICONS.close} scale=\"m\" />\n          </calcite-action>\n        </header>\n        <div\n          class={{\n            [CSS.tipContainer]: true,\n            [CSS.tipContainerAdvancing]: !closed && direction === \"advancing\",\n            [CSS.tipContainerRetreating]: !closed && direction === \"retreating\",\n          }}\n          key={selectedIndex}\n          tabIndex={0}\n        >\n          <slot />\n        </div>\n        {this.renderPagination()}\n      </section>\n    );\n  }\n}\n"],"version":3}

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.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -108,7 +108,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
     }
     render() {
-        return (h(Fragment, { key: '0c1a204f565a12f4e359f1c6c050258bf70c2b18' }, h("article", { key: '1e2ea801101e4280b0b073e780ef1db6f064856b', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
+        return (h(Fragment, { key: 'e73ae078f92bf5f548ff2e0a8240c3eb213f58c7' }, h("article", { key: '221db7a5ed670198df1ed809942d609a452149a4', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

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

@@ -1 +1 @@
-{"file":"calcite-tip.js","mappings":"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","names":[],"sources":["src/components/tip/resources.ts","src/components/tip/tip.scss?tag=calcite-tip&encapsulation=shadow","src/components/tip/tip.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  imageFrame: \"image-frame\",\n  content: \"content\",\n  info: \"info\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n};\n",":host {\n  @apply border-color-2\n    bg-foreground-1\n    text-color-2\n    text-n1h\n    relative\n    m-4\n    box-border\n    flex\n    flex-row\n    border\n    border-solid;\n\n  * {\n    @apply box-border;\n  }\n}\n\n.container {\n  @apply w-full p-4;\n}\n\n:host([closed]),\n:host([closed]) .container {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply m-0 border-none p-0;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply mb-2;\n}\n.header .heading {\n  @apply text-0h text-color-1 p-0;\n}\n\n.container[hidden] {\n  @apply hidden;\n}\n\n.content {\n  @apply flex;\n}\n\n.info {\n  @apply py-0 px-4;\n  inline-size: 70%;\n  &:only-child {\n    @apply w-full px-0;\n  }\n}\n\n::slotted(p) {\n  @apply mt-0;\n}\n\n::slotted(a) {\n  @apply focus-base;\n  color: theme(\"backgroundColor.brand\");\n}\n\n::slotted(a:focus) {\n  @apply focus-outset;\n}\n\n.image-frame {\n  inline-size: theme(\"width[1/4]\");\n  img {\n    @apply max-w-full;\n  }\n}\n\n::slotted(img) {\n  @apply max-w-full;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { constrainHeadingLevel, Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipMessages } from \"./assets/tip/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text and a hyperlink.\n * @slot thumbnail - A slot for adding an HTML image element.\n */\n@Component({\n  tag: \"calcite-tip\",\n  styleUrl: \"tip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, the component does not display.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * When `true`, the close button is not present on the component.\n   */\n  @Prop({ reflect: true }) closeDisabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n   *\n   * Only one tip can be selected within the `calcite-tip-manager` parent.\n   */\n  @Prop({ reflect: true }) selected = false;\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: TipMessages;\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<TipMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipElement;\n\n  @State() defaultMessages: TipMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipDismiss: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  hideTip = (): void => {\n    this.closed = true;\n\n    this.calciteTipDismiss.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    const { heading, headingLevel, el } = this;\n    const parentLevel = el.closest(\"calcite-tip-manager\")?.headingLevel;\n    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;\n    const level = headingLevel || relativeLevel;\n\n    return heading ? (\n      <header class={CSS.header}>\n        <Heading class={CSS.heading} level={level}>\n          {heading}\n        </Heading>\n      </header>\n    ) : null;\n  }\n\n  renderDismissButton(): VNode {\n    const { closeDisabled, hideTip } = this;\n    return !closeDisabled ? (\n      <calcite-action\n        class={CSS.close}\n        icon={ICONS.close}\n        onClick={hideTip}\n        scale=\"l\"\n        text={this.messages.close}\n      />\n    ) : null;\n  }\n\n  renderImageFrame(): VNode {\n    const { el } = this;\n\n    return getSlotted(el, SLOTS.thumbnail) ? (\n      <div class={CSS.imageFrame} key=\"thumbnail\">\n        <slot name={SLOTS.thumbnail} />\n      </div>\n    ) : null;\n  }\n\n  renderInfoNode(): VNode {\n    return (\n      <div class={CSS.info}>\n        <slot />\n      </div>\n    );\n  }\n\n  renderContent(): VNode {\n    return (\n      <div class={CSS.content}>\n        {this.renderImageFrame()}\n        {this.renderInfoNode()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <article class={CSS.container}>\n          {this.renderHeader()}\n          {this.renderContent()}\n        </article>\n        {this.renderDismissButton()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tip.js","mappings":"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","names":[],"sources":["src/components/tip/resources.ts","src/components/tip/tip.scss?tag=calcite-tip&encapsulation=shadow","src/components/tip/tip.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  imageFrame: \"image-frame\",\n  content: \"content\",\n  info: \"info\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n};\n",":host {\n  @apply border-color-2\n    bg-foreground-1\n    text-color-2\n    text-n1h\n    relative\n    m-4\n    box-border\n    flex\n    flex-row\n    border\n    border-solid;\n\n  * {\n    @apply box-border;\n  }\n}\n\n.container {\n  @apply w-full p-4;\n}\n\n:host([closed]),\n:host([closed]) .container {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply m-0 border-none p-0;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply mb-2;\n}\n.header .heading {\n  @apply text-0h text-color-1 p-0;\n}\n\n.container[hidden] {\n  @apply hidden;\n}\n\n.content {\n  @apply flex;\n}\n\n.info {\n  @apply py-0 px-4;\n  inline-size: 70%;\n  &:only-child {\n    @apply w-full px-0;\n  }\n}\n\n::slotted(p) {\n  @apply mt-0;\n}\n\n::slotted(a) {\n  @apply focus-base;\n  color: theme(\"backgroundColor.brand\");\n}\n\n::slotted(a:focus) {\n  @apply focus-outset;\n}\n\n.image-frame {\n  inline-size: theme(\"width[1/4]\");\n  img {\n    @apply max-w-full;\n  }\n}\n\n::slotted(img) {\n  @apply max-w-full;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { constrainHeadingLevel, Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipMessages } from \"./assets/tip/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead.\n * @slot - A slot for adding text and a hyperlink.\n * @slot thumbnail - A slot for adding an HTML image element.\n */\n@Component({\n  tag: \"calcite-tip\",\n  styleUrl: \"tip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, the component does not display.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * When `true`, the close button is not present on the component.\n   */\n  @Prop({ reflect: true }) closeDisabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n   *\n   * Only one tip can be selected within the `calcite-tip-manager` parent.\n   */\n  @Prop({ reflect: true }) selected = false;\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: TipMessages;\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<TipMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipElement;\n\n  @State() defaultMessages: TipMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipDismiss: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  hideTip = (): void => {\n    this.closed = true;\n\n    this.calciteTipDismiss.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    const { heading, headingLevel, el } = this;\n    const parentLevel = el.closest(\"calcite-tip-manager\")?.headingLevel;\n    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;\n    const level = headingLevel || relativeLevel;\n\n    return heading ? (\n      <header class={CSS.header}>\n        <Heading class={CSS.heading} level={level}>\n          {heading}\n        </Heading>\n      </header>\n    ) : null;\n  }\n\n  renderDismissButton(): VNode {\n    const { closeDisabled, hideTip } = this;\n    return !closeDisabled ? (\n      <calcite-action\n        class={CSS.close}\n        icon={ICONS.close}\n        onClick={hideTip}\n        scale=\"l\"\n        text={this.messages.close}\n      />\n    ) : null;\n  }\n\n  renderImageFrame(): VNode {\n    const { el } = this;\n\n    return getSlotted(el, SLOTS.thumbnail) ? (\n      <div class={CSS.imageFrame} key=\"thumbnail\">\n        <slot name={SLOTS.thumbnail} />\n      </div>\n    ) : null;\n  }\n\n  renderInfoNode(): VNode {\n    return (\n      <div class={CSS.info}>\n        <slot />\n      </div>\n    );\n  }\n\n  renderContent(): VNode {\n    return (\n      <div class={CSS.content}>\n        {this.renderImageFrame()}\n        {this.renderInfoNode()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <article class={CSS.container}>\n          {this.renderHeader()}\n          {this.renderContent()}\n        </article>\n        {this.renderDismissButton()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}

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.9.0-next.2
+ * v2.9.0-next.20
  */
 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';

package/dist/components/calcite-tree-item.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.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { g as getSlotted, d as slotChangeHasAssignedElement, a as getElementDir, t as toAriaBoolean, y as filterDirectChildren } from './dom.js';
+import { g as getSlotted, d as slotChangeHasAssignedElement, a as getElementDir, t as toAriaBoolean, z as filterDirectChildren } from './dom.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { C as CSS_UTILITY } from './resources.js';

package/dist/components/calcite-tree.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.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { e as focusElement, x as nodeListToArray } from './dom.js';
+import { e as focusElement, y as nodeListToArray } from './dom.js';
 
 function isTreeItem(element) {
     return element?.tagName === "CALCITE-TREE-ITEM";
@@ -219,7 +219,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         else if (!isNoneSelectionMode) {
             targetItems.forEach((treeItem) => {
                 if (!treeItem.disabled) {
-                    treeItem.selected = true;
+                    treeItem.selected = this.selectionMode !== "single" || !treeItem.selected;
                 }
             });
         }

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

@@ -1 +1 @@
-{"file":"calcite-tree.js","mappings":"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","names":[],"sources":["src/components/tree/utils.ts","src/components/tree/tree.scss?tag=calcite-tree&encapsulation=shadow","src/components/tree/tree.tsx"],"sourcesContent":["export function isTreeItem(element: Element): element is HTMLCalciteTreeItemElement {\n  return element?.tagName === \"CALCITE-TREE-ITEM\";\n}\n\nexport function getTraversableItems(root: HTMLCalciteTreeElement): HTMLCalciteTreeItemElement[] {\n  return Array.from(root.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\")).filter(\n    (item): boolean => {\n      let currentItem: HTMLElement = item;\n\n      while (currentItem !== root && currentItem !== undefined) {\n        const parent = currentItem.parentElement;\n        const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;\n\n        if (!traversable) {\n          return false;\n        }\n\n        currentItem = currentItem.parentElement;\n      }\n\n      return true;\n    },\n  );\n}\n",":host {\n  @apply block;\n}\n\n:host(:focus) {\n  @apply outline-none;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, nodeListToArray } from \"../../utils/dom\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { TreeItemSelectDetail } from \"../tree-item/interfaces\";\nimport { getTraversableItems, isTreeItem } from \"./utils\";\n\n/**\n * @slot - A slot for `calcite-tree-item` elements.\n */\n@Component({\n  tag: \"calcite-tree\",\n  styleUrl: \"tree.scss\",\n  shadow: true,\n})\nexport class Tree {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays indentation guide lines. */\n  @Prop({ mutable: true, reflect: true }) lines = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) child: boolean;\n\n  /** Specifies the size of the component. */\n  @Prop({ mutable: true, reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"ancestors\"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"children\"` allows any number of selections from one parent from corresponding parent and child selections,\n   *\n   * `\"multichildren\"` allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"none\"` allows no selections,\n   *\n   * `\"single\"` allows one selection, and\n   *\n   * `\"single-persist\"` allows and requires one selection.\n   *\n   * @default \"single\"\n   */\n  @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode = \"single\";\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteTreeItemElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillRender(): void {\n    const parent: HTMLCalciteTreeElement = this.el.parentElement?.closest(\"calcite-tree\");\n    this.lines = parent ? parent.lines : this.lines;\n    this.scale = parent ? parent.scale : this.scale;\n    this.selectionMode = parent ? parent.selectionMode : this.selectionMode;\n    this.child = !!parent;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-multiselectable={\n          this.child\n            ? undefined\n            : (\n                this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\"\n              ).toString()\n        }\n        onKeyDown={this.keyDownHandler}\n        role={!this.child ? \"tree\" : undefined}\n        tabIndex={this.getRootTabIndex()}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"focus\") onFocus(): void {\n    if (!this.child) {\n      const focusTarget =\n        this.el.querySelector<HTMLCalciteTreeItemElement>(\n          \"calcite-tree-item[selected]:not([disabled])\",\n        ) || this.el.querySelector<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\");\n\n      focusElement(focusTarget);\n    }\n  }\n\n  @Listen(\"focusin\") onFocusIn(event: FocusEvent): void {\n    const focusedFromRootOrOutsideTree =\n      event.relatedTarget === this.el || !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (focusedFromRootOrOutsideTree) {\n      // gives user the ability to tab into external elements (modifying tabindex property will not work in firefox)\n      this.el.removeAttribute(\"tabindex\");\n    }\n  }\n\n  @Listen(\"focusout\") onFocusOut(event: FocusEvent): void {\n    const willFocusOutsideTree = !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (willFocusOutsideTree) {\n      this.el.tabIndex = this.getRootTabIndex();\n    }\n  }\n\n  @Listen(\"calciteInternalTreeItemSelect\")\n  onInternalTreeItemSelect(event: CustomEvent<TreeItemSelectDetail>): void {\n    if (this.child) {\n      return;\n    }\n\n    const target = event.target as HTMLCalciteTreeItemElement;\n    const childItems = nodeListToArray(\n      target.querySelectorAll(\"calcite-tree-item\"),\n    ) as HTMLCalciteTreeItemElement[];\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.selectionMode === \"ancestors\") {\n      this.updateAncestorTree(event);\n      return;\n    }\n\n    const isNoneSelectionMode = this.selectionMode === \"none\";\n\n    const shouldSelect =\n      this.selectionMode !== null &&\n      (!target.hasChildren ||\n        (target.hasChildren &&\n          (this.selectionMode === \"children\" || this.selectionMode === \"multichildren\")));\n\n    const shouldDeselectAllChildren = this.selectionMode === \"multichildren\" && target.hasChildren;\n\n    const shouldModifyToCurrentSelection =\n      !isNoneSelectionMode &&\n      event.detail.modifyCurrentSelection &&\n      (this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\");\n\n    const shouldClearCurrentSelection =\n      !shouldModifyToCurrentSelection &&\n      (((this.selectionMode === \"single\" || this.selectionMode === \"multiple\") &&\n        childItems.length <= 0) ||\n        this.selectionMode === \"children\" ||\n        this.selectionMode === \"multichildren\");\n\n    const shouldUpdateExpand =\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode) &&\n      target.hasChildren;\n\n    const targetItems: HTMLCalciteTreeItemElement[] = [];\n\n    if (shouldSelect) {\n      targetItems.push(target);\n    }\n\n    if (shouldClearCurrentSelection) {\n      const selectedItems = nodeListToArray(\n        this.el.querySelectorAll(\"calcite-tree-item[selected]\"),\n      ) as HTMLCalciteTreeItemElement[];\n\n      selectedItems.forEach((treeItem) => {\n        if (!targetItems.includes(treeItem)) {\n          treeItem.selected = false;\n        }\n      });\n    }\n\n    if (\n      shouldUpdateExpand &&\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode)\n    ) {\n      target.expanded = !target.expanded;\n    }\n\n    if (shouldDeselectAllChildren) {\n      childItems.forEach((item) => {\n        item.selected = false;\n        if (item.hasChildren) {\n          item.expanded = false;\n        }\n      });\n    }\n\n    if (shouldModifyToCurrentSelection) {\n      window.getSelection().removeAllRanges();\n    }\n\n    if (shouldModifyToCurrentSelection && target.selected) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = false;\n        }\n      });\n    } else if (!isNoneSelectionMode) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = true;\n        }\n      });\n    }\n\n    this.selectedItems = isNoneSelectionMode\n      ? []\n      : (nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")).filter(\n          (i) => i.selected,\n        ) as HTMLCalciteTreeItemElement[]);\n\n    this.calciteTreeSelect.emit();\n\n    event.stopPropagation();\n  }\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (this.child) {\n      return;\n    }\n\n    const root = this.el;\n    const target = event.target as HTMLCalciteTreeItemElement;\n\n    const supportedKeys = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\", \"Home\", \"End\", \"Tab\"];\n\n    if (!(isTreeItem(target) && this.el.contains(target)) || !supportedKeys.includes(event.key)) {\n      return;\n    }\n\n    const traversableItems = getTraversableItems(root);\n\n    if (event.key === \"Tab\") {\n      // root tabindex will be restored when blurred/focused\n      traversableItems.forEach((item) => (item.tabIndex = -1));\n      return;\n    }\n\n    if (event.key === \"ArrowDown\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const nextItem = traversableItems[currentItemIndex + 1];\n      nextItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowUp\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const previousItem = traversableItems[currentItemIndex - 1];\n      previousItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      if (target.hasChildren && target.expanded) {\n        target.expanded = false;\n        event.preventDefault();\n        return;\n      }\n\n      const rootToItemPath = traversableItems.slice(0, traversableItems.indexOf(target)).reverse();\n      const parentItem = rootToItemPath.find((item) => item.depth === target.depth - 1);\n\n      parentItem?.focus();\n      event.preventDefault();\n\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      if (!target.disabled && target.hasChildren) {\n        if (!target.expanded) {\n          target.expanded = true;\n          event.preventDefault();\n        } else {\n          const currentItemIndex = traversableItems.indexOf(target);\n          const nextItem = traversableItems[currentItemIndex + 1];\n          nextItem?.focus();\n          event.preventDefault();\n        }\n      }\n\n      return;\n    }\n\n    if (event.key === \"Home\") {\n      const firstNode = traversableItems.shift();\n      if (firstNode) {\n        firstNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === \"End\") {\n      const lastNode = traversableItems.pop();\n      if (lastNode) {\n        lastNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n  };\n\n  private updateAncestorTree(event: CustomEvent<TreeItemSelectDetail>): void {\n    const item = event.target as HTMLCalciteTreeItemElement;\n    const updateItem = event.detail.updateItem;\n\n    if (item.disabled || (item.indeterminate && !updateItem)) {\n      return;\n    }\n\n    const ancestors: HTMLCalciteTreeItemElement[] = [];\n    let parent = item.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    while (parent) {\n      ancestors.push(parent);\n      parent = parent.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    }\n\n    const childItems = Array.from(\n      item.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\"),\n    );\n    const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);\n    const childItemsWithChildren = childItems.filter((child) => child.hasChildren);\n\n    let futureSelected;\n    if (updateItem) {\n      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;\n    } else {\n      futureSelected = item.selected;\n    }\n\n    childItemsWithNoChildren.forEach((el) => {\n      el.selected = futureSelected;\n      el.indeterminate = false;\n    });\n\n    function updateItemState(\n      childItems: HTMLCalciteTreeItemElement[],\n      item: HTMLCalciteTreeItemElement,\n    ): void {\n      const selected = childItems.filter((child) => child.selected);\n      const unselected = childItems.filter((child) => !child.selected);\n\n      item.selected = selected.length === childItems.length;\n      item.indeterminate = selected.length > 0 && unselected.length > 0;\n    }\n\n    childItemsWithChildren.reverse().forEach((el) => {\n      const directChildItems = Array.from(\n        el.querySelectorAll<HTMLCalciteTreeItemElement>(\n          \":scope > calcite-tree > calcite-tree-item\",\n        ),\n      );\n\n      updateItemState(directChildItems, el);\n    });\n\n    if (updateItem) {\n      if (item.hasChildren) {\n        updateItemState(childItems, item);\n      } else {\n        item.selected = futureSelected;\n        item.indeterminate = false;\n      }\n    }\n\n    ancestors.forEach((ancestor) => {\n      const descendants = nodeListToArray(ancestor.querySelectorAll(\"calcite-tree-item\"));\n      const activeDescendants = descendants.filter((el) => el.selected);\n      if (activeDescendants.length === 0) {\n        ancestor.selected = false;\n        ancestor.indeterminate = false;\n        return;\n      }\n\n      const indeterminate = activeDescendants.length < descendants.length;\n      ancestor.indeterminate = indeterminate;\n      ancestor.selected = !indeterminate;\n    });\n\n    this.selectedItems = (\n      nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")) as HTMLCalciteTreeItemElement[]\n    ).filter((i) => i.selected);\n\n    if (updateItem) {\n      this.calciteTreeSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the user selects/deselects `calcite-tree-items`.\n   */\n  @Event({ cancelable: false }) calciteTreeSelect: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTreeElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  getRootTabIndex(): number {\n    return !this.child ? 0 : -1;\n  }\n}\n"],"version":3}
+{"file":"calcite-tree.js","mappings":"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","names":[],"sources":["src/components/tree/utils.ts","src/components/tree/tree.scss?tag=calcite-tree&encapsulation=shadow","src/components/tree/tree.tsx"],"sourcesContent":["export function isTreeItem(element: Element): element is HTMLCalciteTreeItemElement {\n  return element?.tagName === \"CALCITE-TREE-ITEM\";\n}\n\nexport function getTraversableItems(root: HTMLCalciteTreeElement): HTMLCalciteTreeItemElement[] {\n  return Array.from(root.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\")).filter(\n    (item): boolean => {\n      let currentItem: HTMLElement = item;\n\n      while (currentItem !== root && currentItem !== undefined) {\n        const parent = currentItem.parentElement;\n        const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;\n\n        if (!traversable) {\n          return false;\n        }\n\n        currentItem = currentItem.parentElement;\n      }\n\n      return true;\n    },\n  );\n}\n",":host {\n  @apply block;\n}\n\n:host(:focus) {\n  @apply outline-none;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, nodeListToArray } from \"../../utils/dom\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { TreeItemSelectDetail } from \"../tree-item/interfaces\";\nimport { getTraversableItems, isTreeItem } from \"./utils\";\n\n/**\n * @slot - A slot for `calcite-tree-item` elements.\n */\n@Component({\n  tag: \"calcite-tree\",\n  styleUrl: \"tree.scss\",\n  shadow: true,\n})\nexport class Tree {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays indentation guide lines. */\n  @Prop({ mutable: true, reflect: true }) lines = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) child: boolean;\n\n  /** Specifies the size of the component. */\n  @Prop({ mutable: true, reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"ancestors\"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"children\"` allows any number of selections from one parent from corresponding parent and child selections,\n   *\n   * `\"multichildren\"` allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"none\"` allows no selections,\n   *\n   * `\"single\"` allows one selection, and\n   *\n   * `\"single-persist\"` allows and requires one selection.\n   *\n   * @default \"single\"\n   */\n  @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode = \"single\";\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteTreeItemElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillRender(): void {\n    const parent: HTMLCalciteTreeElement = this.el.parentElement?.closest(\"calcite-tree\");\n    this.lines = parent ? parent.lines : this.lines;\n    this.scale = parent ? parent.scale : this.scale;\n    this.selectionMode = parent ? parent.selectionMode : this.selectionMode;\n    this.child = !!parent;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-multiselectable={\n          this.child\n            ? undefined\n            : (\n                this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\"\n              ).toString()\n        }\n        onKeyDown={this.keyDownHandler}\n        role={!this.child ? \"tree\" : undefined}\n        tabIndex={this.getRootTabIndex()}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"focus\") onFocus(): void {\n    if (!this.child) {\n      const focusTarget =\n        this.el.querySelector<HTMLCalciteTreeItemElement>(\n          \"calcite-tree-item[selected]:not([disabled])\",\n        ) || this.el.querySelector<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\");\n\n      focusElement(focusTarget);\n    }\n  }\n\n  @Listen(\"focusin\") onFocusIn(event: FocusEvent): void {\n    const focusedFromRootOrOutsideTree =\n      event.relatedTarget === this.el || !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (focusedFromRootOrOutsideTree) {\n      // gives user the ability to tab into external elements (modifying tabindex property will not work in firefox)\n      this.el.removeAttribute(\"tabindex\");\n    }\n  }\n\n  @Listen(\"focusout\") onFocusOut(event: FocusEvent): void {\n    const willFocusOutsideTree = !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (willFocusOutsideTree) {\n      this.el.tabIndex = this.getRootTabIndex();\n    }\n  }\n\n  @Listen(\"calciteInternalTreeItemSelect\")\n  onInternalTreeItemSelect(event: CustomEvent<TreeItemSelectDetail>): void {\n    if (this.child) {\n      return;\n    }\n\n    const target = event.target as HTMLCalciteTreeItemElement;\n    const childItems = nodeListToArray(\n      target.querySelectorAll(\"calcite-tree-item\"),\n    ) as HTMLCalciteTreeItemElement[];\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.selectionMode === \"ancestors\") {\n      this.updateAncestorTree(event);\n      return;\n    }\n\n    const isNoneSelectionMode = this.selectionMode === \"none\";\n\n    const shouldSelect =\n      this.selectionMode !== null &&\n      (!target.hasChildren ||\n        (target.hasChildren &&\n          (this.selectionMode === \"children\" || this.selectionMode === \"multichildren\")));\n\n    const shouldDeselectAllChildren = this.selectionMode === \"multichildren\" && target.hasChildren;\n\n    const shouldModifyToCurrentSelection =\n      !isNoneSelectionMode &&\n      event.detail.modifyCurrentSelection &&\n      (this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\");\n\n    const shouldClearCurrentSelection =\n      !shouldModifyToCurrentSelection &&\n      (((this.selectionMode === \"single\" || this.selectionMode === \"multiple\") &&\n        childItems.length <= 0) ||\n        this.selectionMode === \"children\" ||\n        this.selectionMode === \"multichildren\");\n\n    const shouldUpdateExpand =\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode) &&\n      target.hasChildren;\n\n    const targetItems: HTMLCalciteTreeItemElement[] = [];\n\n    if (shouldSelect) {\n      targetItems.push(target);\n    }\n\n    if (shouldClearCurrentSelection) {\n      const selectedItems = nodeListToArray(\n        this.el.querySelectorAll(\"calcite-tree-item[selected]\"),\n      ) as HTMLCalciteTreeItemElement[];\n\n      selectedItems.forEach((treeItem) => {\n        if (!targetItems.includes(treeItem)) {\n          treeItem.selected = false;\n        }\n      });\n    }\n\n    if (\n      shouldUpdateExpand &&\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode)\n    ) {\n      target.expanded = !target.expanded;\n    }\n\n    if (shouldDeselectAllChildren) {\n      childItems.forEach((item) => {\n        item.selected = false;\n        if (item.hasChildren) {\n          item.expanded = false;\n        }\n      });\n    }\n\n    if (shouldModifyToCurrentSelection) {\n      window.getSelection().removeAllRanges();\n    }\n\n    if (shouldModifyToCurrentSelection && target.selected) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = false;\n        }\n      });\n    } else if (!isNoneSelectionMode) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = this.selectionMode !== \"single\" || !treeItem.selected;\n        }\n      });\n    }\n\n    this.selectedItems = isNoneSelectionMode\n      ? []\n      : (nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")).filter(\n          (i) => i.selected,\n        ) as HTMLCalciteTreeItemElement[]);\n\n    this.calciteTreeSelect.emit();\n\n    event.stopPropagation();\n  }\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (this.child) {\n      return;\n    }\n\n    const root = this.el;\n    const target = event.target as HTMLCalciteTreeItemElement;\n\n    const supportedKeys = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\", \"Home\", \"End\", \"Tab\"];\n\n    if (!(isTreeItem(target) && this.el.contains(target)) || !supportedKeys.includes(event.key)) {\n      return;\n    }\n\n    const traversableItems = getTraversableItems(root);\n\n    if (event.key === \"Tab\") {\n      // root tabindex will be restored when blurred/focused\n      traversableItems.forEach((item) => (item.tabIndex = -1));\n      return;\n    }\n\n    if (event.key === \"ArrowDown\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const nextItem = traversableItems[currentItemIndex + 1];\n      nextItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowUp\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const previousItem = traversableItems[currentItemIndex - 1];\n      previousItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      if (target.hasChildren && target.expanded) {\n        target.expanded = false;\n        event.preventDefault();\n        return;\n      }\n\n      const rootToItemPath = traversableItems.slice(0, traversableItems.indexOf(target)).reverse();\n      const parentItem = rootToItemPath.find((item) => item.depth === target.depth - 1);\n\n      parentItem?.focus();\n      event.preventDefault();\n\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      if (!target.disabled && target.hasChildren) {\n        if (!target.expanded) {\n          target.expanded = true;\n          event.preventDefault();\n        } else {\n          const currentItemIndex = traversableItems.indexOf(target);\n          const nextItem = traversableItems[currentItemIndex + 1];\n          nextItem?.focus();\n          event.preventDefault();\n        }\n      }\n\n      return;\n    }\n\n    if (event.key === \"Home\") {\n      const firstNode = traversableItems.shift();\n      if (firstNode) {\n        firstNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === \"End\") {\n      const lastNode = traversableItems.pop();\n      if (lastNode) {\n        lastNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n  };\n\n  private updateAncestorTree(event: CustomEvent<TreeItemSelectDetail>): void {\n    const item = event.target as HTMLCalciteTreeItemElement;\n    const updateItem = event.detail.updateItem;\n\n    if (item.disabled || (item.indeterminate && !updateItem)) {\n      return;\n    }\n\n    const ancestors: HTMLCalciteTreeItemElement[] = [];\n    let parent = item.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    while (parent) {\n      ancestors.push(parent);\n      parent = parent.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    }\n\n    const childItems = Array.from(\n      item.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\"),\n    );\n    const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);\n    const childItemsWithChildren = childItems.filter((child) => child.hasChildren);\n\n    let futureSelected;\n    if (updateItem) {\n      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;\n    } else {\n      futureSelected = item.selected;\n    }\n\n    childItemsWithNoChildren.forEach((el) => {\n      el.selected = futureSelected;\n      el.indeterminate = false;\n    });\n\n    function updateItemState(\n      childItems: HTMLCalciteTreeItemElement[],\n      item: HTMLCalciteTreeItemElement,\n    ): void {\n      const selected = childItems.filter((child) => child.selected);\n      const unselected = childItems.filter((child) => !child.selected);\n\n      item.selected = selected.length === childItems.length;\n      item.indeterminate = selected.length > 0 && unselected.length > 0;\n    }\n\n    childItemsWithChildren.reverse().forEach((el) => {\n      const directChildItems = Array.from(\n        el.querySelectorAll<HTMLCalciteTreeItemElement>(\n          \":scope > calcite-tree > calcite-tree-item\",\n        ),\n      );\n\n      updateItemState(directChildItems, el);\n    });\n\n    if (updateItem) {\n      if (item.hasChildren) {\n        updateItemState(childItems, item);\n      } else {\n        item.selected = futureSelected;\n        item.indeterminate = false;\n      }\n    }\n\n    ancestors.forEach((ancestor) => {\n      const descendants = nodeListToArray(ancestor.querySelectorAll(\"calcite-tree-item\"));\n      const activeDescendants = descendants.filter((el) => el.selected);\n      if (activeDescendants.length === 0) {\n        ancestor.selected = false;\n        ancestor.indeterminate = false;\n        return;\n      }\n\n      const indeterminate = activeDescendants.length < descendants.length;\n      ancestor.indeterminate = indeterminate;\n      ancestor.selected = !indeterminate;\n    });\n\n    this.selectedItems = (\n      nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")) as HTMLCalciteTreeItemElement[]\n    ).filter((i) => i.selected);\n\n    if (updateItem) {\n      this.calciteTreeSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the user selects/deselects `calcite-tree-items`.\n   */\n  @Event({ cancelable: false }) calciteTreeSelect: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTreeElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  getRootTabIndex(): number {\n    return !this.child ? 0 : -1;\n  }\n}\n"],"version":3}

package/dist/components/calcite-value-list-item.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.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -137,7 +137,7 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class ValueListItem exten
         }
     }
     render() {
-        return (h(Host, { key: '1491ba606f6bbcd88957c9e12a89999232fcf7da', id: this.el.id || this.guid }, h(InteractiveContainer, { key: 'd0eacc538e5acca1eeaf85526ab6bb5544590b57', disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { key: '85cce1add254515b067372b9b8903e26b96650d5', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
+        return (h(Host, { key: '5eedefaa65be96d0553a7869a3410b3f599ad0d2', id: this.el.id || this.guid }, h(InteractiveContainer, { key: '9c85c73f602865e3cf90d70db801135e3863433b', disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { key: '916fb72ef07bd99c28eb1a3146691d0e2b2ed296', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
     }
     get el() { return this; }
     static get style() { return CalciteValueListItemStyle0; }