@esri/calcite-components 3.0.0-next.99 → 3.0.1

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

@@ -1,23 +1,21 @@
-import { c as y } from "../../chunks/runtime.js";
+import { c as x } from "../../chunks/runtime.js";
 import { keyed as h } from "lit-html/directives/keyed.js";
-import { html as a, nothing as w } from "lit";
-import { createRef as m, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as z, createEvent as l, setAttribute as p, safeClassMap as o } from "@arcgis/lumina";
+import { html as a, nothing as k } from "lit";
+import { createRef as m, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as y, createEvent as l, setAttribute as p, safeClassMap as o } from "@arcgis/lumina";
 import { getNearestOverflowAncestor as b } from "@floating-ui/utils/dom";
-import { h as C, s as u, a as s, o as f } from "../../chunks/dom.js";
-import { u as $, c as O, d, a as g } from "../../chunks/focusTrapComponent.js";
-import { c as S, s as T, a as E } from "../../chunks/loadable.js";
-import { c as v } from "../../chunks/observers.js";
-import { o as B } from "../../chunks/openCloseComponent.js";
-import { g as D } from "../../chunks/component.js";
-import { l as F } from "../../chunks/logger.js";
-import { u as M } from "../../chunks/useT9n.js";
-import { css as H } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+import { h as w, s as u, a as s, o as g } from "../../chunks/dom.js";
+import { c as z } from "../../chunks/loadable.js";
+import { c as f } from "../../chunks/observers.js";
+import { o as C } from "../../chunks/openCloseComponent.js";
+import { g as $ } from "../../chunks/component.js";
+import { l as O } from "../../chunks/logger.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { u as E } from "../../chunks/useFocusTrap.js";
+import { css as T } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const t = {
   modal: "modal",
   title: "title",
@@ -30,7 +28,6 @@ const t = {
   primary: "primary",
   container: "container",
   containerOpen: "container--open",
-  containerEmbedded: "container--embedded",
   content: "content",
   contentNoFooter: "content--no-footer",
   contentBottom: "content-bottom",
@@ -41,36 +38,42 @@ const t = {
   openingActive: "modal--opening-active",
   closingIdle: "modal--closing-idle",
   closingActive: "modal--closing-active"
-}, P = {
+}, B = {
   close: "x"
 }, n = {
   content: "content",
   contentBottom: "content-bottom",
   contentTop: "content-top",
-  header: "header",
   back: "back",
   secondary: "secondary",
   primary: "primary"
-}, L = H`:host{--calcite-modal-scrim-background: rgba(0, 0, 0, .85);position:fixed;inset:0;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(.215,.44,.42,.88);--calcite-modal-scrim-background-internal: rgba(0, 0, 0, .85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:absolute;inset:0;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(.215,.44,.42,.88)}:host([scale=s]){--calcite-modal-padding-internal: .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:absolute;inset:0;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:.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(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(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.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,.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(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.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:.25rem;border-start-end-radius:.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:0;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.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:0;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:0;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:.25rem;border-start-end-radius:.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:.25rem;border-end-start-radius:.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:.25rem;border-end-start-radius:.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:.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:0;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:0;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:0;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:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;--calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(.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:.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:0;margin-block-end:.25rem}}:host([hidden]){display:none}[hidden]{display:none}`;
-let r = 0, x = "";
-class I extends z {
+}, D = T`:host{--calcite-modal-scrim-background: rgba(0, 0, 0, .85);position:fixed;inset:0;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(.215,.44,.42,.88);--calcite-modal-scrim-background-internal: rgba(0, 0, 0, .85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:absolute;inset:0;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(.215,.44,.42,.88)}:host([scale=s]){--calcite-modal-padding-internal: .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:absolute;inset:0;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:.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(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(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.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,.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(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.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:.25rem;border-start-end-radius:.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:0;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.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:0;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:0;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:.25rem;border-start-end-radius:.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:.25rem;border-end-start-radius:.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:.25rem;border-end-start-radius:.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:.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:0;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:0;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:0;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:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;--calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(.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:.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:0;margin-block-end:.25rem}}:host([hidden]){display:none}[hidden]{display:none}`;
+let r = 0, v = "";
+class M extends y {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.closeButtonEl = m(), this.cssVarObserver = v("mutation", () => {
+    super(), this.closeButtonEl = m(), this.cssVarObserver = f("mutation", () => {
       this.updateSizeCssVars();
-    }), this.ignoreOpenChange = !1, this.modalContent = m(), this.mutationObserver = v("mutation", () => this.updateFocusTrapElements()), this._open = !1, this.openEnd = () => {
+    }), this.focusTrap = E({
+      triggerProp: "open",
+      focusTrapOptions: {
+        // scrim closes on click, so we let it take over
+        clickOutsideDeactivates: !1,
+        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
+      }
+    })(this), this.ignoreOpenChange = !1, this.modalContent = m(), this.mutationObserver = f("mutation", () => this.updateFocusTrapElements()), this._open = !1, this.openEnd = () => {
       this.setFocus(), this.el.removeEventListener("calciteModalOpen", this.openEnd);
-    }, this.openTransitionProp = "opacity", this.hasBack = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !1, this.hasPrimary = !1, this.hasSecondary = !1, this.closeButtonDisabled = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.messages = M(), this.opened = !1, this.outsideCloseDisabled = !1, this.scale = "m", this.widthScale = "m", this.calciteModalBeforeClose = l({ cancelable: !1 }), this.calciteModalBeforeOpen = l({ cancelable: !1 }), this.calciteModalClose = l({ cancelable: !1 }), this.calciteModalOpen = l({ cancelable: !1 }), this.keyDownHandler = (e) => {
-      const { defaultPrevented: i, key: k } = e;
-      !i && this.focusTrapDisabled && this.open && !this.escapeDisabled && k === "Escape" && (e.preventDefault(), this.open = !1);
+    }, this.openProp = "opened", this.transitionProp = "opacity", this.hasBack = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !1, this.hasPrimary = !1, this.hasSecondary = !1, this.closeButtonDisabled = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.messages = S(), this.opened = !1, this.outsideCloseDisabled = !1, this.scale = "m", this.widthScale = "m", this.calciteModalBeforeClose = l({ cancelable: !1 }), this.calciteModalBeforeOpen = l({ cancelable: !1 }), this.calciteModalClose = l({ cancelable: !1 }), this.calciteModalOpen = l({ cancelable: !1 }), this.keyDownHandler = (e) => {
+      const { defaultPrevented: i, key: c } = e;
+      !i && this.focusTrapDisabled && this.open && !this.escapeDisabled && c === "Escape" && (e.preventDefault(), this.open = !1);
     }, this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { contentEl: 16, cssHeight: 16, cssWidth: 16, hasBack: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, hasPrimary: 16, hasSecondary: 16, titleEl: 16, beforeClose: 0, closeButtonDisabled: 7, docked: 7, escapeDisabled: 7, focusTrapDisabled: 7, fullscreen: 7, kind: 3, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, scale: 3, widthScale: 3 };
+    this.properties = { contentEl: 16, cssHeight: 16, cssWidth: 16, hasBack: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, hasPrimary: 16, hasSecondary: 16, titleEl: 16, beforeClose: 0, closeButtonDisabled: 7, docked: 7, escapeDisabled: 7, focusTrapDisabled: 7, focusTrapOptions: 0, fullscreen: 7, kind: 3, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, scale: 3, widthScale: 3 };
   }
   static {
-    this.styles = L;
+    this.styles = D;
   }
   /** When `true`, displays and positions the component. */
   get open() {
@@ -93,39 +96,33 @@ class I extends z {
   }
   /** Sets focus on the component's "close" button (the first focusable item). */
   async setFocus() {
-    await S(this), C(this.el);
+    await z(this), w(this.el);
   }
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  async updateFocusTrapElements() {
-    $(this);
+  /**
+   * Updates the element(s) that are included in the focus-trap of the component.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  async updateFocusTrapElements(e) {
+    this.focusTrap.setExtraContainers(e), this.focusTrap.updateContainerElements();
   }
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] }), this.updateSizeCssVars(), O(this, {
-      focusTrapOptions: {
-        // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: !1,
-        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
-      }
-    });
+    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] }), this.updateSizeCssVars();
   }
   async load() {
-    F.deprecated("component", {
+    O.deprecated("component", {
       name: "modal",
       removalVersion: 4,
       suggested: "dialog"
-    }), T(this), this.open && this.openModal();
+    }), this.open && this.openModal();
   }
   willUpdate(e) {
-    e.has("focusTrapDisabled") && (this.hasUpdated || this.focusTrapDisabled !== !1) && this.handleFocusTrapDisabled(this.focusTrapDisabled), (e.has("hasBack") && (this.hasUpdated || this.hasBack !== !1) || e.has("hasPrimary") && (this.hasUpdated || this.hasPrimary !== !1) || e.has("hasSecondary") && (this.hasUpdated || this.hasSecondary !== !1)) && (this.hasFooter = this.hasBack || this.hasPrimary || this.hasSecondary), e.has("opened") && (this.hasUpdated || this.opened !== !1) && this.handleOpenedChange(this.opened);
+    (e.has("hasBack") && (this.hasUpdated || this.hasBack !== !1) || e.has("hasPrimary") && (this.hasUpdated || this.hasPrimary !== !1) || e.has("hasSecondary") && (this.hasUpdated || this.hasSecondary !== !1)) && (this.hasFooter = this.hasBack || this.hasPrimary || this.hasSecondary), e.has("opened") && (this.hasUpdated || this.opened !== !1) && this.handleOpenedChange(this.opened);
   }
   loaded() {
-    E(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.cssVarObserver?.disconnect(), d(this);
-  }
-  handleFocusTrapDisabled(e) {
-    this.open && (e ? d(this) : g(this));
+    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.cssVarObserver?.disconnect();
   }
   handleHeaderSlotChange(e) {
     this.titleEl = u(e)[0];
@@ -149,26 +146,29 @@ class I extends z {
     this.transitionEl?.classList.add(t.openingActive), this.calciteModalBeforeOpen.emit();
   }
   onOpen() {
-    this.transitionEl?.classList.remove(t.openingIdle, t.openingActive), this.calciteModalOpen.emit(), g(this);
+    this.transitionEl?.classList.remove(t.openingIdle, t.openingActive), this.calciteModalOpen.emit(), this.focusTrap.activate();
   }
   onBeforeClose() {
     this.transitionEl?.classList.add(t.closingActive), this.calciteModalBeforeClose.emit();
   }
   onClose() {
-    this.transitionEl?.classList.remove(t.closingIdle, t.closingActive), this.calciteModalClose.emit(), d(this);
+    this.transitionEl?.classList.remove(t.closingIdle, t.closingActive), this.calciteModalClose.emit(), this.focusTrap.deactivate();
   }
   toggleModal(e) {
     this.ignoreOpenChange || (e ? this.openModal() : this.closeModal());
   }
   handleOpenedChange(e) {
-    const i = e ? t.openingIdle : t.closingIdle;
-    this.transitionEl.classList.add(i), B(this);
+    const { transitionEl: i } = this;
+    if (!i)
+      return;
+    const c = e ? t.openingIdle : t.closingIdle;
+    i.classList.add(c), C(this);
   }
   handleCloseClick() {
     this.open = !1;
   }
   async openModal() {
-    await this.componentOnReady(), this.el.addEventListener("calciteModalOpen", this.openEnd), this.opened = !0, this.titleId = f(this.titleEl), this.contentId = f(this.contentEl), b(this.el) === document.body && (r === 0 && (x = document.documentElement.style.overflow), r++, document.documentElement.style.setProperty("overflow", "hidden"));
+    await this.componentOnReady(), this.el.addEventListener("calciteModalOpen", this.openEnd), this.opened = !0, this.titleId = g(this.titleEl), this.contentId = g(this.contentEl), b(this.el) === document.body && (r === 0 && (v = document.documentElement.style.overflow), r++, document.documentElement.style.setProperty("overflow", "hidden"));
   }
   handleOutsideClose() {
     this.outsideCloseDisabled || (this.open = !1);
@@ -186,7 +186,7 @@ class I extends z {
     b(this.el) === document.body && (r--, r === 0 && this.removeOverflowHiddenClass()), this.opened = !1;
   }
   removeOverflowHiddenClass() {
-    document.documentElement.style.setProperty("overflow", x);
+    document.documentElement.style.setProperty("overflow", v);
   }
   updateSizeCssVars() {
     this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width"), this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
@@ -205,10 +205,10 @@ class I extends z {
       [t.containerOpen]: this.opened
     })}><calcite-scrim class=${o(t.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>${this.renderStyle()}<div class=${o({
       [t.modal]: !0
-    })} ${c(this.setTransitionEl)}><div class=${o(t.header)}>${this.renderCloseButton()}<header class=${o(t.title)}><slot name=${t.header} @slotchange=${this.handleHeaderSlotChange}></slot></header></div>${this.renderContentTop()}<div class=${o({
+    })} ${d(this.setTransitionEl)}><div class=${o(t.header)}>${this.renderCloseButton()}<header class=${o(t.title)}><slot name=${t.header} @slotchange=${this.handleHeaderSlotChange}></slot></header></div>${this.renderContentTop()}<div class=${o({
       [t.content]: !0,
       [t.contentNoFooter]: !this.hasFooter
-    })} ${c(this.modalContent)}><slot name=${n.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
+    })} ${d(this.modalContent)}><slot name=${n.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
   }
   renderFooter() {
     return h("footer", a`<div class=${o(t.footer)} .hidden=${!this.hasFooter}><span class=${o(t.back)}><slot name=${n.back} @slotchange=${this.handleBackSlotChange}></slot></span><span class=${o(t.secondary)}><slot name=${n.secondary} @slotchange=${this.handleSecondarySlotChange}></slot></span><span class=${o(t.primary)}><slot name=${n.primary} @slotchange=${this.handlePrimarySlotChange}></slot></span></div>`);
@@ -220,7 +220,7 @@ class I extends z {
     return a`<div class=${o(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${n.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
   }
   renderCloseButton() {
-    return this.closeButtonDisabled ? null : h("button", a`<button .ariaLabel=${this.messages.close} class=${o(t.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? w} ${c(this.closeButtonEl)}><calcite-icon .icon=${P.close} .scale=${D(this.scale)}></calcite-icon></button>`);
+    return this.closeButtonDisabled ? null : h("button", a`<button .ariaLabel=${this.messages.close} class=${o(t.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? k} ${d(this.closeButtonEl)}><calcite-icon .icon=${B.close} .scale=${$(this.scale)}></calcite-icon></button>`);
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight))
@@ -251,7 +251,7 @@ class I extends z {
           `}</style>`;
   }
 }
-y("calcite-modal", I);
+x("calcite-modal", M);
 export {
-  I as Modal
+  M as Modal
 };

package/dist/components/calcite-navigation/customElement.js

@@ -1,15 +1,13 @@
 import { c as r } from "../../chunks/runtime.js";
-import { html as s } from "lit-html";
+import { html as i } from "lit-html";
 import { createRef as l, ref as c } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as h, safeClassMap as o } from "@arcgis/lumina";
 import { a as n } from "../../chunks/dom.js";
-import { c as d, s as g, a as S } from "../../chunks/loadable.js";
-import { css as y } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+import { c as d } from "../../chunks/loadable.js";
+import { css as g } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const a = {
   container: "container",
   containerContent: "container-content",
@@ -28,10 +26,10 @@ const a = {
   contentCenter: "content-center",
   navSecondary: "navigation-secondary",
   navTertiary: "navigation-tertiary"
-}, v = {
+}, S = {
   hamburger: "hamburger"
-}, p = y`:host([hidden]){display:none}[hidden]{display:none}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}`;
-class C extends m {
+}, y = g`:host([hidden]){display:none}[hidden]{display:none}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}`;
+class v extends m {
   constructor() {
     super(...arguments), this.navigationActionEl = l(), this.navigationAction = !1, this.calciteNavigationActionSelect = h({ cancelable: !1 });
   }
@@ -39,7 +37,7 @@ class C extends m {
     this.properties = { logoSlotHasElements: 16, navigationActionSlotHasElements: 16, primaryContentCenterSlotHasElements: 16, primaryContentEndSlotHasElements: 16, primaryContentStartSlotHasElements: 16, progressSlotHasElement: 16, secondarySlotHasElements: 16, tertiarySlotHasElements: 16, userSlotHasElements: 16, label: 1, navigationAction: 7 };
   }
   static {
-    this.styles = p;
+    this.styles = y;
   }
   // #endregion
   // #region Public Methods
@@ -50,10 +48,8 @@ class C extends m {
   // #endregion
   // #region Lifecycle
   load() {
-    g(this);
   }
   loaded() {
-    S(this);
   }
   // #endregion
   // #region Private Methods
@@ -93,19 +89,19 @@ class C extends m {
   // #endregion
   // #region Rendering
   renderMenuAction() {
-    return s`<slot name=${e.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && s`<calcite-action .icon=${v.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${c(this.navigationActionEl)}></calcite-action>` || ""}</slot>`;
+    return i`<slot name=${e.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && i`<calcite-action .icon=${S.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${c(this.navigationActionEl)}></calcite-action>` || ""}</slot>`;
   }
   render() {
-    const t = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction, i = this.el.slot;
-    return s`<div class=${o({
+    const t = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction, s = this.el.slot;
+    return i`<div class=${o({
       [a.container]: !0,
-      [a.secondary]: i === e.navSecondary,
-      [a.tertiary]: i === e.navTertiary,
+      [a.secondary]: s === e.navSecondary,
+      [a.tertiary]: s === e.navTertiary,
       [a.primary]: t
     })}><div class=${o({ [a.hide]: !this.progressSlotHasElement, [e.progress]: !0 })}><slot name=${e.progress} @slotchange=${this.handleProgressSlotChange}></slot></div><div class=${o({ [a.containerContent]: !0, [a.hasProgress]: this.progressSlotHasElement })}>${this.renderMenuAction()}<div class=${o({ [a.hide]: !this.logoSlotHasElements, [e.logo]: !0 })}><slot name=${e.logo} @slotchange=${this.handleLogoSlotChange}></slot></div><slot name=${e.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot><slot name=${e.contentCenter} @slotchange=${this.handleContentCenterSlotChange}></slot><slot name=${e.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot><div class=${o({ [a.hide]: !this.userSlotHasElements, [e.user]: !0 })}><slot name=${e.user} @slotchange=${this.handleUserSlotChange}></slot></div></div></div><slot name=${e.navSecondary} @slotchange=${this.handleSecondarySlotChange}></slot><slot name=${e.navTertiary} @slotchange=${this.handleTertiarySlotChange}></slot>`;
   }
 }
-r("calcite-navigation", C);
+r("calcite-navigation", v);
 export {
-  C as Navigation
+  v as Navigation
 };

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

@@ -2,14 +2,12 @@ import { c as h } from "../../chunks/runtime.js";
 import { html as e } from "lit-html";
 import { keyed as s } from "lit-html/directives/keyed.js";
 import { LitElement as p, safeClassMap as o, nothing as i } from "@arcgis/lumina";
-import { c as v, s as f, a as m } from "../../chunks/loadable.js";
-import { H as u } from "../../chunks/Heading.js";
-import { css as x } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+import { c as v } from "../../chunks/loadable.js";
+import { H as f } from "../../chunks/Heading.js";
+import { css as m } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const t = {
   container: "container",
   containerLink: "container--link",
@@ -19,8 +17,8 @@ const t = {
   image: "image",
   standalone: "standalone",
   icon: "icon"
-}, b = x`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.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-navigation-logo-heading-text-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);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
-class $ extends p {
+}, u = m`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.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-navigation-logo-heading-text-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);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
+class x extends p {
   constructor() {
     super(...arguments), this.iconFlipRtl = !1;
   }
@@ -31,7 +29,7 @@ class $ extends p {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = b;
+    this.styles = u;
   }
   // #endregion
   // #region Public Methods
@@ -42,10 +40,8 @@ class $ extends p {
   // #endregion
   // #region Lifecycle
   load() {
-    f(this);
   }
   loaded() {
-    m(this);
   }
   // #endregion
   // #region Rendering
@@ -53,7 +49,7 @@ class $ extends p {
     return e`<calcite-icon class=${o(t.icon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} scale=l></calcite-icon>`;
   }
   renderHeaderContent() {
-    const { heading: n, headingLevel: a, description: r } = this, c = n ? s(t.heading, u({ class: {
+    const { heading: n, headingLevel: a, description: r } = this, c = n ? s(t.heading, f({ class: {
       [t.heading]: !0,
       [t.standalone]: !this.description
     }, level: a, children: n })) : null, l = r ? s(t.description, e`<span class=${o(t.description)}>${r}</span>`) : null;
@@ -67,7 +63,7 @@ class $ extends p {
     })} href=${a ?? i} rel=${c ?? i} target=${l ?? i}>${g}</a>` : e`<div class=${o(t.container)}>${g}</div>`;
   }
 }
-h("calcite-navigation-logo", $);
+h("calcite-navigation-logo", x);
 export {
-  $ as NavigationLogo
+  x as NavigationLogo
 };

package/dist/components/calcite-navigation-user/customElement.js

@@ -2,20 +2,18 @@ import { c as i } from "../../chunks/runtime.js";
 import { html as a } from "lit-html";
 import { keyed as o } from "lit-html/directives/keyed.js";
 import { LitElement as n, safeClassMap as e } from "@arcgis/lumina";
-import { c as r, s as l, a as s } from "../../chunks/loadable.js";
-import { css as c } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+import { c as r } from "../../chunks/loadable.js";
+import { css as l } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const t = {
   textContainer: "text-container",
   fullName: "full-name",
   username: "username",
   button: "button"
-}, u = c`:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border:none;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem;--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1))}.username{font-size:var(--calcite-font-size--1);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2))}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
-class m extends n {
+}, c = l`:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border:none;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem;--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1))}.username{font-size:var(--calcite-font-size--1);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2))}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+class s extends n {
   constructor() {
     super(...arguments), this.textDisabled = !1;
   }
@@ -26,7 +24,7 @@ class m extends n {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = u;
+    this.styles = c;
   }
   // #endregion
   // #region Public Methods
@@ -37,10 +35,8 @@ class m extends n {
   // #endregion
   // #region Lifecycle
   load() {
-    l(this);
   }
   loaded() {
-    s(this);
   }
   // #endregion
   // #region Rendering
@@ -48,7 +44,7 @@ class m extends n {
     return a`<button .ariaLabel=${this.label} class=${e(t.button)}><calcite-avatar .fullName=${this.fullName} .label=${this.label} .thumbnail=${this.thumbnail} .userId=${this.userId} .username=${this.username}></calcite-avatar>${(this.fullName || this.username) && !this.textDisabled && a`<div class=${e(t.textContainer)}>${this.fullName && o(t.fullName, a`<span class=${e(t.fullName)}>${this.fullName}</span>`) || ""}${this.username && o(t.username, a`<span class=${e(t.username)}>${this.username}</span>`) || ""}</div>` || ""}</button>`;
   }
 }
-i("calcite-navigation-user", m);
+i("calcite-navigation-user", s);
 export {
-  m as NavigationUser
+  s as NavigationUser
 };