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

package/dist/esm/calcite-card-group.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-card-group.entry.js","mappings":"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","names":[],"sources":["src/components/card-group/card-group.scss?tag=calcite-card-group&encapsulation=shadow","src/components/card-group/card-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-group-gap: Specifies the gap between slotted components.\n */\n\n:host {\n  --calcite-card-group-gap: var(--calcite-size-md);\n  display: block;\n}\n\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--calcite-card-group-gap);\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-card-group.entry.js","mappings":"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","names":[],"sources":["src/components/card-group/card-group.scss?tag=calcite-card-group&encapsulation=shadow","src/components/card-group/card-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-group-gap: Specifies the gap between slotted components.\n */\n\n:host {\n  --calcite-card-group-gap: var(--calcite-size-md);\n  display: block;\n}\n\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--calcite-card-group-gap);\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/calcite-card.entry.js

@@ -1,19 +1,20 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-83937316.js';
-import { b as slotChangeHasAssignedElement, e as getSlotted, t as toAriaBoolean } from './dom-63b96658.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-98b6e661.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-743d8f1f.js';
-import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable-38c7a128.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-9e5e40e3.js';
-import { i as isActivationKey } from './key-b5c2cd7d.js';
-import './guid-e88236cd.js';
-import './resources-3625820f.js';
-import './observers-b1ddc634.js';
-import './browser-08b65933.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6356d89d.js';
+import { b as slotChangeHasAssignedElement, e as getSlotted, t as toAriaBoolean } from './dom-ca168555.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6c2f9fbe.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-e7f9e515.js';
+import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable-6fb95cc3.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-0082d873.js';
+import { i as isActivationKey } from './key-8328efaf.js';
+import './guid-95f744cf.js';
+import './resources-a24f17b0.js';
+import './observers-39d61a28.js';
+import './component-e47bd838.js';
+import './browser-096308d4.js';
 
 const CSS = {
     container: "container",

package/dist/esm/calcite-card.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/resources.ts","src/components/card/card.scss?tag=calcite-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentWrapper: \"content-wrapper\",\n  header: \"header\",\n  footer: \"footer\",\n  heading: \"heading\",\n  description: \"description\",\n  checkboxWrapper: \"checkbox-wrapper\",\n  checkboxWrapperDeprecated: \"checkbox-wrapper-deprecated\",\n  thumbnailWrapper: \"thumbnail-wrapper\",\n  headerTextContainer: \"header-text-container\",\n  cardContent: \"card-content\",\n  hasSlottedContent: \"has-slotted-content\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n  heading: \"heading\",\n  description: \"description\",\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n  title: \"title\",\n  subtitle: \"subtitle\",\n};\n\nexport const ICONS = {\n  selected: \"check-square-f\",\n  unselected: \"square\",\n  selectedSingle: \"circle-f\",\n  unselectedSingle: \"circle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-background-color: Specifies the background color of the component.\n * @prop --calcite-card-border-color: Specifies the border color of the component.\n * @prop --calcite-card-shadow: Specifies the shadow of the component.\n * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.\n * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.\n * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.\n * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.\n * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.\n * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.\n * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.\n * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.\n * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.\n *\n */\n\n:host {\n  @apply block max-w-full;\n  --calcite-card-corner-radius: var(--calcite-corner-radius-sharp);\n  --calcite-card-background-color: var(--calcite-color-foreground-1);\n  --calcite-card-border-color: var(--calcite-color-border-3);\n  --calcite-card-shadow: var(--calcite-shadow-none);\n  --calcite-card-accent-color-selected: var(--calcite-color-brand);\n  --calcite-card-selection-background-color: transparent;\n  --calcite-card-selection-background-color-hover: var(--calcite-color-transparent-hover);\n  --calcite-card-selection-background-color-active: var(--calcite-color-transparent-press);\n  --calcite-card-selection-background-color-selected: transparent;\n  --calcite-card-selection-icon-color: var(--calcite-color-text-3);\n  --calcite-card-selection-icon-color-hover: var(--calcite-color-text-2);\n  --calcite-card-selection-icon-color-selected: var(--calcite-color-brand);\n}\n\n.content-wrapper {\n  @apply relative\n    flex\n    h-full\n    flex-col\n    justify-between\n    overflow-hidden;\n  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color);\n  border-radius: var(--calcite-card-corner-radius);\n  background-color: var(--calcite-card-background-color);\n  box-shadow: var(--calcite-card-shadow);\n  pointer-events: none;\n}\n\n::slotted(*) {\n  @apply pointer-events-auto;\n}\n\n:host(:not([selectable])) {\n  .content-wrapper {\n    &:not(.non-interactive) {\n      @apply focus-base;\n    }\n    &:not(.non-interactive):focus {\n      @apply focus-outset;\n    }\n  }\n}\n\n.container {\n  @apply relative flex flex-auto flex-col;\n}\n\n:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {\n  @apply pointer-events-none;\n  opacity: $calcite-opacity-0;\n}\n\n:host([loading]) .calcite-card-loader-container {\n  @apply absolute inset-0 flex items-center;\n}\n\n.header {\n  @apply flex flex-row items-start;\n}\n\n.footer {\n  @apply flex mt-auto flex-row content-between justify-between;\n  padding-inline: var(--calcite-spacing-md);\n  padding-block-start: var(--calcite-spacing-xxs);\n  padding-block-end: var(--calcite-spacing-md);\n}\n\n.header-text-container {\n  @apply flex flex-col px-3 py-2 w-full justify-center;\n  &:not(:only-child) {\n    @apply pr-0.5;\n  }\n}\n\n.footer {\n  @apply mt-auto flex-row content-between\n    justify-between\n    px-3\n    pt-1\n    pb-3;\n}\n\n.card-content {\n  @apply h-auto text-n2-wrap;\n}\n\n.has-slotted-content {\n  @apply p-3;\n}\n\n:host([selected]) .content-wrapper {\n  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected);\n}\n\n:host([selectable]) .header {\n  padding-inline-end: var(--calcite-spacing-xxxl);\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"subtitle\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"heading\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"description\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"thumbnail\", \"img\") {\n  @apply min-w-full max-w-full;\n}\n\n@include slotted(\"footer-start\", \"*\") {\n  @apply text-n2-wrap self-center;\n  margin-inline-end: auto;\n}\n\n@include slotted(\"footer-end\", \"*\") {\n  @apply text-n2-wrap self-center;\n}\n\n.checkbox-wrapper-deprecated {\n  @apply absolute pointer-events-auto;\n  inset-block-start: var(--calcite-spacing-sm);\n  inset-inline-end: var(--calcite-spacing-sm);\n  margin: 0;\n  padding: 0;\n}\n\n.checkbox-wrapper {\n  @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;\n  background-color: var(--calcite-card-selection-background-color);\n  display: flex;\n  align-items: center;\n  justify-items: center;\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color);\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover);\n    --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-active);\n  }\n  & calcite-icon {\n    pointer-events: none;\n  }\n}\n\n:host([selected]) .checkbox-wrapper {\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);\n  background-color: var(--calcite-card-selection-background-color-selected);\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover);\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-active);\n  }\n}\n\n:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {\n  background-color: var(--calcite-card-selection-background-color-hover);\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);\n}\n\n:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {\n  background-color: var(--calcite-card-selection-background-color-active);\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);\n}\n\n.thumbnail-wrapper {\n  @apply flex;\n}\n\n.content-wrapper.inline {\n  @apply flex-row;\n\n  & > .container {\n    @apply w-3/5;\n  }\n  & > .thumbnail-wrapper {\n    @apply items-start w-2/5;\n  }\n\n  @include slotted(\"thumbnail\", \"img\") {\n    @apply w-full;\n  }\n}\n\nslot[name=\"footer-start\"]::slotted(*),\nslot[name=\"footer-end\"]::slotted(*) {\n  @apply flex gap-1;\n}\n\n@include base-component();\n@include disabled();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getSlotted, slotChangeHasAssignedElement, toAriaBoolean } 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 {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition } from \"../interfaces\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: 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: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\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<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\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) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onClick={this.selectCardDeprecated}\n          onKeyDown={this.cardSelectKeyDownDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private cardSelectKeyDownDeprecated = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.selectCardDeprecated();\n        event.preventDefault();\n        break;\n    }\n  };\n\n  private selectCardDeprecated = (): void => {\n    this.selected = !this.selected;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return getSlotted(this.el, SLOTS.thumbnail) ? (\n      <section class={CSS.thumbnailWrapper}>\n        <slot name={SLOTS.thumbnail} />\n      </section>\n    ) : null;\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const { el } = this;\n    const heading = getSlotted(el, SLOTS.heading);\n    const description = getSlotted(el, SLOTS.description);\n    const hasHeader = heading || description;\n    const subtitle = getSlotted(el, SLOTS.subtitle);\n    const title = getSlotted(el, SLOTS.title);\n    const hasDeprecatedHeader = subtitle || title;\n    return hasHeader || hasDeprecatedHeader ? (\n      <header class={CSS.header}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot key=\"heading-slot\" name={SLOTS.heading} />\n          <slot key=\"description-slot\" name={SLOTS.description} />\n          <slot key=\"deprecated-title-slot\" name={SLOTS.title} />\n          <slot key=\"deprecated-subtitle-slot\" name={SLOTS.subtitle} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    ) : null;\n  }\n\n  private renderFooter(): VNode {\n    const { el } = this;\n    const startFooter = getSlotted(el, SLOTS.footerStart);\n    const endFooter = getSlotted(el, SLOTS.footerEnd);\n\n    const hasFooter = startFooter || endFooter;\n    return hasFooter ? (\n      <footer class={CSS.footer}>\n        <slot name={SLOTS.footerStart} />\n        <slot name={SLOTS.footerEnd} />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-disabled={this.disabled}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/resources.ts","src/components/card/card.scss?tag=calcite-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentWrapper: \"content-wrapper\",\n  header: \"header\",\n  footer: \"footer\",\n  heading: \"heading\",\n  description: \"description\",\n  checkboxWrapper: \"checkbox-wrapper\",\n  checkboxWrapperDeprecated: \"checkbox-wrapper-deprecated\",\n  thumbnailWrapper: \"thumbnail-wrapper\",\n  headerTextContainer: \"header-text-container\",\n  cardContent: \"card-content\",\n  hasSlottedContent: \"has-slotted-content\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n  heading: \"heading\",\n  description: \"description\",\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n  title: \"title\",\n  subtitle: \"subtitle\",\n};\n\nexport const ICONS = {\n  selected: \"check-square-f\",\n  unselected: \"square\",\n  selectedSingle: \"circle-f\",\n  unselectedSingle: \"circle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-background-color: Specifies the background color of the component.\n * @prop --calcite-card-border-color: Specifies the border color of the component.\n * @prop --calcite-card-shadow: Specifies the shadow of the component.\n * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.\n * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.\n * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.\n * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.\n * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.\n * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.\n * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.\n * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.\n * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.\n *\n */\n\n:host {\n  @apply block max-w-full;\n  --calcite-card-corner-radius: var(--calcite-corner-radius-sharp);\n  --calcite-card-background-color: var(--calcite-color-foreground-1);\n  --calcite-card-border-color: var(--calcite-color-border-3);\n  --calcite-card-shadow: var(--calcite-shadow-none);\n  --calcite-card-accent-color-selected: var(--calcite-color-brand);\n  --calcite-card-selection-background-color: transparent;\n  --calcite-card-selection-background-color-hover: var(--calcite-color-transparent-hover);\n  --calcite-card-selection-background-color-active: var(--calcite-color-transparent-press);\n  --calcite-card-selection-background-color-selected: transparent;\n  --calcite-card-selection-icon-color: var(--calcite-color-text-3);\n  --calcite-card-selection-icon-color-hover: var(--calcite-color-text-2);\n  --calcite-card-selection-icon-color-selected: var(--calcite-color-brand);\n}\n\n.content-wrapper {\n  @apply relative\n    flex\n    h-full\n    flex-col\n    justify-between\n    overflow-hidden;\n  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color);\n  border-radius: var(--calcite-card-corner-radius);\n  background-color: var(--calcite-card-background-color);\n  box-shadow: var(--calcite-card-shadow);\n  pointer-events: none;\n}\n\n::slotted(*) {\n  @apply pointer-events-auto;\n}\n\n:host(:not([selectable])) {\n  .content-wrapper {\n    &:not(.non-interactive) {\n      @apply focus-base;\n    }\n    &:not(.non-interactive):focus {\n      @apply focus-outset;\n    }\n  }\n}\n\n.container {\n  @apply relative flex flex-auto flex-col;\n}\n\n:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {\n  @apply pointer-events-none;\n  opacity: $calcite-opacity-0;\n}\n\n:host([loading]) .calcite-card-loader-container {\n  @apply absolute inset-0 flex items-center;\n}\n\n.header {\n  @apply flex flex-row items-start;\n}\n\n.footer {\n  @apply flex mt-auto flex-row content-between justify-between;\n  padding-inline: var(--calcite-spacing-md);\n  padding-block-start: var(--calcite-spacing-xxs);\n  padding-block-end: var(--calcite-spacing-md);\n}\n\n.header-text-container {\n  @apply flex flex-col px-3 py-2 w-full justify-center;\n  &:not(:only-child) {\n    @apply pr-0.5;\n  }\n}\n\n.footer {\n  @apply mt-auto flex-row content-between\n    justify-between\n    px-3\n    pt-1\n    pb-3;\n}\n\n.card-content {\n  @apply h-auto text-n2-wrap;\n}\n\n.has-slotted-content {\n  @apply p-3;\n}\n\n:host([selected]) .content-wrapper {\n  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected);\n}\n\n:host([selectable]) .header {\n  padding-inline-end: var(--calcite-spacing-xxxl);\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"subtitle\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"heading\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"description\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"thumbnail\", \"img\") {\n  @apply min-w-full max-w-full;\n}\n\n@include slotted(\"footer-start\", \"*\") {\n  @apply text-n2-wrap self-center;\n  margin-inline-end: auto;\n}\n\n@include slotted(\"footer-end\", \"*\") {\n  @apply text-n2-wrap self-center;\n}\n\n.checkbox-wrapper-deprecated {\n  @apply absolute pointer-events-auto;\n  inset-block-start: var(--calcite-spacing-sm);\n  inset-inline-end: var(--calcite-spacing-sm);\n  margin: 0;\n  padding: 0;\n}\n\n.checkbox-wrapper {\n  @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;\n  background-color: var(--calcite-card-selection-background-color);\n  display: flex;\n  align-items: center;\n  justify-items: center;\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color);\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover);\n    --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-active);\n  }\n  & calcite-icon {\n    pointer-events: none;\n  }\n}\n\n:host([selected]) .checkbox-wrapper {\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);\n  background-color: var(--calcite-card-selection-background-color-selected);\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover);\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-active);\n  }\n}\n\n:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {\n  background-color: var(--calcite-card-selection-background-color-hover);\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);\n}\n\n:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {\n  background-color: var(--calcite-card-selection-background-color-active);\n  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);\n}\n\n.thumbnail-wrapper {\n  @apply flex;\n}\n\n.content-wrapper.inline {\n  @apply flex-row;\n\n  & > .container {\n    @apply w-3/5;\n  }\n  & > .thumbnail-wrapper {\n    @apply items-start w-2/5;\n  }\n\n  @include slotted(\"thumbnail\", \"img\") {\n    @apply w-full;\n  }\n}\n\nslot[name=\"footer-start\"]::slotted(*),\nslot[name=\"footer-end\"]::slotted(*) {\n  @apply flex gap-1;\n}\n\n@include base-component();\n@include disabled();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getSlotted, slotChangeHasAssignedElement, toAriaBoolean } 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 {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition } from \"../interfaces\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: 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: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\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<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\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) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onClick={this.selectCardDeprecated}\n          onKeyDown={this.cardSelectKeyDownDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private cardSelectKeyDownDeprecated = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.selectCardDeprecated();\n        event.preventDefault();\n        break;\n    }\n  };\n\n  private selectCardDeprecated = (): void => {\n    this.selected = !this.selected;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return getSlotted(this.el, SLOTS.thumbnail) ? (\n      <section class={CSS.thumbnailWrapper}>\n        <slot name={SLOTS.thumbnail} />\n      </section>\n    ) : null;\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const { el } = this;\n    const heading = getSlotted(el, SLOTS.heading);\n    const description = getSlotted(el, SLOTS.description);\n    const hasHeader = heading || description;\n    const subtitle = getSlotted(el, SLOTS.subtitle);\n    const title = getSlotted(el, SLOTS.title);\n    const hasDeprecatedHeader = subtitle || title;\n    return hasHeader || hasDeprecatedHeader ? (\n      <header class={CSS.header}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot key=\"heading-slot\" name={SLOTS.heading} />\n          <slot key=\"description-slot\" name={SLOTS.description} />\n          <slot key=\"deprecated-title-slot\" name={SLOTS.title} />\n          <slot key=\"deprecated-subtitle-slot\" name={SLOTS.subtitle} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    ) : null;\n  }\n\n  private renderFooter(): VNode {\n    const { el } = this;\n    const startFooter = getSlotted(el, SLOTS.footerStart);\n    const endFooter = getSlotted(el, SLOTS.footerEnd);\n\n    const hasFooter = startFooter || endFooter;\n    return hasFooter ? (\n      <footer class={CSS.footer}>\n        <slot name={SLOTS.footerStart} />\n        <slot name={SLOTS.footerEnd} />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-disabled={this.disabled}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/calcite-carousel_2.entry.js

@@ -1,20 +1,21 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-83937316.js';
-import { s as slotChangeGetAssignedElements, k as focusElementInGroup, t as toAriaBoolean, g as getElementDir } from './dom-63b96658.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-98b6e661.js';
-import { g as guid } from './guid-e88236cd.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-9e5e40e3.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-38c7a128.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-743d8f1f.js';
-import { g as getRoundRobinIndex } from './array-0193d0fc.js';
-import './resources-3625820f.js';
-import './key-b5c2cd7d.js';
-import './observers-b1ddc634.js';
-import './browser-08b65933.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6356d89d.js';
+import { s as slotChangeGetAssignedElements, k as focusElementInGroup, t as toAriaBoolean, g as getElementDir, A as whenAnimationDone } from './dom-ca168555.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6c2f9fbe.js';
+import { g as guid } from './guid-95f744cf.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-0082d873.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-6fb95cc3.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-e7f9e515.js';
+import { g as getRoundRobinIndex } from './array-a3b19217.js';
+import './resources-a24f17b0.js';
+import './key-8328efaf.js';
+import './observers-39d61a28.js';
+import './browser-096308d4.js';
+import './component-e47bd838.js';
 
 const DURATION = 6000;
 const CSS$1 = {
@@ -107,18 +108,23 @@ const Carousel = class {
         this.handleArrowClick = (event) => {
             const direction = event.target.dataset.direction;
             if (direction === "next") {
+                this.direction = "forward";
                 this.nextItem(true);
             }
             else if (direction === "previous") {
+                this.direction = "backward";
                 this.previousItem();
             }
         };
         this.handleItemSelection = (event) => {
+            const item = event.target;
+            const requestedPosition = parseInt(item.dataset.index);
+            if (requestedPosition === this.selectedIndex) {
+                return;
+            }
             if (this.playing) {
                 this.handlePause(true);
             }
-            const item = event.target;
-            const requestedPosition = parseInt(item.dataset.index);
             this.direction = requestedPosition > this.selectedIndex ? "forward" : "backward";
             this.setSelectedItem(requestedPosition, true);
         };
@@ -227,6 +233,9 @@ const Carousel = class {
         this.storeContainerRef = (el) => {
             this.container = el;
         };
+        this.storeItemContainerRef = (el) => {
+            this.itemContainer = el;
+        };
         // --------------------------------------------------------------------------
         //
         //  Render Methods
@@ -273,7 +282,7 @@ const Carousel = class {
         this.selectedItem = undefined;
         this.selectedIndex = undefined;
         this.items = [];
-        this.direction = undefined;
+        this.direction = "standby";
         this.defaultMessages = undefined;
         this.playing = false;
         this.suspendedDueToFocus = false;
@@ -349,6 +358,13 @@ const Carousel = class {
         }
         this.handlePause(true);
     }
+    async directionWatcher(direction) {
+        if (direction === "standby") {
+            return;
+        }
+        await whenAnimationDone(this.itemContainer, direction === "forward" ? "item-forward" : "item-backward");
+        this.direction = "standby";
+    }
     playingWatcher() {
         this.paused = !this.playing;
     }
@@ -409,21 +425,24 @@ const Carousel = class {
     }
     render() {
         const { direction } = this;
-        return (h(Host, { key: '1bd4f6bf8356ebb754920f74face6723c34a9b29' }, h(InteractiveContainer, { key: '641318158e4a7b7c048405836de1c98d6998b0e6', disabled: this.disabled }, h("div", { key: '3f5adc27ba53a673adf5e7baac3f928ace89715d', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (h(Host, { key: '2b23a26497312fd612f485c992fb7b9c8cdbb996' }, h(InteractiveContainer, { key: '7785faa3c6d065644f7629277d16be3165e1c576', disabled: this.disabled }, h("div", { key: '2bfbfdb794a699d387009c69a47d25e384dbf179', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS$1.container]: true,
                 [CSS$1.containerOverlaid]: this.controlOverlay,
                 [CSS$1.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, h("section", { key: 'd86ba89c88efa3c3192bac0d8d1c18db57bed56b', class: {
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, h("section", { key: '56ec54ffe2e77efc01d566e4657f890e0c2276fc', class: {
                 [CSS$1.itemContainer]: true,
                 [CSS$1.itemContainerForward]: direction === "forward",
                 [CSS$1.itemContainerBackward]: direction === "backward",
-            }, id: this.containerId }, h("slot", { key: '06bb0733df4ae1c12a3876f797bb8b0c7e55e3ab', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+            }, id: this.containerId,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: this.storeItemContainerRef }, h("slot", { key: '6f58f05da06d1a919c6a2607b8853f26cf8effea', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "autoplay": ["autoplayWatcher"],
         "messageOverrides": ["onMessagesChange"],
+        "direction": ["directionWatcher"],
         "playing": ["playingWatcher"],
         "suspendedDueToFocus": ["suspendWatcher"],
         "suspendedDueToHover": ["suspendWatcher"],

package/dist/esm/calcite-carousel_2.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-carousel.calcite-carousel-item.entry.js","mappings":"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","names":["CSS"],"sources":["src/components/carousel/resources.ts","src/components/carousel/carousel.scss?tag=calcite-carousel&encapsulation=shadow","src/components/carousel/carousel.tsx","src/components/carousel-item/resources.ts","src/components/carousel-item/carousel-item.scss?tag=calcite-carousel-item&encapsulation=shadow","src/components/carousel-item/carousel-item.tsx"],"sourcesContent":["export const DURATION = 6000;\n\nexport const CSS = {\n  container: \"container\",\n  containerOverlaid: \"container--overlaid\",\n  containerEdged: \"container--edged\",\n  itemContainer: \"item-container\",\n  itemContainerForward: \"item-container--forward\",\n  itemContainerBackward: \"item-container--backward\",\n  pagination: \"pagination\",\n  paginationItems: \"pagination-items\",\n  paginationItem: \"pagination-item\",\n  paginationItemIndividual: \"pagination-item--individual\",\n  paginationItemSelected: \"pagination-item--selected\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n  autoplayControl: \"autoplay-control\",\n  autoplayProgress: \"autoplay-progress\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  inactive: \"bullet-point\",\n  active: \"bullet-point-large\",\n  pause: \"pause-f\",\n  play: \"play-f\",\n};\n","/**\n  * Local props\n  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.\n  * These should be made public and documented post-release of token work.\n  *\n  * --calcite-internal-carousel-item-background-color-active: Specifies the background color of the component's slide item while active.\n  * --calcite-internal-carousel-item-background-color-hover: Specifies the background color of the component's slide item while hovered.\n  * --calcite-internal-carousel-item-background-color-selected: Specifies the background color of the component's slide item when selected.\n  * --calcite-internal-carousel-item-background-color: Specifies the background color of the component's slide item.\n  * --calcite-internal-carousel-item-icon-color-hover: Specifies the icon color of the component's slide item while hovered.\n  * --calcite-internal-carousel-item-icon-color-selected: Specifies the icon color of the component's slide item when selected.\n  * --calcite-internal-carousel-item-icon-color: Specifies the icon color of the component's slide item.\n  * --calcite-internal-carousel-control-color-hover: Specifies the icon color of the component's slide slide arrow and autoplay button while hovered.\n  * --calcite-internal-carousel-control-color: Specifies the icon color of the component's slide arrow and autoplay button.\n  * --calcite-internal-carousel-autoplay-progress-background-color: Specifies the background color of the component's progress when `autoplay`.\n  * --calcite-internal-carousel-autoplay-progress-fill-color: Specifies the fill color of the component's progress when `autoplay`.\n  *\n*/\n\n:host {\n  @apply flex w-full;\n  --calcite-internal-internal-carousel-item-space: 1.5rem;\n  --calcite-internal-internal-carousel-item-space-wide: 3.5rem;\n  --calcite-internal-internal-carousel-item-background-color: var(\n    --calcite-internal-carousel-item-background-color,\n    var(--calcite-color-foreground-1)\n  );\n  --calcite-internal-internal-carousel-item-background-color-hover: var(\n    --calcite-internal-carousel-item-background-color-hover,\n    var(--calcite-color-foreground-2)\n  );\n  --calcite-internal-internal-carousel-item-background-color-active: var(\n    --calcite-internal-carousel-item-background-color-active,\n    var(--calcite-color-foreground-2)\n  );\n  --calcite-internal-internal-carousel-item-background-color-selected: var(\n    --calcite-internal-carousel-item-background-color-selected,\n    var(--calcite-color-foreground-1)\n  );\n  --calcite-internal-internal-carousel-item-icon-color-hover: var(\n    --calcite-internal-carousel-item-icon-color-hover,\n    var(--calcite-action-color-transparent-hover)\n  );\n  --calcite-internal-internal-carousel-item-icon-color: var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-3)\n  );\n  --calcite-internal-internal-carousel-item-icon-color-selected: var(\n    --calcite-internal-carousel-item-icon-color-selected,\n    var(--calcite-color-brand)\n  );\n  --calcite-internal-internal-carousel-control-color-hover: var(\n    --calcite-internal-carousel-control-color-hover,\n    var(--calcite-internal-carousel-item-icon-color-hover)\n  );\n  --calcite-internal-internal-carousel-control-color: var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-input)\n  );\n  --calcite-internal-internal-carousel-autoplay-progress-background-color: var(\n    --calcite-internal-carousel-autoplay-progress-background-color,\n    var(--calcite-color-border-3)\n  );\n  --calcite-internal-internal-carousel-autoplay-progress-fill-color: var(\n    --calcite-internal-carousel-autoplay-progress-fill-color,\n    var(--calcite-color-brand)\n  );\n}\n\n.container {\n  @apply focus-base\n   relative\n    flex\n    flex-col\n    overflow-hidden\n    text-color-2\n    text-n1h\n    w-full;\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n.container--edged:not(.container--overlaid) {\n  padding-inline: var(--calcite-internal-internal-carousel-item-space-wide);\n  inline-size: calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2);\n}\n\n.item-container {\n  @apply flex\n    items-start\n    justify-center\n    overflow-auto\n    flex-auto\n    p-1;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.container--overlaid .item-container {\n  @apply p-0;\n}\n\n.item-container--forward {\n  animation-name: item-forward;\n}\n\n.item-container--backward {\n  animation-name: item-backward;\n}\n\ncalcite-carousel-item:not([selected]) {\n  opacity: 0;\n}\n\n.pagination {\n  @apply flex\n  flex-row\n  items-center\n  justify-center\n  m-3;\n  inline-size: auto;\n}\n\n.pagination-items {\n  @apply flex flex-row items-center;\n}\n\n.container--overlaid .pagination {\n  position: absolute;\n}\n\n.pagination-item.page-next,\n.pagination-item.page-previous {\n  color: var(--calcite-internal-internal-carousel-control-color);\n  &:hover {\n    color: var(--calcite-internal-internal-carousel-control-color-hover);\n  }\n}\n\n.container--edged {\n  .page-next,\n  .page-previous {\n    @apply h-12 w-12;\n    position: absolute;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n  }\n\n  .page-next {\n    inset-inline-end: 0;\n  }\n\n  .page-previous {\n    inset-inline-start: 0;\n  }\n}\n\n.container--overlaid .pagination {\n  inset-block-start: unset;\n  inset-block-end: 0;\n  inset-inline: 0;\n}\n\n.pagination-item.autoplay-control {\n  position: relative;\n  color: var(--calcite-internal-internal-carousel-control-color);\n  --calcite-color-brand: var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);\n  --calcite-color-border-3: var(--calcite-internal-internal-carousel-autoplay-progress-background-color);\n}\n\n.autoplay-control:focus .autoplay-progress {\n  inset-block-end: 4px;\n  inset-inline: 2px;\n  inline-size: calc(100% - 4px);\n}\n\n.autoplay-progress {\n  position: absolute;\n  inset-block-end: 2px;\n  inset-inline: 0;\n  inline-size: 100%;\n}\n\n.pagination-item {\n  @apply focus-base\n    transition-default\n    m-0\n    h-8\n    w-8\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color);\n  color: var(--calcite-internal-internal-carousel-item-icon-color);\n  &:hover {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);\n  }\n  & calcite-icon {\n    color: inherit;\n    pointer-events: none;\n  }\n  &.pagination-item--selected {\n    --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color-selected);\n    --calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-selected);\n  }\n}\n\n.container--overlaid .pagination-item {\n  background-color: var(--calcite-internal-internal-carousel-item-background-color);\n  &:hover {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n  }\n  &:active {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n  }\n}\n\n@keyframes item-forward {\n  0% {\n    transform: translate3d(100px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes item-backward {\n  0% {\n    transform: translate3d(-100px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@include disabled();\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  focusElementInGroup,\n  getElementDir,\n  slotChangeGetAssignedElements,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  updateHostInteraction,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n} from \"../../utils/interactive\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { getRoundRobinIndex } from \"../../utils/array\";\nimport { CSS, DURATION, ICONS } from \"./resources\";\nimport { CarouselMessages } from \"./assets/carousel/t9n\";\nimport { ArrowType, AutoplayType } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding `calcite-carousel-item`s.\n */\n@Component({\n  tag: \"calcite-carousel\",\n  styleUrl: \"carousel.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Carousel\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the carousel will autoplay and controls will be displayed. When \"paused\" at time of initialization, the carousel will not autoplay, but controls will be displayed.\n   */\n  @Prop({ reflect: true }) autoplay: AutoplayType = false;\n\n  @Watch(\"autoplay\")\n  autoplayWatcher(autoplay: boolean): void {\n    if (!autoplay) {\n      this.handlePause(false);\n    }\n  }\n\n  /**\n   * Specifies how and if the \"previous\" and \"next\" arrows are displayed.\n   */\n  @Prop({ reflect: true }) arrowType: ArrowType = \"inline\";\n\n  /**\n   *  When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.\n   */\n  @Prop({ reflect: true }) autoplayDuration = DURATION;\n\n  /**\n   * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.\n   */\n  @Prop({ reflect: true }) controlOverlay = false;\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   * Accessible name for the component.\n   */\n  @Prop() label!: string;\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: CarouselMessages;\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<CarouselMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) paused: boolean;\n\n  /**\n   * The component's selected `calcite-carousel-item`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteCarouselItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.clearIntervals();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is \"\". */\n    if ((this.autoplay === \"\" || this.autoplay) && this.autoplay !== \"paused\") {\n      this.handlePlay(false);\n    } else if (this.autoplay === \"paused\") {\n      this.paused = true;\n    }\n    setUpLoadableComponent(this);\n\n    await setUpMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.container?.focus();\n  }\n\n  /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect. */\n  @Method()\n  async play(): Promise<void> {\n    /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is \"\". */\n    if (this.playing || (this.autoplay !== \"\" && !this.autoplay && this.autoplay !== \"paused\")) {\n      return;\n    }\n    this.handlePlay(true);\n  }\n\n  /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect. */\n  @Method()\n  async stop(): Promise<void> {\n    if (!this.playing) {\n      return;\n    }\n    this.handlePause(true);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCarouselElement;\n\n  @State() selectedIndex: number;\n\n  @State() items: HTMLCalciteCarouselItemElement[] = [];\n\n  @State() direction: \"forward\" | \"backward\";\n\n  @State() defaultMessages: CarouselMessages;\n\n  @State() playing = false;\n\n  @Watch(\"playing\")\n  playingWatcher(): void {\n    this.paused = !this.playing;\n  }\n\n  @State() suspendedDueToFocus = false;\n\n  @State() suspendedDueToHover = false;\n\n  @Watch(\"suspendedDueToFocus\")\n  @Watch(\"suspendedDueToHover\")\n  suspendWatcher(): void {\n    if (!this.suspendedDueToFocus && !this.suspendedDueToHover) {\n      this.suspendEnd();\n    } else {\n      this.suspendStart();\n    }\n  }\n\n  @State() userPreventsSuspend = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() suspendedSlideDurationRemaining = 1;\n\n  @State() slideDurationRemaining = 1;\n\n  private container: HTMLDivElement;\n\n  private containerId = `calcite-carousel-container-${guid()}`;\n\n  private slideDurationInterval = null;\n\n  private slideInterval = null;\n\n  private tabList: HTMLDivElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the selected `calcite-carousel-item` changes. */\n  @Event({ cancelable: false }) calciteCarouselChange: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay is invoked by the user. */\n  @Event({ cancelable: false }) calciteCarouselPlay: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state is stopped by a user. */\n  @Event({ cancelable: false }) calciteCarouselStop: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content */\n  @Event({ cancelable: false }) calciteCarouselPause: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content */\n  @Event({ cancelable: false }) calciteCarouselResume: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private clearIntervals() {\n    clearInterval(this.slideDurationInterval);\n    clearInterval(this.slideInterval);\n  }\n\n  private nextItem(emit: boolean) {\n    if (this.playing && emit) {\n      this.playing = false;\n    }\n    const nextIndex = getRoundRobinIndex(this.selectedIndex + 1, this.items.length);\n    this.setSelectedItem(nextIndex, emit);\n  }\n\n  private previousItem() {\n    this.playing = false;\n    const prevIndex = getRoundRobinIndex(Math.max(this.selectedIndex - 1, -1), this.items.length);\n    this.setSelectedItem(prevIndex, true);\n  }\n\n  private handlePlay(emit: boolean) {\n    this.playing = true;\n    this.autoplayHandler();\n    this.slideInterval = setInterval(this.autoplayHandler, this.autoplayDuration);\n    if (emit) {\n      this.calciteCarouselPlay.emit();\n    }\n  }\n\n  private handlePause(emit: boolean) {\n    this.playing = false;\n    this.clearIntervals();\n    this.slideDurationRemaining = 1;\n    this.suspendedSlideDurationRemaining = 1;\n    if (emit) {\n      this.calciteCarouselStop.emit();\n    }\n  }\n\n  private suspendStart() {\n    this.suspendedSlideDurationRemaining = this.slideDurationRemaining;\n  }\n\n  private suspendEnd() {\n    this.slideDurationRemaining = this.suspendedSlideDurationRemaining;\n  }\n\n  private autoplayHandler = (): void => {\n    this.clearIntervals();\n    this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);\n  };\n\n  private timer = (): void => {\n    let time = this.slideDurationRemaining;\n    const notSuspended =\n      (!this.suspendedDueToFocus && !this.suspendedDueToHover) || this.userPreventsSuspend;\n    if (notSuspended) {\n      if (time <= 0.01) {\n        time = 1;\n        this.nextItem(false);\n      } else {\n        time = time - 0.01;\n      }\n    }\n    if (time > 0) {\n      this.slideDurationRemaining = time;\n    }\n  };\n\n  private handleSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event) as HTMLCalciteCarouselItemElement[];\n\n    if (items.length < 1) {\n      return;\n    }\n\n    const activeItemIndex = items.findIndex((item) => item.selected);\n    const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;\n\n    this.items = items;\n    this.setSelectedItem(requestedSelectedIndex, false);\n  };\n\n  private setSelectedItem = (requestedIndex: number, emit: boolean): void => {\n    const previousSelected = this.selectedIndex;\n    this.items.forEach((el, index) => {\n      const isMatch = requestedIndex === index;\n      el.selected = isMatch;\n      if (isMatch) {\n        this.selectedItem = el;\n        this.selectedIndex = index;\n      }\n    });\n\n    if (emit) {\n      this.playing = false;\n      if (previousSelected !== this.selectedIndex) {\n        this.calciteCarouselChange.emit();\n      }\n    }\n  };\n\n  private handleArrowClick = (event: MouseEvent): void => {\n    const direction = (event.target as HTMLDivElement).dataset.direction;\n    if (direction === \"next\") {\n      this.nextItem(true);\n    } else if (direction === \"previous\") {\n      this.previousItem();\n    }\n  };\n\n  private handleItemSelection = (event: MouseEvent): void => {\n    if (this.playing) {\n      this.handlePause(true);\n    }\n    const item = event.target as HTMLCalciteActionElement;\n    const requestedPosition = parseInt(item.dataset.index);\n    this.direction = requestedPosition > this.selectedIndex ? \"forward\" : \"backward\";\n    this.setSelectedItem(requestedPosition, true);\n  };\n\n  private toggleRotation = (): void => {\n    this.userPreventsSuspend = true;\n    if (this.playing) {\n      this.handlePause(true);\n    } else {\n      this.handlePlay(true);\n    }\n  };\n\n  private handleFocusIn = (): void => {\n    const isPlaying = this.playing;\n\n    if (isPlaying) {\n      this.suspendedDueToFocus = true;\n    }\n    if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {\n      this.calciteCarouselPause.emit();\n    }\n  };\n\n  private handleMouseIn = (): void => {\n    const isPlaying = this.playing;\n\n    if (isPlaying) {\n      this.suspendedDueToHover = true;\n    }\n    if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {\n      this.calciteCarouselPause.emit();\n    }\n  };\n\n  private handleMouseOut = (event: MouseEvent): void => {\n    const leavingComponent = !this.el.contains(event.relatedTarget as HTMLElement);\n    const isPlaying = this.playing;\n\n    if (leavingComponent && isPlaying) {\n      this.suspendedDueToHover = false;\n    }\n    if (leavingComponent && isPlaying && !this.suspendedDueToFocus) {\n      this.userPreventsSuspend = false;\n      this.calciteCarouselResume.emit();\n    }\n  };\n\n  private handleFocusOut = (event: FocusEvent): void => {\n    const leavingComponent = !event.composedPath().includes(event.relatedTarget as HTMLElement);\n    const isPlaying = this.playing;\n\n    if (leavingComponent && isPlaying) {\n      this.suspendedDueToFocus = false;\n    }\n    if (leavingComponent && isPlaying && !this.suspendedDueToHover) {\n      this.userPreventsSuspend = false;\n      this.calciteCarouselResume.emit();\n    }\n  };\n\n  private containerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        this.toggleRotation();\n        break;\n      case \"ArrowRight\":\n        this.direction = \"forward\";\n        this.nextItem(true);\n        break;\n      case \"ArrowLeft\":\n        this.direction = \"backward\";\n        this.previousItem();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.direction = \"backward\";\n        this.setSelectedItem(0, true);\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.direction = \"forward\";\n        this.setSelectedItem(this.items.length - 1, true);\n        break;\n    }\n  };\n\n  private tabListKeyDownHandler = (event: KeyboardEvent): void => {\n    const interactiveItems = Array(...this.tabList.querySelectorAll(\"button\"));\n    const currentEl = event.target as HTMLCalciteActionElement;\n    switch (event.key) {\n      case \"ArrowRight\":\n        focusElementInGroup(interactiveItems, currentEl, \"next\");\n        break;\n      case \"ArrowLeft\":\n        focusElementInGroup(interactiveItems, currentEl, \"previous\");\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusElementInGroup(interactiveItems, currentEl, \"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusElementInGroup(interactiveItems, currentEl, \"last\");\n        break;\n    }\n  };\n\n  private storeTabListRef = (el: HTMLDivElement): void => {\n    this.tabList = el;\n  };\n\n  private storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderRotationControl = (): VNode => {\n    const text = this.playing ? this.messages.pause : this.messages.play;\n    return (\n      <button\n        aria-label={text}\n        class={{\n          [CSS.paginationItem]: true,\n          [CSS.autoplayControl]: true,\n        }}\n        onClick={this.toggleRotation}\n        title={text}\n      >\n        <calcite-icon icon={this.playing ? ICONS.pause : ICONS.play} scale=\"s\" />\n        {this.playing && (\n          <calcite-progress\n            class={CSS.autoplayProgress}\n            label={this.messages.carouselItemProgress}\n            value={this.slideDurationRemaining}\n          />\n        )}\n      </button>\n    );\n  };\n\n  renderPaginationArea = (): VNode => (\n    <div\n      class={{\n        [CSS.pagination]: true,\n        [CSS.containerOverlaid]: this.controlOverlay,\n      }}\n      onKeyDown={this.tabListKeyDownHandler}\n      ref={this.storeTabListRef}\n    >\n      {(this.playing || this.autoplay === \"\" || this.autoplay || this.autoplay === \"paused\") &&\n        this.renderRotationControl()}\n      {this.arrowType === \"inline\" && this.renderArrow(\"previous\")}\n      {this.renderPaginationItems()}\n      {this.arrowType === \"inline\" && this.renderArrow(\"next\")}\n    </div>\n  );\n\n  renderPaginationItems = (): VNode => (\n    <div aria-label={this.label} class={CSS.paginationItems} role=\"tablist\">\n      {this.items.map((item, index) => {\n        const isMatch = index === this.selectedIndex;\n        return (\n          <button\n            aria-controls={!isMatch ? item.id : undefined}\n            aria-selected={toAriaBoolean(isMatch)}\n            class={{\n              [CSS.paginationItem]: true,\n              [CSS.paginationItemIndividual]: true,\n              [CSS.paginationItemSelected]: isMatch,\n            }}\n            data-index={index}\n            key={item.id}\n            onClick={this.handleItemSelection}\n            role=\"tab\"\n            title={item.label}\n          >\n            <calcite-icon icon={isMatch ? ICONS.active : ICONS.inactive} scale=\"l\" />\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  renderArrow = (direction: \"previous\" | \"next\"): VNode => {\n    const isPrev = direction === \"previous\";\n    const dir = getElementDir(this.el);\n    const scale = this.arrowType === \"edge\" ? \"m\" : \"s\";\n    const css = isPrev ? CSS.pagePrevious : CSS.pageNext;\n    const title = isPrev ? this.messages.previous : this.messages.next;\n    const icon = isPrev ? ICONS.chevronLeft : ICONS.chevronRight;\n    return (\n      <button\n        aria-controls={this.containerId}\n        class={{ [CSS.paginationItem]: true, [css]: true }}\n        data-direction={direction}\n        onClick={this.handleArrowClick}\n        title={title}\n      >\n        <calcite-icon flipRtl={dir === \"rtl\"} icon={icon} scale={scale} />\n      </button>\n    );\n  };\n\n  render(): VNode {\n    const { direction } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-label={this.label}\n            aria-live={this.playing ? \"off\" : \"polite\"}\n            aria-roledescription={this.messages.carousel}\n            class={{\n              [CSS.container]: true,\n              [CSS.containerOverlaid]: this.controlOverlay,\n              [CSS.containerEdged]: this.arrowType === \"edge\",\n            }}\n            onFocusin={this.handleFocusIn}\n            onFocusout={this.handleFocusOut}\n            onKeyDown={this.containerKeyDownHandler}\n            onMouseEnter={this.handleMouseIn}\n            onMouseLeave={this.handleMouseOut}\n            ref={this.storeContainerRef}\n            role=\"group\"\n            tabIndex={0}\n          >\n            <section\n              class={{\n                [CSS.itemContainer]: true,\n                [CSS.itemContainerForward]: direction === \"forward\",\n                [CSS.itemContainerBackward]: direction === \"backward\",\n              }}\n              id={this.containerId}\n            >\n              <slot onSlotchange={this.handleSlotChange} />\n            </section>\n            {this.items.length > 1 && this.renderPaginationArea()}\n            {this.arrowType === \"edge\" && this.renderArrow(\"previous\")}\n            {this.arrowType === \"edge\" && this.renderArrow(\"next\")}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  selected: \"selected\",\n};\n",":host {\n  @apply flex;\n}\n\n.container {\n  @apply hidden;\n  inline-size: var(--calcite-container-size-content-fluid);\n}\n\n:host([selected]) .container {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding content.\n */\n@Component({\n  tag: \"calcite-carousel-item\",\n  styleUrl: \"carousel-item.scss\",\n  shadow: true,\n})\nexport class CarouselItem {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label!: string;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true }) selected = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCarouselItemElement;\n\n  private guid = `calcite-carousel-item-${guid()}`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const id = this.el.id || this.guid;\n    return (\n      <Host id={id}>\n        <div\n          aria-label={this.label}\n          class={{ [CSS.container]: true, [CSS.selected]: this.selected }}\n          role=\"tabpanel\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-carousel.calcite-carousel-item.entry.js","mappings":"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","names":["CSS"],"sources":["src/components/carousel/resources.ts","src/components/carousel/carousel.scss?tag=calcite-carousel&encapsulation=shadow","src/components/carousel/carousel.tsx","src/components/carousel-item/resources.ts","src/components/carousel-item/carousel-item.scss?tag=calcite-carousel-item&encapsulation=shadow","src/components/carousel-item/carousel-item.tsx"],"sourcesContent":["export const DURATION = 6000;\n\nexport const CSS = {\n  container: \"container\",\n  containerOverlaid: \"container--overlaid\",\n  containerEdged: \"container--edged\",\n  itemContainer: \"item-container\",\n  itemContainerForward: \"item-container--forward\",\n  itemContainerBackward: \"item-container--backward\",\n  pagination: \"pagination\",\n  paginationItems: \"pagination-items\",\n  paginationItem: \"pagination-item\",\n  paginationItemIndividual: \"pagination-item--individual\",\n  paginationItemSelected: \"pagination-item--selected\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n  autoplayControl: \"autoplay-control\",\n  autoplayProgress: \"autoplay-progress\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  inactive: \"bullet-point\",\n  active: \"bullet-point-large\",\n  pause: \"pause-f\",\n  play: \"play-f\",\n};\n","/**\n  * Local props\n  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.\n  * These should be made public and documented post-release of token work.\n  *\n  * --calcite-internal-carousel-item-background-color-active: Specifies the background color of the component's slide item while active.\n  * --calcite-internal-carousel-item-background-color-hover: Specifies the background color of the component's slide item while hovered.\n  * --calcite-internal-carousel-item-background-color-selected: Specifies the background color of the component's slide item when selected.\n  * --calcite-internal-carousel-item-background-color: Specifies the background color of the component's slide item.\n  * --calcite-internal-carousel-item-icon-color-hover: Specifies the icon color of the component's slide item while hovered.\n  * --calcite-internal-carousel-item-icon-color-selected: Specifies the icon color of the component's slide item when selected.\n  * --calcite-internal-carousel-item-icon-color: Specifies the icon color of the component's slide item.\n  * --calcite-internal-carousel-control-color-hover: Specifies the icon color of the component's slide slide arrow and autoplay button while hovered.\n  * --calcite-internal-carousel-control-color: Specifies the icon color of the component's slide arrow and autoplay button.\n  * --calcite-internal-carousel-autoplay-progress-background-color: Specifies the background color of the component's progress when `autoplay`.\n  * --calcite-internal-carousel-autoplay-progress-fill-color: Specifies the fill color of the component's progress when `autoplay`.\n  *\n*/\n\n:host {\n  @apply flex w-full;\n  --calcite-internal-internal-carousel-item-space: 1.5rem;\n  --calcite-internal-internal-carousel-item-space-wide: 3.5rem;\n  --calcite-internal-internal-carousel-item-background-color: var(\n    --calcite-internal-carousel-item-background-color,\n    var(--calcite-color-foreground-1)\n  );\n  --calcite-internal-internal-carousel-item-background-color-hover: var(\n    --calcite-internal-carousel-item-background-color-hover,\n    var(--calcite-color-foreground-2)\n  );\n  --calcite-internal-internal-carousel-item-background-color-active: var(\n    --calcite-internal-carousel-item-background-color-active,\n    var(--calcite-color-foreground-2)\n  );\n  --calcite-internal-internal-carousel-item-background-color-selected: var(\n    --calcite-internal-carousel-item-background-color-selected,\n    var(--calcite-color-foreground-1)\n  );\n  --calcite-internal-internal-carousel-item-icon-color-hover: var(\n    --calcite-internal-carousel-item-icon-color-hover,\n    var(--calcite-action-color-transparent-hover)\n  );\n  --calcite-internal-internal-carousel-item-icon-color: var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-3)\n  );\n  --calcite-internal-internal-carousel-item-icon-color-selected: var(\n    --calcite-internal-carousel-item-icon-color-selected,\n    var(--calcite-color-brand)\n  );\n  --calcite-internal-internal-carousel-control-color-hover: var(\n    --calcite-internal-carousel-control-color-hover,\n    var(--calcite-internal-carousel-item-icon-color-hover)\n  );\n  --calcite-internal-internal-carousel-control-color: var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-input)\n  );\n  --calcite-internal-internal-carousel-autoplay-progress-background-color: var(\n    --calcite-internal-carousel-autoplay-progress-background-color,\n    var(--calcite-color-border-3)\n  );\n  --calcite-internal-internal-carousel-autoplay-progress-fill-color: var(\n    --calcite-internal-carousel-autoplay-progress-fill-color,\n    var(--calcite-color-brand)\n  );\n}\n\n.container {\n  @apply focus-base\n   relative\n    flex\n    flex-col\n    overflow-hidden\n    text-color-2\n    text-n1h\n    w-full;\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n.container--edged:not(.container--overlaid) {\n  padding-inline: var(--calcite-internal-internal-carousel-item-space-wide);\n  inline-size: calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2);\n}\n\n.item-container {\n  @apply flex\n    items-start\n    justify-center\n    overflow-auto\n    flex-auto\n    p-1;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.container--overlaid .item-container {\n  @apply p-0;\n}\n\n.item-container--forward {\n  animation-name: item-forward;\n}\n\n.item-container--backward {\n  animation-name: item-backward;\n}\n\ncalcite-carousel-item:not([selected]) {\n  opacity: 0;\n}\n\n.pagination {\n  @apply flex\n  flex-row\n  items-center\n  justify-center\n  m-3;\n  inline-size: auto;\n}\n\n.pagination-items {\n  @apply flex flex-row items-center;\n}\n\n.container--overlaid .pagination {\n  position: absolute;\n}\n\n.pagination-item.page-next,\n.pagination-item.page-previous {\n  color: var(--calcite-internal-internal-carousel-control-color);\n  &:hover {\n    color: var(--calcite-internal-internal-carousel-control-color-hover);\n  }\n}\n\n.container--edged {\n  .page-next,\n  .page-previous {\n    @apply h-12 w-12;\n    position: absolute;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n  }\n\n  .page-next {\n    inset-inline-end: 0;\n  }\n\n  .page-previous {\n    inset-inline-start: 0;\n  }\n}\n\n.container--overlaid .pagination {\n  inset-block-start: unset;\n  inset-block-end: 0;\n  inset-inline: 0;\n}\n\n.pagination-item.autoplay-control {\n  position: relative;\n  color: var(--calcite-internal-internal-carousel-control-color);\n  --calcite-color-brand: var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);\n  --calcite-color-border-3: var(--calcite-internal-internal-carousel-autoplay-progress-background-color);\n}\n\n.autoplay-control:focus .autoplay-progress {\n  inset-block-end: 4px;\n  inset-inline: 2px;\n  inline-size: calc(100% - 4px);\n}\n\n.autoplay-progress {\n  position: absolute;\n  inset-block-end: 2px;\n  inset-inline: 0;\n  inline-size: 100%;\n}\n\n.pagination-item {\n  @apply focus-base\n    transition-default\n    m-0\n    h-8\n    w-8\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color);\n  color: var(--calcite-internal-internal-carousel-item-icon-color);\n  &:hover {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-hover);\n  }\n  & calcite-icon {\n    color: inherit;\n    pointer-events: none;\n  }\n  &.pagination-item--selected {\n    --calcite-color-foreground-1: var(--calcite-internal-internal-carousel-item-background-color-selected);\n    --calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);\n    color: var(--calcite-internal-internal-carousel-item-icon-color-selected);\n  }\n}\n\n.container--overlaid .pagination-item {\n  background-color: var(--calcite-internal-internal-carousel-item-background-color);\n  &:hover {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n  }\n  &:active {\n    background-color: var(--calcite-internal-internal-carousel-item-background-color-active);\n  }\n}\n\n@keyframes item-forward {\n  0% {\n    transform: translate3d(100px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes item-backward {\n  0% {\n    transform: translate3d(-100px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@include disabled();\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  focusElementInGroup,\n  getElementDir,\n  slotChangeGetAssignedElements,\n  toAriaBoolean,\n  whenAnimationDone,\n} from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  updateHostInteraction,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n} from \"../../utils/interactive\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { getRoundRobinIndex } from \"../../utils/array\";\nimport { CSS, DURATION, ICONS } from \"./resources\";\nimport { CarouselMessages } from \"./assets/carousel/t9n\";\nimport { ArrowType, AutoplayType } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding `calcite-carousel-item`s.\n */\n@Component({\n  tag: \"calcite-carousel\",\n  styleUrl: \"carousel.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Carousel\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the carousel will autoplay and controls will be displayed. When \"paused\" at time of initialization, the carousel will not autoplay, but controls will be displayed.\n   */\n  @Prop({ reflect: true }) autoplay: AutoplayType = false;\n\n  @Watch(\"autoplay\")\n  autoplayWatcher(autoplay: boolean): void {\n    if (!autoplay) {\n      this.handlePause(false);\n    }\n  }\n\n  /**\n   * Specifies how and if the \"previous\" and \"next\" arrows are displayed.\n   */\n  @Prop({ reflect: true }) arrowType: ArrowType = \"inline\";\n\n  /**\n   *  When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.\n   */\n  @Prop({ reflect: true }) autoplayDuration = DURATION;\n\n  /**\n   * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.\n   */\n  @Prop({ reflect: true }) controlOverlay = false;\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   * Accessible name for the component.\n   */\n  @Prop() label!: string;\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: CarouselMessages;\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<CarouselMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) paused: boolean;\n\n  /**\n   * The component's selected `calcite-carousel-item`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteCarouselItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.clearIntervals();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is \"\". */\n    if ((this.autoplay === \"\" || this.autoplay) && this.autoplay !== \"paused\") {\n      this.handlePlay(false);\n    } else if (this.autoplay === \"paused\") {\n      this.paused = true;\n    }\n    setUpLoadableComponent(this);\n\n    await setUpMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.container?.focus();\n  }\n\n  /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect. */\n  @Method()\n  async play(): Promise<void> {\n    /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is \"\". */\n    if (this.playing || (this.autoplay !== \"\" && !this.autoplay && this.autoplay !== \"paused\")) {\n      return;\n    }\n    this.handlePlay(true);\n  }\n\n  /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect. */\n  @Method()\n  async stop(): Promise<void> {\n    if (!this.playing) {\n      return;\n    }\n    this.handlePause(true);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCarouselElement;\n\n  @State() selectedIndex: number;\n\n  @State() items: HTMLCalciteCarouselItemElement[] = [];\n\n  @State() direction: \"forward\" | \"backward\" | \"standby\" = \"standby\";\n\n  @Watch(\"direction\")\n  async directionWatcher(direction: string): Promise<void> {\n    if (direction === \"standby\") {\n      return;\n    }\n\n    await whenAnimationDone(\n      this.itemContainer,\n      direction === \"forward\" ? \"item-forward\" : \"item-backward\",\n    );\n    this.direction = \"standby\";\n  }\n\n  @State() defaultMessages: CarouselMessages;\n\n  @State() playing = false;\n\n  @Watch(\"playing\")\n  playingWatcher(): void {\n    this.paused = !this.playing;\n  }\n\n  @State() suspendedDueToFocus = false;\n\n  @State() suspendedDueToHover = false;\n\n  @Watch(\"suspendedDueToFocus\")\n  @Watch(\"suspendedDueToHover\")\n  suspendWatcher(): void {\n    if (!this.suspendedDueToFocus && !this.suspendedDueToHover) {\n      this.suspendEnd();\n    } else {\n      this.suspendStart();\n    }\n  }\n\n  @State() userPreventsSuspend = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() suspendedSlideDurationRemaining = 1;\n\n  @State() slideDurationRemaining = 1;\n\n  private container: HTMLDivElement;\n\n  private containerId = `calcite-carousel-container-${guid()}`;\n\n  private slideDurationInterval = null;\n\n  private slideInterval = null;\n\n  private tabList: HTMLDivElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the selected `calcite-carousel-item` changes. */\n  @Event({ cancelable: false }) calciteCarouselChange: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay is invoked by the user. */\n  @Event({ cancelable: false }) calciteCarouselPlay: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state is stopped by a user. */\n  @Event({ cancelable: false }) calciteCarouselStop: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content */\n  @Event({ cancelable: false }) calciteCarouselPause: EventEmitter<void>;\n\n  /** Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content */\n  @Event({ cancelable: false }) calciteCarouselResume: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private clearIntervals() {\n    clearInterval(this.slideDurationInterval);\n    clearInterval(this.slideInterval);\n  }\n\n  private nextItem(emit: boolean) {\n    if (this.playing && emit) {\n      this.playing = false;\n    }\n    const nextIndex = getRoundRobinIndex(this.selectedIndex + 1, this.items.length);\n    this.setSelectedItem(nextIndex, emit);\n  }\n\n  private previousItem() {\n    this.playing = false;\n    const prevIndex = getRoundRobinIndex(Math.max(this.selectedIndex - 1, -1), this.items.length);\n    this.setSelectedItem(prevIndex, true);\n  }\n\n  private handlePlay(emit: boolean) {\n    this.playing = true;\n    this.autoplayHandler();\n    this.slideInterval = setInterval(this.autoplayHandler, this.autoplayDuration);\n    if (emit) {\n      this.calciteCarouselPlay.emit();\n    }\n  }\n\n  private handlePause(emit: boolean) {\n    this.playing = false;\n    this.clearIntervals();\n    this.slideDurationRemaining = 1;\n    this.suspendedSlideDurationRemaining = 1;\n    if (emit) {\n      this.calciteCarouselStop.emit();\n    }\n  }\n\n  private suspendStart() {\n    this.suspendedSlideDurationRemaining = this.slideDurationRemaining;\n  }\n\n  private suspendEnd() {\n    this.slideDurationRemaining = this.suspendedSlideDurationRemaining;\n  }\n\n  private autoplayHandler = (): void => {\n    this.clearIntervals();\n    this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);\n  };\n\n  private timer = (): void => {\n    let time = this.slideDurationRemaining;\n    const notSuspended =\n      (!this.suspendedDueToFocus && !this.suspendedDueToHover) || this.userPreventsSuspend;\n    if (notSuspended) {\n      if (time <= 0.01) {\n        time = 1;\n        this.nextItem(false);\n      } else {\n        time = time - 0.01;\n      }\n    }\n    if (time > 0) {\n      this.slideDurationRemaining = time;\n    }\n  };\n\n  private handleSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event) as HTMLCalciteCarouselItemElement[];\n\n    if (items.length < 1) {\n      return;\n    }\n\n    const activeItemIndex = items.findIndex((item) => item.selected);\n    const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;\n\n    this.items = items;\n    this.setSelectedItem(requestedSelectedIndex, false);\n  };\n\n  private setSelectedItem = (requestedIndex: number, emit: boolean): void => {\n    const previousSelected = this.selectedIndex;\n    this.items.forEach((el, index) => {\n      const isMatch = requestedIndex === index;\n      el.selected = isMatch;\n      if (isMatch) {\n        this.selectedItem = el;\n        this.selectedIndex = index;\n      }\n    });\n\n    if (emit) {\n      this.playing = false;\n      if (previousSelected !== this.selectedIndex) {\n        this.calciteCarouselChange.emit();\n      }\n    }\n  };\n\n  private handleArrowClick = (event: MouseEvent): void => {\n    const direction = (event.target as HTMLDivElement).dataset.direction;\n    if (direction === \"next\") {\n      this.direction = \"forward\";\n      this.nextItem(true);\n    } else if (direction === \"previous\") {\n      this.direction = \"backward\";\n      this.previousItem();\n    }\n  };\n\n  private handleItemSelection = (event: MouseEvent): void => {\n    const item = event.target as HTMLCalciteActionElement;\n    const requestedPosition = parseInt(item.dataset.index);\n\n    if (requestedPosition === this.selectedIndex) {\n      return;\n    }\n\n    if (this.playing) {\n      this.handlePause(true);\n    }\n\n    this.direction = requestedPosition > this.selectedIndex ? \"forward\" : \"backward\";\n    this.setSelectedItem(requestedPosition, true);\n  };\n\n  private toggleRotation = (): void => {\n    this.userPreventsSuspend = true;\n    if (this.playing) {\n      this.handlePause(true);\n    } else {\n      this.handlePlay(true);\n    }\n  };\n\n  private handleFocusIn = (): void => {\n    const isPlaying = this.playing;\n\n    if (isPlaying) {\n      this.suspendedDueToFocus = true;\n    }\n    if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {\n      this.calciteCarouselPause.emit();\n    }\n  };\n\n  private handleMouseIn = (): void => {\n    const isPlaying = this.playing;\n\n    if (isPlaying) {\n      this.suspendedDueToHover = true;\n    }\n    if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {\n      this.calciteCarouselPause.emit();\n    }\n  };\n\n  private handleMouseOut = (event: MouseEvent): void => {\n    const leavingComponent = !this.el.contains(event.relatedTarget as HTMLElement);\n    const isPlaying = this.playing;\n\n    if (leavingComponent && isPlaying) {\n      this.suspendedDueToHover = false;\n    }\n    if (leavingComponent && isPlaying && !this.suspendedDueToFocus) {\n      this.userPreventsSuspend = false;\n      this.calciteCarouselResume.emit();\n    }\n  };\n\n  private handleFocusOut = (event: FocusEvent): void => {\n    const leavingComponent = !event.composedPath().includes(event.relatedTarget as HTMLElement);\n    const isPlaying = this.playing;\n\n    if (leavingComponent && isPlaying) {\n      this.suspendedDueToFocus = false;\n    }\n    if (leavingComponent && isPlaying && !this.suspendedDueToHover) {\n      this.userPreventsSuspend = false;\n      this.calciteCarouselResume.emit();\n    }\n  };\n\n  private containerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        this.toggleRotation();\n        break;\n      case \"ArrowRight\":\n        this.direction = \"forward\";\n        this.nextItem(true);\n        break;\n      case \"ArrowLeft\":\n        this.direction = \"backward\";\n        this.previousItem();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.direction = \"backward\";\n        this.setSelectedItem(0, true);\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.direction = \"forward\";\n        this.setSelectedItem(this.items.length - 1, true);\n        break;\n    }\n  };\n\n  private tabListKeyDownHandler = (event: KeyboardEvent): void => {\n    const interactiveItems = Array(...this.tabList.querySelectorAll(\"button\"));\n    const currentEl = event.target as HTMLCalciteActionElement;\n    switch (event.key) {\n      case \"ArrowRight\":\n        focusElementInGroup(interactiveItems, currentEl, \"next\");\n        break;\n      case \"ArrowLeft\":\n        focusElementInGroup(interactiveItems, currentEl, \"previous\");\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusElementInGroup(interactiveItems, currentEl, \"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusElementInGroup(interactiveItems, currentEl, \"last\");\n        break;\n    }\n  };\n\n  private storeTabListRef = (el: HTMLDivElement): void => {\n    this.tabList = el;\n  };\n\n  private storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  private itemContainer: HTMLDivElement;\n\n  private storeItemContainerRef = (el: HTMLDivElement): void => {\n    this.itemContainer = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderRotationControl = (): VNode => {\n    const text = this.playing ? this.messages.pause : this.messages.play;\n    return (\n      <button\n        aria-label={text}\n        class={{\n          [CSS.paginationItem]: true,\n          [CSS.autoplayControl]: true,\n        }}\n        onClick={this.toggleRotation}\n        title={text}\n      >\n        <calcite-icon icon={this.playing ? ICONS.pause : ICONS.play} scale=\"s\" />\n        {this.playing && (\n          <calcite-progress\n            class={CSS.autoplayProgress}\n            label={this.messages.carouselItemProgress}\n            value={this.slideDurationRemaining}\n          />\n        )}\n      </button>\n    );\n  };\n\n  renderPaginationArea = (): VNode => (\n    <div\n      class={{\n        [CSS.pagination]: true,\n        [CSS.containerOverlaid]: this.controlOverlay,\n      }}\n      onKeyDown={this.tabListKeyDownHandler}\n      ref={this.storeTabListRef}\n    >\n      {(this.playing || this.autoplay === \"\" || this.autoplay || this.autoplay === \"paused\") &&\n        this.renderRotationControl()}\n      {this.arrowType === \"inline\" && this.renderArrow(\"previous\")}\n      {this.renderPaginationItems()}\n      {this.arrowType === \"inline\" && this.renderArrow(\"next\")}\n    </div>\n  );\n\n  renderPaginationItems = (): VNode => (\n    <div aria-label={this.label} class={CSS.paginationItems} role=\"tablist\">\n      {this.items.map((item, index) => {\n        const isMatch = index === this.selectedIndex;\n        return (\n          <button\n            aria-controls={!isMatch ? item.id : undefined}\n            aria-selected={toAriaBoolean(isMatch)}\n            class={{\n              [CSS.paginationItem]: true,\n              [CSS.paginationItemIndividual]: true,\n              [CSS.paginationItemSelected]: isMatch,\n            }}\n            data-index={index}\n            key={item.id}\n            onClick={this.handleItemSelection}\n            role=\"tab\"\n            title={item.label}\n          >\n            <calcite-icon icon={isMatch ? ICONS.active : ICONS.inactive} scale=\"l\" />\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  renderArrow = (direction: \"previous\" | \"next\"): VNode => {\n    const isPrev = direction === \"previous\";\n    const dir = getElementDir(this.el);\n    const scale = this.arrowType === \"edge\" ? \"m\" : \"s\";\n    const css = isPrev ? CSS.pagePrevious : CSS.pageNext;\n    const title = isPrev ? this.messages.previous : this.messages.next;\n    const icon = isPrev ? ICONS.chevronLeft : ICONS.chevronRight;\n    return (\n      <button\n        aria-controls={this.containerId}\n        class={{ [CSS.paginationItem]: true, [css]: true }}\n        data-direction={direction}\n        onClick={this.handleArrowClick}\n        title={title}\n      >\n        <calcite-icon flipRtl={dir === \"rtl\"} icon={icon} scale={scale} />\n      </button>\n    );\n  };\n\n  render(): VNode {\n    const { direction } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-label={this.label}\n            aria-live={this.playing ? \"off\" : \"polite\"}\n            aria-roledescription={this.messages.carousel}\n            class={{\n              [CSS.container]: true,\n              [CSS.containerOverlaid]: this.controlOverlay,\n              [CSS.containerEdged]: this.arrowType === \"edge\",\n            }}\n            onFocusin={this.handleFocusIn}\n            onFocusout={this.handleFocusOut}\n            onKeyDown={this.containerKeyDownHandler}\n            onMouseEnter={this.handleMouseIn}\n            onMouseLeave={this.handleMouseOut}\n            ref={this.storeContainerRef}\n            role=\"group\"\n            tabIndex={0}\n          >\n            <section\n              class={{\n                [CSS.itemContainer]: true,\n                [CSS.itemContainerForward]: direction === \"forward\",\n                [CSS.itemContainerBackward]: direction === \"backward\",\n              }}\n              id={this.containerId}\n              // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n              ref={this.storeItemContainerRef}\n            >\n              <slot onSlotchange={this.handleSlotChange} />\n            </section>\n            {this.items.length > 1 && this.renderPaginationArea()}\n            {this.arrowType === \"edge\" && this.renderArrow(\"previous\")}\n            {this.arrowType === \"edge\" && this.renderArrow(\"next\")}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  selected: \"selected\",\n};\n",":host {\n  @apply flex;\n}\n\n.container {\n  @apply hidden;\n  inline-size: var(--calcite-container-size-content-fluid);\n}\n\n:host([selected]) .container {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding content.\n */\n@Component({\n  tag: \"calcite-carousel-item\",\n  styleUrl: \"carousel-item.scss\",\n  shadow: true,\n})\nexport class CarouselItem {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label!: string;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true }) selected = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCarouselItemElement;\n\n  private guid = `calcite-carousel-item-${guid()}`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const id = this.el.id || this.guid;\n    return (\n      <Host id={id}>\n        <div\n          aria-label={this.label}\n          class={{ [CSS.container]: true, [CSS.selected]: this.selected }}\n          role=\"tabpanel\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}