@esri/calcite-components 2.13.0 → 2.14.0-next.1

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

@@ -1,21 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const observers = require('./observers-dc37fb24.js');
-const conditionalSlot = require('./conditionalSlot-961cb966.js');
-const dom = require('./dom-401c47fa.js');
-const resources = require('./resources-8d0a3a55.js');
-const component = require('./component-25eaec79.js');
-const loadable = require('./loadable-1e343f4a.js');
-require('./browser-b9024aa0.js');
-require('./guid-7487a6a8.js');
+const index = require('./index-fa8af6d4.js');
+const observers = require('./observers-d4deb7de.js');
+const dom = require('./dom-c64d16b4.js');
+const resources = require('./resources-d4d76af1.js');
+const component = require('./component-7ca6ac5e.js');
+const loadable = require('./loadable-3b4436ea.js');
+require('./browser-39ff1e63.js');
+require('./guid-fd15b830.js');
 
 const CSS$1 = {
     accordion: "accordion",
@@ -130,6 +129,12 @@ const AccordionItem = class {
         //  Private Methods
         //
         //--------------------------------------------------------------------------
+        this.handleActionsStartSlotChange = (event) => {
+            this.hasActionsStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleActionsEndSlotChange = (event) => {
+            this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
+        };
         this.storeHeaderEl = (el) => {
             this.headerEl = el;
         };
@@ -145,36 +150,30 @@ const AccordionItem = class {
         this.iconType = undefined;
         this.accordionParent = undefined;
         this.scale = undefined;
+        this.hasActionsStart = false;
+        this.hasActionsEnd = false;
     }
     //--------------------------------------------------------------------------
     //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        conditionalSlot.connectConditionalSlotComponent(this);
-    }
     componentWillLoad() {
         loadable.setUpLoadableComponent(this);
     }
     componentDidLoad() {
         loadable.setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        conditionalSlot.disconnectConditionalSlotComponent(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
     //
     // --------------------------------------------------------------------------
     renderActionsStart() {
-        const { el } = this;
-        return dom.getSlotted(el, SLOTS.actionsStart) ? (index.h("div", { class: CSS.actionsStart }, index.h("slot", { name: SLOTS.actionsStart }))) : null;
+        return (index.h("div", { class: CSS.actionsStart, hidden: !this.hasActionsStart }, index.h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
     }
     renderActionsEnd() {
-        const { el } = this;
-        return dom.getSlotted(el, SLOTS.actionsEnd) ? (index.h("div", { class: CSS.actionsEnd }, index.h("slot", { name: SLOTS.actionsEnd }))) : null;
+        return (index.h("div", { class: CSS.actionsEnd, hidden: !this.hasActionsEnd }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
     }
     render() {
         const { iconFlipRtl } = this;
@@ -182,16 +181,16 @@ const AccordionItem = class {
         const iconStartEl = this.iconStart ? (index.h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "start", icon: this.iconStart, key: "icon-start", scale: component.getIconScale(this.scale) })) : null;
         const iconEndEl = this.iconEnd ? (index.h("calcite-icon", { class: { [CSS.iconEnd]: true, [CSS.icon]: true }, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: component.getIconScale(this.scale) })) : null;
         const { description } = this;
-        return (index.h(index.Host, { key: '73a74d61e41199c57868bd5375ba1b08f8e19dbc' }, index.h("div", { key: 'ce9e0a74ea1eb93b7e2f00e95e6a092dcf99726b', class: {
+        return (index.h(index.Host, { key: 'd9f881a4b6c4ec686b4c58cbd39bb2d665db96ff' }, index.h("div", { key: '91d256bdf41b8388ed9c2fda26a563bc9fa72af7', class: {
                 [`icon-position--${this.iconPosition}`]: true,
                 [`icon-type--${this.iconType}`]: true,
-            } }, index.h("div", { key: '18af6a636b01a816363edf73bd05a486ac0cc2b2', class: { [CSS.header]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), index.h("div", { key: '8a82a3acec9576d7e936714d1bee0bd2a1cc4ab1', "aria-controls": IDS.section, "aria-expanded": dom.toAriaBoolean(this.expanded), class: CSS.headerContent, id: IDS.sectionToggle, onClick: this.itemHeaderClickHandler, ref: this.storeHeaderEl, role: "button", tabindex: "0" }, index.h("div", { key: 'b9b223e8e0b0f60d9f6f9c5a9bda1458def7ae01', class: CSS.headerContainer }, iconStartEl, index.h("div", { key: 'ccdba89b98942b7163d09a0f78175c374aba5875', class: CSS.headerText }, index.h("span", { key: 'c91bcaf36ba60ac2a8ef06e3356a15d1f3a7e78f', class: CSS.heading }, this.heading), description ? index.h("span", { class: CSS.description }, description) : null), iconEndEl), index.h("calcite-icon", { key: 'aebf05069b1ceae376fb67074aad773c4f403c16', class: CSS.expandIcon, icon: this.iconType === "chevron"
+            } }, index.h("div", { key: '8d17680329e791164f66ca7d8d494483ae5bf977', class: { [CSS.header]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), index.h("div", { key: '3be3e3dc625f73a9330a51971096cf920b28f5e3', "aria-controls": IDS.section, "aria-expanded": dom.toAriaBoolean(this.expanded), class: CSS.headerContent, id: IDS.sectionToggle, onClick: this.itemHeaderClickHandler, ref: this.storeHeaderEl, role: "button", tabindex: "0" }, index.h("div", { key: 'e505abb129bb03e1ccaeb98345b750005159fe29', class: CSS.headerContainer }, iconStartEl, index.h("div", { key: 'fd90273700fb55c84be11705c63b09eddd6068d2', class: CSS.headerText }, index.h("span", { key: '85fe7353dd51c2ca93b136e34dcaf8f8877e9c20', class: CSS.heading }, this.heading), description ? index.h("span", { class: CSS.description }, description) : null), iconEndEl), index.h("calcite-icon", { key: 'f03e2c69694d72afa32f25b52cec2efba6153f8d', class: CSS.expandIcon, icon: this.iconType === "chevron"
                 ? "chevronDown"
                 : this.iconType === "caret"
                     ? "caretDown"
                     : this.expanded
                         ? "minus"
-                        : "plus", scale: component.getIconScale(this.scale) })), this.renderActionsEnd()), index.h("section", { key: '7371b06f1ec99aab9351113663eda976540ae7b0', "aria-labelledby": IDS.sectionToggle, class: CSS.content, id: IDS.section }, index.h("slot", { key: '69b851d2989876bece534e499a039e55eaabb1ec' })))));
+                        : "plus", scale: component.getIconScale(this.scale) })), this.renderActionsEnd()), index.h("section", { key: 'c04e4afb8d05d0c9694d22d473f83008f7a9f450', "aria-labelledby": IDS.sectionToggle, class: CSS.content, id: IDS.section }, index.h("slot", { key: 'f360ea78742797b14d6880c75eafa20973eeb89b' })))));
     }
     //--------------------------------------------------------------------------
     //

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":["CSS","createObserver","h","connectConditionalSlotComponent","setUpLoadableComponent","setComponentLoaded","disconnectConditionalSlotComponent","getSlotted","getElementDir","getIconScale","Host","CSS_UTILITY","toAriaBoolean","closestElementCrossShadowBoundary","componentFocusable"],"sources":["src/components/accordion/resources.ts","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":["export const CSS = {\n  accordion: \"accordion\",\n  transparent: \"accordion--transparent\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-accordion-border-color: Specifies the component's border color.\n * @prop --calcite-accordion-background-color:  Specifies the component's background color.\n*/\n\n:host {\n  @apply relative\n    block\n    max-w-full\n    leading-6;\n}\n\n.accordion {\n  @apply border border-solid border-b-0;\n  border-color: var(--calcite-accordion-border-color, theme(\"borderColor.color.2\"));\n  background-color: var(--calcite-accordion-background-color, theme(\"backgroundColor.foreground.1\"));\n}\n\n.accordion--transparent {\n  --calcite-accordion-border-color: transparent;\n  border-color: var(--calcite-color-transparent);\n  background-color: var(--calcite-color-transparent);\n}\n\n// scale variants for child\n:host([scale=\"s\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.1\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.2\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.2\");\n  @apply text-n2h;\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.2\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.3\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.3\");\n  @apply text-n1h;\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.3\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.4\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.4\");\n  @apply text-0h;\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, IconType, Scale, SelectionMode } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { RequestedItem } from \"./interfaces\";\nimport { CSS } from \"./resources\";\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: Extract<\"start\" | \"end\", Position> = \"end\";\n\n  /** Specifies the type of the icon in the header. */\n  @Prop({ reflect: true }) iconType: Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType> =\n    \"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          [CSS.transparent]: transparent,\n          [CSS.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  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n  content: \"content\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  headerContent: \"header-content\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconEnd: \"icon--end\",\n  iconStart: \"icon--start\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-accordion-border-color: [Deprecate] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.\n * @prop --calcite-accordion-item-background-color: Specifies the component's background color.\n * @prop --calcite-accordion-item-border-color: Specifies the component's border color.\n * @prop --calcite-accordion-item-content-space: Specifies the component's padding.\n * @prop --calcite-accordion-item-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-accordion-item-icon-color` or current color.\n * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.\n * @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.\n * @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.\n * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.\n * @prop --calcite-accordion-item-start-icon-color: Specifies the component's `iconStart` color. Fallback to `--calcite-accordion-item-icon-color` or current color.\n * @prop --calcite-accordion-item-text-color: Specifies the component's text color.\n * @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.\n * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.\n * @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.\n */\n\n%icon-position {\n  /* icon rotation variables */\n  --calcite-internal-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-internal-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-internal-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n:host {\n  @apply relative\n    flex\n    flex-col\n    no-underline;\n\n  color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));\n  background-color: var(--calcite-accordion-item-background-color);\n  border-width: 0;\n\n  .header {\n    background-color: var(--calcite-accordion-item-header-background-color);\n  }\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-internal-accordion-item-flex-direction: row-reverse;\n  --calcite-internal-accordion-item-icon-spacing-start: 0;\n  --calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-internal-accordion-item-flex-direction: row;\n  --calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);\n  --calcite-internal-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-internal-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-internal-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n// .header / content\n.content,\n.header {\n  border-block-end-width: var(--calcite-border-width-sm);\n  border-block-end-style: solid;\n  border-color: var(\n    --calcite-accordion-item-border-color,\n    var(--calcite-accordion-border-color, theme(\"borderColor.color.2\"))\n  );\n}\n\n.header-content,\n.content {\n  padding: var(\n    --calcite-accordion-item-content-space,\n    var(\n      --calcite-internal-accordion-item-padding,\n      var(--calcite-internal-accordion-item-spacing-unit, theme(\"spacing.2\") 0.75rem)\n    )\n  );\n}\n\n.header {\n  @apply flex items-stretch;\n\n  * {\n    @apply inline-flex\n      items-center\n      duration-150\n      ease-in-out;\n    @include word-break();\n  }\n}\n\n.header-content {\n  @apply focus-base flex-grow cursor-pointer;\n  flex-direction: var(--calcite-internal-accordion-item-flex-direction);\n  color: var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit));\n\n  &:focus {\n    @apply focus-inset;\n  }\n\n  // Deprecated\n  &:focus,\n  &:hover,\n  &:active {\n    color: var(\n      --calcite-accordion-item-heading-text-color,\n      var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2))\n    );\n\n    .heading {\n      color: var(\n        --calcite-accordion-item-heading-text-color,\n        var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))\n      );\n    }\n  }\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n// accordion item title\n.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.heading,\n.description {\n  @apply flex w-full;\n}\n\n.heading {\n  @apply font-medium;\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n.icon {\n  @apply duration-150\n    ease-in-out\n    flex\n    items-center;\n  margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  color: var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor));\n  margin-inline-end: var(--calcite-internal-accordion-icon-margin);\n}\n\n.icon--end {\n  color: var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor));\n  margin-inline-end: var(--calcite-internal-accordion-icon-margin);\n  margin-inline-start: var(--calcite-internal-accordion-icon-margin);\n}\n\n// accordion item icon\n.expand-icon {\n  color: var(\n    --calcite-accordion-item-expand-icon-color,\n    var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)))\n  );\n  margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-internal-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl));\n}\n\n.description {\n  @apply mt-1;\n}\n\n.content {\n  @apply hidden pt-0;\n  text-align: initial;\n}\n\n:host(:not(:focus):not(:hover):not([expanded])) {\n  .heading {\n    color: var(\n      --calcite-accordion-item-heading-text-color,\n      var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))\n    );\n  }\n}\n\n:host([expanded]) {\n  color: var(\n    --calcite-accordion-item-text-color,\n    var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))\n  );\n\n  .header {\n    border-block-end-color: transparent;\n  }\n\n  .expand-icon {\n    color: var(\n      --calcite-accordion-item-expand-icon-color,\n      var(\n        --calcite-accordion-item-text-color,\n        var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))\n      )\n    );\n    transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation));\n  }\n  .calcite--rtl .expand-icon {\n    transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl));\n  }\n\n  .description {\n    color: var(\n      --calcite-accordion-item-text-color,\n      var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))\n    );\n  }\n\n  .content {\n    @apply block;\n  }\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  .header-content:hover,\n  .header-content: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  Method,\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 { FlipContext, Position, Scale, SelectionMode, IconType } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\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, LoadableComponent {\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: IconNameOrString;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\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: Extract<\"start\" | \"end\", Position>;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType>;\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  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(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.icon]: true, [CSS.iconStart]: true }}\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]: true, [CSS.icon]: true }}\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              ref={this.storeHeaderEl}\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(this.el, \"calcite-accordion\");\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(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    this.iconPosition = closestAccordionParent.iconPosition;\n    this.iconType = closestAccordionParent.iconType;\n    this.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  private headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.headerEl.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private storeHeaderEl = (el: HTMLDivElement): void => {\n    this.headerEl = el;\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,\n    });\n  }\n}\n"],"version":3}
+{"file":"calcite-accordion.calcite-accordion-item.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAO,MAAMA,KAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,wBAAwB;CACtC;;ACHD,MAAM,YAAY,GAAG,61CAA61C,CAAC;AACn3C,+BAAe,YAAY;;MCsBd,SAAS;;;;QAwGpB,qBAAgB,GAAGC,wBAAc,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;0BAhGG,OAAO;4BAGf,KAAK;wBAI/E,SAAS;qBAG6B,GAAG;6BAcvC,UAAU;;IAMd,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;;;IAmBD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;KACrC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,KAAK,aAAa,CAAC;QACtD,QACEC,kEACE,KAAK,EAAE;gBACL,CAACF,KAAG,CAAC,WAAW,GAAG,WAAW;gBAC9B,CAACA,KAAG,CAAC,SAAS,GAAG,CAAC,WAAW;aAC9B,IAEDE,oEAAQ,CACJ,EACN;KACH;;;;;;IASD,wBAAwB,CAAC,KAAkB;QACzC,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC;YACvC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,sBAAsB;SAC5D,CAAC,CAAC;QACH,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;;;IAkBO,oBAAoB;QAC1B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACzB,CAAC,CAAC;;QAGH,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mCAAmC,CAAC,CAAC,CAAC;KAC9E;;;;;;;;;;;AChJI,MAAM,KAAK,GAAG;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,QAAQ;IAChB,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,gBAAgB;CAChC;;ACxBD,MAAM,gBAAgB,GAAG,g6LAAg6L,CAAC;AAC17L,mCAAe,gBAAgB;;MCyClB,aAAa;;;;;;;;;;QA+QhB,iCAA4B,GAAG,CAAC,KAAY;YAClD,IAAI,CAAC,eAAe,GAAGC,gCAA4B,CAAC,KAAK,CAAC,CAAC;SAC5D,CAAC;QAEM,+BAA0B,GAAG,CAAC,KAAY;YAChD,IAAI,CAAC,aAAa,GAAGA,gCAA4B,CAAC,KAAK,CAAC,CAAC;SAC1D,CAAC;QAEM,kBAAa,GAAG,CAAC,EAAkB;YACzC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;;QAGM,2BAAsB,GAAG,MAAY,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBApRnB,KAAK;;;;;;;;;;+BAgP7B,KAAK;6BAEP,KAAK;;;;;;;IAhL9B,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQD,kBAAkB;QAChB,QACEH,iBAAK,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IACzDA,kBAAM,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,4BAA4B,GAAI,CAC/E,EACN;KACH;IAED,gBAAgB;QACd,QACEA,iBAAK,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,aAAa,IACrDA,kBAAM,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,0BAA0B,GAAI,CAC3E,EACN;KACH;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAGI,iBAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,IAChCJ,0BACE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,EAAE,EAClD,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,WAAW,KAAK,OAAO,EAC1D,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAEK,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,IACA,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAC5BL,0BACE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,EAChD,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,WAAW,KAAK,KAAK,EACxD,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,GAAG,EAAC,UAAU,EACd,KAAK,EAAEK,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,IACA,IAAI,CAAC;QACT,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,QACEL,QAACM,UAAI,uDACHN,kEACE,KAAK,EAAE;gBACL,CAAC,kBAAkB,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI;gBAC7C,CAAC,cAAc,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;aACtC,IAEDA,kEAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,CAACO,qBAAW,CAAC,GAAG,GAAG,GAAG,KAAK,KAAK,EAAE,IACjE,IAAI,CAAC,kBAAkB,EAAE,EAC1BP,mFACiB,GAAG,CAAC,OAAO,mBACXQ,iBAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC3C,KAAK,EAAE,GAAG,CAAC,aAAa,EACxB,EAAE,EAAE,GAAG,CAAC,aAAa,EACrB,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,IAEZR,kEAAK,KAAK,EAAE,GAAG,CAAC,eAAe,IAC5B,WAAW,EACZA,kEAAK,KAAK,EAAE,GAAG,CAAC,UAAU,IACxBA,mEAAM,KAAK,EAAE,GAAG,CAAC,OAAO,IAAG,IAAI,CAAC,OAAO,CAAQ,EAC9C,WAAW,GAAGA,kBAAM,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAQ,GAAG,IAAI,CACpE,EACL,SAAS,CACN,EACNA,2EACE,KAAK,EAAE,GAAG,CAAC,UAAU,EACrB,IAAI,EACF,IAAI,CAAC,QAAQ,KAAK,SAAS;kBACvB,aAAa;kBACb,IAAI,CAAC,QAAQ,KAAK,OAAO;sBACvB,WAAW;sBACX,IAAI,CAAC,QAAQ;0BACX,OAAO;0BACP,MAAM,EAEhB,KAAK,EAAEK,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACE,EACL,IAAI,CAAC,gBAAgB,EAAE,CACpB,EACNL,yFAA0B,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,OAAO,IAC9EA,oEAAQ,CACA,CACN,CACD,EACP;KACH;;;;;;IASD,cAAc,CAAC,KAAoB;QACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE;YAC5B,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACzB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;aACT;SACF;KACF;IAGD,wBAAwB,CAAC,KAAkB;QACzC,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QACzC,MAAM,MAAM,GAAGS,qCAAiC,CAAC,IAAI,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;QAE/E,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;QACpF,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,wBAAwB,CAAC,KAAkB;QACzC,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;;;QAK9B,MAAM,0BAA0B,GAAG,aAAa,CAAC,aAAa,KAAK,SAAS,CAAC;QAC7E,IAAI,0BAA0B,EAAE;YAC9B,OAAO;SACR;QAED,MAAM,sBAAsB,GAAGA,qCAAiC,CAC9D,aAAa,EACb,mBAAmB,CACpB,CAAC;QAEF,IAAI,SAAS,KAAK,sBAAsB,EAAE;YACxC,OAAO;SACR;QAED,IAAI,CAAC,YAAY,GAAG,sBAAsB,CAAC,YAAY,CAAC;QACxD,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,CAAC;QAChD,IAAI,CAAC,KAAK,GAAG,sBAAsB,CAAC,KAAK,CAAC;QAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;;;;IAwBD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;IAuBO,mBAAmB,CACzB,aAA4B,EAC5B,aAA8C;QAE9C,QAAQ,aAAa;YACnB,KAAK,UAAU;gBACb,IAAI,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE;oBAC7B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAChC;gBACD,MAAM;YAER,KAAK,QAAQ;gBACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACnE,MAAM;YAER,KAAK,gBAAgB;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC;gBAC1C,MAAM;SACT;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC;YAC3C,sBAAsB,EAAE,IAAI,CAAC,EAAE;SAChC,CAAC,CAAC;KACJ;;;;;;;;","names":["CSS","createObserver","h","slotChangeHasAssignedElement","setUpLoadableComponent","setComponentLoaded","getElementDir","getIconScale","Host","CSS_UTILITY","toAriaBoolean","closestElementCrossShadowBoundary","componentFocusable"],"sources":["src/components/accordion/resources.ts","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":["export const CSS = {\n  accordion: \"accordion\",\n  transparent: \"accordion--transparent\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-accordion-border-color: Specifies the component's border color.\n * @prop --calcite-accordion-background-color:  Specifies the component's background color.\n*/\n\n:host {\n  @apply relative\n    block\n    max-w-full\n    leading-6;\n}\n\n.accordion {\n  @apply border border-solid border-b-0;\n  border-color: var(--calcite-accordion-border-color, theme(\"borderColor.color.2\"));\n  background-color: var(--calcite-accordion-background-color, theme(\"backgroundColor.foreground.1\"));\n}\n\n.accordion--transparent {\n  --calcite-accordion-border-color: transparent;\n  border-color: var(--calcite-color-transparent);\n  background-color: var(--calcite-color-transparent);\n}\n\n// scale variants for child\n:host([scale=\"s\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.1\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.2\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.2\");\n  @apply text-n2h;\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.2\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.3\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.3\");\n  @apply text-n1h;\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-accordion-item-spacing-unit: theme(\"spacing.3\");\n  --calcite-internal-accordion-icon-margin: theme(\"spacing.4\");\n  --calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) theme(\"spacing.4\");\n  @apply text-0h;\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, IconType, Scale, SelectionMode } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { RequestedItem } from \"./interfaces\";\nimport { CSS } from \"./resources\";\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: Extract<\"start\" | \"end\", Position> = \"end\";\n\n  /** Specifies the type of the icon in the header. */\n  @Prop({ reflect: true }) iconType: Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType> =\n    \"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          [CSS.transparent]: transparent,\n          [CSS.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  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n  content: \"content\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  headerContent: \"header-content\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconEnd: \"icon--end\",\n  iconStart: \"icon--start\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-accordion-border-color: [Deprecate] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.\n * @prop --calcite-accordion-item-background-color: Specifies the component's background color.\n * @prop --calcite-accordion-item-border-color: Specifies the component's border color.\n * @prop --calcite-accordion-item-content-space: Specifies the component's padding.\n * @prop --calcite-accordion-item-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-accordion-item-icon-color` or current color.\n * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.\n * @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.\n * @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.\n * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.\n * @prop --calcite-accordion-item-start-icon-color: Specifies the component's `iconStart` color. Fallback to `--calcite-accordion-item-icon-color` or current color.\n * @prop --calcite-accordion-item-text-color: Specifies the component's text color.\n * @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.\n * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.\n * @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.\n */\n\n%icon-position {\n  /* icon rotation variables */\n  --calcite-internal-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-internal-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-internal-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n:host {\n  @apply relative\n    flex\n    flex-col\n    no-underline;\n\n  color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));\n  background-color: var(--calcite-accordion-item-background-color);\n  border-width: 0;\n\n  .header {\n    background-color: var(--calcite-accordion-item-header-background-color);\n  }\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-internal-accordion-item-flex-direction: row-reverse;\n  --calcite-internal-accordion-item-icon-spacing-start: 0;\n  --calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-internal-accordion-item-flex-direction: row;\n  --calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);\n  --calcite-internal-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-internal-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-internal-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-internal-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n// .header / content\n.content,\n.header {\n  border-block-end-width: var(--calcite-border-width-sm);\n  border-block-end-style: solid;\n  border-color: var(\n    --calcite-accordion-item-border-color,\n    var(--calcite-accordion-border-color, theme(\"borderColor.color.2\"))\n  );\n}\n\n.header-content,\n.content {\n  padding: var(\n    --calcite-accordion-item-content-space,\n    var(\n      --calcite-internal-accordion-item-padding,\n      var(--calcite-internal-accordion-item-spacing-unit, theme(\"spacing.2\") 0.75rem)\n    )\n  );\n}\n\n.header {\n  @apply flex items-stretch;\n\n  * {\n    @apply inline-flex\n      items-center\n      duration-150\n      ease-in-out;\n    @include word-break();\n  }\n}\n\n.header-content {\n  @apply focus-base flex-grow cursor-pointer;\n  flex-direction: var(--calcite-internal-accordion-item-flex-direction);\n  color: var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit));\n\n  &:focus {\n    @apply focus-inset;\n  }\n\n  // Deprecated\n  &:focus,\n  &:hover,\n  &:active {\n    color: var(\n      --calcite-accordion-item-heading-text-color,\n      var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2))\n    );\n\n    .heading {\n      color: var(\n        --calcite-accordion-item-heading-text-color,\n        var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))\n      );\n    }\n  }\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n// accordion item title\n.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.heading,\n.description {\n  @apply flex w-full;\n}\n\n.heading {\n  @apply font-medium;\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n.icon {\n  @apply duration-150\n    ease-in-out\n    flex\n    items-center;\n  margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  color: var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor));\n  margin-inline-end: var(--calcite-internal-accordion-icon-margin);\n}\n\n.icon--end {\n  color: var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor));\n  margin-inline-end: var(--calcite-internal-accordion-icon-margin);\n  margin-inline-start: var(--calcite-internal-accordion-icon-margin);\n}\n\n// accordion item icon\n.expand-icon {\n  color: var(\n    --calcite-accordion-item-expand-icon-color,\n    var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)))\n  );\n  margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-internal-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl));\n}\n\n.description {\n  @apply mt-1;\n}\n\n.content {\n  @apply hidden pt-0;\n  text-align: initial;\n}\n\n:host(:not(:focus):not(:hover):not([expanded])) {\n  .heading {\n    color: var(\n      --calcite-accordion-item-heading-text-color,\n      var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))\n    );\n  }\n}\n\n:host([expanded]) {\n  color: var(\n    --calcite-accordion-item-text-color,\n    var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))\n  );\n\n  .header {\n    border-block-end-color: transparent;\n  }\n\n  .expand-icon {\n    color: var(\n      --calcite-accordion-item-expand-icon-color,\n      var(\n        --calcite-accordion-item-text-color,\n        var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))\n      )\n    );\n    transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation));\n  }\n  .calcite--rtl .expand-icon {\n    transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl));\n  }\n\n  .description {\n    color: var(\n      --calcite-accordion-item-text-color,\n      var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))\n    );\n  }\n\n  .content {\n    @apply block;\n  }\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  .header-content:hover,\n  .header-content: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  Method,\n  Prop,\n  State,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  closestElementCrossShadowBoundary,\n  getElementDir,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { FlipContext, Position, Scale, SelectionMode, IconType } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\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 LoadableComponent {\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: IconNameOrString;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\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: Extract<\"start\" | \"end\", Position>;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType>;\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  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsStart(): VNode {\n    return (\n      <div class={CSS.actionsStart} hidden={!this.hasActionsStart}>\n        <slot name={SLOTS.actionsStart} onSlotchange={this.handleActionsStartSlotChange} />\n      </div>\n    );\n  }\n\n  renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd} hidden={!this.hasActionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.handleActionsEndSlotChange} />\n      </div>\n    );\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.icon]: true, [CSS.iconStart]: true }}\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]: true, [CSS.icon]: true }}\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              ref={this.storeHeaderEl}\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(this.el, \"calcite-accordion\");\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(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    this.iconPosition = closestAccordionParent.iconPosition;\n    this.iconType = closestAccordionParent.iconType;\n    this.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  private headerEl: HTMLDivElement;\n\n  @State() hasActionsStart = false;\n\n  @State() hasActionsEnd = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.headerEl.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleActionsStartSlotChange = (event: Event): void => {\n    this.hasActionsStart = slotChangeHasAssignedElement(event);\n  };\n\n  private handleActionsEndSlotChange = (event: Event): void => {\n    this.hasActionsEnd = slotChangeHasAssignedElement(event);\n  };\n\n  private storeHeaderEl = (el: HTMLDivElement): void => {\n    this.headerEl = el;\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,\n    });\n  }\n}\n"],"version":3}

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

@@ -1,27 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const conditionalSlot = require('./conditionalSlot-961cb966.js');
-const dom = require('./dom-401c47fa.js');
-const loadable = require('./loadable-1e343f4a.js');
-const locale = require('./locale-783be19a.js');
-const observers = require('./observers-dc37fb24.js');
-const t9n = require('./t9n-5f0809e3.js');
-const ExpandToggle = require('./ExpandToggle-dd0f4569.js');
-const resources = require('./resources-8d0a3a55.js');
-const debounce = require('./debounce-f0f19c37.js');
-require('./guid-7487a6a8.js');
-require('./browser-b9024aa0.js');
-require('./key-8032a9dc.js');
-require('./resources-222a6fdf.js');
-require('./resources-ec8796cb.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const loadable = require('./loadable-3b4436ea.js');
+const locale = require('./locale-c8a9eaf0.js');
+const observers = require('./observers-d4deb7de.js');
+const t9n = require('./t9n-386452e2.js');
+const ExpandToggle = require('./ExpandToggle-daa0f87c.js');
+const resources = require('./resources-d4d76af1.js');
+const debounce = require('./debounce-45353486.js');
+require('./guid-fd15b830.js');
+require('./browser-39ff1e63.js');
+require('./key-cae77b35.js');
+require('./resources-48795ad0.js');
+require('./resources-83af1a94.js');
 
 const CSS = {
     actionGroupEnd: "action-group--end",
@@ -177,7 +176,6 @@ const ActionBar = class {
             this.resizeObserver?.observe(el);
         }
         this.overflowActions();
-        conditionalSlot.connectConditionalSlotComponent(this);
     }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
@@ -186,7 +184,6 @@ const ActionBar = class {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        conditionalSlot.disconnectConditionalSlotComponent(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -227,7 +224,7 @@ const ActionBar = class {
         return (index.h("calcite-action-group", { class: CSS.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), index.h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), index.h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
     }
     render() {
-        return (index.h(index.Host, { key: 'ff6e365531a0ed2032864bb0777910c3932e9c6b', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { key: 'f12b2f455752a62ee32b65224bed385940135a49', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
+        return (index.h(index.Host, { key: 'ed00e867fb7fe71dc7456aeba2cd8a834529040a', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { key: '9891fee64f1c5d8bbe2283975816f29a06976a8e', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

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

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

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

@@ -1,25 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const conditionalSlot = require('./conditionalSlot-961cb966.js');
-const loadable = require('./loadable-1e343f4a.js');
-const locale = require('./locale-783be19a.js');
-const t9n = require('./t9n-5f0809e3.js');
-const resources$1 = require('./resources-ec8796cb.js');
-const dom = require('./dom-401c47fa.js');
-const resources = require('./resources-222a6fdf.js');
-require('./observers-dc37fb24.js');
-require('./browser-b9024aa0.js');
-require('./key-8032a9dc.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
+const index = require('./index-fa8af6d4.js');
+const loadable = require('./loadable-3b4436ea.js');
+const locale = require('./locale-c8a9eaf0.js');
+const t9n = require('./t9n-386452e2.js');
+const resources$1 = require('./resources-83af1a94.js');
+const dom = require('./dom-c64d16b4.js');
+const resources = require('./resources-48795ad0.js');
+require('./browser-39ff1e63.js');
+require('./key-cae77b35.js');
+require('./observers-d4deb7de.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.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;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-internal-action-group-columns:1}:host([columns=\"2\"]){--calcite-internal-action-group-columns:2}:host([columns=\"3\"]){--calcite-internal-action-group-columns:3}:host([columns=\"4\"]){--calcite-internal-action-group-columns:4}:host([columns=\"5\"]){--calcite-internal-action-group-columns:5}:host([columns=\"6\"]){--calcite-internal-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:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)), auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteActionGroupStyle0 = actionGroupCss;
@@ -80,12 +79,10 @@ const ActionGroup = class {
     connectedCallback() {
         locale.connectLocalized(this);
         t9n.connectMessages(this);
-        conditionalSlot.connectConditionalSlotComponent(this);
     }
     disconnectedCallback() {
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
-        conditionalSlot.disconnectConditionalSlotComponent(this);
     }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
@@ -104,7 +101,7 @@ const ActionGroup = class {
         return (index.h("calcite-action-menu", { expanded: expanded, flipPlacements: menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"]), hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start"), scale: scale }, index.h("calcite-action", { icon: resources.ICONS.menu, scale: scale, slot: resources$1.SLOTS.trigger, text: messages.more, textEnabled: expanded }), index.h("slot", { name: resources.SLOTS.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), index.h("slot", { name: resources.SLOTS.menuTooltip, slot: resources$1.SLOTS.tooltip })));
     }
     render() {
-        return (index.h("div", { key: '8143606c5745053f15140f34ff5ea375a683325f', "aria-label": this.label, class: resources.CSS.container, role: "group" }, index.h("slot", { key: 'e8c2821b9ce2e9d0293478989fc31d24f043f9c3' }), this.renderMenu()));
+        return (index.h("div", { key: 'b3b50e277ecf494a28cf718a32667bc99ceafa3c', "aria-label": this.label, class: resources.CSS.container, role: "group" }, index.h("slot", { key: '5bd099ee7a4b804186125ae2f6ca3ee9ec8c7fa2' }), this.renderMenu()));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

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

@@ -1 +1 @@
-{"file":"calcite-action-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,o0CAAo0C,CAAC;AAC51C,iCAAe,cAAc;;MCyChB,WAAW;;;;;;;;QA0MtB,gBAAW,GAAG,CAAC,KAAyC;YACtD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;SACrC,CAAC;QAEF,gCAA2B,GAAG,CAAC,KAAY;YACzC,IAAI,CAAC,cAAc,GAAGA,gCAA4B,CAAC,KAAK,CAAC,CAAC;SAC3D,CAAC;wBApMkC,KAAK;;sBAiB8C,UAAU;;wBAU9C,KAAK;kCASU,UAAU;;;;;;+BA2CjD,EAAE;;8BASH,KAAK;;IArF/B,eAAe;QACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IA+DD,gBAAgB;;KAEf;IAYD,qBAAqB;QACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;;IAcD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;;;;;;IAOD,iBAAiB;QACfC,uBAAgB,CAAC,IAAI,CAAC,CAAC;QACvBC,mBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,+CAA+B,CAAC,IAAI,CAAC,CAAC;KACvC;IAED,oBAAoB;QAClBC,0BAAmB,CAAC,IAAI,CAAC,CAAC;QAC1BC,sBAAkB,CAAC,IAAI,CAAC,CAAC;QACzBC,kDAAkC,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM,iBAAiB;QACrBC,+BAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAMC,iBAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQD,UAAU;QACR,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,aAAa,GACd,GAAG,IAAI,CAAC;QAET,QACEC,iCACE,QAAQ,EAAE,QAAQ,EAClB,cAAc,EACZ,kBAAkB,KAAK,MAAM,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAEzF,MAAM,EAAE,CAAC,cAAc,EACvB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,uBAAuB,EAAE,IAAI,CAAC,WAAW,EACzC,IAAI,EAAE,QAAQ,EACd,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,aAAa,KAAK,MAAM,KAAK,YAAY,GAAG,cAAc,GAAG,eAAe,CAAC,EACxF,KAAK,EAAE,KAAK,IAEZA,4BACE,IAAI,EAAEC,eAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAEC,iBAAiB,CAAC,OAAO,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,GACrB,EACFF,kBAAM,IAAI,EAAEG,eAAK,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAAI,EACjFH,kBAAM,IAAI,EAAEG,eAAK,CAAC,WAAW,EAAE,IAAI,EAAED,iBAAiB,CAAC,OAAO,GAAI,CAC9C,EACtB;KACH;IAED,MAAM;QACJ,QACEF,gFAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAEI,aAAG,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,IAC7DJ,oEAAQ,EACP,IAAI,CAAC,UAAU,EAAE,CACd,EACN;KACH;;;;;;;;;;;;;;","names":["slotChangeHasAssignedElement","updateMessages","componentFocusable","connectLocalized","connectMessages","connectConditionalSlotComponent","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpLoadableComponent","setUpMessages","setComponentLoaded","h","ICONS","ACTION_MENU_SLOTS","SLOTS","CSS"],"sources":["src/components/action-group/action-group.scss?tag=calcite-action-group&encapsulation=shadow","src/components/action-group/action-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-background-color: Specifies the component's background color.\n * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.\n * @prop --calcite-action-group-columns: When `layout` is `\"grid\"`, specifies the component's grid-template-columns.\n * @prop --calcite-action-group-gap: When `layout` is `\"grid\"`, specifies the component's gap.\n * @prop --calcite-action-group-padding: [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding.\n *\n */\n\n:host {\n  @extend %component-host;\n\n  @apply flex\n  flex-col\n  p-0;\n\n  background-color: transparent;\n  border-color: var(--calcite-action-group-border-color, var(--calcite-color-border-3));\n  border-style: solid;\n  border-width: 0;\n}\n\n.container {\n  @apply flex flex-col flex-grow;\n}\n\n:host([columns=\"1\"]) {\n  --calcite-internal-action-group-columns: 1;\n}\n:host([columns=\"2\"]) {\n  --calcite-internal-action-group-columns: 2;\n}\n:host([columns=\"3\"]) {\n  --calcite-internal-action-group-columns: 3;\n}\n:host([columns=\"4\"]) {\n  --calcite-internal-action-group-columns: 4;\n}\n:host([columns=\"5\"]) {\n  --calcite-internal-action-group-columns: 5;\n}\n:host([columns=\"6\"]) {\n  --calcite-internal-action-group-columns: 6;\n}\n\n:host(:first-child) {\n  @apply pt-0;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal\"]) .container {\n  @apply flex-row;\n}\n\n:host([layout=\"grid\"]) {\n  @apply grid;\n\n  .container {\n    @apply grid\n    place-content-stretch;\n    background-color: transparent;\n    grid-template-columns: repeat(\n      var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),\n      auto\n    );\n    gap: var(--calcite-action-group-gap, 1px);\n    padding: var(--calcite-action-group-gap, 1px);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { CalciteActionMenuCustomEvent } from \"../../components\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Layout, Scale } from \"../interfaces\";\nimport { FlipPlacement, LogicalPlacement, OverlayPositioning } from \"../../utils/floating-ui\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { Columns } from \"./interfaces\";\nimport { ActionGroupMessages } from \"./assets/action-group/t9n\";\nimport { ICONS, SLOTS, CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a group of `calcite-action`s.\n * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.\n */\n@Component({\n  tag: \"calcite-action-group\",\n  styleUrl: \"action-group.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionGroup\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    this.menuOpen = false;\n  }\n\n  /**\n   *  Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates the layout of the component.\n   *\n   * @deprecated Use the `layout` property on the component's parent instead.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout> = \"vertical\";\n\n  /**\n   * Indicates number of columns.\n   */\n  @Prop({ reflect: true }) columns: Columns;\n\n  /**\n   * When `true`, the `calcite-action-menu` is open.\n   */\n  @Prop({ reflect: true, mutable: true }) menuOpen = false;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Specifies the size of the `calcite-action-menu`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\n\n  /**\n   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.\n   */\n  @Prop() menuFlipPlacements: FlipPlacement[];\n\n  /**\n   * Determines where the action menu will be positioned.\n   */\n  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionGroupMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ActionGroupMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n  @Element() el: HTMLCalciteActionGroupElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionGroupMessages;\n\n  @State() hasMenuActions = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderMenu(): VNode {\n    const {\n      expanded,\n      menuOpen,\n      scale,\n      layout,\n      messages,\n      overlayPositioning,\n      hasMenuActions,\n      menuFlipPlacements,\n      menuPlacement,\n    } = this;\n\n    return (\n      <calcite-action-menu\n        expanded={expanded}\n        flipPlacements={\n          menuFlipPlacements ?? (layout === \"horizontal\" ? [\"top\", \"bottom\"] : [\"left\", \"right\"])\n        }\n        hidden={!hasMenuActions}\n        label={messages.more}\n        onCalciteActionMenuOpen={this.setMenuOpen}\n        open={menuOpen}\n        overlayPositioning={overlayPositioning}\n        placement={menuPlacement ?? (layout === \"horizontal\" ? \"bottom-start\" : \"leading-start\")}\n        scale={scale}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.more}\n          textEnabled={expanded}\n        />\n        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />\n        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />\n      </calcite-action-menu>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <div aria-label={this.label} class={CSS.container} role=\"group\">\n        <slot />\n        {this.renderMenu()}\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {\n    this.menuOpen = !!event.target.open;\n  };\n\n  handleMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}
+{"file":"calcite-action-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,o0CAAo0C,CAAC;AAC51C,iCAAe,cAAc;;MCoChB,WAAW;;;;;;;;QAsMtB,gBAAW,GAAG,CAAC,KAAyC;YACtD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;SACrC,CAAC;QAEF,gCAA2B,GAAG,CAAC,KAAY;YACzC,IAAI,CAAC,cAAc,GAAGA,gCAA4B,CAAC,KAAK,CAAC,CAAC;SAC3D,CAAC;wBAlMkC,KAAK;;sBAiB8C,UAAU;;wBAU9C,KAAK;kCASU,UAAU;;;;;;+BA2CjD,EAAE;;8BASH,KAAK;;IArF/B,eAAe;QACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IA+DD,gBAAgB;;KAEf;IAYD,qBAAqB;QACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;;IAcD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;KACjB;;;;;;IAOD,iBAAiB;QACfC,uBAAgB,CAAC,IAAI,CAAC,CAAC;QACvBC,mBAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,oBAAoB;QAClBC,0BAAmB,CAAC,IAAI,CAAC,CAAC;QAC1BC,sBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,MAAM,iBAAiB;QACrBC,+BAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAMC,iBAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQD,UAAU;QACR,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,aAAa,GACd,GAAG,IAAI,CAAC;QAET,QACEC,iCACE,QAAQ,EAAE,QAAQ,EAClB,cAAc,EACZ,kBAAkB,KAAK,MAAM,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAEzF,MAAM,EAAE,CAAC,cAAc,EACvB,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,uBAAuB,EAAE,IAAI,CAAC,WAAW,EACzC,IAAI,EAAE,QAAQ,EACd,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,aAAa,KAAK,MAAM,KAAK,YAAY,GAAG,cAAc,GAAG,eAAe,CAAC,EACxF,KAAK,EAAE,KAAK,IAEZA,4BACE,IAAI,EAAEC,eAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAEC,iBAAiB,CAAC,OAAO,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,GACrB,EACFF,kBAAM,IAAI,EAAEG,eAAK,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAAI,EACjFH,kBAAM,IAAI,EAAEG,eAAK,CAAC,WAAW,EAAE,IAAI,EAAED,iBAAiB,CAAC,OAAO,GAAI,CAC9C,EACtB;KACH;IAED,MAAM;QACJ,QACEF,gFAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAEI,aAAG,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,IAC7DJ,oEAAQ,EACP,IAAI,CAAC,UAAU,EAAE,CACd,EACN;KACH;;;;;;;;;;;;;;","names":["slotChangeHasAssignedElement","updateMessages","componentFocusable","connectLocalized","connectMessages","disconnectLocalized","disconnectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","h","ICONS","ACTION_MENU_SLOTS","SLOTS","CSS"],"sources":["src/components/action-group/action-group.scss?tag=calcite-action-group&encapsulation=shadow","src/components/action-group/action-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-background-color: Specifies the component's background color.\n * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.\n * @prop --calcite-action-group-columns: When `layout` is `\"grid\"`, specifies the component's grid-template-columns.\n * @prop --calcite-action-group-gap: When `layout` is `\"grid\"`, specifies the component's gap.\n * @prop --calcite-action-group-padding: [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding.\n *\n */\n\n:host {\n  @extend %component-host;\n\n  @apply flex\n  flex-col\n  p-0;\n\n  background-color: transparent;\n  border-color: var(--calcite-action-group-border-color, var(--calcite-color-border-3));\n  border-style: solid;\n  border-width: 0;\n}\n\n.container {\n  @apply flex flex-col flex-grow;\n}\n\n:host([columns=\"1\"]) {\n  --calcite-internal-action-group-columns: 1;\n}\n:host([columns=\"2\"]) {\n  --calcite-internal-action-group-columns: 2;\n}\n:host([columns=\"3\"]) {\n  --calcite-internal-action-group-columns: 3;\n}\n:host([columns=\"4\"]) {\n  --calcite-internal-action-group-columns: 4;\n}\n:host([columns=\"5\"]) {\n  --calcite-internal-action-group-columns: 5;\n}\n:host([columns=\"6\"]) {\n  --calcite-internal-action-group-columns: 6;\n}\n\n:host(:first-child) {\n  @apply pt-0;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal\"]) .container {\n  @apply flex-row;\n}\n\n:host([layout=\"grid\"]) {\n  @apply grid;\n\n  .container {\n    @apply grid\n    place-content-stretch;\n    background-color: transparent;\n    grid-template-columns: repeat(\n      var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),\n      auto\n    );\n    gap: var(--calcite-action-group-gap, 1px);\n    padding: var(--calcite-action-group-gap, 1px);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { CalciteActionMenuCustomEvent } from \"../../components\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Layout, Scale } from \"../interfaces\";\nimport { FlipPlacement, LogicalPlacement, OverlayPositioning } from \"../../utils/floating-ui\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { Columns } from \"./interfaces\";\nimport { ActionGroupMessages } from \"./assets/action-group/t9n\";\nimport { ICONS, SLOTS, CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a group of `calcite-action`s.\n * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.\n */\n@Component({\n  tag: \"calcite-action-group\",\n  styleUrl: \"action-group.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionGroup implements LoadableComponent, LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    this.menuOpen = false;\n  }\n\n  /**\n   *  Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates the layout of the component.\n   *\n   * @deprecated Use the `layout` property on the component's parent instead.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout> = \"vertical\";\n\n  /**\n   * Indicates number of columns.\n   */\n  @Prop({ reflect: true }) columns: Columns;\n\n  /**\n   * When `true`, the `calcite-action-menu` is open.\n   */\n  @Prop({ reflect: true, mutable: true }) menuOpen = false;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * Specifies the size of the `calcite-action-menu`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\n\n  /**\n   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.\n   */\n  @Prop() menuFlipPlacements: FlipPlacement[];\n\n  /**\n   * Determines where the action menu will be positioned.\n   */\n  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ActionGroupMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ActionGroupMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n  @Element() el: HTMLCalciteActionGroupElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionGroupMessages;\n\n  @State() hasMenuActions = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderMenu(): VNode {\n    const {\n      expanded,\n      menuOpen,\n      scale,\n      layout,\n      messages,\n      overlayPositioning,\n      hasMenuActions,\n      menuFlipPlacements,\n      menuPlacement,\n    } = this;\n\n    return (\n      <calcite-action-menu\n        expanded={expanded}\n        flipPlacements={\n          menuFlipPlacements ?? (layout === \"horizontal\" ? [\"top\", \"bottom\"] : [\"left\", \"right\"])\n        }\n        hidden={!hasMenuActions}\n        label={messages.more}\n        onCalciteActionMenuOpen={this.setMenuOpen}\n        open={menuOpen}\n        overlayPositioning={overlayPositioning}\n        placement={menuPlacement ?? (layout === \"horizontal\" ? \"bottom-start\" : \"leading-start\")}\n        scale={scale}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.more}\n          textEnabled={expanded}\n        />\n        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />\n        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />\n      </calcite-action-menu>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <div aria-label={this.label} class={CSS.container} role=\"group\">\n        <slot />\n        {this.renderMenu()}\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {\n    this.menuOpen = !!event.target.open;\n  };\n\n  handleMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}