@esri/calcite-components 2.2.0-next.11 → 2.2.0-next.12

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

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

package/dist/cjs/calcite-action-bar.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const conditionalSlot = require('./conditionalSlot-129f9fb1.js');
-const dom = require('./dom-96b95ba5.js');
-const loadable = require('./loadable-64558297.js');
-const locale = require('./locale-92847a13.js');
-const observers = require('./observers-72601b59.js');
-const t9n = require('./t9n-b908c650.js');
-const ExpandToggle = require('./ExpandToggle-7241e2e4.js');
-const debounce = require('./debounce-4a5c618d.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
-require('./key-89f3021a.js');
-require('./resources-3926d6a2.js');
-require('./resources-2bdd1ed7.js');
+const index = require('./index-41b2d7a6.js');
+const conditionalSlot = require('./conditionalSlot-566fd2b6.js');
+const dom = require('./dom-8573aa26.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const observers = require('./observers-beba3aca.js');
+const t9n = require('./t9n-65657a5d.js');
+const ExpandToggle = require('./ExpandToggle-ca81fd83.js');
+const debounce = require('./debounce-c7b22268.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.js');
+require('./key-451c1254.js');
+require('./resources-bca3f144.js');
+require('./resources-ec1e9288.js');
 
 const CSS = {
     actionGroupEnd: "action-group--end",

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

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const conditionalSlot = require('./conditionalSlot-129f9fb1.js');
-const loadable = require('./loadable-64558297.js');
-const locale = require('./locale-92847a13.js');
-const t9n = require('./t9n-b908c650.js');
-const resources$1 = require('./resources-2bdd1ed7.js');
-const resources = require('./resources-3926d6a2.js');
-const dom = require('./dom-96b95ba5.js');
-require('./observers-72601b59.js');
-require('./key-89f3021a.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
+const index = require('./index-41b2d7a6.js');
+const conditionalSlot = require('./conditionalSlot-566fd2b6.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const t9n = require('./t9n-65657a5d.js');
+const resources$1 = require('./resources-ec1e9288.js');
+const resources = require('./resources-bca3f144.js');
+const dom = require('./dom-8573aa26.js');
+require('./observers-beba3aca.js');
+require('./key-451c1254.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.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}";
 

package/dist/cjs/calcite-action-menu.cjs.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.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const array = require('./array-5fcbf689.js');
-const dom = require('./dom-96b95ba5.js');
-const guid = require('./guid-f81db95d.js');
-const key = require('./key-89f3021a.js');
-const loadable = require('./loadable-64558297.js');
-const resources = require('./resources-2bdd1ed7.js');
-require('./resources-1e439750.js');
+const index = require('./index-41b2d7a6.js');
+const array = require('./array-2091ef39.js');
+const dom = require('./dom-8573aa26.js');
+const guid = require('./guid-ce508a49.js');
+const key = require('./key-451c1254.js');
+const loadable = require('./loadable-d0df67a5.js');
+const resources = require('./resources-ec1e9288.js');
+require('./resources-91df8f40.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}";
 

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

@@ -1,25 +1,25 @@
 /*!
  * 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.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const conditionalSlot = require('./conditionalSlot-129f9fb1.js');
-const dom = require('./dom-96b95ba5.js');
-const loadable = require('./loadable-64558297.js');
-const locale = require('./locale-92847a13.js');
-const t9n = require('./t9n-b908c650.js');
-const ExpandToggle = require('./ExpandToggle-7241e2e4.js');
-const observers = require('./observers-72601b59.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
-require('./key-89f3021a.js');
-require('./resources-3926d6a2.js');
-require('./resources-2bdd1ed7.js');
+const index = require('./index-41b2d7a6.js');
+const conditionalSlot = require('./conditionalSlot-566fd2b6.js');
+const dom = require('./dom-8573aa26.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const t9n = require('./t9n-65657a5d.js');
+const ExpandToggle = require('./ExpandToggle-ca81fd83.js');
+const observers = require('./observers-beba3aca.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.js');
+require('./key-451c1254.js');
+require('./resources-bca3f144.js');
+require('./resources-ec1e9288.js');
 
 const CSS = {
     actionGroupEnd: "action-group--end",

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

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const dom = require('./dom-96b95ba5.js');
-const guid = require('./guid-f81db95d.js');
-const interactive = require('./interactive-7b3fb6e5.js');
-const loadable = require('./loadable-64558297.js');
-const locale = require('./locale-92847a13.js');
-const observers = require('./observers-72601b59.js');
-const component = require('./component-3cb4d607.js');
-const t9n = require('./t9n-b908c650.js');
-require('./resources-1e439750.js');
-require('./browser-34b605ef.js');
-require('./key-89f3021a.js');
+const index = require('./index-41b2d7a6.js');
+const dom = require('./dom-8573aa26.js');
+const guid = require('./guid-ce508a49.js');
+const interactive = require('./interactive-317600bf.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const observers = require('./observers-beba3aca.js');
+const component = require('./component-23821d6c.js');
+const t9n = require('./t9n-65657a5d.js');
+require('./resources-91df8f40.js');
+require('./browser-39257e07.js');
+require('./key-451c1254.js');
 
 const CSS = {
     button: "button",
@@ -37,7 +37,7 @@ const SLOTS = {
     tooltip: "tooltip",
 };
 
-const actionCss = ":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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const actionCss = ":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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand);--calcite-action-color-transparent-hover:var(--calcite-color-transparent-hover);--calcite-action-color-transparent-press:var(--calcite-color-transparent-press)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-action-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-color-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Action = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"calcite-action.entry.cjs.js","mappings":"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","names":["createObserver","forceUpdate","guid","updateMessages","connectInteractive","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectInteractive","disconnectLocalized","disconnectMessages","updateHostInteraction","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"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-indicator-color: Specifies the color of the component's indicator.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n  --calcite-action-indicator-color: theme(\"colors.brand\");\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color);\n  }\n}\n\n@include disabled();\n\n.button {\n  @apply bg-foreground-1\n    fill-color-3\n    focus-base\n    text-n2h\n    text-color-3\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-sans\n    font-medium;\n\n  text-align: unset;\n  flex: 1 0 auto;\n  &:hover {\n    @apply bg-foreground-2 text-color-1 fill-color-1;\n  }\n\n  &:focus {\n    @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n\n  .icon-container {\n    @apply pointer-events-none\n      m-0\n      flex\n      items-center\n      justify-center;\n    min-inline-size: theme(\"spacing.4\");\n    min-block-size: theme(\"spacing.4\");\n  }\n\n  .text-container {\n    @apply m-0\n      w-0\n      truncate\n      leading-6\n      opacity-0\n      transition-opacity\n      duration-150\n      ease-in-out;\n    transition-property: margin;\n    transition-property: inline-size;\n  }\n\n  .text-container--visible {\n    @apply w-auto flex-auto opacity-100;\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n// Compact\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button {\n  @apply text-color-1 fill-color-1 bg-foreground-3;\n}\n\n:host([active]) .button:active {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent;\n}\n\n:host([appearance=\"transparent\"][active]) .button,\n:host([appearance=\"transparent\"]) .button:hover,\n:host([appearance=\"transparent\"]) .button:focus {\n  background-color: var(--calcite-button-transparent-hover);\n}\n\n:host([appearance=\"transparent\"]) .button:active {\n  background-color: var(--calcite-button-transparent-press);\n}\n\n:host([appearance=\"transparent\"][disabled]) .button {\n  @apply bg-transparent;\n}\n\n:host([loading][appearance=\"solid\"]) .button,\n:host([loading][appearance=\"solid\"]) .button:hover,\n:host([loading][appearance=\"solid\"]) .button:focus {\n  @apply bg-foreground-1;\n  .text-container {\n    @apply opacity-disabled;\n  }\n}\n\n:host([loading]) calcite-loader[inline] {\n  @apply text-color-3;\n  margin-inline-end: theme(\"spacing.0\");\n}\n\n:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus {\n  @apply opacity-disabled bg-foreground-1 cursor-default;\n}\n\n:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus {\n  @apply opacity-disabled bg-foreground-3;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent\n    transition-shadow\n    duration-150\n    ease-in-out;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\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 { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - A slot for adding a `calcite-tooltip`.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionMessages;\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<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : \"\"}`;\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}
+{"file":"calcite-action.entry.cjs.js","mappings":"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","names":["createObserver","forceUpdate","guid","updateMessages","connectInteractive","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectInteractive","disconnectLocalized","disconnectMessages","updateHostInteraction","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"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-indicator-color: Specifies the color of the component's indicator.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n  --calcite-action-indicator-color: theme(\"colors.brand\");\n  --calcite-action-color-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-action-color-transparent-press: var(--calcite-color-transparent-press);\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color);\n  }\n}\n\n@include disabled();\n\n.button {\n  @apply bg-foreground-1\n    fill-color-3\n    focus-base\n    text-n2h\n    text-color-3\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-sans\n    font-medium;\n\n  text-align: unset;\n  flex: 1 0 auto;\n  &:hover {\n    @apply bg-foreground-2 text-color-1 fill-color-1;\n  }\n\n  &:focus {\n    @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;\n  }\n\n  &:active {\n    @apply bg-foreground-3;\n  }\n\n  .icon-container {\n    @apply pointer-events-none\n      m-0\n      flex\n      items-center\n      justify-center;\n    min-inline-size: theme(\"spacing.4\");\n    min-block-size: theme(\"spacing.4\");\n  }\n\n  .text-container {\n    @apply m-0\n      w-0\n      truncate\n      leading-6\n      opacity-0\n      transition-opacity\n      duration-150\n      ease-in-out;\n    transition-property: margin;\n    transition-property: inline-size;\n  }\n\n  .text-container--visible {\n    @apply w-auto flex-auto opacity-100;\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n// Compact\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button {\n  @apply text-color-1 fill-color-1 bg-foreground-3;\n}\n\n:host([active]) .button:active {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent;\n}\n\n:host([appearance=\"transparent\"][active]) .button,\n:host([appearance=\"transparent\"]) .button:hover,\n:host([appearance=\"transparent\"]) .button:focus {\n  background-color: var(--calcite-action-color-transparent-hover);\n}\n\n:host([appearance=\"transparent\"]) .button:active {\n  background-color: var(--calcite-action-color-transparent-press);\n}\n\n:host([appearance=\"transparent\"][disabled]) .button {\n  @apply bg-transparent;\n}\n\n:host([loading][appearance=\"solid\"]) .button,\n:host([loading][appearance=\"solid\"]) .button:hover,\n:host([loading][appearance=\"solid\"]) .button:focus {\n  @apply bg-foreground-1;\n  .text-container {\n    @apply opacity-disabled;\n  }\n}\n\n:host([loading]) calcite-loader[inline] {\n  @apply text-color-3;\n  margin-inline-end: theme(\"spacing.0\");\n}\n\n:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus {\n  @apply opacity-disabled bg-foreground-1 cursor-default;\n}\n\n:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus {\n  @apply opacity-disabled bg-foreground-3;\n}\n\n:host([appearance=\"transparent\"]) .button {\n  @apply bg-transparent\n    transition-shadow\n    duration-150\n    ease-in-out;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\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 { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - A slot for adding a `calcite-tooltip`.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionMessages;\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<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : \"\"}`;\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}

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

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const dom = require('./dom-96b95ba5.js');
-const component = require('./component-3cb4d607.js');
-const loadable = require('./loadable-64558297.js');
-const locale = require('./locale-92847a13.js');
-const openCloseComponent = require('./openCloseComponent-b4ccd661.js');
-const t9n = require('./t9n-b908c650.js');
-const resources = require('./resources-c29a4618.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
-require('./key-89f3021a.js');
-require('./observers-72601b59.js');
+const index = require('./index-41b2d7a6.js');
+const dom = require('./dom-8573aa26.js');
+const component = require('./component-23821d6c.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const openCloseComponent = require('./openCloseComponent-2a9be1d1.js');
+const t9n = require('./t9n-65657a5d.js');
+const resources = require('./resources-33ab283f.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.js');
+require('./key-451c1254.js');
+require('./observers-beba3aca.js');
 
 const DURATIONS = {
     slow: 14000,

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

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const dom = require('./dom-96b95ba5.js');
-const utils = require('./utils-bf47d56f.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
+const index = require('./index-41b2d7a6.js');
+const dom = require('./dom-8573aa26.js');
+const utils = require('./utils-38bf9fbd.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.js');
 
 /**
  * Convert a string to a valid hex by hashing its contents

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

@@ -1,26 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8b34daf0.js');
-const conditionalSlot = require('./conditionalSlot-129f9fb1.js');
-const dom = require('./dom-96b95ba5.js');
-const interactive = require('./interactive-7b3fb6e5.js');
-const locale = require('./locale-92847a13.js');
-const t9n = require('./t9n-b908c650.js');
-const Heading = require('./Heading-371c1c2e.js');
-const loadable = require('./loadable-64558297.js');
-const openCloseComponent = require('./openCloseComponent-b4ccd661.js');
-const key = require('./key-89f3021a.js');
-require('./observers-72601b59.js');
-require('./guid-f81db95d.js');
-require('./resources-1e439750.js');
-require('./browser-34b605ef.js');
+const index = require('./index-41b2d7a6.js');
+const conditionalSlot = require('./conditionalSlot-566fd2b6.js');
+const dom = require('./dom-8573aa26.js');
+const interactive = require('./interactive-317600bf.js');
+const locale = require('./locale-3660b9d2.js');
+const t9n = require('./t9n-65657a5d.js');
+const Heading = require('./Heading-ab54f9d8.js');
+const loadable = require('./loadable-d0df67a5.js');
+const openCloseComponent = require('./openCloseComponent-2a9be1d1.js');
+const key = require('./key-451c1254.js');
+require('./observers-beba3aca.js');
+require('./guid-ce508a49.js');
+require('./resources-91df8f40.js');
+require('./browser-39257e07.js');
 
 const IDS$1 = {
     content: "content",