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

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

@@ -3,11 +3,9 @@ import { html as c } from "lit";
 import { LitElement as o, createEvent as n, safeClassMap as a } from "@arcgis/lumina";
 import { c as r } from "../../chunks/observers.js";
 import { css as s } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const i = {
   accordion: "accordion",
   transparent: "accordion--transparent"

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

@@ -5,13 +5,11 @@ import { ref as u } from "lit-html/directives/ref.js";
 import { LitElement as f, createEvent as h, safeClassMap as i } from "@arcgis/lumina";
 import { k as m, a as p, g as b } from "../../chunks/dom.js";
 import { g as l } from "../../chunks/component.js";
-import { c as $, s as S, a as y } from "../../chunks/loadable.js";
-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.0.0-next.99
-*/
+import { c as $ } from "../../chunks/loadable.js";
+import { css as S } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const v = {
   actionsStart: "actions-start",
   actionsEnd: "actions-end"
@@ -32,8 +30,8 @@ const v = {
 }, r = {
   section: "section",
   sectionToggle: "section-toggle"
-}, A = E`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-item-background-color);border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-item-border-color, var(--calcite-accordion-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem))}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))}.header-container{inline-size:100%}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%}.heading{font-weight:var(--calcite-font-weight-medium)}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch}.icon{display:flex;align-items:center;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor)));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor)));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{margin-block-start:.25rem}.content{display:none;text-align:initial}:host(:not(:focus):not(:hover):not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))}:host([expanded]){color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))}:host([expanded]) .content{display:block}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
-class k extends f {
+}, y = S`.icon-position--end,.icon-position--start{--calcite-internal-accordion-item-icon-rotation: -90deg ;--calcite-internal-accordion-item-active-icon-rotation: 0deg;--calcite-internal-accordion-item-icon-rotation-rtl: 90deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: 0deg}:host{position:relative;display:flex;flex-direction:column;text-decoration-line:none;color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));background-color:var(--calcite-accordion-item-background-color);border-width:0}:host .header{background-color:var(--calcite-accordion-item-header-background-color)}.icon-position--start{--calcite-internal-accordion-item-flex-direction: row-reverse;--calcite-internal-accordion-item-icon-spacing-start: 0;--calcite-internal-accordion-item-icon-spacing-end: var(--calcite-internal-accordion-icon-margin)}.icon-position--end{--calcite-internal-accordion-item-flex-direction: row;--calcite-internal-accordion-item-icon-spacing-start: var(--calcite-internal-accordion-icon-margin);--calcite-internal-accordion-item-icon-spacing-end: 0}.icon-position--end:not(.icon-type--plus-minus){--calcite-internal-accordion-item-icon-rotation: 0deg;--calcite-internal-accordion-item-active-icon-rotation: 180deg;--calcite-internal-accordion-item-icon-rotation-rtl: 0deg;--calcite-internal-accordion-item-active-icon-rotation-rtl: -180deg }.content,.header{border-block-end-width:var(--calcite-border-width-sm);border-block-end-style:solid;border-color:var(--calcite-accordion-item-border-color, var(--calcite-accordion-border-color, var(--calcite-color-border-2)))}.header-content{padding:var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem))}.content{padding:var(--calcite-accordion-item-content-space, var(--calcite-internal-accordion-item-padding, var(--calcite-internal-accordion-item-spacing-unit, .5rem .75rem)))}.header{display:flex;align-items:stretch}.header-content,.header-container,.header .actions-start,.header .actions-end{display:flex;align-items:center;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word}.header-content{flex-grow:1;cursor:pointer;outline-color:transparent;flex-direction:var(--calcite-internal-accordion-item-flex-direction);color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit))}.header-content: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))))}.header-content:focus,.header-content:hover,.header-content:active{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)))}.header-content:focus .heading,.header-content:hover .heading,.header-content:active .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))}.header-container{inline-size:100%}.header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}.heading,.description{display:flex;inline-size:100%}.heading{font-weight:var(--calcite-font-weight-medium)}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch}.icon{display:flex;align-items:center;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-end)}.icon--start{color:var(--calcite-accordion-item-icon-color-start, var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor)));margin-inline-end:var(--calcite-internal-accordion-icon-margin)}.icon--end{color:var(--calcite-accordion-item-icon-color-end, var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor)));margin-inline-end:var(--calcite-internal-accordion-icon-margin);margin-inline-start:var(--calcite-internal-accordion-icon-margin)}.expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))));margin-inline-start:var(--calcite-internal-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-internal-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-internal-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-icon-rotation-rtl))}.description{margin-block-start:.25rem}.content{display:none;text-align:initial}:host(:not(:focus):not(:hover):not([expanded])) .heading{color:var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))}:host([expanded]){color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))))}:host([expanded]) .header{border-block-end-color:transparent}:host([expanded]) .expand-icon{color:var(--calcite-accordion-item-expand-icon-color, var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))));transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl))}:host([expanded]) .description{color:var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))))}:host([expanded]) .content{display:block}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}.header-content:hover .heading,.header-content:focus .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}`;
+class E extends f {
   // #endregion
   // #region Lifecycle
   constructor() {
@@ -43,7 +41,7 @@ class k extends f {
     this.properties = { hasActionsEnd: 16, hasActionsStart: 16, accordionParent: 0, description: 1, expanded: 7, heading: 1, iconEnd: 3, iconFlipRtl: 3, iconPosition: 1, iconStart: 3, iconType: 1, scale: 1 };
   }
   static {
-    this.styles = A;
+    this.styles = y;
   }
   // #endregion
   // #region Public Methods
@@ -52,10 +50,8 @@ class k extends f {
     await $(this), this.headerEl.focus();
   }
   load() {
-    S(this);
   }
   loaded() {
-    y(this);
   }
   // #endregion
   // #region Private Methods
@@ -126,7 +122,7 @@ class k extends f {
     })}><div class=${i({ [e.header]: !0, [g.rtl]: c === "rtl" })}>${this.renderActionsStart()}<div aria-controls=${r.section} .ariaExpanded=${this.expanded} class=${i(e.headerContent)} id=${r.sectionToggle} @click=${this.itemHeaderClickHandler} role=button tabindex=0 ${u(this.storeHeaderEl)}><div class=${i(e.headerContainer)}>${o}<div class=${i(e.headerText)}><span class=${i(e.heading)}>${this.heading}</span>${n ? a`<span class=${i(e.description)}>${n}</span>` : null}</div>${d}</div><calcite-icon class=${i(e.expandIcon)} .icon=${this.iconType === "chevron" ? "chevronDown" : this.iconType === "caret" ? "caretDown" : this.expanded ? "minus" : "plus"} .scale=${l(this.scale)}></calcite-icon></div>${this.renderActionsEnd()}</div><section aria-labelledby=${r.sectionToggle} class=${i(e.content)} id=${r.section}><slot></slot></section></div>`;
   }
 }
-x("calcite-accordion-item", k);
+x("calcite-accordion-item", E);
 export {
-  k as AccordionItem
+  E as AccordionItem
 };

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

@@ -1,21 +1,19 @@
 import { c as y } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
+import { html as e } from "lit-html";
 import { keyed as g } from "lit-html/directives/keyed.js";
 import { createRef as C, ref as $ } from "lit-html/directives/ref.js";
-import { LitElement as z, safeClassMap as n, nothing as r } from "@arcgis/lumina";
+import { LitElement as z, safeClassMap as n, nothing as c } from "@arcgis/lumina";
 import { g as w } from "../../chunks/guid.js";
 import { u as I, I as E } from "../../chunks/interactive.js";
-import { c as T, s as L, a as S } from "../../chunks/loadable.js";
-import { c as F } from "../../chunks/observers.js";
-import { g as H } from "../../chunks/component.js";
-import { u as O } from "../../chunks/useT9n.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.0.0-next.99
-*/
-const e = {
+import { c as T } from "../../chunks/loadable.js";
+import { c as L } from "../../chunks/observers.js";
+import { g as S } from "../../chunks/component.js";
+import { u as F } from "../../chunks/useT9n.js";
+import { css as H } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const i = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
@@ -27,18 +25,18 @@ const e = {
   textContainerVisible: "text-container--visible",
   indicatorWithIcon: "indicator-with-icon",
   indicatorWithoutIcon: "indicator-without-icon"
-}, j = {
+}, O = {
   tooltip: "tooltip"
-}, B = 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([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;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3)}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}:host,.button{border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius)))}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));text-align:unset;flex:1 0 auto;cursor:inherit}.button:hover,.button:focus{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button: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))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1.5rem}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:margin;transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus{color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)));background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([active]) .button:active{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-color-transparent-press)}:host([data-active]) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .button{font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, .5rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs))}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:.5rem}:host([scale=m]) .button{font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-md))}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:.75rem}:host([scale=l]) .button{font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1.25rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl))}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color, var(--calcite-action-background-color, var(--calcite-color-foreground-1)))}:host([disabled]):host([active]) .button,:host([disabled]):host([active]) .button:hover,:host([disabled]):host([active]) .button:focus{opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3))))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
-class N extends z {
+}, R = H`: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([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;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3)}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}:host,.button{border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius)))}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));text-align:unset;flex:1 0 auto;cursor:inherit}.button:hover,.button:focus{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button: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))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1.5rem}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:margin;transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus{color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)));background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([active]) .button:active{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-color-transparent-press)}:host([data-active]) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .button{font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, .5rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs))}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:.5rem}:host([scale=m]) .button{font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-md))}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:.75rem}:host([scale=l]) .button{font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1.25rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl))}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color, var(--calcite-action-background-color, var(--calcite-color-foreground-1)))}:host([disabled]):host([active]) .button,:host([disabled]):host([active]) .button:hover,:host([disabled]):host([active]) .button:focus{opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3))))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+class j extends z {
   constructor() {
-    super(...arguments), this.guid = `calcite-action-${w()}`, this.buttonEl = C(), this.buttonId = `${this.guid}-button`, this.indicatorId = `${this.guid}-indicator`, this.mutationObserver = F("mutation", () => this.requestUpdate()), this.active = !1, this.appearance = "solid", this.compact = !1, this.disabled = !1, this.dragHandle = !1, this.iconFlipRtl = !1, this.indicator = !1, this.loading = !1, this.messages = O({ blocking: !0 }), this.scale = "m", this.textEnabled = !1;
+    super(...arguments), this.guid = `calcite-action-${w()}`, this.buttonEl = C(), this.buttonId = `${this.guid}-button`, this.indicatorId = `${this.guid}-indicator`, this.mutationObserver = L("mutation", () => this.requestUpdate()), this.active = !1, this.appearance = "solid", this.compact = !1, this.disabled = !1, this.dragHandle = !1, this.iconFlipRtl = !1, this.indicator = !1, this.loading = !1, this.messages = F({ blocking: !0 }), this.scale = "m", this.textEnabled = !1;
   }
   static {
     this.properties = { active: 7, alignment: 3, appearance: 3, compact: 7, disabled: 7, dragHandle: 7, icon: 3, iconFlipRtl: 7, indicator: 7, label: 1, loading: 7, messageOverrides: 0, scale: 3, text: 1, textEnabled: 7 };
   }
   static {
-    this.styles = B;
+    this.styles = R;
   }
   // #endregion
   // #region Public Methods
@@ -52,13 +50,11 @@ class N extends z {
     super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 });
   }
   async load() {
-    L(this);
   }
   updated() {
     I(this);
   }
   loaded() {
-    S(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.mutationObserver?.disconnect();
@@ -66,44 +62,44 @@ class N extends z {
   // #endregion
   // #region Private Methods
   handleTooltipSlotChange(t) {
-    const i = t.target.assignedElements({
+    const o = t.target.assignedElements({
       flatten: !0
-    }).filter((c) => c?.matches("calcite-tooltip"))[0];
-    i && (i.referenceElement = this.buttonEl.value);
+    }).filter((r) => r?.matches("calcite-tooltip"))[0];
+    o && (o.referenceElement = this.buttonEl.value);
   }
   // #endregion
   // #region Rendering
   renderTextContainer() {
-    const { text: t, textEnabled: a } = this, i = {
-      [e.textContainer]: !0,
-      [e.textContainerVisible]: a
+    const { text: t, textEnabled: a } = this, o = {
+      [i.textContainer]: !0,
+      [i.textContainerVisible]: a
     };
-    return t ? g("text-container", o`<div class=${n(i)}>${t}</div>`) : null;
+    return t ? g("text-container", e`<div class=${n(o)}>${t}</div>`) : null;
   }
   renderIndicatorText() {
-    const { indicator: t, messages: a, indicatorId: i, buttonId: c } = this;
-    return o`<div aria-labelledby=${c ?? r} aria-live=polite class=${n(e.indicatorText)} id=${i ?? r} role=region>${t ? a.indicator : null}</div>`;
+    const { indicator: t, messages: a, indicatorId: o, buttonId: r } = this;
+    return e`<div aria-labelledby=${r ?? c} aria-live=polite class=${n(i.indicatorText)} id=${o ?? c} role=region>${t ? a.indicator : null}</div>`;
   }
   renderIconContainer() {
-    const { loading: t, icon: a, scale: i, el: c, iconFlipRtl: d, indicator: b } = this, p = i === "l" ? "l" : "m", h = t ? o`<calcite-loader inline .label=${this.messages.loading} .scale=${p}></calcite-loader>` : null, l = a ? o`<calcite-icon class=${n({ [e.indicatorWithIcon]: b })} .flipRtl=${d} .icon=${a} .scale=${H(this.scale)}></calcite-icon>` : null, s = h || l, u = s || c.children?.length, v = o`<div class=${n({
-      [e.slotContainer]: !0,
-      [e.slotContainerHidden]: t
+    const { loading: t, icon: a, scale: o, el: r, iconFlipRtl: d, indicator: b } = this, p = o === "l" ? "l" : "m", h = t ? e`<calcite-loader inline .label=${this.messages.loading} .scale=${p}></calcite-loader>` : null, l = a ? e`<calcite-icon class=${n({ [i.indicatorWithIcon]: b })} .flipRtl=${d} .icon=${a} .scale=${S(this.scale)}></calcite-icon>` : null, s = h || l, u = s || r.children?.length, v = e`<div class=${n({
+      [i.slotContainer]: !0,
+      [i.slotContainerHidden]: t
     })}><slot></slot></div>`;
-    return u ? g("icon-container", o`<div aria-hidden=true class=${n(e.iconContainer)}>${s}${v}</div>`) : null;
+    return u ? g("icon-container", e`<div aria-hidden=true class=${n(i.iconContainer)}>${s}${v}</div>`) : null;
   }
   renderButton() {
-    const { active: t, compact: a, disabled: i, icon: c, loading: d, textEnabled: b, label: p, text: h, indicator: l, indicatorId: s, buttonId: u, messages: v } = this, m = p || h || "", f = l ? v.indicatorLabel.replace("{label}", m) : m, x = {
-      [e.button]: !0,
-      [e.buttonTextVisible]: b,
-      [e.buttonCompact]: a
-    }, k = o`${this.renderIconContainer()}${this.renderTextContainer()}${!c && l && g("indicator-no-icon", o`<div class=${n(e.indicatorWithoutIcon)}></div>`) || ""}`;
-    return this.dragHandle ? o`<span aria-controls=${(l ? s : null) ?? r} .ariaBusy=${d} .ariaDisabled=${this.disabled ? this.disabled : null} .ariaLabel=${f} .ariaPressed=${t} class=${n(x)} id=${u ?? r} role=button tabindex=${(this.disabled ? null : 0) ?? r} ${$(this.buttonEl)}>${k}</span>` : o`<button aria-controls=${(l ? s : null) ?? r} .ariaBusy=${d} .ariaLabel=${f} .ariaPressed=${t} class=${n(x)} .disabled=${i} id=${u ?? r} ${$(this.buttonEl)}>${k}</button>`;
+    const { active: t, compact: a, disabled: o, icon: r, loading: d, textEnabled: b, label: p, text: h, indicator: l, indicatorId: s, buttonId: u, messages: v } = this, m = p || h || "", f = l ? v.indicatorLabel.replace("{label}", m) : m, x = {
+      [i.button]: !0,
+      [i.buttonTextVisible]: b,
+      [i.buttonCompact]: a
+    }, k = e`${this.renderIconContainer()}${this.renderTextContainer()}${!r && l && g("indicator-no-icon", e`<div class=${n(i.indicatorWithoutIcon)}></div>`) || ""}`;
+    return this.dragHandle ? e`<span aria-controls=${(l ? s : null) ?? c} .ariaBusy=${d} .ariaDisabled=${this.disabled ? this.disabled : null} .ariaLabel=${f} .ariaPressed=${t} class=${n(x)} id=${u ?? c} role=button tabindex=${(this.disabled ? null : 0) ?? c} ${$(this.buttonEl)}>${k}</span>` : e`<button aria-controls=${(l ? s : null) ?? c} .ariaBusy=${d} .ariaLabel=${f} .ariaPressed=${t} class=${n(x)} .disabled=${o} id=${u ?? c} tabindex=${(o ? null : 0) ?? c} ${$(this.buttonEl)}>${k}</button>`;
   }
   render() {
-    return E({ disabled: this.disabled, children: o`${this.renderButton()}<slot name=${j.tooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${this.renderIndicatorText()}` });
+    return E({ disabled: this.disabled, children: e`${this.renderButton()}<slot name=${O.tooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${this.renderIndicatorText()}` });
   }
 }
-y("calcite-action", N);
+y("calcite-action", j);
 export {
-  N as Action
+  j as Action
 };

package/dist/components/calcite-action-bar/customElement.js

@@ -2,25 +2,23 @@ import { D as v, c as x } from "../../chunks/runtime.js";
 import { debounce as A } from "lodash-es";
 import { html as p } from "lit";
 import { LitElement as y, createEvent as w, safeClassMap as E } from "@arcgis/lumina";
-import { h as C, a as u, s as z } from "../../chunks/dom.js";
-import { c as D, s as O, a as G } from "../../chunks/loadable.js";
+import { h as z, a as u, s as C } from "../../chunks/dom.js";
+import { c as D } from "../../chunks/loadable.js";
 import { c as f } from "../../chunks/observers.js";
-import { q as T, g as H, o as $, t as B, E as L, a as S } from "../../chunks/ExpandToggle.js";
-import { u as k } from "../../chunks/useT9n.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.0.0-next.99
-*/
-const P = {
+import { q as O, g as G, o as T, t as H, E as $, a as B } from "../../chunks/ExpandToggle.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { css as L } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const k = {
   actionGroupEnd: "action-group--end"
 }, h = {
   actionsEnd: "actions-end",
   bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip"
-}, M = U`: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{pointer-events:auto;display:inline-flex;align-self:stretch;gap:var(--calcite-action-bar-items-space, 0)}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]){overflow-y:auto}:host([layout=vertical]):host([expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]){overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
-class q extends y {
+}, P = L`: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{pointer-events:auto;display:inline-flex;align-self:stretch;gap:var(--calcite-action-bar-items-space, 0)}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]){overflow-y:auto}:host([layout=vertical]):host([expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]){overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
+class U extends y {
   // #endregion
   // #region Lifecycle
   constructor() {
@@ -28,9 +26,9 @@ class q extends y {
       const { el: e, expanded: l, expandDisabled: n, layout: i, overflowActionsDisabled: r, actionGroups: s } = this;
       if (r || i === "vertical" && !o || i === "horizontal" && !t)
         return;
-      const a = T(e), c = n ? a.length : a.length + 1;
+      const a = O(e), c = n ? a.length : a.length + 1;
       this.updateGroups();
-      const d = this.hasActionsEnd || this.hasBottomActions || !n ? s.length + 1 : s.length, { actionHeight: b, actionWidth: m } = H(a), g = S({
+      const d = this.hasActionsEnd || this.hasBottomActions || !n ? s.length + 1 : s.length, { actionHeight: b, actionWidth: m } = G(a), g = B({
         layout: i,
         actionCount: c,
         actionHeight: b,
@@ -39,7 +37,7 @@ class q extends y {
         width: t,
         groupCount: d
       });
-      $({
+      T({
         actionGroups: s,
         expanded: l,
         overflowCount: g
@@ -49,13 +47,13 @@ class q extends y {
       this.resize({ width: o, height: e });
     }, this.resizeObserver = f("resize", (t) => this.resizeHandlerEntries(t)), this.toggleExpand = () => {
       this.expanded = !this.expanded, this.calciteActionBarToggle.emit();
-    }, this.hasActionsEnd = !1, this.hasBottomActions = !1, this.expandDisabled = !1, this.expanded = !1, this.layout = "vertical", this.messages = k(), this.overflowActionsDisabled = !1, this.overlayPositioning = "absolute", this.scale = "m", this.calciteActionBarToggle = w({ cancelable: !1 }), this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
+    }, this.hasActionsEnd = !1, this.hasBottomActions = !1, this.expandDisabled = !1, this.expanded = !1, this.layout = "vertical", this.messages = S(), this.overflowActionsDisabled = !1, this.overlayPositioning = "absolute", this.scale = "m", this.calciteActionBarToggle = w({ cancelable: !1 }), this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
   }
   static {
     this.properties = { expandTooltip: 16, hasActionsEnd: 16, hasBottomActions: 16, actionsEndGroupLabel: 1, expandDisabled: 7, expanded: 7, layout: 3, messageOverrides: 0, overflowActionsDisabled: 7, overlayPositioning: 3, position: 3, scale: 3 };
   }
   static {
-    this.styles = M;
+    this.styles = P;
   }
   // #endregion
   // #region Public Methods
@@ -69,19 +67,18 @@ class q extends y {
   }
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await D(this), C(this.el);
+    await D(this), z(this.el);
   }
   connectedCallback() {
     super.connectedCallback(), this.updateGroups(), this.overflowActions(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
   }
   async load() {
-    O(this);
   }
   willUpdate(t) {
     t.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== !1) && this.overflowActions(), t.has("expanded") && this.hasUpdated && this.expandedHandler(), t.has("layout") && (this.hasUpdated || this.layout !== "vertical") && this.updateGroups(), t.has("overflowActionsDisabled") && (this.hasUpdated || this.overflowActionsDisabled !== !1) && this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
   }
   loaded() {
-    G(this), this.overflowActions();
+    this.overflowActions();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect();
@@ -90,7 +87,7 @@ class q extends y {
   // #region Private Methods
   expandedHandler() {
     const { el: t, expanded: o } = this;
-    B({ el: t, expanded: o }), this.overflowActions();
+    H({ el: t, expanded: o }), this.overflowActions();
   }
   overflowActionsDisabledHandler(t) {
     if (t) {
@@ -130,20 +127,20 @@ class q extends y {
     this.hasBottomActions = u(t);
   }
   handleTooltipSlotChange(t) {
-    const o = z(t).filter((e) => e?.matches("calcite-tooltip"));
+    const o = C(t).filter((e) => e?.matches("calcite-tooltip"));
     this.expandTooltip = o[0];
   }
   // #endregion
   // #region Rendering
   renderBottomActionGroup() {
-    const { expanded: t, expandDisabled: o, el: e, position: l, toggleExpand: n, scale: i, layout: r, messages: s, actionsEndGroupLabel: a, overlayPositioning: c } = this, d = o ? null : L({ collapseLabel: s.collapseLabel, collapseText: s.collapse, el: e, expandLabel: s.expandLabel, expandText: s.expand, expanded: t, position: l, scale: i, toggle: n, tooltip: this.expandTooltip });
-    return p`<calcite-action-group class=${E(P.actionGroupEnd)} .hidden=${this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)} .label=${a} .layout=${r} .overlayPositioning=${c} .scale=${i}><slot name=${h.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${h.bottomActions} @slotchange=${this.handleBottomActionsSlotChange}></slot><slot name=${h.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${d}</calcite-action-group>`;
+    const { expanded: t, expandDisabled: o, el: e, position: l, toggleExpand: n, scale: i, layout: r, messages: s, actionsEndGroupLabel: a, overlayPositioning: c } = this, d = o ? null : $({ collapseLabel: s.collapseLabel, collapseText: s.collapse, el: e, expandLabel: s.expandLabel, expandText: s.expand, expanded: t, position: l, scale: i, toggle: n, tooltip: this.expandTooltip });
+    return p`<calcite-action-group class=${E(k.actionGroupEnd)} .hidden=${this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)} .label=${a} .layout=${r} .overlayPositioning=${c} .scale=${i}><slot name=${h.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${h.bottomActions} @slotchange=${this.handleBottomActionsSlotChange}></slot><slot name=${h.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${d}</calcite-action-group>`;
   }
   render() {
     return p`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}`;
   }
 }
-x("calcite-action-bar", q);
+x("calcite-action-bar", U);
 export {
-  q as ActionBar
+  U as ActionBar
 };

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

@@ -1,21 +1,19 @@
 import { c as d } from "../../chunks/runtime.js";
-import { html as n } from "lit";
+import { html as a } from "lit";
 import { LitElement as m, safeClassMap as h } from "@arcgis/lumina";
-import { c as g, s as b, a as f } from "../../chunks/loadable.js";
+import { c as g } from "../../chunks/loadable.js";
 import { S as s } from "../../chunks/resources2.js";
-import { h as x, a as y } from "../../chunks/dom.js";
-import { u as $ } from "../../chunks/useT9n.js";
-import { I as v, S as i, C as O } from "../../chunks/resources7.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const S = M`: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{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
-class z extends m {
+import { h as f, a as b } from "../../chunks/dom.js";
+import { u as x } from "../../chunks/useT9n.js";
+import { I as y, S as i, C as $ } from "../../chunks/resources7.js";
+import { css as v } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const O = v`: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{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
+class M extends m {
   constructor() {
-    super(...arguments), this.hasMenuActions = !1, this.expanded = !1, this.layout = "vertical", this.menuOpen = !1, this.messages = $(), this.overlayPositioning = "absolute", this.scale = "m";
+    super(...arguments), this.hasMenuActions = !1, this.expanded = !1, this.layout = "vertical", this.menuOpen = !1, this.messages = x(), this.overlayPositioning = "absolute", this.scale = "m";
   }
   static {
     this.properties = { hasMenuActions: 16, columns: 11, expanded: 7, label: 1, layout: 3, menuFlipPlacements: 0, menuOpen: 7, menuPlacement: 3, messageOverrides: 0, overlayPositioning: 3, scale: 3 };
@@ -24,24 +22,22 @@ class z extends m {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = S;
+    this.styles = O;
   }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await g(this), x(this.el);
+    await g(this), f(this.el);
   }
   // #endregion
   // #region Lifecycle
   async load() {
-    b(this);
   }
   willUpdate(t) {
     t.has("expanded") && (this.hasUpdated || this.expanded !== !1) && (this.menuOpen = !1);
   }
   loaded() {
-    f(this);
   }
   // #endregion
   // #region Private Methods
@@ -49,19 +45,19 @@ class z extends m {
     this.menuOpen = !!t.currentTarget.open;
   }
   handleMenuActionsSlotChange(t) {
-    this.hasMenuActions = y(t);
+    this.hasMenuActions = b(t);
   }
   // #endregion
   // #region Rendering
   renderMenu() {
-    const { expanded: t, menuOpen: l, scale: o, layout: e, messages: a, overlayPositioning: c, hasMenuActions: r, menuFlipPlacements: u, menuPlacement: p } = this;
-    return n`<calcite-action-menu .expanded=${t} .flipPlacements=${u ?? (e === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!r} .label=${a.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${l} .overlayPositioning=${c} .placement=${p ?? (e === "horizontal" ? "bottom-start" : "leading-start")} .scale=${o}><calcite-action .icon=${v.menu} .scale=${o} slot=${s.trigger} .text=${a.more} .textEnabled=${t}></calcite-action><slot name=${i.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${i.menuTooltip} slot=${s.tooltip}></slot></calcite-action-menu>`;
+    const { expanded: t, menuOpen: l, scale: o, layout: e, messages: n, overlayPositioning: c, hasMenuActions: r, menuFlipPlacements: u, menuPlacement: p } = this;
+    return a`<calcite-action-menu .expanded=${t} .flipPlacements=${u ?? (e === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!r} .label=${n.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${l} .overlayPositioning=${c} .placement=${p ?? (e === "horizontal" ? "bottom-start" : "leading-start")} .scale=${o}><calcite-action .icon=${y.menu} .scale=${o} slot=${s.trigger} .text=${n.more} .textEnabled=${t}></calcite-action><slot name=${i.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${i.menuTooltip} slot=${s.tooltip}></slot></calcite-action-menu>`;
   }
   render() {
-    return n`<div .ariaLabel=${this.label} class=${h(O.container)} role=group><slot></slot>${this.renderMenu()}</div>`;
+    return a`<div .ariaLabel=${this.label} class=${h($.container)} role=group><slot></slot>${this.renderMenu()}</div>`;
   }
 }
-d("calcite-action-group", z);
+d("calcite-action-group", M);
 export {
-  z as ActionGroup
+  M as ActionGroup
 };

package/dist/components/calcite-action-menu/customElement.js

@@ -6,16 +6,14 @@ import { g as u } from "../../chunks/array.js";
 import { b as x, t as I } from "../../chunks/dom.js";
 import { g as b } from "../../chunks/guid.js";
 import { i as M } from "../../chunks/key.js";
-import { c as B, s as $, a as A } from "../../chunks/loadable.js";
-import { a as w, S as d, C as h, I as C } from "../../chunks/resources2.js";
-import { css as y } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const P = y`:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-action-menu-items-space, 0)}:host([hidden]){display:none}[hidden]{display:none}`, D = ["ArrowUp", "ArrowDown", "End", "Home"];
-class O extends E {
+import { c as B } from "../../chunks/loadable.js";
+import { a as $, S as d, I as A, C as h } from "../../chunks/resources2.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.0.1 */
+const C = w`:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-action-menu-items-space, 0)}:host([hidden]){display:none}[hidden]{display:none}`, y = ["ArrowUp", "ArrowDown", "End", "Home"];
+class P extends E {
   constructor() {
     super(...arguments), this.guid = `calcite-action-menu-${b()}`, this.actionElements = [], this.menuButtonClick = () => {
       this.toggleOpen();
@@ -42,14 +40,14 @@ class O extends E {
       }
     }, this.menuId = `${this.guid}-menu`, this._open = !1, this.updateAction = (t, e) => {
       const { guid: n, activeMenuItemIndex: o } = this, i = `${n}-action-${e}`;
-      t.tabIndex = -1, t.setAttribute("role", "menuitem"), t.id || (t.id = i), t.toggleAttribute(w, e === o);
+      t.tabIndex = -1, t.setAttribute("role", "menuitem"), t.id || (t.id = i), t.toggleAttribute($, e === o);
     }, this.activeMenuItemIndex = -1, this.appearance = "solid", this.expanded = !1, this.overlayPositioning = "absolute", this.placement = "auto", this.scale = "m", this.calciteActionMenuOpen = v({ cancelable: !1 });
   }
   static {
     this.properties = { activeMenuItemIndex: 16, menuButtonEl: 16, appearance: 3, expanded: 7, flipPlacements: 0, label: 1, open: 7, overlayPositioning: 3, placement: 3, scale: 3 };
   }
   static {
-    this.styles = P;
+    this.styles = C;
   }
   /** When `true`, the component is open. */
   get open() {
@@ -71,13 +69,11 @@ class O extends E {
     super.connectedCallback(), this.connectMenuButtonEl();
   }
   load() {
-    $(this);
   }
   willUpdate(t) {
     t.has("expanded") && (this.hasUpdated || this.expanded !== !1) && this.expandedHandler(), t.has("activeMenuItemIndex") && (this.hasUpdated || this.activeMenuItemIndex !== -1) && this.updateActions(this.actionElements);
   }
   loaded() {
-    A(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.disconnectMenuButtonEl();
@@ -136,7 +132,7 @@ class O extends E {
     return !!e.find((n) => n === t);
   }
   handleActionNavigation(t, e, n) {
-    if (!this.isValidKey(e, D))
+    if (!this.isValidKey(e, y))
       return;
     if (t.preventDefault(), !this.open) {
       this.toggleOpen(), (e === "Home" || e === "ArrowDown") && (this.activeMenuItemIndex = 0), (e === "End" || e === "ArrowUp") && (this.activeMenuItemIndex = n.length - 1);
@@ -159,7 +155,7 @@ class O extends E {
   // #region Rendering
   renderMenuButton() {
     const { appearance: t, label: e, scale: n, expanded: o } = this;
-    return l`<slot name=${d.trigger} @slotchange=${this.setMenuButtonEl}><calcite-action .appearance=${t} class=${r(h.defaultTrigger)} .icon=${C.menu} .scale=${n} .text=${e} .textEnabled=${o} ${c(this.setDefaultMenuButtonEl)}></calcite-action></slot>`;
+    return l`<slot name=${d.trigger} @slotchange=${this.setMenuButtonEl}><calcite-action .appearance=${t} class=${r(h.defaultTrigger)} .icon=${A.menu} .scale=${n} .text=${e} .textEnabled=${o} ${c(this.setDefaultMenuButtonEl)}></calcite-action></slot>`;
   }
   renderMenuItems() {
     const { actionElements: t, activeMenuItemIndex: e, menuId: n, menuButtonEl: o, label: i, placement: s, overlayPositioning: p, flipPlacements: m } = this, f = t[e]?.id || null;
@@ -169,7 +165,7 @@ class O extends E {
     return l`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${d.tooltip} @slotchange=${this.updateTooltip}></slot>`;
   }
 }
-g("calcite-action-menu", O);
+g("calcite-action-menu", P);
 export {
-  O as ActionMenu
+  P as ActionMenu
 };