@esri/solutions-components 0.7.34 → 0.7.35

package/dist/esm/calcite-menu-item.entry.js

@@ -3,39 +3,39 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-7183ce4a.js';
-import { s as slotChangeGetAssignedElements, a as getElementDir } from './dom-8f926f33.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
-import { C as CSS_UTILITY } from './resources-cdc36705.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import './guid-36c6c6a5.js';
-import './key-af303047.js';
-import './observers-8ce200f2.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-164d485a.js';
+import { s as slotChangeGetAssignedElements, a as getElementDir } from './dom-38c6f027.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
+import { C as CSS_UTILITY } from './resources-8834f920.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import './guid-b75a5f7b.js';
+import './key-c83d835f.js';
+import './observers-d04d1da9.js';
 
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  content: "content",
-  dropdownVertical: "dropdown--vertical",
-  dropdownMenuItems: "dropdown-menu-items",
-  dropdownAction: "dropdown-action",
-  layoutVertical: "layout--vertical",
-  hoverHrefIcon: "hover-href-icon",
-  icon: "icon",
-  iconBreadcrumb: "icon--breadcrumb",
-  iconDropdown: "icon--dropdown",
-  iconEnd: "icon--end",
-  iconStart: "icon--start",
-  isParentVertical: "parent--vertical",
-  itemContent: "item-content",
-  open: "open",
-  nested: "nested",
-  textContainer: "text-container",
+    container: "container",
+    content: "content",
+    dropdownVertical: "dropdown--vertical",
+    dropdownMenuItems: "dropdown-menu-items",
+    dropdownAction: "dropdown-action",
+    layoutVertical: "layout--vertical",
+    hoverHrefIcon: "hover-href-icon",
+    icon: "icon",
+    iconBreadcrumb: "icon--breadcrumb",
+    iconDropdown: "icon--dropdown",
+    iconEnd: "icon--end",
+    iconStart: "icon--start",
+    isParentVertical: "parent--vertical",
+    itemContent: "item-content",
+    open: "open",
+    nested: "nested",
+    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-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}";
@@ -61,59 +61,58 @@ const CalciteMenuItem = class {
             this.hasSubmenu = this.submenuItems.length > 0;
         };
         this.keyDownHandler = async (event) => {
-            // opening and closing of submenu is handled here. Any other functionality is bubbled to parent menu.
-            if (event.key === " " || event.key === "Enter") {
-                this.selectMenuItem(event);
-                if (this.hasSubmenu &&
-                    (!this.href || (this.href && event.target === this.dropdownActionEl))) {
-                    this.open = !this.open;
+            const { hasSubmenu, href, layout, open, submenuItems } = this;
+            const key = event.key;
+            const targetIsDropdown = event.target === this.dropdownActionEl;
+            if (key === " " || key === "Enter") {
+                if (hasSubmenu && (!href || (href && targetIsDropdown))) {
+                    this.open = !open;
+                }
+                if (!(href && targetIsDropdown) && key !== "Enter") {
+                    this.selectMenuItem(event);
+                }
+                if (key === " " || (href && targetIsDropdown)) {
+                    event.preventDefault();
                 }
-                event.preventDefault();
             }
-            else if (event.key === "Escape") {
-                if (this.open) {
+            else if (key === "Escape") {
+                if (open) {
                     this.open = false;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({ event });
                 event.preventDefault();
             }
-            else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            else if (key === "ArrowDown" || key === "ArrowUp") {
                 event.preventDefault();
-                if ((event.target === this.dropdownActionEl || !this.href) &&
-                    this.hasSubmenu &&
-                    !this.open &&
-                    this.layout === "horizontal") {
+                if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "horizontal") {
                     this.open = true;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
-                    isSubmenuOpen: this.open && this.hasSubmenu,
+                    children: submenuItems,
+                    isSubmenuOpen: open && hasSubmenu,
                 });
             }
-            else if (event.key === "ArrowLeft") {
+            else if (key === "ArrowLeft") {
                 event.preventDefault();
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
+                    children: submenuItems,
                     isSubmenuOpen: true,
                 });
             }
-            else if (event.key === "ArrowRight") {
+            else if (key === "ArrowRight") {
                 event.preventDefault();
-                if ((event.target === this.dropdownActionEl || !this.href) &&
-                    this.hasSubmenu &&
-                    !this.open &&
-                    this.layout === "vertical") {
+                if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "vertical") {
                     this.open = true;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
-                    isSubmenuOpen: this.open && this.hasSubmenu,
+                    children: submenuItems,
+                    isSubmenuOpen: open && hasSubmenu,
                 });
             }
         };

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

@@ -3,16 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { s as slotChangeGetAssignedElements, d as focusElementInGroup, e as focusElement } from './dom-8f926f33.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
-import { w as watchGlobalAttributes, u as unwatchGlobalAttributes } from './globalAttributes-03c9e433.js';
-import './guid-36c6c6a5.js';
-import './resources-cdc36705.js';
-import './key-af303047.js';
-import './observers-8ce200f2.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-164d485a.js';
+import { s as slotChangeGetAssignedElements, d as focusElementInGroup, e as focusElement } from './dom-38c6f027.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
+import './key-c83d835f.js';
+import './observers-d04d1da9.js';
 
 const menuCss = ":host{display:flex}ul{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -35,9 +34,15 @@ const CalciteMenu = class {
         this.messages = undefined;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
-        this.globalAttributes = {
-            role: "menubar",
-        };
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleGlobalAttributesChanged() {
+        forceUpdate(this);
+        this.setMenuItemLayout(this.menuItems, this.layout);
     }
     handleLayoutChange(value) {
         this.setMenuItemLayout(this.menuItems, value);
@@ -56,7 +61,6 @@ const CalciteMenu = class {
     connectedCallback() {
         connectLocalized(this);
         connectMessages(this);
-        watchGlobalAttributes(this, ["role"]);
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -68,7 +72,6 @@ const CalciteMenu = class {
     disconnectedCallback() {
         disconnectLocalized(this);
         disconnectMessages(this);
-        unwatchGlobalAttributes(this);
     }
     //--------------------------------------------------------------------------
     //
@@ -145,24 +148,28 @@ const CalciteMenu = class {
     setMenuItemLayout(items, layout) {
         items.forEach((item) => {
             item.layout = layout;
-            if (this.globalAttributes.role === "menubar") {
+            if (this.getEffectiveRole() === "menubar") {
                 item.isTopLevelItem = true;
                 item.topLevelMenuLayout = this.layout;
             }
         });
     }
+    getEffectiveRole() {
+        return this.el.getAttribute("role") || "menubar";
+    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("ul", Object.assign({ "aria-label": this.label }, this.globalAttributes), h("slot", { onSlotchange: this.handleMenuSlotChange }))));
+        return (h(Host, null, h("ul", { "aria-label": this.label, role: this.getEffectiveRole() }, h("slot", { onSlotchange: this.handleMenuSlotChange }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "role": ["handleGlobalAttributesChanged"],
         "layout": ["handleLayoutChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]

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

@@ -3,38 +3,38 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm } from './form-133b00c7.js';
-import { g as getSupportedLocale, n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { r as intersects } from './dom-8f926f33.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import './key-af303047.js';
-import './guid-36c6c6a5.js';
-import './resources-cdc36705.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-164d485a.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
+import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm } from './form-50dcd52e.js';
+import { g as getSupportedLocale, n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { r as intersects } from './dom-38c6f027.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import './key-c83d835f.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
 
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  fill: "fill",
-  stepLine: "step-line",
-  label: "label",
-  labelHidden: "label-hidden",
-  labelRange: "label-range",
-  labelValue: "label-value",
-  unitLabel: "unit-label",
-  stepsVisible: "steps-visible",
-  valueVisible: "value-visible",
-  success: "fill-success",
-  warning: "fill-warning",
-  danger: "fill-danger",
+    container: "container",
+    fill: "fill",
+    stepLine: "step-line",
+    label: "label",
+    labelHidden: "label-hidden",
+    labelRange: "label-range",
+    labelValue: "label-value",
+    unitLabel: "unit-label",
+    stepsVisible: "steps-visible",
+    valueVisible: "value-visible",
+    success: "fill-success",
+    warning: "fill-warning",
+    danger: "fill-danger",
 };
 
-const meterCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
+const meterCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
 
 const Meter = class {
     constructor(hostRef) {

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

@@ -3,64 +3,66 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
-import { g as getSlotted, u as slotChangeHasAssignedElement, f as focusFirstTabbable, v as ensureId } from './dom-8f926f33.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-14368766.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
-import { g as getIconScale } from './component-98bae46b.js';
-import './guid-36c6c6a5.js';
-import './resources-cdc36705.js';
-import './key-af303047.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-12c4fcfb.js';
+import { g as getSlotted, u as slotChangeHasAssignedElement, f as focusFirstTabbable, v as ensureId } from './dom-38c6f027.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-47ddce58.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
+import { g as getIconScale, c as componentOnReady } from './component-edd2c3cd.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
+import './key-c83d835f.js';
 
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  modal: "modal",
-  title: "title",
-  header: "header",
-  footer: "footer",
-  scrim: "scrim",
-  back: "back",
-  close: "close",
-  secondary: "secondary",
-  primary: "primary",
-  container: "container",
-  containerOpen: "container--open",
-  content: "content",
-  contentNoFooter: "content--no-footer",
-  contentBottom: "content-bottom",
-  contentTop: "content-top",
-  slottedInShell: "slotted-in-shell",
-  // these classes help apply the animation in phases to only set transform on open/close
-  // this helps avoid a positioning issue for any floating-ui-owning children
-  openingIdle: "modal--opening-idle",
-  openingActive: "modal--opening-active",
-  closingIdle: "modal--closing-idle",
-  closingActive: "modal--closing-active",
+    modal: "modal",
+    title: "title",
+    header: "header",
+    footer: "footer",
+    scrim: "scrim",
+    back: "back",
+    close: "close",
+    secondary: "secondary",
+    primary: "primary",
+    container: "container",
+    containerOpen: "container--open",
+    content: "content",
+    contentNoFooter: "content--no-footer",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    slottedInShell: "slotted-in-shell",
+    // these classes help apply the animation in phases to only set transform on open/close
+    // this helps avoid a positioning issue for any floating-ui-owning children
+    openingIdle: "modal--opening-idle",
+    openingActive: "modal--opening-active",
+    closingIdle: "modal--closing-idle",
+    closingActive: "modal--closing-active",
 };
 const ICONS = {
-  close: "x",
+    close: "x",
 };
 const SLOTS = {
-  content: "content",
-  contentBottom: "content-bottom",
-  contentTop: "content-top",
-  header: "header",
-  back: "back",
-  secondary: "secondary",
-  primary: "primary",
+    content: "content",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    header: "header",
+    back: "back",
+    secondary: "secondary",
+    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;-webkit-appearance:none;-moz-appearance:none;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-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 = "";
 const Modal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -115,6 +117,7 @@ const Modal = class {
                     return;
                 }
             }
+            totalOpenModals--;
             this.opened = false;
             this.removeOverflowHiddenClass();
         };
@@ -177,7 +180,7 @@ const Modal = class {
         setUpLoadableComponent(this);
         // when modal initially renders, if active was set we need to open as watcher doesn't fire
         if (this.open) {
-            requestAnimationFrame(() => this.openModal());
+            this.openModal();
         }
     }
     componentDidLoad() {
@@ -346,16 +349,12 @@ const Modal = class {
         }
     }
     handleOpenedChange(value) {
-        var _a, _b;
+        const idleClass = value ? CSS.openingIdle : CSS.closingIdle;
+        this.transitionEl.classList.add(idleClass);
         onToggleOpenCloseComponent(this);
-        if (value) {
-            (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
-        }
-        else {
-            (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
-        }
     }
-    openModal() {
+    async openModal() {
+        await componentOnReady(this.el);
         this.el.addEventListener("calciteModalOpen", this.openEnd);
         this.opened = true;
         const titleEl = getSlotted(this.el, SLOTS.header);
@@ -363,13 +362,16 @@ const Modal = class {
         this.titleId = ensureId(titleEl);
         this.contentId = ensureId(contentEl);
         if (!this.slottedInShell) {
-            this.initialOverflowCSS = document.documentElement.style.overflow;
+            if (totalOpenModals === 0) {
+                initialDocumentOverflowStyle = document.documentElement.style.overflow;
+            }
+            totalOpenModals++;
             // use an inline style instead of a utility class to avoid global class declarations.
             document.documentElement.style.setProperty("overflow", "hidden");
         }
     }
     removeOverflowHiddenClass() {
-        document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
+        document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }

package/dist/esm/calcite-navigation-logo.entry.js

@@ -3,22 +3,22 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-164d485a.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
 
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  heading: "heading",
-  description: "description",
-  anchor: "anchor",
-  image: "image",
-  standalone: "standalone",
-  icon: "icon",
+    container: "container",
+    heading: "heading",
+    description: "description",
+    anchor: "anchor",
+    image: "image",
+    standalone: "standalone",
+    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;-webkit-text-decoration-line:none;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.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}";

package/dist/esm/calcite-navigation-user.entry.js

@@ -3,19 +3,19 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-164d485a.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
 
 /*!
  * 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.0.0
+ * v2.4.0
  */
 const CSS = {
-  textContainer: "text-container",
-  fullName: "full-name",
-  username: "username",
-  button: "button",
+    textContainer: "text-container",
+    fullName: "full-name",
+    username: "username",
+    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-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}";