@esri/calcite-components 3.1.0-next.21 → 3.1.0-next.22

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

@@ -12,7 +12,7 @@ import { u as S } from "../../chunks/useT9n.js";
 import { css as O } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const c = {
   slow: 14e3,
   medium: 1e4,

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

@@ -18,7 +18,7 @@ import { c as v } from "../../chunks/observers.js";
 import { css as R } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const G = R`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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}`, x = {
   contentBottom: "content-bottom",
   contentTop: "content-top"

package/dist/components/calcite-autocomplete-item/customElement.js

@@ -8,7 +8,7 @@ import { h as s } from "../../chunks/text.js";
 import { css as b } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const t = {
   container: "container",
   containerActive: "container--active",

package/dist/components/calcite-autocomplete-item-group/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as n, nothing as c, safeClassMap as i } from "@arcgis/lumina
 import { css as r } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const e = {
   container: "container",
   containerNoSpacing: "container--no-spacing",

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

@@ -6,7 +6,7 @@ import { w as v, i as d } from "../../chunks/utils4.js";
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const u = {
   thumbnail: "thumbnail",
   background: "background",

package/dist/components/calcite-block/customElement.d.ts

@@ -32,6 +32,8 @@ export declare class Block extends LitElement {
      * @deprecated No longer necessary. Use Block Group for draggable functionality.
      */
     dragHandle: boolean;
+    /** When `true`, the component is expanded to show child components. */
+    expanded: boolean;
     /**
      * The component header text.
      *
@@ -73,8 +75,13 @@ export declare class Block extends LitElement {
         loading: string;
         options: string;
     }>;
-    /** When `true`, expands the component and its contents. */
-    open: boolean;
+    /**
+     * When `true`, expands the component and its contents.
+     *
+     * @deprecated Use `expanded` prop instead.
+     */
+    get open(): boolean;
+    set open(value: boolean);
     /**
      * Determines the type of positioning to use for the overlaid content.
      *

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

@@ -1,20 +1,20 @@
-import { c as E } from "../../chunks/runtime.js";
+import { c as O } from "../../chunks/runtime.js";
 import { keyed as r } from "lit-html/directives/keyed.js";
-import { ref as O } from "lit-html/directives/ref.js";
+import { ref as w } from "lit-html/directives/ref.js";
 import { html as n, nothing as u } from "lit";
-import { LitElement as w, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
-import { h as I, a as d } from "../../chunks/dom.js";
-import { u as P, I as z } from "../../chunks/interactive.js";
-import { H as A } from "../../chunks/Heading.js";
-import { c as T } from "../../chunks/component.js";
-import { o as M } from "../../chunks/openCloseComponent.js";
-import { e as F } from "../../chunks/floating-ui.js";
-import { u as L } from "../../chunks/useT9n.js";
-import { l as D } from "../../chunks/logger.js";
+import { LitElement as I, createEvent as l, safeClassMap as a } from "@arcgis/lumina";
+import { h as P, a as d } from "../../chunks/dom.js";
+import { u as z, I as A } from "../../chunks/interactive.js";
+import { H as T } from "../../chunks/Heading.js";
+import { c as M } from "../../chunks/component.js";
+import { o as F } from "../../chunks/openCloseComponent.js";
+import { e as L } from "../../chunks/floating-ui.js";
+import { u as D } from "../../chunks/useT9n.js";
+import { l as b } from "../../chunks/logger.js";
 import { css as R } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const c = {
   content: "content",
   toggle: "toggle",
@@ -47,26 +47,41 @@ const c = {
   headerMenuActions: "header-menu-actions",
   icon: "icon"
 }, f = {
-  opened: "chevron-up",
-  closed: "chevron-down",
+  expanded: "chevron-up",
+  collapsed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
-}, j = R`: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{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;transition-duration:var(--calcite-animation-timing);border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:"handle header control menu actions-end";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.actions-end{grid-area:actions-end}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-2))}.description{margin-block-start:.125rem;padding:0;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-spacing-md);color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.control-container{margin:0;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:.5rem}:host([open]) .header .title .heading{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`;
-class q extends w {
+}, j = R`: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{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;transition-duration:var(--calcite-animation-timing);border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:"handle header control menu actions-end";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.actions-end{grid-area:actions-end}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-2))}.description{margin-block-start:.125rem;padding:0;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-spacing-md);color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.control-container{margin:0;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`;
+class q extends I {
   constructor() {
-    super(...arguments), this.transitionProp = "margin-top", this.hasContentStart = !1, this.hasControl = !1, this.hasEndActions = !1, this.hasIcon = !1, this.hasMenuActions = !1, this.collapsible = !1, this.disabled = !1, this.dragDisabled = !1, this.dragHandle = !1, this.loading = !1, this.menuPlacement = F, this.messages = L(), this.moveToItems = [], this.open = !1, this.overlayPositioning = "absolute", this.setPosition = null, this.setSize = null, this.sortHandleOpen = !1, this.calciteBlockBeforeClose = l({ cancelable: !1 }), this.calciteBlockBeforeOpen = l({ cancelable: !1 }), this.calciteBlockClose = l({ cancelable: !1 }), this.calciteBlockOpen = l({ cancelable: !1 }), this.calciteBlockSortHandleBeforeClose = l({ cancelable: !1 }), this.calciteBlockSortHandleBeforeOpen = l({ cancelable: !1 }), this.calciteBlockSortHandleClose = l({ cancelable: !1 }), this.calciteBlockSortHandleOpen = l({ cancelable: !1 }), this.calciteBlockToggle = l({ cancelable: !1 });
+    super(...arguments), this.transitionProp = "margin-top", this.hasContentStart = !1, this.hasControl = !1, this.hasEndActions = !1, this.hasIcon = !1, this.hasMenuActions = !1, this.collapsible = !1, this.disabled = !1, this.dragDisabled = !1, this.dragHandle = !1, this.expanded = !1, this.loading = !1, this.menuPlacement = L, this.messages = D(), this.moveToItems = [], this.overlayPositioning = "absolute", this.setPosition = null, this.setSize = null, this.sortHandleOpen = !1, this.calciteBlockBeforeClose = l({ cancelable: !1 }), this.calciteBlockBeforeOpen = l({ cancelable: !1 }), this.calciteBlockClose = l({ cancelable: !1 }), this.calciteBlockOpen = l({ cancelable: !1 }), this.calciteBlockSortHandleBeforeClose = l({ cancelable: !1 }), this.calciteBlockSortHandleBeforeOpen = l({ cancelable: !1 }), this.calciteBlockSortHandleClose = l({ cancelable: !1 }), this.calciteBlockSortHandleOpen = l({ cancelable: !1 }), this.calciteBlockToggle = l({ cancelable: !1 });
   }
   static {
-    this.properties = { hasContentStart: 16, hasControl: 16, hasEndActions: 16, hasIcon: 16, hasMenuActions: 16, collapsible: 7, description: 1, disabled: 7, dragDisabled: 7, dragHandle: 7, heading: 1, headingLevel: 11, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, loading: 7, label: 1, menuFlipPlacements: 0, menuPlacement: 3, messageOverrides: 0, moveToItems: 0, open: 7, overlayPositioning: 3, setPosition: 9, setSize: 9, sortHandleOpen: 7, status: 3 };
+    this.properties = { hasContentStart: 16, hasControl: 16, hasEndActions: 16, hasIcon: 16, hasMenuActions: 16, collapsible: 7, description: 1, disabled: 7, dragDisabled: 7, dragHandle: 7, expanded: 7, heading: 1, headingLevel: 11, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, loading: 7, label: 1, menuFlipPlacements: 0, menuPlacement: 3, messageOverrides: 0, moveToItems: 0, open: 7, overlayPositioning: 3, setPosition: 9, setSize: 9, sortHandleOpen: 7, status: 3 };
   }
   static {
     this.styles = j;
   }
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated Use `expanded` prop instead.
+   */
+  get open() {
+    return this.expanded;
+  }
+  set open(e) {
+    b.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded"
+    }), this.expanded = e;
+  }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component's first tabbable element. */
   async setFocus() {
-    await T(this), I(this.el);
+    await M(this), P(this.el);
   }
   // #endregion
   // #region Lifecycle
@@ -74,13 +89,13 @@ class q extends w {
     super.connectedCallback(), this.transitionEl = this.el;
   }
   load() {
-    !this.heading && !this.label && D.warn(`${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`);
+    !this.heading && !this.label && b.warn(`${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`);
   }
   willUpdate(e) {
-    e.has("open") && (this.hasUpdated || this.open !== !1) && M(this), e.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== !1) && this.sortHandleOpenHandler();
+    e.has("expanded") && (this.hasUpdated || this.expanded !== !1) && F(this), e.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== !1) && this.sortHandleOpenHandler();
   }
   updated() {
-    P(this);
+    z(this);
   }
   // #endregion
   // #region Private Methods
@@ -115,7 +130,7 @@ class q extends w {
     e.stopPropagation(), this.sortHandleOpen = !0, this.calciteBlockSortHandleOpen.emit();
   }
   onHeaderClick() {
-    this.open = !this.open, this.calciteBlockToggle.emit();
+    this.expanded = !this.expanded, this.calciteBlockToggle.emit();
   }
   controlSlotChangeHandler(e) {
     this.hasControl = d(e);
@@ -154,7 +169,7 @@ class q extends w {
   }
   renderTitle() {
     const { heading: e, headingLevel: o, description: i } = this;
-    return e || i ? n`<div class=${a(t.title)}>${A({ class: t.heading, level: o, children: e })}${i ? n`<div class=${a(t.description)}>${i}</div>` : null}</div>` : null;
+    return e || i ? n`<div class=${a(t.title)}>${T({ class: t.heading, level: o, children: e })}${i ? n`<div class=${a(t.description)}>${i}</div>` : null}</div>` : null;
   }
   renderIcon(e) {
     const { iconFlipRtl: o } = this, i = o === "both" || e === "start" ? o === "start" : o === "end", s = e === "start" ? this.iconStart : this.iconEnd, g = e === "start" ? t.iconStart : t.iconEnd;
@@ -162,13 +177,13 @@ class q extends w {
       return r(s, n`<calcite-icon class=${a(g)} .flipRtl=${i} .icon=${s} scale=s></calcite-icon>`);
   }
   render() {
-    const { collapsible: e, loading: o, open: i, label: s, heading: g, messages: p, description: b, menuFlipPlacements: v, menuPlacement: $, moveToItems: S, setPosition: k, setSize: x, dragDisabled: C } = this, H = i ? p.collapse : p.expand, m = n`<header class=${a({ [t.header]: !0, [t.headerHasText]: !!(g || b) })} id=${c.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`, y = i ? f.opened : f.closed, B = n`<div class=${a(t.headerContainer)}>${this.dragHandle ? n`<calcite-sort-handle .disabled=${C} .label=${g || s} .moveToItems=${S} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .setPosition=${k} .setSize=${x} ${O(this.setSortHandleEl)}></calcite-sort-handle>` : null}${e ? n`<button aria-controls=${c.content} aria-describedby=${c.header} .ariaExpanded=${e ? i : null} class=${a(t.toggle)} id=${c.toggle} @click=${this.onHeaderClick} title=${H ?? u}>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}<calcite-icon class=${a(t.toggleIcon)} .icon=${y} scale=s></calcite-icon></div></button>` : this.iconEnd ? n`<div>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}</div></div>` : m}<div aria-labelledby=${c.header} class=${a(t.controlContainer)} .hidden=${!this.hasControl}><slot name=${h.control} @slotchange=${this.controlSlotChangeHandler}></slot></div><calcite-action-menu .flipPlacements=${v ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${p.options} .overlayPositioning=${this.overlayPositioning} .placement=${$}><slot name=${h.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
-    return z({ disabled: this.disabled, children: n`<article aria-label=${s ?? u} .ariaBusy=${o} class=${a({
+    const { collapsible: e, loading: o, expanded: i, label: s, heading: g, messages: p, description: v, menuFlipPlacements: $, menuPlacement: x, moveToItems: S, setPosition: k, setSize: C, dragDisabled: H } = this, y = i ? p.collapse : p.expand, m = n`<header class=${a({ [t.header]: !0, [t.headerHasText]: !!(g || v) })} id=${c.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`, B = i ? f.expanded : f.collapsed, E = n`<div class=${a(t.headerContainer)}>${this.dragHandle ? n`<calcite-sort-handle .disabled=${H} .label=${g || s} .moveToItems=${S} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .setPosition=${k} .setSize=${C} ${w(this.setSortHandleEl)}></calcite-sort-handle>` : null}${e ? n`<button aria-controls=${c.content} aria-describedby=${c.header} .ariaExpanded=${e ? i : null} class=${a(t.toggle)} id=${c.toggle} @click=${this.onHeaderClick} title=${y ?? u}>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}<calcite-icon class=${a(t.toggleIcon)} .icon=${B} scale=s></calcite-icon></div></button>` : this.iconEnd ? n`<div>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}</div></div>` : m}<div aria-labelledby=${c.header} class=${a(t.controlContainer)} .hidden=${!this.hasControl}><slot name=${h.control} @slotchange=${this.controlSlotChangeHandler}></slot></div><calcite-action-menu .flipPlacements=${$ ?? ["top", "bottom"]} .hidden=${!this.hasMenuActions} .label=${p.options} .overlayPositioning=${this.overlayPositioning} .placement=${x}><slot name=${h.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
+    return A({ disabled: this.disabled, children: n`<article aria-label=${s ?? u} .ariaBusy=${o} class=${a({
       [t.container]: !0
-    })}>${B}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!i} id=${c.content}>${this.renderScrim()}</section></article>` });
+    })}>${E}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!i} id=${c.content}>${this.renderScrim()}</section></article>` });
   }
 }
-E("calcite-block", q);
+O("calcite-block", q);
 export {
   q as Block
 };

package/dist/components/calcite-block/resources.d.ts

@@ -35,8 +35,8 @@ export declare const SLOTS: {
     icon: string;
 };
 export declare const ICONS: {
-    readonly opened: "chevron-up";
-    readonly closed: "chevron-down";
+    readonly expanded: "chevron-up";
+    readonly collapsed: "chevron-down";
     readonly valid: "check-circle";
     readonly invalid: "exclamation-mark-triangle";
 };

package/dist/components/calcite-block-group/customElement.js

@@ -11,7 +11,7 @@ import { g as T } from "../../chunks/guid.js";
 import { css as D } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 function u(l) {
   return l.tagName === "CALCITE-BLOCK";
 }

package/dist/components/calcite-block-section/customElement.d.ts

@@ -6,6 +6,8 @@ import { BlockSectionToggleDisplay } from './interfaces';
 
 /** @slot - A slot for adding custom content. */
 export declare class BlockSection extends LitElement {
+    /** When `true`, the component is expanded to show child components. */
+    expanded: boolean;
     /** Specifies an icon to display at the end of the component. */
     iconEnd: IconNameOrString;
     /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
@@ -26,8 +28,13 @@ export declare class BlockSection extends LitElement {
         collapse: string;
         expand: string;
     }>;
-    /** When `true`, expands the component and its contents. */
-    open: boolean;
+    /**
+     * When `true`, expands the component and its contents.
+     *
+     * @deprecated Use `expanded` prop instead.
+     */
+    get open(): boolean;
+    set open(value: boolean);
     /**
      * Displays a status-related indicator icon.
      *

package/dist/components/calcite-block-section/customElement.js

@@ -1,16 +1,17 @@
 import { c as h } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-import { keyed as v } from "lit-html/directives/keyed.js";
-import { LitElement as p, createEvent as u, safeClassMap as c, nothing as b } from "@arcgis/lumina";
-import { h as x } from "../../chunks/dom.js";
+import { html as l } from "lit-html";
+import { keyed as p } from "lit-html/directives/keyed.js";
+import { LitElement as v, createEvent as u, safeClassMap as c, nothing as x } from "@arcgis/lumina";
+import { h as b } from "../../chunks/dom.js";
 import { i as m } from "../../chunks/key.js";
 import { c as f } from "../../chunks/component.js";
 import { u as k } from "../../chunks/useT9n.js";
-import { css as $ } from "@lit/reactive-element/css-tag.js";
+import { l as $ } from "../../chunks/logger.js";
+import { css as w } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
-const l = {
+v3.1.0-next.22 */
+const a = {
   content: "content",
   toggle: "toggle"
 }, t = {
@@ -30,26 +31,41 @@ const l = {
   toggleSwitchText: "toggle--switch__text",
   valid: "valid"
 }, s = {
-  menuOpen: "chevron-up",
-  menuClosed: "chevron-down",
+  menuExpanded: "chevron-up",
+  menuCollapsed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
-}, w = $`:host{box-sizing:border-box;display:block;font-size:var(--calcite-font-size--1);color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1))}:host([open]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([open]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([open]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([open]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([open]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;font-family:var(--calcite-font-family);gap:var(--calcite-spacing-md);color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, transparent);font-weight:var(--calcite-font-weight-normal)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle--switch,.section-header{margin-inline:0px;margin-block:.25rem;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle--switch:hover,.section-header:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word;background-color:var(--calcite-block-section-background-color, transparent)}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container .icon--end:hover,.toggle-container .icon--start:hover,.toggle-container .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
-class S extends p {
+}, S = w`:host{box-sizing:border-box;display:block;font-size:var(--calcite-font-size--1);color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host(:last-child){border-block-end-width:0px}.toggle{inline-size:100%;border-width:0px;font-family:var(--calcite-font-family);gap:var(--calcite-spacing-md);color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, transparent);font-weight:var(--calcite-font-weight-normal)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle--switch,.section-header{margin-inline:0px;margin-block:.25rem;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding-inline:0px;padding-block:.5rem;font-size:var(--calcite-font-size--1);outline-color:transparent}.toggle--switch:focus,.section-header:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle--switch:hover,.section-header:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word;background-color:var(--calcite-block-section-background-color, transparent)}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container .icon--end:hover,.toggle-container .icon--start:hover,.toggle-container .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`;
+class y extends v {
   constructor() {
-    super(...arguments), this.messages = k(), this.open = !1, this.toggleDisplay = "button", this.calciteBlockSectionToggle = u({ cancelable: !1 });
+    super(...arguments), this.expanded = !1, this.messages = k(), this.toggleDisplay = "button", this.calciteBlockSectionToggle = u({ cancelable: !1 });
   }
   static {
-    this.properties = { iconEnd: 3, iconFlipRtl: 3, iconStart: 3, messageOverrides: 0, open: 7, status: 3, text: 1, toggleDisplay: 3 };
+    this.properties = { expanded: 7, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, messageOverrides: 0, open: 7, status: 3, text: 1, toggleDisplay: 3 };
   }
   static {
-    this.styles = w;
+    this.styles = S;
+  }
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @deprecated Use `expanded` prop instead.
+   */
+  get open() {
+    return this.expanded;
+  }
+  set open(e) {
+    $.deprecated("property", {
+      name: "open",
+      removalVersion: 4,
+      suggested: "expanded"
+    }), this.expanded = e;
   }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component's first tabbable element. */
   async setFocus() {
-    await f(this), x(this.el);
+    await f(this), b(this.el);
   }
   // #endregion
   // #region Private Methods
@@ -57,7 +73,7 @@ class S extends p {
     m(e.key) && (this.toggleSection(), e.preventDefault(), e.stopPropagation());
   }
   toggleSection() {
-    this.open = !this.open, this.calciteBlockSectionToggle.emit();
+    this.expanded = !this.expanded, this.calciteBlockSectionToggle.emit();
   }
   // #endregion
   // #region Rendering
@@ -67,31 +83,31 @@ class S extends p {
       [t.valid]: e == "valid",
       [t.invalid]: e == "invalid"
     };
-    return o ? r`<calcite-icon class=${c(i)} .icon=${o} scale=s></calcite-icon>` : null;
+    return o ? l`<calcite-icon class=${c(i)} .icon=${o} scale=s></calcite-icon>` : null;
   }
   renderIcon(e) {
     const { iconFlipRtl: o } = this;
     if (e === void 0)
       return null;
-    const i = o === "both" || o === "start", a = o === "both" || o === "end", n = e === this.iconStart;
-    return v(n ? this.iconStart : this.iconEnd, r`<calcite-icon class=${c(n ? t.iconStart : t.iconEnd)} .flipRtl=${n ? i : a} .icon=${n ? this.iconStart : this.iconEnd} scale=s></calcite-icon>`);
+    const i = o === "both" || o === "start", r = o === "both" || o === "end", n = e === this.iconStart;
+    return p(n ? this.iconStart : this.iconEnd, l`<calcite-icon class=${c(n ? t.iconStart : t.iconEnd)} .flipRtl=${n ? i : r} .icon=${n ? this.iconStart : this.iconEnd} scale=s></calcite-icon>`);
   }
   render() {
-    const { messages: e, open: o, text: i, toggleDisplay: a } = this, n = o ? s.menuOpen : s.menuClosed, d = o ? e.collapse : e.expand, g = a === "switch" ? r`<div class=${c({
+    const { messages: e, expanded: o, text: i, toggleDisplay: r } = this, n = o ? s.menuExpanded : s.menuCollapsed, d = o ? e.collapse : e.expand, g = r === "switch" ? l`<div class=${c({
       [t.toggleContainer]: !0
-    })}><div aria-controls=${l.content} .ariaExpanded=${o} class=${c({
+    })}><div aria-controls=${a.content} .ariaExpanded=${o} class=${c({
       [t.toggle]: !0,
       [t.toggleSwitch]: !0
-    })} id=${l.toggle} @click=${this.toggleSection} @keydown=${this.handleHeaderKeyDown} role=button tabindex=0 title=${d ?? b}>${this.renderIcon(this.iconStart)}<div class=${c(t.toggleSwitchContent)}><span class=${c(t.toggleSwitchText)}>${i}</span></div>${this.renderIcon(this.iconEnd)}${this.renderStatusIcon()}<calcite-switch .checked=${o} class=${c(t.switch)} inert .label=${d} scale=s></calcite-switch></div></div>` : r`<div class=${c({
+    })} id=${a.toggle} @click=${this.toggleSection} @keydown=${this.handleHeaderKeyDown} role=button tabindex=0 title=${d ?? x}>${this.renderIcon(this.iconStart)}<div class=${c(t.toggleSwitchContent)}><span class=${c(t.toggleSwitchText)}>${i}</span></div>${this.renderIcon(this.iconEnd)}${this.renderStatusIcon()}<calcite-switch .checked=${o} class=${c(t.switch)} inert .label=${d} scale=s></calcite-switch></div></div>` : l`<div class=${c({
       [t.toggleContainer]: !0
-    })}><button aria-controls=${l.content} .ariaExpanded=${o} class=${c({
+    })}><button aria-controls=${a.content} .ariaExpanded=${o} class=${c({
       [t.sectionHeader]: !0,
       [t.toggle]: !0
-    })} id=${l.toggle} @click=${this.toggleSection}>${this.renderIcon(this.iconStart)}<span class=${c(t.sectionHeaderText)}>${i}</span>${this.renderIcon(this.iconEnd)}${this.renderStatusIcon()}<calcite-icon class=${c(t.chevronIcon)} .icon=${n} scale=s></calcite-icon></button></div>`;
-    return r`${g}<section aria-labelledby=${l.toggle} class=${c(t.content)} .hidden=${!o} id=${l.content}><slot></slot></section>`;
+    })} id=${a.toggle} @click=${this.toggleSection}>${this.renderIcon(this.iconStart)}<span class=${c(t.sectionHeaderText)}>${i}</span>${this.renderIcon(this.iconEnd)}${this.renderStatusIcon()}<calcite-icon class=${c(t.chevronIcon)} .icon=${n} scale=s></calcite-icon></button></div>`;
+    return l`${g}<section aria-labelledby=${a.toggle} class=${c(t.content)} .hidden=${!o} id=${a.content}><slot></slot></section>`;
   }
 }
-h("calcite-block-section", S);
+h("calcite-block-section", y);
 export {
-  S as BlockSection
+  y as BlockSection
 };

package/dist/components/calcite-block-section/resources.d.ts

@@ -20,8 +20,8 @@ export declare const CSS: {
     valid: string;
 };
 export declare const ICONS: {
-    readonly menuOpen: "chevron-up";
-    readonly menuClosed: "chevron-down";
+    readonly menuExpanded: "chevron-up";
+    readonly menuCollapsed: "chevron-down";
     readonly valid: "check-circle";
     readonly invalid: "exclamation-mark-triangle";
 };

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

@@ -14,7 +14,7 @@ import { D as R } from "../../chunks/dom.js";
 import { css as I } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const e = {
   buttonLoader: "calcite-button--loader",
   content: "content",

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

@@ -10,7 +10,7 @@ import { u as v } from "../../chunks/useT9n.js";
 import { css as x } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const t = {
   container: "container",
   contentWrapper: "content-wrapper",

package/dist/components/calcite-card-group/customElement.js

@@ -7,7 +7,7 @@ import { u as p, I as m } from "../../chunks/interactive.js";
 import { css as u } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const f = u`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class b extends r {
   // #endregion

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

@@ -14,7 +14,7 @@ import { u as j } from "../../chunks/useT9n.js";
 import { css as q } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const V = 6e3, a = {
   container: "container",
   containerOverlaid: "container--overlaid",

package/dist/components/calcite-carousel-item/customElement.js

@@ -5,7 +5,7 @@ import { g as c } from "../../chunks/guid.js";
 import { css as n } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const e = {
   container: "container",
   selected: "selected"

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

@@ -11,7 +11,7 @@ import { c as C } from "../../chunks/component.js";
 import { css as z } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const s = {
   toggle: "toggle",
   check: "check-svg"

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

@@ -10,7 +10,7 @@ import { u as f } from "../../chunks/useT9n.js";
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const c = {
   title: "title",
   close: "close",

package/dist/components/calcite-chip-group/customElement.js

@@ -8,7 +8,7 @@ import { c as f } from "../../chunks/component.js";
 import { css as u } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const g = u`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class I extends r {
   // #endregion

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

@@ -17,7 +17,7 @@ import { D as g, C as j, S as A, g as ve, e as Se, n as O, h as b, p as W, f as
 import { css as $e } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const xe = $e`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`, q = 16;
 class Ae extends ne {
   // #endregion

package/dist/components/calcite-color-picker-hex-input/customElement.js

@@ -10,7 +10,7 @@ import { c as R } from "../../chunks/component.js";
 import { css as K } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const m = {
   container: "container",
   hexInput: "hex-input",

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

@@ -8,7 +8,7 @@ import { h as u } from "../../chunks/utils4.js";
 import { css as b } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const h = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",

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

@@ -23,7 +23,7 @@ import { h as T, i as x, C as c, b as V, c as O, d as $, e as M, f as we, I as P
 import { css as ye } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const U = {
   button: "x-button"
 }, Se = ({ disabled: k, key: e, label: t, scale: i }) => f(e, ve`<button .ariaLabel=${t} class=${r(U.button)} .disabled=${k} tabindex=-1 type=button><calcite-icon icon=x .scale=${S(i)}></calcite-icon></button>`), ke = ye`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) }:host([scale=s]) .x-button{margin-inline:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-spacing-unit-s: .5rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) }:host([scale=m]) .x-button{margin-inline-end:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-spacing-unit-s: .75rem;--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(.625rem - 1px) }:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;width:0px;min-width:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.placeholder-icon{color:var(--calcite-color-text-3)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-width:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@media (forced-colors: active){.wrapper,.floating-ui-container{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.list-container{max-height:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width, 100%)}.list{margin:0;display:block;padding:0}.list--hide{height:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.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:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}`, z = "combobox-item-", L = "combobox-chip-", R = "combobox-label-", y = "combobox-listbox-", B = "combobox-input-";

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

@@ -11,7 +11,7 @@ import { h as s } from "../../chunks/text.js";
 import { css as P } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.21 */
+v3.1.0-next.22 */
 const t = {
   active: "label--active",
   centerContent: "center-content",