@esri/solutions-components 0.10.4 → 0.10.5

package/dist/components/calcite-color-picker.js

@@ -4,8 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, c as Color, o as opacityToAlpha, d as CSS, e as alphaToOpacity, D as DEFAULT_COLOR, f as DIMENSIONS, g as getSliderWidth, p as parseMode, j as normalizeColor, k as colorEqual, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, l as normalizeAlpha, m as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, q as DEFAULT_STORAGE_KEY_PREFIX, r as toAlphaMode, R as RGB_LIMITS } from './utils.js';
-import { i as isPrimaryPointerButton, g as getElementDir } from './dom.js';
+import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, c as Color, o as opacityToAlpha, d as CSS, e as alphaToOpacity, D as DEFAULT_COLOR, f as DIMENSIONS, g as getSliderWidth, p as parseMode, j as normalizeColor, k as colorEqual, R as RGB_LIMITS, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, l as normalizeAlpha, m as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, q as DEFAULT_STORAGE_KEY_PREFIX, r as toAlphaMode } from './utils.js';
+import { i as isPrimaryPointerButton, g as getElementDir, k as focusFirstTabbable } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -38,8 +38,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
         this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 6);
         this.internalColorUpdateContext = null;
+        this.isActiveChannelInputEmpty = false;
         this.mode = CSSColorMode.HEX;
         this.shiftKeyChannelAdjustment = 0;
+        this.upOrDownArrowKeyTracker = null;
         this.handleTabActivate = (event) => {
             this.channelMode = event.currentTarget.getAttribute("data-color-mode");
             this.updateChannelsFromColor(this.color);
@@ -103,8 +105,11 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                     ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
                     : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.isClearable && !input.value) {
+            if (!input.value) {
                 inputValue = "";
+                this.isActiveChannelInputEmpty = true;
+                // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed
+                this.upOrDownArrowKeyTracker = null;
             }
             else {
                 const value = Number(input.value);
@@ -117,6 +122,22 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 // we treat nudging as a change event since the input won't emit when modifying the value directly
                 this.handleChannelChange(event);
             }
+            else if (inputValue !== "") {
+                this.handleChannelChange(event);
+            }
+        };
+        this.handleChannelBlur = (event) => {
+            const input = event.currentTarget;
+            const channelIndex = Number(input.getAttribute("data-channel-index"));
+            const channels = [...this.channels];
+            const restoreValueDueToEmptyInput = !input.value && !this.isClearable;
+            if (restoreValueDueToEmptyInput) {
+                input.value = channels[channelIndex]?.toString();
+            }
+        };
+        this.handleChannelFocus = (event) => {
+            const input = event.currentTarget;
+            input.selectText();
         };
         this.handleChannelChange = (event) => {
             const input = event.currentTarget;
@@ -129,7 +150,17 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 return;
             }
             const isAlphaChannel = channelIndex === 3;
-            const value = Number(input.value);
+            if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
+                input.value =
+                    this.upOrDownArrowKeyTracker === "up"
+                        ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)
+                            ? channels[channelIndex] + 1
+                            : this.getChannelInputLimit(channelIndex)).toString()
+                        : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
+                this.isActiveChannelInputEmpty = false;
+                this.upOrDownArrowKeyTracker = null;
+            }
+            const value = input.value ? Number(input.value) : channels[channelIndex];
             channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;
             this.updateColorFromChannels(channels);
         };
@@ -151,7 +182,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureColorFieldColor(offsetX, offsetY);
-            this.colorFieldScopeNode.focus();
+            this.focusScope(this.colorFieldScopeNode);
         };
         this.handleHueSliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -165,7 +196,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureHueSliderColor(offsetX);
-            this.hueScopeNode.focus();
+            this.focusScope(this.hueScopeNode);
         };
         this.handleOpacitySliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -179,7 +210,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureOpacitySliderValue(offsetX);
-            this.opacityScopeNode.focus();
+            this.focusScope(this.opacityScopeNode);
         };
         this.globalPointerUpHandler = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -268,7 +299,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             }))));
         };
         this.renderChannel = (value, index, ariaLabel, direction, suffix) => {
-            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
                 // workaround to ensure input borders overlap as desired
                 // this is because the build transforms margin-left to its
                 // logical-prop, which is undesired as channels are always ltr
@@ -484,6 +515,22 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 : key === "ArrowDown" && shiftKey
                     ? -complementaryBump
                     : 0;
+        if (key === "ArrowUp") {
+            this.upOrDownArrowKeyTracker = "up";
+        }
+        if (key === "ArrowDown") {
+            this.upOrDownArrowKeyTracker = "down";
+        }
+    }
+    getChannelInputLimit(channelIndex) {
+        return this.channelMode === "rgb"
+            ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
+            : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    }
+    focusScope(focusEl) {
+        requestAnimationFrame(() => {
+            focusEl.focus();
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -493,7 +540,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await componentFocusable(this);
-        this.el.focus();
+        focusFirstTabbable(this.el);
     }
     //--------------------------------------------------------------------------
     //
@@ -561,10 +608,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (h(InteractiveContainer, { key: 'ed8d6d887db9dc3d3e345b52b290094bde5541a8', disabled: this.disabled }, h("div", { key: '06f7fc8c31b3165de13f20219d7c138f162e059d', class: CSS.container }, h("div", { key: '79d751d245545fe729cb62660436ac67589a4be8', class: CSS.controlAndScope }, h("canvas", { key: '6fa2716d392b2f41f7c96e21d6e30c7738df4191', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: 'c51f4c15946f87bb71674c3aadd024cbd7514d55', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (h(InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, h("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: CSS.container }, h("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: CSS.controlAndScope }, h("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), h("div", { key: '6f93b38c9b16234cd5bd68edbc6c44ed4351fab4', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'dd12a18e453040e5af19c1e37ccbec3573cfd06b', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'cf3b9c928b0d43f912726d13b584afd90f028aa5', class: CSS.sliders }, h("div", { key: '77906dfdb66f64405ae2a62c942064d66eccf22d', class: CSS.controlAndScope }, h("canvas", { key: '1b8ed2fd600e16ddd34c3e3d97ee7c3c3fc21125', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '73cb98a5adfd188433c434c0f832ac660f00966f', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), h("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: CSS.sliders }, h("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: CSS.controlAndScope }, h("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -907,7 +954,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     getAdjustedScopePosition(left, top) {
         return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
     }
-    static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
@@ -923,7 +969,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
     static get style() { return CalciteColorPickerStyle0; }
-}, [17, "calcite-color-picker", {
+}, [1, "calcite-color-picker", {
         "allowEmpty": [516, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],
         "channelsDisabled": [4, "channels-disabled"],

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

@@ -5,12 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
-import { e as getAncestors, f as getDepth } from './utils2.js';
+import { f as getAncestors, j as getDepth } from './utils2.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.10.1
+ * v2.11.1
  */
 const CSS = {
     list: "list",
@@ -48,7 +48,7 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
     render() {
         const { el, scale } = this;
         const depth = getDepth(el);
-        return (h("ul", { key: 'f97f7287323229be32779d451a7e816b016c02b4', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { key: 'e7aa9b0a2955562d9687c294b3b39eafbd04c5a2', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { key: '5b02b92d24c05a93a5aeeda140f7422c50fb52b0', class: CSS.title }, this.label)), h("slot", { key: '1a2e106d97304df29b2cbf5841e65726e55960ae' })));
+        return (h("ul", { key: 'e57f7805f680b7d8b89f1f72c98197d81ad743dd', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { key: '45ab46a79eb035a0785ea9d2665a3fce8cf7c183', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { key: '380bfd8d85a132df1252e88971adca1b50104801', class: CSS.title }, this.label)), h("slot", { key: 'e0fd9bec45fc259ee2b439a0b80665c742fb5632' })));
     }
     get el() { return this; }
     static get style() { return CalciteComboboxItemGroupStyle0; }

package/dist/components/calcite-dialog.js

@@ -0,0 +1,390 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as toAriaBoolean, k as focusFirstTabbable } from './dom.js';
+import { c as connectFocusTrap, d as deactivateFocusTrap, u as updateFocusTrapElements, a as activateFocusTrap } from './focusTrapComponent.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { c as createObserver } from './observers.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { c as componentOnReady } from './component.js';
+import { d as defineCustomElement$4, S as SLOTS$1 } from './panel.js';
+import { d as defineCustomElement$8 } from './action.js';
+import { d as defineCustomElement$7 } from './action-menu.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './loader.js';
+import { d as defineCustomElement$3 } from './popover.js';
+import { d as defineCustomElement$2 } from './scrim.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.11.1
+ */
+const CSS = {
+    dialog: "dialog",
+    panel: "panel",
+    scrim: "scrim",
+    container: "container",
+    containerOpen: "container--open",
+    containerEmbedded: "container--embedded",
+    content: "content",
+    // these classes help apply the animation in phases to only set transform on open/close
+    // this helps avoid a positioning issue for any floating-ui-owning children
+    openingIdle: "dialog--opening-idle",
+    openingActive: "dialog--opening-active",
+    closingIdle: "dialog--closing-idle",
+    closingActive: "dialog--closing-active",
+};
+const SLOTS = {
+    actionBar: "action-bar",
+    alerts: "alerts",
+    content: "content",
+    contentTop: "content-top",
+    contentBottom: "content-bottom",
+    headerActionsStart: "header-actions-start",
+    headerActionsEnd: "header-actions-end",
+    headerMenuActions: "header-menu-actions",
+    headerContent: "header-content",
+    fab: "fab",
+    footer: "footer",
+    footerStart: "footer-start",
+    footerEnd: "footer-end",
+};
+
+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}: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-y: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-spacing-sm);--calcite-internal-dialog-padding:0.75rem;--calcite-internal-dialog-padding-large:1rem;--calcite-internal-dialog-title-text:var(--calcite-font-size-1);--calcite-internal-dialog-content-text:var(--calcite-font-size--1)}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-spacing-md);--calcite-internal-dialog-padding:1rem;--calcite-internal-dialog-padding-large:1.25rem;--calcite-internal-dialog-title-text:var(--calcite-font-size-2);--calcite-internal-dialog-content-text:var(--calcite-font-size-0)}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-spacing-lg);--calcite-internal-dialog-padding:1.25rem;--calcite-internal-dialog-padding-large:1.5rem;--calcite-internal-dialog-title-text:var(--calcite-font-size-3);--calcite-internal-dialog-content-text:var(--calcite-font-size-1)}.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-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color)}.content{padding:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding))}.dialog{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;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:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-internal-dialog-hidden-position:translate3d(0, 20px, 0);--calcite-internal-dialog-shown-position:translate3d(0, 0, 0)}.dialog--opening-idle{transform:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{transform:var(--calcite-internal-dialog-shown-position)}.dialog--closing-idle{transform:var(--calcite-internal-dialog-shown-position)}.dialog--closing-active{transform:var(--calcite-internal-dialog-hidden-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:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{max-block-size:100%;max-inline-size:100%;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%}}:host([width-scale=m]) .dialog{max-block-size:100%;max-inline-size:100%;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%}}:host([width-scale=l]) .dialog{max-block-size:100%;max-inline-size:100%;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%}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-internal-dialog-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-internal-dialog-shown-position:translate3D(0, 0, 0) scale(1)}: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}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDialogStyle0 = dialogCss;
+
+let totalOpenDialogs = 0;
+let initialDocumentOverflowStyle = "";
+const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.calciteDialogBeforeClose = createEvent(this, "calciteDialogBeforeClose", 6);
+        this.calciteDialogClose = createEvent(this, "calciteDialogClose", 6);
+        this.calciteDialogBeforeOpen = createEvent(this, "calciteDialogBeforeOpen", 6);
+        this.calciteDialogOpen = createEvent(this, "calciteDialogOpen", 6);
+        this.calciteDialogScroll = createEvent(this, "calciteDialogScroll", 6);
+        this.openTransitionProp = "opacity";
+        this.ignoreOpenChange = false;
+        this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
+        this.setTransitionEl = (el) => {
+            this.transitionEl = el;
+        };
+        this.openEnd = () => {
+            this.setFocus();
+            this.el.removeEventListener("calciteDialogOpen", this.openEnd);
+        };
+        this.handleScroll = () => {
+            this.calciteDialogScroll.emit();
+        };
+        this.handleCloseClick = () => {
+            this.open = false;
+        };
+        this.handleOutsideClose = () => {
+            this.open = false;
+        };
+        this.closeDialog = async () => {
+            if (this.beforeClose) {
+                try {
+                    await this.beforeClose();
+                }
+                catch (_error) {
+                    // close prevented
+                    requestAnimationFrame(() => {
+                        this.ignoreOpenChange = true;
+                        this.open = true;
+                        this.ignoreOpenChange = false;
+                    });
+                    return;
+                }
+            }
+            totalOpenDialogs--;
+            this.opened = false;
+            this.updateOverflowHiddenClass();
+        };
+        this.updateOverflowHiddenClass = () => {
+            this.opened && !this.embedded && this.modal
+                ? this.addOverflowHiddenClass()
+                : this.removeOverflowHiddenClass();
+        };
+        this.handleMutationObserver = () => {
+            this.updateFocusTrapElements();
+        };
+        this.beforeClose = undefined;
+        this.description = undefined;
+        this.closeDisabled = false;
+        this.embedded = false;
+        this.heading = undefined;
+        this.headingLevel = undefined;
+        this.kind = undefined;
+        this.loading = false;
+        this.menuOpen = false;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.modal = false;
+        this.open = false;
+        this.overlayPositioning = "absolute";
+        this.placement = "center";
+        this.scale = "m";
+        this.widthScale = "m";
+        this.opened = false;
+        this.hasFooter = true;
+        this.hasContentTop = false;
+        this.hasContentBottom = false;
+        this.effectiveLocale = undefined;
+        this.defaultMessages = undefined;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    onModalChange() {
+        this.updateOverflowHiddenClass();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+        // when dialog initially renders, if active was set we need to open as watcher doesn't fire
+        if (this.open) {
+            this.openDialog();
+        }
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    connectedCallback() {
+        this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+        connectLocalized(this);
+        connectMessages(this);
+        connectFocusTrap(this);
+    }
+    disconnectedCallback() {
+        this.removeOverflowHiddenClass();
+        this.mutationObserver?.disconnect();
+        deactivateFocusTrap(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        this.embedded = false;
+    }
+    render() {
+        const { description, heading, opened } = this;
+        return (h(Host, { key: '0f13ce87c5a5db186a443fa8e5cb4734b6da44e4', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), role: "dialog" }, h("div", { key: '818e6308788510a56a3d825f0a7b45a837fb99c5', class: {
+                [CSS.container]: true,
+                [CSS.containerOpen]: opened,
+                [CSS.containerEmbedded]: this.embedded,
+            } }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: '7e67efc8fb567e699ca24ddeb304d0944a8cad24', class: CSS.dialog, ref: this.setTransitionEl }, h("slot", { key: '934b591c94e08e42f3d71996a7c9982eab7160f1', name: SLOTS.content }, h("calcite-panel", { key: '99175d893f56a2e32ea8c19ade7bfc95fb48da7f', 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.handleCloseClick, onCalcitePanelScroll: this.handleScroll, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: 'eb4a5160e2682dc8c336ef772b57b0f4fa38655f', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '459cca0ab91c380631ff22097af628c7a54eedb8', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: '4a8b7a0010af0f19392248c0598d11205f8ccd0d', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '410ffc888a028ad915f60883e270fa76484155cb', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'c157cb3e37e746c48216ab5afad22c42920f8b34', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'df976d04581561b163c81296f37ad90777c673db', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'cf6941e14e2e4efc97b1e0c262f90ab275db0b11', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'd668245026e8c53887ef90199c0ccf5af20cf289', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '01b0b3d0e570a2e83f575842ce1a332ae38b504d', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '825890890a527ae5d1a12fd7484674abb4aa9451', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '6aa3dfd71fa1087b2244ffeedb60bb6946b118f6', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '794d73d346a0dfb959accc8cd4a5580daaa1b7cd', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("div", { key: '09722c38bc0d1798f8291da824c953c74ac0ee5c', class: CSS.content }, h("slot", { key: '49a014d165d49a58f334a5f62e6907ab6c1f2538' }))))))));
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    handleEscape(event) {
+        if (this.open && event.key === "Escape" && !event.defaultPrevented) {
+            this.open = false;
+            event.preventDefault();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's "close" button (the first focusable item).
+     *
+     * @returns {Promise<void>} - A promise that is resolved when the operation has completed.
+     */
+    async setFocus() {
+        await componentFocusable(this);
+        return this.panelEl?.setFocus() ?? focusFirstTabbable(this.el);
+    }
+    /**
+     * Updates the element(s) that are used within the focus-trap of the component.
+     */
+    async updateFocusTrapElements() {
+        updateFocusTrapElements(this);
+    }
+    /**
+     * Scrolls the component's content to a specified set of coordinates.
+     *
+     * @example
+     * myCalciteFlowItem.scrollContentTo({
+     *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+     *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+     *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+     * });
+     * @param options - allows specific coordinates to be defined.
+     * @returns - promise that resolves once the content is scrolled to.
+     */
+    async scrollContentTo(options) {
+        await this.panelEl?.scrollContentTo(options);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    onBeforeOpen() {
+        this.transitionEl.classList.add(CSS.openingActive);
+        this.calciteDialogBeforeOpen.emit();
+    }
+    onOpen() {
+        this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);
+        this.calciteDialogOpen.emit();
+        activateFocusTrap(this);
+    }
+    onBeforeClose() {
+        this.transitionEl.classList.add(CSS.closingActive);
+        this.calciteDialogBeforeClose.emit();
+    }
+    onClose() {
+        this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
+        this.calciteDialogClose.emit();
+        deactivateFocusTrap(this);
+    }
+    toggleDialog(value) {
+        if (this.ignoreOpenChange) {
+            return;
+        }
+        if (value) {
+            this.openDialog();
+        }
+        else {
+            this.closeDialog();
+        }
+    }
+    handleOpenedChange(value) {
+        const idleClass = value ? CSS.openingIdle : CSS.closingIdle;
+        this.transitionEl.classList.add(idleClass);
+        onToggleOpenCloseComponent(this);
+    }
+    async openDialog() {
+        await componentOnReady(this.el);
+        this.el.addEventListener("calciteDialogOpen", this.openEnd);
+        this.opened = true;
+        this.updateOverflowHiddenClass();
+    }
+    addOverflowHiddenClass() {
+        if (totalOpenDialogs === 0) {
+            initialDocumentOverflowStyle = document.documentElement.style.overflow;
+        }
+        totalOpenDialogs++;
+        // use an inline style instead of a utility class to avoid global class declarations.
+        document.documentElement.style.setProperty("overflow", "hidden");
+    }
+    removeOverflowHiddenClass() {
+        document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return this; }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "modal": ["onModalChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "open": ["toggleDialog"],
+        "opened": ["handleOpenedChange"]
+    }; }
+    static get style() { return CalciteDialogStyle0; }
+}, [1, "calcite-dialog", {
+        "beforeClose": [16],
+        "description": [1],
+        "closeDisabled": [516, "close-disabled"],
+        "embedded": [1028],
+        "heading": [1],
+        "headingLevel": [514, "heading-level"],
+        "kind": [513],
+        "loading": [516],
+        "menuOpen": [516, "menu-open"],
+        "messages": [1040],
+        "messageOverrides": [1040],
+        "modal": [516],
+        "open": [1540],
+        "overlayPositioning": [513, "overlay-positioning"],
+        "placement": [513],
+        "scale": [513],
+        "widthScale": [513, "width-scale"],
+        "opened": [32],
+        "hasFooter": [32],
+        "hasContentTop": [32],
+        "hasContentBottom": [32],
+        "effectiveLocale": [32],
+        "defaultMessages": [32],
+        "setFocus": [64],
+        "updateFocusTrapElements": [64],
+        "scrollContentTo": [64]
+    }, [[8, "keydown", "handleEscape"]], {
+        "messageOverrides": ["onMessagesChange"],
+        "modal": ["onModalChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "open": ["toggleDialog"],
+        "opened": ["handleOpenedChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-dialog", "calcite-action", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-panel", "calcite-popover", "calcite-scrim"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Dialog);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const CalciteDialog = Dialog;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDialog, defineCustomElement };

package/dist/components/calcite-fab.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$2 } from './loader.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.10.1
+ * v2.11.1
  */
 const CSS = {
     button: "button",
@@ -80,7 +80,7 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (h(InteractiveContainer, { key: '4203fb6efbcb95a451ff7853fdb8e60f992f96ee', disabled: disabled }, h("calcite-button", { key: '092c37a2a614296c1de1cdd70b9ada14c0a1f6e0', 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: '0466fa59a357502db1c407ffd8008f3620216bbe', disabled: disabled }, h("calcite-button", { key: 'd7cc0cf746d373240a3fb2274d3eeb6283bef052', 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)));
     }