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

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

@@ -1,28 +1,26 @@
-import { c as S } from "../../chunks/runtime.js";
+import { c as E } from "../../chunks/runtime.js";
 import { keyed as r } from "lit-html/directives/keyed.js";
-import { html as n, nothing as f } from "lit";
-import { LitElement as w, createEvent as s, safeClassMap as a } from "@arcgis/lumina";
-import { h as E, a as d } from "../../chunks/dom.js";
-import { u as I, I as H } from "../../chunks/interactive.js";
-import { H as B } from "../../chunks/Heading.js";
-import { c as z, s as A, a as P } from "../../chunks/loadable.js";
-import { o as b } from "../../chunks/openCloseComponent.js";
-import { e as T } from "../../chunks/floating-ui.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { l as L } from "../../chunks/logger.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
-*/
+import { ref as O } 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/loadable.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 { 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 */
 const c = {
   content: "content",
   toggle: "toggle",
   header: "header"
 }, t = {
   actionsEnd: "actions-end",
-  button: "button",
   container: "container",
   content: "content",
   contentStart: "content-start",
@@ -38,7 +36,6 @@ const c = {
   iconEndContainer: "icon-end-container",
   invalid: "invalid",
   statusIcon: "status-icon",
-  summary: "summary",
   title: "title",
   toggle: "toggle",
   toggleIcon: "toggle-icon",
@@ -49,27 +46,27 @@ const c = {
   control: "control",
   headerMenuActions: "header-menu-actions",
   icon: "icon"
-}, u = {
+}, f = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
-}, F = 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{--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-header-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-text-color-hover, 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-text-color-hover, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`;
-class R 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([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 {
   constructor() {
-    super(...arguments), this.openTransitionProp = "margin-top", this.hasContentStart = !1, this.hasControl = !1, this.hasEndActions = !1, this.hasIcon = !1, this.hasMenuActions = !1, this.collapsible = !1, this.disabled = !1, this.dragHandle = !1, this.loading = !1, this.menuPlacement = T, this.messages = O(), this.open = !1, this.overlayPositioning = "absolute", this.calciteBlockBeforeClose = s({ cancelable: !1 }), this.calciteBlockBeforeOpen = s({ cancelable: !1 }), this.calciteBlockClose = s({ cancelable: !1 }), this.calciteBlockOpen = s({ cancelable: !1 }), this.calciteBlockToggle = s({ 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.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 });
   }
   static {
-    this.properties = { hasContentStart: 16, hasControl: 16, hasEndActions: 16, hasIcon: 16, hasMenuActions: 16, collapsible: 7, description: 1, disabled: 7, dragHandle: 7, heading: 1, headingLevel: 11, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, loading: 7, label: 1, menuFlipPlacements: 0, menuPlacement: 3, messageOverrides: 0, open: 7, overlayPositioning: 3, status: 3 };
+    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 };
   }
   static {
-    this.styles = F;
+    this.styles = j;
   }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component's first tabbable element. */
   async setFocus() {
-    await z(this), E(this.el);
+    await T(this), I(this.el);
   }
   // #endregion
   // #region Lifecycle
@@ -77,16 +74,15 @@ class R extends w {
     super.connectedCallback(), this.transitionEl = this.el;
   }
   load() {
-    A(this), this.open && b(this), !this.heading && !this.label && L.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 && D.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) && b(this);
+    e.has("open") && (this.hasUpdated || this.open !== !1) && M(this), e.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== !1) && this.sortHandleOpenHandler();
   }
   updated() {
-    I(this);
+    P(this);
   }
   loaded() {
-    P(this);
   }
   // #endregion
   // #region Private Methods
@@ -102,6 +98,24 @@ class R extends w {
   onClose() {
     this.calciteBlockClose.emit();
   }
+  sortHandleOpenHandler() {
+    this.sortHandleEl && (this.sortHandleEl.open = this.sortHandleOpen);
+  }
+  setSortHandleEl(e) {
+    this.sortHandleEl = e, this.sortHandleOpenHandler();
+  }
+  handleSortHandleBeforeOpen(e) {
+    e.stopPropagation(), this.calciteBlockSortHandleBeforeOpen.emit();
+  }
+  handleSortHandleBeforeClose(e) {
+    e.stopPropagation(), this.calciteBlockSortHandleBeforeClose.emit();
+  }
+  handleSortHandleClose(e) {
+    e.stopPropagation(), this.sortHandleOpen = !1, this.calciteBlockSortHandleClose.emit();
+  }
+  handleSortHandleOpen(e) {
+    e.stopPropagation(), this.sortHandleOpen = !0, this.calciteBlockSortHandleOpen.emit();
+  }
   onHeaderClick() {
     this.open = !this.open, this.calciteBlockToggle.emit();
   }
@@ -132,7 +146,7 @@ class R extends w {
       [t.statusIcon]: !0,
       [t.valid]: i == "valid",
       [t.invalid]: i == "invalid"
-    })} .icon=${u[i]} scale=s></calcite-icon></div>`) : r("icon-slot", n`<div class=${a(t.icon)} .hidden=${!this.hasIcon}>${r("icon-slot", n`<slot name=${h.icon} @slotchange=${this.iconSlotChangeHandler}></slot>`)}</div>`);
+    })} .icon=${f[i]} scale=s></calcite-icon></div>`) : r("icon-slot", n`<div class=${a(t.icon)} .hidden=${!this.hasIcon}>${r("icon-slot", n`<slot name=${h.icon} @slotchange=${this.iconSlotChangeHandler}></slot>`)}</div>`);
   }
   renderActionsEnd() {
     return n`<div class=${a(t.actionsEnd)} .hidden=${!this.hasEndActions}><slot name=${h.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
@@ -142,21 +156,21 @@ class R extends w {
   }
   renderTitle() {
     const { heading: e, headingLevel: o, description: i } = this;
-    return e || i ? n`<div class=${a(t.title)}>${B({ 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)}>${A({ 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", l = e === "start" ? this.iconStart : this.iconEnd, g = e === "start" ? t.iconStart : t.iconEnd;
-    if (l)
-      return r(l, n`<calcite-icon class=${a(g)} .flipRtl=${i} .icon=${l} scale=s></calcite-icon>`);
+    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;
+    if (s)
+      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: l, heading: g, messages: m, description: v, menuFlipPlacements: $, menuPlacement: x } = this, k = i ? m.collapse : m.expand, p = n`<header class=${a({ [t.header]: !0, [t.headerHasText]: !!(g || v) })} id=${c.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`, C = i ? u.opened : u.closed, y = n`<div class=${a(t.headerContainer)}>${this.dragHandle ? n`<calcite-handle .label=${g || l}></calcite-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=${k ?? f}>${p}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}<calcite-icon class=${a(t.toggleIcon)} .icon=${C} scale=s></calcite-icon></div></button>` : this.iconEnd ? n`<div>${p}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}</div></div>` : p}<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=${m.options} .overlayPositioning=${this.overlayPositioning} .placement=${x}><slot name=${h.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;
-    return H({ disabled: this.disabled, children: n`<article aria-label=${l ?? f} .ariaBusy=${o} class=${a({
+    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({
       [t.container]: !0
-    })}>${y}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!i} id=${c.content}>${this.renderScrim()}</section></article>` });
+    })}>${B}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!i} id=${c.content}>${this.renderScrim()}</section></article>` });
   }
 }
-S("calcite-block", R);
+E("calcite-block", q);
 export {
-  R as Block
+  q as Block
 };

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

@@ -1,6 +1,6 @@
 import "../calcite-scrim/index.js";
 import "../calcite-loader/index.js";
 import "../calcite-icon/index.js";
-import "../calcite-handle/index.js";
+import "../calcite-sort-handle/index.js";
 import "../calcite-action-menu/index.js";
 export * from "./customElement.js";

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

@@ -1,6 +1,6 @@
 import "../calcite-scrim/index.js";
 import "../calcite-loader/index.js";
 import "../calcite-icon/index.js";
-import "../calcite-handle/index.js";
+import "../calcite-sort-handle/index.js";
 import "../calcite-action-menu/index.js";
 export * from "./customElement.js";

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

@@ -0,0 +1,2 @@
+import { Block } from './customElement.js';
+export declare function isBlock(element: Element): element is HTMLCalciteBlockElement;

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

@@ -0,0 +1,50 @@
+/// <reference types="../../index.d.ts" />
+import { default as Sortable } from 'sortablejs';
+import { PropertyValues } from 'lit';
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { InteractiveComponent } from '../../utils/interactive';
+import { SortableComponent } from '../../utils/sortableComponent';
+import { MoveTo } from '../calcite-sort-handle/interfaces';
+import { BlockDragDetail } from './interfaces';
+
+/**
+ * @slot - A slot for adding `calcite-block` elements.
+ */
+export declare class BlockGroup extends LitElement {
+    /** When provided, the method will be called to determine whether the element is sortable in the component. */
+    canPull: (detail: BlockDragDetail) => boolean;
+    /** When provided, the method will be called to determine whether the element can be added from another component. */
+    canPut: (detail: BlockDragDetail) => boolean;
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    disabled: boolean;
+    /** When `true`, `calcite-block`s are sortable via a draggable button. */
+    dragEnabled: boolean;
+    /**
+     * The block-group's group identifier.
+     *
+     * To drag elements from one group into another, both groups must have the same group value.
+     */
+    group?: string;
+    /**
+     * Specifies an accessible name for the component.
+     *
+     * When `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.
+     *
+     * @required
+     */
+    label: string;
+    /** When `true`, a busy indicator is displayed. */
+    loading: boolean;
+    /**
+     * Sets focus on the component's first focusable element.
+     *
+     * @returns {Promise<void>}
+     */
+    setFocus(): Promise<void>;
+    /** Fires when the component's dragging has ended. */
+    readonly calciteBlockGroupDragEnd: TargetedEvent<this, BlockDragDetail>;
+    /** Fires when the component's dragging has started. */
+    readonly calciteBlockGroupDragStart: TargetedEvent<this, BlockDragDetail>;
+    /** Fires when the component's item order changes. */
+    readonly calciteBlockGroupOrderChange: TargetedEvent<this, BlockDragDetail>;
+}

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

@@ -0,0 +1,177 @@
+import { D as f, c as v } from "../../chunks/runtime.js";
+import { debounce as k } from "lodash-es";
+import { html as p } from "lit";
+import { LitElement as E, createEvent as m, safeClassMap as c } from "@arcgis/lumina";
+import { u as I, I as B } from "../../chunks/interactive.js";
+import { c as C } from "../../chunks/observers.js";
+import { d as S, c as O } from "../../chunks/sortableComponent.js";
+import { c as x } from "../../chunks/loadable.js";
+import { h as y, y as G } from "../../chunks/dom.js";
+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.0.0 */
+function u(l) {
+  return l.tagName === "CALCITE-BLOCK";
+}
+const d = {
+  container: "container",
+  groupContainer: "group-container",
+  scrim: "scrim",
+  assistiveText: "assistive-text"
+}, b = "calcite-block-group", g = "calcite-block", $ = D`: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{position:relative}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+function w(l) {
+  const e = l.assignedElements({ flatten: !0 }).filter((s) => s.matches(g));
+  e.forEach((s) => {
+    s.setPosition = e.indexOf(s) + 1, s.setSize = e.length;
+  });
+}
+class A extends E {
+  // #endregion
+  // #region Lifecycle
+  constructor() {
+    super(), this.dragSelector = g, this.handleSelector = "calcite-sort-handle", this.mutationObserver = C("mutation", () => {
+      this.updateBlockItems();
+    }), this.updateBlockItems = k(() => {
+      this.updateGroupItems();
+      const { dragEnabled: e, el: s, moveToItems: o } = this;
+      Array.from(this.el.querySelectorAll(g)).forEach((t) => {
+        t.closest(b) === s && (t.moveToItems = o.filter((n) => n.element !== s && !t.contains(n.element)), t.dragHandle = e);
+      }), this.setUpSorting();
+    }, f.nextTick), this.moveToItems = [], this.disabled = !1, this.dragEnabled = !1, this.loading = !1, this.calciteBlockGroupDragEnd = m({ cancelable: !1 }), this.calciteBlockGroupDragStart = m({ cancelable: !1 }), this.calciteBlockGroupOrderChange = m({ cancelable: !1 }), this.listen("calciteInternalAssistiveTextChange", this.handleCalciteInternalAssistiveTextChange), this.listen("calciteSortHandleReorder", this.handleSortReorder), this.listen("calciteSortHandleMove", this.handleSortMove);
+  }
+  static {
+    this.properties = { assistiveText: 16, moveToItems: 16, canPull: 0, canPut: 0, disabled: 7, dragEnabled: 7, group: 3, label: 1, loading: 7 };
+  }
+  static {
+    this.styles = $;
+  }
+  // #endregion
+  // #region Public Methods
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @returns {Promise<void>}
+   */
+  async setFocus() {
+    await x(this), y(this.el);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.connectObserver(), this.updateBlockItems(), this.setUpSorting(), this.setParentBlockGroup();
+  }
+  willUpdate(e) {
+    (e.has("group") || e.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== !1)) && this.updateBlockItems();
+  }
+  updated() {
+    I(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.disconnectObserver(), S(this);
+  }
+  // #endregion
+  // #region Private Methods
+  updateGroupItems() {
+    const { el: e, group: s } = this, o = G(e), a = s ? Array.from(o.querySelectorAll(`${b}[group="${s}"]`)).filter((t) => !t.disabled && t.dragEnabled) : [];
+    this.moveToItems = a.map((t) => ({
+      element: t,
+      label: t.label ?? t.id,
+      id: e.id || T()
+    }));
+  }
+  handleCalciteInternalAssistiveTextChange(e) {
+    this.assistiveText = e.detail.message, e.stopPropagation();
+  }
+  handleSortReorder(e) {
+    this.parentBlockGroupEl || this.handleReorder(e);
+  }
+  handleSortMove(e) {
+    this.parentBlockGroupEl || this.handleMove(e);
+  }
+  connectObserver() {
+    this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 });
+  }
+  disconnectObserver() {
+    this.mutationObserver?.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled: e } = this;
+    e && O(this);
+  }
+  onGlobalDragStart() {
+    this.disconnectObserver();
+  }
+  onGlobalDragEnd() {
+    this.connectObserver();
+  }
+  onDragEnd(e) {
+    this.calciteBlockGroupDragEnd.emit(e);
+  }
+  onDragStart(e) {
+    e.dragEl.sortHandleOpen = !1, this.calciteBlockGroupDragStart.emit(e);
+  }
+  onDragSort(e) {
+    this.setParentBlockGroup(), this.updateBlockItems(), this.calciteBlockGroupOrderChange.emit(e);
+  }
+  setParentBlockGroup() {
+    this.parentBlockGroupEl = this.el.parentElement?.closest(b);
+  }
+  handleDefaultSlotChange(e) {
+    w(e.target);
+  }
+  handleMove(e) {
+    const { moveTo: s } = e.detail, o = e.target, a = o?.parentElement, t = s.element, r = Array.from(a.children).filter(u).indexOf(o);
+    if (!a)
+      return;
+    o.sortHandleOpen = !1, this.disconnectObserver(), t.prepend(o);
+    const h = Array.from(t.children).filter(u).indexOf(o);
+    this.updateBlockItems(), this.connectObserver(), this.calciteBlockGroupOrderChange.emit({
+      dragEl: o,
+      fromEl: a,
+      toEl: t,
+      newIndex: h,
+      oldIndex: r
+    });
+  }
+  handleReorder(e) {
+    const { reorder: s } = e.detail, o = e.target, a = o?.parentElement;
+    if (!a)
+      return;
+    o.sortHandleOpen = !1;
+    const t = Array.from(a.children).filter(u), n = t.length - 1, r = t.indexOf(o);
+    let i = r;
+    switch (s) {
+      case "top":
+        i = 0;
+        break;
+      case "bottom":
+        i = n;
+        break;
+      case "up":
+        i = r === 0 ? 0 : r - 1;
+        break;
+      case "down":
+        i = r === n ? n : r + 1;
+        break;
+    }
+    this.disconnectObserver();
+    const h = s === "up" || s === "top" ? t[i] : t[i].nextSibling;
+    a.insertBefore(o, h), this.updateBlockItems(), this.connectObserver(), this.calciteBlockGroupOrderChange.emit({
+      dragEl: o,
+      fromEl: a,
+      toEl: a,
+      newIndex: i,
+      oldIndex: r
+    });
+  }
+  // #endregion
+  // #region Rendering
+  render() {
+    const { loading: e, label: s } = this;
+    return B({ disabled: this.disabled, children: p`<div class=${c(d.container)}>${this.dragEnabled ? p`<span aria-live=assertive class=${c(d.assistiveText)}>${this.assistiveText}</span>` : null}${e ? p`<calcite-scrim class=${c(d.scrim)} .loading=${e}></calcite-scrim>` : null}<div .ariaBusy=${e} .ariaLabel=${s || ""} class=${c(d.groupContainer)} role=group><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>` });
+  }
+}
+v("calcite-block-group", A);
+export {
+  A as BlockGroup
+};

package/dist/components/calcite-block-group/index.d.ts

@@ -0,0 +1,2 @@
+import "../calcite-scrim/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,2 @@
+import "../calcite-scrim/index.js";
+export * from "./customElement.js";

package/dist/components/calcite-block-group/interfaces.d.ts

@@ -0,0 +1,14 @@
+import { DragDetail, MoveDetail } from '../../utils/sortableComponent';
+import { Block } from '../calcite-block/customElement.js';
+import { BlockGroup } from './customElement.js';
+export interface BlockDragDetail extends DragDetail {
+    toEl: HTMLCalciteBlockGroupElement;
+    fromEl: HTMLCalciteBlockGroupElement;
+    dragEl: HTMLCalciteBlockElement;
+}
+export interface BlockMoveDetail extends MoveDetail {
+    toEl: HTMLCalciteBlockGroupElement;
+    fromEl: HTMLCalciteBlockGroupElement;
+    dragEl: HTMLCalciteBlockElement;
+    relatedEl: HTMLCalciteBlockElement;
+}

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

@@ -0,0 +1,8 @@
+export declare const CSS: {
+    container: string;
+    groupContainer: string;
+    scrim: string;
+    assistiveText: string;
+};
+export declare const blockGroupSelector = "calcite-block-group";
+export declare const blockSelector = "calcite-block";

package/dist/components/calcite-block-group/utils.d.ts

@@ -0,0 +1 @@
+export declare function updateBlockChildren(slotEl: HTMLSlotElement): void;

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

@@ -1,17 +1,15 @@
 import { c as h } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
+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 { i as m } from "../../chunks/key.js";
-import { c as f, s as k, a as $ } from "../../chunks/loadable.js";
-import { u as w } from "../../chunks/useT9n.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
-*/
+import { c as f } from "../../chunks/loadable.js";
+import { u as k } from "../../chunks/useT9n.js";
+import { css as $ } 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 */
 const l = {
   content: "content",
   toggle: "toggle"
@@ -36,16 +34,16 @@ const l = {
   menuClosed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
-}, y = S`: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 I extends p {
+}, 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 {
   constructor() {
-    super(...arguments), this.messages = w(), this.open = !1, this.toggleDisplay = "button", this.calciteBlockSectionToggle = u({ cancelable: !1 });
+    super(...arguments), this.messages = k(), this.open = !1, 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 };
   }
   static {
-    this.styles = y;
+    this.styles = w;
   }
   // #endregion
   // #region Public Methods
@@ -56,10 +54,8 @@ class I extends p {
   // #endregion
   // #region Lifecycle
   async load() {
-    k(this);
   }
   loaded() {
-    $(this);
   }
   // #endregion
   // #region Private Methods
@@ -77,31 +73,31 @@ class I extends p {
       [t.valid]: e == "valid",
       [t.invalid]: e == "invalid"
     };
-    return o ? a`<calcite-icon class=${c(i)} .icon=${o} scale=s></calcite-icon>` : null;
+    return o ? r`<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", r = o === "both" || o === "end", n = e === this.iconStart;
-    return v(n ? this.iconStart : this.iconEnd, a`<calcite-icon class=${c(n ? t.iconStart : t.iconEnd)} .flipRtl=${n ? i : r} .icon=${n ? this.iconStart : this.iconEnd} scale=s></calcite-icon>`);
+    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>`);
   }
   render() {
-    const { messages: e, open: o, text: i, toggleDisplay: r } = this, n = o ? s.menuOpen : s.menuClosed, d = o ? e.collapse : e.expand, g = r === "switch" ? a`<div class=${c({
+    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({
       [t.toggleContainer]: !0
     })}><div aria-controls=${l.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>` : a`<div class=${c({
+    })} 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({
       [t.toggleContainer]: !0
     })}><button aria-controls=${l.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 a`${g}<section aria-labelledby=${l.toggle} class=${c(t.content)} .hidden=${!o} id=${l.content}><slot></slot></section>`;
+    return r`${g}<section aria-labelledby=${l.toggle} class=${c(t.content)} .hidden=${!o} id=${l.content}><slot></slot></section>`;
   }
 }
-h("calcite-block-section", I);
+h("calcite-block-section", S);
 export {
-  I as BlockSection
+  S as BlockSection
 };