@esri/calcite-components 2.6.0-next.1 → 2.6.0-next.2

package/dist/components/calcite-menu-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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, a as getElementDir } from './dom.js';
@@ -34,7 +34,7 @@ const CSS = {
     textContainer: "text-container",
 };
 
-const menuItemCss = ":host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.content:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content:active{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-color-text-1);border-inline-start:1px solid var(--calcite-color-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-color-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const menuItemCss = ":host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.content:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content:active{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-color-text-1);border-inline-start:1px solid var(--calcite-color-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-color-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
 const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"calcite-menu-item.js","mappings":"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","names":["CalciteMenuItem"],"sources":["src/components/menu-item/resources.ts","src/components/menu-item/menu-item.scss?tag=calcite-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  content: \"content\",\n  dropdownVertical: \"dropdown--vertical\",\n  dropdownMenuItems: \"dropdown-menu-items\",\n  dropdownAction: \"dropdown-action\",\n  layoutVertical: \"layout--vertical\",\n  hoverHrefIcon: \"hover-href-icon\",\n  icon: \"icon\",\n  iconBreadcrumb: \"icon--breadcrumb\",\n  iconDropdown: \"icon--dropdown\",\n  iconEnd: \"icon--end\",\n  iconStart: \"icon--start\",\n  isParentVertical: \"parent--vertical\",\n  itemContent: \"item-content\",\n  open: \"open\",\n  nested: \"nested\",\n  textContainer: \"text-container\",\n};\n",":host {\n  @apply flex\n  items-center\n  relative\n  box-border;\n  flex-shrink: 0;\n  & .container,\n  & .item-content,\n  & .content {\n    min-block-size: theme(\"spacing.12\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply w-full;\n}\n\n:host(:not([layout=\"vertical\"])) {\n  @apply h-full;\n}\n\n.container,\n.item-content {\n  @apply flex flex-row w-full h-full items-stretch;\n}\n\n.content {\n  @apply flex\n  items-center\n  relative\n  justify-center\n  cursor-pointer\n  outline-none\n  text-0\n  text-color-2\n  box-border\n  bg-foreground-1\n  px-4\n  h-full\n  w-full;\n  text-decoration: none;\n  border-block-end: theme(\"spacing[0.5]\") solid transparent;\n  padding-block-start: theme(\"spacing[0.5]\");\n  &:hover {\n    @apply bg-foreground-2 text-color-2;\n  }\n  &:focus {\n    @apply bg-foreground-2 text-color-2 focus-inset;\n  }\n  &:active {\n    @apply bg-foreground-3 text-color-1;\n  }\n  & span {\n    display: inline-flex;\n  }\n  &.layout--vertical {\n    @apply flex w-full justify-start;\n    padding-block: 1rem;\n    border-block-end: 0;\n    border-inline-end: theme(\"spacing.1\") solid transparent;\n  }\n}\n\n:host([active]) .content {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  .icon {\n    --calcite-ui-icon-color: var(--calcite-color-brand);\n  }\n}\n:host([layout=\"vertical\"]) .content {\n  @apply px-3;\n}\n\n.icon--start {\n  @apply me-3;\n}\n\n.icon--end {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .icon--end {\n  @apply ms-auto ps-3;\n}\n\n.icon--dropdown {\n  @apply ms-auto me-0 ps-2 relative;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--dropdown {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon {\n  @apply ps-2;\n}\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--end {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--breadcrumb {\n  @apply ms-3;\n}\n\n.icon--breadcrumb {\n  @apply ps-2 me-0;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb {\n  @apply ms-auto;\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb ~ .icon--dropdown {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--breadcrumb {\n  @apply ms-2;\n}\n\n:host([breadcrumb]) .content {\n  @apply pe-3;\n}\n\ncalcite-action {\n  @apply relative h-auto;\n  border-inline-start: 1px solid var(--calcite-color-foreground-1);\n  &:after {\n    @apply block w-px  absolute -start-px;\n    content: \"\";\n    inset-block: theme(\"spacing.3\");\n    background-color: var(--calcite-color-border-3);\n  }\n  &:hover:after {\n    @apply h-full;\n    inset-block: 0;\n  }\n}\n\n.content:focus ~ calcite-action,\n.content:hover ~ calcite-action {\n  @apply text-color-1;\n  border-inline-start: 1px solid var(--calcite-color-border-3);\n}\n\n.container:hover .dropdown-action {\n  @apply bg-foreground-2;\n}\n\n.dropdown-menu-items {\n  @apply absolute h-auto flex-col hidden overflow-visible min-w-full;\n  border: 1px solid var(--calcite-color-border-3);\n  background: var(--calcite-color-foreground-1);\n  inset-block-start: 100%;\n  z-index: theme(\"zIndex.dropdown\");\n  &.open {\n    @apply block;\n  }\n  &.nested {\n    @apply absolute;\n    inset-block-start: -1px;\n    transform: translateX(calc(100% - 2px));\n  }\n}\n\n.parent--vertical {\n  @apply flex-col;\n}\n\n.dropdown--vertical.dropdown-menu-items {\n  @apply relative rounded-none;\n  box-shadow: none;\n  inset-block-start: 0;\n  transform: none;\n  &:last-of-type {\n    border-inline: 0;\n  }\n}\n\n:host([layout=\"vertical\"]:last-of-type) .dropdown-menu-items {\n  border-block-end: 0;\n}\n\n:host([slot=\"submenu-item\"]) .parent--vertical {\n  @apply ps-6;\n}\n\n.dropdown-menu-items.nested.calcite--rtl {\n  transform: translateX(calc(-100% + 2px));\n}\n\n.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl {\n  transform: none;\n}\n\n.hover-href-icon {\n  @apply ms-auto relative end-1 opacity-0;\n  transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;\n}\n\n.content:focus .hover-href-icon,\n.content:hover .hover-href-icon {\n  @apply opacity-100 -end-1;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { FlipContext } from \"../interfaces\";\nimport { Direction, getElementDir, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport { MenuItemCustomEvent } from \"./interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { MenuItemMessages } from \"./assets/menu-item/t9n\";\nimport { LocalizedComponent, connectLocalized, disconnectLocalized } from \"../../utils/locale\";\n\ntype Layout = \"horizontal\" | \"vertical\";\n\n/**\n * @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu.\n */\n@Component({\n  tag: \"calcite-menu-item\",\n  styleUrl: \"menu-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */\n  @Prop({ reflect: true }) breadcrumb: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop() href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * @internal\n   */\n  @Prop() isTopLevelItem = false;\n\n  /** Accessible name for the component.*/\n  @Prop() label!: string;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Layout;\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<MenuItemMessages>;\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: MenuItemMessages;\n\n  /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies the text to display.*/\n  @Prop() text: string;\n\n  /**\n   * @internal\n   */\n  @Prop() topLevelMenuLayout: Layout;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMenuItemElement;\n\n  @State() defaultMessages: MenuItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasSubmenu = false;\n\n  @State() submenuItems: HTMLCalciteMenuItemElement[];\n\n  anchorEl: HTMLAnchorElement;\n\n  dropdownActionEl: HTMLCalciteActionElement;\n\n  isFocused: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.anchorEl.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** @internal */\n  @Event({ cancelable: true }) calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;\n\n  /** Emits when the component is selected.*/\n  @Event() calciteMenuItemSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(event: Event): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      this.hasSubmenu &&\n      this.open &&\n      !event.composedPath().includes(this.el)\n    ) {\n      this.open = false;\n    }\n  }\n\n  @Listen(\"focusout\")\n  handleFocusOut(event: FocusEvent): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      !this.el.contains(event.relatedTarget as Element)\n    ) {\n      this.open = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private blurHandler(): void {\n    this.isFocused = false;\n  }\n\n  private clickHandler = (event: MouseEvent): void => {\n    if ((this.href && event.target === this.dropdownActionEl) || (!this.href && this.hasSubmenu)) {\n      this.open = !this.open;\n    }\n    this.selectMenuItem(event);\n  };\n\n  private focusHandler(event: FocusEvent): void {\n    const target = event.target as HTMLCalciteMenuItemElement;\n    this.isFocused = true;\n    if (target.open && !this.open) {\n      target.open = false;\n    }\n  }\n\n  private handleMenuItemSlotChange = (event: Event): void => {\n    this.submenuItems = slotChangeGetAssignedElements(event) as HTMLCalciteMenuItemElement[];\n    this.submenuItems.forEach((item) => {\n      if (!item.topLevelMenuLayout) {\n        item.topLevelMenuLayout = this.topLevelMenuLayout;\n      }\n    });\n    this.hasSubmenu = this.submenuItems.length > 0;\n  };\n\n  private keyDownHandler = async (event: KeyboardEvent): Promise<void> => {\n    const { hasSubmenu, href, layout, open, submenuItems } = this;\n    const key = event.key;\n    const targetIsDropdown = event.target === this.dropdownActionEl;\n    if (key === \" \" || key === \"Enter\") {\n      if (hasSubmenu && (!href || (href && targetIsDropdown))) {\n        this.open = !open;\n      }\n      if (!(href && targetIsDropdown) && key !== \"Enter\") {\n        this.selectMenuItem(event);\n      }\n      if (key === \" \" || (href && targetIsDropdown)) {\n        event.preventDefault();\n      }\n    } else if (key === \"Escape\") {\n      if (open) {\n        this.open = false;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({ event });\n      event.preventDefault();\n    } else if (key === \"ArrowDown\" || key === \"ArrowUp\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"horizontal\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    } else if (key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: true,\n      });\n    } else if (key === \"ArrowRight\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"vertical\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    }\n  };\n\n  private selectMenuItem(event: MouseEvent | KeyboardEvent): void {\n    if (event.target !== this.dropdownActionEl) {\n      this.calciteMenuItemSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderIconStart(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconStart}`}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        key={CSS.iconStart}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderIconEnd(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconEnd}`}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        key={CSS.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderBreadcrumbIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconBreadcrumb}`}\n        icon={dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\"}\n        key={CSS.iconBreadcrumb}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownIcon(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconDropdown}`}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.iconDropdown}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownAction(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-action\n        class={CSS.dropdownAction}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.dropdownAction}\n        onClick={this.clickHandler}\n        onKeyDown={this.keyDownHandler}\n        text={this.messages.open}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.dropdownActionEl = el)}\n      />\n    );\n  }\n\n  renderSubmenuItems(dir: Direction): VNode {\n    return (\n      <calcite-menu\n        class={{\n          [CSS.dropdownMenuItems]: true,\n          [CSS.open]: this.open,\n          [CSS.nested]: !this.isTopLevelItem,\n          [CSS_UTILITY.rtl]: dir === \"rtl\",\n          [CSS.dropdownVertical]: this.topLevelMenuLayout === \"vertical\",\n        }}\n        label={this.messages.submenu}\n        layout=\"vertical\"\n        role=\"menu\"\n      >\n        <slot name=\"submenu-item\" onSlotchange={this.handleMenuItemSlotChange} />\n      </calcite-menu>\n    );\n  }\n\n  renderHrefIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={CSS.hoverHrefIcon}\n        icon={dir === \"rtl\" ? \"arrow-left\" : \"arrow-right\"}\n        key={CSS.hoverHrefIcon}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderItemContent(dir: Direction): VNode {\n    const hasHref = this.href && (this.topLevelMenuLayout === \"vertical\" || !this.isTopLevelItem);\n    return (\n      <Fragment>\n        {this.iconStart && this.renderIconStart()}\n        <div class={CSS.textContainer}>\n          <span>{this.text}</span>\n        </div>\n        {hasHref && this.renderHrefIcon(dir)}\n        {this.iconEnd && this.renderIconEnd()}\n        {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}\n        {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}\n      </Fragment>\n    );\n  }\n\n  render() {\n    const dir = getElementDir(this.el);\n    return (\n      <Host onBlur={this.blurHandler} onFocus={this.focusHandler}>\n        <li\n          class={{\n            [CSS.container]: true,\n            [CSS.isParentVertical]: this.topLevelMenuLayout === \"vertical\",\n          }}\n          role=\"none\"\n        >\n          <div class={CSS.itemContent}>\n            <a\n              aria-current={this.isFocused ? \"page\" : false}\n              aria-expanded={this.open}\n              aria-haspopup={this.hasSubmenu}\n              aria-label={this.label}\n              class={{ [CSS.layoutVertical]: this.layout === \"vertical\", [CSS.content]: true }}\n              href={this.href}\n              onClick={this.clickHandler}\n              onKeyDown={this.keyDownHandler}\n              rel={this.rel}\n              role=\"menuitem\"\n              tabIndex={this.isTopLevelItem ? 0 : -1}\n              target={this.target}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.anchorEl = el)}\n            >\n              {this.renderItemContent(dir)}\n            </a>\n            {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}\n          </div>\n          {this.renderSubmenuItems(dir)}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-menu-item.js","mappings":"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","names":["CalciteMenuItem"],"sources":["src/components/menu-item/resources.ts","src/components/menu-item/menu-item.scss?tag=calcite-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  content: \"content\",\n  dropdownVertical: \"dropdown--vertical\",\n  dropdownMenuItems: \"dropdown-menu-items\",\n  dropdownAction: \"dropdown-action\",\n  layoutVertical: \"layout--vertical\",\n  hoverHrefIcon: \"hover-href-icon\",\n  icon: \"icon\",\n  iconBreadcrumb: \"icon--breadcrumb\",\n  iconDropdown: \"icon--dropdown\",\n  iconEnd: \"icon--end\",\n  iconStart: \"icon--start\",\n  isParentVertical: \"parent--vertical\",\n  itemContent: \"item-content\",\n  open: \"open\",\n  nested: \"nested\",\n  textContainer: \"text-container\",\n};\n",":host {\n  @apply flex\n  items-center\n  relative\n  box-border;\n  flex-shrink: 0;\n  & .container,\n  & .item-content,\n  & .content {\n    min-block-size: theme(\"spacing.12\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply w-full;\n}\n\n:host(:not([layout=\"vertical\"])) {\n  @apply h-full;\n}\n\n.container,\n.item-content {\n  @apply flex flex-row w-full h-full items-stretch;\n}\n\n.content {\n  @apply flex\n  items-center\n  relative\n  justify-center\n  cursor-pointer\n  outline-none\n  text-0\n  text-color-2\n  box-border\n  bg-foreground-1\n  px-4\n  h-full\n  w-full;\n  text-decoration: none;\n  border-block-end: theme(\"spacing[0.5]\") solid transparent;\n  padding-block-start: theme(\"spacing[0.5]\");\n  &:hover {\n    @apply bg-foreground-2 text-color-2;\n  }\n  &:focus {\n    @apply bg-foreground-2 text-color-2 focus-inset;\n  }\n  &:active {\n    @apply bg-foreground-3 text-color-1;\n  }\n  & span {\n    display: inline-flex;\n  }\n  &.layout--vertical {\n    @apply flex w-full justify-start;\n    padding-block: 1rem;\n    border-block-end: 0;\n    border-inline-end: theme(\"spacing.1\") solid transparent;\n  }\n}\n\n:host([active]) .content {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  .icon {\n    --calcite-ui-icon-color: var(--calcite-color-brand);\n  }\n}\n:host([layout=\"vertical\"]) .content {\n  @apply px-3;\n}\n\n.icon--start {\n  @apply me-3;\n}\n\n.icon--end {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .icon--end {\n  @apply ms-auto ps-3;\n}\n\n.icon--dropdown {\n  @apply ms-auto me-0 ps-2 relative;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--dropdown {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon {\n  @apply ps-2;\n}\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--end {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--breadcrumb {\n  @apply ms-3;\n}\n\n.icon--breadcrumb {\n  @apply ps-2 me-0;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb {\n  @apply ms-auto;\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb ~ .icon--dropdown {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--breadcrumb {\n  @apply ms-2;\n}\n\n:host([breadcrumb]) .content {\n  @apply pe-3;\n}\n\ncalcite-action {\n  @apply relative h-auto;\n  border-inline-start: 1px solid var(--calcite-color-foreground-1);\n  &:after {\n    @apply block w-px  absolute -start-px;\n    content: \"\";\n    inset-block: theme(\"spacing.3\");\n    background-color: var(--calcite-color-border-3);\n  }\n  &:hover:after {\n    @apply h-full;\n    inset-block: 0;\n  }\n}\n\n.content:focus ~ calcite-action,\n.content:hover ~ calcite-action {\n  @apply text-color-1;\n  border-inline-start: 1px solid var(--calcite-color-border-3);\n}\n\n.container:hover .dropdown-action {\n  @apply bg-foreground-2;\n}\n\n.dropdown-menu-items {\n  @apply absolute h-auto flex-col hidden overflow-visible min-w-full;\n  border: 1px solid var(--calcite-color-border-3);\n  background: var(--calcite-color-foreground-1);\n  inset-block-start: 100%;\n  z-index: theme(\"zIndex.dropdown\");\n  &.open {\n    @apply block;\n  }\n  &.nested {\n    @apply absolute;\n    inset-block-start: -1px;\n    transform: translateX(calc(100% - 2px));\n  }\n}\n\n.parent--vertical {\n  @apply flex-col;\n}\n\n.dropdown--vertical.dropdown-menu-items {\n  @apply relative rounded-none;\n  box-shadow: none;\n  inset-block-start: 0;\n  transform: none;\n  &:last-of-type {\n    border-inline: 0;\n  }\n}\n\n:host([layout=\"vertical\"]:last-of-type) .dropdown-menu-items {\n  border-block-end: 0;\n}\n\n:host([slot=\"submenu-item\"]) .parent--vertical {\n  @apply ps-6;\n}\n\n.dropdown-menu-items.nested.calcite--rtl {\n  transform: translateX(calc(-100% + 2px));\n}\n\n.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl {\n  transform: none;\n}\n\n.hover-href-icon {\n  @apply ms-auto relative end-1 opacity-0;\n  transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;\n}\n\n.content:focus .hover-href-icon,\n.content:hover .hover-href-icon {\n  @apply opacity-100 -end-1;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { FlipContext } from \"../interfaces\";\nimport { Direction, getElementDir, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport { MenuItemCustomEvent } from \"./interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { MenuItemMessages } from \"./assets/menu-item/t9n\";\nimport { LocalizedComponent, connectLocalized, disconnectLocalized } from \"../../utils/locale\";\n\ntype Layout = \"horizontal\" | \"vertical\";\n\n/**\n * @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu.\n */\n@Component({\n  tag: \"calcite-menu-item\",\n  styleUrl: \"menu-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */\n  @Prop({ reflect: true }) breadcrumb: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop() href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * @internal\n   */\n  @Prop() isTopLevelItem = false;\n\n  /** Accessible name for the component.*/\n  @Prop() label!: string;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Layout;\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<MenuItemMessages>;\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: MenuItemMessages;\n\n  /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies the text to display.*/\n  @Prop() text: string;\n\n  /**\n   * @internal\n   */\n  @Prop() topLevelMenuLayout: Layout;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMenuItemElement;\n\n  @State() defaultMessages: MenuItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasSubmenu = false;\n\n  @State() submenuItems: HTMLCalciteMenuItemElement[];\n\n  anchorEl: HTMLAnchorElement;\n\n  dropdownActionEl: HTMLCalciteActionElement;\n\n  isFocused: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.anchorEl.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** @internal */\n  @Event({ cancelable: true }) calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;\n\n  /** Emits when the component is selected.*/\n  @Event() calciteMenuItemSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(event: Event): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      this.hasSubmenu &&\n      this.open &&\n      !event.composedPath().includes(this.el)\n    ) {\n      this.open = false;\n    }\n  }\n\n  @Listen(\"focusout\")\n  handleFocusOut(event: FocusEvent): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      !this.el.contains(event.relatedTarget as Element)\n    ) {\n      this.open = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private blurHandler(): void {\n    this.isFocused = false;\n  }\n\n  private clickHandler = (event: MouseEvent): void => {\n    if ((this.href && event.target === this.dropdownActionEl) || (!this.href && this.hasSubmenu)) {\n      this.open = !this.open;\n    }\n    this.selectMenuItem(event);\n  };\n\n  private focusHandler(event: FocusEvent): void {\n    const target = event.target as HTMLCalciteMenuItemElement;\n    this.isFocused = true;\n    if (target.open && !this.open) {\n      target.open = false;\n    }\n  }\n\n  private handleMenuItemSlotChange = (event: Event): void => {\n    this.submenuItems = slotChangeGetAssignedElements(event) as HTMLCalciteMenuItemElement[];\n    this.submenuItems.forEach((item) => {\n      if (!item.topLevelMenuLayout) {\n        item.topLevelMenuLayout = this.topLevelMenuLayout;\n      }\n    });\n    this.hasSubmenu = this.submenuItems.length > 0;\n  };\n\n  private keyDownHandler = async (event: KeyboardEvent): Promise<void> => {\n    const { hasSubmenu, href, layout, open, submenuItems } = this;\n    const key = event.key;\n    const targetIsDropdown = event.target === this.dropdownActionEl;\n    if (key === \" \" || key === \"Enter\") {\n      if (hasSubmenu && (!href || (href && targetIsDropdown))) {\n        this.open = !open;\n      }\n      if (!(href && targetIsDropdown) && key !== \"Enter\") {\n        this.selectMenuItem(event);\n      }\n      if (key === \" \" || (href && targetIsDropdown)) {\n        event.preventDefault();\n      }\n    } else if (key === \"Escape\") {\n      if (open) {\n        this.open = false;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({ event });\n      event.preventDefault();\n    } else if (key === \"ArrowDown\" || key === \"ArrowUp\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"horizontal\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    } else if (key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: true,\n      });\n    } else if (key === \"ArrowRight\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"vertical\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    }\n  };\n\n  private selectMenuItem(event: MouseEvent | KeyboardEvent): void {\n    if (event.target !== this.dropdownActionEl) {\n      this.calciteMenuItemSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderIconStart(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconStart}`}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        key={CSS.iconStart}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderIconEnd(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconEnd}`}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        key={CSS.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderBreadcrumbIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconBreadcrumb}`}\n        icon={dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\"}\n        key={CSS.iconBreadcrumb}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownIcon(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconDropdown}`}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.iconDropdown}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownAction(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-action\n        class={CSS.dropdownAction}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.dropdownAction}\n        onClick={this.clickHandler}\n        onKeyDown={this.keyDownHandler}\n        text={this.messages.open}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.dropdownActionEl = el)}\n      />\n    );\n  }\n\n  renderSubmenuItems(dir: Direction): VNode {\n    return (\n      <calcite-menu\n        class={{\n          [CSS.dropdownMenuItems]: true,\n          [CSS.open]: this.open,\n          [CSS.nested]: !this.isTopLevelItem,\n          [CSS_UTILITY.rtl]: dir === \"rtl\",\n          [CSS.dropdownVertical]: this.topLevelMenuLayout === \"vertical\",\n        }}\n        label={this.messages.submenu}\n        layout=\"vertical\"\n        role=\"menu\"\n      >\n        <slot name=\"submenu-item\" onSlotchange={this.handleMenuItemSlotChange} />\n      </calcite-menu>\n    );\n  }\n\n  renderHrefIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={CSS.hoverHrefIcon}\n        icon={dir === \"rtl\" ? \"arrow-left\" : \"arrow-right\"}\n        key={CSS.hoverHrefIcon}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderItemContent(dir: Direction): VNode {\n    const hasHref = this.href && (this.topLevelMenuLayout === \"vertical\" || !this.isTopLevelItem);\n    return (\n      <Fragment>\n        {this.iconStart && this.renderIconStart()}\n        <div class={CSS.textContainer}>\n          <span>{this.text}</span>\n        </div>\n        {hasHref && this.renderHrefIcon(dir)}\n        {this.iconEnd && this.renderIconEnd()}\n        {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}\n        {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}\n      </Fragment>\n    );\n  }\n\n  render() {\n    const dir = getElementDir(this.el);\n    return (\n      <Host onBlur={this.blurHandler} onFocus={this.focusHandler}>\n        <li\n          class={{\n            [CSS.container]: true,\n            [CSS.isParentVertical]: this.topLevelMenuLayout === \"vertical\",\n          }}\n          role=\"none\"\n        >\n          <div class={CSS.itemContent}>\n            <a\n              aria-current={this.isFocused ? \"page\" : false}\n              aria-expanded={this.open}\n              aria-haspopup={this.hasSubmenu}\n              aria-label={this.label}\n              class={{ [CSS.layoutVertical]: this.layout === \"vertical\", [CSS.content]: true }}\n              href={this.href}\n              onClick={this.clickHandler}\n              onKeyDown={this.keyDownHandler}\n              rel={this.rel}\n              role=\"menuitem\"\n              tabIndex={this.isTopLevelItem ? 0 : -1}\n              target={this.target}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.anchorEl = el)}\n            >\n              {this.renderItemContent(dir)}\n            </a>\n            {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}\n          </div>\n          {this.renderSubmenuItems(dir)}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-menu.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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { C as CalciteMenu$1, d as defineCustomElement$1 } from './menu.js';
 

package/dist/components/calcite-meter.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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';

package/dist/components/calcite-modal.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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -54,7 +54,7 @@ const SLOTS = {
     primary: "primary",
 };
 
-const modalCss = ":host{--calcite-modal-scrim-background:rgba(0, 0, 0, 0.85);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible !important;transition-delay:0ms}.container--open{opacity:1;visibility:visible !important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0px;margin-block-end:0.25rem}}.container.slotted-in-shell{position:absolute;pointer-events:auto}.container.slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
+const modalCss = ":host{--calcite-modal-scrim-background:rgba(0, 0, 0, 0.85);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible !important;transition-delay:0ms}.container--open{opacity:1;visibility:visible !important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0px;margin-block-end:0.25rem}}.container.slotted-in-shell{position:absolute;pointer-events:auto}.container.slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
 
 let totalOpenModals = 0;
 let initialDocumentOverflowStyle = "";

package/dist/components/calcite-modal.js.map

@@ -1 +1 @@
-{"file":"calcite-modal.js","mappings":"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","names":[],"sources":["src/components/modal/resources.ts","src/components/modal/modal.scss?tag=calcite-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["export const CSS = {\n  modal: \"modal\",\n  title: \"title\",\n  header: \"header\",\n  footer: \"footer\",\n  scrim: \"scrim\",\n  back: \"back\",\n  close: \"close\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n  container: \"container\",\n  containerOpen: \"container--open\",\n  content: \"content\",\n  contentNoFooter: \"content--no-footer\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  slottedInShell: \"slotted-in-shell\",\n\n  // these classes help apply the animation in phases to only set transform on open/close\n  // this helps avoid a positioning issue for any floating-ui-owning children\n  openingIdle: \"modal--opening-idle\",\n  openingActive: \"modal--opening-active\",\n  closingIdle: \"modal--closing-idle\",\n  closingActive: \"modal--closing-active\",\n};\n\nexport const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n  test: 300 / 1000,\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  content: \"content\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  header: \"header\",\n  back: \"back\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n};\n","@import \"~@esri/calcite-design-tokens/dist/scss/core\";\n\n/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-modal-content-background: Specifies the background color of content placed in the component's `\"content\"` slot.\n * @prop --calcite-modal-content-padding: Specifies the padding of the component's `\"content\"` slot.\n * @prop --calcite-modal-scrim-background: Specifies the background color of the component's scrim.\n * @prop --calcite-modal-width: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.\n * @prop --calcite-modal-height: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.\n *\n */\n\n:host {\n  --calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n:host {\n  @apply absolute flex inset-0 opacity-0 z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n  // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss\n  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n.content-top[hidden],\n.content-bottom[hidden] {\n  @apply hidden;\n}\n\n.container {\n  @apply text-color-2\n    fixed\n    inset-0\n    flex\n    items-center\n    justify-center\n    overflow-y-hidden\n    opacity-0\n    z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.3\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.4\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.1h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.n1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.4\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.5\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.2h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.0\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.5\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.6\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.3h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.1\");\n}\n\n.scrim {\n  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));\n  @apply fixed inset-0 flex overflow-y-hidden;\n}\n\n.modal {\n  @apply shadow-2-sm\n    bg-foreground-1\n    pointer-events-none\n    float-none\n    m-6\n    box-border\n    flex\n    w-full\n    flex-col\n    overflow-hidden\n    rounded\n    opacity-0\n    z-modal;\n  -webkit-overflow-scrolling: touch;\n  visibility: hidden;\n  transition:\n    transform var(--calcite-internal-animation-timing-slow) $easing-function,\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n\n  --calcite-modal-hidden-position: translate3d(0, 20px, 0);\n  --calcite-modal-shown-position: translate3d(0, 0, 0);\n\n  &--opening {\n    &-idle {\n      transform: var(--calcite-modal-hidden-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-shown-position);\n    }\n  }\n\n  &--closing {\n    &-idle {\n      transform: var(--calcite-modal-shown-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-hidden-position);\n    }\n  }\n}\n\n:host([opened]) {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n}\n\n.container--open {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n  .modal {\n    @apply pointer-events-auto visible opacity-100;\n    transition:\n      transform var(--calcite-internal-animation-timing-slow) $easing-function,\n      visibility 0ms linear,\n      opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-inline-size var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-block-size var(--calcite-internal-animation-timing-slow) $easing-function;\n    transition-delay: 0ms;\n  }\n}\n\n/**\n * Header\n */\n.header {\n  @apply bg-foreground-1\n    border-color-3\n    flex\n    min-w-0\n    max-w-full\n    rounded-t\n    border-0\n    border-b\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n}\n\n.close {\n  @apply text-color-3\n    transition-default\n    focus-base\n    order-2\n    m-0\n    cursor-pointer\n    appearance-none\n    border-none\n    bg-transparent;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-internal);\n  flex: 0 0 auto;\n  calcite-icon {\n    @apply pointer-events-none;\n    vertical-align: -2px;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &:hover,\n  &:focus,\n  &:active {\n    @apply bg-foreground-2 text-color-1;\n  }\n}\n\n.title {\n  @apply order-1 flex min-w-0 items-center;\n  flex: 1 1 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n@include slotted(\"header\", \"*\") {\n  @apply text-color-1 m-0 font-normal;\n  font-size: var(--calcite-modal-title-text-internal);\n}\n\n/**\n * Content area\n */\n.content {\n  @apply relative box-border block h-full overflow-auto p-0;\n  background-color: var(--calcite-modal-content-background, theme(\"colors.background.foreground.1\"));\n  max-block-size: 100%;\n  padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));\n}\n\n.content-top,\n.content-bottom {\n  @apply bg-foreground-1 border-color-3 border-solid border-0 z-header flex;\n  flex: 0 0 auto;\n  padding: var(--calcite-modal-padding-internal);\n}\n\n.content-top {\n  @apply min-w-0 max-w-full border-b;\n}\n\n.content-bottom {\n  @apply mt-auto box-border w-full justify-between border-t;\n}\n\n.content-top:not(.header ~ .content-top) {\n  @apply rounded-t;\n}\n\n.content-bottom:not(.content-bottom ~ .footer),\n.content--no-footer {\n  @apply rounded-b;\n}\n\n@include slotted(\"content\", \"*\") {\n  font-size: var(--calcite-modal-context-text-internal);\n}\n\n/**\n * Footer\n */\n.footer {\n  @apply bg-foreground-1\n    border-color-3\n    mt-auto\n    box-border\n    flex\n    w-full\n    justify-between\n    rounded-b\n    border-0\n    border-t\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n.footer--hide-back .back,\n.footer--hide-secondary .secondary {\n  @apply hidden;\n}\n\n.back {\n  @apply block;\n  margin-inline-end: auto;\n}\n\n.secondary {\n  @apply mx-1 block;\n}\n\nslot[name=\"primary\"] {\n  @apply block;\n}\n\n/**\n * Sizes\n */\n@mixin modal-size($size, $width) {\n  :host([width-scale=\"#{$size}\"]) .modal {\n    @apply max-h-full max-w-full;\n    inline-size: var(--calcite-modal-width, $width);\n    block-size: var(--calcite-modal-height, auto);\n  }\n\n  @media screen and (max-width: $width + 2 * $baseline) {\n    :host([width-scale=\"#{$size}\"]) {\n      .modal {\n        @apply m-0 h-full max-h-full w-full max-w-full;\n      }\n      .content {\n        flex: 1 1 auto;\n        max-block-size: unset;\n      }\n    }\n    :host([width-scale=\"#{$size}\"][docked]) .container {\n      align-items: flex-end;\n    }\n  }\n}\n\n:host([width=\"small\"]) .modal {\n  @apply w-auto;\n}\n\n@include modal-size(\"s\", 32rem);\n@include modal-size(\"m\", 48rem);\n@include modal-size(\"l\", 94rem);\n\n/**\n * Fullscreen\n */\n:host([fullscreen]) {\n  .modal {\n    @apply m-0 max-h-full max-w-full h-full w-full rounded-none;\n    --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);\n    --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);\n  }\n  .content {\n    @apply max-h-full;\n    flex: 1 1 auto;\n  }\n}\n\n:host([opened][fullscreen]) {\n  .header,\n  .footer,\n  .content-top,\n  .content-bottom {\n    border-radius: 0;\n  }\n}\n\n/**\n * Docked\n */\n:host([docked]) {\n  .modal {\n    block-size: var(--calcite-modal-height, auto);\n  }\n  .content {\n    @apply h-auto;\n    flex: 1 1 auto;\n  }\n}\n\n/**\n * Kinds\n */\n:host([kind=\"brand\"]) .modal {\n  @apply border-color-brand;\n}\n\n:host([kind=\"danger\"]) .modal {\n  @apply border-color-danger;\n}\n\n:host([kind=\"info\"]) .modal {\n  @apply border-color-info;\n}\n\n:host([kind=\"success\"]) .modal {\n  @apply border-color-success;\n}\n\n:host([kind=\"warning\"]) .modal {\n  @apply border-color-warning;\n}\n\n:host([kind=\"brand\"]),\n:host([kind=\"danger\"]),\n:host([kind=\"info\"]),\n:host([kind=\"success\"]),\n:host([kind=\"warning\"]) {\n  .modal {\n    @apply border-0 border-t-4 border-solid;\n  }\n  .header,\n  .content-top {\n    @apply rounded rounded-b-none;\n  }\n}\n\n/**\n * Tablet\n */\n@media screen and (max-width: $viewport-medium) {\n  @include slotted(\"header\", \"content-top\", \"*\") {\n    @apply text-1;\n  }\n  .footer,\n  .content-bottom {\n    @apply sticky bottom-0;\n  }\n}\n\n/**\n * Mobile\n */\n@media screen and (max-width: $viewport-small) {\n  .footer,\n  .content-bottom {\n    @apply flex-col;\n  }\n  .back,\n  .secondary {\n    @apply m-0 mb-1;\n  }\n}\n\n/**\n * Conditional styles for when Modal is slotted in Shell\n */\n\n.container.slotted-in-shell {\n  position: absolute;\n  pointer-events: auto;\n  calcite-scrim {\n    position: absolute;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  ensureId,\n  focusFirstTabbable,\n  getSlotted,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  activateFocusTrap,\n  connectFocusTrap,\n  deactivateFocusTrap,\n  FocusTrap,\n  FocusTrapComponent,\n  updateFocusTrapElements,\n} from \"../../utils/focusTrapComponent\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ModalMessages } from \"./assets/modal/t9n\";\n\nimport { componentOnReady, getIconScale } from \"../../utils/component\";\n\nlet totalOpenModals: number = 0;\nlet initialDocumentOverflowStyle: string = \"\";\n\n/**\n * @slot header - A slot for adding header text.\n * @slot content - A slot for adding the component's content.\n * @slot content-top - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n * @slot content-bottom - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n * @slot primary - A slot for adding a primary button.\n * @slot secondary - A slot for adding a secondary button.\n * @slot back - A slot for adding a back button.\n */\n\n@Component({\n  tag: \"calcite-modal\",\n  styleUrl: \"modal.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Modal\n  implements\n    ConditionalSlotComponent,\n    OpenCloseComponent,\n    FocusTrapComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays and positions the component.  */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) opened = false;\n\n  /** Passes a function to run before the component closes. */\n  @Prop() beforeClose: (el: HTMLCalciteModalElement) => Promise<void>;\n\n  /** When `true`, disables the component's close button. */\n  @Prop({ reflect: true }) closeButtonDisabled = false;\n\n  /**\n   * When `true`, prevents focus trapping.\n   */\n  @Prop({ reflect: true }) focusTrapDisabled = false;\n\n  @Watch(\"focusTrapDisabled\")\n  handleFocusTrapDisabled(focusTrapDisabled: boolean): void {\n    if (!this.open) {\n      return;\n    }\n\n    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);\n  }\n\n  /** When `true`, disables the closing of the component when clicked outside. */\n  @Prop({ reflect: true }) outsideCloseDisabled = false;\n\n  /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */\n  @Prop({ reflect: true }) docked: boolean;\n\n  /** When `true`, disables the default close on escape behavior. */\n  @Prop({ reflect: true }) escapeDisabled = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) widthScale: Scale = \"m\";\n\n  /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */\n  @Prop({ reflect: true }) fullscreen: boolean;\n\n  /** Specifies the kind of the component, which will apply to top border. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>;\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: ModalMessages;\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<ModalMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * This internal property, managed by a containing calcite-shell, is used\n   * to inform the component if special configuration or styles are needed\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) slottedInShell: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n    // when modal initially renders, if active was set we need to open as watcher doesn't fire\n    if (this.open) {\n      this.openModal();\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.cssVarObserver?.observe(this.el, { attributeFilter: [\"style\"] });\n    this.updateSizeCssVars();\n    this.updateFooterVisibility();\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectFocusTrap(this);\n  }\n\n  disconnectedCallback(): void {\n    this.removeOverflowHiddenClass();\n    this.mutationObserver?.disconnect();\n    this.cssVarObserver?.disconnect();\n    disconnectConditionalSlotComponent(this);\n    deactivateFocusTrap(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.slottedInShell = false;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-describedby={this.contentId}\n        aria-labelledby={this.titleId}\n        aria-modal=\"true\"\n        role=\"dialog\"\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerOpen]: this.opened,\n            [CSS.slottedInShell]: this.slottedInShell,\n          }}\n        >\n          <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />\n          {this.renderStyle()}\n          <div\n            class={{\n              [CSS.modal]: true,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setTransitionEl}\n          >\n            <div class={CSS.header}>\n              {this.renderCloseButton()}\n              <header class={CSS.title}>\n                <slot name={CSS.header} />\n              </header>\n            </div>\n            {this.renderContentTop()}\n            <div\n              class={{\n                [CSS.content]: true,\n                [CSS.contentNoFooter]: !this.hasFooter,\n              }}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.modalContent = el)}\n            >\n              <slot name={SLOTS.content} />\n            </div>\n            {this.renderContentBottom()}\n            {this.renderFooter()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  renderFooter(): VNode {\n    return this.hasFooter ? (\n      <div class={CSS.footer} key=\"footer\">\n        <span class={CSS.back}>\n          <slot name={SLOTS.back} />\n        </span>\n        <span class={CSS.secondary}>\n          <slot name={SLOTS.secondary} />\n        </span>\n        <span class={CSS.primary}>\n          <slot name={SLOTS.primary} />\n        </span>\n      </div>\n    ) : null;\n  }\n\n  renderContentTop(): VNode {\n    return (\n      <div class={CSS.contentTop} hidden={!this.hasContentTop}>\n        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderContentBottom(): VNode {\n    return (\n      <div class={CSS.contentBottom} hidden={!this.hasContentBottom}>\n        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return !this.closeButtonDisabled ? (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"button\"\n        onClick={this.handleCloseClick}\n        title={this.messages.close}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButtonEl = el)}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  renderStyle(): VNode {\n    if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {\n      return (\n        <style>\n          {`.${CSS.container} {\n              ${this.docked && this.cssWidth ? `align-items: center !important;` : \"\"}\n            }\n            .${CSS.modal} {\n              block-size: ${this.cssHeight ? this.cssHeight : \"auto\"} !important;\n              ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : \"\"}\n            }\n            @media screen and (max-width: ${this.cssWidth}) {\n              .${CSS.container} {\n                ${this.docked ? `align-items: flex-end !important;` : \"\"}\n              }\n              .${CSS.modal} {\n                max-block-size: 100% !important;\n                inline-size: 100% !important;\n                max-inline-size: 100% !important;\n                min-inline-size: 100% !important;\n                margin: 0 !important;\n                ${!this.docked ? `block-size: 100% !important;` : \"\"}\n                ${!this.docked ? `border-radius: 0 !important;` : \"\"}\n                ${\n                  this.docked\n                    ? `border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`\n                    : \"\"\n                }\n              }\n            }\n          `}\n        </style>\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  ignoreOpenChange = false;\n\n  @Element() el: HTMLCalciteModalElement;\n\n  modalContent: HTMLDivElement;\n\n  initialOverflowCSS: string;\n\n  private mutationObserver: MutationObserver = createObserver(\"mutation\", () =>\n    this.handleMutationObserver(),\n  );\n\n  private cssVarObserver: MutationObserver = createObserver(\"mutation\", () => {\n    this.updateSizeCssVars();\n  });\n\n  titleId: string;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  focusTrap: FocusTrap;\n\n  closeButtonEl: HTMLButtonElement;\n\n  contentId: string;\n\n  @State() cssWidth: string | number;\n\n  @State() cssHeight: string | number;\n\n  @State() hasFooter = true;\n\n  @State() hasContentTop = false;\n\n  @State() hasContentBottom = false;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ModalMessages;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\", { target: \"window\" })\n  handleEscape(event: KeyboardEvent): void {\n    if (this.open && !this.escapeDisabled && event.key === \"Escape\" && !event.defaultPrevented) {\n      this.open = false;\n      event.preventDefault();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteModalBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteModalClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteModalBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteModalOpen: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's \"close\" button (the first focusable item).\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  /**\n   * Updates the element(s) that are used within the focus-trap of the component.\n   */\n  @Method()\n  async updateFocusTrapElements(): Promise<void> {\n    updateFocusTrapElements(this);\n  }\n\n  /**\n   * Sets the scroll top of the component's content.\n   *\n   * @param top\n   * @param left\n   */\n  @Method()\n  async scrollContent(top = 0, left = 0): Promise<void> {\n    if (this.modalContent) {\n      if (this.modalContent.scrollTo) {\n        this.modalContent.scrollTo({ top, left, behavior: \"smooth\" });\n      } else {\n        this.modalContent.scrollTop = top;\n        this.modalContent.scrollLeft = left;\n      }\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  onBeforeOpen(): void {\n    this.transitionEl.classList.add(CSS.openingActive);\n    this.calciteModalBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);\n    this.calciteModalOpen.emit();\n    activateFocusTrap(this);\n  }\n\n  onBeforeClose(): void {\n    this.transitionEl.classList.add(CSS.closingActive);\n    this.calciteModalBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);\n    this.calciteModalClose.emit();\n    deactivateFocusTrap(this);\n  }\n\n  @Watch(\"open\")\n  toggleModal(value: boolean): void {\n    if (this.ignoreOpenChange) {\n      return;\n    }\n\n    if (value) {\n      this.openModal();\n    } else {\n      this.closeModal();\n    }\n  }\n\n  @Watch(\"opened\")\n  handleOpenedChange(value: boolean): void {\n    const idleClass = value ? CSS.openingIdle : CSS.closingIdle;\n    this.transitionEl.classList.add(idleClass);\n    onToggleOpenCloseComponent(this);\n  }\n\n  private openEnd = (): void => {\n    this.setFocus();\n    this.el.removeEventListener(\"calciteModalOpen\", this.openEnd);\n  };\n\n  private handleCloseClick = () => {\n    this.open = false;\n  };\n\n  private async openModal(): Promise<void> {\n    await componentOnReady(this.el);\n    this.el.addEventListener(\"calciteModalOpen\", this.openEnd);\n    this.opened = true;\n    const titleEl = getSlotted(this.el, SLOTS.header);\n    const contentEl = getSlotted(this.el, SLOTS.content);\n\n    this.titleId = ensureId(titleEl);\n    this.contentId = ensureId(contentEl);\n\n    if (!this.slottedInShell) {\n      if (totalOpenModals === 0) {\n        initialDocumentOverflowStyle = document.documentElement.style.overflow;\n      }\n\n      totalOpenModals++;\n      // use an inline style instead of a utility class to avoid global class declarations.\n      document.documentElement.style.setProperty(\"overflow\", \"hidden\");\n    }\n  }\n\n  private handleOutsideClose = (): void => {\n    if (this.outsideCloseDisabled) {\n      return;\n    }\n\n    this.open = false;\n  };\n\n  closeModal = async (): Promise<void> => {\n    if (this.beforeClose) {\n      try {\n        await this.beforeClose(this.el);\n      } catch (_error) {\n        // close prevented\n        requestAnimationFrame(() => {\n          this.ignoreOpenChange = true;\n          this.open = true;\n          this.ignoreOpenChange = false;\n        });\n        return;\n      }\n    }\n\n    totalOpenModals--;\n    this.opened = false;\n    this.removeOverflowHiddenClass();\n  };\n\n  private removeOverflowHiddenClass(): void {\n    document.documentElement.style.setProperty(\"overflow\", initialDocumentOverflowStyle);\n  }\n\n  private handleMutationObserver = (): void => {\n    this.updateFooterVisibility();\n    this.updateFocusTrapElements();\n  };\n\n  private updateFooterVisibility = (): void => {\n    this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);\n  };\n\n  private updateSizeCssVars = (): void => {\n    this.cssWidth = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-width\");\n    this.cssHeight = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-height\");\n  };\n\n  private contentTopSlotChangeHandler = (event: Event): void => {\n    this.hasContentTop = slotChangeHasAssignedElement(event);\n  };\n\n  private contentBottomSlotChangeHandler = (event: Event): void => {\n    this.hasContentBottom = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}
+{"file":"calcite-modal.js","mappings":"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","names":[],"sources":["src/components/modal/resources.ts","src/components/modal/modal.scss?tag=calcite-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["export const CSS = {\n  modal: \"modal\",\n  title: \"title\",\n  header: \"header\",\n  footer: \"footer\",\n  scrim: \"scrim\",\n  back: \"back\",\n  close: \"close\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n  container: \"container\",\n  containerOpen: \"container--open\",\n  content: \"content\",\n  contentNoFooter: \"content--no-footer\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  slottedInShell: \"slotted-in-shell\",\n\n  // these classes help apply the animation in phases to only set transform on open/close\n  // this helps avoid a positioning issue for any floating-ui-owning children\n  openingIdle: \"modal--opening-idle\",\n  openingActive: \"modal--opening-active\",\n  closingIdle: \"modal--closing-idle\",\n  closingActive: \"modal--closing-active\",\n};\n\nexport const DURATIONS = {\n  slow: 14000,\n  medium: 10000,\n  fast: 6000,\n  test: 300 / 1000,\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  content: \"content\",\n  contentBottom: \"content-bottom\",\n  contentTop: \"content-top\",\n  header: \"header\",\n  back: \"back\",\n  secondary: \"secondary\",\n  primary: \"primary\",\n};\n","@import \"~@esri/calcite-design-tokens/dist/scss/core\";\n\n/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-modal-content-background: Specifies the background color of content placed in the component's `\"content\"` slot.\n * @prop --calcite-modal-content-padding: Specifies the padding of the component's `\"content\"` slot.\n * @prop --calcite-modal-scrim-background: Specifies the background color of the component's scrim.\n * @prop --calcite-modal-width: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.\n * @prop --calcite-modal-height: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.\n *\n */\n\n:host {\n  --calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n:host {\n  @apply absolute flex inset-0 opacity-0 z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n  // the modal should always use a dark scrim, regardless of light / dark mode - matches value in global.scss\n  --calcite-modal-scrim-background-internal: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};\n}\n\n.content-top[hidden],\n.content-bottom[hidden] {\n  @apply hidden;\n}\n\n.container {\n  @apply text-color-2\n    fixed\n    inset-0\n    flex\n    items-center\n    justify-center\n    overflow-y-hidden\n    opacity-0\n    z-overlay;\n  visibility: hidden !important;\n  transition:\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.3\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.4\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.1h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.n1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.4\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.5\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.2h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.0\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-modal-padding-internal: theme(\"spacing.5\");\n  --calcite-modal-padding-large-internal: theme(\"spacing.6\");\n  --calcite-modal-title-text-internal: theme(\"fontSize.3h\");\n  --calcite-modal-content-text-internal: theme(\"fontSize.1\");\n}\n\n.scrim {\n  --calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));\n  @apply fixed inset-0 flex overflow-y-hidden;\n}\n\n.modal {\n  @apply shadow-2-sm\n    bg-foreground-1\n    pointer-events-none\n    float-none\n    m-6\n    box-border\n    flex\n    w-full\n    flex-col\n    overflow-hidden\n    rounded\n    opacity-0\n    z-modal;\n  -webkit-overflow-scrolling: touch;\n  visibility: hidden;\n  transition:\n    transform var(--calcite-internal-animation-timing-slow) $easing-function,\n    visibility 0ms linear var(--calcite-internal-animation-timing-slow),\n    opacity var(--calcite-internal-animation-timing-slow) $easing-function;\n\n  --calcite-modal-hidden-position: translate3d(0, 20px, 0);\n  --calcite-modal-shown-position: translate3d(0, 0, 0);\n\n  &--opening {\n    &-idle {\n      transform: var(--calcite-modal-hidden-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-shown-position);\n    }\n  }\n\n  &--closing {\n    &-idle {\n      transform: var(--calcite-modal-shown-position);\n    }\n    &-active {\n      transform: var(--calcite-modal-hidden-position);\n    }\n  }\n}\n\n:host([opened]) {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n}\n\n.container--open {\n  @apply opacity-100;\n  visibility: visible !important;\n  transition-delay: 0ms;\n  .modal {\n    @apply pointer-events-auto visible opacity-100;\n    transition:\n      transform var(--calcite-internal-animation-timing-slow) $easing-function,\n      visibility 0ms linear,\n      opacity var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-inline-size var(--calcite-internal-animation-timing-slow) $easing-function,\n      max-block-size var(--calcite-internal-animation-timing-slow) $easing-function;\n    transition-delay: 0ms;\n  }\n}\n\n/**\n * Header\n */\n.header {\n  @apply bg-foreground-1\n    border-color-3\n    flex\n    min-w-0\n    max-w-full\n    rounded-t\n    border-0\n    border-b\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n}\n\n.close {\n  @apply text-color-3\n    transition-default\n    focus-base\n    order-2\n    m-0\n    cursor-pointer\n    appearance-none\n    border-none\n    bg-transparent;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-internal);\n  flex: 0 0 auto;\n  calcite-icon {\n    @apply pointer-events-none;\n    vertical-align: -2px;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &:hover,\n  &:focus,\n  &:active {\n    @apply bg-foreground-2 text-color-1;\n  }\n}\n\n.title {\n  @apply order-1 flex min-w-0 items-center;\n  flex: 1 1 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n@include slotted(\"header\", \"*\") {\n  @apply text-color-1 m-0 font-normal;\n  font-size: var(--calcite-modal-title-text-internal);\n}\n\n/**\n * Content area\n */\n.content {\n  @apply relative box-border block h-full overflow-auto p-0;\n  background-color: var(--calcite-modal-content-background, theme(\"colors.background.foreground.1\"));\n  max-block-size: 100%;\n  padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));\n}\n\n.content-top,\n.content-bottom {\n  @apply bg-foreground-1 border-color-3 border-solid border-0 z-header flex;\n  flex: 0 0 auto;\n  padding: var(--calcite-modal-padding-internal);\n}\n\n.content-top {\n  @apply min-w-0 max-w-full border-b;\n}\n\n.content-bottom {\n  @apply mt-auto box-border w-full justify-between border-t;\n}\n\n.content-top:not(.header ~ .content-top) {\n  @apply rounded-t;\n}\n\n.content-bottom:not(.content-bottom ~ .footer),\n.content--no-footer {\n  @apply rounded-b;\n}\n\n@include slotted(\"content\", \"*\") {\n  font-size: var(--calcite-modal-context-text-internal);\n}\n\n/**\n * Footer\n */\n.footer {\n  @apply bg-foreground-1\n    border-color-3\n    mt-auto\n    box-border\n    flex\n    w-full\n    justify-between\n    rounded-b\n    border-0\n    border-t\n    border-solid\n    z-header;\n  flex: 0 0 auto;\n  padding-block: var(--calcite-modal-padding-internal);\n  padding-inline: var(--calcite-modal-padding-large-internal);\n}\n\n.footer--hide-back .back,\n.footer--hide-secondary .secondary {\n  @apply hidden;\n}\n\n.back {\n  @apply block;\n  margin-inline-end: auto;\n}\n\n.secondary {\n  @apply mx-1 block;\n}\n\nslot[name=\"primary\"] {\n  @apply block;\n}\n\n/**\n * Sizes\n */\n@mixin modal-size($size, $width) {\n  :host([width-scale=\"#{$size}\"]) .modal {\n    @apply max-h-full max-w-full;\n    inline-size: var(--calcite-modal-width, $width);\n    block-size: var(--calcite-modal-height, auto);\n  }\n\n  @media screen and (max-width: $width + 2 * $baseline) {\n    :host([width-scale=\"#{$size}\"]) {\n      .modal {\n        @apply m-0 h-full max-h-full w-full max-w-full;\n      }\n      .content {\n        flex: 1 1 auto;\n        max-block-size: unset;\n      }\n    }\n    :host([width-scale=\"#{$size}\"][docked]) .container {\n      align-items: flex-end;\n    }\n  }\n}\n\n:host([width=\"small\"]) .modal {\n  @apply w-auto;\n}\n\n@include modal-size(\"s\", 32rem);\n@include modal-size(\"m\", 48rem);\n@include modal-size(\"l\", 94rem);\n\n/**\n * Fullscreen\n */\n:host([fullscreen]) {\n  .modal {\n    @apply m-0 max-h-full max-w-full h-full w-full rounded-none;\n    --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);\n    --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);\n  }\n  .content {\n    @apply max-h-full;\n    flex: 1 1 auto;\n  }\n}\n\n:host([opened][fullscreen]) {\n  .header,\n  .footer,\n  .content-top,\n  .content-bottom {\n    border-radius: 0;\n  }\n}\n\n/**\n * Docked\n */\n:host([docked]) {\n  .modal {\n    block-size: var(--calcite-modal-height, auto);\n  }\n  .content {\n    @apply h-auto;\n    flex: 1 1 auto;\n  }\n}\n\n/**\n * Kinds\n */\n:host([kind=\"brand\"]) .modal {\n  @apply border-color-brand;\n}\n\n:host([kind=\"danger\"]) .modal {\n  @apply border-color-danger;\n}\n\n:host([kind=\"info\"]) .modal {\n  @apply border-color-info;\n}\n\n:host([kind=\"success\"]) .modal {\n  @apply border-color-success;\n}\n\n:host([kind=\"warning\"]) .modal {\n  @apply border-color-warning;\n}\n\n:host([kind=\"brand\"]),\n:host([kind=\"danger\"]),\n:host([kind=\"info\"]),\n:host([kind=\"success\"]),\n:host([kind=\"warning\"]) {\n  .modal {\n    @apply border-0 border-t-4 border-solid;\n  }\n  .header,\n  .content-top {\n    @apply rounded rounded-b-none;\n  }\n}\n\n/**\n * Tablet\n */\n@media screen and (max-width: $viewport-medium) {\n  @include slotted(\"header\", \"content-top\", \"*\") {\n    @apply text-1;\n  }\n  .footer,\n  .content-bottom {\n    @apply sticky bottom-0;\n  }\n}\n\n/**\n * Mobile\n */\n@media screen and (max-width: $viewport-small) {\n  .footer,\n  .content-bottom {\n    @apply flex-col;\n  }\n  .back,\n  .secondary {\n    @apply m-0 mb-1;\n  }\n}\n\n/**\n * Conditional styles for when Modal is slotted in Shell\n */\n\n.container.slotted-in-shell {\n  position: absolute;\n  pointer-events: auto;\n  calcite-scrim {\n    position: absolute;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  ensureId,\n  focusFirstTabbable,\n  getSlotted,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  activateFocusTrap,\n  connectFocusTrap,\n  deactivateFocusTrap,\n  FocusTrap,\n  FocusTrapComponent,\n  updateFocusTrapElements,\n} from \"../../utils/focusTrapComponent\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { Kind, Scale } from \"../interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { ModalMessages } from \"./assets/modal/t9n\";\n\nimport { componentOnReady, getIconScale } from \"../../utils/component\";\n\nlet totalOpenModals: number = 0;\nlet initialDocumentOverflowStyle: string = \"\";\n\n/**\n * @slot header - A slot for adding header text.\n * @slot content - A slot for adding the component's content.\n * @slot content-top - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n * @slot content-bottom - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n * @slot primary - A slot for adding a primary button.\n * @slot secondary - A slot for adding a secondary button.\n * @slot back - A slot for adding a back button.\n */\n\n@Component({\n  tag: \"calcite-modal\",\n  styleUrl: \"modal.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Modal\n  implements\n    ConditionalSlotComponent,\n    OpenCloseComponent,\n    FocusTrapComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays and positions the component.  */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) opened = false;\n\n  /** Passes a function to run before the component closes. */\n  @Prop() beforeClose: (el: HTMLCalciteModalElement) => Promise<void>;\n\n  /** When `true`, disables the component's close button. */\n  @Prop({ reflect: true }) closeButtonDisabled = false;\n\n  /**\n   * When `true`, prevents focus trapping.\n   */\n  @Prop({ reflect: true }) focusTrapDisabled = false;\n\n  @Watch(\"focusTrapDisabled\")\n  handleFocusTrapDisabled(focusTrapDisabled: boolean): void {\n    if (!this.open) {\n      return;\n    }\n\n    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);\n  }\n\n  /** When `true`, disables the closing of the component when clicked outside. */\n  @Prop({ reflect: true }) outsideCloseDisabled = false;\n\n  /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */\n  @Prop({ reflect: true }) docked: boolean;\n\n  /** When `true`, disables the default close on escape behavior. */\n  @Prop({ reflect: true }) escapeDisabled = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) widthScale: Scale = \"m\";\n\n  /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */\n  @Prop({ reflect: true }) fullscreen: boolean;\n\n  /** Specifies the kind of the component, which will apply to top border. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>;\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: ModalMessages;\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<ModalMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * This internal property, managed by a containing calcite-shell, is used\n   * to inform the component if special configuration or styles are needed\n   *\n   * @internal\n   */\n  @Prop({ mutable: true }) slottedInShell: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n    // when modal initially renders, if active was set we need to open as watcher doesn't fire\n    if (this.open) {\n      this.openModal();\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.cssVarObserver?.observe(this.el, { attributeFilter: [\"style\"] });\n    this.updateSizeCssVars();\n    this.updateFooterVisibility();\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectFocusTrap(this);\n  }\n\n  disconnectedCallback(): void {\n    this.removeOverflowHiddenClass();\n    this.mutationObserver?.disconnect();\n    this.cssVarObserver?.disconnect();\n    disconnectConditionalSlotComponent(this);\n    deactivateFocusTrap(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.slottedInShell = false;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-describedby={this.contentId}\n        aria-labelledby={this.titleId}\n        aria-modal=\"true\"\n        role=\"dialog\"\n      >\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerOpen]: this.opened,\n            [CSS.slottedInShell]: this.slottedInShell,\n          }}\n        >\n          <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />\n          {this.renderStyle()}\n          <div\n            class={{\n              [CSS.modal]: true,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setTransitionEl}\n          >\n            <div class={CSS.header}>\n              {this.renderCloseButton()}\n              <header class={CSS.title}>\n                <slot name={CSS.header} />\n              </header>\n            </div>\n            {this.renderContentTop()}\n            <div\n              class={{\n                [CSS.content]: true,\n                [CSS.contentNoFooter]: !this.hasFooter,\n              }}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.modalContent = el)}\n            >\n              <slot name={SLOTS.content} />\n            </div>\n            {this.renderContentBottom()}\n            {this.renderFooter()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  renderFooter(): VNode {\n    return this.hasFooter ? (\n      <div class={CSS.footer} key=\"footer\">\n        <span class={CSS.back}>\n          <slot name={SLOTS.back} />\n        </span>\n        <span class={CSS.secondary}>\n          <slot name={SLOTS.secondary} />\n        </span>\n        <span class={CSS.primary}>\n          <slot name={SLOTS.primary} />\n        </span>\n      </div>\n    ) : null;\n  }\n\n  renderContentTop(): VNode {\n    return (\n      <div class={CSS.contentTop} hidden={!this.hasContentTop}>\n        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderContentBottom(): VNode {\n    return (\n      <div class={CSS.contentBottom} hidden={!this.hasContentBottom}>\n        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return !this.closeButtonDisabled ? (\n      <button\n        aria-label={this.messages.close}\n        class={CSS.close}\n        key=\"button\"\n        onClick={this.handleCloseClick}\n        title={this.messages.close}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.closeButtonEl = el)}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  renderStyle(): VNode {\n    if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {\n      return (\n        <style>\n          {`.${CSS.container} {\n              ${this.docked && this.cssWidth ? `align-items: center !important;` : \"\"}\n            }\n            .${CSS.modal} {\n              block-size: ${this.cssHeight ? this.cssHeight : \"auto\"} !important;\n              ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : \"\"}\n              ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : \"\"}\n            }\n            @media screen and (max-width: ${this.cssWidth}) {\n              .${CSS.container} {\n                ${this.docked ? `align-items: flex-end !important;` : \"\"}\n              }\n              .${CSS.modal} {\n                max-block-size: 100% !important;\n                inline-size: 100% !important;\n                max-inline-size: 100% !important;\n                min-inline-size: 100% !important;\n                margin: 0 !important;\n                ${!this.docked ? `block-size: 100% !important;` : \"\"}\n                ${!this.docked ? `border-radius: 0 !important;` : \"\"}\n                ${\n                  this.docked\n                    ? `border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`\n                    : \"\"\n                }\n              }\n            }\n          `}\n        </style>\n      );\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  ignoreOpenChange = false;\n\n  @Element() el: HTMLCalciteModalElement;\n\n  modalContent: HTMLDivElement;\n\n  initialOverflowCSS: string;\n\n  private mutationObserver: MutationObserver = createObserver(\"mutation\", () =>\n    this.handleMutationObserver(),\n  );\n\n  private cssVarObserver: MutationObserver = createObserver(\"mutation\", () => {\n    this.updateSizeCssVars();\n  });\n\n  titleId: string;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  focusTrap: FocusTrap;\n\n  closeButtonEl: HTMLButtonElement;\n\n  contentId: string;\n\n  @State() cssWidth: string | number;\n\n  @State() cssHeight: string | number;\n\n  @State() hasFooter = true;\n\n  @State() hasContentTop = false;\n\n  @State() hasContentBottom = false;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ModalMessages;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\", { target: \"window\" })\n  handleEscape(event: KeyboardEvent): void {\n    if (this.open && !this.escapeDisabled && event.key === \"Escape\" && !event.defaultPrevented) {\n      this.open = false;\n      event.preventDefault();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteModalBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteModalClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteModalBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteModalOpen: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's \"close\" button (the first focusable item).\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  /**\n   * Updates the element(s) that are used within the focus-trap of the component.\n   */\n  @Method()\n  async updateFocusTrapElements(): Promise<void> {\n    updateFocusTrapElements(this);\n  }\n\n  /**\n   * Sets the scroll top of the component's content.\n   *\n   * @param top\n   * @param left\n   */\n  @Method()\n  async scrollContent(top = 0, left = 0): Promise<void> {\n    if (this.modalContent) {\n      if (this.modalContent.scrollTo) {\n        this.modalContent.scrollTo({ top, left, behavior: \"smooth\" });\n      } else {\n        this.modalContent.scrollTop = top;\n        this.modalContent.scrollLeft = left;\n      }\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private setTransitionEl = (el: HTMLDivElement): void => {\n    this.transitionEl = el;\n  };\n\n  onBeforeOpen(): void {\n    this.transitionEl.classList.add(CSS.openingActive);\n    this.calciteModalBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);\n    this.calciteModalOpen.emit();\n    activateFocusTrap(this);\n  }\n\n  onBeforeClose(): void {\n    this.transitionEl.classList.add(CSS.closingActive);\n    this.calciteModalBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);\n    this.calciteModalClose.emit();\n    deactivateFocusTrap(this);\n  }\n\n  @Watch(\"open\")\n  toggleModal(value: boolean): void {\n    if (this.ignoreOpenChange) {\n      return;\n    }\n\n    if (value) {\n      this.openModal();\n    } else {\n      this.closeModal();\n    }\n  }\n\n  @Watch(\"opened\")\n  handleOpenedChange(value: boolean): void {\n    const idleClass = value ? CSS.openingIdle : CSS.closingIdle;\n    this.transitionEl.classList.add(idleClass);\n    onToggleOpenCloseComponent(this);\n  }\n\n  private openEnd = (): void => {\n    this.setFocus();\n    this.el.removeEventListener(\"calciteModalOpen\", this.openEnd);\n  };\n\n  private handleCloseClick = () => {\n    this.open = false;\n  };\n\n  private async openModal(): Promise<void> {\n    await componentOnReady(this.el);\n    this.el.addEventListener(\"calciteModalOpen\", this.openEnd);\n    this.opened = true;\n    const titleEl = getSlotted(this.el, SLOTS.header);\n    const contentEl = getSlotted(this.el, SLOTS.content);\n\n    this.titleId = ensureId(titleEl);\n    this.contentId = ensureId(contentEl);\n\n    if (!this.slottedInShell) {\n      if (totalOpenModals === 0) {\n        initialDocumentOverflowStyle = document.documentElement.style.overflow;\n      }\n\n      totalOpenModals++;\n      // use an inline style instead of a utility class to avoid global class declarations.\n      document.documentElement.style.setProperty(\"overflow\", \"hidden\");\n    }\n  }\n\n  private handleOutsideClose = (): void => {\n    if (this.outsideCloseDisabled) {\n      return;\n    }\n\n    this.open = false;\n  };\n\n  closeModal = async (): Promise<void> => {\n    if (this.beforeClose) {\n      try {\n        await this.beforeClose(this.el);\n      } catch (_error) {\n        // close prevented\n        requestAnimationFrame(() => {\n          this.ignoreOpenChange = true;\n          this.open = true;\n          this.ignoreOpenChange = false;\n        });\n        return;\n      }\n    }\n\n    totalOpenModals--;\n    this.opened = false;\n    this.removeOverflowHiddenClass();\n  };\n\n  private removeOverflowHiddenClass(): void {\n    document.documentElement.style.setProperty(\"overflow\", initialDocumentOverflowStyle);\n  }\n\n  private handleMutationObserver = (): void => {\n    this.updateFooterVisibility();\n    this.updateFocusTrapElements();\n  };\n\n  private updateFooterVisibility = (): void => {\n    this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);\n  };\n\n  private updateSizeCssVars = (): void => {\n    this.cssWidth = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-width\");\n    this.cssHeight = getComputedStyle(this.el).getPropertyValue(\"--calcite-modal-height\");\n  };\n\n  private contentTopSlotChangeHandler = (event: Event): void => {\n    this.hasContentTop = slotChangeHasAssignedElement(event);\n  };\n\n  private contentBottomSlotChangeHandler = (event: Event): void => {\n    this.hasContentBottom = slotChangeHasAssignedElement(event);\n  };\n}\n"],"version":3}

package/dist/components/calcite-navigation-logo.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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -17,7 +17,7 @@ const CSS = {
     icon: "icon",
 };
 
-const navigationLogoCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:inherit;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-color-foreground-3)}.image,.icon{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.icon{padding-inline-start:0px}.image~.container,.icon~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-color-text-1)}:host([active]) .anchor{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand);--calcite-ui-icon-color:var(--calcite-color-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";
+const navigationLogoCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:inherit;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-color-foreground-3)}.image,.icon{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.icon{padding-inline-start:0px}.image~.container,.icon~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-color-text-1)}:host([active]) .anchor{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand);--calcite-ui-icon-color:var(--calcite-color-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationLogo extends HTMLElement {
     constructor() {

package/dist/components/calcite-navigation-logo.js.map

@@ -1 +1 @@
-{"file":"calcite-navigation-logo.js","mappings":";;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;CACb;;ACRD,MAAM,iBAAiB,GAAG,64DAA64D;;MCgB15DA,uBAAqB;;;;;;;;2BAiBO,KAAK;;;;;;;;;;;;;;IAoC5C,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;;;;;;IAgBD,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQO,UAAU;;QAEhB,OAAO,oBAAc,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CAAC;KAChG;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACjD,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtE,SAAS,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,GAAI,EAC7E,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,CAAC,OAAO,IAAI,WAAW,MACtB,WAAK,KAAK,EAAE,GAAG,CAAC,SAAS,IACtB,OAAO,KACN,0BACc,IAAI,CAAC,OAAO,EACxB,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI;gBACnB,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW;aACpC,EACD,GAAG,EAAE,GAAG,CAAC,OAAO,IAEf,OAAO,CACH,CACR,EACA,WAAW,KACV,0BAAkB,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,CAAC,WAAW,IAC7E,WAAW,CACP,CACR,CACG,CACP,CACC,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CalciteNavigationLogo"],"sources":["src/components/navigation-logo/resources.ts","src/components/navigation-logo/navigation-logo.scss?tag=calcite-navigation-logo&encapsulation=shadow","src/components/navigation-logo/navigation-logo.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  heading: \"heading\",\n  description: \"description\",\n  anchor: \"anchor\",\n  image: \"image\",\n  standalone: \"standalone\",\n  icon: \"icon\",\n};\n",":host {\n  @apply inline-flex outline-none;\n}\n\n.anchor {\n  @apply flex\n    m-0\n    items-center\n    justify-center\n    cursor-pointer\n    transition-default\n    focus-base\n    no-underline\n    text-0h;\n  color: inherit;\n  border-block-end: 2px solid transparent;\n}\n\n.anchor:hover,\n.anchor:focus {\n  @apply bg-foreground-2;\n}\n.anchor:focus {\n  @apply focus-inset;\n}\n\n.anchor:active {\n  @apply bg-foreground-3;\n}\n\n.image,\n.icon {\n  @apply flex h-7 m-0 px-4;\n}\n\n.image ~ .icon {\n  @apply ps-0;\n}\n\n.image ~ .container,\n.icon ~ .container {\n  @apply ps-0;\n}\n\n:host(:active) .anchor {\n  @apply text-color-1;\n}\n\n:host([active]) .anchor {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.container {\n  @apply flex\n  flex-col\n  truncate\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.heading {\n  @apply text-0\n  ms-0\n  truncate\n  text-color-1\n  font-medium;\n}\n\n.standalone {\n  @apply text-1;\n}\n\n.description {\n  @apply text-color-2 truncate;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-logo\",\n  styleUrl: \"navigation-logo.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationLogo implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */\n  @Prop() label: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** A description for the component, which displays below the `heading`.*/\n  @Prop() description: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies heading text for the component, such as a product or organization name.*/\n  @Prop() heading: string;\n\n  /** Specifies the `src` to an image. */\n  @Prop() thumbnail: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.href) {\n      this.el.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationLogoElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderIcon(): VNode {\n    /** Icon scale is not variable as the component does not have a scale property */\n    return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale=\"l\" />;\n  }\n\n  render(): VNode {\n    const { heading, description, thumbnail } = this;\n    return (\n      <Host>\n        <a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>\n          {thumbnail && <img alt={this.label || \"\"} class={CSS.image} src={thumbnail} />}\n          {this.icon && this.renderIcon()}\n          {(heading || description) && (\n            <div class={CSS.container}>\n              {heading && (\n                <span\n                  aria-label={this.heading}\n                  class={{\n                    [CSS.heading]: true,\n                    [CSS.standalone]: !this.description,\n                  }}\n                  key={CSS.heading}\n                >\n                  {heading}\n                </span>\n              )}\n              {description && (\n                <span aria-label={this.description} class={CSS.description} key={CSS.description}>\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-navigation-logo.js","mappings":";;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;CACb;;ACRD,MAAM,iBAAiB,GAAG,44DAA44D;;MCgBz5DA,uBAAqB;;;;;;;;2BAiBO,KAAK;;;;;;;;;;;;;;IAoC5C,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;;;;;;IAgBD,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IAQO,UAAU;;QAEhB,OAAO,oBAAc,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CAAC;KAChG;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACjD,QACE,EAAC,IAAI,QACH,SAAG,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtE,SAAS,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,GAAI,EAC7E,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,CAAC,OAAO,IAAI,WAAW,MACtB,WAAK,KAAK,EAAE,GAAG,CAAC,SAAS,IACtB,OAAO,KACN,0BACc,IAAI,CAAC,OAAO,EACxB,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI;gBACnB,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW;aACpC,EACD,GAAG,EAAE,GAAG,CAAC,OAAO,IAEf,OAAO,CACH,CACR,EACA,WAAW,KACV,0BAAkB,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,CAAC,WAAW,IAC7E,WAAW,CACP,CACR,CACG,CACP,CACC,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CalciteNavigationLogo"],"sources":["src/components/navigation-logo/resources.ts","src/components/navigation-logo/navigation-logo.scss?tag=calcite-navigation-logo&encapsulation=shadow","src/components/navigation-logo/navigation-logo.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  heading: \"heading\",\n  description: \"description\",\n  anchor: \"anchor\",\n  image: \"image\",\n  standalone: \"standalone\",\n  icon: \"icon\",\n};\n",":host {\n  @apply inline-flex outline-none;\n}\n\n.anchor {\n  @apply flex\n    m-0\n    items-center\n    justify-center\n    cursor-pointer\n    transition-default\n    focus-base\n    no-underline\n    text-0h;\n  color: inherit;\n  border-block-end: 2px solid transparent;\n}\n\n.anchor:hover,\n.anchor:focus {\n  @apply bg-foreground-2;\n}\n.anchor:focus {\n  @apply focus-inset;\n}\n\n.anchor:active {\n  @apply bg-foreground-3;\n}\n\n.image,\n.icon {\n  @apply flex h-7 m-0 px-4;\n}\n\n.image ~ .icon {\n  @apply ps-0;\n}\n\n.image ~ .container,\n.icon ~ .container {\n  @apply ps-0;\n}\n\n:host(:active) .anchor {\n  @apply text-color-1;\n}\n\n:host([active]) .anchor {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.container {\n  @apply flex\n  flex-col\n  truncate\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.heading {\n  @apply text-0\n  ms-0\n  truncate\n  text-color-1\n  font-medium;\n}\n\n.standalone {\n  @apply text-1;\n}\n\n.description {\n  @apply text-color-2 truncate;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-logo\",\n  styleUrl: \"navigation-logo.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationLogo implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */\n  @Prop() label: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** A description for the component, which displays below the `heading`.*/\n  @Prop() description: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies heading text for the component, such as a product or organization name.*/\n  @Prop() heading: string;\n\n  /** Specifies the `src` to an image. */\n  @Prop() thumbnail: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.href) {\n      this.el.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationLogoElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderIcon(): VNode {\n    /** Icon scale is not variable as the component does not have a scale property */\n    return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale=\"l\" />;\n  }\n\n  render(): VNode {\n    const { heading, description, thumbnail } = this;\n    return (\n      <Host>\n        <a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>\n          {thumbnail && <img alt={this.label || \"\"} class={CSS.image} src={thumbnail} />}\n          {this.icon && this.renderIcon()}\n          {(heading || description) && (\n            <div class={CSS.container}>\n              {heading && (\n                <span\n                  aria-label={this.heading}\n                  class={{\n                    [CSS.heading]: true,\n                    [CSS.standalone]: !this.description,\n                  }}\n                  key={CSS.heading}\n                >\n                  {heading}\n                </span>\n              )}\n              {description && (\n                <span aria-label={this.description} class={CSS.description} key={CSS.description}>\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-navigation-user.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.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -15,7 +15,7 @@ const CSS = {
     button: "button",
 };
 
-const navigationUserCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1);--calcite-ui-icon-color:var(--calcite-color-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.username{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";
+const navigationUserCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1);--calcite-ui-icon-color:var(--calcite-color-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.username{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const CalciteNavigationUser$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationUser extends HTMLElement {
     constructor() {