@esri/solutions-components 0.10.26 → 0.10.28

package/dist/esm/calcite-dialog.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, c as createEvent, h, H as Host, g as getElement } from './index-b793d9aa.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-904bc599.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-089957fe.js';
-import { t as toAriaBoolean, f as focusFirstTabbable } from './dom-42a638f6.js';
-import { c as connectFocusTrap, d as deactivateFocusTrap, u as updateFocusTrapElements, a as activateFocusTrap } from './focusTrapComponent-c1def619.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-1a9b14b8.js';
-import { c as createObserver } from './observers-6cac5525.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-9d44719e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-a53a7bc6.js';
-import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-b33c486a.js';
-import { c as componentOnReady } from './component-d35983a4.js';
-import { S as SLOTS$1 } from './resources-57625076.js';
-import './guid-42656051.js';
-import './resources-745dec87.js';
-import './config-8d1c3431.js';
-import './browser-a791205e.js';
-import './key-d6dfb50e.js';
+import { t as toAriaBoolean, f as focusFirstTabbable } from './dom-75c641a7.js';
+import { c as connectFocusTrap, d as deactivateFocusTrap, u as updateFocusTrapElements, a as activateFocusTrap } from './focusTrapComponent-35b3348c.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-7cb2fc6f.js';
+import { c as createObserver } from './observers-c83631e8.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-f642bffd.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-24516fec.js';
+import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-9a5d28cf.js';
+import { c as componentOnReady } from './component-83541c88.js';
+import { S as SLOTS$1 } from './resources-35208c6c.js';
+import './guid-b0fb1de3.js';
+import './resources-8e2ed936.js';
+import './config-16813c92.js';
+import './browser-b67d8df6.js';
+import './key-e6b442de.js';
 
 var interact_min = {exports: {}};
 
@@ -34,7 +34,7 @@ const interact = interact_min.exports;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     dialog: "dialog",
@@ -66,7 +66,7 @@ const dialogDragStep = 25;
 const initialDragPosition = { x: 0, y: 0 };
 const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
 
-const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;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([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;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:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{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)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;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([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);--calcite-panel-background-color:var(--calcite-dialog-background-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;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:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{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)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteDialogStyle0 = dialogCss;
 
 let totalOpenDialogs = 0;
@@ -166,9 +166,6 @@ const Dialog = class {
                     break;
             }
         };
-        this.setContainerEl = (el) => {
-            this.containerEl = el;
-        };
         this.setTransitionEl = (el) => {
             this.transitionEl = el;
             this.setupInteractions();
@@ -192,7 +189,7 @@ const Dialog = class {
             this.open = false;
         };
         this.handlePanelKeyDown = (event) => {
-            if (this.escapeDisabled) {
+            if (this.escapeDisabled && event.key === "Escape") {
                 event.preventDefault();
             }
         };
@@ -298,11 +295,11 @@ const Dialog = class {
     }
     render() {
         const { assistiveText, description, heading, opened } = this;
-        return (h(Host, { key: '6a00a9f9c7c9ba8079b24cae446322bfa258348d' }, h("div", { key: 'd7a5e0f37a1fe05852bdd1b88a8b47f185e1bf71', class: {
+        return (h(Host, { key: 'bf406255eaa6d94c8443af185a74a2b2d58c6d59' }, h("div", { key: 'de2a34b6da4a82c66e9fafdbdd2056e4e11e1315', class: {
                 [CSS.container]: true,
                 [CSS.containerOpen]: opened,
                 [CSS.containerEmbedded]: this.embedded,
-            }, ref: this.setContainerEl }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'f0236b163b7f7856033c581b9191d0fc491eee46', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: 'b0d18a7ce3e4ad5df276b8f04f41284bbe55efff', name: SLOTS.content }, h("calcite-panel", { key: '65bcc069837d6749c84351d7ca29c82e112ff809', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '90a1b0007537031a9c1ae3761f48d05d3dd62d78', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'b32c13fd7cf274e1fb9ffa071a7406e1a26e0b72', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'd3433c5b0ed4ec801950a72cea50f61efa9b6b8e', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '164df8e6a746f0e351c629193c5052a3f9254e48', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'e67304954b705afe57384f27214ecab5b89eaed9', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'b4108e58478e2e4e00494c8c8e7b1790804f55ee', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'c9b54cd7003e3ff18c000fb32215b9dd0de6586e', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'bf3b9d2fcbbda75832d3c27a4a5118b7eca0c891', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: 'db86d0c4aa3b8655e6566462d47c33d2ae2a8518', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '98d5f7a2864e00b5f5a13110b892c7f52c12cf93', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '8a104a39303414390b745f23987466abaa7a874c', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '15673502ce16cab5f70c6be6204c8b9d59c3ce88', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '7dfb7dd86d4019c9256adccc7b16554b9fe0a05c' })))))));
+            } }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'be47093e3a955ce45a71c555700143a4a1c7a166', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: '6ed9f10ae7d5ecc1ec9062d6aba559001d5194e6', name: SLOTS.content }, h("calcite-panel", { key: 'cd6ebaa7d7362cbeb70e9ae623f38298d1e831e3', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '2ce955775c33b09fc849a083d0bcc1c8ce523dd8', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'dd44184de251320af6225baa2e59571b881a23cd', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'da343a1a10e015b04b37463c10592e612a576e9b', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '6680fde2bd7ad6dc5803c78ea7250d11d4920b7c', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'a17ca64188ffe6000792e67eafc838df575ebbc3', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '7e048c4a9104053ca0a61ab2514b018efb4fc872', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '6760c8a6c105a511fcb859cfd222f8c1355a82c4', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'e0f2e7644281d408d8c21ce5bf16b08af0a59c3b', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '01889c3b7fc13bc49521c27feb2ab35346552504', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '593bad35110b5d7e7b44d598b397e4b87cc28e28', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '5e84099e096a6afb678cce9731b189f4011dc067', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '69a805bd0c1f43a6d165939e62db562428f39f11', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: 'b49e14ff6d2c63caaa8fd296920618e7673eb71b' })))))));
     }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);

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

@@ -3,25 +3,25 @@
  * 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-b793d9aa.js';
-import { f as focusFirstTabbable, t as toAriaBoolean, b as focusElementInGroup, d as focusElement } from './dom-42a638f6.js';
-import { f as filterValidFlipPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-a14930d0.js';
-import { g as guid } from './guid-42656051.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-b2a41b8b.js';
-import { i as isActivationKey } from './key-d6dfb50e.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-1a9b14b8.js';
-import { c as createObserver } from './observers-6cac5525.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-9d44719e.js';
-import { g as getIconScale } from './component-d35983a4.js';
-import { C as CSS } from './resources-9494c015.js';
-import './resources-745dec87.js';
-import './browser-a791205e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-904bc599.js';
+import { d as focusElement, f as focusFirstTabbable, t as toAriaBoolean, b as focusElementInGroup } from './dom-75c641a7.js';
+import { f as filterValidFlipPlacements, c as connectFloatingUI, a as defaultMenuPlacement, b as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-93b345b1.js';
+import { g as guid } from './guid-b0fb1de3.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-98ed6b6f.js';
+import { i as isActivationKey } from './key-e6b442de.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-7cb2fc6f.js';
+import { c as createObserver } from './observers-c83631e8.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-f642bffd.js';
+import { g as getIconScale } from './component-83541c88.js';
+import { C as CSS } from './resources-c1a8d628.js';
+import './resources-8e2ed936.js';
+import './browser-b67d8df6.js';
 import './debounce-6e9ade8c.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.
- * v2.12.2
+ * v2.13.0
  */
 const SLOTS = {
     dropdownTrigger: "trigger",
@@ -44,6 +44,7 @@ const Dropdown = class {
         this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
         this.openTransitionProp = "opacity";
         this.guid = `calcite-dropdown-${guid()}`;
+        this.focusLastDropdownItem = false;
         //--------------------------------------------------------------------------
         //
         //  Private Methods
@@ -128,38 +129,44 @@ const Dropdown = class {
             if (defaultPrevented) {
                 return;
             }
-            if (this.open) {
-                if (key === "Escape") {
-                    this.closeCalciteDropdown();
-                    event.preventDefault();
-                    return;
-                }
-                else if (event.shiftKey && key === "Tab") {
-                    this.closeCalciteDropdown();
-                    event.preventDefault();
-                    return;
-                }
-            }
-            if (isActivationKey(key)) {
-                this.openCalciteDropdown();
+            if (key === "Escape") {
+                this.closeCalciteDropdown();
                 event.preventDefault();
+                return;
             }
-            else if (key === "Escape") {
+            if (this.open && event.shiftKey && key === "Tab") {
                 this.closeCalciteDropdown();
                 event.preventDefault();
+                return;
+            }
+            if (isActivationKey(key)) {
+                this.toggleDropdown();
+                event.preventDefault();
+            }
+            else if (key === "ArrowDown" || key === "ArrowUp") {
+                this.focusLastDropdownItem = key === "ArrowUp";
+                this.open = true;
+                this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
             }
         };
-        this.focusOnFirstActiveOrFirstItem = () => {
-            this.getFocusableElement(this.getTraversableItems().find((item) => item.selected) || this.items[0]);
+        this.focusOnFirstActiveOrDefaultItem = () => {
+            const selectedItem = this.getTraversableItems().find((item) => item.selected);
+            const target = selectedItem ||
+                (this.focusLastDropdownItem ? this.items[this.items.length - 1] : this.items[0]);
+            this.focusLastDropdownItem = false;
+            if (!target) {
+                return;
+            }
+            focusElement(target);
         };
-        this.toggleOpenEnd = () => {
-            this.focusOnFirstActiveOrFirstItem();
-            this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+        this.onOpenEnd = () => {
+            this.focusOnFirstActiveOrDefaultItem();
+            this.el.removeEventListener("calciteDropdownOpen", this.onOpenEnd);
         };
-        this.openCalciteDropdown = () => {
+        this.toggleDropdown = () => {
             this.open = !this.open;
             if (this.open) {
-                this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+                this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
             }
         };
         this.open = false;
@@ -226,7 +233,6 @@ const Dropdown = class {
             this.openHandler();
             onToggleOpenCloseComponent(this);
         }
-        connectInteractive(this);
         this.updateItems();
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
@@ -243,16 +249,15 @@ const Dropdown = class {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     render() {
         const { open, guid } = this;
-        return (h(Host, { key: '4b3349c1645b7d39263a20b688f7645d92148f23' }, h(InteractiveContainer, { key: 'db1d56073b9f9db2fbf6eaef824e3f12411dd174', disabled: this.disabled }, h("div", { key: '05de1bb5f3641147441f18eaeae104acb06e47c6', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '39b976c808c4f44983f2d6a056bb128537cf1aae', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: '57ba0f8d3632febcab69b706a73a910f54f09b62', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: 'ae7505fa472d323ad6aed6ea0dd2ab7fdf8e7e59', "aria-labelledby": `${guid}-menubutton`, class: {
+        return (h(Host, { key: '377c3d9687bc025f004b4efe58bfa5f0893d86d0' }, h(InteractiveContainer, { key: '9e2f48be045fc6db10cc7203a8b998ec2b6abafd', disabled: this.disabled }, h("div", { key: '8607de2d53a4f8c4b29206ee56aa23ad4c2cbe3d', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.toggleDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '07de8df34055ddc39301654a5ca312ddf293e6a9', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: 'c1469efb62eb704b021ce6479ad55deda59582d4', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: 'f875166d486a53cd393f17d9295974aa449d449f', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
-            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: 'ae94137311b106fbed88dfde346002d87e4efcbb', onSlotchange: this.updateGroups }))))));
+            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: 'bc6e61383aaf85b3d6242a86c50da68bc8b31e27', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -295,7 +300,7 @@ const Dropdown = class {
         if (this.disabled || this.type !== "hover") {
             return;
         }
-        this.openCalciteDropdown();
+        this.toggleDropdown();
     }
     pointerLeaveHandler() {
         if (this.disabled || this.type !== "hover") {
@@ -387,12 +392,6 @@ const Dropdown = class {
             focusElement(this.triggers[0]);
         }
     }
-    getFocusableElement(item) {
-        if (!item) {
-            return;
-        }
-        focusElement(item);
-    }
     updateTabIndexOfItems(target) {
         this.items.forEach((item) => {
             item.tabIndex = target !== item ? -1 : 0;
@@ -464,9 +463,9 @@ const DropdownItem = class {
     }
     render() {
         const { href, selectionMode, label, iconFlipRtl } = this;
-        const iconStartEl = (h("calcite-icon", { key: '46fd6784a80e78a149e6796018f495f33c9fe172', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const contentNode = (h("span", { key: 'feee494a9e26fad963b71e5aacf3abf9084ec463', class: CSS.itemContent }, h("slot", { key: '33e49b095819a250f469d457279f6a340ff31fd4' })));
-        const iconEndEl = (h("calcite-icon", { key: 'ea58bc58292cf76bcda6826e3c402079b0d3ad69', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const iconStartEl = (h("calcite-icon", { key: '1ec1c941651dda8f39fa15427592141f04180f3e', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const contentNode = (h("span", { key: '3ab167ed4054ca34b4e13e72b752af6cf25522ae', class: CSS.itemContent }, h("slot", { key: '88cf44809fb48450c66cc8f105bbda008a78157d' })));
+        const iconEndEl = (h("calcite-icon", { key: '32fb27182943a032c0037f1f878a95c194d2dff1', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
         const slottedContent = this.iconStart && this.iconEnd
             ? [iconStartEl, contentNode, iconEndEl]
             : this.iconStart
@@ -484,7 +483,7 @@ const DropdownItem = class {
                     : "menuitem";
         const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
         const { disabled } = this;
-        return (h(Host, { key: '269693a7a036a7e39f4f8d529695df44f34df22a', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '0c644e048c9e30b8062cd60f7574c3e8fb631b4c', disabled: disabled }, h("div", { key: 'd5c9098d6c3007d5f05b28770074f6833a43d53f', class: {
+        return (h(Host, { key: 'beec8e51bf18bdcab1928181828b372cc70bb7ee', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '5cbbd1074d6c571f4cac3a99e4a2c09bf113db55', disabled: disabled }, h("div", { key: 'bff025aeb280c9d0d829e5cf4d94e9392604e607', class: {
                 [CSS.container]: true,
                 [CSS.containerNone]: selectionMode === "none",
             } }, selectionMode !== "none" ? (h("calcite-icon", { class: CSS.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl))));

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

@@ -3,18 +3,18 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, g as getElement } from './index-b793d9aa.js';
-import { d as focusElement } from './dom-42a638f6.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-b2a41b8b.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-1a9b14b8.js';
-import './guid-42656051.js';
-import './resources-745dec87.js';
-import './browser-a791205e.js';
+import { r as registerInstance, h, g as getElement } from './index-904bc599.js';
+import { d as focusElement } from './dom-75c641a7.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-98ed6b6f.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-7cb2fc6f.js';
+import './guid-b0fb1de3.js';
+import './resources-8e2ed936.js';
+import './browser-b67d8df6.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.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     button: "button",
@@ -45,9 +45,6 @@ const Fab = class {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -57,9 +54,6 @@ const Fab = class {
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Methods
@@ -78,7 +72,7 @@ const Fab = class {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (h(InteractiveContainer, { key: 'a3f179f9542d93366d6befded12604369f905580', disabled: disabled }, h("calcite-button", { key: '2adc3c8d6408743bfa905995ce75c7ed4d241733', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
+        return (h(InteractiveContainer, { key: '7953bd06defeddfed5530500901609524f7b58fd', disabled: disabled }, h("calcite-button", { key: 'c2bbe2be5e2ac375abab75024005f1eb5afed51c', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
                 this.buttonEl = buttonEl;
             }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null)));
     }