@esri/calcite-components 2.9.1-next.2 → 2.9.1-next.3

package/dist/esm/calcite-action-bar.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-action-bar.entry.js","mappings":"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","names":[],"sources":["src/components/action-bar/resources.ts","src/components/action-bar/action-bar.scss?tag=calcite-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":["export const CSS = {\n  actionGroupEnd: \"action-group--end\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  bottomActions: \"bottom-actions\",\n  expandTooltip: \"expand-tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-bar-expanded-max-width: When `layout` is `\"vertical\"`, specifies the expanded max width of the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply pointer-events-auto\n    inline-flex\n    self-stretch;\n  --calcite-action-bar-expanded-max-width: auto;\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n  .action-group--end {\n    margin-block-start: auto;\n  }\n}\n\n:host([layout=\"horizontal\"]) {\n  @apply flex-row;\n  .action-group--end {\n    @apply ms-auto;\n  }\n}\n\n:host([layout=\"vertical\"][overflow-actions-disabled]) {\n  overflow-y: auto;\n}\n\n:host([layout=\"horizontal\"][overflow-actions-disabled]) {\n  overflow-x: auto;\n}\n\n:host([layout=\"vertical\"][expanded]) {\n  max-inline-size: var(--calcite-action-bar-expanded-max-width);\n}\n\n::slotted(calcite-action-group) {\n  border-block-end: 1px solid var(--calcite-color-border-3);\n}\n\n:host([layout=\"horizontal\"]) ::slotted(calcite-action-group) {\n  border-block-end: 0;\n  border-inline-end: 1px solid var(--calcite-color-border-3);\n}\n\n:host([layout=\"horizontal\"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) {\n  border-inline-end: 0;\n}\n\n::slotted(calcite-action-group:last-child) {\n  border-block-end: 0;\n  border-inline-end: 0;\n}\n\n.action-group--end {\n  @apply justify-end;\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 { debounce } from \"lodash-es\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  slotChangeGetAssignedElements,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ExpandToggle, toggleChildActionText } from \"../functional/ExpandToggle\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { ActionBarMessages } from \"./assets/action-bar/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\nimport {\n  geActionDimensions,\n  getOverflowCount,\n  overflowActions,\n  overflowActionsDebounceInMs,\n  queryActions,\n} from \"./utils\";\n\n/**\n * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.\n * @slot bottom-actions - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.\n */\n@Component({\n  tag: \"calcite-action-bar\",\n  styleUrl: \"action-bar.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ActionBar\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Specifies the accessible label for the last `calcite-action-group`.\n   */\n  @Prop() actionsEndGroupLabel: string;\n\n  /**\n   * When `true`, the expand-toggling behavior is disabled.\n   */\n  @Prop({ reflect: true }) expandDisabled = false;\n\n  @Watch(\"expandDisabled\")\n  expandHandler(): void {\n    this.overflowActions();\n  }\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  }\n\n  /**\n   *  Specifies the layout direction of the actions.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout> = \"vertical\";\n\n  @Watch(\"layout\")\n  layoutHandler(): void {\n    this.updateGroups();\n  }\n\n  /**\n   * Disables automatically overflowing `calcite-action`s that won't fit into menus.\n   */\n  @Prop({ reflect: true }) overflowActionsDisabled = false;\n\n  @Watch(\"overflowActionsDisabled\")\n  overflowDisabledHandler(overflowActionsDisabled: boolean): void {\n    if (overflowActionsDisabled) {\n      this.resizeObserver?.disconnect();\n      return;\n    }\n\n    this.resizeObserver?.observe(this.el);\n    this.overflowActions();\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Arranges the component depending on the element's `dir` property.\n   */\n  @Prop({ reflect: true }) position: Position;\n\n  /**\n   * Specifies the size of the expand `calcite-action`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionBarMessages;\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<ActionBarMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the `expanded` property is toggled.\n   */\n  @Event({ cancelable: false }) calciteActionBarToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionBarElement;\n\n  mutationObserver = createObserver(\"mutation\", () => {\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  });\n\n  resizeObserver = createObserver(\"resize\", (entries) => this.resizeHandlerEntries(entries));\n\n  expandToggleEl: HTMLCalciteActionElement;\n\n  @State() effectiveLocale: string;\n\n  @State() hasActionsEnd = false;\n\n  @State() hasBottomActions = false;\n\n  @State() expandTooltip: HTMLCalciteTooltipElement;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionBarMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  componentDidLoad(): void {\n    const { el, expanded } = this;\n\n    setComponentLoaded(this);\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  }\n\n  connectedCallback(): void {\n    const { el, expanded } = this;\n\n    connectLocalized(this);\n    connectMessages(this);\n    toggleChildActionText({ el, expanded });\n\n    this.mutationObserver?.observe(el, { childList: true, subtree: true });\n\n    if (!this.overflowActionsDisabled) {\n      this.resizeObserver?.observe(el);\n    }\n\n    this.overflowActions();\n    connectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Overflows actions that won't fit into menus.\n   *\n   * @internal\n   */\n  @Method()\n  async overflowActions(): Promise<void> {\n    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  actionMenuOpenHandler = (event: CustomEvent<void>): void => {\n    if ((event.target as HTMLCalciteActionGroupElement).menuOpen) {\n      const composedPath = event.composedPath();\n      Array.from(this.el.querySelectorAll(\"calcite-action-group\")).forEach((group) => {\n        if (!composedPath.includes(group)) {\n          group.menuOpen = false;\n        }\n      });\n    }\n  };\n\n  resizeHandlerEntries = (entries: ResizeObserverEntry[]): void => {\n    entries.forEach(this.resizeHandler);\n  };\n\n  resizeHandler = (entry: ResizeObserverEntry): void => {\n    const { width, height } = entry.contentRect;\n    this.resize({ width, height });\n  };\n\n  private resize = debounce(({ width, height }: { width: number; height: number }): void => {\n    const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;\n\n    if (\n      overflowActionsDisabled ||\n      (layout === \"vertical\" && !height) ||\n      (layout === \"horizontal\" && !width)\n    ) {\n      return;\n    }\n\n    const actions = queryActions(el);\n    const actionCount = expandDisabled ? actions.length : actions.length + 1;\n    const actionGroups = Array.from(el.querySelectorAll(\"calcite-action-group\"));\n\n    this.setGroupLayout(actionGroups);\n\n    const groupCount =\n      this.hasActionsEnd || this.hasBottomActions || !expandDisabled\n        ? actionGroups.length + 1\n        : actionGroups.length;\n\n    const { actionHeight, actionWidth } = geActionDimensions(actions);\n\n    const overflowCount = getOverflowCount({\n      layout,\n      actionCount,\n      actionHeight,\n      actionWidth,\n      height,\n      width,\n      groupCount,\n    });\n\n    overflowActions({\n      actionGroups,\n      expanded,\n      overflowCount,\n    });\n  }, overflowActionsDebounceInMs);\n\n  toggleExpand = (): void => {\n    this.expanded = !this.expanded;\n    this.calciteActionBarToggle.emit();\n  };\n\n  setExpandToggleRef = (el: HTMLCalciteActionElement): void => {\n    this.expandToggleEl = el;\n  };\n\n  updateGroups(): void {\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\")));\n  }\n\n  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void {\n    groups.forEach((group) => (group.layout = this.layout));\n  }\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const groups = slotChangeGetAssignedElements(event).filter((el) =>\n      el.matches(\"calcite-action-group\"),\n    ) as HTMLCalciteActionGroupElement[];\n\n    this.setGroupLayout(groups);\n  };\n\n  handleActionsEndSlotChange = (event: Event): void => {\n    this.hasActionsEnd = slotChangeHasAssignedElement(event);\n  };\n\n  handleBottomActionsSlotChange = (event: Event): void => {\n    this.hasBottomActions = slotChangeHasAssignedElement(event);\n  };\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-tooltip\"),\n    ) as HTMLCalciteTooltipElement[];\n\n    this.expandTooltip = tooltips[0];\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBottomActionGroup(): VNode {\n    const {\n      expanded,\n      expandDisabled,\n      el,\n      position,\n      toggleExpand,\n      scale,\n      layout,\n      messages,\n      actionsEndGroupLabel,\n      overlayPositioning,\n    } = this;\n\n    const expandToggleNode = !expandDisabled ? (\n      <ExpandToggle\n        collapseText={messages.collapse}\n        el={el}\n        expandText={messages.expand}\n        expanded={expanded}\n        position={position}\n        ref={this.setExpandToggleRef}\n        scale={scale}\n        toggle={toggleExpand}\n        tooltip={this.expandTooltip}\n      />\n    ) : null;\n\n    return (\n      <calcite-action-group\n        class={CSS.actionGroupEnd}\n        hidden={this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)}\n        label={actionsEndGroupLabel}\n        layout={layout}\n        overlayPositioning={overlayPositioning}\n        scale={scale}\n      >\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.handleActionsEndSlotChange} />\n        <slot name={SLOTS.bottomActions} onSlotchange={this.handleBottomActionsSlotChange} />\n        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />\n        {expandToggleNode}\n      </calcite-action-group>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Host onCalciteActionMenuOpen={this.actionMenuOpenHandler}>\n        <slot onSlotchange={this.handleDefaultSlotChange} />\n        {this.renderBottomActionGroup()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-action-bar.entry.js","mappings":"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","names":[],"sources":["src/components/action-bar/resources.ts","src/components/action-bar/action-bar.scss?tag=calcite-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":["export const CSS = {\n  actionGroupEnd: \"action-group--end\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  bottomActions: \"bottom-actions\",\n  expandTooltip: \"expand-tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-bar-expanded-max-width: When `layout` is `\"vertical\"`, specifies the expanded max width of the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply pointer-events-auto\n    inline-flex\n    self-stretch;\n  --calcite-action-bar-expanded-max-width: auto;\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n  .action-group--end {\n    margin-block-start: auto;\n  }\n}\n\n:host([layout=\"horizontal\"]) {\n  @apply flex-row;\n  .action-group--end {\n    @apply ms-auto;\n  }\n}\n\n:host([layout=\"vertical\"][overflow-actions-disabled]) {\n  overflow-y: auto;\n}\n\n:host([layout=\"horizontal\"][overflow-actions-disabled]) {\n  overflow-x: auto;\n}\n\n:host([layout=\"vertical\"][expanded]) {\n  max-inline-size: var(--calcite-action-bar-expanded-max-width);\n}\n\n::slotted(calcite-action-group) {\n  border-block-end: 1px solid var(--calcite-color-border-3);\n}\n\n:host([layout=\"horizontal\"]) ::slotted(calcite-action-group) {\n  border-block-end: 0;\n  border-inline-end: 1px solid var(--calcite-color-border-3);\n}\n\n:host([layout=\"horizontal\"][expand-disabled]) ::slotted(calcite-action-group:last-of-type) {\n  border-inline-end: 0;\n}\n\n::slotted(calcite-action-group:last-child) {\n  border-block-end: 0;\n  border-inline-end: 0;\n}\n\n.action-group--end {\n  @apply justify-end;\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 { debounce } from \"lodash-es\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  slotChangeGetAssignedElements,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ExpandToggle, toggleChildActionText } from \"../functional/ExpandToggle\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { ActionBarMessages } from \"./assets/action-bar/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\nimport {\n  geActionDimensions,\n  getOverflowCount,\n  overflowActions,\n  overflowActionsDebounceInMs,\n  queryActions,\n} from \"./utils\";\n\n/**\n * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.\n * @slot bottom-actions - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.\n */\n@Component({\n  tag: \"calcite-action-bar\",\n  styleUrl: \"action-bar.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ActionBar\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Specifies the accessible label for the last `calcite-action-group`.\n   */\n  @Prop() actionsEndGroupLabel: string;\n\n  /**\n   * When `true`, the expand-toggling behavior is disabled.\n   */\n  @Prop({ reflect: true }) expandDisabled = false;\n\n  @Watch(\"expandDisabled\")\n  expandHandler(): void {\n    this.overflowActions();\n  }\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  }\n\n  /**\n   *  Specifies the layout direction of the actions.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout> = \"vertical\";\n\n  @Watch(\"layout\")\n  layoutHandler(): void {\n    this.updateGroups();\n  }\n\n  /**\n   * Disables automatically overflowing `calcite-action`s that won't fit into menus.\n   */\n  @Prop({ reflect: true }) overflowActionsDisabled = false;\n\n  @Watch(\"overflowActionsDisabled\")\n  overflowDisabledHandler(overflowActionsDisabled: boolean): void {\n    if (overflowActionsDisabled) {\n      this.resizeObserver?.disconnect();\n      return;\n    }\n\n    this.resizeObserver?.observe(this.el);\n    this.overflowActions();\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Arranges the component depending on the element's `dir` property.\n   */\n  @Prop({ reflect: true }) position: Extract<\"start\" | \"end\", Position>;\n\n  /**\n   * Specifies the size of the expand `calcite-action`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionBarMessages;\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<ActionBarMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the `expanded` property is toggled.\n   */\n  @Event({ cancelable: false }) calciteActionBarToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionBarElement;\n\n  mutationObserver = createObserver(\"mutation\", () => {\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  });\n\n  resizeObserver = createObserver(\"resize\", (entries) => this.resizeHandlerEntries(entries));\n\n  expandToggleEl: HTMLCalciteActionElement;\n\n  @State() effectiveLocale: string;\n\n  @State() hasActionsEnd = false;\n\n  @State() hasBottomActions = false;\n\n  @State() expandTooltip: HTMLCalciteTooltipElement;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionBarMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  componentDidLoad(): void {\n    const { el, expanded } = this;\n\n    setComponentLoaded(this);\n    toggleChildActionText({ el, expanded });\n    this.overflowActions();\n  }\n\n  connectedCallback(): void {\n    const { el, expanded } = this;\n\n    connectLocalized(this);\n    connectMessages(this);\n    toggleChildActionText({ el, expanded });\n\n    this.mutationObserver?.observe(el, { childList: true, subtree: true });\n\n    if (!this.overflowActionsDisabled) {\n      this.resizeObserver?.observe(el);\n    }\n\n    this.overflowActions();\n    connectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Overflows actions that won't fit into menus.\n   *\n   * @internal\n   */\n  @Method()\n  async overflowActions(): Promise<void> {\n    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  actionMenuOpenHandler = (event: CustomEvent<void>): void => {\n    if ((event.target as HTMLCalciteActionGroupElement).menuOpen) {\n      const composedPath = event.composedPath();\n      Array.from(this.el.querySelectorAll(\"calcite-action-group\")).forEach((group) => {\n        if (!composedPath.includes(group)) {\n          group.menuOpen = false;\n        }\n      });\n    }\n  };\n\n  resizeHandlerEntries = (entries: ResizeObserverEntry[]): void => {\n    entries.forEach(this.resizeHandler);\n  };\n\n  resizeHandler = (entry: ResizeObserverEntry): void => {\n    const { width, height } = entry.contentRect;\n    this.resize({ width, height });\n  };\n\n  private resize = debounce(({ width, height }: { width: number; height: number }): void => {\n    const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;\n\n    if (\n      overflowActionsDisabled ||\n      (layout === \"vertical\" && !height) ||\n      (layout === \"horizontal\" && !width)\n    ) {\n      return;\n    }\n\n    const actions = queryActions(el);\n    const actionCount = expandDisabled ? actions.length : actions.length + 1;\n    const actionGroups = Array.from(el.querySelectorAll(\"calcite-action-group\"));\n\n    this.setGroupLayout(actionGroups);\n\n    const groupCount =\n      this.hasActionsEnd || this.hasBottomActions || !expandDisabled\n        ? actionGroups.length + 1\n        : actionGroups.length;\n\n    const { actionHeight, actionWidth } = geActionDimensions(actions);\n\n    const overflowCount = getOverflowCount({\n      layout,\n      actionCount,\n      actionHeight,\n      actionWidth,\n      height,\n      width,\n      groupCount,\n    });\n\n    overflowActions({\n      actionGroups,\n      expanded,\n      overflowCount,\n    });\n  }, overflowActionsDebounceInMs);\n\n  toggleExpand = (): void => {\n    this.expanded = !this.expanded;\n    this.calciteActionBarToggle.emit();\n  };\n\n  setExpandToggleRef = (el: HTMLCalciteActionElement): void => {\n    this.expandToggleEl = el;\n  };\n\n  updateGroups(): void {\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\")));\n  }\n\n  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void {\n    groups.forEach((group) => (group.layout = this.layout));\n  }\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const groups = slotChangeGetAssignedElements(event).filter((el) =>\n      el.matches(\"calcite-action-group\"),\n    ) as HTMLCalciteActionGroupElement[];\n\n    this.setGroupLayout(groups);\n  };\n\n  handleActionsEndSlotChange = (event: Event): void => {\n    this.hasActionsEnd = slotChangeHasAssignedElement(event);\n  };\n\n  handleBottomActionsSlotChange = (event: Event): void => {\n    this.hasBottomActions = slotChangeHasAssignedElement(event);\n  };\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-tooltip\"),\n    ) as HTMLCalciteTooltipElement[];\n\n    this.expandTooltip = tooltips[0];\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBottomActionGroup(): VNode {\n    const {\n      expanded,\n      expandDisabled,\n      el,\n      position,\n      toggleExpand,\n      scale,\n      layout,\n      messages,\n      actionsEndGroupLabel,\n      overlayPositioning,\n    } = this;\n\n    const expandToggleNode = !expandDisabled ? (\n      <ExpandToggle\n        collapseText={messages.collapse}\n        el={el}\n        expandText={messages.expand}\n        expanded={expanded}\n        position={position}\n        ref={this.setExpandToggleRef}\n        scale={scale}\n        toggle={toggleExpand}\n        tooltip={this.expandTooltip}\n      />\n    ) : null;\n\n    return (\n      <calcite-action-group\n        class={CSS.actionGroupEnd}\n        hidden={this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)}\n        label={actionsEndGroupLabel}\n        layout={layout}\n        overlayPositioning={overlayPositioning}\n        scale={scale}\n      >\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.handleActionsEndSlotChange} />\n        <slot name={SLOTS.bottomActions} onSlotchange={this.handleBottomActionsSlotChange} />\n        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />\n        {expandToggleNode}\n      </calcite-action-group>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Host onCalciteActionMenuOpen={this.actionMenuOpenHandler}>\n        <slot onSlotchange={this.handleDefaultSlotChange} />\n        {this.renderBottomActionGroup()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/calcite-action-group.entry.js

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.1-next.2
+ * v2.9.1-next.3
  */
-import { r as registerInstance, h, g as getElement } from './index-335650d1.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-d9d2506b.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-925a6f87.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-87457b57.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-0ec2387a.js';
-import { S as SLOTS$1 } from './resources-945284ef.js';
-import { b as slotChangeHasAssignedElement } from './dom-8d1d244c.js';
-import { S as SLOTS, I as ICONS, C as CSS } from './resources-afae38ec.js';
-import './observers-9b3d9b69.js';
-import './component-d692be87.js';
-import './key-a3711155.js';
-import './guid-4d803ab1.js';
-import './resources-0451c085.js';
+import { r as registerInstance, h, g as getElement } from './index-f27cbf44.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e3e23048.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-2e98db6d.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-e1bda23b.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-4e080b04.js';
+import { S as SLOTS$1 } from './resources-d2c85d04.js';
+import { b as slotChangeHasAssignedElement } from './dom-e9869a02.js';
+import { S as SLOTS, I as ICONS, C as CSS } from './resources-6691cf83.js';
+import './observers-e206648a.js';
+import './component-67d4653d.js';
+import './key-b76ae8fe.js';
+import './guid-c3571ce3.js';
+import './resources-17413e0a.js';
 
 const actionGroupCss = ":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{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3;--calcite-action-group-gap:1px;--calcite-action-group-padding:1px}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:var(--calcite-color-background);gap:var(--calcite-action-group-gap);padding:var(--calcite-action-group-gap);grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteActionGroupStyle0 = actionGroupCss;
@@ -98,7 +98,7 @@ const ActionGroup = class {
         return (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip })));
     }
     render() {
-        return (h("div", { key: '689447fecc5bda66fb3b0017288c192033131615', "aria-label": this.label, class: CSS.container, role: "group" }, h("slot", { key: 'd168163c365d6ec486aa5fa975fad904ba3a525e' }), this.renderMenu()));
+        return (h("div", { key: '4f81ae1f221f88118b4a336e88fa7e7f2a7f0350', "aria-label": this.label, class: CSS.container, role: "group" }, h("slot", { key: 'b3f55beeca93dd48153ad95490ac876450b50800' }), this.renderMenu()));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

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

@@ -1 +1 @@
-{"file":"calcite-action-group.entry.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,srCAAsrC,CAAC;AAC9sC,iCAAe,cAAc;;MCwChB,WAAW;;;;;;;;QAqLtB,gBAAW,GAAG,CAAC,KAAyC;YACtD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAE,KAAK,CAAC,MAAuC,CAAC,IAAI,CAAC;SACvE,CAAC;QAEF,gCAA2B,GAAG,CAAC,KAAY;YACzC,IAAI,CAAC,cAAc,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC3D,CAAC;wBA/KkC,KAAK;;sBAiBC,UAAU;;wBAUD,KAAK;kCASU,UAAU;;;;+BAiCjD,EAAE;;8BASH,KAAK;;IA3E/B,eAAe;QACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAqDD,gBAAgB;;KAEf;IAYD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;;IAcD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;;;;;;IAOD,iBAAiB;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,+BAA+B,CAAC,IAAI,CAAC,CAAC;KACvC;IAED,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,kCAAkC,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,GACvF,IAAI,CAAC;QAEP,QACE,2BACE,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,MAAM,EAAE,CAAC,cAAc,EACvB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,uBAAuB,EAAE,IAAI,CAAC,WAAW,EACzC,IAAI,EAAE,QAAQ,EACd,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc,GAAG,eAAe,EACrE,KAAK,EAAE,KAAK,IAEZ,sBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAEA,OAAiB,CAAC,OAAO,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,GACrB,EACF,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAAI,EACjF,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,EAAEA,OAAiB,CAAC,OAAO,GAAI,CAC9C,EACtB;KACH;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,IAC7D,8DAAQ,EACP,IAAI,CAAC,UAAU,EAAE,CACd,EACN;KACH;;;;;;;;;;;;;;","names":["ACTION_MENU_SLOTS"],"sources":["src/components/action-group/action-group.scss?tag=calcite-action-group&encapsulation=shadow","src/components/action-group/action-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `\"grid\"`.\n * @prop --calcite-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `\"grid\"`.\n * @prop --calcite-action-group-padding: Sets the padding when the `layout` property is `\"grid\"`.\n */\n\n:host {\n  @extend %component-host;\n\n  @apply flex\n  flex-col\n  p-0;\n\n  --calcite-action-group-columns: 3;\n  --calcite-action-group-gap: theme(\"gap.px\");\n  --calcite-action-group-padding: theme(\"padding.px\");\n}\n\n.container {\n  @apply flex flex-col flex-grow;\n}\n\n:host([columns=\"1\"]) {\n  --calcite-action-group-columns: 1;\n}\n:host([columns=\"2\"]) {\n  --calcite-action-group-columns: 2;\n}\n:host([columns=\"3\"]) {\n  --calcite-action-group-columns: 3;\n}\n:host([columns=\"4\"]) {\n  --calcite-action-group-columns: 4;\n}\n:host([columns=\"5\"]) {\n  --calcite-action-group-columns: 5;\n}\n:host([columns=\"6\"]) {\n  --calcite-action-group-columns: 6;\n}\n\n:host(:first-child) {\n  @apply pt-0;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal\"]) .container {\n  @apply flex-row;\n}\n\n:host([layout=\"grid\"]) {\n  @apply grid;\n}\n\n:host([layout=\"grid\"]) .container {\n  @apply bg-background\n  grid\n  place-content-stretch;\n  gap: var(--calcite-action-group-gap);\n  padding: var(--calcite-action-group-gap);\n  grid-template-columns: repeat(var(--calcite-action-group-columns), auto);\n}\n\n@include base-component();\n","import { Component, Element, h, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { CalciteActionMenuCustomEvent } from \"../../components\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Columns, Layout, Scale } from \"../interfaces\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { ActionGroupMessages } from \"./assets/action-group/t9n\";\nimport { ICONS, SLOTS, CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a group of `calcite-action`s.\n * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.\n */\n@Component({\n  tag: \"calcite-action-group\",\n  styleUrl: \"action-group.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionGroup\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    this.menuOpen = false;\n  }\n\n  /**\n   *  Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates the layout of the component.\n   *\n   * @deprecated Use the `layout` property on the component's parent instead.\n   */\n  @Prop({ reflect: true }) layout: Layout = \"vertical\";\n\n  /**\n   * Indicates number of columns.\n   */\n  @Prop({ reflect: true }) columns: Columns;\n\n  /**\n   * When `true`, the `calcite-action-menu` is open.\n   */\n  @Prop({ reflect: true, mutable: true }) menuOpen = false;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Specifies the size of the `calcite-action-menu`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionGroupMessages;\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<ActionGroupMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n  @Element() el: HTMLCalciteActionGroupElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionGroupMessages;\n\n  @State() hasMenuActions = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderMenu(): VNode {\n    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =\n      this;\n\n    return (\n      <calcite-action-menu\n        expanded={expanded}\n        flipPlacements={[\"left\", \"right\"]}\n        hidden={!hasMenuActions}\n        label={messages.more}\n        onCalciteActionMenuOpen={this.setMenuOpen}\n        open={menuOpen}\n        overlayPositioning={overlayPositioning}\n        placement={layout === \"horizontal\" ? \"bottom-start\" : \"leading-start\"}\n        scale={scale}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.more}\n          textEnabled={expanded}\n        />\n        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />\n        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />\n      </calcite-action-menu>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <div aria-label={this.label} class={CSS.container} role=\"group\">\n        <slot />\n        {this.renderMenu()}\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {\n    this.menuOpen = !!(event.target as HTMLCalciteActionMenuElement).open;\n  };\n\n  handleMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}
+{"file":"calcite-action-group.entry.js","mappings":";;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,srCAAsrC,CAAC;AAC9sC,iCAAe,cAAc;;MCwChB,WAAW;;;;;;;;QAqLtB,gBAAW,GAAG,CAAC,KAAyC;YACtD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAE,KAAK,CAAC,MAAuC,CAAC,IAAI,CAAC;SACvE,CAAC;QAEF,gCAA2B,GAAG,CAAC,KAAY;YACzC,IAAI,CAAC,cAAc,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC3D,CAAC;wBA/KkC,KAAK;;sBAiB8C,UAAU;;wBAU9C,KAAK;kCASU,UAAU;;;;+BAiCjD,EAAE;;8BASH,KAAK;;IA3E/B,eAAe;QACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAqDD,gBAAgB;;KAEf;IAYD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;;IAcD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;;;;;;IAOD,iBAAiB;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,+BAA+B,CAAC,IAAI,CAAC,CAAC;KACvC;IAED,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,kCAAkC,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,GACvF,IAAI,CAAC;QAEP,QACE,2BACE,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,MAAM,EAAE,CAAC,cAAc,EACvB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,uBAAuB,EAAE,IAAI,CAAC,WAAW,EACzC,IAAI,EAAE,QAAQ,EACd,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc,GAAG,eAAe,EACrE,KAAK,EAAE,KAAK,IAEZ,sBACE,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAEA,OAAiB,CAAC,OAAO,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,GACrB,EACF,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAAI,EACjF,YAAM,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,EAAEA,OAAiB,CAAC,OAAO,GAAI,CAC9C,EACtB;KACH;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,IAC7D,8DAAQ,EACP,IAAI,CAAC,UAAU,EAAE,CACd,EACN;KACH;;;;;;;;;;;;;;","names":["ACTION_MENU_SLOTS"],"sources":["src/components/action-group/action-group.scss?tag=calcite-action-group&encapsulation=shadow","src/components/action-group/action-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `\"grid\"`.\n * @prop --calcite-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `\"grid\"`.\n * @prop --calcite-action-group-padding: Sets the padding when the `layout` property is `\"grid\"`.\n */\n\n:host {\n  @extend %component-host;\n\n  @apply flex\n  flex-col\n  p-0;\n\n  --calcite-action-group-columns: 3;\n  --calcite-action-group-gap: theme(\"gap.px\");\n  --calcite-action-group-padding: theme(\"padding.px\");\n}\n\n.container {\n  @apply flex flex-col flex-grow;\n}\n\n:host([columns=\"1\"]) {\n  --calcite-action-group-columns: 1;\n}\n:host([columns=\"2\"]) {\n  --calcite-action-group-columns: 2;\n}\n:host([columns=\"3\"]) {\n  --calcite-action-group-columns: 3;\n}\n:host([columns=\"4\"]) {\n  --calcite-action-group-columns: 4;\n}\n:host([columns=\"5\"]) {\n  --calcite-action-group-columns: 5;\n}\n:host([columns=\"6\"]) {\n  --calcite-action-group-columns: 6;\n}\n\n:host(:first-child) {\n  @apply pt-0;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal\"]) .container {\n  @apply flex-row;\n}\n\n:host([layout=\"grid\"]) {\n  @apply grid;\n}\n\n:host([layout=\"grid\"]) .container {\n  @apply bg-background\n  grid\n  place-content-stretch;\n  gap: var(--calcite-action-group-gap);\n  padding: var(--calcite-action-group-gap);\n  grid-template-columns: repeat(var(--calcite-action-group-columns), auto);\n}\n\n@include base-component();\n","import { Component, Element, h, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { CalciteActionMenuCustomEvent } from \"../../components\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Columns, Layout, Scale } from \"../interfaces\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { ActionGroupMessages } from \"./assets/action-group/t9n\";\nimport { ICONS, SLOTS, CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a group of `calcite-action`s.\n * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.\n */\n@Component({\n  tag: \"calcite-action-group\",\n  styleUrl: \"action-group.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionGroup\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    this.menuOpen = false;\n  }\n\n  /**\n   *  Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates the layout of the component.\n   *\n   * @deprecated Use the `layout` property on the component's parent instead.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout> = \"vertical\";\n\n  /**\n   * Indicates number of columns.\n   */\n  @Prop({ reflect: true }) columns: Columns;\n\n  /**\n   * When `true`, the `calcite-action-menu` is open.\n   */\n  @Prop({ reflect: true, mutable: true }) menuOpen = false;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Specifies the size of the `calcite-action-menu`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionGroupMessages;\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<ActionGroupMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n  @Element() el: HTMLCalciteActionGroupElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionGroupMessages;\n\n  @State() hasMenuActions = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderMenu(): VNode {\n    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =\n      this;\n\n    return (\n      <calcite-action-menu\n        expanded={expanded}\n        flipPlacements={[\"left\", \"right\"]}\n        hidden={!hasMenuActions}\n        label={messages.more}\n        onCalciteActionMenuOpen={this.setMenuOpen}\n        open={menuOpen}\n        overlayPositioning={overlayPositioning}\n        placement={layout === \"horizontal\" ? \"bottom-start\" : \"leading-start\"}\n        scale={scale}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.more}\n          textEnabled={expanded}\n        />\n        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />\n        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />\n      </calcite-action-menu>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <div aria-label={this.label} class={CSS.container} role=\"group\">\n        <slot />\n        {this.renderMenu()}\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {\n    this.menuOpen = !!(event.target as HTMLCalciteActionMenuElement).open;\n  };\n\n  handleMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}

package/dist/esm/calcite-action-menu.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.9.1-next.2
+ * v2.9.1-next.3
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-335650d1.js';
-import { g as getRoundRobinIndex } from './array-ed1bc0b6.js';
-import { t as toAriaBoolean, d as focusElement } from './dom-8d1d244c.js';
-import { g as guid } from './guid-4d803ab1.js';
-import { i as isActivationKey } from './key-a3711155.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-925a6f87.js';
-import { a as activeAttr, C as CSS, I as ICONS, S as SLOTS } from './resources-945284ef.js';
-import './resources-0451c085.js';
-import './component-d692be87.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-f27cbf44.js';
+import { g as getRoundRobinIndex } from './array-54b7aca8.js';
+import { t as toAriaBoolean, d as focusElement } from './dom-e9869a02.js';
+import { g as guid } from './guid-c3571ce3.js';
+import { i as isActivationKey } from './key-b76ae8fe.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-2e98db6d.js';
+import { a as activeAttr, C as CSS, I as ICONS, S as SLOTS } from './resources-d2c85d04.js';
+import './resources-17413e0a.js';
+import './component-67d4653d.js';
 
 const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-color-text-2)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}::slotted(calcite-action-group:last-child){border-block-end:0}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteActionMenuStyle0 = actionMenuCss;

package/dist/esm/calcite-action-pad.entry.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.1-next.2
+ * v2.9.1-next.3
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-335650d1.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-d9d2506b.js';
-import { s as slotChangeGetAssignedElements } from './dom-8d1d244c.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-925a6f87.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-87457b57.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-0ec2387a.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-2dbf2e47.js';
-import { c as createObserver } from './observers-9b3d9b69.js';
-import './guid-4d803ab1.js';
-import './resources-0451c085.js';
-import './component-d692be87.js';
-import './key-a3711155.js';
-import './resources-afae38ec.js';
-import './resources-945284ef.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f27cbf44.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e3e23048.js';
+import { s as slotChangeGetAssignedElements } from './dom-e9869a02.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-2e98db6d.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-e1bda23b.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-4e080b04.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-900d9c88.js';
+import { c as createObserver } from './observers-e206648a.js';
+import './guid-c3571ce3.js';
+import './resources-17413e0a.js';
+import './component-67d4653d.js';
+import './key-b76ae8fe.js';
+import './resources-6691cf83.js';
+import './resources-d2c85d04.js';
 
 const CSS = {
     actionGroupEnd: "action-group--end",
@@ -142,7 +142,7 @@ const ActionPad = class {
         return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
     }
     render() {
-        return (h(Host, { key: 'd5ac59815e47872f3e04d9147872fade94a82c22', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("div", { key: '06adf208d6986d6f6414c9526aa9bcd2f4fe7bd9', class: CSS.container }, h("slot", { key: '1f9e4601ef72cd5a19bbfd2b5d4337b6390597f5', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
+        return (h(Host, { key: '6fc9cda9ae160bc7f9dc8fb4a6c55722515c26dc', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("div", { key: 'dec33dff6ba6464edc502bbf932d77145e5cba07', class: CSS.container }, h("slot", { key: 'e7031817e0d4c0c9c2e8614a345fa125889bd03b', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/esm/calcite-action-pad.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-action-pad.entry.js","mappings":"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","names":[],"sources":["src/components/action-pad/resources.ts","src/components/action-pad/action-pad.scss?tag=calcite-action-pad&encapsulation=shadow","src/components/action-pad/action-pad.tsx"],"sourcesContent":["export const CSS = {\n  actionGroupEnd: \"action-group--end\",\n  container: \"container\",\n};\n\nexport const SLOTS = {\n  expandTooltip: \"expand-tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-pad-expanded-max-width: When `layout` is `\"vertical\"`, specifies the expanded max width of the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply animate-in block rounded-sm;\n  --calcite-action-pad-expanded-max-width: auto;\n  background: transparent;\n}\n\n:host([expanded][layout=\"vertical\"]) .container {\n  max-inline-size: var(--calcite-action-pad-expanded-max-width);\n}\n\n::slotted(calcite-action-group) {\n  @apply border-color-3\n  border-0\n  border-b\n  border-solid\n  pb-0 pt-0;\n}\n\n.container {\n  @apply bg-background\n  shadow-2\n  inline-flex\n  flex-col\n  overflow-y-auto\n  rounded;\n}\n\n.action-group--bottom {\n  @apply flex-grow justify-end pb-0;\n}\n\n:host([layout=\"horizontal\"]) {\n  .container {\n    @apply flex-row;\n    .action-group--bottom {\n      @apply p-0;\n    }\n    ::slotted(calcite-action-group) {\n      @apply border-0\n      p-0;\n      border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n    }\n  }\n}\n\n::slotted(calcite-action-group:last-child) {\n  @apply border-b-0;\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 { slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ExpandToggle, toggleChildActionText } from \"../functional/ExpandToggle\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { ActionPadMessages } from \"./assets/action-pad/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-action`s to the component.\n * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.\n */\n@Component({\n  tag: \"calcite-action-pad\",\n  styleUrl: \"action-pad.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionPad\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Specifies the accessible label for the last `calcite-action-group`.\n   */\n  @Prop() actionsEndGroupLabel: string;\n\n  /**\n   * When `true`, the expand-toggling behavior is disabled.\n   */\n  @Prop({ reflect: true }) expandDisabled = false;\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(expanded: boolean): void {\n    toggleChildActionText({ el: this.el, expanded });\n  }\n\n  /**\n   * Indicates the layout of the component.\n   */\n  @Prop({ reflect: true }) layout: Layout = \"vertical\";\n\n  @Watch(\"layout\")\n  layoutHandler(): void {\n    this.updateGroups();\n  }\n\n  /**\n   * Arranges the component depending on the element's `dir` property.\n   */\n  @Prop({ reflect: true }) position: Position;\n\n  /**\n   * Specifies the size of the expand `calcite-action`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionPadMessages;\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<ActionPadMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the `expanded` property is toggled.\n   */\n  @Event({ cancelable: false }) calciteActionPadToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionPadElement;\n\n  @State() expandTooltip: HTMLCalciteTooltipElement;\n\n  mutationObserver = createObserver(\"mutation\", () =>\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\"))),\n  );\n\n  expandToggleEl: HTMLCalciteActionElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionPadMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  actionMenuOpenHandler = (event: CustomEvent<void>): void => {\n    if ((event.target as HTMLCalciteActionGroupElement).menuOpen) {\n      const composedPath = event.composedPath();\n      Array.from(this.el.querySelectorAll(\"calcite-action-group\")).forEach((group) => {\n        if (!composedPath.includes(group)) {\n          group.menuOpen = false;\n        }\n      });\n    }\n  };\n\n  toggleExpand = (): void => {\n    this.expanded = !this.expanded;\n    this.calciteActionPadToggle.emit();\n  };\n\n  setExpandToggleRef = (el: HTMLCalciteActionElement): void => {\n    this.expandToggleEl = el;\n  };\n\n  updateGroups(): void {\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\")));\n  }\n\n  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void {\n    groups.forEach((group) => (group.layout = this.layout));\n  }\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const groups = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-action-group\"),\n    ) as HTMLCalciteActionGroupElement[];\n\n    this.setGroupLayout(groups);\n  };\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-tooltip\"),\n    ) as HTMLCalciteTooltipElement[];\n\n    this.expandTooltip = tooltips[0];\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBottomActionGroup(): VNode {\n    const {\n      expanded,\n      expandDisabled,\n      messages,\n      el,\n      position,\n      toggleExpand,\n      scale,\n      layout,\n      actionsEndGroupLabel,\n      overlayPositioning,\n    } = this;\n\n    const expandToggleNode = !expandDisabled ? (\n      <ExpandToggle\n        collapseText={messages.collapse}\n        el={el}\n        expandText={messages.expand}\n        expanded={expanded}\n        position={position}\n        ref={this.setExpandToggleRef}\n        scale={scale}\n        toggle={toggleExpand}\n        tooltip={this.expandTooltip}\n      />\n    ) : null;\n\n    return expandToggleNode ? (\n      <calcite-action-group\n        class={CSS.actionGroupEnd}\n        label={actionsEndGroupLabel}\n        layout={layout}\n        overlayPositioning={overlayPositioning}\n        scale={scale}\n      >\n        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />\n        {expandToggleNode}\n      </calcite-action-group>\n    ) : null;\n  }\n\n  render(): VNode {\n    return (\n      <Host onCalciteActionMenuOpen={this.actionMenuOpenHandler}>\n        <div class={CSS.container}>\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n          {this.renderBottomActionGroup()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-action-pad.entry.js","mappings":"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","names":[],"sources":["src/components/action-pad/resources.ts","src/components/action-pad/action-pad.scss?tag=calcite-action-pad&encapsulation=shadow","src/components/action-pad/action-pad.tsx"],"sourcesContent":["export const CSS = {\n  actionGroupEnd: \"action-group--end\",\n  container: \"container\",\n};\n\nexport const SLOTS = {\n  expandTooltip: \"expand-tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-pad-expanded-max-width: When `layout` is `\"vertical\"`, specifies the expanded max width of the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply animate-in block rounded-sm;\n  --calcite-action-pad-expanded-max-width: auto;\n  background: transparent;\n}\n\n:host([expanded][layout=\"vertical\"]) .container {\n  max-inline-size: var(--calcite-action-pad-expanded-max-width);\n}\n\n::slotted(calcite-action-group) {\n  @apply border-color-3\n  border-0\n  border-b\n  border-solid\n  pb-0 pt-0;\n}\n\n.container {\n  @apply bg-background\n  shadow-2\n  inline-flex\n  flex-col\n  overflow-y-auto\n  rounded;\n}\n\n.action-group--bottom {\n  @apply flex-grow justify-end pb-0;\n}\n\n:host([layout=\"horizontal\"]) {\n  .container {\n    @apply flex-row;\n    .action-group--bottom {\n      @apply p-0;\n    }\n    ::slotted(calcite-action-group) {\n      @apply border-0\n      p-0;\n      border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n    }\n  }\n}\n\n::slotted(calcite-action-group:last-child) {\n  @apply border-b-0;\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 { slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ExpandToggle, toggleChildActionText } from \"../functional/ExpandToggle\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { ActionPadMessages } from \"./assets/action-pad/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-action`s to the component.\n * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.\n */\n@Component({\n  tag: \"calcite-action-pad\",\n  styleUrl: \"action-pad.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionPad\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Specifies the accessible label for the last `calcite-action-group`.\n   */\n  @Prop() actionsEndGroupLabel: string;\n\n  /**\n   * When `true`, the expand-toggling behavior is disabled.\n   */\n  @Prop({ reflect: true }) expandDisabled = false;\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(expanded: boolean): void {\n    toggleChildActionText({ el: this.el, expanded });\n  }\n\n  /**\n   * Indicates the layout of the component.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout> = \"vertical\";\n\n  @Watch(\"layout\")\n  layoutHandler(): void {\n    this.updateGroups();\n  }\n\n  /**\n   * Arranges the component depending on the element's `dir` property.\n   */\n  @Prop({ reflect: true }) position: Extract<\"start\" | \"end\", Position>;\n\n  /**\n   * Specifies the size of the expand `calcite-action`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\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: ActionPadMessages;\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<ActionPadMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the `expanded` property is toggled.\n   */\n  @Event({ cancelable: false }) calciteActionPadToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionPadElement;\n\n  @State() expandTooltip: HTMLCalciteTooltipElement;\n\n  mutationObserver = createObserver(\"mutation\", () =>\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\"))),\n  );\n\n  expandToggleEl: HTMLCalciteActionElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionPadMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    const { el, expanded } = this;\n    toggleChildActionText({ el, expanded });\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  actionMenuOpenHandler = (event: CustomEvent<void>): void => {\n    if ((event.target as HTMLCalciteActionGroupElement).menuOpen) {\n      const composedPath = event.composedPath();\n      Array.from(this.el.querySelectorAll(\"calcite-action-group\")).forEach((group) => {\n        if (!composedPath.includes(group)) {\n          group.menuOpen = false;\n        }\n      });\n    }\n  };\n\n  toggleExpand = (): void => {\n    this.expanded = !this.expanded;\n    this.calciteActionPadToggle.emit();\n  };\n\n  setExpandToggleRef = (el: HTMLCalciteActionElement): void => {\n    this.expandToggleEl = el;\n  };\n\n  updateGroups(): void {\n    this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\")));\n  }\n\n  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void {\n    groups.forEach((group) => (group.layout = this.layout));\n  }\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const groups = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-action-group\"),\n    ) as HTMLCalciteActionGroupElement[];\n\n    this.setGroupLayout(groups);\n  };\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>\n      el?.matches(\"calcite-tooltip\"),\n    ) as HTMLCalciteTooltipElement[];\n\n    this.expandTooltip = tooltips[0];\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBottomActionGroup(): VNode {\n    const {\n      expanded,\n      expandDisabled,\n      messages,\n      el,\n      position,\n      toggleExpand,\n      scale,\n      layout,\n      actionsEndGroupLabel,\n      overlayPositioning,\n    } = this;\n\n    const expandToggleNode = !expandDisabled ? (\n      <ExpandToggle\n        collapseText={messages.collapse}\n        el={el}\n        expandText={messages.expand}\n        expanded={expanded}\n        position={position}\n        ref={this.setExpandToggleRef}\n        scale={scale}\n        toggle={toggleExpand}\n        tooltip={this.expandTooltip}\n      />\n    ) : null;\n\n    return expandToggleNode ? (\n      <calcite-action-group\n        class={CSS.actionGroupEnd}\n        label={actionsEndGroupLabel}\n        layout={layout}\n        overlayPositioning={overlayPositioning}\n        scale={scale}\n      >\n        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />\n        {expandToggleNode}\n      </calcite-action-group>\n    ) : null;\n  }\n\n  render(): VNode {\n    return (\n      <Host onCalciteActionMenuOpen={this.actionMenuOpenHandler}>\n        <div class={CSS.container}>\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n          {this.renderBottomActionGroup()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.1-next.2
+ * v2.9.1-next.3
  */
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-335650d1.js';
-import { t as toAriaBoolean } from './dom-8d1d244c.js';
-import { g as guid } from './guid-4d803ab1.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-9ebf5878.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-925a6f87.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-87457b57.js';
-import { c as createObserver } from './observers-9b3d9b69.js';
-import { g as getIconScale } from './component-d692be87.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-0ec2387a.js';
-import './resources-0451c085.js';
-import './browser-ba62c19d.js';
-import './key-a3711155.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-f27cbf44.js';
+import { t as toAriaBoolean } from './dom-e9869a02.js';
+import { g as guid } from './guid-c3571ce3.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-826ee30d.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-2e98db6d.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-e1bda23b.js';
+import { c as createObserver } from './observers-e206648a.js';
+import { g as getIconScale } from './component-67d4653d.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-4e080b04.js';
+import './resources-17413e0a.js';
+import './browser-1d133e3e.js';
+import './key-b76ae8fe.js';
 
 const CSS = {
     button: "button",

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

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.1-next.2
+ * v2.9.1-next.3
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-335650d1.js';
-import { b as slotChangeHasAssignedElement, t as toAriaBoolean, e as getSlotted, h as setRequestedIcon } from './dom-8d1d244c.js';
-import { g as getIconScale } from './component-d692be87.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-925a6f87.js';
-import { N as NumberStringFormat, c as connectLocalized, d as disconnectLocalized } from './locale-87457b57.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-3bb7a4c0.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-0ec2387a.js';
-import { K as KindIcons } from './resources-7b16f509.js';
-import './guid-4d803ab1.js';
-import './resources-0451c085.js';
-import './key-a3711155.js';
-import './observers-9b3d9b69.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f27cbf44.js';
+import { b as slotChangeHasAssignedElement, t as toAriaBoolean, e as getSlotted, h as setRequestedIcon } from './dom-e9869a02.js';
+import { g as getIconScale } from './component-67d4653d.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-2e98db6d.js';
+import { N as NumberStringFormat, c as connectLocalized, d as disconnectLocalized } from './locale-e1bda23b.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-1dce42d8.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-4e080b04.js';
+import { K as KindIcons } from './resources-6e1c5561.js';
+import './guid-c3571ce3.js';
+import './resources-17413e0a.js';
+import './key-b76ae8fe.js';
+import './observers-e206648a.js';
 
 const DURATIONS = {
     slow: 14000,
@@ -47,9 +47,10 @@ const CSS = {
     queueCount: "queue-count",
     queueCountActive: "queue-count--active",
     textContainer: "text-container",
+    focused: "focused",
 };
 
-const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
+const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
 const CalciteAlertStyle0 = alertCss;
 
 const Alert = class {
@@ -61,6 +62,16 @@ const Alert = class {
         this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
         this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
         this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
+        this.handleKeyBoardFocus = () => {
+            this.keyBoardFocus = true;
+            this.handleFocus();
+        };
+        this.handleKeyBoardBlur = () => {
+            this.keyBoardFocus = false;
+            if (!this.mouseFocus) {
+                this.handleBlur();
+            }
+        };
         this.autoCloseTimeoutId = null;
         this.totalOpenTime = 0;
         this.totalHoverTime = 0;
@@ -86,11 +97,22 @@ const Alert = class {
             this.hasEndActions = slotChangeHasAssignedElement(event);
         };
         this.handleMouseOver = () => {
+            this.mouseFocus = true;
+            this.handleFocus();
+        };
+        this.handleMouseLeave = () => {
+            this.mouseFocus = false;
+            if (!this.keyBoardFocus) {
+                this.handleBlur();
+            }
+        };
+        this.handleFocus = () => {
             window.clearTimeout(this.autoCloseTimeoutId);
+            this.autoCloseTimeoutId = null;
             this.totalOpenTime = Date.now() - this.initialOpenTime;
             this.lastMouseOverBegin = Date.now();
         };
-        this.handleMouseLeave = () => {
+        this.handleBlur = () => {
             const hoverDuration = Date.now() - this.lastMouseOverBegin;
             const timeRemaining = DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
             this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
@@ -116,6 +138,7 @@ const Alert = class {
         this.queue = [];
         this.queueLength = 0;
         this.queued = false;
+        this.keyBoardFocus = false;
     }
     openHandler() {
         onToggleOpenCloseComponent(this);
@@ -169,6 +192,7 @@ const Alert = class {
             detail: { alert: this.el },
         }));
         window.clearTimeout(this.autoCloseTimeoutId);
+        this.autoCloseTimeoutId = null;
         window.clearTimeout(this.queueTimeout);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -180,15 +204,16 @@ const Alert = class {
         const hidden = !open;
         const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
         const hasQueuedAlerts = this.queueLength > 1;
-        return (h(Host, { key: 'ea81bb8c414a682356d9c2a839df57b73fd4de1e', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { key: '3d166368d33d7b540e8a9bf2f0c7643f9a774e6c', class: {
+        return (h(Host, { key: '5b85226946398df7cf023211a8b358e735dd8f11', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { key: 'effb5efa631fc898ddec2b93950d2fbf14472d23', class: {
                 [CSS.container]: true,
                 [CSS.containerQueued]: queued,
                 [`${CSS.container}--${placement}`]: true,
                 [CSS.containerSlottedInShell]: this.slottedInShell,
-            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { key: '5a761dc8f4158245573cd4ca98fc61396cd9e82c', class: CSS.textContainer }, h("slot", { key: 'd4338d3c7ffb8a9f24c184f0c94becada6bd0198', name: SLOTS.title }), h("slot", { key: '56aa7f1d6b1e9a276f24c586c2acafb3b3cc1c7f', name: SLOTS.message }), h("slot", { key: 'd8844321b222a62be090d9b87487fe270fa76c3e', name: SLOTS.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
+                [CSS.focused]: this.keyBoardFocus,
+            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { key: 'ab4d405229b2e840b737cb90b076ad3313d9f7e9', class: CSS.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, h("slot", { key: 'ec2ac78702d4e9cc288b4a632aab39ff5df2a0a3', name: SLOTS.title }), h("slot", { key: '69861e0572b10cbe09dc2424815132f1dd4588b7', name: SLOTS.message }), h("slot", { key: '4d53bfd49c5c9894cdc93856888c6da5d4cbf100', name: SLOTS.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
     }
     renderCloseButton() {
-        return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+        return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, onFocusin: this.autoClose ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
     }
     renderQueueCount() {
         const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;