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

package/dist/cjs/calcite-block_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":"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","names":["IDS","CSS","ICONS","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectInteractive","connectLocalized","connectMessages","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","InteractiveContainer","isActivationKey","getElementDir"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  heading: \"heading\",\n  icon: \"icon\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  icon: \"icon\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start p-0;\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu\";\n  grid-column: header-start / menu-end;\n  grid-row: 1 / 2;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n  text-align: initial;\n\n  background-color: transparent;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n  padding: theme(\"spacing.3\");\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  display: flex;\n  margin-inline-start: theme(\"spacing.3\");\n  margin-inline-end: 0px;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  my-3\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n  margin-inline-end: theme(\"spacing.3\");\n  margin-inline-start: auto;\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, theme(\"spacing.2\"));\n  padding-inline: var(--calcite-block-padding, theme(\"spacing[2.5]\"));\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\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 {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { focusFirstTabbable, getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot icon - A slot for adding a leading header icon with `calcite-icon`.\n * @slot control - A slot for adding a single HTML input element in a header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = 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   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: 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: BlockMessages;\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<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockMessages;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  renderIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header class={CSS.header} id={IDS.header}>\n        {this.renderIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <calcite-icon aria-hidden=\"true\" class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n          </button>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n              ref={this.setTransitionEl}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  content: \"content\",\n  focusGuard: \"focus-guard\",\n  invalid: \"invalid\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleSwitchContainer: \"toggle--switch-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-down\",\n  menuClosedLeft: \"chevron-left\",\n  menuClosedRight: \"chevron-right\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    box-border\n    block;\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply font-sans\n    text-color-2\n    w-full\n    border-0\n    bg-transparent\n    font-medium;\n}\n\n.toggle--switch {\n  .status-icon {\n    margin-inline-start: theme(\"margin.2\");\n  }\n}\n\n.toggle--switch,\n.section-header {\n  @apply text-n1\n    focus-base\n    mx-0\n    my-1\n    flex\n    cursor-pointer\n    select-none\n    items-center\n    px-0\n    py-2;\n\n  &:focus {\n    @apply focus-outset;\n  }\n  &:hover {\n    @apply text-color-1;\n  }\n}\n\n.section-header .status-icon {\n  @apply self-end;\n}\n\n.section-header__text {\n  @apply mx-3\n    my-0\n    flex-auto;\n\n  text-align: initial;\n  word-wrap: anywhere;\n}\n\n.toggle--switch-container {\n  @apply flex items-center relative bg-transparent w-full;\n  word-break: break-word;\n\n  .focus-guard {\n    --calcite-label-margin-bottom: 0;\n    @apply absolute pointer-events-none;\n    inset-inline-end: 0;\n    margin-inline-start: theme(\"margin.1\");\n  }\n}\n\n.toggle--switch__content {\n  @apply flex flex-auto items-center;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n:host([toggle-display=\"switch\"]) .toggle {\n  .toggle--switch__content {\n    @apply me-7;\n  }\n}\n\n@include base-component();\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 { focusFirstTabbable, getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-block-section\",\n  styleUrl: \"block-section.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * Displays a status-related indicator icon.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * The component header text.\n   */\n  @Prop() text: string;\n\n  /**\n   * Specifies how the component's toggle is displayed, where:\n   *\n   * `\"button\"` sets the toggle to a selectable header, and\n   *\n   * `\"switch\"` sets the toggle to a switch.\n   */\n  @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = \"button\";\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: BlockSectionMessages;\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<BlockSectionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockSectionElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockSectionMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the header has been clicked.\n   */\n  @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggleSection();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  toggleSection = (): void => {\n    this.open = !this.open;\n    this.calciteBlockSectionToggle.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderStatusIcon(): VNode[] {\n    const { status } = this;\n    const statusIcon = ICONS[status] ?? false;\n    const statusIconClasses = {\n      [CSS.statusIcon]: true,\n      [CSS.valid]: status == \"valid\",\n      [CSS.invalid]: status == \"invalid\",\n    };\n\n    return statusIcon ? (\n      <calcite-icon class={statusIconClasses} icon={statusIcon} scale=\"s\" />\n    ) : null;\n  }\n\n  render(): VNode {\n    const { el, messages, open, text, toggleDisplay } = this;\n    const dir = getElementDir(el);\n    const arrowIcon = open\n      ? ICONS.menuOpen\n      : dir === \"rtl\"\n        ? ICONS.menuClosedLeft\n        : ICONS.menuClosedRight;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerNode =\n      toggleDisplay === \"switch\" ? (\n        <div\n          class={{\n            [CSS.toggleSwitchContainer]: true,\n          }}\n        >\n          <div\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS.toggleSwitch]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n            onKeyDown={this.handleHeaderKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            title={toggleLabel}\n          >\n            <div class={CSS.toggleSwitchContent}>\n              <span class={CSS.toggleSwitchText}>{text}</span>\n            </div>\n            {this.renderStatusIcon()}\n          </div>\n          {/* we use calcite-label to use a simple component that will allow us to prevent keyboard focus by setting tabindex=\"-1\" on the host */}\n          <calcite-label class={CSS.focusGuard} layout=\"inline\" tabIndex={-1}>\n            <calcite-switch checked={open} label={toggleLabel} scale=\"s\" />\n          </calcite-label>\n        </div>\n      ) : (\n        <button\n          aria-controls={IDS.content}\n          aria-expanded={toAriaBoolean(open)}\n          class={{\n            [CSS.sectionHeader]: true,\n            [CSS.toggle]: true,\n          }}\n          id={IDS.toggle}\n          onClick={this.toggleSection}\n        >\n          <calcite-icon icon={arrowIcon} scale=\"s\" />\n          <span class={CSS.sectionHeaderText}>{text}</span>\n          {this.renderStatusIcon()}\n        </button>\n      );\n\n    return (\n      <Host>\n        {headerNode}\n        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>\n          <slot />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":"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","names":["IDS","CSS","ICONS","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectInteractive","connectLocalized","connectMessages","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","InteractiveContainer","isActivationKey"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  heading: \"heading\",\n  icon: \"icon\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  icon: \"icon\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start p-0;\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu\";\n  grid-column: header-start / menu-end;\n  grid-row: 1 / 2;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n  text-align: initial;\n\n  background-color: transparent;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n  padding: theme(\"spacing.3\");\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  display: flex;\n  margin-inline-start: theme(\"spacing.3\");\n  margin-inline-end: 0px;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  my-3\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n  margin-inline-end: theme(\"spacing.3\");\n  margin-inline-start: auto;\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\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 {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { focusFirstTabbable, getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot icon - A slot for adding a leading header icon with `calcite-icon`.\n * @slot control - A slot for adding a single HTML input element in a header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = 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   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: 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: BlockMessages;\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<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockMessages;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  renderIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header class={CSS.header} id={IDS.header}>\n        {this.renderIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <calcite-icon aria-hidden=\"true\" class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n          </button>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n              ref={this.setTransitionEl}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  chevronIcon: \"chevron-icon\",\n  content: \"content\",\n  focusGuard: \"focus-guard\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  invalid: \"invalid\",\n  label: \"label\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  switch: \"switch\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleContainer: \"toggle-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-up\",\n  menuClosed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    box-border\n    block;\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply font-sans\n    text-color-2\n    w-full\n    border-0\n    bg-transparent\n    font-medium;\n\n  gap: var(--calcite-spacing-md);\n}\n\n.toggle--switch,\n.section-header {\n  @apply text-n1\n    focus-base\n    mx-0\n    my-1\n    flex\n    cursor-pointer\n    select-none\n    items-center\n    px-0\n    py-2;\n\n  &:focus {\n    @apply focus-outset;\n  }\n  &:hover {\n    @apply text-color-1;\n  }\n}\n\n.label {\n  @apply flex items-center justify-center my-1;\n\n  margin-inline-start: var(--calcite-spacing-md);\n}\n\n.section-header__text {\n  @apply my-0\n    flex-auto;\n\n  text-align: initial;\n  word-wrap: anywhere;\n}\n\n.toggle-container {\n  @apply flex items-center relative bg-transparent;\n  word-break: break-word;\n\n  .toggle--switch__content {\n    @apply flex flex-auto items-center;\n  }\n\n  .icon--end,\n  .icon--start {\n    @apply flex items-center;\n\n    color: var(--calcite-color-text-3);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n\n  .switch {\n    @apply flex items-center;\n\n    inset-block-start: 50%;\n    transform: translate(0, 50%);\n  }\n}\n\n.status-icon {\n  @apply flex items-center;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n.chevron-icon {\n  @apply flex items-center;\n}\n\n@include base-component();\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 { focusFirstTabbable, toAriaBoolean } from \"../../utils/dom\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { FlipContext } from \"../interfaces\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-block-section\",\n  styleUrl: \"block-section.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * The component header text.\n   */\n  @Prop() text: string;\n\n  /**\n   * Specifies how the component's toggle is displayed, where:\n   *\n   * `\"button\"` sets the toggle to a selectable header, and\n   *\n   * `\"switch\"` sets the toggle to a switch.\n   */\n  @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = \"button\";\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: BlockSectionMessages;\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<BlockSectionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockSectionElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockSectionMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the header has been clicked.\n   */\n  @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggleSection();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  toggleSection = (): void => {\n    this.open = !this.open;\n    this.calciteBlockSectionToggle.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderStatusIcon(): VNode[] {\n    const { status } = this;\n    const statusIcon = ICONS[status] ?? false;\n    const statusIconClasses = {\n      [CSS.statusIcon]: true,\n      [CSS.valid]: status == \"valid\",\n      [CSS.invalid]: status == \"invalid\",\n    };\n\n    return statusIcon ? (\n      <calcite-icon class={statusIconClasses} icon={statusIcon} scale=\"s\" />\n    ) : null;\n  }\n\n  renderIcon(icon: string): VNode {\n    const { iconFlipRtl } = this;\n\n    if (icon === undefined) {\n      return null;\n    }\n\n    const flipRtlStart = iconFlipRtl === \"both\" || iconFlipRtl === \"start\";\n    const flipRtlEnd = iconFlipRtl === \"both\" || iconFlipRtl === \"end\";\n\n    const isIconStart = icon === this.iconStart;\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={isIconStart ? this.iconStart : this.iconEnd}\n        flipRtl={isIconStart ? flipRtlStart : flipRtlEnd}\n        icon={isIconStart ? this.iconStart : this.iconEnd}\n        key={isIconStart ? CSS.iconStart : CSS.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { messages, open, text, toggleDisplay } = this;\n    const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerNode =\n      toggleDisplay === \"switch\" ? (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <div\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS.toggleSwitch]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n            onKeyDown={this.handleHeaderKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            title={toggleLabel}\n          >\n            {this.renderIcon(this.iconStart)}\n            <div class={CSS.toggleSwitchContent}>\n              <span class={CSS.toggleSwitchText}>{text}</span>\n            </div>\n\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            {/* we use calcite-label to use a simple component that will allow us to prevent keyboard focus by setting tabindex=\"-1\" on the host */}\n          </div>\n          <calcite-label class={CSS.label} layout=\"inline\" tabIndex={-1}>\n            <calcite-switch checked={open} class={CSS.switch} label={toggleLabel} scale=\"s\" />\n          </calcite-label>\n        </div>\n      ) : (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <button\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.sectionHeader]: true,\n              [CSS.toggle]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n          >\n            {this.renderIcon(this.iconStart)}\n            <span class={CSS.sectionHeaderText}>{text}</span>\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            <calcite-icon class={CSS.chevronIcon} icon={arrowIcon} scale=\"s\" />\n          </button>\n        </div>\n      );\n\n    return (\n      <Host>\n        {headerNode}\n        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>\n          <slot />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-button.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const form = require('./form-2f0ce4f5.js');
-const interactive = require('./interactive-a21fc529.js');
-const label = require('./label-1bfab83c.js');
-const loadable = require('./loadable-8502181b.js');
-const locale = require('./locale-3c14df15.js');
-const observers = require('./observers-9d4b94fa.js');
-const component = require('./component-4791014e.js');
-const t9n = require('./t9n-d22d6156.js');
-const dom = require('./dom-b3b692c7.js');
-require('./browser-1a5f23a5.js');
-require('./key-b4561c75.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
+const index = require('./index-ca9c5738.js');
+const form = require('./form-228b04bd.js');
+const interactive = require('./interactive-46826d66.js');
+const label = require('./label-0eaf6fab.js');
+const loadable = require('./loadable-485b5ca8.js');
+const locale = require('./locale-22e50901.js');
+const observers = require('./observers-64d0e318.js');
+const component = require('./component-62e55d43.js');
+const t9n = require('./t9n-a2235c64.js');
+const dom = require('./dom-4f3978e9.js');
+require('./browser-d83e81a6.js');
+require('./key-987bfdfb.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
 
 const CSS = {
     buttonLoader: "calcite-button--loader",

package/dist/cjs/calcite-card-group.cjs.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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const dom = require('./dom-b3b692c7.js');
-const interactive = require('./interactive-a21fc529.js');
-const loadable = require('./loadable-8502181b.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
-require('./browser-1a5f23a5.js');
+const index = require('./index-ca9c5738.js');
+const dom = require('./dom-4f3978e9.js');
+const interactive = require('./interactive-46826d66.js');
+const loadable = require('./loadable-485b5ca8.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
+require('./browser-d83e81a6.js');
+require('./component-62e55d43.js');
 
 const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-card-group-gap:var(--calcite-size-md);display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-gap)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteCardGroupStyle0 = cardGroupCss;

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

@@ -1 +1 @@
-{"file":"calcite-card-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,uhBAAuhB,CAAC;AAC7iB,+BAAe,YAAY;;MCqCd,SAAS;;;;;;;;;QA6CZ,UAAK,GAA6B,EAAE,CAAC;;;;;;QAkGrC,qCAAgC,GAAG;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B,CAAC;QAEM,4BAAuB,GAAG,CAAC,KAAY;YAC7C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAyB,CAAC,CAAC;YACzD,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B,CAAC;QAEM,uBAAkB,GAAG,CAAC,MAAuB;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM;iBAChB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iBACnC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,cAAc,CAAC,CAA6B,CAAC;SAC5E,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE;gBACpB,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;aACvC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAAa,EAAE,SAAkC;YAC3E,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE;oBACpB,MAAM,UAAU,GAAG,SAAS,KAAK,EAAE,CAAC;oBACpC,QAAQ,IAAI,CAAC,aAAa;wBACxB,KAAK,UAAU;4BACb,IAAI,UAAU,EAAE;gCACd,EAAE,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC;6BAC5B;4BACD,MAAM;wBAER,KAAK,QAAQ;4BACX,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;4BAChD,MAAM;wBAER,KAAK,gBAAgB;4BACnB,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;4BAC3B,MAAM;qBACT;iBACF,CAAC,CAAC;aACJ;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;YAE5D,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC3D,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;aACpC;SACF,CAAC;wBAlLkC,KAAK;;6BASrC,MAAM;6BAYyD,EAAE;;IATrE,qBAAqB;QACnB,IAAI,CAAC,gCAAgC,EAAE,CAAC;KACzC;;;;;;IAkCD,iBAAiB;QACfA,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,MAAM,iBAAiB;QACrBC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;;;IAQD,mCAAmC,CAAC,KAAoB;QACtD,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;YACjE,QAAQ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;gBACzB,KAAK,YAAY;oBACfC,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;gBACR,KAAK,WAAW;oBACdA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,UAAU,CAAC,CAAC;oBAC1F,MAAM;gBACR,KAAK,MAAM;oBACTA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,OAAO,CAAC,CAAC;oBACvF,MAAM;gBACR,KAAK,KAAK;oBACRA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;aACT;SACF;KACF;IAGD,yBAAyB,CAAC,KAAkB;QAC1C,IACE,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtC,CAAE,KAAK,CAAC,MAAiC,CAAC,UAAU,EACpD;YACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,MAAgC,CAAC,CAAC;SACrE;KACF;;;;;;;;;IAYD,MAAM,QAAQ;QACZ,MAAMC,wBAAe,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClBC,gBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC7B;KACF;;;;;;IAmED,MAAM;QACJ,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;QAE9F,QACEC,QAACC,UAAI,uDACHD,QAACE,gCAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,mFACiBG,iBAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAC/B,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,IAEVH,mEACE,YAAY,EAAE,IAAI,CAAC,uBAAuB,EAC1C,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,GACrD,CACE,CACe,CAClB,EACP;KACH;;;;;;;;;;","names":["connectInteractive","updateHostInteraction","setComponentLoaded","disconnectInteractive","setUpLoadableComponent","focusElementInGroup","componentLoaded","focusElement","h","Host","InteractiveContainer","toAriaBoolean"],"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.cjs.js","mappings":"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","names":["connectInteractive","updateHostInteraction","setComponentLoaded","disconnectInteractive","setUpLoadableComponent","focusElementInGroup","componentLoaded","focusElement","h","Host","InteractiveContainer","toAriaBoolean"],"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/cjs/calcite-card.cjs.entry.js

@@ -1,23 +1,24 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const dom = require('./dom-b3b692c7.js');
-const locale = require('./locale-3c14df15.js');
-const t9n = require('./t9n-d22d6156.js');
-const loadable = require('./loadable-8502181b.js');
-const interactive = require('./interactive-a21fc529.js');
-const key = require('./key-b4561c75.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
-require('./observers-9d4b94fa.js');
-require('./browser-1a5f23a5.js');
+const index = require('./index-ca9c5738.js');
+const dom = require('./dom-4f3978e9.js');
+const locale = require('./locale-22e50901.js');
+const t9n = require('./t9n-a2235c64.js');
+const loadable = require('./loadable-485b5ca8.js');
+const interactive = require('./interactive-46826d66.js');
+const key = require('./key-987bfdfb.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
+require('./observers-64d0e318.js');
+require('./component-62e55d43.js');
+require('./browser-d83e81a6.js');
 
 const CSS = {
     container: "container",

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

@@ -1 +1 @@
-{"file":"calcite-card.entry.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","isActivationKey","componentFocusable","connectInteractive","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setUpLoadableComponent","setUpMessages","updateMessages","h","getSlotted","Host","InteractiveContainer","toAriaBoolean"],"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.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","isActivationKey","componentFocusable","connectInteractive","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setUpLoadableComponent","setUpMessages","updateMessages","h","getSlotted","Host","InteractiveContainer","toAriaBoolean"],"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}