@esri/calcite-components 2.11.0 → 2.12.0-next.0

package/dist/collection/utils/mode.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { autoMode, darkMode } from "./resources";
 /**

package/dist/collection/utils/number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { numberKeys } from "./key";
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);

package/dist/collection/utils/observers.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { isBrowser } from "./browser";
 /**

package/dist/collection/utils/openCloseComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { readTask } from "@stencil/core";
 import { whenTransitionDone } from "./dom";

package/dist/collection/utils/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 export const autoMode = "calcite-mode-auto";
 export const darkMode = "calcite-mode-dark";

package/dist/collection/utils/responsive.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { calciteContainerSizeWidthLg, calciteContainerSizeWidthMd, calciteContainerSizeWidthSm, calciteContainerSizeWidthXs, calciteContainerSizeWidthXxs, } from "@esri/calcite-design-tokens/dist/es6/global";
 /**

package/dist/collection/utils/sortableComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import Sortable from "sortablejs";
 const sortableComponentSet = new Set();

package/dist/collection/utils/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "./locale";

package/dist/collection/utils/time.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { getDateTimeFormat, getSupportedNumberingSystem, numberStringFormatter } from "./locale";
 import { decimalPlaces } from "./math";

package/dist/components/ExpandToggle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { forceUpdate, h } from '@stencil/core/internal/client';
 import { a as getElementDir } from './dom.js';

package/dist/components/FloatingArrow.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { h } from '@stencil/core/internal/client';
 

package/dist/components/Heading.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { h } from '@stencil/core/internal/client';
 

package/dist/components/Validation.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { h } from '@stencil/core/internal/client';
 

package/dist/components/action-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/action-menu.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { g as getRoundRobinIndex } from './array.js';

package/dist/components/action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/ar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/array.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 function getRoundRobinIndex(index, total) {
     return (index + total) % total;

package/dist/components/avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { p as getModeName } from './dom.js';

package/dist/components/bg.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/browser.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { Build } from '@stencil/core/internal/client';
 

package/dist/components/bs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form.js';

package/dist/components/ca.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-accordion.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { A as ActionGroup, d as defineCustomElement$1 } from './action-group.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { A as ActionMenu, d as defineCustomElement$1 } from './action-menu.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { A as Action, d as defineCustomElement$1 } from './action.js';
 

package/dist/components/calcite-alert.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, o as setRequestedIcon } from './dom.js';

package/dist/components/calcite-avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { A as Avatar, d as defineCustomElement$1 } from './avatar.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as focusFirstTabbable, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-block.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -35,6 +35,7 @@ const CSS = {
     description: "description",
     header: "header",
     headerContainer: "header-container",
+    headerHasText: "header--has-text",
     heading: "heading",
     icon: "icon",
     iconStart: "icon--start",
@@ -62,7 +63,7 @@ const ICONS = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockCss = ":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:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.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;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start}.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-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.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(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color: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}100%{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-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([heading]) .header,:host([description]) .header{padding:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}";
+const blockCss = ":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:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.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;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.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-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.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(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color: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}100%{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-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteBlockStyle0 = blockCss;
 
 const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
@@ -222,16 +223,16 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         return (h("calcite-icon", { class: iconClass, flipRtl: flipRtl, icon: iconValue, key: iconValue, scale: "s" }));
     }
     render() {
-        const { collapsible, el, loading, open, heading, messages } = this;
+        const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (h("header", { key: '367a98ebb184016879f5d2037c11079a35c8ba49', class: CSS.header, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (h("header", { key: 'f4585d3c5e71d91a3de8b60a8085e79ad0f649c2', class: { [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS.control);
         const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
         const collapseIcon = open ? ICONS.opened : ICONS.closed;
-        const headerNode = (h("div", { key: '9553d267ed83ea9322265aa9178b143b19639c16', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (h(Host, { key: 'd6347f1b34c4000be47e99f3360e2ed04220b2ad' }, h(InteractiveContainer, { key: '8b9056e5a930eb47014914c5ee95733c55f34437', disabled: this.disabled }, h("article", { key: 'e708dd5829281fd034950ae8d495d353d90bce84', "aria-busy": toAriaBoolean(loading), class: {
+        const headerNode = (h("div", { key: '6ca859e09a3b11219a3b412998c83e91c845753f', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (h(Host, { key: 'b42f72a17e0896ae7406d4f09f346cfb75e4c9ef' }, h(InteractiveContainer, { key: '181fef154faaa7f8d1dca2e08745c76141678053', disabled: this.disabled }, h("article", { key: 'd93e5b8f13529441ba99bcfcc51d5b31eab981ab', "aria-busy": toAriaBoolean(loading), class: {
                 [CSS.container]: true,
-            } }, headerNode, h("section", { key: '2aca07379b250e86106692a8d33bf7478f7abb0b', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content, ref: this.setTransitionEl }, this.renderScrim())))));
+            } }, headerNode, h("section", { key: 'cd7759e5b8f695cd238b523075984b82de562005', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content, ref: this.setTransitionEl }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

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

@@ -1 +1 @@
-{"file":"calcite-block.js","mappings":"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","names":[],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  contentStart: \"content-start\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  iconEndContainer: \"icon-end-container\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  contentStart: \"content-start\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n  icon: \"icon\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start;\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu actions-end\";\n  grid-column: header-start / actions-end;\n  grid-row: 1 / 2;\n}\n\n.content-start,\n.icon,\n.icon--start,\n.icon--end {\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.icon {\n  & calcite-loader {\n    margin-inline-end: var(--calcite-spacing-xxxs);\n  }\n}\n\n.icon--start,\n.icon--end {\n  @apply text-color-3;\n}\n\n.actions-end {\n  grid-area: actions-end;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n\n  text-align: initial;\n  background-color: transparent;\n\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  @apply flex;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.icon-end-container {\n  @apply flex items-center;\n\n  margin-inline-start: auto;\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.content-start {\n  @apply text-color-3 flex items-center;\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n.actions-end {\n  @apply flex items-stretch;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n:host([heading]),\n:host([description]) {\n  .header {\n    padding: var(--calcite-spacing-md);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  getSlotted,\n  toAriaBoolean,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status, Position } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlipContext } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n * @slot content-start - A slot for adding non-actionable elements before content of the component.\n * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() defaultMessages: BlockMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasContentStart = false;\n\n  @State() hasEndActions = false;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  private renderLoaderStatusIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderContentStart(): VNode {\n    const { hasContentStart } = this;\n    return (\n      <div class={CSS.contentStart} hidden={!hasContentStart}>\n        <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n      </div>\n    );\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderIcon(position: Extract<\"start\" | \"end\", Position>): VNode {\n    const { iconFlipRtl } = this;\n\n    const flipRtl =\n      iconFlipRtl === \"both\" || position === \"start\"\n        ? iconFlipRtl === \"start\"\n        : iconFlipRtl === \"end\";\n\n    const iconValue = position === \"start\" ? this.iconStart : this.iconEnd;\n    const iconClass = position === \"start\" ? CSS.iconStart : CSS.iconEnd;\n\n    if (!iconValue) {\n      return undefined;\n    }\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={iconClass}\n        flipRtl={flipRtl}\n        icon={iconValue}\n        key={iconValue}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header class={CSS.header} id={IDS.header}>\n        {this.renderIcon(\"start\")}\n        {this.renderContentStart()}\n        {this.renderLoaderStatusIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <div class={CSS.iconEndContainer}>\n              {this.renderIcon(\"end\")}\n              <calcite-icon class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n            </div>\n          </button>\n        ) : this.iconEnd ? (\n          <div>\n            {headerContent}\n            <div class={CSS.iconEndContainer}>{this.renderIcon(\"end\")}</div>\n          </div>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div aria-labelledby={IDS.header} class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n        {this.renderActionsEnd()}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n              ref={this.setTransitionEl}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-block.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,eAAe;IAC7B,gBAAgB,EAAE,mBAAmB;IACrC,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,QAAQ;IAChB,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,kBAAkB;IACjC,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,WAAW;IACpB,gBAAgB,EAAE,oBAAoB;IACtC,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,aAAa;IACzB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,qBAAqB;IACxC,IAAI,EAAE,MAAM;CACb,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE,cAAc;IACtB,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,2BAA2B;CAC5B;;AC5CV,MAAM,QAAQ,GAAG,qsJAAqsJ,CAAC;AACvtJ,2BAAe,QAAQ;;MCmEV,KAAK;;;;;;;;;;QA8JhB,uBAAkB,GAAG,SAAS,CAAC;;;;;;QAwE/B,kBAAa,GAAG;YACd,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAChC,CAAC;QAEM,oBAAe,GAAG,CAAC,EAAe;YACxC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;SACxB,CAAC;QAEM,gCAA2B,GAAG,CAAC,KAAY;YACjD,IAAI,CAAC,aAAa,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC1D,CAAC;QAEM,iCAA4B,GAAG,CAAC,KAAY;YAClD,IAAI,CAAC,eAAe,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC5D,CAAC;2BAnOqC,KAAK;wBAKR,KAAK;0BAKH,KAAK;;;;;;uBAwBR,KAAK;oBAKO,KAAK;;;;;kCA8Cc,UAAU;;;+BAmDjD,KAAK;6BAEP,KAAK;;IAhG9B,WAAW;QACT,0BAA0B,CAAC,IAAI,CAAC,CAAC;KAClC;IA6BD,gBAAgB;;KAEf;;;;;;;;;;IAuBD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7B;IAED,YAAY;QACV,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;KACpC;IAED,MAAM;QACJ,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;KAC9B;IAED,aAAa;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;IAED,OAAO;QACL,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;IAeD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IAgBD,iBAAiB;QACf,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACtC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,kCAAkC,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM,iBAAiB;QACrB,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAE7B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,0BAA0B,CAAC,IAAI,CAAC,CAAC;SAClC;KACF;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAwDD,WAAW;QACT,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,WAAW,GAAG,eAAQ,CAAC;QAE7B,OAAO,CAAC,OAAO,GAAG,qBAAe,OAAO,EAAE,OAAO,GAAI,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC;KAC5E;IAEO,sBAAsB;QAC5B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAE3C,MAAM,cAAc,GAAG,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAEzD,OAAO,OAAO,IACZ,WAAK,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAC,QAAQ,IAChC,sBAAgB,MAAM,QAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAI,CAC9C,IACJ,MAAM,IACR,WAAK,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAC,aAAa,IACrC,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;gBACtB,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,IAAI,OAAO;gBAC9B,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,IAAI,SAAS;aACnC,EACD,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAC,GAAG,GACT,CACE,IACJ,cAAc,IAChB,WAAK,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAC,WAAW,IACnC,YAAM,GAAG,EAAC,WAAW,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,CACtC,IACJ,IAAI,CAAC;KACV;IAEO,gBAAgB;QACtB,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,UAAU,IACxB,YAAM,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAAI,CAC5E,EACN;KACH;IAEO,kBAAkB;QACxB,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACjC,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,eAAe,IACpD,YAAM,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,4BAA4B,GAAI,CAC/E,EACN;KACH;IAED,WAAW;QACT,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACpD,OAAO,OAAO,IAAI,WAAW,IAC3B,WAAK,KAAK,EAAE,GAAG,CAAC,KAAK,IACnB,EAAC,OAAO,IAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,IAC7C,OAAO,CACA,EACT,WAAW,GAAG,WAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAO,GAAG,IAAI,CAClE,IACJ,IAAI,CAAC;KACV;IAEO,UAAU,CAAC,QAA4C;QAC7D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAE7B,MAAM,OAAO,GACX,WAAW,KAAK,MAAM,IAAI,QAAQ,KAAK,OAAO;cAC1C,WAAW,KAAK,OAAO;cACvB,WAAW,KAAK,KAAK,CAAC;QAE5B,MAAM,SAAS,GAAG,QAAQ,KAAK,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACvE,MAAM,SAAS,GAAG,QAAQ,KAAK,OAAO,GAAG,GAAG,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;QAErE,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,SAAS,CAAC;SAClB;;QAGD,QACE,oBACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,SAAS,EACd,KAAK,EAAC,GAAG,GACT,EACF;KACH;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAEhF,MAAM,WAAW,GAAG,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;QAE/D,MAAM,aAAa,IACjB,+DACE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,aAAa,GAAG,CAAC,EAAE,OAAO,IAAI,WAAW,CAAC,EAAE,EAC9E,EAAE,EAAE,GAAG,CAAC,MAAM,IAEb,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EACxB,IAAI,CAAC,kBAAkB,EAAE,EACzB,IAAI,CAAC,sBAAsB,EAAE,EAC7B,IAAI,CAAC,WAAW,EAAE,CACZ,CACV,CAAC;QAEF,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACjE,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAExD,MAAM,UAAU,IACd,4DAAK,KAAK,EAAE,GAAG,CAAC,eAAe,IAC5B,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAE,OAAO,GAAI,GAAG,IAAI,EAC3D,WAAW,IACV,+BACiB,GAAG,CAAC,OAAO,sBACR,GAAG,CAAC,MAAM,mBACb,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,EACvD,KAAK,EAAE,GAAG,CAAC,MAAM,EACjB,EAAE,EAAE,GAAG,CAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,WAAW,IAEjB,aAAa,EACd,WAAK,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAC7B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvB,oBAAc,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAC,GAAG,GAAG,CACjE,CACC,IACP,IAAI,CAAC,OAAO,IACd,eACG,aAAa,EACd,WAAK,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAO,CAC5D,KAEN,aAAa,CACd,EACA,UAAU,IACT,8BAAsB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAC3D,YAAM,IAAI,EAAE,KAAK,CAAC,OAAO,GAAI,CACzB,IACJ,IAAI,EACP,cAAc,IACb,2BACE,KAAK,EAAE,QAAQ,CAAC,OAAO,EACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAE3C,YAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,GAAI,CACnB,IACpB,IAAI,EACP,IAAI,CAAC,gBAAgB,EAAE,CACpB,CACP,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3C,6EACa,aAAa,CAAC,OAAO,CAAC,EACjC,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI;aACtB,IAEA,UAAU,EACX,mFACmB,GAAG,CAAC,MAAM,EAC3B,KAAK,EAAE,GAAG,CAAC,OAAO,EAClB,MAAM,EAAE,CAAC,IAAI,EACb,EAAE,EAAE,GAAG,CAAC,OAAO,EACf,GAAG,EAAE,IAAI,CAAC,eAAe,IAExB,IAAI,CAAC,WAAW,EAAE,CACX,CACF,CACW,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  contentStart: \"content-start\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  headerHasText: \"header--has-text\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  iconEndContainer: \"icon-end-container\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  contentStart: \"content-start\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n  icon: \"icon\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0 duration-150;\n  flex-basis: auto;\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start;\n}\n\n.header--has-text {\n  padding: var(--calcite-spacing-md);\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu actions-end\";\n  grid-column: header-start / actions-end;\n  grid-row: 1 / 2;\n}\n\n.content-start,\n.icon,\n.icon--start,\n.icon--end {\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.icon {\n  & calcite-loader {\n    margin-inline-end: var(--calcite-spacing-xxxs);\n  }\n}\n\n.icon--start,\n.icon--end {\n  @apply text-color-3;\n}\n\n.actions-end {\n  grid-area: actions-end;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n\n  text-align: initial;\n  background-color: transparent;\n\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  @apply flex;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.icon-end-container {\n  @apply flex items-center;\n\n  margin-inline-start: auto;\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.content-start {\n  @apply text-color-3 flex items-center;\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n.actions-end {\n  @apply flex items-stretch;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  getSlotted,\n  toAriaBoolean,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status, Position } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlipContext } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n * @slot content-start - A slot for adding non-actionable elements before content of the component.\n * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() defaultMessages: BlockMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasContentStart = false;\n\n  @State() hasEndActions = false;\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private setTransitionEl = (el: HTMLElement): void => {\n    this.transitionEl = el;\n  };\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  private renderLoaderStatusIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderContentStart(): VNode {\n    const { hasContentStart } = this;\n    return (\n      <div class={CSS.contentStart} hidden={!hasContentStart}>\n        <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n      </div>\n    );\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderIcon(position: Extract<\"start\" | \"end\", Position>): VNode {\n    const { iconFlipRtl } = this;\n\n    const flipRtl =\n      iconFlipRtl === \"both\" || position === \"start\"\n        ? iconFlipRtl === \"start\"\n        : iconFlipRtl === \"end\";\n\n    const iconValue = position === \"start\" ? this.iconStart : this.iconEnd;\n    const iconClass = position === \"start\" ? CSS.iconStart : CSS.iconEnd;\n\n    if (!iconValue) {\n      return undefined;\n    }\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={iconClass}\n        flipRtl={flipRtl}\n        icon={iconValue}\n        key={iconValue}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages, description } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header\n        class={{ [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }}\n        id={IDS.header}\n      >\n        {this.renderIcon(\"start\")}\n        {this.renderContentStart()}\n        {this.renderLoaderStatusIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <div class={CSS.iconEndContainer}>\n              {this.renderIcon(\"end\")}\n              <calcite-icon class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n            </div>\n          </button>\n        ) : this.iconEnd ? (\n          <div>\n            {headerContent}\n            <div class={CSS.iconEndContainer}>{this.renderIcon(\"end\")}</div>\n          </div>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div aria-labelledby={IDS.header} class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n        {this.renderActionsEnd()}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n              ref={this.setTransitionEl}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { B as Button, d as defineCustomElement$1 } from './button.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as focusElementInGroup, e as focusElement, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-card.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as slotChangeHasAssignedElement, g as getSlotted, t as toAriaBoolean } from './dom.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';

package/dist/components/calcite-carousel.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as slotChangeGetAssignedElements, v as focusElementInGroup, t as toAriaBoolean, a as getElementDir, x as whenAnimationDone } from './dom.js';