@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/calcite-navigation.js

@@ -13,30 +13,30 @@ 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/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  containerContent: "container-content",
-  hasProgress: "progress-bar",
-  hide: "hide",
-  primary: "primary",
-  secondary: "secondary",
-  tertiary: "tertiary",
+    container: "container",
+    containerContent: "container-content",
+    hasProgress: "progress-bar",
+    hide: "hide",
+    primary: "primary",
+    secondary: "secondary",
+    tertiary: "tertiary",
 };
 const SLOTS = {
-  logo: "logo",
-  user: "user",
-  progress: "progress",
-  navigationAction: "navigation-action",
-  contentStart: "content-start",
-  contentEnd: "content-end",
-  contentCenter: "content-center",
-  navSecondary: "navigation-secondary",
-  navTertiary: "navigation-tertiary",
+    logo: "logo",
+    user: "user",
+    progress: "progress",
+    navigationAction: "navigation-action",
+    contentStart: "content-start",
+    contentEnd: "content-end",
+    contentCenter: "content-center",
+    navSecondary: "navigation-secondary",
+    navTertiary: "navigation-tertiary",
 };
 const ICONS = {
-  hamburger: "hamburger",
+    hamburger: "hamburger",
 };
 
 const navigationCss = ":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, 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{block-size:3rem}.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:0.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:0px}";
@@ -116,7 +116,7 @@ const CalciteNavigation$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNaviga
     //  Public Methods
     //
     //--------------------------------------------------------------------------
-    /** When `navigation-action` is `true`, sets focus on the component's action element. */
+    /** When `navigationAction` is `true`, sets focus on the component's action element. */
     async setFocus() {
         var _a;
         await componentFocusable(this);

package/dist/components/calcite-pick-list.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 import { I as ICON_TYPES } from './resources4.js';
 import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, i as initialize, c as initializeObserver, e as cleanUpObserver, f as handleInitialFilter, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, n as calciteListFocusOutHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.js';
 
-const pickListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;flex-grow:1;flex-direction:column;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([filter-enabled]) header{margin-block-end:0.25rem;display:flex;align-items:stretch;justify-content:flex-end;background-color:var(--calcite-color-foreground-1);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index)}calcite-filter{margin-block-end:0px}:host([loading][disabled]){min-block-size:2rem}:host([hidden]){display:none}[hidden]{display:none}";
+const pickListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;flex-grow:1;flex-direction:column;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([filter-enabled]) header{margin-block-end:0.25rem;display:flex;align-items:stretch;justify-content:flex-end;background-color:var(--calcite-color-foreground-1);--tw-shadow:0 1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index)}calcite-filter{margin-block-end:0px}:host([loading][disabled]){min-block-size:2rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const PickList = /*@__PURE__*/ proxyCustomElement(class PickList extends HTMLElement {
     constructor() {

package/dist/components/calcite-radio-button-group.js

@@ -6,8 +6,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { V as Validation } from './Validation.js';
 
-const radioButtonGroupCss = ":host{display:flex;max-inline-size:100vw}:host([layout=horizontal]){flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s]){gap:1rem}:host([layout=horizontal][scale=m]){gap:1.25rem}:host([layout=horizontal][scale=l]){gap:1.5rem}:host([layout=vertical]){flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    itemWrapper: "item-wrapper",
+};
+
+const radioButtonGroupCss = ":host{display:flex;flex-direction:column}:host>.item-wrapper{display:flex;max-inline-size:100vw}:host([layout=horizontal])>.item-wrapper{flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s])>.item-wrapper{-moz-column-gap:1rem;column-gap:1rem}:host([layout=horizontal][scale=m])>.item-wrapper{-moz-column-gap:1.25rem;column-gap:1.25rem}:host([layout=horizontal][scale=l])>.item-wrapper{-moz-column-gap:1.5rem;column-gap:1.5rem}:host([layout=vertical])>.item-wrapper{flex-direction:column}:host([scale=s]) calcite-input-message{--calcite-input-message-spacing-value:calc(var(--calcite-spacing-xxs) * -1)}:host([scale=m]) calcite-input-message{--calcite-input-message-spacing-value:calc(var(--calcite-spacing-sm) * -1)}:host([scale=l]) calcite-input-message{--calcite-input-message-spacing-value:calc(var(--calcite-spacing-md) * -1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup extends HTMLElement {
     constructor() {
@@ -28,7 +38,7 @@ const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup
             if (this.radioButtons.length > 0) {
                 this.radioButtons.forEach((radioButton) => {
                     radioButton.disabled = this.disabled || radioButton.disabled;
-                    radioButton.hidden = this.hidden;
+                    radioButton.hidden = this.el.hidden;
                     radioButton.name = this.name;
                     radioButton.required = this.required;
                     radioButton.scale = this.scale;
@@ -36,18 +46,25 @@ const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup
             }
         };
         this.disabled = false;
-        this.hidden = false;
         this.layout = "horizontal";
         this.name = undefined;
         this.required = false;
         this.selectedItem = null;
         this.scale = "m";
+        this.status = "idle";
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.radioButtons = [];
     }
-    onDisabledChange() {
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleHiddenChange() {
         this.passPropsToRadioButtons();
     }
-    onHiddenChange() {
+    onDisabledChange() {
         this.passPropsToRadioButtons();
     }
     onLayoutChange() {
@@ -111,29 +128,31 @@ const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { role: "radiogroup" }, h("slot", null)));
+        return (h(Host, { role: "radiogroup" }, h("div", { class: CSS.itemWrapper }, h("slot", null)), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     get el() { return this; }
     static get watchers() { return {
+        "hidden": ["handleHiddenChange"],
         "disabled": ["onDisabledChange"],
-        "hidden": ["onHiddenChange"],
         "layout": ["onLayoutChange"],
         "scale": ["onScaleChange"]
     }; }
     static get style() { return radioButtonGroupCss; }
 }, [1, "calcite-radio-button-group", {
         "disabled": [516],
-        "hidden": [516],
         "layout": [513],
         "name": [513],
         "required": [516],
         "selectedItem": [1040],
         "scale": [513],
+        "status": [513],
+        "validationMessage": [1, "validation-message"],
+        "validationIcon": [520, "validation-icon"],
         "radioButtons": [32],
         "setFocus": [64]
     }, [[0, "calciteRadioButtonChange", "radioButtonChangeHandler"]], {
+        "hidden": ["handleHiddenChange"],
         "disabled": ["onDisabledChange"],
-        "hidden": ["onHiddenChange"],
         "layout": ["onLayoutChange"],
         "scale": ["onScaleChange"]
     }]);

package/dist/components/calcite-radio-button.js

@@ -3,346 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { g as getRoundRobinIndex } from './array.js';
-import { g as getElementDir, f as focusElement, t as toAriaBoolean } from './dom.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
-import { g as guid } from './guid.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
- */
-const CSS = {
-  container: "container",
-};
-
-const radioButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([focused]) .radio{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{block-size:var(--calcite-radio-size);max-inline-size:var(--calcite-radio-size);min-inline-size:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:\"\";inline-size:var(--calcite-radio-size);block-size:var(--calcite-radio-size);background-color:windowText;display:block}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
-
-const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 6);
-        this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 6);
-        this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 6);
-        this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 6);
-        this.selectItem = (items, selectedIndex) => {
-            items[selectedIndex].click();
-        };
-        this.queryButtons = () => {
-            return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
-        };
-        this.isFocusable = () => {
-            const radioButtons = this.queryButtons();
-            const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);
-            const checked = radioButtons.find((radioButton) => radioButton.checked);
-            return firstFocusable === this.el && !checked;
-        };
-        this.check = () => {
-            if (this.disabled) {
-                return;
-            }
-            this.focused = true;
-            this.setFocus();
-            if (this.checked) {
-                return;
-            }
-            this.uncheckAllRadioButtonsInGroup();
-            this.checked = true;
-            this.calciteRadioButtonChange.emit();
-        };
-        this.clickHandler = () => {
-            if (this.disabled) {
-                return;
-            }
-            this.check();
-        };
-        this.setContainerEl = (el) => {
-            this.containerEl = el;
-        };
-        this.handleKeyDown = (event) => {
-            const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-            const { key } = event;
-            const { el } = this;
-            if (keys.indexOf(key) === -1) {
-                return;
-            }
-            if (key === " ") {
-                this.check();
-                event.preventDefault();
-                return;
-            }
-            let adjustedKey = key;
-            if (getElementDir(el) === "rtl") {
-                if (key === "ArrowRight") {
-                    adjustedKey = "ArrowLeft";
-                }
-                if (key === "ArrowLeft") {
-                    adjustedKey = "ArrowRight";
-                }
-            }
-            const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
-            let currentIndex = 0;
-            const radioButtonsLength = radioButtons.length;
-            radioButtons.some((item, index) => {
-                if (item.checked) {
-                    currentIndex = index;
-                    return true;
-                }
-            });
-            switch (adjustedKey) {
-                case "ArrowLeft":
-                case "ArrowUp":
-                    event.preventDefault();
-                    this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
-                    return;
-                case "ArrowRight":
-                case "ArrowDown":
-                    event.preventDefault();
-                    this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
-                    return;
-                default:
-                    return;
-            }
-        };
-        this.onContainerBlur = () => {
-            this.focused = false;
-            this.calciteInternalRadioButtonBlur.emit();
-        };
-        this.onContainerFocus = () => {
-            if (!this.disabled) {
-                this.focused = true;
-                this.calciteInternalRadioButtonFocus.emit();
-            }
-        };
-        this.checked = false;
-        this.disabled = false;
-        this.focused = false;
-        this.form = undefined;
-        this.guid = undefined;
-        this.hidden = false;
-        this.hovered = false;
-        this.label = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.scale = "m";
-        this.value = undefined;
-    }
-    checkedChanged(newChecked) {
-        if (newChecked) {
-            this.uncheckOtherRadioButtonsInGroup();
-        }
-        this.calciteInternalRadioButtonCheckedChange.emit();
-    }
-    disabledChanged() {
-        this.updateTabIndexOfOtherRadioButtonsInGroup();
-    }
-    hiddenChanged() {
-        this.updateTabIndexOfOtherRadioButtonsInGroup();
-    }
-    nameChanged() {
-        this.checkLastRadioButton();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await componentFocusable(this);
-        if (!this.disabled) {
-            focusElement(this.containerEl);
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    syncHiddenFormInput(input) {
-        input.type = "radio";
-    }
-    onLabelClick(event) {
-        if (this.disabled || this.hidden) {
-            return;
-        }
-        const label = event.currentTarget;
-        const radioButton = label.for
-            ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
-            : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
-        if (!radioButton) {
-            return;
-        }
-        radioButton.focused = true;
-        this.setFocus();
-        if (radioButton.checked) {
-            return;
-        }
-        this.uncheckOtherRadioButtonsInGroup();
-        radioButton.checked = true;
-        this.calciteRadioButtonChange.emit();
-    }
-    checkLastRadioButton() {
-        const radioButtons = this.queryButtons();
-        const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
-        if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
-            const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
-            checkedRadioButtons
-                .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)
-                .forEach((checkedRadioButton) => {
-                checkedRadioButton.checked = false;
-                checkedRadioButton.emitCheckedChange();
-            });
-        }
-    }
-    /** @internal */
-    async emitCheckedChange() {
-        this.calciteInternalRadioButtonCheckedChange.emit();
-    }
-    uncheckAllRadioButtonsInGroup() {
-        const radioButtons = this.queryButtons();
-        radioButtons.forEach((radioButton) => {
-            if (radioButton.checked) {
-                radioButton.checked = false;
-                radioButton.focused = false;
-            }
-        });
-    }
-    uncheckOtherRadioButtonsInGroup() {
-        const radioButtons = this.queryButtons();
-        const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
-        otherRadioButtons.forEach((otherRadioButton) => {
-            if (otherRadioButton.checked) {
-                otherRadioButton.checked = false;
-                otherRadioButton.focused = false;
-            }
-        });
-    }
-    updateTabIndexOfOtherRadioButtonsInGroup() {
-        const radioButtons = this.queryButtons();
-        const otherFocusableRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid && !radioButton.disabled);
-        otherFocusableRadioButtons.forEach((radioButton) => {
-            forceUpdate(radioButton);
-        });
-    }
-    getTabIndex() {
-        if (this.disabled) {
-            return undefined;
-        }
-        return this.checked || this.isFocusable() ? 0 : -1;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    pointerEnterHandler() {
-        if (this.disabled) {
-            return;
-        }
-        this.hovered = true;
-    }
-    pointerLeaveHandler() {
-        if (this.disabled) {
-            return;
-        }
-        this.hovered = false;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        this.rootNode = this.el.getRootNode();
-        this.guid = this.el.id || `calcite-radio-button-${guid()}`;
-        if (this.name) {
-            this.checkLastRadioButton();
-        }
-        connectInteractive(this);
-        connectLabel(this);
-        connectForm(this);
-        this.updateTabIndexOfOtherRadioButtonsInGroup();
-    }
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-        if (this.focused && !this.disabled) {
-            this.setFocus();
-        }
-    }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-        disconnectLabel(this);
-        disconnectForm(this);
-        this.updateTabIndexOfOtherRadioButtonsInGroup();
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const tabIndex = this.getTabIndex();
-        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setContainerEl }, h("div", { class: "radio" })), h(HiddenFormInputSlot, { component: this })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "checked": ["checkedChanged"],
-        "disabled": ["disabledChanged"],
-        "hidden": ["hiddenChanged"],
-        "name": ["nameChanged"]
-    }; }
-    static get style() { return radioButtonCss; }
-}, [1, "calcite-radio-button", {
-        "checked": [1540],
-        "disabled": [516],
-        "focused": [1540],
-        "form": [513],
-        "guid": [1537],
-        "hidden": [516],
-        "hovered": [1540],
-        "label": [1],
-        "name": [513],
-        "required": [516],
-        "scale": [513],
-        "value": [1032],
-        "setFocus": [64],
-        "emitCheckedChange": [64]
-    }, [[1, "pointerenter", "pointerEnterHandler"], [1, "pointerleave", "pointerLeaveHandler"]], {
-        "checked": ["checkedChanged"],
-        "disabled": ["disabledChanged"],
-        "hidden": ["hiddenChanged"],
-        "name": ["nameChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["calcite-radio-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "calcite-radio-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RadioButton);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { R as RadioButton, d as defineCustomElement$1 } from './radio-button.js';
 
 const CalciteRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/calcite-rating.js

@@ -6,7 +6,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
@@ -18,13 +18,13 @@ import { d as defineCustomElement$2 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { class: partial ? undefined : "icon",
-  icon: full ? "star-f" : "star",
-  scale }));
+    icon: full ? "star-f" : "star",
+    scale }));
 
-const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-color-border-input)}.star:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-color-status-warning)}.hovered,.selected{color:var(--calcite-color-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-color-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{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}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-color-border-input)}.star:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-color-status-warning)}.hovered,.selected{color:var(--calcite-color-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-color-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{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}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement {
     constructor() {
@@ -195,7 +195,7 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
     }
     render() {
         var _a, _b;
-        return (h(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
+        return (h(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h(InteractiveContainer, { disabled: this.disabled }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex, }) => {
             return (h("label", { class: {
                     star: true,
                     selected,
@@ -205,7 +205,7 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
                 }, "data-value": value, htmlFor: id, onClick: this.handleLabelClick, onFocus: this.handleLabelFocus, onKeyDown: this.handleLabelKeyDown, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver, tabIndex: tabIndex,
                 // eslint-disable-next-line react/jsx-sort-props
                 ref: this.setLabelEl }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
-        }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: (_a = this.count) === null || _a === void 0 ? void 0 : _a.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", (_b = this.count) === null || _b === void 0 ? void 0 : _b.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this }))));
+        }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: (_a = this.count) === null || _a === void 0 ? void 0 : _a.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", (_b = this.count) === null || _b === void 0 ? void 0 : _b.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/calcite-sheet.js

@@ -16,14 +16,14 @@ 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/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  scrim: "scrim",
-  container: "container",
-  containerOpen: "container--open",
-  content: "content",
-  containerSlottedInShell: "container--slotted-in-shell",
+    scrim: "scrim",
+    container: "container",
+    containerOpen: "container--open",
+    content: "content",
+    containerSlottedInShell: "container--slotted-in-shell",
 };
 
 const sheetCss = ":host{position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;visibility:hidden !important;--calcite-sheet-scrim-background-internal:rgba(0, 0, 0, 0.85);--calcite-scrim-shadow-block-start-internal:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-block-end-internal:0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-start-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04)}.container{visibility:hidden;position:fixed;z-index:var(--calcite-z-index-overlay);display:flex;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal:translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal:translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{--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)}:host([display-mode=overlay][position=inline-start]) .container{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .container{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .container{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .container{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .container,:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .container,:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([display-mode=float][position^=inline]) .container{block-size:calc(100% - 1.5rem);max-block-size:calc(100% - 1.5rem);min-block-size:calc(100% - 1.5rem)}:host([display-mode=float][position^=block]) .container{inline-size:calc(100% - 1.5rem);max-inline-size:calc(100% - 1.5rem);min-inline-size:calc(100% - 1.5rem)}:host([position^=inline][width-scale=s]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 260px)}:host([position^=inline][width-scale=m]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 300px)}:host([position^=inline][width-scale=l]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 340px)}:host([position^=block][height-scale=s]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 30vh)}:host([position^=block][height-scale=m]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 50vh)}:host([position^=block][height-scale=l]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background:var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0px;display:flex;overflow-y:hidden}:host([opened]){visibility:visible !important}.content{position:relative;z-index:var(--calcite-z-index-modal);box-sizing:border-box;display:block;max-inline-size:100%;overflow-y:hidden;padding:0px;background-color:var(--calcite-color-foreground-1);max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transform:var(--calcite-sheet-hidden-position-internal)}.container--open .content{transform:translate3d(0, 0, 0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container{border-radius:0.25rem}:host([display-mode=float]) .container{padding:0.75rem}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position]) .container--slotted-in-shell{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
@@ -167,7 +167,7 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
     //
     //--------------------------------------------------------------------------
     /**
-     * Sets focus on the component's "close" button (the first focusable item).
+     * Sets focus on the component's "close" button - the first focusable item.
      *
      */
     async setFocus() {

package/dist/components/calcite-shell-center-row.js

@@ -10,14 +10,14 @@ import { a as getSlotted } from './dom.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  actionBarContainer: "action-bar-container",
-  content: "content",
+    actionBarContainer: "action-bar-container",
+    content: "content",
 };
 const SLOTS = {
-  actionBar: "action-bar",
+    actionBar: "action-bar",
 };
 
 const shellCenterRowCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{z-index:var(--calcite-z-index);display:flex;flex:1 1 auto;overflow:hidden;background-color:transparent}.content{margin:0px;display:flex;block-size:100%;inline-size:100%;overflow:hidden;flex:1 0 0}.action-bar-container{display:flex}:host([detached]){margin-inline:0.5rem;margin-block:0.5rem 1.5rem}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}:host([detached]){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.25rem;border-width:0px;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([position=end]){align-self:flex-end}:host([position=start]){align-self:flex-start}:host([height-scale=s]){block-size:33.333333%}:host([height-scale=m]){block-size:70%}:host([height-scale=l]){block-size:100%}:host([height-scale=l][detached]){block-size:calc(100% - 2rem)}::slotted(calcite-panel){block-size:100%;inline-size:100%}::slotted(calcite-action-bar),::slotted(calcite-action-bar[position=end]){border-inline-end:1px solid;border-color:var(--calcite-color-border-3)}:host([hidden]){display:none}[hidden]{display:none}";