@esri/calcite-components 2.9.0-next.2 → 2.9.0-next.20

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

@@ -1 +1 @@
-{"file":"calcite-dropdown-item.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ipJAAipJ,CAAC;AAC1qJ,kCAAe,eAAe;;MCqCjB,YAAY;;;;;;;;;wBAUa,KAAK;;;;;;;wBAyBU,KAAK;;6BA+CwB,QAAQ;qBAOjE,GAAG;;;;;;;;IArB1B,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;KAClB;;;;;;IAyBD,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEhE,MAAM,WAAW,IACf,qEACE,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,OAAO,EAAE,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,MAAM,EAC1D,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;QACF,MAAM,WAAW,IACf,6DAAM,KAAK,EAAE,GAAG,CAAC,WAAW,IAC1B,8DAAQ,CACH,CACR,CAAC;QACF,MAAM,SAAS,IACb,qEACE,KAAK,EAAE,GAAG,CAAC,OAAO,EAClB,OAAO,EAAE,WAAW,KAAK,KAAK,IAAI,WAAW,KAAK,MAAM,EACxD,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;QAEF,MAAM,cAAc,GAClB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO;cAC1B,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC;cACrC,IAAI,CAAC,SAAS;kBACZ,CAAC,WAAW,EAAE,WAAW,CAAC;kBAC1B,IAAI,CAAC,OAAO;sBACV,CAAC,WAAW,EAAE,SAAS,CAAC;sBACxB,WAAW,CAAC;QAEtB,MAAM,SAAS,GAAG,CAAC,IAAI,IACrB,cAAc,KAEd,uBACc,KAAK,EACjB,KAAK,EAAE,GAAG,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,cAAc,CACb,CACL,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI;cACjB,IAAI;cACJ,aAAa,KAAK,QAAQ;kBACxB,eAAe;kBACf,aAAa,KAAK,UAAU;sBAC1B,kBAAkB;sBAClB,UAAU,CAAC;QAEnB,MAAM,QAAQ,GAAG,aAAa,KAAK,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;QAChF,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,QACE,EAAC,IAAI,qEACW,QAAQ,gBACV,CAAC,IAAI,GAAG,KAAK,GAAG,EAAE,EAC9B,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE3B,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,QAAQ,IACtC,4DACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI;gBACrB,CAAC,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI;gBAC3B,CAAC,GAAG,GAAG,CAAC,SAAS,KAAK,KAAK,EAAE,GAAG,IAAI;gBACpC,CAAC,GAAG,CAAC,cAAc,GAAG,aAAa,KAAK,UAAU;gBAClD,CAAC,GAAG,CAAC,eAAe,GAAG,aAAa,KAAK,QAAQ;gBACjD,CAAC,GAAG,CAAC,aAAa,GAAG,aAAa,KAAK,MAAM;aAC9C,IAEA,aAAa,KAAK,MAAM,IACvB,oBACE,KAAK,EAAE,GAAG,CAAC,IAAI,EACf,IAAI,EAAE,aAAa,KAAK,UAAU,GAAG,OAAO,GAAG,cAAc,EAC7D,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,IACA,IAAI,EACP,SAAS,CACN,CACe,CAClB,EACP;KACH;;;;;;IAQgB,OAAO;QACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAGD,cAAc,CAAC,KAAoB;QACjC,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,GAAG,CAAC;YACT,KAAK,OAAO;gBACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACzB,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;iBACxB;gBACD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,mCAAmC,CAAC,IAAI,EAAE,CAAC;gBAChD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;gBACxE,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;gBACxE,MAAM;SACT;KACF;IAGD,wBAAwB,CAAC,KAAkB;QACzC,MAAM,mBAAmB,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAEtF,IAAI,mBAAmB,EAAE;YACvB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC;YAClE,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC;YAChE,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;;;IA4BO,UAAU;QAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;QACvE,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;KACF;IAEO,mBAAmB;QACzB,QAAQ,IAAI,CAAC,aAAa;YACxB,KAAK,UAAU;gBACb,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,qBAAqB,EAAE;oBAC1C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAChC;gBACD,MAAM;YAER,KAAK,QAAQ;gBACX,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,qBAAqB,EAAE;oBAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;iBACtB;qBAAM,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,CAAC,qBAAqB,EAAE;oBACrE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACvB;gBACD,MAAM;YAER,KAAK,MAAM;gBACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,MAAM;SACT;KACF;IAEO,iBAAiB;QACvB,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC;YAC1C,qBAAqB,EAAE,IAAI,CAAC,EAAE;YAC9B,sBAAsB,EAAE,IAAI,CAAC,qBAAqB;SACnD,CAAC,CAAC;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=calcite-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":[".container--s {\n  @apply text-n2h py-1;\n  padding-inline-end: theme(\"padding.2\");\n  padding-inline-start: theme(\"padding.6\");\n}\n\n.container--m {\n  @apply text-n1h py-2;\n  padding-inline-end: theme(\"padding.3\");\n  padding-inline-start: theme(\"padding.8\");\n}\n\n.container--l {\n  @apply text-0h py-2.5;\n  padding-inline-end: theme(\"padding.4\");\n  padding-inline-start: theme(\"padding.10\");\n}\n\n// none-selection mode\n.container--s.container--none-selection {\n  padding-inline-start: theme(\"padding.1\");\n  & .dropdown-link {\n    padding-inline-start: theme(\"padding.0\");\n  }\n}\n\n.container--m.container--none-selection {\n  padding-inline-start: theme(\"padding.2\");\n  & .dropdown-link {\n    padding-inline-start: theme(\"padding.0\");\n  }\n}\n\n.container--l.container--none-selection {\n  padding-inline-start: theme(\"padding.3\");\n  & .dropdown-link {\n    padding-inline-start: theme(\"padding.0\");\n  }\n}\n\n@mixin itemStyling {\n  @apply text-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n}\n\n:host {\n  @apply relative\n    flex\n    flex-grow\n    items-center;\n}\n\n.container {\n  @include itemStyling;\n  text-align: start;\n}\n\n.dropdown-item-content {\n  @apply flex-auto py-0.5;\n  padding-inline-end: theme(\"margin.auto\");\n  padding-inline-start: theme(\"margin.1\");\n}\n\n//focus\n:host,\n.container--link a {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-inset outline-none;\n}\n\n// when used as link move styling anchor\n.container--link {\n  @apply p-0;\n  & a {\n    @include itemStyling;\n  }\n}\n\n.container--s .dropdown-link {\n  @apply text-n2h py-1;\n  padding-inline-end: theme(\"padding.2\");\n  padding-inline-start: theme(\"padding.6\");\n}\n\n.container--m .dropdown-link {\n  @apply text-n1h py-2;\n  padding-inline-end: theme(\"padding.3\");\n  padding-inline-start: theme(\"padding.8\");\n}\n\n.container--l .dropdown-link {\n  @apply text-0h py-3;\n  padding-inline-end: theme(\"padding.4\");\n  padding-inline-start: theme(\"padding.10\");\n}\n\n:host(:hover:not([disabled])),\n:host(:active:not([disabled])) {\n  .container {\n    @apply bg-foreground-2 text-color-1 no-underline;\n  }\n\n  .container--link .dropdown-link {\n    @apply text-color-1;\n  }\n}\n\n:host(:active:not([disabled])) .container {\n  @apply bg-foreground-3;\n}\n\n:host(:focus) .container {\n  @apply text-color-1 no-underline;\n}\n\n:host([selected]) .container:not(.container--none-selection),\n:host([selected]) .container--link .dropdown-link {\n  @apply text-color-1 font-medium;\n  & calcite-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n// item icon\n.dropdown-item-icon {\n  @apply absolute\n    opacity-0\n    duration-150\n    ease-in-out;\n  transform: scale(0.9);\n}\n\n.container--s .dropdown-item-icon {\n  inset-inline-start: theme(\"spacing.1\");\n}\n\n.container--m .dropdown-item-icon {\n  inset-inline-start: theme(\"spacing.2\");\n}\n\n.container--l .dropdown-item-icon {\n  inset-inline-start: theme(\"spacing.3\");\n}\n\n:host(:hover:not([disabled])) .dropdown-item-icon {\n  color: theme(\"borderColor.color.1\");\n  @apply opacity-100;\n}\n\n:host([selected]) .dropdown-item-icon {\n  color: theme(\"backgroundColor.brand\");\n  @apply opacity-100;\n}\n\n// icon start & end\n.container--s {\n  .dropdown-item-icon-start {\n    margin-inline-end: theme(\"margin.2\");\n    margin-inline-start: theme(\"margin.1\");\n  }\n  .dropdown-item-icon-end {\n    margin-inline-start: theme(\"margin.2\");\n  }\n}\n\n.container--m {\n  .dropdown-item-icon-start {\n    margin-inline-end: theme(\"margin.3\");\n    margin-inline-start: theme(\"margin.1\");\n  }\n  .dropdown-item-icon-end {\n    margin-inline-start: theme(\"margin.3\");\n  }\n}\n\n.container--l {\n  .dropdown-item-icon-start {\n    margin-inline-end: theme(\"margin.4\");\n    margin-inline-start: theme(\"margin.1\");\n  }\n  .dropdown-item-icon-end {\n    margin-inline-start: theme(\"margin.4\");\n  }\n}\n\n@include base-component();\n@include disabled();\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 { toAriaBoolean } from \"../../utils/dom\";\nimport { ItemKeyboardEvent } from \"../dropdown/interfaces\";\nimport { RequestedItem } from \"../dropdown-group/interfaces\";\nimport { FlipContext, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n */\n@Component({\n  tag: \"calcite-dropdown-item\",\n  styleUrl: \"dropdown-item.scss\",\n  shadow: true,\n})\nexport class DropdownItem implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   *  Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   *\n   * Determines if the component will render as an anchor.\n   */\n  @Prop({ reflect: true }) href: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the relationship to the linked document defined in `href`. */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, the component is selected. */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** Specifies the frame or window to open the linked document. */\n  @Prop({ reflect: true }) target: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the component is selected. */\n  @Event({ cancelable: false }) calciteDropdownItemSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalDropdownItemSelect: EventEmitter<RequestedItem>;\n\n  /** @internal */\n  @Event({ cancelable: false })\n  calciteInternalDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;\n\n  /** @internal */\n  @Event({ cancelable: false }) calciteInternalDropdownCloseRequest: EventEmitter<void>;\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\n    this.el?.focus();\n  }\n\n  /**\n   * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`:\n   * - `multiple` allows any number of selected items,\n   * - `single` allows only one selection (default),\n   * - `none` doesn't allow for any selection.\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"none\" | \"single\" | \"multiple\", SelectionMode> = \"single\";\n\n  /**\n   * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n    this.initialize();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  connectedCallback(): void {\n    this.initialize();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const { href, selectionMode, label, iconFlipRtl, scale } = this;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"start\" || iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n    const contentNode = (\n      <span class={CSS.itemContent}>\n        <slot />\n      </span>\n    );\n    const iconEndEl = (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"end\" || iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const slottedContent =\n      this.iconStart && this.iconEnd\n        ? [iconStartEl, contentNode, iconEndEl]\n        : this.iconStart\n          ? [iconStartEl, contentNode]\n          : this.iconEnd\n            ? [contentNode, iconEndEl]\n            : contentNode;\n\n    const contentEl = !href ? (\n      slottedContent\n    ) : (\n      <a\n        aria-label={label}\n        class={CSS.link}\n        href={href}\n        ref={(el) => (this.childLink = el)}\n        rel={this.rel}\n        tabIndex={-1}\n        target={this.target}\n      >\n        {slottedContent}\n      </a>\n    );\n\n    const itemRole = href\n      ? null\n      : selectionMode === \"single\"\n        ? \"menuitemradio\"\n        : selectionMode === \"multiple\"\n          ? \"menuitemcheckbox\"\n          : \"menuitem\";\n\n    const itemAria = selectionMode !== \"none\" ? toAriaBoolean(this.selected) : null;\n    const { disabled } = this;\n\n    return (\n      <Host\n        aria-checked={itemAria}\n        aria-label={!href ? label : \"\"}\n        role={itemRole}\n        tabIndex={disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={{\n              [CSS.container]: true,\n              [CSS.containerLink]: !!href,\n              [`${CSS.container}--${scale}`]: true,\n              [CSS.containerMulti]: selectionMode === \"multiple\",\n              [CSS.containerSingle]: selectionMode === \"single\",\n              [CSS.containerNone]: selectionMode === \"none\",\n            }}\n          >\n            {selectionMode !== \"none\" ? (\n              <calcite-icon\n                class={CSS.icon}\n                icon={selectionMode === \"multiple\" ? \"check\" : \"bullet-point\"}\n                scale={getIconScale(this.scale)}\n              />\n            ) : null}\n            {contentEl}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"click\") onClick(): void {\n    this.emitRequestedItem();\n  }\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.emitRequestedItem();\n        if (this.href) {\n          this.childLink.click();\n        }\n        event.preventDefault();\n        break;\n      case \"Escape\":\n        this.calciteInternalDropdownCloseRequest.emit();\n        event.preventDefault();\n        break;\n      case \"Tab\":\n        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });\n        break;\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n        event.preventDefault();\n        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });\n        break;\n    }\n  }\n\n  @Listen(\"calciteInternalDropdownItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);\n\n    if (parentEmittedChange) {\n      this.requestedDropdownGroup = event.detail.requestedDropdownGroup;\n      this.requestedDropdownItem = event.detail.requestedDropdownItem;\n      this.determineActiveItem();\n    }\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDropdownItemElement;\n\n  /** id of containing group */\n  private parentDropdownGroupEl: HTMLCalciteDropdownGroupElement;\n\n  /** requested group */\n  private requestedDropdownGroup: HTMLCalciteDropdownGroupElement;\n\n  /** requested item */\n  private requestedDropdownItem: HTMLCalciteDropdownItemElement;\n\n  /** if href is requested, track the rendered child link*/\n  private childLink: HTMLAnchorElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private initialize(): void {\n    this.parentDropdownGroupEl = this.el.closest(\"calcite-dropdown-group\");\n    if (this.selectionMode === \"none\") {\n      this.selected = false;\n    }\n  }\n\n  private determineActiveItem(): void {\n    switch (this.selectionMode) {\n      case \"multiple\":\n        if (this.el === this.requestedDropdownItem) {\n          this.selected = !this.selected;\n        }\n        break;\n\n      case \"single\":\n        if (this.el === this.requestedDropdownItem) {\n          this.selected = true;\n        } else if (this.requestedDropdownGroup === this.parentDropdownGroupEl) {\n          this.selected = false;\n        }\n        break;\n\n      case \"none\":\n        this.selected = false;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteDropdownItemSelect.emit();\n    this.calciteInternalDropdownItemSelect.emit({\n      requestedDropdownItem: this.el,\n      requestedDropdownGroup: this.parentDropdownGroupEl,\n    });\n  }\n}\n"],"version":3}
+{"file":"calcite-dropdown-item.js","mappings":"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","names":[],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=calcite-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@mixin itemStyling {\n  @apply text-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n}\n\n:host {\n  @apply relative\n    flex\n    flex-grow\n    items-center\n    focus-base;\n}\n\n.container {\n  @include itemStyling;\n  @apply text-start;\n\n  & a {\n    @include itemStyling;\n    @apply focus-base;\n  }\n}\n\n.dropdown-item-content {\n  @apply flex-auto py-0.5;\n}\n\n// item icon\n.dropdown-item-icon {\n  @apply relative\n    opacity-0\n    duration-150\n    ease-in-out;\n  transform: scale(0.9);\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    @apply text-n2h py-1 px-2;\n  }\n\n  .dropdown-item-icon,\n  .dropdown-item-icon--start {\n    padding-inline-end: var(--calcite-spacing-sm);\n  }\n\n  .dropdown-item-icon--end {\n    padding-inline-start: var(--calcite-spacing-sm);\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply text-n1h py-2 px-3;\n  }\n\n  .dropdown-item-icon,\n  .dropdown-item-icon--start {\n    padding-inline-end: var(--calcite-spacing-md);\n  }\n\n  .dropdown-item-icon--end {\n    padding-inline-start: var(--calcite-spacing-md);\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply text-0h py-2.5 px-4;\n  }\n\n  .dropdown-item-icon,\n  .dropdown-item-icon--start {\n    padding-inline-end: var(--calcite-spacing-xl);\n  }\n\n  .dropdown-item-icon--end {\n    padding-inline-start: var(--calcite-spacing-xl);\n  }\n}\n\n//focus\n:host(:focus) {\n  @apply focus-inset outline-none;\n\n  .container {\n    @apply text-color-1 no-underline;\n  }\n}\n\n:host(:hover:not([disabled])),\n:host(:active:not([disabled])) {\n  .container {\n    @apply bg-foreground-2 text-color-1 no-underline;\n  }\n\n  .dropdown-link {\n    @apply text-color-1;\n  }\n}\n\n:host(:active:not([disabled])) .container {\n  @apply bg-foreground-3;\n}\n\n:host([selected]) .container:not(.container--none-selection),\n:host([selected]) .dropdown-link {\n  @apply text-color-1 font-medium;\n  & calcite-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host(:hover:not([disabled])) .dropdown-item-icon {\n  color: theme(\"borderColor.color.1\");\n  @apply opacity-100;\n}\n\n:host([selected]) .dropdown-item-icon {\n  color: theme(\"backgroundColor.brand\");\n  @apply opacity-100;\n}\n\n@include base-component();\n@include disabled();\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 { toAriaBoolean } from \"../../utils/dom\";\nimport { ItemKeyboardEvent } from \"../dropdown/interfaces\";\nimport { RequestedItem } from \"../dropdown-group/interfaces\";\nimport { FlipContext, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n */\n@Component({\n  tag: \"calcite-dropdown-item\",\n  styleUrl: \"dropdown-item.scss\",\n  shadow: true,\n})\nexport class DropdownItem implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   *  Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   *\n   * Determines if the component will render as an anchor.\n   */\n  @Prop({ reflect: true }) href: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the relationship to the linked document defined in `href`. */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, the component is selected. */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** Specifies the frame or window to open the linked document. */\n  @Prop({ reflect: true }) target: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the component is selected. */\n  @Event({ cancelable: false }) calciteDropdownItemSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalDropdownItemSelect: EventEmitter<RequestedItem>;\n\n  /** @internal */\n  @Event({ cancelable: false })\n  calciteInternalDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;\n\n  /** @internal */\n  @Event({ cancelable: false }) calciteInternalDropdownCloseRequest: EventEmitter<void>;\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\n    this.el?.focus();\n  }\n\n  /**\n   * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`:\n   * - `multiple` allows any number of selected items,\n   * - `single` allows only one selection (default),\n   * - `none` doesn't allow for any selection.\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"none\" | \"single\" | \"multiple\", SelectionMode> = \"single\";\n\n  /**\n   * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n    this.initialize();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  connectedCallback(): void {\n    this.initialize();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const { href, selectionMode, label, iconFlipRtl } = this;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"start\" || iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n    const contentNode = (\n      <span class={CSS.itemContent}>\n        <slot />\n      </span>\n    );\n    const iconEndEl = (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"end\" || iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const slottedContent =\n      this.iconStart && this.iconEnd\n        ? [iconStartEl, contentNode, iconEndEl]\n        : this.iconStart\n          ? [iconStartEl, contentNode]\n          : this.iconEnd\n            ? [contentNode, iconEndEl]\n            : contentNode;\n\n    const contentEl = !href ? (\n      slottedContent\n    ) : (\n      <a\n        aria-label={label}\n        class={CSS.link}\n        href={href}\n        ref={(el) => (this.childLink = el)}\n        rel={this.rel}\n        tabIndex={-1}\n        target={this.target}\n      >\n        {slottedContent}\n      </a>\n    );\n\n    const itemRole = href\n      ? null\n      : selectionMode === \"single\"\n        ? \"menuitemradio\"\n        : selectionMode === \"multiple\"\n          ? \"menuitemcheckbox\"\n          : \"menuitem\";\n\n    const itemAria = selectionMode !== \"none\" ? toAriaBoolean(this.selected) : null;\n    const { disabled } = this;\n\n    return (\n      <Host\n        aria-checked={itemAria}\n        aria-label={!href ? label : \"\"}\n        role={itemRole}\n        tabIndex={disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={{\n              [CSS.container]: true,\n              [CSS.containerNone]: selectionMode === \"none\",\n            }}\n          >\n            {selectionMode !== \"none\" ? (\n              <calcite-icon\n                class={CSS.icon}\n                icon={selectionMode === \"multiple\" ? \"check\" : \"bullet-point\"}\n                scale={getIconScale(this.scale)}\n              />\n            ) : null}\n            {contentEl}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"click\") onClick(): void {\n    this.emitRequestedItem();\n  }\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.emitRequestedItem();\n        if (this.href) {\n          this.childLink.click();\n        }\n        event.preventDefault();\n        break;\n      case \"Escape\":\n        this.calciteInternalDropdownCloseRequest.emit();\n        event.preventDefault();\n        break;\n      case \"Tab\":\n        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });\n        break;\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n        event.preventDefault();\n        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });\n        break;\n    }\n  }\n\n  @Listen(\"calciteInternalDropdownItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);\n\n    if (parentEmittedChange) {\n      this.requestedDropdownGroup = event.detail.requestedDropdownGroup;\n      this.requestedDropdownItem = event.detail.requestedDropdownItem;\n      this.determineActiveItem();\n    }\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDropdownItemElement;\n\n  /** id of containing group */\n  private parentDropdownGroupEl: HTMLCalciteDropdownGroupElement;\n\n  /** requested group */\n  private requestedDropdownGroup: HTMLCalciteDropdownGroupElement;\n\n  /** requested item */\n  private requestedDropdownItem: HTMLCalciteDropdownItemElement;\n\n  /** if href is requested, track the rendered child link*/\n  private childLink: HTMLAnchorElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private initialize(): void {\n    this.parentDropdownGroupEl = this.el.closest(\"calcite-dropdown-group\");\n    if (this.selectionMode === \"none\") {\n      this.selected = false;\n    }\n  }\n\n  private determineActiveItem(): void {\n    switch (this.selectionMode) {\n      case \"multiple\":\n        if (this.el === this.requestedDropdownItem) {\n          this.selected = !this.selected;\n        }\n        break;\n\n      case \"single\":\n        if (this.el === this.requestedDropdownItem) {\n          this.selected = true;\n        } else if (this.requestedDropdownGroup === this.parentDropdownGroupEl) {\n          this.selected = false;\n        }\n        break;\n\n      case \"none\":\n        this.selected = false;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteDropdownItemSelect.emit();\n    this.calciteInternalDropdownItemSelect.emit({\n      requestedDropdownItem: this.el,\n      requestedDropdownGroup: this.parentDropdownGroupEl,\n    });\n  }\n}\n"],"version":3}

package/dist/components/calcite-dropdown.js

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

package/dist/components/calcite-fab.js

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

package/dist/components/calcite-filter.js

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

package/dist/components/calcite-flow-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';
@@ -26,6 +26,8 @@ const ICONS = {
 };
 const SLOTS = {
     actionBar: "action-bar",
+    contentTop: "content-top",
+    contentBottom: "content-bottom",
     headerActionsStart: "header-actions-start",
     headerActionsEnd: "header-actions-end",
     headerMenuActions: "header-menu-actions",
@@ -174,7 +176,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, } = this;
-        return (h(Host, { key: 'bc389d11e0967785a37b7cc943eb2759ba6b387d' }, h(InteractiveContainer, { key: '429de3294431e151b7e9ce3ac804aa54ed8ca136', disabled: disabled }, h("calcite-panel", { key: '92ce7b01605a8d5a2a3d4c261acf8208c62e0bc5', closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef }, this.renderBackButton(), h("slot", { key: 'ce7fde074940ba4682f8fb2fb095b31c149a0508', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '91ea539db5e395afbb89018c30302dddaa812950', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '874de66d9caf644e6bd9e269336a1b7393ef5457', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '57055cb0579efe0f0cbc35b41e23949a075ad375', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'afd616ff8ff6b7957062530a55dfa034ccbfc4e9', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '19a4c82531c19b179d04e9965147a9839c8639bc', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'aec586df08cfa02e8259b2c11dc13a4635098915', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: 'c4a11605a7cae83b16352fa53b2fe8d015e64681', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '93c0a287ae64c54a4c943e232924838dff1bd4be' })))));
+        return (h(Host, { key: 'ccb470196c73156160ca37504bfa80465afcbaca' }, h(InteractiveContainer, { key: 'de7635e66d3a633e0887a255382e6be7f4756885', disabled: disabled }, h("calcite-panel", { key: '6a2274d35eb972055c96f90166da763ed62bd1b3', closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef }, this.renderBackButton(), h("slot", { key: '8b49efe6068d9f95229057d8c70105e6406aca3f', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '1e1e9b50868fcf1ef21fc5559b7f947ed03e7ecd', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '2baa09cf14039ab4e6f5c1611c721c000424c8ea', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'd42339bd5033bc3e603ee8f2308901b1e1348378', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '0f27efdced2b4b6ad47c984d169f0ec152a0d04e', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '41e208260ceb203ea045e6264137235be2fa21da', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: '5454482b484598a76ba74109a36d1a330fe8d2e7', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '3204234c0cbff2ebee7f1848e3b07160ae2bd14c', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '87d1f991a3d12ec7b5b8d829334d68f68bc82f19', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: '672fca101390f2f414e614b8a4c86c932bbfa901', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: 'a1589a501927413a4f9cf4044f55b214bf2aa583' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

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

@@ -1 +1 @@
-{"file":"calcite-flow-item.js","mappings":"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","names":["PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto overflow-hidden;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-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 { getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\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<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\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: FlowItemMessages;\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   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        ref={this.setBackRef}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n      overlayPositioning,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handlePanelClose}\n            onCalcitePanelScroll={this.handlePanelScroll}\n            onCalcitePanelToggle={this.handlePanelToggle}\n            overlayPositioning={overlayPositioning}\n            ref={this.setContainerRef}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-flow-item.js","mappings":"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","names":["PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  contentTop: \"content-top\",\n  contentBottom: \"content-bottom\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto overflow-hidden;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-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 { getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\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<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\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: FlowItemMessages;\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   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        ref={this.setBackRef}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n      overlayPositioning,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handlePanelClose}\n            onCalcitePanelScroll={this.handlePanelScroll}\n            onCalcitePanelToggle={this.handlePanelToggle}\n            overlayPositioning={overlayPositioning}\n            ref={this.setContainerRef}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />\n            <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-flow.js

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

package/dist/components/calcite-graph.js

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

package/dist/components/calcite-handle.js

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

package/dist/components/calcite-icon.js

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

package/dist/components/calcite-inline-editable.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted } from './dom.js';
@@ -166,12 +166,12 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         updateHostInteraction(this);
     }
     render() {
-        return (h(InteractiveContainer, { key: '13a425b04bd57b14d4d1a7705f79f3e1f86c2e5a', disabled: this.disabled }, h("div", { key: '29b3c35c384d6044bcfc4f94d9a153dde2842656', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '1cf670abd3361519ee80465efd198d2217b4a1e2', class: CSS.inputWrapper }, h("slot", { key: '86d343f2dbd9bdd4803b8552696530751945da69' })), h("div", { key: '87e0fe412f9a4e39f2d427601ae84f29f33249cc', class: CSS.controlsWrapper }, h("calcite-button", { key: '1a773397c56c219b8f0d4f40d17cebd183e7ebce', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (h(InteractiveContainer, { key: '47d77961bb70f18fdb31994c043a013f1400f892', disabled: this.disabled }, h("div", { key: 'c711aa022f759abdc6cc65184fb92d36ccbb629c', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '21239055816c853b059f700a318fb2b772fb78f5', class: CSS.inputWrapper }, h("slot", { key: 'ca2ce871db7386f9e32264e9555f7a08eac7b9e0' })), h("div", { key: '31cad4378d3f71301dc3b5803a9b34a08e394b3c', class: CSS.controlsWrapper }, h("calcite-button", { key: '942282672ebad6e33cddf76433b490ded2db7dcb', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            h("div", { key: 'ceb4edaaf9484b4faa690e9350de53e33f98c6ea', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: '2b38d2b71b47b68b48da47af519714b932216ffc', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            h("calcite-button", { key: '729774a3dfdd93991478ac9f3260cdd9b04cd177', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            h("div", { key: 'b47f75ed7a102ba84ea82b5dd483bda894c49dc9', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: '590dddf42b7c99f00f4a39af4e2e0eb4adf54697', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            h("calcite-button", { key: 'bfbe94acd5313a70558bd6a6ad48127f4b63deed', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------

package/dist/components/calcite-input-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { j as datePartsFromISO, k as datePartsFromLocalizedString, l as dateFromLocalizedString, i as inRange, a as dateToISO, d as dateFromISO, b as dateFromRange } from './date.js';
@@ -540,23 +540,23 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (h(Host, { key: '9b4fed74209f0ce20402ee8a48afd7ebf2d2e796', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '1877b35c7266d6a31fd969b12505d6c33f180801', disabled: this.disabled }, this.localeData && (h("div", { key: '98a3c9332f16b7e49b3580057bd1dda0e8f419b1', class: CSS.inputContainer }, h("div", { key: 'd0803f7aad9ad0ab5789a9c0a111d590e0195267', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, h("calcite-input-text", { key: 'f35b70fbd2c2c069035ed2d68f449c81c4a3d239', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+        return (h(Host, { key: '16158c7a391a55d79ce3622b725e1e852b5e6ebe', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '89ebc751cfb78e050461d0e06f54cef6e16cf38f', disabled: this.disabled }, this.localeData && (h("div", { key: '31770fe6a1c1910a68c7031582ab7bafcce77f91', class: CSS.inputContainer }, h("div", { key: 'a944079bd926f5c89a62363178b4c699692f8d64', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, h("calcite-input-text", { key: '724f959486cbc5e47903854e657446b740c05330', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS.input]: true,
                 [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { key: 'f761ab93c43b94a3b4f8ba6a8d205d9575640934', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { key: '59c2b05c659594a6b1df048202a7fcd68ec750fa', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { key: '585a78e0fc721e98c0336a2c81cd86ec0aef4846', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { key: '19b54a3cb53e887ad5ba53040d1d55b5934ecd8b', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS.menu]: true,
                 [CSS.menuActive]: this.open,
-            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, h("div", { key: '77621e3bdc7d55e49049bb4c9834687de6103f55', class: {
+            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, h("div", { key: 'f14acc1679ab77d422322440d7620143a140040c', class: {
                 [CSS.calendarWrapper]: true,
                 [CSS.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, h("calcite-date-picker", { key: 'e64f2e1e099534b9b36473c1656a6325bd54103f', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { key: 'fc6365bdaeb44666c6f867f0c6e4d31c4c506016', class: CSS.horizontalArrowContainer }, h("calcite-icon", { key: '32b3bf8acb63754f9d35c33fcfba10f2a89cabfd', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { key: '5a8ab25a202538b6705ba7c2eda48166c15c875b', class: CSS.verticalArrowContainer }, h("calcite-icon", { key: 'c8add8431f5b495c9df652092aedef0c4af69a63', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { key: 'c7bffa6f5244adaf3ce7458f3b79ccbf696941df', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, h("calcite-input-text", { key: '70190770870e3855018563d73db17e77f963aab1', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            }, ref: this.setTransitionEl }, h("calcite-date-picker", { key: '71750c9f9a7be9b7bbfaf7bc8eb01f61ab031c2f', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { key: 'f69e2115f0c24ac0c474fc967b2f7976a0477c02', class: CSS.horizontalArrowContainer }, h("calcite-icon", { key: 'd7f667f50cf954dc1197e210f8dd1acd280e90db', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { key: 'f0179c9c75aa2747ecd61bda4a9bc451cfd035d3', class: CSS.verticalArrowContainer }, h("calcite-icon", { key: '42d800d083bb50160f36bf6f9756979395339e0c', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { key: 'a6aef465ff68ab77e1075ee3a560ff6e5bd9873a', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, h("calcite-input-text", { key: '9d05c537e569613b2ccb0749fb0847a2b233165f', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS.input]: true,
                 [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { key: '89fb0548fac9923bc16666355b4c1a67e618dcbd', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { key: '214e36f45d2514e759c8bf25a65ad985ab16892c', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (

package/dist/components/calcite-input-message.js

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

package/dist/components/calcite-input-number.js

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

package/dist/components/calcite-input-text.js

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

package/dist/components/calcite-input-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -1832,7 +1832,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     // --------------------------------------------------------------------------
     render() {
         const { disabled, messages, readOnly, dialogId } = this;
-        return (h(Host, { key: '3c4ce48e13ea2b9bc2034cb984a85c5b99ac909f', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'bbbe79fd3df0b1920cf2e9aa6cb4cc449b621a4d', disabled: this.disabled }, h("div", { key: '97592424f5ece835a4c71114a126681e321f7814', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: '793c86fea241371df525bd4f7f02da867429408c', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputAndTransitionEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: '00bfbe56032283d0e1eb3c2099a21ea4b3a99e57', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { key: 'f1a876fc5a0903e4b0712e40c2ecb1af9d57c083', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), h(HiddenFormInputSlot, { key: 'f1847c92df1ada185678fc56eb85b51aa6099bd2', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (h(Host, { key: 'c7138b698cba58f78ab6b654c5b31d203ea82f7e', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'ea2e9d6040abb218626c61ce104d2df817ae115f', disabled: this.disabled }, h("div", { key: '6a8e75a764c744faf28e55efb9f9ff31e833dd80', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: 'e4798cfe29209882c69a6b766467fba35b72c5a2', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputAndTransitionEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: 'fe04a9bed369f196fb6a00feb1e36b558f3d090a', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { key: '4066d2fb3e57b5050a75f4f7826410e60c1aa526', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), h(HiddenFormInputSlot, { key: '4c0aa007739552cc40d7256357cdc600a8c1b7ef', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));

package/dist/components/calcite-input-time-zone.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectLabel, d as disconnectLabel } from './label2.js';
@@ -342,11 +342,11 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: '80390d6f555967845c57683286d3bc7a467e986d' }, h(InteractiveContainer, { key: 'b2d3bcc8f1ca941fb73bb503e36e06eed541ea48', disabled: this.disabled }, h("calcite-combobox", { key: '0134c8e89af01c1854ec36185a4eda8d8b92cb91', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.timeZoneItems.map((group) => {
+        return (h(Host, { key: '240ec55973f3b514109f4f7b37e180c50904396c' }, h(InteractiveContainer, { key: 'dd354cbb64a9207d5a8a76c8506addc4ad7a6cba', disabled: this.disabled }, h("calcite-combobox", { key: '5bcf50d77eedd614eeaa1884a77fa7c23549635c', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
             const { label, value } = group;
             return (h("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
-        })), h(HiddenFormInputSlot, { key: 'a596f12a80ca9bb6978d97a9083c346b66e919f6', component: this }))));
+        })), h(HiddenFormInputSlot, { key: '8e430121c67530bded9a9060dea8f4d4f1de5457', component: this }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/components/calcite-input.js

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

package/dist/components/calcite-label.js

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

package/dist/components/calcite-link.js

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

package/dist/components/calcite-list-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -54,7 +54,7 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     // --------------------------------------------------------------------------
     render() {
         const { disabled, heading } = this;
-        return (h(Host, { key: 'aced6e7f4e0f88658a55973c6451bd3ade9a1095' }, h(InteractiveContainer, { key: '6a7e77734cc737dfc7779c38f958e23ad19da06a', disabled: disabled }, h("tr", { key: '702a28ae4b478501503ab647fc46c33f25c1e8f7', class: CSS.container }, h("td", { key: '24f50d9130578bbac482ad2dce2777c962f19cc2', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: '67ff643701086e093115a93eca5cdb3e1c6559d5', onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { key: '72b362e6538638b434eaac9f4295059ab7407d2c' }, h(InteractiveContainer, { key: 'b6a3ad744cfdce9fd2e87b4e66e1ae570998231c', disabled: disabled }, h("tr", { key: '3abe960e3c55dc41c0ee098feb658127795a7204', class: CSS.container }, h("td", { key: '02a7a0797bee8da0ba6f45d8fd45b2285c7710ac', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: 'ed7a1afcaadd1b9071900f5ab6b032aca3a1deb7', onSlotchange: this.handleDefaultSlotChange }))));
     }
     get el() { return this; }
     static get style() { return CalciteListItemGroupStyle0; }

package/dist/components/calcite-list-item.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { d as slotChangeHasAssignedElement, B as getFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom.js';
+import { d as slotChangeHasAssignedElement, C as getFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
@@ -395,13 +395,13 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (h(Host, { key: 'ca528a359b955dfd237ca4ec6ea44bcaf06cef13' }, h(InteractiveContainer, { key: 'e0bb67bf10210a5055b0cfa227b77b1257d581f8', disabled: disabled }, h("div", { key: 'bac03d90689c992995fcb2627c6970d3838439be', class: { [CSS.wrapper]: true, [CSS.wrapperBordered]: bordered } }, h("tr", { key: '8b8184d7f6f150ed4d333bd7b5ad4db8994556e2', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (h(Host, { key: '16f6ec1a905814658f476cd1b1e267c789049c70' }, h(InteractiveContainer, { key: 'ee4cc1488a237e8cb25d30d3d4f3925972745fec', disabled: disabled }, h("div", { key: 'f8a5f0520817d8243e9b6fbc5c8467c727b72d52', class: { [CSS.wrapper]: true, [CSS.wrapperBordered]: bordered } }, h("tr", { key: 'b2dd6b114bea5f5f10e7bfcfd1a9d40d9ee4b3b1', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS.container]: true,
                 [CSS.containerHover]: true,
                 [CSS.containerBorder]: showBorder,
                 [CSS.containerBorderSelected]: borderSelected,
                 [CSS.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", tabIndex: active ? 0 : -1 }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom()), h("div", { key: '60b5b2d250ba72b3c821801856ed780ec0081b7f', class: CSS.indent }, this.renderDefaultContainer()))));
+            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", tabIndex: active ? 0 : -1 }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom()), h("div", { key: '43f56fd461303153e1b6311c44a5597b930b118d', class: CSS.indent }, this.renderDefaultContainer()))));
     }
     emitCalciteInternalListItemToggle() {
         this.calciteInternalListItemToggle.emit();

package/dist/components/calcite-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
@@ -402,7 +402,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, } = this;
-        return (h(InteractiveContainer, { key: 'a9ca5e6a4f835c3d88ef153016afc35fef1d2e2f', disabled: this.disabled }, h("div", { key: '604bdfa4b7a66572817d486623f0e73179a50814', class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { key: 'c4825209341da04a9815634e9287eeb367649f52', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", { class: CSS.sticky }, h("tr", null, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { key: '5045b9404be099fd2b64d79db48cd6844fbe2a48', class: CSS.tableContainer }, h("slot", { key: 'ec7f468b24bdd0262c97731950ef3482e2f4e69b', onSlotchange: this.handleDefaultSlotChange }))), h("div", { key: '8219e522fd2b22dcc7d02ed65b90323a7b6e33fd', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, h("slot", { key: '274d4c87840df0c0c078080053c3371141f34004', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+        return (h(InteractiveContainer, { key: 'b452cef2f749d331f569ca9a46af9c72017f2eed', disabled: this.disabled }, h("div", { key: 'c43a5ce24d7954194c48f6220a3ac6589214671b', class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { key: 'd9d8e7472334bd7738b3252883947d0190071853', "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", { class: CSS.sticky }, h("tr", null, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { key: '47c586b403bafc6e2c69515ea0648720ad492bc0', class: CSS.tableContainer }, h("slot", { key: 'c504daf59190b78c94ec03898556ffffc5bd7ec5', onSlotchange: this.handleDefaultSlotChange }))), h("div", { key: 'da507415d70da415e5c1f49dd305f0c77097b4cf', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, h("slot", { key: '4ecb6dc9a2bc0b0dd26ee9bda042fcefa77ea75e', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //

package/dist/components/calcite-loader.js

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