@esri/calcite-components 2.0.0-rc.2 → 2.0.0

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

@@ -1 +1 @@
-{"file":"calcite-alert.entry.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","onToggleOpenCloseComponent","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectLocalized","disconnectMessages","numberStringFormatter","setRequestedIcon","KindIcons","h","Host","toAriaBoolean","getIconScale","componentFocusable","getSlotted","updateMessages"],"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  @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  container: responsive-container / inline-size;\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: 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-color-background-transparent-dismiss);\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: \"brand\" var(--calcite-color-brand), \"info\" var(--calcite-color-info), \"danger\" var(--calcite-color-danger),\n  \"success\" var(--calcite-color-success), \"warning\" var(--calcite-color-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: \"fast\" 6000ms, \"medium\" 10000ms, \"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  numberStringFormatter,\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 (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    const open = this.open;\n    if (open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\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    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n\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 = 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  }\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.entry.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","onToggleOpenCloseComponent","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectLocalized","disconnectMessages","numberStringFormatter","setRequestedIcon","KindIcons","h","Host","toAriaBoolean","getIconScale","componentFocusable","getSlotted","updateMessages"],"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: 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: \"brand\" var(--calcite-color-brand), \"info\" var(--calcite-color-status-info),\n  \"danger\" var(--calcite-color-status-danger), \"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: \"fast\" 6000ms, \"medium\" 10000ms, \"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  numberStringFormatter,\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 (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    const open = this.open;\n    if (open && !this.queued) {\n      this.calciteInternalAlertRegister.emit();\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    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"always\",\n    };\n\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 = 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  }\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/cjs/calcite-avatar.cjs.entry.js

@@ -1,17 +1,17 @@
 /*!
  * 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.0.0-rc.2
+ * v2.0.0
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-62de55fa.js');
-const dom = require('./dom-21733acd.js');
-const utils = require('./utils-8e26c60c.js');
-require('./guid-9f426477.js');
-require('./resources-ed249686.js');
+const index = require('./index-f33049a8.js');
+const dom = require('./dom-d8181eec.js');
+const utils = require('./utils-a9614334.js');
+require('./guid-057e2556.js');
+require('./resources-111c6474.js');
 
 /**
  * Convert a string to a valid hex by hashing its contents

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

@@ -1,26 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0-rc.2
+ * v2.0.0
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-62de55fa.js');
-const conditionalSlot = require('./conditionalSlot-342efc43.js');
-const dom = require('./dom-21733acd.js');
-const interactive = require('./interactive-4ef581af.js');
-const locale = require('./locale-bb4665cc.js');
-const t9n = require('./t9n-756b52f4.js');
-const Heading = require('./Heading-ef81c35f.js');
-const loadable = require('./loadable-792b946a.js');
-const openCloseComponent = require('./openCloseComponent-f16c3561.js');
-const key = require('./key-05671d86.js');
-require('./observers-3671e2e6.js');
-require('./guid-9f426477.js');
-require('./resources-ed249686.js');
-require('./browser-0412bf42.js');
+const index = require('./index-f33049a8.js');
+const conditionalSlot = require('./conditionalSlot-fb57f725.js');
+const dom = require('./dom-d8181eec.js');
+const interactive = require('./interactive-5f9dba20.js');
+const locale = require('./locale-b530508e.js');
+const t9n = require('./t9n-21630082.js');
+const Heading = require('./Heading-0d3210c2.js');
+const loadable = require('./loadable-639355a5.js');
+const openCloseComponent = require('./openCloseComponent-9736f795.js');
+const key = require('./key-d42fefa7.js');
+require('./observers-4d1781ae.js');
+require('./guid-057e2556.js');
+require('./resources-111c6474.js');
+require('./browser-009b6ba6.js');
 
 const IDS$1 = {
   content: "content",
@@ -57,7 +57,7 @@ const ICONS$1 = {
   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}.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-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-success)}.status-icon.invalid{color:var(--calcite-color-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}.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-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 = class {
   constructor(hostRef) {
@@ -231,7 +231,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-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-success)}.status-icon.invalid{color:var(--calcite-color-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-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 = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":"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","names":["IDS","CSS","ICONS","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectInteractive","connectLocalized","connectMessages","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","isActivationKey","getElementDir"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  heading: \"heading\",\n  icon: \"icon\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  icon: \"icon\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start p-0;\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu\";\n  grid-column: header-start / menu-end;\n  grid-row: 1 / 2;\n}\n\n.toggle {\n  @apply font-inherit\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n  text-align: initial;\n\n  background-color: transparent;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n  padding: theme(\"spacing.3\");\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  display: flex;\n  margin-inline-start: theme(\"spacing.3\");\n  margin-inline-end: 0px;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  my-3\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n  margin-inline-end: theme(\"spacing.3\");\n  margin-inline-start: auto;\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, theme(\"spacing.2\"));\n  padding-inline: var(--calcite-block-padding, theme(\"spacing[2.5]\"));\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { focusFirstTabbable, getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status } from \"../interfaces\";\nimport { BlockMessages } from \"./assets/block/t9n\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot icon - A slot for adding a leading header icon with `calcite-icon`.\n * @slot control - A slot for adding a single HTML input element in a header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockMessages;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Emits when the component's header is clicked.\n   *\n   * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  renderIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : !!status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, messages } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header class={CSS.header} id={IDS.header}>\n        {this.renderIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <calcite-icon aria-hidden=\"true\" class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n          </button>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu label={messages.options}>\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n      </div>\n    );\n\n    return (\n      <Host>\n        <article\n          aria-busy={toAriaBoolean(loading)}\n          class={{\n            [CSS.container]: true,\n          }}\n        >\n          {headerNode}\n          <section\n            aria-labelledby={IDS.toggle}\n            class={CSS.content}\n            hidden={!open}\n            id={IDS.content}\n            // 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            {this.renderScrim()}\n          </section>\n        </article>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  content: \"content\",\n  focusGuard: \"focus-guard\",\n  invalid: \"invalid\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleSwitchContainer: \"toggle--switch-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-down\",\n  menuClosedLeft: \"chevron-left\",\n  menuClosedRight: \"chevron-right\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    box-border\n    block;\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply 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 the component's toggle display -\n   *\n   * `\"button\"` (selectable header), or\n   *\n   * `\"switch\"` (toggle 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   * Emits when the header has been clicked.\n   */\n  @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggleSection();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  toggleSection = (): void => {\n    this.open = !this.open;\n    this.calciteBlockSectionToggle.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderStatusIcon(): VNode[] {\n    const { status } = this;\n    const statusIcon = ICONS[status] ?? false;\n    const statusIconClasses = {\n      [CSS.statusIcon]: true,\n      [CSS.valid]: status == \"valid\",\n      [CSS.invalid]: status == \"invalid\",\n    };\n\n    return !!statusIcon ? (\n      <calcite-icon class={statusIconClasses} icon={statusIcon} scale=\"s\" />\n    ) : null;\n  }\n\n  render(): VNode {\n    const { el, messages, open, text, toggleDisplay } = this;\n    const dir = getElementDir(el);\n    const arrowIcon = open\n      ? ICONS.menuOpen\n      : dir === \"rtl\"\n      ? ICONS.menuClosedLeft\n      : ICONS.menuClosedRight;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerNode =\n      toggleDisplay === \"switch\" ? (\n        <div\n          class={{\n            [CSS.toggleSwitchContainer]: true,\n          }}\n        >\n          <div\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS.toggleSwitch]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n            onKeyDown={this.handleHeaderKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            title={toggleLabel}\n          >\n            <div class={CSS.toggleSwitchContent}>\n              <span class={CSS.toggleSwitchText}>{text}</span>\n            </div>\n            {this.renderStatusIcon()}\n          </div>\n          {/* we use calcite-label to use a simple component that will allow us to prevent keyboard focus by setting tabindex=\"-1\" on the host */}\n          <calcite-label class={CSS.focusGuard} layout=\"inline\" tabIndex={-1}>\n            <calcite-switch checked={open} label={toggleLabel} scale=\"s\" />\n          </calcite-label>\n        </div>\n      ) : (\n        <button\n          aria-controls={IDS.content}\n          aria-expanded={toAriaBoolean(open)}\n          class={{\n            [CSS.sectionHeader]: true,\n            [CSS.toggle]: true,\n          }}\n          id={IDS.toggle}\n          onClick={this.toggleSection}\n        >\n          <calcite-icon icon={arrowIcon} scale=\"s\" />\n          <span class={CSS.sectionHeaderText}>{text}</span>\n          {this.renderStatusIcon()}\n        </button>\n      );\n\n    return (\n      <Host>\n        {headerNode}\n        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>\n          <slot />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAMA,KAAG,GAAG;EACjB,OAAO,EAAE,SAAS;EAClB,MAAM,EAAE,QAAQ;EAChB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEK,MAAMC,KAAG,GAAG;EACjB,MAAM,EAAE,QAAQ;EAChB,SAAS,EAAE,WAAW;EACtB,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,mBAAmB;EACrC,WAAW,EAAE,aAAa;EAC1B,MAAM,EAAE,QAAQ;EAChB,eAAe,EAAE,kBAAkB;EACnC,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,MAAM;EACZ,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,aAAa;EACzB,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,QAAQ;EAChB,UAAU,EAAE,aAAa;EACzB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,KAAK,GAAG;EACnB,IAAI,EAAE,MAAM;EACZ,OAAO,EAAE,SAAS;EAClB,iBAAiB,EAAE,qBAAqB;CACzC,CAAC;AAEK,MAAMC,OAAK,GAAG;EACnB,MAAM,EAAE,YAAY;EACpB,MAAM,EAAE,cAAc;EACtB,KAAK,EAAE,cAAc;EACrB,OAAO,EAAE,2BAA2B;CACrC;;ACpCD,MAAM,QAAQ,GAAG,yqIAAyqI;;MCyD7qI,KAAK;;;;;;;;IAqIhB,uBAAkB,GAAG,SAAS,CAAC;;;;;;IAwE/B,kBAAa,GAAG;MACd,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;MACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC,CAAC;IAEM,oBAAe,GAAG,CAAC,EAAe;MACxC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;KACxB,CAAC;uBAlMqC,KAAK;oBAKR,KAAK;sBAKH,KAAK;;;mBAeR,KAAK;gBAKO,KAAK;;;;;;;;EAGpD,WAAW;IACTC,6CAA0B,CAAC,IAAI,CAAC,CAAC;GAClC;EA2BD,gBAAgB;;GAEf;;;;;;;;;;EAaD,MAAM,QAAQ;IACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;IAC/BC,sBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC7B;EAED,YAAY;IACV,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;GACpC;EAED,MAAM;IACJ,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;GAC9B;EAED,aAAa;IACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;GACrC;EAED,OAAO;IACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;GAC/B;EAaD,qBAAqB;IACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC5C;;;;;;EAcD,iBAAiB;IACfC,+CAA+B,CAAC,IAAI,CAAC,CAAC;IACtCC,8BAAkB,CAAC,IAAI,CAAC,CAAC;IACzBC,uBAAgB,CAAC,IAAI,CAAC,CAAC;IACvBC,mBAAe,CAAC,IAAI,CAAC,CAAC;GACvB;EAED,oBAAoB;IAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;IAC5BC,0BAAmB,CAAC,IAAI,CAAC,CAAC;IAC1BC,sBAAkB,CAAC,IAAI,CAAC,CAAC;IACzBC,kDAAkC,CAAC,IAAI,CAAC,CAAC;GAC1C;EAED,MAAM,iBAAiB;IACrB,MAAMC,iBAAa,CAAC,IAAI,CAAC,CAAC;IAC1BC,+BAAsB,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,IAAI,CAAC,IAAI,EAAE;MACbb,6CAA0B,CAAC,IAAI,CAAC,CAAC;KAClC;GACF;EAED,gBAAgB;IACdc,2BAAkB,CAAC,IAAI,CAAC,CAAC;GAC1B;EAED,kBAAkB;IAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;GAC7B;;;;;;EAgDD,WAAW;IACT,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,WAAW,GAAGC,qBAAQ,CAAC;IAE7B,OAAO,CAAC,OAAO,GAAGA,2BAAe,OAAO,EAAE,OAAO,GAAI,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC;GAC5E;EAED,UAAU;IACR,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAE3C,MAAM,cAAc,GAAG,CAAC,CAACC,cAAU,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,OAAO,IACZD,iBAAK,KAAK,EAAElB,KAAG,CAAC,IAAI,EAAE,GAAG,EAAC,QAAQ,IAChCkB,4BAAgB,MAAM,QAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAI,CAC9C,IACJ,CAAC,CAAC,MAAM,IACVA,iBAAK,KAAK,EAAElB,KAAG,CAAC,IAAI,EAAE,GAAG,EAAC,aAAa,IACrCkB,0BACE,KAAK,EAAE;QACL,CAAClB,KAAG,CAAC,UAAU,GAAG,IAAI;QACtB,CAACA,KAAG,CAAC,KAAK,GAAG,MAAM,IAAI,OAAO;QAC9B,CAACA,KAAG,CAAC,OAAO,GAAG,MAAM,IAAI,SAAS;OACnC,EACD,IAAI,EAAEC,OAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAC,GAAG,GACT,CACE,IACJ,cAAc,IAChBiB,iBAAK,KAAK,EAAElB,KAAG,CAAC,IAAI,EAAE,GAAG,EAAC,WAAW,IACnCkB,kBAAM,GAAG,EAAC,WAAW,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC,IACJ,IAAI,CAAC;GACV;EAED,WAAW;IACT,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACpD,OAAO,OAAO,IAAI,WAAW,IAC3BA,iBAAK,KAAK,EAAElB,KAAG,CAAC,KAAK,IACnBkB,QAACE,eAAO,IAAC,KAAK,EAAEpB,KAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,IAC7C,OAAO,CACA,EACT,WAAW,GAAGkB,iBAAK,KAAK,EAAElB,KAAG,CAAC,WAAW,IAAG,WAAW,CAAO,GAAG,IAAI,CAClE,IACJ,IAAI,CAAC;GACV;EAED,MAAM;IACJ,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;IAE/D,MAAM,aAAa,IACjBkB,oBAAQ,KAAK,EAAElB,KAAG,CAAC,MAAM,EAAE,EAAE,EAAED,KAAG,CAAC,MAAM,IACtC,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,CACZ,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAACoB,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,CAAC,CAACA,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,IAAI,GAAGlB,OAAK,CAAC,MAAM,GAAGA,OAAK,CAAC,MAAM,CAAC;IAExD,MAAM,UAAU,IACdiB,iBAAK,KAAK,EAAElB,KAAG,CAAC,eAAe,IAC5B,IAAI,CAAC,UAAU,GAAGkB,+BAAkB,GAAG,IAAI,EAC3C,WAAW,IACVA,qCACiBnB,KAAG,CAAC,OAAO,sBACRA,KAAG,CAAC,MAAM,mBACb,WAAW,GAAGsB,iBAAa,CAAC,IAAI,CAAC,GAAG,IAAI,EACvD,KAAK,EAAErB,KAAG,CAAC,MAAM,EACjB,EAAE,EAAED,KAAG,CAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,WAAW,IAEjB,aAAa,EACdmB,yCAA0B,MAAM,EAAC,KAAK,EAAElB,KAAG,CAAC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAC,GAAG,GAAG,CACjF,KAET,aAAa,CACd,EACA,UAAU,IACTkB,iBAAK,KAAK,EAAElB,KAAG,CAAC,gBAAgB,IAC9BkB,kBAAM,IAAI,EAAE,KAAK,CAAC,OAAO,GAAI,CACzB,IACJ,IAAI,EACP,cAAc,IACbA,iCAAqB,KAAK,EAAE,QAAQ,CAAC,OAAO,IAC1CA,kBAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,GAAI,CACnB,IACpB,IAAI,CACJ,CACP,CAAC;IAEF,QACEA,QAACI,UAAI,QACHJ,kCACaG,iBAAa,CAAC,OAAO,CAAC,EACjC,KAAK,EAAE;QACL,CAACrB,KAAG,CAAC,SAAS,GAAG,IAAI;OACtB,IAEA,UAAU,EACXkB,wCACmBnB,KAAG,CAAC,MAAM,EAC3B,KAAK,EAAEC,KAAG,CAAC,OAAO,EAClB,MAAM,EAAE,CAAC,IAAI,EACb,EAAE,EAAED,KAAG,CAAC,OAAO;;MAEf,GAAG,EAAE,IAAI,CAAC,eAAe,IAExB,IAAI,CAAC,WAAW,EAAE,CACX,CACF,CACL,EACP;GACH;;;;;;;;;;;AC1YI,MAAM,GAAG,GAAG;EACjB,OAAO,EAAE,SAAS;EAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEK,MAAM,GAAG,GAAG;EACjB,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,aAAa;EACzB,OAAO,EAAE,SAAS;EAClB,aAAa,EAAE,gBAAgB;EAC/B,iBAAiB,EAAE,sBAAsB;EACzC,UAAU,EAAE,aAAa;EACzB,MAAM,EAAE,QAAQ;EAChB,YAAY,EAAE,gBAAgB;EAC9B,qBAAqB,EAAE,0BAA0B;EACjD,mBAAmB,EAAE,yBAAyB;EAC9C,gBAAgB,EAAE,sBAAsB;EACxC,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,KAAK,GAAG;EACnB,QAAQ,EAAE,cAAc;EACxB,cAAc,EAAE,cAAc;EAC9B,eAAe,EAAE,eAAe;EAChC,KAAK,EAAE,cAAc;EACrB,OAAO,EAAE,2BAA2B;CACrC;;AC1BD,MAAM,eAAe,GAAG,0gEAA0gE;;MC4CrhE,YAAY;;;;;;;;;IAoGvB,wBAAmB,GAAG,CAAC,KAAoB;MACzC,IAAIwB,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;KACF,CAAC;IAEF,kBAAa,GAAG;MACd,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;MACvB,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;KACvC,CAAC;gBArG6C,KAAK;;;yBAmBgB,QAAQ;;;;;;EAiB5E,gBAAgB;;GAEf;;;;;;;;;;EAaD,MAAM,QAAQ;IACZ,MAAMpB,2BAAkB,CAAC,IAAI,CAAC,CAAC;IAC/BC,sBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GAC7B;EAaD,qBAAqB;IACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAC5C;;;;;;EAwCD,iBAAiB;IACfG,uBAAgB,CAAC,IAAI,CAAC,CAAC;IACvBC,mBAAe,CAAC,IAAI,CAAC,CAAC;GACvB;EAED,MAAM,iBAAiB;IACrB,MAAMK,iBAAa,CAAC,IAAI,CAAC,CAAC;IAC1BC,+BAAsB,CAAC,IAAI,CAAC,CAAC;GAC9B;EAED,gBAAgB;IACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;GAC1B;EAED,oBAAoB;IAClBL,0BAAmB,CAAC,IAAI,CAAC,CAAC;IAC1BC,sBAAkB,CAAC,IAAI,CAAC,CAAC;GAC1B;;;;;;EAOD,gBAAgB;IACd,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;IAC1C,MAAM,iBAAiB,GAAG;MACxB,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;MACtB,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,IAAI,OAAO;MAC9B,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,IAAI,SAAS;KACnC,CAAC;IAEF,OAAO,CAAC,CAAC,UAAU,IACjBM,0BAAc,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,GAAG,GAAG,IACpE,IAAI,CAAC;GACV;EAED,MAAM;IACJ,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IACzD,MAAM,GAAG,GAAGM,iBAAa,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAI;QAClB,KAAK,CAAC,QAAQ;QACd,GAAG,KAAK,KAAK;UACb,KAAK,CAAC,cAAc;UACpB,KAAK,CAAC,eAAe,CAAC;IAE1B,MAAM,WAAW,GAAG,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;IAE/D,MAAM,UAAU,GACd,aAAa,KAAK,QAAQ,IACxBN,iBACE,KAAK,EAAE;QACL,CAAC,GAAG,CAAC,qBAAqB,GAAG,IAAI;OAClC,IAEDA,kCACiB,GAAG,CAAC,OAAO,mBACXG,iBAAa,CAAC,IAAI,CAAC,EAClC,KAAK,EAAE;QACL,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI;QAClB,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI;OACzB,EACD,EAAE,EAAE,GAAG,CAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,WAAW,IAElBH,iBAAK,KAAK,EAAE,GAAG,CAAC,mBAAmB,IACjCA,kBAAM,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAAG,IAAI,CAAQ,CAC5C,EACL,IAAI,CAAC,gBAAgB,EAAE,CACpB,EAENA,2BAAe,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChEA,4BAAgB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,GAAG,CACjD,CACZ,KAENA,qCACiB,GAAG,CAAC,OAAO,mBACXG,iBAAa,CAAC,IAAI,CAAC,EAClC,KAAK,EAAE;QACL,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI;QACzB,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI;OACnB,EACD,EAAE,EAAE,GAAG,CAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3BH,0BAAc,IAAI,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,GAAG,EAC3CA,kBAAM,KAAK,EAAE,GAAG,CAAC,iBAAiB,IAAG,IAAI,CAAQ,EAChD,IAAI,CAAC,gBAAgB,EAAE,CACjB,CACV,CAAC;IAEJ,QACEA,QAACI,UAAI,QACF,UAAU,EACXJ,wCAA0B,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,OAAO,IACtFA,qBAAQ,CACA,CACL,EACP;GACH;;;;;;;;;;;;;","names":["IDS","CSS","ICONS","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectInteractive","connectLocalized","connectMessages","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","isActivationKey","getElementDir"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  heading: \"heading\",\n  icon: \"icon\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  icon: \"icon\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start p-0;\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu\";\n  grid-column: header-start / menu-end;\n  grid-row: 1 / 2;\n}\n\n.toggle {\n  @apply font-inherit\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n  text-align: initial;\n\n  background-color: transparent;\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n  padding: theme(\"spacing.3\");\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  display: flex;\n  margin-inline-start: theme(\"spacing.3\");\n  margin-inline-end: 0px;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  my-3\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n  margin-inline-end: theme(\"spacing.3\");\n  margin-inline-start: auto;\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, theme(\"spacing.2\"));\n  padding-inline: var(--calcite-block-padding, theme(\"spacing[2.5]\"));\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { focusFirstTabbable, getSlotted, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status } from \"../interfaces\";\nimport { BlockMessages } from \"./assets/block/t9n\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot icon - A slot for adding a leading header icon with `calcite-icon`.\n * @slot control - A slot for adding a single HTML input element in a header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockMessages;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Emits when the component's header is clicked.\n   *\n   * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  renderIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : !!status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, messages } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header class={CSS.header} id={IDS.header}>\n        {this.renderIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <calcite-icon aria-hidden=\"true\" class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n          </button>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu label={messages.options}>\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n      </div>\n    );\n\n    return (\n      <Host>\n        <article\n          aria-busy={toAriaBoolean(loading)}\n          class={{\n            [CSS.container]: true,\n          }}\n        >\n          {headerNode}\n          <section\n            aria-labelledby={IDS.toggle}\n            class={CSS.content}\n            hidden={!open}\n            id={IDS.content}\n            // 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            {this.renderScrim()}\n          </section>\n        </article>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  content: \"content\",\n  focusGuard: \"focus-guard\",\n  invalid: \"invalid\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleSwitchContainer: \"toggle--switch-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-down\",\n  menuClosedLeft: \"chevron-left\",\n  menuClosedRight: \"chevron-right\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    box-border\n    block;\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply 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 the component's toggle display -\n   *\n   * `\"button\"` (selectable header), or\n   *\n   * `\"switch\"` (toggle 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   * Emits 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}