@esri/calcite-components 2.6.0-next.0 → 2.6.0-next.2

package/dist/components/calcite-accordion-item.js.map

@@ -1 +1 @@
-{"file":"calcite-accordion-item.js","mappings":"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","names":[],"sources":["src/components/accordion-item/resources.ts","src/components/accordion-item/accordion-item.scss?tag=calcite-accordion-item&encapsulation=shadow","src/components/accordion-item/accordion-item.tsx"],"sourcesContent":["export const SLOTS = {\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n};\n\nexport const CSS = {\n  icon: \"icon\",\n  header: \"header\",\n  headerContent: \"header-content\",\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  headerContainer: \"header-container\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","%icon-position {\n  /* icon rotation variables */\n  --calcite-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row-reverse;\n  --calcite-accordion-item-icon-spacing-start: 0;\n  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row;\n  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);\n  --calcite-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n:host {\n  @apply text-color-3\n    relative\n    flex\n    flex-col\n    no-underline;\n  background-color: var(--calcite-accordion-item-background, theme(\"backgroundColor.foreground.1\"));\n}\n\n// focus styles\n:host .header-content {\n  @apply focus-base;\n}\n\n:host(:focus) .header-content {\n  @apply focus-inset\n  outline-none;\n}\n\n:host([expanded]) {\n  @apply text-color-1;\n  & .content {\n    @apply text-color-1 block;\n  }\n  & .header {\n    border-block-end-color: transparent;\n  }\n}\n\n// .header / content\n:host .header {\n  @apply flex items-stretch;\n}\n\n:host .icon {\n  @apply text-color-3\n    relative\n    m-0\n    inline-flex\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon--end {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n  margin-inline-start: var(--calcite-accordion-icon-margin);\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n.content {\n  padding: var(--calcite-accordion-item-padding);\n}\n\n:host .content,\n:host .header {\n  border-block-end: 1px solid var(--calcite-accordion-item-border, theme(\"borderColor.color.2\"));\n}\n\n:host .header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n  @include word-break();\n}\n\n:host .content {\n  @apply text-color-3 hidden pt-0;\n  text-align: initial;\n}\n\n// accordion item icon\n:host .expand-icon {\n  @apply text-color-3;\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));\n}\n\n:host([expanded]) .expand-icon {\n  @apply text-color-3;\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));\n}\n\n:host([expanded]) .calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));\n}\n\n// accordion item title\n:host .header-text {\n  @apply my-0 flex-grow flex-col py-0;\n  text-align: initial;\n  margin-inline-end: theme(\"margin.auto\");\n}\n\n:host .heading,\n:host .description {\n  @apply flex w-full;\n}\n\n:host .heading {\n  @apply text-color-2 font-medium;\n}\n:host .description {\n  @apply text-color-3 mt-1;\n}\n\n:host(:focus),\n:host(:hover) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n\n  & .expand-icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n:host(:focus),\n:host(:active),\n:host([expanded]) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n.header-content {\n  @apply flex-grow cursor-pointer;\n  padding: var(--calcite-accordion-item-padding);\n  flex-direction: var(--calcite-accordion-item-flex-direction);\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n@media (forced-colors: active) {\n  :host([expanded]) {\n    & .header {\n      border-block-end: none;\n    }\n    & .heading {\n      /** give visual indicator of expanded state since subtle color changes can't be done **/\n      font-weight: bolder;\n    }\n  }\n  :host(:hover),\n  :host(:focus) {\n    & .heading {\n      /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/\n      text-decoration: underline;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  closestElementCrossShadowBoundary,\n  getElementDir,\n  getSlotted,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\nimport { FlipContext, Position, Scale, SelectionMode } from \"../interfaces\";\nimport { RequestedItem } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n */\n@Component({\n  tag: \"calcite-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: true,\n})\nexport class AccordionItem implements ConditionalSlotComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is expanded. */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  /** Specifies heading text for the component. */\n  @Prop() heading: string;\n\n  /** Specifies a description for the component. */\n  @Prop() description: string;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\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  /**\n   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconPosition: Position;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: \"chevron\" | \"caret\" | \"plus-minus\";\n\n  /**\n   * The containing `accordion` element.\n   *\n   * @internal\n   */\n  @Prop() accordionParent: HTMLCalciteAccordionElement;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemClose: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsStart) ? (\n      <div class={CSS.actionsStart}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsEnd) ? (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} />\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { iconFlipRtl } = this;\n    const dir = getElementDir(this.el);\n    const iconStartEl = this.iconStart ? (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"start\"}\n        icon={this.iconStart}\n        key=\"icon-start\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconEndEl = this.iconEnd ? (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"end\"}\n        icon={this.iconEnd}\n        key=\"icon-end\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const { description } = this;\n    return (\n      <Host>\n        <div\n          class={{\n            [`icon-position--${this.iconPosition}`]: true,\n            [`icon-type--${this.iconType}`]: true,\n          }}\n        >\n          <div class={{ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === \"rtl\" }}>\n            {this.renderActionsStart()}\n            <div\n              aria-controls={IDS.section}\n              aria-expanded={toAriaBoolean(this.expanded)}\n              class={CSS.headerContent}\n              id={IDS.sectionToggle}\n              onClick={this.itemHeaderClickHandler}\n              role=\"button\"\n              tabindex=\"0\"\n            >\n              <div class={CSS.headerContainer}>\n                {iconStartEl}\n                <div class={CSS.headerText}>\n                  <span class={CSS.heading}>{this.heading}</span>\n                  {description ? <span class={CSS.description}>{description}</span> : null}\n                </div>\n                {iconEndEl}\n              </div>\n              <calcite-icon\n                class={CSS.expandIcon}\n                icon={\n                  this.iconType === \"chevron\"\n                    ? \"chevronDown\"\n                    : this.iconType === \"caret\"\n                      ? \"caretDown\"\n                      : this.expanded\n                        ? \"minus\"\n                        : \"plus\"\n                }\n                scale={getIconScale(this.scale)}\n              />\n            </div>\n            {this.renderActionsEnd()}\n          </div>\n          <section aria-labelledby={IDS.sectionToggle} class={CSS.content} id={IDS.section}>\n            <slot />\n          </section>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitRequestedItem();\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteInternalAccordionChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const parent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      this.el,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== parent) {\n      return;\n    }\n\n    this.determineActiveItem(parent.selectionMode, event.detail.requestedAccordionItem);\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalAccordionItemsSync\", { target: \"document\" })\n  accordionItemSyncHandler(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const accordionItem = this.el;\n\n    // we sync with our accordion parent via event only if the item is wrapped within another component's shadow DOM,\n    // otherwise, the accordion parent will sync the item directly\n\n    const willBeSyncedByDirectParent = accordionItem.parentElement === accordion;\n    if (willBeSyncedByDirectParent) {\n      return;\n    }\n\n    const closestAccordionParent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    accordionItem.iconPosition = closestAccordionParent.iconPosition;\n    accordionItem.iconType = closestAccordionParent.iconType;\n    accordionItem.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** handle clicks on item header */\n  private itemHeaderClickHandler = (): void => this.emitRequestedItem();\n\n  private determineActiveItem(\n    selectionMode: SelectionMode,\n    requestedItem: HTMLCalciteAccordionItemElement,\n  ): void {\n    switch (selectionMode) {\n      case \"multiple\":\n        if (this.el === requestedItem) {\n          this.expanded = !this.expanded;\n        }\n        break;\n\n      case \"single\":\n        this.expanded = this.el === requestedItem ? !this.expanded : false;\n        break;\n\n      case \"single-persist\":\n        this.expanded = this.el === requestedItem;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteInternalAccordionItemSelect.emit({\n      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement,\n    });\n  }\n}\n"],"version":3}
+{"file":"calcite-accordion-item.js","mappings":"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","names":[],"sources":["src/components/accordion-item/resources.ts","src/components/accordion-item/accordion-item.scss?tag=calcite-accordion-item&encapsulation=shadow","src/components/accordion-item/accordion-item.tsx"],"sourcesContent":["export const SLOTS = {\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n};\n\nexport const CSS = {\n  icon: \"icon\",\n  header: \"header\",\n  headerContent: \"header-content\",\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  headerContainer: \"header-container\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","%icon-position {\n  /* icon rotation variables */\n  --calcite-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row-reverse;\n  --calcite-accordion-item-icon-spacing-start: 0;\n  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row;\n  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);\n  --calcite-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n:host {\n  @apply text-color-3\n    relative\n    flex\n    flex-col\n    no-underline;\n  background-color: var(--calcite-accordion-item-background, theme(\"backgroundColor.foreground.1\"));\n}\n\n// focus styles\n:host .header-content {\n  @apply focus-base;\n}\n\n:host(:focus) .header-content {\n  @apply focus-inset\n  outline-none;\n}\n\n:host([expanded]) {\n  @apply text-color-1;\n  & .content {\n    @apply text-color-1 block;\n  }\n  & .header {\n    border-block-end-color: transparent;\n  }\n}\n\n// .header / content\n:host .header {\n  @apply flex items-stretch;\n}\n\n:host .icon {\n  @apply text-color-3\n    relative\n    m-0\n    inline-flex\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon--end {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n  margin-inline-start: var(--calcite-accordion-icon-margin);\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n.content {\n  padding: var(--calcite-accordion-item-padding);\n}\n\n:host .content,\n:host .header {\n  border-block-end: 1px solid var(--calcite-accordion-item-border, theme(\"borderColor.color.2\"));\n}\n\n:host .header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n  @include word-break();\n}\n\n:host .content {\n  @apply text-color-3 hidden pt-0;\n  text-align: initial;\n}\n\n// accordion item icon\n:host .expand-icon {\n  @apply text-color-3;\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));\n}\n\n:host([expanded]) .expand-icon {\n  @apply text-color-3;\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));\n}\n\n:host([expanded]) .calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));\n}\n\n// accordion item title\n:host .header-text {\n  @apply my-0 flex-grow flex-col py-0;\n  text-align: initial;\n  margin-inline-end: theme(\"margin.auto\");\n}\n\n:host .heading,\n:host .description {\n  @apply flex w-full;\n}\n\n:host .heading {\n  @apply text-color-2 font-medium;\n}\n:host .description {\n  @apply text-color-3 mt-1;\n}\n\n:host(:focus),\n:host(:hover) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n\n  & .expand-icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n:host(:focus),\n:host(:active),\n:host([expanded]) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n.header-content {\n  @apply flex-grow cursor-pointer;\n  padding: var(--calcite-accordion-item-padding);\n  flex-direction: var(--calcite-accordion-item-flex-direction);\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n@media (forced-colors: active) {\n  :host([expanded]) {\n    & .header {\n      border-block-end: none;\n    }\n    & .heading {\n      /** give visual indicator of expanded state since subtle color changes can't be done **/\n      font-weight: bolder;\n    }\n  }\n  :host(:hover),\n  :host(:focus) {\n    & .heading {\n      /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/\n      text-decoration: underline;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  closestElementCrossShadowBoundary,\n  getElementDir,\n  getSlotted,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\nimport { FlipContext, Position, Scale, SelectionMode } from \"../interfaces\";\nimport { RequestedItem } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n */\n@Component({\n  tag: \"calcite-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: true,\n})\nexport class AccordionItem implements ConditionalSlotComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is expanded. */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  /** Specifies heading text for the component. */\n  @Prop() heading: string;\n\n  /** Specifies a description for the component. */\n  @Prop() description: string;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\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  /**\n   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconPosition: Position;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: \"chevron\" | \"caret\" | \"plus-minus\";\n\n  /**\n   * The containing `accordion` element.\n   *\n   * @internal\n   */\n  @Prop() accordionParent: HTMLCalciteAccordionElement;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemClose: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsStart) ? (\n      <div class={CSS.actionsStart}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsEnd) ? (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} />\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { iconFlipRtl } = this;\n    const dir = getElementDir(this.el);\n    const iconStartEl = this.iconStart ? (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"start\"}\n        icon={this.iconStart}\n        key=\"icon-start\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconEndEl = this.iconEnd ? (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"end\"}\n        icon={this.iconEnd}\n        key=\"icon-end\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const { description } = this;\n    return (\n      <Host>\n        <div\n          class={{\n            [`icon-position--${this.iconPosition}`]: true,\n            [`icon-type--${this.iconType}`]: true,\n          }}\n        >\n          <div class={{ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === \"rtl\" }}>\n            {this.renderActionsStart()}\n            <div\n              aria-controls={IDS.section}\n              aria-expanded={toAriaBoolean(this.expanded)}\n              class={CSS.headerContent}\n              id={IDS.sectionToggle}\n              onClick={this.itemHeaderClickHandler}\n              role=\"button\"\n              tabindex=\"0\"\n            >\n              <div class={CSS.headerContainer}>\n                {iconStartEl}\n                <div class={CSS.headerText}>\n                  <span class={CSS.heading}>{this.heading}</span>\n                  {description ? <span class={CSS.description}>{description}</span> : null}\n                </div>\n                {iconEndEl}\n              </div>\n              <calcite-icon\n                class={CSS.expandIcon}\n                icon={\n                  this.iconType === \"chevron\"\n                    ? \"chevronDown\"\n                    : this.iconType === \"caret\"\n                      ? \"caretDown\"\n                      : this.expanded\n                        ? \"minus\"\n                        : \"plus\"\n                }\n                scale={getIconScale(this.scale)}\n              />\n            </div>\n            {this.renderActionsEnd()}\n          </div>\n          <section aria-labelledby={IDS.sectionToggle} class={CSS.content} id={IDS.section}>\n            <slot />\n          </section>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitRequestedItem();\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteInternalAccordionChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const parent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      this.el,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== parent) {\n      return;\n    }\n\n    this.determineActiveItem(parent.selectionMode, event.detail.requestedAccordionItem);\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalAccordionItemsSync\", { target: \"document\" })\n  accordionItemSyncHandler(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const accordionItem = this.el;\n\n    // we sync with our accordion parent via event only if the item is wrapped within another component's shadow DOM,\n    // otherwise, the accordion parent will sync the item directly\n\n    const willBeSyncedByDirectParent = accordionItem.parentElement === accordion;\n    if (willBeSyncedByDirectParent) {\n      return;\n    }\n\n    const closestAccordionParent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    accordionItem.iconPosition = closestAccordionParent.iconPosition;\n    accordionItem.iconType = closestAccordionParent.iconType;\n    accordionItem.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** handle clicks on item header */\n  private itemHeaderClickHandler = (): void => this.emitRequestedItem();\n\n  private determineActiveItem(\n    selectionMode: SelectionMode,\n    requestedItem: HTMLCalciteAccordionItemElement,\n  ): void {\n    switch (selectionMode) {\n      case \"multiple\":\n        if (this.el === requestedItem) {\n          this.expanded = !this.expanded;\n        }\n        break;\n\n      case \"single\":\n        this.expanded = this.el === requestedItem ? !this.expanded : false;\n        break;\n\n      case \"single-persist\":\n        this.expanded = this.el === requestedItem;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteInternalAccordionItemSelect.emit({\n      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement,\n    });\n  }\n}\n"],"version":3}

package/dist/components/calcite-accordion.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-action-bar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-action-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { A as ActionGroup, d as defineCustomElement$1 } from './action-group.js';
 

package/dist/components/calcite-action-menu.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { A as ActionMenu, d as defineCustomElement$1 } from './action-menu.js';
 

package/dist/components/calcite-action-pad.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { A as Action, d as defineCustomElement$1 } from './action.js';
 

package/dist/components/calcite-alert.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, o as setRequestedIcon } from './dom.js';
@@ -47,7 +47,7 @@ const CSS = {
     textContainer: "text-container",
 };
 
-const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
+const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"calcite-alert.js","mappings":"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","names":[],"sources":["src/components/alert/resources.ts","src/components/alert/alert.scss?tag=calcite-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["export const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  title: \"title\",\n  message: \"message\",\n  link: \"link\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  close: \"close\",\n  container: \"container\",\n  containerBottom: \"container--bottom\",\n  containerBottomEnd: \"container--bottom-end\",\n  containerBottomStart: \"container--bottom-start\",\n  containerQueued: \"container--queued\",\n  containerTop: \"container--top\",\n  containerTopEnd: \"container--top-end\",\n  containerTopStart: \"container--top-start\",\n  content: \"content\",\n  contentContainer: \"content-container\",\n  dismissProgress: \"dismiss-progress\",\n  footer: \"footer\",\n  icon: \"icon\",\n  containerSlottedInShell: \"container--slotted-in-shell\",\n  queueCount: \"queue-count\",\n  queueCountActive: \"queue-count--active\",\n  textContainer: \"text-container\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-alert-width: Specifies the width of the component.\n */\n\n$border-style: 1px solid var(--calcite-color-border-3);\n\n:host {\n  --calcite-alert-edge-distance: theme(\"spacing.8\");\n  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);\n  @apply block;\n}\n\n.container {\n  @apply bg-foreground-1\n  box-border\n  fixed\n  flex\n  items-center\n  justify-center\n  min-w-min\n  mx-auto\n  my-0\n  opacity-0\n  pointer-events-none\n  shadow-2\n  text-start\n  w-full\n  z-toast;\n\n  border-radius: var(--calcite-border-radius);\n  border-block-start: 0 solid transparent;\n  border-inline: $border-style;\n  border-block-end: $border-style;\n  inline-size: var(--calcite-alert-width);\n  max-inline-size: calc(100% - (var(--calcite-alert-edge-distance) * 2));\n  transition:\n    var(--calcite-internal-animation-timing-slow) $easing-function,\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n    all var(--calcite-animation-timing) ease-in-out;\n\n  &--bottom,\n  &--top {\n    inset-inline-end: 0;\n    inset-inline-start: 0;\n  }\n  &[class*=\"bottom\"] {\n    transform: translate3d(0, var(--calcite-alert-edge-distance), 0);\n    inset-block-end: var(--calcite-alert-edge-distance);\n  }\n  &[class*=\"top\"] {\n    transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);\n    inset-block-start: var(--calcite-alert-edge-distance);\n  }\n  &[class*=\"start\"] {\n    inset-inline-start: var(--calcite-alert-edge-distance);\n    inset-inline-end: auto;\n  }\n  &[class*=\"end\"] {\n    inset-inline-end: var(--calcite-alert-edge-distance);\n    inset-inline-start: auto;\n  }\n}\n\n.icon {\n  @apply flex flex-col items-center justify-center p-0;\n  margin-block: auto;\n  margin-inline-end: auto;\n  padding-inline-start: var(--calcite-alert-spacing-token-large);\n}\n\n.close {\n  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;\n  -webkit-appearance: none;\n  padding: var(--calcite-alert-spacing-token-large);\n\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:hover,\n  &:focus {\n    @apply bg-foreground-2 text-color-1;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n}\n\n.queue-count {\n  @apply bg-foreground-1\n  cursor-default\n  flex\n  font-medium\n  invisible\n  items-center\n  justify-around\n  min-w-min\n  opacity-0\n  overflow-hidden\n  self-stretch\n  text-center\n  text-color-2\n  transition-default;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n\n  &--active {\n    @apply visible opacity-100;\n  }\n}\n\n.dismiss-progress {\n  @apply absolute\n  block\n  w-full\n  overflow-hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n  &:after {\n    @apply absolute\n    top-0\n    block;\n    block-size: 2px;\n    content: \"\";\n    background-color: var(--calcite-alert-dismiss-progress-background);\n    inset-inline-end: 0;\n  }\n}\n\n.actions-end {\n  @apply flex self-stretch;\n}\n\n.text-container {\n  @apply box-border flex flex-auto min-w-0 flex-col break-words;\n  padding-block: var(--calcite-alert-spacing-token-small);\n  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);\n}\n\n.footer {\n  @apply flex justify-end pt-px relative self-stretch w-auto;\n  block-size: inherit;\n}\n\n// scale variables\n:host([scale=\"s\"]) {\n  --calcite-alert-width: 40em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.2\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.3\");\n  --calcite-alert-footer-height: theme(\"height.8\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing[0.5]\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  .queue-count {\n    @apply mx-2;\n  }\n  .container {\n    --calcite-alert-min-height: 3.5rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-alert-width: 50em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.3\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.4\");\n  --calcite-alert-footer-height: theme(\"height.12\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing.1\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  .queue-count {\n    @apply mx-3;\n  }\n  .container {\n    --calcite-alert-min-height: 4.1875rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-alert-width: 60em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.4\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.5\");\n  --calcite-alert-footer-height: theme(\"height.16\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing.2\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-1-wrap mb-1;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-0-wrap;\n  }\n  .queue-count {\n    @apply mx-4;\n  }\n  .container {\n    --calcite-alert-min-height: 5.625rem;\n  }\n}\n\n:host([open]) {\n  .container:not(.container--queued) {\n    @apply border-t-2 opacity-100;\n    pointer-events: initial;\n    &[class*=\"bottom\"] {\n      transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);\n    }\n    &[class*=\"top\"] {\n      transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);\n    }\n  }\n}\n\n:host([auto-close]) > .queue-count {\n  border-inline-end: 0 solid transparent;\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-0-wrap\n    text-color-1\n    font-medium;\n}\n\n@include slotted(\"message\", \"*\") {\n  @apply text-n1-wrap\n    text-color-2\n    m-0\n    inline\n    font-normal;\n  margin-inline-end: theme(\"margin.2\");\n}\n\n@include slotted(\"link\", \"*\") {\n  @apply text-color-link inline-flex;\n}\n\n$alertKinds:\n  \"brand\" var(--calcite-color-brand),\n  \"info\" var(--calcite-color-status-info),\n  \"danger\" var(--calcite-color-status-danger),\n  \"success\" var(--calcite-color-status-success),\n  \"warning\" var(--calcite-color-status-warning);\n\n@each $alertKind in $alertKinds {\n  $name: nth($alertKind, 1);\n  $kind: nth($alertKind, 2);\n\n  :host([kind=\"#{$name}\"]) {\n    .container {\n      border-block-start-color: $kind;\n\n      & .icon {\n        color: $kind;\n      }\n    }\n  }\n}\n\n$alertDurations:\n  \"fast\" 6000ms,\n  \"medium\" 10000ms,\n  \"slow\" 14000ms;\n\n@each $alertDuration in $alertDurations {\n  $name: nth($alertDuration, 1);\n  $duration: nth($alertDuration, 2);\n\n  :host([auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation: dismissProgress $duration ease-out;\n  }\n  :host(:hover[auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation-play-state: paused;\n  }\n}\n\n@keyframes dismissProgress {\n  0% {\n    @apply w-0 opacity-75;\n  }\n  100% {\n    @apply w-full opacity-100;\n  }\n}\n\n/**\n * Conditional styles for when Alert is slotted in Shell\n */\n.container--slotted-in-shell {\n  @apply absolute;\n}\n\n@include base-component();\n@include calciteHydratedHidden();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getSlotted,\n  setRequestedIcon,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { MenuPlacement } from \"../../utils/floating-ui\";\nimport { getIconScale } from \"../../utils/component\";\n\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  NumberingSystem,\n  NumberStringFormat,\n} from \"../../utils/locale\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { KindIcons } from \"../resources\";\nimport { AlertMessages } from \"./assets/alert/t9n\";\nimport { AlertDuration, Sync, Unregister } from \"./interfaces\";\nimport { CSS, DURATIONS, SLOTS } from \"./resources\";\n\n/**\n * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\n * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n */\n\n/**\n * @slot title - A slot for adding a title to the component.\n * @slot message - A slot for adding main text to the component.\n * @slot link - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n */\n\n@Component({\n  tag: \"calcite-alert\",\n  styleUrl: \"alert.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Alert implements OpenCloseComponent, LoadableComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //---------------------------------------------------------------------------\n\n  /** When `true`, displays and positions the component. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n    if (this.open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\n    }\n    if (!this.open) {\n      this.queue = this.queue.filter((el) => el !== this.el);\n      this.calciteInternalAlertSync.emit({ queue: this.queue });\n    }\n  }\n\n  /** When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */\n  @Prop({ reflect: true }) autoClose = false;\n\n  /** Specifies the duration before the component automatically closes - only use with `autoClose`. */\n  @Prop({ reflect: true }) autoCloseDuration: AlertDuration = \"medium\";\n\n  /** Specifies the kind of the component, which will apply to top border and icon. */\n  @Prop({ reflect: true }) kind: Extract<\n    \"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\",\n    Kind\n  > = \"brand\";\n\n  /**\n   * When `true`, shows a default recommended icon. Alternatively,\n   * pass a Calcite UI Icon name to display a specific icon.\n   */\n  @Prop({ reflect: true }) icon: string | boolean;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies an accessible name for the component. */\n  @Prop() label!: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem: NumberingSystem;\n\n  /** Specifies the placement of the component. */\n  @Prop({ reflect: true }) placement: MenuPlacement = \"bottom\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\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: AlertMessages;\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<AlertMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * This internal property, managed by a containing calcite-shell, is used\n   * to inform the component if special configuration or styles are needed\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) slottedInShell: boolean;\n\n  @Watch(\"autoCloseDuration\")\n  updateDuration(): void {\n    if (this.autoClose && this.autoCloseTimeoutId) {\n      window.clearTimeout(this.autoCloseTimeoutId);\n      this.autoCloseTimeoutId = window.setTimeout(\n        () => this.closeAlert(),\n        DURATIONS[this.autoCloseDuration],\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n\n    const open = this.open;\n    if (open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\n    }\n\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    window.dispatchEvent(\n      new CustomEvent<Unregister>(\"calciteInternalAlertUnregister\", {\n        detail: { alert: this.el },\n      }),\n    );\n    window.clearTimeout(this.autoCloseTimeoutId);\n    window.clearTimeout(this.queueTimeout);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.slottedInShell = false;\n  }\n\n  render(): VNode {\n    const { open, autoClose, label, placement, queued } = this;\n    const role = autoClose ? \"alert\" : \"alertdialog\";\n    const hidden = !open;\n    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);\n    const hasQueuedAlerts = this.queueLength > 1;\n\n    return (\n      <Host\n        aria-hidden={toAriaBoolean(hidden)}\n        aria-label={label}\n        calcite-hydrated-hidden={hidden}\n        role={role}\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerQueued]: queued,\n            [`${CSS.container}--${placement}`]: true,\n            [CSS.containerSlottedInShell]: this.slottedInShell,\n          }}\n          onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}\n          onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setTransitionEl}\n        >\n          {effectiveIcon && this.renderIcon(effectiveIcon)}\n          <div class={CSS.textContainer}>\n            <slot name={SLOTS.title} />\n            <slot name={SLOTS.message} />\n            <slot name={SLOTS.link} />\n          </div>\n          {this.renderActionsEnd()}\n          {hasQueuedAlerts ? this.renderQueueCount() : null}\n          {this.renderCloseButton()}\n          {open && !queued && autoClose ? <div class={CSS.dismissProgress} /> : null}\n        </div>\n      </Host>\n    );\n  }\n\n  private renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"close\"\n        onClick={this.closeAlert}\n        type=\"button\"\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButton = el)}\n      >\n        <calcite-icon icon=\"x\" scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  private renderQueueCount(): VNode {\n    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;\n    const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);\n\n    return (\n      <div\n        class={{\n          [CSS.queueCount]: true,\n          [CSS.queueCountActive]: this.queueLength > 1,\n        }}\n        key=\"queue-count\"\n      >\n        <calcite-chip scale={this.scale} value={queueText}>\n          {queueText}\n        </calcite-chip>\n      </div>\n    );\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderIcon(icon: string): VNode {\n    return (\n      <div class={CSS.icon}>\n        <calcite-icon flipRtl={this.iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />\n      </div>\n    );\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 }) calciteAlertBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertClose: 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 }) calciteAlertBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertOpen: EventEmitter<void>;\n\n  /**\n   * Fires to sync queue when opened or closed.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAlertSync: EventEmitter<Sync>;\n\n  /**\n   * Fires when the component is added to DOM - used to receive initial queue.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAlertRegister: EventEmitter<void>;\n\n  // when an alert is opened or closed, update queue and determine active alert\n  @Listen(\"calciteInternalAlertSync\", { target: \"window\" })\n  alertSync(event: CustomEvent): void {\n    if (this.queue !== event.detail.queue) {\n      this.queue = event.detail.queue;\n    }\n    this.queueLength = this.queue.length;\n    this.determineActiveAlert();\n    event.stopPropagation();\n  }\n\n  // when an alert is first registered, trigger a queue sync\n  @Listen(\"calciteInternalAlertRegister\", { target: \"window\" })\n  alertRegister(): void {\n    if (this.open && !this.queue.includes(this.el as HTMLCalciteAlertElement)) {\n      this.queued = true;\n      this.queue.push(this.el as HTMLCalciteAlertElement);\n    }\n    this.calciteInternalAlertSync.emit({ queue: this.queue });\n    this.determineActiveAlert();\n  }\n\n  // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.\n  @Listen(\"calciteInternalAlertUnregister\", { target: \"window\" })\n  alertUnregister(event: CustomEvent<Unregister>): void {\n    const queue = this.queue.filter((el) => el !== event.detail.alert);\n    this.queue = queue;\n\n    window.dispatchEvent(\n      new CustomEvent<Sync>(\"calciteInternalAlertSync\", {\n        detail: { queue },\n      }),\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's \"close\" button, the first focusable item. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const alertLinkEl: HTMLCalciteLinkElement = getSlotted(this.el, { selector: \"calcite-link\" });\n\n    if (!this.closeButton && !alertLinkEl) {\n      return;\n    } else if (alertLinkEl) {\n      return alertLinkEl.setFocus();\n    } else if (this.closeButton) {\n      this.closeButton.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAlertElement;\n\n  @State() defaultMessages: AlertMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() numberStringFormatter = new NumberStringFormat();\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() hasEndActions = false;\n\n  /** the list of queued alerts */\n  @State() queue: HTMLCalciteAlertElement[] = [];\n\n  /** the count of queued alerts */\n  @State() queueLength = 0;\n\n  /** is the alert queued */\n  @State() queued = false;\n\n  private autoCloseTimeoutId: number = null;\n\n  private closeButton: HTMLButtonElement;\n\n  private initialOpenTime: number;\n\n  private lastMouseOverBegin: number;\n\n  private queueTimeout: number;\n\n  private totalOpenTime = 0;\n\n  private totalHoverTime = 0;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  /** determine which alert is active */\n  private determineActiveAlert(): void {\n    if (this.queue?.[0] === this.el) {\n      this.openAlert();\n      if (this.autoClose && !this.autoCloseTimeoutId) {\n        this.initialOpenTime = Date.now();\n        this.autoCloseTimeoutId = window.setTimeout(\n          () => this.closeAlert(),\n          DURATIONS[this.autoCloseDuration],\n        );\n      }\n    } else {\n      return;\n    }\n  }\n\n  /** close and emit calciteInternalAlertSync event with the updated queue payload */\n  private closeAlert = (): void => {\n    this.autoCloseTimeoutId = null;\n    this.queued = false;\n    this.open = false;\n    this.queue = this.queue.filter((el) => el !== this.el);\n    this.determineActiveAlert();\n    this.calciteInternalAlertSync.emit({ queue: this.queue });\n  };\n\n  onBeforeOpen(): void {\n    this.calciteAlertBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteAlertOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteAlertBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteAlertClose.emit();\n  }\n\n  /** remove queued class after animation completes */\n  private openAlert(): void {\n    window.clearTimeout(this.queueTimeout);\n    this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);\n  }\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleMouseOver = (): void => {\n    window.clearTimeout(this.autoCloseTimeoutId);\n    this.totalOpenTime = Date.now() - this.initialOpenTime;\n    this.lastMouseOverBegin = Date.now();\n  };\n\n  private handleMouseLeave = (): void => {\n    const hoverDuration = Date.now() - this.lastMouseOverBegin;\n    const timeRemaining =\n      DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;\n    this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;\n    this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);\n  };\n}\n"],"version":3}
+{"file":"calcite-alert.js","mappings":"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","names":[],"sources":["src/components/alert/resources.ts","src/components/alert/alert.scss?tag=calcite-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["export const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  title: \"title\",\n  message: \"message\",\n  link: \"link\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  close: \"close\",\n  container: \"container\",\n  containerBottom: \"container--bottom\",\n  containerBottomEnd: \"container--bottom-end\",\n  containerBottomStart: \"container--bottom-start\",\n  containerQueued: \"container--queued\",\n  containerTop: \"container--top\",\n  containerTopEnd: \"container--top-end\",\n  containerTopStart: \"container--top-start\",\n  content: \"content\",\n  contentContainer: \"content-container\",\n  dismissProgress: \"dismiss-progress\",\n  footer: \"footer\",\n  icon: \"icon\",\n  containerSlottedInShell: \"container--slotted-in-shell\",\n  queueCount: \"queue-count\",\n  queueCountActive: \"queue-count--active\",\n  textContainer: \"text-container\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-alert-width: Specifies the width of the component.\n */\n\n$border-style: 1px solid var(--calcite-color-border-3);\n\n:host {\n  --calcite-alert-edge-distance: theme(\"spacing.8\");\n  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);\n  @apply block;\n}\n\n.container {\n  @apply bg-foreground-1\n  box-border\n  fixed\n  flex\n  items-center\n  justify-center\n  min-w-min\n  mx-auto\n  my-0\n  opacity-0\n  pointer-events-none\n  shadow-2\n  text-start\n  w-full\n  z-toast;\n\n  border-radius: var(--calcite-border-radius);\n  border-block-start: 0 solid transparent;\n  border-inline: $border-style;\n  border-block-end: $border-style;\n  inline-size: var(--calcite-alert-width);\n  max-inline-size: calc(100% - (var(--calcite-alert-edge-distance) * 2));\n  transition:\n    var(--calcite-internal-animation-timing-slow) $easing-function,\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n    all var(--calcite-animation-timing) ease-in-out;\n\n  &--bottom,\n  &--top {\n    inset-inline-end: 0;\n    inset-inline-start: 0;\n  }\n  &[class*=\"bottom\"] {\n    transform: translate3d(0, var(--calcite-alert-edge-distance), 0);\n    inset-block-end: var(--calcite-alert-edge-distance);\n  }\n  &[class*=\"top\"] {\n    transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);\n    inset-block-start: var(--calcite-alert-edge-distance);\n  }\n  &[class*=\"start\"] {\n    inset-inline-start: var(--calcite-alert-edge-distance);\n    inset-inline-end: auto;\n  }\n  &[class*=\"end\"] {\n    inset-inline-end: var(--calcite-alert-edge-distance);\n    inset-inline-start: auto;\n  }\n}\n\n.icon {\n  @apply flex flex-col items-center justify-center p-0;\n  margin-block: auto;\n  margin-inline-end: auto;\n  padding-inline-start: var(--calcite-alert-spacing-token-large);\n}\n\n.close {\n  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;\n  -webkit-appearance: none;\n  padding: var(--calcite-alert-spacing-token-large);\n\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:hover,\n  &:focus {\n    @apply bg-foreground-2 text-color-1;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n}\n\n.queue-count {\n  @apply bg-foreground-1\n  cursor-default\n  flex\n  font-medium\n  invisible\n  items-center\n  justify-around\n  min-w-min\n  opacity-0\n  overflow-hidden\n  self-stretch\n  text-center\n  text-color-2\n  transition-default;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n\n  &--active {\n    @apply visible opacity-100;\n  }\n}\n\n.dismiss-progress {\n  @apply absolute\n  block\n  w-full\n  overflow-hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n  &:after {\n    @apply absolute\n    top-0\n    block;\n    block-size: 2px;\n    content: \"\";\n    background-color: var(--calcite-alert-dismiss-progress-background);\n    inset-inline-end: 0;\n  }\n}\n\n.actions-end {\n  @apply flex self-stretch;\n}\n\n.text-container {\n  @apply box-border flex flex-auto min-w-0 flex-col break-words;\n  padding-block: var(--calcite-alert-spacing-token-small);\n  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);\n}\n\n.footer {\n  @apply flex justify-end pt-px relative self-stretch w-auto;\n  block-size: inherit;\n}\n\n// scale variables\n:host([scale=\"s\"]) {\n  --calcite-alert-width: 40em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.2\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.3\");\n  --calcite-alert-footer-height: theme(\"height.8\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing[0.5]\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n2-wrap;\n  }\n  .queue-count {\n    @apply mx-2;\n  }\n  .container {\n    --calcite-alert-min-height: 3.5rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-alert-width: 50em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.3\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.4\");\n  --calcite-alert-footer-height: theme(\"height.12\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing.1\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-n1-wrap;\n  }\n  .queue-count {\n    @apply mx-3;\n  }\n  .container {\n    --calcite-alert-min-height: 4.1875rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-alert-width: 60em;\n  --calcite-alert-spacing-token-small: theme(\"spacing.4\");\n  --calcite-alert-spacing-token-large: theme(\"spacing.5\");\n  --calcite-alert-footer-height: theme(\"height.16\");\n  --calcite-alert-footer-divider-gap: theme(\"spacing.2\");\n\n  @include slotted(\"title\", \"*\") {\n    @apply text-1-wrap mb-1;\n  }\n  @include slotted(\"message\", \"*\") {\n    @apply text-0-wrap;\n  }\n  @include slotted(\"link\", \"*\") {\n    @apply text-0-wrap;\n  }\n  .queue-count {\n    @apply mx-4;\n  }\n  .container {\n    --calcite-alert-min-height: 5.625rem;\n  }\n}\n\n:host([open]) {\n  .container:not(.container--queued) {\n    @apply border-t-2 opacity-100;\n    pointer-events: initial;\n    &[class*=\"bottom\"] {\n      transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);\n    }\n    &[class*=\"top\"] {\n      transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);\n    }\n  }\n}\n\n:host([auto-close]) > .queue-count {\n  border-inline-end: 0 solid transparent;\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-0-wrap\n    text-color-1\n    font-medium;\n}\n\n@include slotted(\"message\", \"*\") {\n  @apply text-n1-wrap\n    text-color-2\n    m-0\n    inline\n    font-normal;\n  margin-inline-end: theme(\"margin.2\");\n}\n\n@include slotted(\"link\", \"*\") {\n  @apply text-color-link inline-flex;\n}\n\n$alertKinds:\n  \"brand\" var(--calcite-color-brand),\n  \"info\" var(--calcite-color-status-info),\n  \"danger\" var(--calcite-color-status-danger),\n  \"success\" var(--calcite-color-status-success),\n  \"warning\" var(--calcite-color-status-warning);\n\n@each $alertKind in $alertKinds {\n  $name: nth($alertKind, 1);\n  $kind: nth($alertKind, 2);\n\n  :host([kind=\"#{$name}\"]) {\n    .container {\n      border-block-start-color: $kind;\n\n      & .icon {\n        color: $kind;\n      }\n    }\n  }\n}\n\n$alertDurations:\n  \"fast\" 6000ms,\n  \"medium\" 10000ms,\n  \"slow\" 14000ms;\n\n@each $alertDuration in $alertDurations {\n  $name: nth($alertDuration, 1);\n  $duration: nth($alertDuration, 2);\n\n  :host([auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation: dismissProgress $duration ease-out;\n  }\n  :host(:hover[auto-close-duration=\"#{$name}\"]) .dismiss-progress:after {\n    animation-play-state: paused;\n  }\n}\n\n@keyframes dismissProgress {\n  0% {\n    @apply w-0 opacity-75;\n  }\n  100% {\n    @apply w-full opacity-100;\n  }\n}\n\n/**\n * Conditional styles for when Alert is slotted in Shell\n */\n.container--slotted-in-shell {\n  @apply absolute;\n}\n\n@include base-component();\n@include calciteHydratedHidden();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getSlotted,\n  setRequestedIcon,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { MenuPlacement } from \"../../utils/floating-ui\";\nimport { getIconScale } from \"../../utils/component\";\n\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  NumberingSystem,\n  NumberStringFormat,\n} from \"../../utils/locale\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { KindIcons } from \"../resources\";\nimport { AlertMessages } from \"./assets/alert/t9n\";\nimport { AlertDuration, Sync, Unregister } from \"./interfaces\";\nimport { CSS, DURATIONS, SLOTS } from \"./resources\";\n\n/**\n * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\n * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n */\n\n/**\n * @slot title - A slot for adding a title to the component.\n * @slot message - A slot for adding main text to the component.\n * @slot link - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n */\n\n@Component({\n  tag: \"calcite-alert\",\n  styleUrl: \"alert.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Alert implements OpenCloseComponent, LoadableComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //---------------------------------------------------------------------------\n\n  /** When `true`, displays and positions the component. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n    if (this.open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\n    }\n    if (!this.open) {\n      this.queue = this.queue.filter((el) => el !== this.el);\n      this.calciteInternalAlertSync.emit({ queue: this.queue });\n    }\n  }\n\n  /** When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. */\n  @Prop({ reflect: true }) autoClose = false;\n\n  /** Specifies the duration before the component automatically closes - only use with `autoClose`. */\n  @Prop({ reflect: true }) autoCloseDuration: AlertDuration = \"medium\";\n\n  /** Specifies the kind of the component, which will apply to top border and icon. */\n  @Prop({ reflect: true }) kind: Extract<\n    \"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\",\n    Kind\n  > = \"brand\";\n\n  /**\n   * When `true`, shows a default recommended icon. Alternatively,\n   * pass a Calcite UI Icon name to display a specific icon.\n   */\n  @Prop({ reflect: true }) icon: string | boolean;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies an accessible name for the component. */\n  @Prop() label!: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem: NumberingSystem;\n\n  /** Specifies the placement of the component. */\n  @Prop({ reflect: true }) placement: MenuPlacement = \"bottom\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\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: AlertMessages;\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<AlertMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * This internal property, managed by a containing calcite-shell, is used\n   * to inform the component if special configuration or styles are needed\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) slottedInShell: boolean;\n\n  @Watch(\"autoCloseDuration\")\n  updateDuration(): void {\n    if (this.autoClose && this.autoCloseTimeoutId) {\n      window.clearTimeout(this.autoCloseTimeoutId);\n      this.autoCloseTimeoutId = window.setTimeout(\n        () => this.closeAlert(),\n        DURATIONS[this.autoCloseDuration],\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n\n    const open = this.open;\n    if (open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\n    }\n\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    window.dispatchEvent(\n      new CustomEvent<Unregister>(\"calciteInternalAlertUnregister\", {\n        detail: { alert: this.el },\n      }),\n    );\n    window.clearTimeout(this.autoCloseTimeoutId);\n    window.clearTimeout(this.queueTimeout);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.slottedInShell = false;\n  }\n\n  render(): VNode {\n    const { open, autoClose, label, placement, queued } = this;\n    const role = autoClose ? \"alert\" : \"alertdialog\";\n    const hidden = !open;\n    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);\n    const hasQueuedAlerts = this.queueLength > 1;\n\n    return (\n      <Host\n        aria-hidden={toAriaBoolean(hidden)}\n        aria-label={label}\n        calcite-hydrated-hidden={hidden}\n        role={role}\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerQueued]: queued,\n            [`${CSS.container}--${placement}`]: true,\n            [CSS.containerSlottedInShell]: this.slottedInShell,\n          }}\n          onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}\n          onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setTransitionEl}\n        >\n          {effectiveIcon && this.renderIcon(effectiveIcon)}\n          <div class={CSS.textContainer}>\n            <slot name={SLOTS.title} />\n            <slot name={SLOTS.message} />\n            <slot name={SLOTS.link} />\n          </div>\n          {this.renderActionsEnd()}\n          {hasQueuedAlerts ? this.renderQueueCount() : null}\n          {this.renderCloseButton()}\n          {open && !queued && autoClose ? <div class={CSS.dismissProgress} /> : null}\n        </div>\n      </Host>\n    );\n  }\n\n  private renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"close\"\n        onClick={this.closeAlert}\n        type=\"button\"\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButton = el)}\n      >\n        <calcite-icon icon=\"x\" scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  private renderQueueCount(): VNode {\n    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;\n    const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);\n\n    return (\n      <div\n        class={{\n          [CSS.queueCount]: true,\n          [CSS.queueCountActive]: this.queueLength > 1,\n        }}\n        key=\"queue-count\"\n      >\n        <calcite-chip scale={this.scale} value={queueText}>\n          {queueText}\n        </calcite-chip>\n      </div>\n    );\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderIcon(icon: string): VNode {\n    return (\n      <div class={CSS.icon}>\n        <calcite-icon flipRtl={this.iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />\n      </div>\n    );\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 }) calciteAlertBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertClose: 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 }) calciteAlertBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteAlertOpen: EventEmitter<void>;\n\n  /**\n   * Fires to sync queue when opened or closed.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAlertSync: EventEmitter<Sync>;\n\n  /**\n   * Fires when the component is added to DOM - used to receive initial queue.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAlertRegister: EventEmitter<void>;\n\n  // when an alert is opened or closed, update queue and determine active alert\n  @Listen(\"calciteInternalAlertSync\", { target: \"window\" })\n  alertSync(event: CustomEvent): void {\n    if (this.queue !== event.detail.queue) {\n      this.queue = event.detail.queue;\n    }\n    this.queueLength = this.queue.length;\n    this.determineActiveAlert();\n    event.stopPropagation();\n  }\n\n  // when an alert is first registered, trigger a queue sync\n  @Listen(\"calciteInternalAlertRegister\", { target: \"window\" })\n  alertRegister(): void {\n    if (this.open && !this.queue.includes(this.el as HTMLCalciteAlertElement)) {\n      this.queued = true;\n      this.queue.push(this.el as HTMLCalciteAlertElement);\n    }\n    this.calciteInternalAlertSync.emit({ queue: this.queue });\n    this.determineActiveAlert();\n  }\n\n  // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.\n  @Listen(\"calciteInternalAlertUnregister\", { target: \"window\" })\n  alertUnregister(event: CustomEvent<Unregister>): void {\n    const queue = this.queue.filter((el) => el !== event.detail.alert);\n    this.queue = queue;\n\n    window.dispatchEvent(\n      new CustomEvent<Sync>(\"calciteInternalAlertSync\", {\n        detail: { queue },\n      }),\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's \"close\" button, the first focusable item. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const alertLinkEl: HTMLCalciteLinkElement = getSlotted(this.el, { selector: \"calcite-link\" });\n\n    if (!this.closeButton && !alertLinkEl) {\n      return;\n    } else if (alertLinkEl) {\n      return alertLinkEl.setFocus();\n    } else if (this.closeButton) {\n      this.closeButton.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAlertElement;\n\n  @State() defaultMessages: AlertMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() numberStringFormatter = new NumberStringFormat();\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n  }\n\n  @State() hasEndActions = false;\n\n  /** the list of queued alerts */\n  @State() queue: HTMLCalciteAlertElement[] = [];\n\n  /** the count of queued alerts */\n  @State() queueLength = 0;\n\n  /** is the alert queued */\n  @State() queued = false;\n\n  private autoCloseTimeoutId: number = null;\n\n  private closeButton: HTMLButtonElement;\n\n  private initialOpenTime: number;\n\n  private lastMouseOverBegin: number;\n\n  private queueTimeout: number;\n\n  private totalOpenTime = 0;\n\n  private totalHoverTime = 0;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  /** determine which alert is active */\n  private determineActiveAlert(): void {\n    if (this.queue?.[0] === this.el) {\n      this.openAlert();\n      if (this.autoClose && !this.autoCloseTimeoutId) {\n        this.initialOpenTime = Date.now();\n        this.autoCloseTimeoutId = window.setTimeout(\n          () => this.closeAlert(),\n          DURATIONS[this.autoCloseDuration],\n        );\n      }\n    } else {\n      return;\n    }\n  }\n\n  /** close and emit calciteInternalAlertSync event with the updated queue payload */\n  private closeAlert = (): void => {\n    this.autoCloseTimeoutId = null;\n    this.queued = false;\n    this.open = false;\n    this.queue = this.queue.filter((el) => el !== this.el);\n    this.determineActiveAlert();\n    this.calciteInternalAlertSync.emit({ queue: this.queue });\n  };\n\n  onBeforeOpen(): void {\n    this.calciteAlertBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteAlertOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteAlertBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteAlertClose.emit();\n  }\n\n  /** remove queued class after animation completes */\n  private openAlert(): void {\n    window.clearTimeout(this.queueTimeout);\n    this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);\n  }\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleMouseOver = (): void => {\n    window.clearTimeout(this.autoCloseTimeoutId);\n    this.totalOpenTime = Date.now() - this.initialOpenTime;\n    this.lastMouseOverBegin = Date.now();\n  };\n\n  private handleMouseLeave = (): void => {\n    const hoverDuration = Date.now() - this.lastMouseOverBegin;\n    const timeRemaining =\n      DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;\n    this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;\n    this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);\n  };\n}\n"],"version":3}

package/dist/components/calcite-avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { A as Avatar, d as defineCustomElement$1 } from './avatar.js';
 

package/dist/components/calcite-block-section.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom.js';
@@ -39,7 +39,7 @@ const ICONS = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockSectionCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;background-color:transparent;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}.toggle--switch,.section-header{margin-inline:0px;margin-block:0.25rem;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.toggle--switch:hover,.section-header:hover{color:var(--calcite-color-text-1)}.section-header .status-icon{align-self:flex-end}.section-header__text{margin-inline:0.75rem;margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle--switch-container{position:relative;display:flex;inline-size:100%;align-items:center;background-color:transparent;word-break:break-word}.toggle--switch-container .focus-guard{--calcite-label-margin-bottom:0;pointer-events:none;position:absolute;inset-inline-end:0;margin-inline-start:0.25rem}.toggle--switch .status-icon{margin-inline-start:0.5rem}.toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([toggle-display=switch]) .toggle .toggle--switch__content{margin-inline-end:1.75rem}:host([hidden]){display:none}[hidden]{display:none}";
+const blockSectionCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;background-color:transparent;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}.toggle--switch,.section-header{margin-inline:0px;margin-block:0.25rem;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:0.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.toggle--switch:hover,.section-header:hover{color:var(--calcite-color-text-1)}.section-header .status-icon{align-self:flex-end}.section-header__text{margin-inline:0.75rem;margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle--switch-container{position:relative;display:flex;inline-size:100%;align-items:center;background-color:transparent;word-break:break-word}.toggle--switch-container .focus-guard{--calcite-label-margin-bottom:0;pointer-events:none;position:absolute;inset-inline-end:0;margin-inline-start:0.25rem}.toggle--switch .status-icon{margin-inline-start:0.5rem}.toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([toggle-display=switch]) .toggle .toggle--switch__content{margin-inline-end:1.75rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const BlockSection = /*@__PURE__*/ proxyCustomElement(class BlockSection extends HTMLElement {
     constructor() {

package/dist/components/calcite-block-section.js.map

@@ -1 +1 @@
-{"file":"calcite-block-section.js","mappings":"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","names":[],"sources":["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};\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 text-color-2\n    w-full\n    border-0\n    bg-transparent\n    font-sans\n    font-medium;\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 {\n  .status-icon {\n    margin-inline-start: theme(\"margin.2\");\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\";\n\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 { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\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-section.js","mappings":"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","names":[],"sources":["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};\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 text-color-2\n    w-full\n    border-0\n    bg-transparent\n    font-sans\n    font-medium;\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 {\n  .status-icon {\n    margin-inline-start: theme(\"margin.2\");\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\";\n\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 { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\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}

package/dist/components/calcite-block.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.0
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -55,7 +55,7 @@ const ICONS = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start;padding:0px}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px;padding:0.75rem}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex;margin-inline-start:0.75rem;margin-inline-end:0px}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.toggle-icon{margin-block:0.75rem;align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:0.75rem;margin-inline-start:auto}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, 0.5rem);padding-inline:var(--calcite-block-padding, 0.625rem)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start;padding:0px}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px;padding:0.75rem}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex;margin-inline-start:0.75rem;margin-inline-end:0px}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.toggle-icon{margin-block:0.75rem;align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:0.75rem;margin-inline-start:auto}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, 0.5rem);padding-inline:var(--calcite-block-padding, 0.625rem)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     constructor() {