@esri/calcite-app-components - npm Package Compare versions

Comparing version 6.3.0-beta.0 to 6.3.0-beta.1

dist/calcite-app/calcite-action-bar.entry.js

@@ -1,94 +0,94 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as getSlotted } from './dom-462ef99a.js';
-import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-102edbbd.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
+import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-6b0018b7.js';
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom"
 };
 const SLOTS = {
-    bottomActions: "bottom-actions"
+  bottomActions: "bottom-actions"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionBarCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-item-align:stretch;align-self:stretch;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";
+const calciteActionBarCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-self:stretch;display:inline-flex;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}";
 
 const CalciteActionBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        this.observer = new MutationObserver(() => {
-            const { el, expanded } = this;
-            toggleChildActionText({ parent: el, expanded });
-        });
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionBarToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-        this.observer.observe(el, { childList: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
+    this.observer = new MutationObserver(() => {
+      const { el, expanded } = this;
+      toggleChildActionText({ parent: el, expanded });
+    });
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        return (h(Host, null, h("slot", null), this.renderBottomActionGroup()));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionBarToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+    this.observer.observe(el, { childList: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.renderBottomActionGroup()));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -95,0 +95,0 @@ CalciteActionBar.style = calciteActionBarCss;

dist/calcite-app/calcite-action-group.entry.js

@@ -1,17 +0,17 @@
-import { r as registerInstance, h, f as Host } from './index-2f390ff7.js';
+import { r as registerInstance, h, f as Host } from './index-ebf37ff5.js';
 
-const calciteActionGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:-ms-flexbox;display:flex;width:100%}";
+const calciteActionGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:flex;width:100%}";
 
 const CalciteActionGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null, h("slot", null)));
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
 };
@@ -18,0 +18,0 @@ CalciteActionGroup.style = calciteActionGroupCss;

dist/calcite-app/calcite-action-pad.entry.js

@@ -1,94 +0,94 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-102edbbd.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-6b0018b7.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom",
-    container: "container"
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionPadCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;-ms-flex-direction:row;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
+const calciteActionPadCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:inline-flex;flex-direction:column;box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}:host([layout=horizontal]) .container{flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
 
 const CalciteActionPad = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates the horizontal or vertical layout of the component.
-         */
-        this.layout = "vertical";
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionPadToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-    }
+    /**
+     * Indicates the horizontal or vertical layout of the component.
+     */
+    this.layout = "vertical";
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
     // --------------------------------------------------------------------------
     //
-    //  Component Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        const containerClasses = {
-            [CSS.container]: true,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, h("div", { class: containerClasses }, h("slot", null), this.renderBottomActionGroup())));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionPadToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+  }
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    const containerClasses = {
+      [CSS.container]: true,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null, h("div", { class: containerClasses }, h("slot", null), this.renderBottomActionGroup())));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -95,0 +95,0 @@ CalciteActionPad.style = calciteActionPadCss;

dist/calcite-app/calcite-action.entry.js

@@ -1,117 +0,117 @@
-import { r as registerInstance, i as forceUpdate, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, i as forceUpdate, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    button: "button",
-    buttonTextVisible: "button--text-visible",
-    buttonCompact: "button--compact",
-    iconContainer: "icon-container",
-    slotContainer: "slot-container",
-    slotContainerHidden: "slot-container--hidden",
-    textContainer: "text-container",
-    textContainerVisible: "text-container--visible"
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
 };
 
-const calciteActionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:-ms-flexbox;display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;-webkit-transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;-webkit-transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{-ms-flex:1 1 auto;flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);-webkit-transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);-webkit-box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset;box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);-webkit-box-shadow:none;box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
+const calciteActionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;justify-content:flex-start;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;justify-content:center;align-items:center;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
 
 const CalciteAction = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /** Specify the appearance style of the action, defaults to solid. */
-        this.appearance = "solid";
-        /**
-         * Indicates whether the action is highlighted.
-         */
-        this.active = false;
-        /**
-         * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
-         */
-        this.compact = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Indicates unread changes.
-         */
-        this.indicator = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the action.
-         */
-        this.scale = "m";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-        this.observer = new MutationObserver(() => forceUpdate(this));
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    async setFocus() {
-        this.buttonEl.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderTextContainer() {
-        const { text, textEnabled } = this;
-        const textContainerClasses = {
-            [CSS.textContainer]: true,
-            [CSS.textContainerVisible]: textEnabled
-        };
-        return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
-    }
-    renderIconContainer() {
-        var _a;
-        const { loading, icon, scale, el } = this;
-        const iconScale = scale === "l" ? "m" : "s";
-        const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
-        const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
-        const iconNode = calciteLoaderNode || calciteIconNode;
-        const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-        const slotContainerNode = (h("div", { class: {
-                [CSS.slotContainer]: true,
-                [CSS.slotContainerHidden]: loading
-            } }, h("slot", null)));
-        return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
-    }
-    render() {
-        const { compact, disabled, loading, el, textEnabled, label, text } = this;
-        const ariaLabel = label || text;
-        const rtl = getElementDir(el) === "rtl";
-        const buttonClasses = {
-            [CSS.button]: true,
-            [CSS.buttonTextVisible]: textEnabled,
-            [CSS.buttonCompact]: compact,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
-    }
-    get el() { return getElement(this); }
+    /** Specify the appearance style of the action, defaults to solid. */
+    this.appearance = "solid";
+    /**
+     * Indicates whether the action is highlighted.
+     */
+    this.active = false;
+    /**
+     * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+     */
+    this.compact = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the action.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.observer = new MutationObserver(() => forceUpdate(this));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.buttonEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
+    const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } }, h("slot", null)));
+    return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const rtl = getElementDir(el) === "rtl";
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null, h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
+  }
+  get el() { return getElement(this); }
 };
@@ -118,0 +118,0 @@ CalciteAction.style = calciteActionCss;

dist/calcite-app/calcite-app.esm.js

@@ -1,7 +0,122 @@
-import { b as bootstrapLazy } from './index-2f390ff7.js';
-import { p as patchBrowser, g as globalScripts } from './app-globals-9ad52aa8.js';
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-ebf37ff5.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
 
+/*
+ Stencil Client Patch Browser v2.0.1 | MIT Licensed | https://stenciljs.com
+ */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (BUILD.isDev && !BUILD.isTesting) {
+        consoleDevInfo('Running in development mode.');
+    }
+    if (BUILD.cssVarShim) {
+        // shim css vars
+        plt.$cssShim$ = win.__cssshim;
+    }
+    if (BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(H.prototype);
+    }
+    if (BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
+        ? Array.from(doc.querySelectorAll('script')).find(s => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute('data-stencil-namespace') === NAMESPACE)
+        : null;
+    const importMeta = "";
+    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!BUILD.safari10 && importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    else if (BUILD.dynamicImportShim || BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
+        if (BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (BUILD.dynamicImportShim && !win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return __sc_import_calcite_app(/* webpackChunkName: "polyfills-dom" */ './dom-ebea661b.js').then(() => opts);
+        }
+    }
+    return promiseResolve(opts);
+};
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
+                mod = new Promise(resolve => {
+                    script.onload = () => {
+                        resolve(win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["calcite-action-bar",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item",[[1,"calcite-value-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group",[[1,"calcite-pick-list-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group",[[1,"calcite-tip-group",{"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item",[[1,"calcite-pick-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group",[[1,"calcite-action-group"]]],["calcite-filter",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
+  return bootstrapLazy([["calcite-action-bar",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item",[[1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group",[[1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group",[[1,"calcite-tip-group",{"groupTitle":[1,"group-title"],"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item",[[1,"calcite-pick-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group",[[1,"calcite-action-group"]]],["calcite-filter",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
 });

dist/calcite-app/calcite-block-section.entry.js

@@ -1,79 +0,79 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
-import { g as guid } from './guid-ac11c5c8.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
+import { g as guid } from './guid-b6d0e663.js';
 
 const CSS = {
-    content: "content",
-    toggle: "toggle",
-    toggleSwitch: "toggle--switch"
+  content: "content",
+  toggle: "toggle",
+  toggleSwitch: "toggle--switch"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const ICONS = {
-    menuOpen: "chevron-down",
-    menuClosedLeft: "chevron-left",
-    menuClosedRight: "chevron-right"
+  menuOpen: "chevron-down",
+  menuClosedLeft: "chevron-left",
+  menuClosedRight: "chevron-right"
 };
 
-const calciteBlockSectionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
+const calciteBlockSectionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{align-items:center;cursor:pointer;display:flex;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
 
 const CalciteBlockSection = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
-        /**
-         * When true, the block's section content will be displayed.
-         */
-        this.open = false;
-        /**
-         * This property determines the look of the section toggle.
-         * If the value is "switch", a toggle-switch will be displayed.
-         * If the value is "button", a clickable header is displayed.
-         *
-         * @todo revisit doc
-         */
-        this.toggleDisplay = "button";
-        this.guid = `calcite-block-section-${guid()}`;
-        this.toggleSection = () => {
-            this.open = !this.open;
-            this.calciteBlockSectionToggle.emit();
-        };
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
+    /**
+     * When true, the block's section content will be displayed.
+     */
+    this.open = false;
+    /**
+     * This property determines the look of the section toggle.
+     * If the value is "switch", a toggle-switch will be displayed.
+     * If the value is "button", a clickable header is displayed.
+     *
+     * @todo revisit doc
+     */
+    this.toggleDisplay = "button";
+    this.guid = `calcite-block-section-${guid()}`;
+    this.toggleSection = () => {
+      this.open = !this.open;
+      this.calciteBlockSectionToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleHeaderLabelKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.click();
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleHeaderLabelKeyDown(event) {
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-            this.click();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-        const dir = getElementDir(el);
-        const arrowIcon = open
-            ? ICONS.menuOpen
-            : dir === "rtl"
-                ? ICONS.menuClosedLeft
-                : ICONS.menuClosedRight;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const labelId = `${id}__label`;
-        const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
-                [CSS.toggle]: true,
-                [CSS.toggleSwitch]: true
-            }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
-        return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, h("div", { class: CSS.content, hidden: !open }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
+    const dir = getElementDir(el);
+    const arrowIcon = open
+      ? ICONS.menuOpen
+      : dir === "rtl"
+        ? ICONS.menuClosedLeft
+        : ICONS.menuClosedRight;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const labelId = `${id}__label`;
+    const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
+        [CSS.toggle]: true,
+        [CSS.toggleSwitch]: true
+      }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
+    return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, h("div", { class: CSS.content, hidden: !open }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -80,0 +80,0 @@ CalciteBlockSection.style = calciteBlockSectionCss;

dist/calcite-app/calcite-block.entry.js

@@ -1,89 +0,89 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { b as getElementTheme, g as getSlotted, a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { b as getElementTheme, g as getSlotted, a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    content: "content",
-    headerContainer: "header-container",
-    icon: "icon",
-    toggle: "toggle",
-    toggleIcon: "toggle-icon",
-    title: "title",
-    heading: "heading",
-    header: "header",
-    button: "button",
-    summary: "summary",
-    controlContainer: "control-container"
+  content: "content",
+  headerContainer: "header-container",
+  icon: "icon",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  title: "title",
+  heading: "heading",
+  header: "header",
+  button: "button",
+  summary: "summary",
+  controlContainer: "control-container"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const SLOTS = {
-    icon: "icon",
-    control: "control"
+  icon: "icon",
+  control: "control"
 };
 
-const calciteBlockCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);-webkit-transition:margin var(--calcite-app-animation-time) ease-in-out;transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;-ms-flex-align:stretch;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;-ms-flex:0 0 var(--calcite-app-icon-size);flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:-ms-flexbox;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
+const calciteBlockCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex:0 0 auto;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:flex;align-items:center;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
 
 const CalciteBlock = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, this block will be collapsible.
-         */
-        this.collapsible = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, displays a drag handle in the header.
-         */
-        this.dragHandle = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * When true, the block's content will be displayed.
-         */
-        this.open = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.onHeaderClick = () => {
-            this.open = !this.open;
-            this.calciteBlockToggle.emit();
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderScrim() {
-        const { disabled, loading, el } = this;
-        const defaultSlot = h("slot", null);
-        return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
-    }
-    render() {
-        const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const hasIcon = getSlotted(el, SLOTS.icon);
-        const headerContent = (h("header", { class: CSS.header }, hasIcon ? (h("div", { class: CSS.icon }, h("slot", { name: SLOTS.icon }))) : null, h("div", { class: CSS.title }, h("h3", { class: CSS.heading }, heading), summary ? h("div", { class: CSS.summary }, summary) : null)));
-        const hasControl = getSlotted(el, SLOTS.control);
-        const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null));
-        const rtl = getElementDir(el) === "rtl";
-        return (h(Host, { tabIndex: disabled ? -1 : null }, h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null }, headerNode, h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
-    }
-    get el() { return getElement(this); }
+    /**
+     * When true, this block will be collapsible.
+     */
+    this.collapsible = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, displays a drag handle in the header.
+     */
+    this.dragHandle = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * When true, the block's content will be displayed.
+     */
+    this.open = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.onHeaderClick = () => {
+      this.open = !this.open;
+      this.calciteBlockToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderScrim() {
+    const { disabled, loading, el } = this;
+    const defaultSlot = h("slot", null);
+    return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
+  }
+  render() {
+    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const hasIcon = getSlotted(el, SLOTS.icon);
+    const headerContent = (h("header", { class: CSS.header }, hasIcon ? (h("div", { class: CSS.icon }, h("slot", { name: SLOTS.icon }))) : null, h("div", { class: CSS.title }, h("h3", { class: CSS.heading }, heading), summary ? h("div", { class: CSS.summary }, summary) : null)));
+    const hasControl = getSlotted(el, SLOTS.control);
+    const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null));
+    const rtl = getElementDir(el) === "rtl";
+    return (h(Host, { tabIndex: disabled ? -1 : null }, h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null }, headerNode, h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
+  }
+  get el() { return getElement(this); }
 };
@@ -90,0 +90,0 @@ CalciteBlock.style = calciteBlockCss;

dist/calcite-app/calcite-fab.entry.js

@@ -1,73 +0,73 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { f as focusElement, a as getElementDir } from './dom-462ef99a.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { f as focusElement, a as getElementDir } from './dom-0962c5fe.js';
 
 const CSS = {
-    button: "button"
+  button: "button"
 };
 const ICONS = {
-    plus: "plus"
+  plus: "plus"
 };
 
-const calciteFabCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{-webkit-box-shadow:var(--calcite-app-shadow-1);box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFabCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFab = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Used to set the button's appearance. Default is outline.
-         */
-        this.appearance = "outline";
-        /**
-         * Used to set the button's color. Default is light.
-         */
-        this.color = "light";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
-         */
-        this.icon = ICONS.plus;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the fab.
-         */
-        this.scale = "s";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        focusElement(this.buttonEl);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
-        const titleText = !textEnabled && text;
-        const title = label || titleText;
-        const dir = getElementDir(el);
-        return (h(Host, null, h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
-                this.buttonEl = buttonEl;
-            } }, this.textEnabled ? this.text : null)));
-    }
-    get el() { return getElement(this); }
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "light";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "s";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
+    const titleText = !textEnabled && text;
+    const title = label || titleText;
+    const dir = getElementDir(el);
+    return (h(Host, null, h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
+        this.buttonEl = buttonEl;
+      } }, this.textEnabled ? this.text : null)));
+  }
+  get el() { return getElement(this); }
 };
@@ -74,0 +74,0 @@ CalciteFab.style = calciteFabCss;

dist/calcite-app/calcite-filter.entry.js

@@ -1,85 +0,85 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 import { d as debounce, f as forIn } from './lodash-fad0d111.js';
 
 const CSS = {
-    searchIcon: "search-icon",
-    clearButton: "clear-button"
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
 };
 const TEXT = {
-    filterLabel: "filter",
-    clear: "Clear filter"
+  filterLabel: "filter",
+  clear: "Clear filter"
 };
 const ICONS = {
-    search: "search",
-    close: "x"
+  search: "search",
+  close: "x"
 };
 
-const calciteFilterCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
+const calciteFilterCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{align-items:center;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:flex;left:0;position:absolute;transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
 
 const filterDebounceInMs = 250;
 const CalciteFilter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
-        this.empty = true;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.filter = debounce((value) => {
-            const regex = new RegExp(value, "ig");
-            if (this.data.length === 0) {
-                console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-                this.calciteFilterChange.emit([]);
-                return;
-            }
-            const find = (input, RE) => {
-                let found = false;
-                forIn(input, (val) => {
-                    if (typeof val === "function") {
-                        return;
-                    }
-                    if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
-                        if (find(val, RE)) {
-                            found = true;
-                        }
-                    }
-                    else if (RE.test(val)) {
-                        found = true;
-                    }
-                });
-                return found;
-            };
-            const result = this.data.filter((item) => {
-                return find(item, regex);
-            });
-            this.calciteFilterChange.emit(result);
-        }, filterDebounceInMs);
-        this.inputHandler = (event) => {
-            const target = event.target;
-            this.empty = target.value === "";
-            this.filter(target.value);
-        };
-        this.clear = () => {
-            this.textInput.value = "";
-            this.empty = true;
-            this.calciteFilterChange.emit(this.data);
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
+    this.empty = true;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        return (h(Host, null, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
-                this.textInput = el;
-            } }), h("div", { class: CSS.searchIcon }, h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, h("calcite-icon", { icon: ICONS.close }))) : null));
-    }
-    get el() { return getElement(this); }
+    this.filter = debounce((value) => {
+      const regex = new RegExp(value, "ig");
+      if (this.data.length === 0) {
+        console.warn(`No data was passed to calcite-filter.
+      The data property expects an array of objects`);
+        this.calciteFilterChange.emit([]);
+        return;
+      }
+      const find = (input, RE) => {
+        let found = false;
+        forIn(input, (val) => {
+          if (typeof val === "function") {
+            return;
+          }
+          if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
+            if (find(val, RE)) {
+              found = true;
+            }
+          }
+          else if (RE.test(val)) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      const result = this.data.filter((item) => {
+        return find(item, regex);
+      });
+      this.calciteFilterChange.emit(result);
+    }, filterDebounceInMs);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.empty = target.value === "";
+      this.filter(target.value);
+    };
+    this.clear = () => {
+      this.textInput.value = "";
+      this.empty = true;
+      this.calciteFilterChange.emit(this.data);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    return (h(Host, null, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
+        this.textInput = el;
+      } }), h("div", { class: CSS.searchIcon }, h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, h("calcite-icon", { icon: ICONS.close }))) : null));
+  }
+  get el() { return getElement(this); }
 };
@@ -86,0 +86,0 @@ CalciteFilter.style = calciteFilterCss;

dist/calcite-app/calcite-flow-item.entry.js

@@ -1,208 +0,208 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { f as focusElement, g as getSlotted, b as getElementTheme, a as getElementDir } from './dom-462ef99a.js';
-import { S as SLOTS$1 } from './resources-cccf0a03.js';
-import { g as getRoundRobinIndex } from './array-dbbc14b3.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { f as focusElement, g as getSlotted, b as getElementTheme, a as getElementDir } from './dom-0962c5fe.js';
+import { S as SLOTS$1 } from './resources-2a60d745.js';
+import { g as getRoundRobinIndex } from './array-9b53302c.js';
 
 const CSS = {
-    header: "header-content",
-    heading: "heading",
-    summary: "summary",
-    backButton: "back-button",
-    footerActions: "footer-actions",
-    headerActions: "header-actions",
-    leadingActions: "leading-actions",
-    singleActionContainer: "single-action-container",
-    menuContainer: "menu-container",
-    menuButton: "menu-button",
-    menu: "menu",
-    menuOpen: "menu--open",
-    fabContainer: "fab-container"
+  header: "header-content",
+  heading: "heading",
+  summary: "summary",
+  backButton: "back-button",
+  footerActions: "footer-actions",
+  headerActions: "header-actions",
+  leadingActions: "leading-actions",
+  singleActionContainer: "single-action-container",
+  menuContainer: "menu-container",
+  menuButton: "menu-button",
+  menu: "menu",
+  menuOpen: "menu--open",
+  fabContainer: "fab-container"
 };
 const SLOTS = {
-    leadingActions: "leading-actions",
-    menuActions: "menu-actions",
-    fab: "fab",
-    footerActions: "footer-actions"
+  leadingActions: "leading-actions",
+  menuActions: "menu-actions",
+  fab: "fab",
+  footerActions: "footer-actions"
 };
 const ICONS = {
-    menu: "ellipsis",
-    backLeft: "chevron-left",
-    backRight: "chevron-right"
+  menu: "ellipsis",
+  backLeft: "chevron-left",
+  backRight: "chevron-right"
 };
 const TEXT = {
-    back: "Back",
-    open: "Open",
-    close: "Close"
+  back: "Back",
+  open: "Open",
+  close: "Close"
 };
 
-const calciteFlowItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:-ms-flexbox;display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:-ms-flexbox;display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:-ms-flexbox;display:flex}.menu{min-width:var(--calcite-app-menu-min-width);-ms-flex-flow:column nowrap;flex-flow:column nowrap}.footer-actions{display:-ms-flexbox;display:flex;width:100%}.fab-container{display:inline-block}";
+const calciteFlowItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{align-self:stretch;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:flex}.menu{min-width:var(--calcite-app-menu-min-width);flex-flow:column nowrap}.footer-actions{display:flex;width:100%}.fab-container{display:inline-block}";
 
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 const CalciteFlowItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteFlowItemBackClick = createEvent(this, "calciteFlowItemBackClick", 7);
-        this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 7);
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Opens the action menu.
-         */
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteFlowItemBackClick = createEvent(this, "calciteFlowItemBackClick", 7);
+    this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 7);
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Opens the action menu.
+     */
+    this.menuOpen = false;
+    /**
+     * Shows a back button in the header.
+     */
+    this.showBackButton = false;
+    this.toggleMenuOpen = () => {
+      this.menuOpen = !this.menuOpen;
+    };
+    this.backButtonClick = () => {
+      this.calciteFlowItemBackClick.emit();
+    };
+    this.menuButtonKeyDown = (event) => {
+      const { key } = event;
+      const { menuOpen } = this;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      if (!length) {
+        return;
+      }
+      event.preventDefault();
+      if (!menuOpen) {
+        this.menuOpen = true;
+      }
+      if (key === "ArrowUp") {
+        const lastAction = actions[length - 1];
+        focusElement(lastAction);
+      }
+      if (key === "ArrowDown") {
+        const firstAction = actions[0];
+        focusElement(firstAction);
+      }
+    };
+    this.menuActionsKeydown = (event) => {
+      const { key, target } = event;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      const currentIndex = actions.indexOf(target);
+      if (!length || currentIndex === -1) {
+        return;
+      }
+      event.preventDefault();
+      if (key === "ArrowUp") {
+        const value = getRoundRobinIndex(currentIndex - 1, length);
+        const previousAction = actions[value];
+        focusElement(previousAction);
+      }
+      if (key === "ArrowDown") {
+        const value = getRoundRobinIndex(currentIndex + 1, length);
+        const nextAction = actions[value];
+        focusElement(nextAction);
+      }
+    };
+    this.menuActionsContainerKeyDown = (event) => {
+      const { key } = event;
+      if (key === "Escape") {
         this.menuOpen = false;
-        /**
-         * Shows a back button in the header.
-         */
-        this.showBackButton = false;
-        this.toggleMenuOpen = () => {
-            this.menuOpen = !this.menuOpen;
-        };
-        this.backButtonClick = () => {
-            this.calciteFlowItemBackClick.emit();
-        };
-        this.menuButtonKeyDown = (event) => {
-            const { key } = event;
-            const { menuOpen } = this;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            if (!length) {
-                return;
-            }
-            event.preventDefault();
-            if (!menuOpen) {
-                this.menuOpen = true;
-            }
-            if (key === "ArrowUp") {
-                const lastAction = actions[length - 1];
-                focusElement(lastAction);
-            }
-            if (key === "ArrowDown") {
-                const firstAction = actions[0];
-                focusElement(firstAction);
-            }
-        };
-        this.menuActionsKeydown = (event) => {
-            const { key, target } = event;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            const currentIndex = actions.indexOf(target);
-            if (!length || currentIndex === -1) {
-                return;
-            }
-            event.preventDefault();
-            if (key === "ArrowUp") {
-                const value = getRoundRobinIndex(currentIndex - 1, length);
-                const previousAction = actions[value];
-                focusElement(previousAction);
-            }
-            if (key === "ArrowDown") {
-                const value = getRoundRobinIndex(currentIndex + 1, length);
-                const nextAction = actions[value];
-                focusElement(nextAction);
-            }
-        };
-        this.menuActionsContainerKeyDown = (event) => {
-            const { key } = event;
-            if (key === "Escape") {
-                this.menuOpen = false;
-            }
-        };
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalcitePanelScroll(event) {
-        event.stopPropagation();
-        this.calciteFlowItemScroll.emit();
-    }
-    queryActions() {
-        return getSlotted(this.el, SLOTS.menuActions, {
-            all: true
-        });
-    }
-    isValidKey(key, supportedKeys) {
-        return !!supportedKeys.find((k) => k === key);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderBackButton(rtl) {
-        const { showBackButton, intlBack, backButtonClick } = this;
-        const label = intlBack || TEXT.back;
-        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-        return showBackButton ? (h("calcite-action", { slot: SLOTS$1.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
-    }
-    renderMenuButton() {
-        const { menuOpen, intlOpen, intlClose } = this;
-        const closeLabel = intlClose || TEXT.close;
-        const openLabel = intlOpen || TEXT.open;
-        const menuLabel = menuOpen ? closeLabel : openLabel;
-        return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
-    }
-    renderMenuActions() {
-        const { el, menuOpen, menuButtonEl } = this;
-        return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, h("div", { class: CSS.menu }, h("slot", { name: SLOTS.menuActions }))));
-    }
-    renderFooterActions() {
-        const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
-        return hasFooterActions ? (h("div", { slot: SLOTS$1.footer, class: CSS.footerActions }, h("slot", { name: SLOTS.footerActions }))) : null;
-    }
-    renderSingleActionContainer() {
-        return (h("div", { class: CSS.singleActionContainer }, h("slot", { name: SLOTS.menuActions })));
-    }
-    renderMenuActionsContainer() {
-        return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
-    }
-    renderHeaderLeadingContent() {
-        const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
-        return hasLeadingActions ? (h("div", { slot: SLOTS$1.headerLeadingContent, class: CSS.leadingActions }, h("slot", { name: SLOTS.leadingActions }))) : null;
-    }
-    renderHeaderActions() {
-        const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
-        const actionCount = menuActions.length;
-        const menuActionsNodes = actionCount === 1
-            ? this.renderSingleActionContainer()
-            : actionCount
-                ? this.renderMenuActionsContainer()
-                : null;
-        return menuActionsNodes ? (h("div", { slot: SLOTS$1.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
-    }
-    renderHeading() {
-        const { heading } = this;
-        return heading ? (h("h2", { class: CSS.heading, slot: SLOTS$1.headerContent }, heading)) : null;
-    }
-    renderSummary() {
-        const { summary } = this;
-        return summary ? h("span", { class: CSS.summary }, summary) : null;
-    }
-    renderHeader() {
-        const headingNode = this.renderHeading();
-        const summaryNode = this.renderSummary();
-        return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: SLOTS$1.headerContent }, headingNode, summaryNode)) : null;
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer, slot: SLOTS$1.fab }, h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { el } = this;
-        const dir = getElementDir(el);
-        return (h(Host, null, h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), h("slot", null), this.renderFooterActions(), this.renderFab())));
-    }
-    get el() { return getElement(this); }
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalcitePanelScroll(event) {
+    event.stopPropagation();
+    this.calciteFlowItemScroll.emit();
+  }
+  queryActions() {
+    return getSlotted(this.el, SLOTS.menuActions, {
+      all: true
+    });
+  }
+  isValidKey(key, supportedKeys) {
+    return !!supportedKeys.find((k) => k === key);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBackButton(rtl) {
+    const { showBackButton, intlBack, backButtonClick } = this;
+    const label = intlBack || TEXT.back;
+    const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+    return showBackButton ? (h("calcite-action", { slot: SLOTS$1.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
+  }
+  renderMenuButton() {
+    const { menuOpen, intlOpen, intlClose } = this;
+    const closeLabel = intlClose || TEXT.close;
+    const openLabel = intlOpen || TEXT.open;
+    const menuLabel = menuOpen ? closeLabel : openLabel;
+    return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
+  }
+  renderMenuActions() {
+    const { el, menuOpen, menuButtonEl } = this;
+    return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, h("div", { class: CSS.menu }, h("slot", { name: SLOTS.menuActions }))));
+  }
+  renderFooterActions() {
+    const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
+    return hasFooterActions ? (h("div", { slot: SLOTS$1.footer, class: CSS.footerActions }, h("slot", { name: SLOTS.footerActions }))) : null;
+  }
+  renderSingleActionContainer() {
+    return (h("div", { class: CSS.singleActionContainer }, h("slot", { name: SLOTS.menuActions })));
+  }
+  renderMenuActionsContainer() {
+    return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
+  }
+  renderHeaderLeadingContent() {
+    const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
+    return hasLeadingActions ? (h("div", { slot: SLOTS$1.headerLeadingContent, class: CSS.leadingActions }, h("slot", { name: SLOTS.leadingActions }))) : null;
+  }
+  renderHeaderActions() {
+    const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
+    const actionCount = menuActions.length;
+    const menuActionsNodes = actionCount === 1
+      ? this.renderSingleActionContainer()
+      : actionCount
+        ? this.renderMenuActionsContainer()
+        : null;
+    return menuActionsNodes ? (h("div", { slot: SLOTS$1.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
+  }
+  renderHeading() {
+    const { heading } = this;
+    return heading ? (h("h2", { class: CSS.heading, slot: SLOTS$1.headerContent }, heading)) : null;
+  }
+  renderSummary() {
+    const { summary } = this;
+    return summary ? h("span", { class: CSS.summary }, summary) : null;
+  }
+  renderHeader() {
+    const headingNode = this.renderHeading();
+    const summaryNode = this.renderSummary();
+    return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: SLOTS$1.headerContent }, headingNode, summaryNode)) : null;
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer, slot: SLOTS$1.fab }, h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { el } = this;
+    const dir = getElementDir(el);
+    return (h(Host, null, h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), h("slot", null), this.renderFooterActions(), this.renderFab())));
+  }
+  get el() { return getElement(this); }
 };
@@ -209,0 +209,0 @@ CalciteFlowItem.style = calciteFlowItemCss;

dist/calcite-app/calcite-flow.entry.js

@@ -1,106 +0,106 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
 
 const CSS = {
-    frame: "frame",
-    frameAdvancing: "frame--advancing",
-    frameRetreating: "frame--retreating"
+  frame: "frame",
+  frameAdvancing: "frame--advancing",
+  frameRetreating: "frame--retreating"
 };
 
-const calciteFlowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{-ms-flex-align:stretch;align-items:stretch;width:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;position:relative}:host .frame--advancing{-webkit-animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{-webkit-animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@-webkit-keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFlowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{align-items:stretch;width:100%;padding:0;margin:0;display:flex;flex-flow:column;position:relative}:host .frame--advancing{animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@keyframes calcite-flow-item-advance{0%{opacity:0.5;transform:translate3d(50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFlow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.flowCount = 0;
-        this.flowDirection = null;
-        this.flows = [];
-        this.getFlowDirection = (oldFlowCount, newFlowCount) => {
-            const allowRetreatingDirection = oldFlowCount > 1;
-            const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
-            if (!allowAdvancingDirection && !allowRetreatingDirection) {
-                return null;
-            }
-            return newFlowCount < oldFlowCount ? "retreating" : "advancing";
-        };
-        this.updateFlowProps = () => {
-            const { flows } = this;
-            const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
-            const oldFlowCount = flows.length;
-            const newFlowCount = newFlows.length;
-            const activeFlow = newFlows[newFlowCount - 1];
-            const previousFlow = newFlows[newFlowCount - 2];
-            if (newFlowCount && activeFlow) {
-                newFlows.forEach((flowNode) => {
-                    flowNode.showBackButton = newFlowCount > 1;
-                    flowNode.hidden = flowNode !== activeFlow;
-                });
-            }
-            if (previousFlow) {
-                previousFlow.menuOpen = false;
-            }
-            this.flows = newFlows;
-            if (oldFlowCount !== newFlowCount) {
-                const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
-                this.flowCount = newFlowCount;
-                this.flowDirection = flowDirection;
-            }
-        };
-        this.flowItemObserver = new MutationObserver(this.updateFlowProps);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     */
-    async back() {
-        const lastItem = this.el.querySelector("calcite-flow-item:last-child");
-        if (!lastItem) {
-            return;
-        }
-        const beforeBack = lastItem.beforeBack
-            ? lastItem.beforeBack
-            : () => Promise.resolve();
-        return beforeBack.call(lastItem).then(() => {
-            lastItem.remove();
-            return lastItem;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.flowCount = 0;
+    this.flowDirection = null;
+    this.flows = [];
+    this.getFlowDirection = (oldFlowCount, newFlowCount) => {
+      const allowRetreatingDirection = oldFlowCount > 1;
+      const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
+      if (!allowAdvancingDirection && !allowRetreatingDirection) {
+        return null;
+      }
+      return newFlowCount < oldFlowCount ? "retreating" : "advancing";
+    };
+    this.updateFlowProps = () => {
+      const { flows } = this;
+      const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
+      const oldFlowCount = flows.length;
+      const newFlowCount = newFlows.length;
+      const activeFlow = newFlows[newFlowCount - 1];
+      const previousFlow = newFlows[newFlowCount - 2];
+      if (newFlowCount && activeFlow) {
+        newFlows.forEach((flowNode) => {
+          flowNode.showBackButton = newFlowCount > 1;
+          flowNode.hidden = flowNode !== activeFlow;
         });
+      }
+      if (previousFlow) {
+        previousFlow.menuOpen = false;
+      }
+      this.flows = newFlows;
+      if (oldFlowCount !== newFlowCount) {
+        const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
+        this.flowCount = newFlowCount;
+        this.flowDirection = flowDirection;
+      }
+    };
+    this.flowItemObserver = new MutationObserver(this.updateFlowProps);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Removes the currently active `calcite-flow-item`.
+   */
+  async back() {
+    const lastItem = this.el.querySelector("calcite-flow-item:last-child");
+    if (!lastItem) {
+      return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
-        this.updateFlowProps();
-    }
-    componentDidUnload() {
-        this.flowItemObserver.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalciteFlowItemBackClick() {
-        this.back();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { flowDirection, flowCount } = this;
-        const frameDirectionClasses = {
-            [CSS.frame]: true,
-            [CSS.frameAdvancing]: flowDirection === "advancing",
-            [CSS.frameRetreating]: flowDirection === "retreating"
-        };
-        return (h(Host, null, h("div", { key: flowCount, class: frameDirectionClasses }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+    const beforeBack = lastItem.beforeBack
+      ? lastItem.beforeBack
+      : () => Promise.resolve();
+    return beforeBack.call(lastItem).then(() => {
+      lastItem.remove();
+      return lastItem;
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
+    this.updateFlowProps();
+  }
+  disconnectedCallback() {
+    this.flowItemObserver.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalciteFlowItemBackClick() {
+    this.back();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { flowDirection, flowCount } = this;
+    const frameDirectionClasses = {
+      [CSS.frame]: true,
+      [CSS.frameAdvancing]: flowDirection === "advancing",
+      [CSS.frameRetreating]: flowDirection === "retreating"
+    };
+    return (h(Host, null, h("div", { key: flowCount, class: frameDirectionClasses }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -107,0 +107,0 @@ CalciteFlow.style = calciteFlowCss;

dist/calcite-app/calcite-handle.entry.js

@@ -1,75 +0,75 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-2f390ff7.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-ebf37ff5.js';
 
 const CSS = {
-    handle: "handle",
-    handleActivated: "handle--activated"
+  handle: "handle",
+  handleActivated: "handle--activated"
 };
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:-ms-flexbox;display:flex}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
+const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:flex}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
 
 const CalciteHandle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.activated = false;
-        /**
-         * Value for the button title attribute
-         */
-        this.textTitle = "handle";
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case " ":
-                    this.activated = !this.activated;
-                    break;
-                case "ArrowUp":
-                case "ArrowDown":
-                    if (!this.activated) {
-                        return;
-                    }
-                    const direction = event.key.toLowerCase().replace("arrow", "");
-                    this.calciteHandleNudge.emit({ handle: this.el, direction });
-                    break;
-            }
-        };
-        this.handleBlur = () => {
-            this.activated = false;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        this.handleButton.focus();
-    }
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.activated = false;
+    /**
+     * Value for the button title attribute
+     */
+    this.textTitle = "handle";
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        return (
-        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
-                this.handleButton = el;
-            } }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-    }
-    get el() { return getElement(this); }
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          const direction = event.key.toLowerCase().replace("arrow", "");
+          this.calciteHandleNudge.emit({ handle: this.el, direction });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.handleButton.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
+        this.handleButton = el;
+      } }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+  }
+  get el() { return getElement(this); }
 };
@@ -76,0 +76,0 @@ CalciteHandle.style = calciteHandleCss;

dist/calcite-app/calcite-panel.entry.js

@@ -1,118 +0,118 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as getSlotted, a as getElementDir, b as getElementTheme } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
-import { S as SLOTS, C as CSS, T as TEXT, I as ICONS } from './resources-cccf0a03.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as getSlotted, a as getElementDir, b as getElementTheme } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
+import { S as SLOTS, C as CSS, T as TEXT, I as ICONS } from './resources-2a60d745.js';
 
-const calcitePanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{-ms-flex-align:stretch;align-items:stretch;-webkit-transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}calcite-scrim{-ms-flex-align:stretch;align-items:stretch;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:start;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex:1 1 auto;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:space-evenly;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:-webkit-sticky;position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
+const calcitePanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{align-items:stretch;transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:flex;flex-flow:column}calcite-scrim{align-items:stretch;width:100%;height:100%;display:flex;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{align-items:stretch;display:flex;flex:0 0 auto;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{align-items:stretch;display:flex;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{align-items:stretch;display:flex;flex-flow:column nowrap;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:flex;flex:0 0 auto;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
 
 const CalcitePanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
-        this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hides the panel.
-         */
-        this.dismissed = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Displays a close button in the trailing side of the header.
-         */
-        this.dismissible = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.panelKeyUpHandler = (event) => {
-            if (event.key === "Escape") {
-                this.dismiss();
-            }
-        };
-        this.dismiss = () => {
-            this.dismissed = true;
-        };
-        this.panelScrollHandler = () => {
-            this.calcitePanelScroll.emit();
-        };
-    }
-    dismissedHandler() {
-        this.calcitePanelDismissedChange.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
+    this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus(focusId) {
-        var _a, _b;
-        if (focusId === "dismiss-button") {
-            (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-            return;
-        }
-        (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
-    }
+    /**
+     * Hides the panel.
+     */
+    this.dismissed = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Displays a close button in the trailing side of the header.
+     */
+    this.dismissible = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderHeaderLeadingContent() {
-        const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
-        return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent }, h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+    this.panelKeyUpHandler = (event) => {
+      if (event.key === "Escape") {
+        this.dismiss();
+      }
+    };
+    this.dismiss = () => {
+      this.dismissed = true;
+    };
+    this.panelScrollHandler = () => {
+      this.calcitePanelScroll.emit();
+    };
+  }
+  dismissedHandler() {
+    this.calcitePanelDismissedChange.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus(focusId) {
+    var _a, _b;
+    if (focusId === "dismiss-button") {
+      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      return;
     }
-    renderHeaderContent() {
-        return (h("div", { key: "header-content", class: CSS.headerContent }, h("slot", { name: SLOTS.headerContent })));
-    }
-    renderHeaderTrailingContent() {
-        const { dismiss, dismissible, intlClose } = this;
-        const text = intlClose || TEXT.close;
-        const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
-        const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
-        return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent }, slotNode, dismissibleNode));
-    }
-    renderHeader() {
-        const headerLeadingContentNode = this.renderHeaderLeadingContent();
-        const headerContentNode = this.renderHeaderContent();
-        const headerTrailingContentNode = this.renderHeaderTrailingContent();
-        const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
-        return canDisplayHeader ? (h("header", { class: CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
-    }
-    renderFooter() {
-        const { el } = this;
-        const hasFooter = getSlotted(el, SLOTS.footer);
-        return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderContent() {
-        return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler }, h("slot", null), this.renderFab()));
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer }, h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
-                [CSS.container]: true,
-                [CSS_UTILITY.rtl]: rtl
-            } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
-        return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "dismissed": ["dismissedHandler"]
-    }; }
+    (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeaderLeadingContent() {
+    const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
+    return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent }, h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+  }
+  renderHeaderContent() {
+    return (h("div", { key: "header-content", class: CSS.headerContent }, h("slot", { name: SLOTS.headerContent })));
+  }
+  renderHeaderTrailingContent() {
+    const { dismiss, dismissible, intlClose } = this;
+    const text = intlClose || TEXT.close;
+    const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
+    const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
+    return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent }, slotNode, dismissibleNode));
+  }
+  renderHeader() {
+    const headerLeadingContentNode = this.renderHeaderLeadingContent();
+    const headerContentNode = this.renderHeaderContent();
+    const headerTrailingContentNode = this.renderHeaderTrailingContent();
+    const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
+    return canDisplayHeader ? (h("header", { class: CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const hasFooter = getSlotted(el, SLOTS.footer);
+    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderContent() {
+    return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler }, h("slot", null), this.renderFab()));
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer }, h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
+        [CSS.container]: true,
+        [CSS_UTILITY.rtl]: rtl
+      } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
+    return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "dismissed": ["dismissedHandler"]
+  }; }
 };
@@ -119,0 +119,0 @@ CalcitePanel.style = calcitePanelCss;

dist/calcite-app/calcite-pick-list-group.entry.js

@@ -1,37 +0,38 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir, g as getSlotted } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir, g as getSlotted } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    heading: "heading",
-    container: "container",
-    indented: "container--indented"
+  heading: "heading",
+  container: "container",
+  indented: "container--indented"
 };
 const SLOTS = {
-    parentItem: "parent-item"
+  parentItem: "parent-item"
 };
 
-const calcitePickListGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
+const calcitePickListGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
 
 const CalcitePickListGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, textGroupTitle } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
-        const sectionClasses = {
-            [CSS.container]: true,
-            [CSS.indented]: hasParentItem,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, textGroupTitle ? h("h3", { class: CSS.heading }, textGroupTitle) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, groupTitle, textGroupTitle } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
+    const sectionClasses = {
+      [CSS.container]: true,
+      [CSS.indented]: hasParentItem,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    const title = groupTitle || textGroupTitle;
+    return (h(Host, null, title ? h("h3", { class: CSS.heading }, title) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -38,0 +39,0 @@ CalcitePickListGroup.style = calcitePickListGroupCss;

dist/calcite-app/calcite-pick-list-item.entry.js

@@ -1,144 +0,148 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as getSlotted } from './dom-462ef99a.js';
-import { I as ICON_TYPES } from './resources-3de36c7f.js';
-import { T as TEXT, I as ICONS, C as CSS, S as SLOTS } from './resources-5f17182f.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
+import { I as ICON_TYPES } from './resources-fef38cfc.js';
+import { T as TEXT, I as ICONS, C as CSS, S as SLOTS } from './resources-ec6ffb66.js';
 
-const calcitePickListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;-ms-flex-align:center;align-items:center;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;margin:0;color:var(--calcite-app-foreground);-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);-ms-flex:0 0 0%;flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{-webkit-transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);-ms-flex-align:center;align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
+const calcitePickListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;align-items:center;background-color:var(--calcite-app-background-clear);display:flex;margin:0;color:var(--calcite-app-foreground);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:flex;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:flex;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{align-items:center;display:flex;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
 
 const CalcitePickListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
-        this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-        this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
-        this.calciteListItemValueChange = createEvent(this, "calciteListItemValueChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted.
-         */
-        this.disabled = false;
-        /**
-         * When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        /**
-         * The text for the remove item buttons. Only applicable if removable is true.
-         */
-        this.textRemove = TEXT.remove;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.pickListClickHandler = (event) => {
-            if (this.disabled || (this.disableDeselect && this.selected)) {
-                return;
-            }
-            this.shiftPressed = event.shiftKey;
-            this.selected = !this.selected;
-        };
-        this.pickListKeyDownHandler = (event) => {
-            if (event.key === " ") {
-                event.preventDefault();
-                if (this.disableDeselect && this.selected) {
-                    return;
-                }
-                this.selected = !this.selected;
-            }
-        };
-        this.removeClickHandler = () => {
-            this.calciteListItemRemove.emit();
-        };
-    }
-    metadataWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    selectedWatchHandler() {
-        this.calciteListItemChange.emit({
-            item: this.el,
-            value: this.value,
-            selected: this.selected,
-            shiftPressed: this.shiftPressed
-        });
-        this.shiftPressed = false;
-    }
-    textDescriptionWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    textLabelWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    valueWatchHandler(newValue, oldValue) {
-        this.calciteListItemValueChange.emit({ oldValue, newValue });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
+    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+    this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
+    this.calciteListItemValueChange = createEvent(this, "calciteListItemValueChange", 7);
     /**
-     * Used to toggle the selection state. By default this won't trigger an event.
-     * The first argument allows the value to be coerced, rather than swapping values.
+     * When true, the item cannot be clicked and is visually muted.
      */
-    async toggleSelected(coerce) {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
-    }
-    async setFocus() {
-        var _a;
-        (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+    this.disabled = false;
+    /**
+     * When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    /**
+     * The text for the remove item buttons. Only applicable if removable is true.
+     */
+    this.textRemove = TEXT.remove;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderIcon() {
-        const { icon } = this;
-        if (!icon) {
-            return null;
+    this.pickListClickHandler = (event) => {
+      if (this.disabled || (this.disableDeselect && this.selected)) {
+        return;
+      }
+      this.shiftPressed = event.shiftKey;
+      this.selected = !this.selected;
+    };
+    this.pickListKeyDownHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if (this.disableDeselect && this.selected) {
+          return;
         }
-        const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
-        return (h("span", { class: CSS.icon }, h("calcite-icon", { scale: "s", icon: iconName })));
+        this.selected = !this.selected;
+      }
+    };
+    this.removeClickHandler = () => {
+      this.calciteListItemRemove.emit();
+    };
+  }
+  descriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  labelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  metadataWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed
+    });
+    this.shiftPressed = false;
+  }
+  textDescriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  textLabelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  async toggleSelected(coerce) {
+    if (this.disabled) {
+      return;
     }
-    renderRemoveAction() {
-        if (!this.removable) {
-            return null;
-        }
-        return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderIcon() {
+    const { icon } = this;
+    if (!icon) {
+      return null;
     }
-    renderSecondaryAction() {
-        const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
-        return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action }, h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+    const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
+    return (h("span", { class: CSS.icon }, h("calcite-icon", { scale: "s", icon: iconName })));
+  }
+  renderRemoveAction() {
+    if (!this.removable) {
+      return null;
     }
-    render() {
-        const description = this.textDescription ? (h("span", { class: CSS.description }, this.textDescription)) : null;
-        return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": this.textLabel }, this.renderIcon(), h("div", { class: CSS.textContainer }, h("span", { class: CSS.title }, this.textLabel), description)), this.renderSecondaryAction()));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "metadata": ["metadataWatchHandler"],
-        "selected": ["selectedWatchHandler"],
-        "textDescription": ["textDescriptionWatchHandler"],
-        "textLabel": ["textLabelWatchHandler"],
-        "value": ["valueWatchHandler"]
-    }; }
+    return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+  }
+  renderSecondaryAction() {
+    const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
+    return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action }, h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+  }
+  render() {
+    const description = this.description || this.textDescription;
+    const label = this.label || this.textLabel;
+    return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": label }, this.renderIcon(), h("div", { class: CSS.textContainer }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderSecondaryAction()));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "description": ["descriptionWatchHandler"],
+    "label": ["labelWatchHandler"],
+    "metadata": ["metadataWatchHandler"],
+    "selected": ["selectedWatchHandler"],
+    "textDescription": ["textDescriptionWatchHandler"],
+    "textLabel": ["textLabelWatchHandler"],
+    "value": ["valueWatchHandler"]
+  }; }
 };
@@ -145,0 +149,0 @@ CalcitePickListItem.style = calcitePickListItemCss;

dist/calcite-app/calcite-pick-list.entry.js

@@ -1,115 +0,117 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-2f390ff7.js';
-import './dom-462ef99a.js';
-import './array-dbbc14b3.js';
-import { T as TEXT, I as ICON_TYPES } from './resources-3de36c7f.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-ebf37ff5.js';
+import './dom-0962c5fe.js';
+import './array-9b53302c.js';
+import { T as TEXT, I as ICON_TYPES } from './resources-fef38cfc.js';
 import './lodash-fad0d111.js';
-import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-5fd8203e.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-3bf5f243.js';
 
-const calcitePickListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-flow:column;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
+const calcitePickListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;flex:1 0 auto;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
 
 const CalcitePickList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListChange = createEvent(this, "calciteListChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = keyDownHandler.bind(this);
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-pick-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = keyDownHandler.bind(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-pick-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return getElement(this); }
 };
@@ -116,0 +118,0 @@ CalcitePickList.style = calcitePickListCss;

dist/calcite-app/calcite-shell-center-row.entry.js

@@ -1,54 +0,54 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir, g as getSlotted } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir, g as getSlotted } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    actionBarContainer: "action-bar-container",
-    content: "content"
+  actionBarContainer: "action-bar-container",
+  content: "content"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellCenterRowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;overflow:hidden;-webkit-transition:height var(--calcite-app-animation-time) ease-in-out;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:-ms-flexbox;display:flex;-ms-flex:1 0 0px;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:-ms-flexbox;display:flex}:host([detached]){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){-ms-flex-item-align:end;align-self:flex-end}:host([position=start]){-ms-flex-item-align:start;align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
+const calciteShellCenterRowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;overflow:hidden;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:flex;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:flex}:host([detached]){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){align-self:flex-end}:host([position=start]){align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
 
 const CalciteShellCenterRow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * Specifies the maxiumum height of the row.
-         */
-        this.heightScale = "s";
-        /**
-         * Arranges the component depending on the elements 'dir' property.
-         */
-        this.position = "end";
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { el } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", null)));
-        const actionBar = getSlotted(el, SLOTS.actionBar);
-        const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", { name: SLOTS.actionBar }))) : null;
-        const children = [actionBarNode, contentNode];
-        if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
-            children.reverse();
-        }
-        return h(Host, null, children);
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * Specifies the maxiumum height of the row.
+     */
+    this.heightScale = "s";
+    /**
+     * Arranges the component depending on the elements 'dir' property.
+     */
+    this.position = "end";
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", null)));
+    const actionBar = getSlotted(el, SLOTS.actionBar);
+    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", { name: SLOTS.actionBar }))) : null;
+    const children = [actionBarNode, contentNode];
+    if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
+      children.reverse();
     }
-    get el() { return getElement(this); }
+    return h(Host, null, children);
+  }
+  get el() { return getElement(this); }
 };
@@ -55,0 +55,0 @@ CalciteShellCenterRow.style = calciteShellCenterRowCss;

dist/calcite-app/calcite-shell-panel.entry.js

@@ -1,56 +0,56 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-2f390ff7.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ebf37ff5.js';
 
 const CSS = {
-    content: "content",
-    contentDetached: "content--detached"
+  content: "content",
+  contentDetached: "content--detached"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellPanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);-ms-flex-flow:column nowrap;flex-flow:column nowrap;display:-ms-flexbox;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
+const calciteShellPanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{align-items:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);flex-flow:column nowrap;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
 
 const CalciteShellPanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hide the content panel.
-         */
-        this.collapsed = false;
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * This sets limits the height of the content area. It only applies when detached is true.
-         */
-        this.detachedScale = "m";
-    }
-    watchHandler() {
-        this.calciteShellPanelToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { collapsed, detached, position } = this;
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, h("slot", null)));
-        const actionBarNode = h("slot", { name: SLOTS.actionBar });
-        const mainNodes = [actionBarNode, contentNode];
-        if (position === "end") {
-            mainNodes.reverse();
-        }
-        return h(Host, null, mainNodes);
+    /**
+     * Hide the content panel.
+     */
+    this.collapsed = false;
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * This sets limits the height of the content area. It only applies when detached is true.
+     */
+    this.detachedScale = "m";
+  }
+  watchHandler() {
+    this.calciteShellPanelToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { collapsed, detached, position } = this;
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, h("slot", null)));
+    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const mainNodes = [actionBarNode, contentNode];
+    if (position === "end") {
+      mainNodes.reverse();
     }
-    static get watchers() { return {
-        "collapsed": ["watchHandler"]
-    }; }
+    return h(Host, null, mainNodes);
+  }
+  static get watchers() { return {
+    "collapsed": ["watchHandler"]
+  }; }
 };
@@ -57,0 +57,0 @@ CalciteShellPanel.style = calciteShellPanelCss;

dist/calcite-app/calcite-shell.entry.js

@@ -1,52 +0,52 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as getSlotted } from './dom-462ef99a.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
 
 const CSS = {
-    main: "main",
-    mainReversed: "main--reversed",
-    content: "content",
-    footer: "footer"
+  main: "main",
+  mainReversed: "main--reversed",
+  content: "content",
+  footer: "footer"
 };
 const SLOTS = {
-    centerRow: "center-row",
-    primaryPanel: "primary-panel",
-    contextualPanel: "contextual-panel",
-    header: "shell-header",
-    footer: "shell-footer"
+  centerRow: "center-row",
+  primaryPanel: "primary-panel",
+  contextualPanel: "contextual-panel",
+  header: "shell-header",
+  footer: "shell-footer"
 };
 
-const calciteShellCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.main--reversed{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);-webkit-box-sizing:border-box;box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
+const calciteShellCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;flex:1 1 auto;display:flex;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);justify-content:space-between;overflow:hidden}.main--reversed{flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);box-shadow:var(--calcite-app-shadow-2);box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
 
 const CalciteShell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHeader() {
-        const hasHeader = !!getSlotted(this.el, SLOTS.header);
-        return hasHeader ? h("slot", { name: SLOTS.header }) : null;
-    }
-    renderContent() {
-        return (h("div", { class: CSS.content }, h("slot", null)));
-    }
-    renderFooter() {
-        const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-        return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderMain() {
-        const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
-        const mainClasses = {
-            [CSS.main]: true,
-            [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
-        };
-        return (h("div", { class: mainClasses }, h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), h("slot", { name: SLOTS.centerRow }), h("slot", { name: SLOTS.contextualPanel })));
-    }
-    render() {
-        return (h(Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const hasHeader = !!getSlotted(this.el, SLOTS.header);
+    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderFooter() {
+    const hasFooter = !!getSlotted(this.el, SLOTS.footer);
+    return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderMain() {
+    const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
+    const mainClasses = {
+      [CSS.main]: true,
+      [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
+    };
+    return (h("div", { class: mainClasses }, h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), h("slot", { name: SLOTS.centerRow }), h("slot", { name: SLOTS.contextualPanel })));
+  }
+  render() {
+    return (h(Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
+  }
+  get el() { return getElement(this); }
 };
@@ -53,0 +53,0 @@ CalciteShell.style = calciteShellCss;

dist/calcite-app/calcite-sortable-list.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
 import { S as Sortable } from './sortable.esm-107104a2.js';
@@ -7,128 +7,128 @@
 const CalciteSortableList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * The class on the handle elements.
-         */
-        this.handleSelector = "calcite-handle";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        this.handleActivated = false;
-        this.items = [];
-        this.observer = new MutationObserver(() => {
-            this.cleanUpDragAndDrop();
-            this.items = Array.from(this.el.children);
-            this.setUpDragAndDrop();
-        });
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.items = Array.from(this.el.children);
-        this.setUpDragAndDrop();
-        this.beginObserving();
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-        this.cleanUpDragAndDrop();
-    }
-    calciteHandleNudgeHandler(event) {
-        const sortItem = this.items.find((item) => {
-            return item.contains(event.detail.handle) || event.composedPath().includes(item);
-        });
-        const lastIndex = this.items.length - 1;
-        const startingIndex = this.items.indexOf(sortItem);
-        let appendInstead = false;
-        let buddyIndex;
-        switch (event.detail.direction) {
-            case "up":
-                event.preventDefault();
-                if (startingIndex === 0) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex - 1;
-                }
-                break;
-            case "down":
-                event.preventDefault();
-                if (startingIndex === lastIndex) {
-                    buddyIndex = 0;
-                }
-                else if (startingIndex === lastIndex - 1) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex + 2;
-                }
-                break;
-            default:
-                return;
+    /**
+     * The class on the handle elements.
+     */
+    this.handleSelector = "calcite-handle";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    this.handleActivated = false;
+    this.items = [];
+    this.observer = new MutationObserver(() => {
+      this.cleanUpDragAndDrop();
+      this.items = Array.from(this.el.children);
+      this.setUpDragAndDrop();
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.items = Array.from(this.el.children);
+    this.setUpDragAndDrop();
+    this.beginObserving();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.cleanUpDragAndDrop();
+  }
+  calciteHandleNudgeHandler(event) {
+    const sortItem = this.items.find((item) => {
+      return item.contains(event.detail.handle) || event.composedPath().includes(item);
+    });
+    const lastIndex = this.items.length - 1;
+    const startingIndex = this.items.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    switch (event.detail.direction) {
+      case "up":
+        event.preventDefault();
+        if (startingIndex === 0) {
+          appendInstead = true;
         }
-        this.observer.disconnect();
-        if (appendInstead) {
-            sortItem.parentElement.appendChild(sortItem);
+        else {
+          buddyIndex = startingIndex - 1;
         }
+        break;
+      case "down":
+        event.preventDefault();
+        if (startingIndex === lastIndex) {
+          buddyIndex = 0;
+        }
+        else if (startingIndex === lastIndex - 1) {
+          appendInstead = true;
+        }
         else {
-            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+          buddyIndex = startingIndex + 2;
         }
-        this.items = Array.from(this.el.children);
-        event.detail.handle.activated = true;
-        event.detail.handle.setFocus();
-        this.beginObserving();
+        break;
+      default:
+        return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpDragAndDrop() {
-        this.sortable = Sortable.create(this.el, {
-            handle: this.handleSelector,
-            // Changed sorting within list
-            onUpdate: () => {
-                this.items = Array.from(this.el.children);
-                this.calciteListOrderChange.emit();
-            },
-            // Element dragging started
-            onStart: () => {
-                this.observer.disconnect();
-            },
-            // Element dragging ended
-            onEnd: () => {
-                this.beginObserving();
-            }
-        });
+    this.observer.disconnect();
+    if (appendInstead) {
+      sortItem.parentElement.appendChild(sortItem);
     }
-    cleanUpDragAndDrop() {
-        this.sortable.destroy();
-        this.sortable = null;
+    else {
+      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
-    beginObserving() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null, h("slot", null)));
-    }
-    get el() { return getElement(this); }
+    this.items = Array.from(this.el.children);
+    event.detail.handle.activated = true;
+    event.detail.handle.setFocus();
+    this.beginObserving();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpDragAndDrop() {
+    this.sortable = Sortable.create(this.el, {
+      handle: this.handleSelector,
+      // Changed sorting within list
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
+      },
+      // Element dragging started
+      onStart: () => {
+        this.observer.disconnect();
+      },
+      // Element dragging ended
+      onEnd: () => {
+        this.beginObserving();
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    this.sortable.destroy();
+    this.sortable = null;
+  }
+  beginObserving() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return getElement(this); }
 };
@@ -135,0 +135,0 @@ CalciteSortableList.style = calciteSortableListCss;

dist/calcite-app/calcite-tip-group.entry.js

@@ -1,12 +0,12 @@
-import { r as registerInstance, h } from './index-2f390ff7.js';
+import { r as registerInstance, h } from './index-ebf37ff5.js';
 
-const calciteTipGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return h("slot", null);
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
 };
@@ -13,0 +13,0 @@ CalciteTipGroup.style = calciteTipGroupCss;

dist/calcite-app/calcite-tip-manager.entry.js

@@ -1,180 +0,180 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { a as getElementDir } from './dom-462ef99a.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
 
 const CSS = {
-    header: "header",
-    heading: "heading",
-    close: "close",
-    container: "container",
-    tipContainer: "tip-container",
-    tipContainerAdvancing: "tip-container--advancing",
-    tipContainerRetreating: "tip-container--retreating",
-    pagination: "pagination",
-    pagePosition: "page-position",
-    pageNext: "page-next",
-    pagePrevious: "page-previous"
+  header: "header",
+  heading: "heading",
+  close: "close",
+  container: "container",
+  tipContainer: "tip-container",
+  tipContainerAdvancing: "tip-container--advancing",
+  tipContainerRetreating: "tip-container--retreating",
+  pagination: "pagination",
+  pagePosition: "page-position",
+  pageNext: "page-next",
+  pagePrevious: "page-previous"
 };
 const ICONS = {
-    chevronLeft: "chevron-left",
-    chevronRight: "chevron-right",
-    close: "x"
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  close: "x"
 };
 const TEXT = {
-    defaultGroupTitle: "Tips",
-    defaultPaginationLabel: "Tip",
-    close: "Close",
-    previous: "Previous",
-    next: "Next"
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
 };
 
-const calciteTipManagerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@-webkit-keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{-webkit-animation-name:none;animation-name:none;-webkit-animation-duration:var(--calcite-app-animation-time);animation-duration:var(--calcite-app-animation-time);-webkit-animation-timing-function:var(--calcite-app-easing-function);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{-webkit-animation-name:tip-advance;animation-name:tip-advance}.tip-container--retreating{-webkit-animation-name:tip-retreat;animation-name:tip-retreat}.pagination{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipManagerCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{animation-name:none;animation-duration:var(--calcite-app-animation-time);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:flex;justify-content:center;align-items:flex-start;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipManager = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Alternate text for closing the `calcite-tip-manager`.
-         */
-        this.closed = false;
-        this.observer = new MutationObserver(() => this.setUpTips());
-        this.hideTipManager = () => {
-            this.closed = true;
-            this.calciteTipManagerToggle.emit();
-        };
-        this.previousClicked = () => {
-            this.previousTip();
-        };
-        this.nextClicked = () => {
-            this.nextTip();
-        };
-        this.tipManagerKeyUpHandler = (event) => {
-            if (event.target !== this.container) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowRight":
-                    event.preventDefault();
-                    this.nextTip();
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    this.previousTip();
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    this.selectedIndex = 0;
-                    break;
-                case "End":
-                    event.preventDefault();
-                    this.selectedIndex = this.total - 1;
-                    break;
-            }
-        };
-        this.storeContainerRef = (el) => {
-            this.container = el;
-        };
-    }
-    closedChangeHandler() {
-        this.direction = null;
-        this.calciteTipManagerToggle.emit();
-    }
-    selectedChangeHandler() {
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.setUpTips();
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    /**
+     * Alternate text for closing the `calcite-tip-manager`.
+     */
+    this.closed = false;
+    this.observer = new MutationObserver(() => this.setUpTips());
+    this.hideTipManager = () => {
+      this.closed = true;
+      this.calciteTipManagerToggle.emit();
+    };
+    this.previousClicked = () => {
+      this.previousTip();
+    };
+    this.nextClicked = () => {
+      this.nextTip();
+    };
+    this.tipManagerKeyUpHandler = (event) => {
+      if (event.target !== this.container) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          this.nextTip();
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          this.previousTip();
+          break;
+        case "Home":
+          event.preventDefault();
+          this.selectedIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          this.selectedIndex = this.total - 1;
+          break;
+      }
+    };
+    this.storeContainerRef = (el) => {
+      this.container = el;
+    };
+  }
+  closedChangeHandler() {
+    this.direction = null;
+    this.calciteTipManagerToggle.emit();
+  }
+  selectedChangeHandler() {
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setUpTips();
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async nextTip() {
+    this.direction = "advancing";
+    const nextIndex = this.selectedIndex + 1;
+    this.selectedIndex = (nextIndex + this.total) % this.total;
+  }
+  async previousTip() {
+    this.direction = "retreating";
+    const previousIndex = this.selectedIndex - 1;
+    this.selectedIndex = (previousIndex + this.total) % this.total;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpTips() {
+    const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
+    this.total = tips.length;
+    if (this.total === 0) {
+      return;
     }
-    componentDidUnload() {
-        this.observer.disconnect();
+    const selectedTip = this.el.querySelector("calcite-tip[selected]");
+    this.tips = tips;
+    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
+    tips.forEach((tip) => {
+      tip.nonDismissible = true;
+    });
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  showSelectedTip() {
+    this.tips.forEach((tip, index) => {
+      const isSelected = this.selectedIndex === index;
+      tip.selected = isSelected;
+      tip.hidden = !isSelected;
+    });
+  }
+  updateGroupTitle() {
+    const selectedTip = this.tips[this.selectedIndex];
+    const tipParent = selectedTip.closest("calcite-tip-group");
+    this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.groupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderPagination() {
+    const dir = getElementDir(this.el);
+    const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+    const nextLabel = intlNext || TEXT.next;
+    const previousLabel = intlPrevious || TEXT.previous;
+    const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+    return tips.length > 1 ? (h("footer", { class: CSS.pagination }, h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
+  }
+  render() {
+    const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
+    const closeLabel = intlClose || TEXT.close;
+    if (total === 0) {
+      return h(Host, null);
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async nextTip() {
-        this.direction = "advancing";
-        const nextIndex = this.selectedIndex + 1;
-        this.selectedIndex = (nextIndex + this.total) % this.total;
-    }
-    async previousTip() {
-        this.direction = "retreating";
-        const previousIndex = this.selectedIndex - 1;
-        this.selectedIndex = (previousIndex + this.total) % this.total;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpTips() {
-        const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
-        this.total = tips.length;
-        if (this.total === 0) {
-            return;
-        }
-        const selectedTip = this.el.querySelector("calcite-tip[selected]");
-        this.tips = tips;
-        this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
-        tips.forEach((tip) => {
-            tip.nonDismissible = true;
-        });
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
-    showSelectedTip() {
-        this.tips.forEach((tip, index) => {
-            const isSelected = this.selectedIndex === index;
-            tip.selected = isSelected;
-            tip.hidden = !isSelected;
-        });
-    }
-    updateGroupTitle() {
-        const selectedTip = this.tips[this.selectedIndex];
-        const tipParent = selectedTip.closest("calcite-tip-group");
-        this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.textGroupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderPagination() {
-        const dir = getElementDir(this.el);
-        const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
-        const nextLabel = intlNext || TEXT.next;
-        const previousLabel = intlPrevious || TEXT.previous;
-        const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
-        return tips.length > 1 ? (h("footer", { class: CSS.pagination }, h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
-    }
-    render() {
-        const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
-        const closeLabel = intlClose || TEXT.close;
-        if (total === 0) {
-            return h(Host, null);
-        }
-        return (h(Host, null, h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, h("header", { class: CSS.header }, h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), h("div", { tabIndex: 0, class: {
-                [CSS.tipContainer]: true,
-                [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
-                [CSS.tipContainerRetreating]: !closed && direction === "retreating"
-            }, key: selectedIndex }, h("slot", null)), this.renderPagination())));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "closed": ["closedChangeHandler"],
-        "selectedIndex": ["selectedChangeHandler"]
-    }; }
+    return (h(Host, null, h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, h("header", { class: CSS.header }, h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), h("div", { tabIndex: 0, class: {
+        [CSS.tipContainer]: true,
+        [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
+        [CSS.tipContainerRetreating]: !closed && direction === "retreating"
+      }, key: selectedIndex }, h("slot", null)), this.renderPagination())));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "closed": ["closedChangeHandler"],
+    "selectedIndex": ["selectedChangeHandler"]
+  }; }
 };
@@ -181,0 +181,0 @@ CalciteTipManager.style = calciteTipManagerCss;

dist/calcite-app/calcite-tip.entry.js

@@ -1,78 +0,78 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as getSlotted } from './dom-462ef99a.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
 
 const CSS = {
-    container: "container",
-    header: "header",
-    heading: "heading",
-    close: "close",
-    imageFrame: "image-frame",
-    content: "content",
-    info: "info"
+  container: "container",
+  header: "header",
+  heading: "heading",
+  close: "close",
+  imageFrame: "image-frame",
+  content: "content",
+  info: "info"
 };
 const ICONS = {
-    close: "x"
+  close: "x"
 };
 const SLOTS = {
-    thumbnail: "thumbnail"
+  thumbnail: "thumbnail"
 };
 const TEXT = {
-    close: "Close"
+  close: "Close"
 };
 
-const calciteTipCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{-webkit-box-shadow:none;box-shadow:none;margin:0;padding:0}.header{-ms-flex-pack:end;justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:-ms-flexbox;display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
+const calciteTipCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{position:relative;display:flex;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{box-shadow:none;margin:0;padding:0}.header{justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
 
 const CalciteTip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * No longer displays the tip.
-         */
-        this.dismissed = false;
-        /**
-         * Indicates whether the tip can be dismissed.
-         */
-        this.nonDismissible = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.hideTip = () => {
-            this.dismissed = true;
-            this.calciteTipDismiss.emit();
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderHeader() {
-        const { nonDismissible, hideTip, intlClose, heading } = this;
-        const text = intlClose || TEXT.close;
-        const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
-        const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
-        return dismissButtonNode || headingNode ? (h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
-    }
-    renderImageFrame() {
-        const { el } = this;
-        return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
-    }
-    renderInfoNode() {
-        return (h("div", { class: CSS.info }, h("slot", null)));
-    }
-    renderContent() {
-        return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
-    }
-    render() {
-        return (h(Host, null, h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
-    }
-    get el() { return getElement(this); }
+    /**
+     * No longer displays the tip.
+     */
+    this.dismissed = false;
+    /**
+     * Indicates whether the tip can be dismissed.
+     */
+    this.nonDismissible = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.hideTip = () => {
+      this.dismissed = true;
+      this.calciteTipDismiss.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const { nonDismissible, hideTip, intlClose, heading } = this;
+    const text = intlClose || TEXT.close;
+    const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
+    const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
+    return dismissButtonNode || headingNode ? (h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
+  }
+  renderImageFrame() {
+    const { el } = this;
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderInfoNode() {
+    return (h("div", { class: CSS.info }, h("slot", null)));
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
+  }
+  render() {
+    return (h(Host, null, h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
+  }
+  get el() { return getElement(this); }
 };
@@ -79,0 +79,0 @@ CalciteTip.style = calciteTipCss;

dist/calcite-app/calcite-value-list-item.entry.js

@@ -1,100 +0,95 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-2f390ff7.js';
-import { g as guid } from './guid-ac11c5c8.js';
-import { I as ICON_TYPES } from './resources-3de36c7f.js';
-import { C as CSS } from './resources-5f17182f.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-ebf37ff5.js';
+import { g as guid } from './guid-b6d0e663.js';
+import { I as ICON_TYPES } from './resources-fef38cfc.js';
+import { C as CSS } from './resources-ec6ffb66.js';
 
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteValueListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:-ms-flexbox;display:flex;-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{-webkit-box-shadow:none;box-shadow:none;-ms-flex-positive:1;flex-grow:1;position:relative;margin:0}:host([selected]){-webkit-box-shadow:0 0 0 1px var(--calcite-app-border-active) inset;box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
+const calciteValueListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:flex;transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{box-shadow:none;flex-grow:1;position:relative;margin:0}:host([selected]){box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
 
 const CalciteValueListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted
-         */
-        this.disabled = false;
-        /**
-         * @internal When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.handleActivated = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        this.pickListItem = null;
-        this.guid = `calcite-value-list-item-${guid()}`;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.getPickListRef = (el) => (this.pickListItem = el);
-        this.handleKeyDown = (event) => {
-            if (event.key === " ") {
-                this.handleActivated = !this.handleActivated;
-            }
-        };
-        this.handleBlur = () => {
-            this.handleActivated = false;
-        };
-        this.handleSelectChange = (event) => {
-            this.selected = event.detail.selected;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * When true, the item cannot be clicked and is visually muted
+     */
+    this.disabled = false;
+    /**
+     * @internal When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.handleActivated = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid()}`;
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    async toggleSelected(coerce) {
-        this.pickListItem.toggleSelected(coerce);
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  // --------------------------------------------------------------------------
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHandle() {
+    const { icon } = this;
+    if (icon === ICON_TYPES.grip) {
+      return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
     }
-    async setFocus() {
-        var _a;
-        (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Events
-    //
-    // --------------------------------------------------------------------------
-    calciteListItemChangeHandler(event) {
-        // adjust item payload from wrapped item before bubbling
-        event.detail.item = this.el;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHandle() {
-        const { icon } = this;
-        if (icon === ICON_TYPES.grip) {
-            return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-        }
-    }
-    render() {
-        return (h(Host, { "data-id": this.guid }, this.renderHandle(), h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.textLabel, textDescription: this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, h("slot", { name: "secondary-action", slot: "secondary-action" }))));
-    }
-    get el() { return getElement(this); }
+  }
+  render() {
+    return (h(Host, { "data-id": this.guid }, this.renderHandle(), h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.label || this.textLabel, textDescription: this.description || this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, h("slot", { name: "secondary-action", slot: "secondary-action" }))));
+  }
+  get el() { return getElement(this); }
 };
@@ -101,0 +96,0 @@ CalciteValueListItem.style = calciteValueListItemCss;

dist/calcite-app/calcite-value-list.entry.js

@@ -1,194 +0,196 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-2f390ff7.js';
-import './dom-462ef99a.js';
-import { g as getRoundRobinIndex } from './array-dbbc14b3.js';
-import './resources-3de36c7f.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-ebf37ff5.js';
+import './dom-0962c5fe.js';
+import { g as getRoundRobinIndex } from './array-9b53302c.js';
+import './resources-fef38cfc.js';
 import './lodash-fad0d111.js';
-import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-5fd8203e.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-3bf5f243.js';
 import { S as Sortable } from './sortable.esm-107104a2.js';
 
 const CSS = {
-    container: "container",
-    handle: "handle"
+  container: "container",
+  handle: "handle"
 };
 var ICON_TYPES;
 (function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 const TEXT = {
-    filterPlaceholder: "Filter results"
+  filterResults: "Filter results"
 };
 
-const calciteValueListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{-webkit-box-shadow:none;box-shadow:none}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteValueListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;background-color:var(--calcite-app-background-clear);display:flex;flex:0 0 auto;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{box-shadow:none}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteValueList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListChange = createEvent(this, "calciteListChange", 7);
-        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, the items will be sortable via drag and drop.
-         */
-        this.dragEnabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple Works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = (event) => {
-            const handleElement = event
-                .composedPath()
-                .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
-            const item = event
-                .composedPath()
-                .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-            // Only trigger keyboard sorting when the internal drag handle is focused and activated
-            if (!handleElement || !item.handleActivated) {
-                keyDownHandler.call(this, event);
-                return;
-            }
-            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
-                return;
-            }
-            event.preventDefault();
-            const { el, items } = this;
-            const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-            const currentIndex = items.indexOf(item);
-            const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
-            if (nextIndex === items.length - 1) {
-                el.appendChild(item);
-            }
-            else {
-                const itemAtNextIndex = el.children[nextIndex];
-                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
-                    ? itemAtNextIndex.nextElementSibling
-                    : itemAtNextIndex;
-                el.insertBefore(item, insertionReferenceItem);
-            }
-            requestAnimationFrame(() => handleElement.focus());
-            item.handleActivated = true;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidLoad() {
-        this.setUpDragAndDrop();
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-        this.cleanUpDragAndDrop();
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, the items will be sortable via drag and drop.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple Works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-value-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      const handleElement = event
+        .composedPath()
+        .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
+      const item = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+      // Only trigger keyboard sorting when the internal drag handle is focused and activated
+      if (!handleElement || !item.handleActivated) {
+        keyDownHandler.call(this, event);
+        return;
+      }
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const { el, items } = this;
+      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+      const currentIndex = items.indexOf(item);
+      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      requestAnimationFrame(() => handleElement.focus());
+      item.handleActivated = true;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
+  }
+  setUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    setUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable = Sortable.create(this.el, {
-            handle: `.${CSS.handle}`,
-            draggable: "calcite-value-list-item",
-            group: this.group,
-            onSort: () => {
-                this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-                const values = this.items.map((item) => item.value);
-                this.calciteListOrderChange.emit(values);
-            }
-        });
+    this.sortable = Sortable.create(this.el, {
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    cleanUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable.destroy();
+    this.sortable.destroy();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        let type = null;
-        if (this.dragEnabled) {
-            type = ICON_TYPES.grip;
-        }
-        return type;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return getElement(this); }
+    return type;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return getElement(this); }
 };
@@ -195,0 +197,0 @@ CalciteValueList.style = calciteValueListCss;

dist/cjs/calcite-action-bar.cjs.entry.js

@@ -5,95 +5,95 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const CalciteExpandToggle = require('./CalciteExpandToggle-21a32ec6.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const CalciteExpandToggle = require('./CalciteExpandToggle-5bdd09a3.js');
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom"
 };
 const SLOTS = {
-    bottomActions: "bottom-actions"
+  bottomActions: "bottom-actions"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionBarCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-item-align:stretch;align-self:stretch;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";
+const calciteActionBarCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-self:stretch;display:inline-flex;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}";
 
 const CalciteActionBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        this.observer = new MutationObserver(() => {
-            const { el, expanded } = this;
-            CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
-        });
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionBarToggle.emit();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
-        }
-        this.observer.observe(el, { childList: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
+    this.observer = new MutationObserver(() => {
+      const { el, expanded } = this;
+      CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
+    });
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (index.h(CalciteExpandToggle.CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return dom.getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom }, index.h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        return (index.h(index.Host, null, index.h("slot", null), this.renderBottomActionGroup()));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionBarToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
+    }
+    this.observer.observe(el, { childList: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (index.h(CalciteExpandToggle.CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return dom.getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom }, index.h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null), this.renderBottomActionGroup()));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -100,0 +100,0 @@ CalciteActionBar.style = calciteActionBarCss;

dist/cjs/calcite-action-group.cjs.entry.js

@@ -5,18 +5,18 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 
-const calciteActionGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:-ms-flexbox;display:flex;width:100%}";
+const calciteActionGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:flex;width:100%}";
 
 const CalciteActionGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (index.h(index.Host, null, index.h("slot", null)));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
 };
@@ -23,0 +23,0 @@ CalciteActionGroup.style = calciteActionGroupCss;

dist/cjs/calcite-action-pad.cjs.entry.js

@@ -5,95 +5,95 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const CalciteExpandToggle = require('./CalciteExpandToggle-21a32ec6.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const CalciteExpandToggle = require('./CalciteExpandToggle-5bdd09a3.js');
+const resources = require('./resources-9ca8c950.js');
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom",
-    container: "container"
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionPadCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;-ms-flex-direction:row;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
+const calciteActionPadCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:inline-flex;flex-direction:column;box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}:host([layout=horizontal]) .container{flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
 
 const CalciteActionPad = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteActionPadToggle = index.createEvent(this, "calciteActionPadToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates the horizontal or vertical layout of the component.
-         */
-        this.layout = "vertical";
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionPadToggle.emit();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteActionPadToggle = index.createEvent(this, "calciteActionPadToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
-        }
-    }
+    /**
+     * Indicates the horizontal or vertical layout of the component.
+     */
+    this.layout = "vertical";
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
     // --------------------------------------------------------------------------
     //
-    //  Component Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (index.h(CalciteExpandToggle.CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        const rtl = dom.getElementDir(this.el) === "rtl";
-        const containerClasses = {
-            [CSS.container]: true,
-            [resources.CSS_UTILITY.rtl]: rtl
-        };
-        return (index.h(index.Host, null, index.h("div", { class: containerClasses }, index.h("slot", null), this.renderBottomActionGroup())));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionPadToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      CalciteExpandToggle.toggleChildActionText({ parent: el, expanded });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (index.h(CalciteExpandToggle.CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+  }
+  render() {
+    const rtl = dom.getElementDir(this.el) === "rtl";
+    const containerClasses = {
+      [CSS.container]: true,
+      [resources.CSS_UTILITY.rtl]: rtl
+    };
+    return (index.h(index.Host, null, index.h("div", { class: containerClasses }, index.h("slot", null), this.renderBottomActionGroup())));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -100,0 +100,0 @@ CalciteActionPad.style = calciteActionPadCss;

dist/cjs/calcite-action.cjs.entry.js

@@ -5,118 +5,118 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
 
 const CSS = {
-    button: "button",
-    buttonTextVisible: "button--text-visible",
-    buttonCompact: "button--compact",
-    iconContainer: "icon-container",
-    slotContainer: "slot-container",
-    slotContainerHidden: "slot-container--hidden",
-    textContainer: "text-container",
-    textContainerVisible: "text-container--visible"
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
 };
 
-const calciteActionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:-ms-flexbox;display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;-webkit-transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;-webkit-transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{-ms-flex:1 1 auto;flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);-webkit-transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);-webkit-box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset;box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);-webkit-box-shadow:none;box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
+const calciteActionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;justify-content:flex-start;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;justify-content:center;align-items:center;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
 
 const CalciteAction = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /** Specify the appearance style of the action, defaults to solid. */
-        this.appearance = "solid";
-        /**
-         * Indicates whether the action is highlighted.
-         */
-        this.active = false;
-        /**
-         * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
-         */
-        this.compact = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Indicates unread changes.
-         */
-        this.indicator = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the action.
-         */
-        this.scale = "m";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-        this.observer = new MutationObserver(() => index.forceUpdate(this));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    async setFocus() {
-        this.buttonEl.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderTextContainer() {
-        const { text, textEnabled } = this;
-        const textContainerClasses = {
-            [CSS.textContainer]: true,
-            [CSS.textContainerVisible]: textEnabled
-        };
-        return text ? (index.h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
-    }
-    renderIconContainer() {
-        var _a;
-        const { loading, icon, scale, el } = this;
-        const iconScale = scale === "l" ? "m" : "s";
-        const calciteLoaderNode = loading ? index.h("calcite-loader", { "is-active": true, inline: true }) : null;
-        const calciteIconNode = icon ? index.h("calcite-icon", { icon: icon, scale: iconScale }) : null;
-        const iconNode = calciteLoaderNode || calciteIconNode;
-        const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-        const slotContainerNode = (index.h("div", { class: {
-                [CSS.slotContainer]: true,
-                [CSS.slotContainerHidden]: loading
-            } }, index.h("slot", null)));
-        return hasIconToDisplay ? (index.h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
-    }
-    render() {
-        const { compact, disabled, loading, el, textEnabled, label, text } = this;
-        const ariaLabel = label || text;
-        const rtl = dom.getElementDir(el) === "rtl";
-        const buttonClasses = {
-            [CSS.button]: true,
-            [CSS.buttonTextVisible]: textEnabled,
-            [CSS.buttonCompact]: compact,
-            [resources.CSS_UTILITY.rtl]: rtl
-        };
-        return (index.h(index.Host, null, index.h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
-    }
-    get el() { return index.getElement(this); }
+    /** Specify the appearance style of the action, defaults to solid. */
+    this.appearance = "solid";
+    /**
+     * Indicates whether the action is highlighted.
+     */
+    this.active = false;
+    /**
+     * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+     */
+    this.compact = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the action.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.observer = new MutationObserver(() => index.forceUpdate(this));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.buttonEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (index.h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const calciteLoaderNode = loading ? index.h("calcite-loader", { "is-active": true, inline: true }) : null;
+    const calciteIconNode = icon ? index.h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (index.h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } }, index.h("slot", null)));
+    return hasIconToDisplay ? (index.h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const rtl = dom.getElementDir(el) === "rtl";
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact,
+      [resources.CSS_UTILITY.rtl]: rtl
+    };
+    return (index.h(index.Host, null, index.h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -123,0 +123,0 @@ CalciteAction.style = calciteActionCss;

dist/cjs/calcite-app.cjs.js

 'use strict';
 
-const index = require('./index-ce610515.js');
-const appGlobals = require('./app-globals-a8f32b85.js');
+const index = require('./index-dc491151.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
-appGlobals.patchBrowser().then(options => {
+/*
+ Stencil Client Patch Browser v2.0.1 | MIT Licensed | https://stenciljs.com
+ */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (index.BUILD.isDev && !index.BUILD.isTesting) {
+        index.consoleDevInfo('Running in development mode.');
+    }
+    if (index.BUILD.cssVarShim) {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    if (index.BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(index.H.prototype);
+    }
+    if (index.BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
+        ? Array.from(index.doc.querySelectorAll('script')).find(s => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        : null;
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('calcite-app.cjs.js', document.baseURI).href));
+    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!index.BUILD.safari10 && importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        if (index.BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-4fd1a369.js'); }).then(() => opts);
+        }
+    }
+    return index.promiseResolve(opts);
+};
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
+                mod = new Promise(resolve => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+
+patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["calcite-action-bar.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad.cjs",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item.cjs",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item.cjs",[[1,"calcite-value-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block.cjs",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section.cjs",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip.cjs",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager.cjs",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list.cjs",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab.cjs",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow.cjs",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell.cjs",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row.cjs",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel.cjs",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list.cjs",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group.cjs",[[1,"calcite-tip-group",{"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel.cjs",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle.cjs",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group.cjs",[[1,"calcite-action-group"]]],["calcite-filter.cjs",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action.cjs",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["calcite-action-bar.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad.cjs",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item.cjs",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item.cjs",[[1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block.cjs",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section.cjs",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip.cjs",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager.cjs",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list.cjs",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab.cjs",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow.cjs",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell.cjs",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row.cjs",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel.cjs",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list.cjs",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group.cjs",[[1,"calcite-tip-group",{"groupTitle":[1,"group-title"],"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel.cjs",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle.cjs",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group.cjs",[[1,"calcite-action-group"]]],["calcite-filter.cjs",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action.cjs",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
 });

dist/cjs/calcite-block-section.cjs.entry.js

@@ -5,80 +5,80 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
-const guid = require('./guid-637b2e0b.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
+const guid = require('./guid-58dbdaea.js');
 
 const CSS = {
-    content: "content",
-    toggle: "toggle",
-    toggleSwitch: "toggle--switch"
+  content: "content",
+  toggle: "toggle",
+  toggleSwitch: "toggle--switch"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const ICONS = {
-    menuOpen: "chevron-down",
-    menuClosedLeft: "chevron-left",
-    menuClosedRight: "chevron-right"
+  menuOpen: "chevron-down",
+  menuClosedLeft: "chevron-left",
+  menuClosedRight: "chevron-right"
 };
 
-const calciteBlockSectionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
+const calciteBlockSectionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{align-items:center;cursor:pointer;display:flex;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
 
 const CalciteBlockSection = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteBlockSectionToggle = index.createEvent(this, "calciteBlockSectionToggle", 7);
-        /**
-         * When true, the block's section content will be displayed.
-         */
-        this.open = false;
-        /**
-         * This property determines the look of the section toggle.
-         * If the value is "switch", a toggle-switch will be displayed.
-         * If the value is "button", a clickable header is displayed.
-         *
-         * @todo revisit doc
-         */
-        this.toggleDisplay = "button";
-        this.guid = `calcite-block-section-${guid.guid()}`;
-        this.toggleSection = () => {
-            this.open = !this.open;
-            this.calciteBlockSectionToggle.emit();
-        };
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteBlockSectionToggle = index.createEvent(this, "calciteBlockSectionToggle", 7);
+    /**
+     * When true, the block's section content will be displayed.
+     */
+    this.open = false;
+    /**
+     * This property determines the look of the section toggle.
+     * If the value is "switch", a toggle-switch will be displayed.
+     * If the value is "button", a clickable header is displayed.
+     *
+     * @todo revisit doc
+     */
+    this.toggleDisplay = "button";
+    this.guid = `calcite-block-section-${guid.guid()}`;
+    this.toggleSection = () => {
+      this.open = !this.open;
+      this.calciteBlockSectionToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleHeaderLabelKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.click();
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleHeaderLabelKeyDown(event) {
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-            this.click();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-        const dir = dom.getElementDir(el);
-        const arrowIcon = open
-            ? ICONS.menuOpen
-            : dir === "rtl"
-                ? ICONS.menuClosedLeft
-                : ICONS.menuClosedRight;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const labelId = `${id}__label`;
-        const headerNode = toggleDisplay === "switch" ? (index.h("label", { "aria-label": toggleLabel, class: {
-                [CSS.toggle]: true,
-                [CSS.toggleSwitch]: true
-            }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, index.h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (index.h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
-        return (index.h("section", { "aria-expanded": open.toString(), class: { [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, index.h("div", { class: CSS.content, hidden: !open }, index.h("slot", null))));
-    }
-    get el() { return index.getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
+    const dir = dom.getElementDir(el);
+    const arrowIcon = open
+      ? ICONS.menuOpen
+      : dir === "rtl"
+        ? ICONS.menuClosedLeft
+        : ICONS.menuClosedRight;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const labelId = `${id}__label`;
+    const headerNode = toggleDisplay === "switch" ? (index.h("label", { "aria-label": toggleLabel, class: {
+        [CSS.toggle]: true,
+        [CSS.toggleSwitch]: true
+      }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, index.h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (index.h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
+    return (index.h("section", { "aria-expanded": open.toString(), class: { [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, index.h("div", { class: CSS.content, hidden: !open }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -85,0 +85,0 @@ CalciteBlockSection.style = calciteBlockSectionCss;

dist/cjs/calcite-block.cjs.entry.js

@@ -5,90 +5,90 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
 
 const CSS = {
-    content: "content",
-    headerContainer: "header-container",
-    icon: "icon",
-    toggle: "toggle",
-    toggleIcon: "toggle-icon",
-    title: "title",
-    heading: "heading",
-    header: "header",
-    button: "button",
-    summary: "summary",
-    controlContainer: "control-container"
+  content: "content",
+  headerContainer: "header-container",
+  icon: "icon",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  title: "title",
+  heading: "heading",
+  header: "header",
+  button: "button",
+  summary: "summary",
+  controlContainer: "control-container"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const SLOTS = {
-    icon: "icon",
-    control: "control"
+  icon: "icon",
+  control: "control"
 };
 
-const calciteBlockCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);-webkit-transition:margin var(--calcite-app-animation-time) ease-in-out;transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;-ms-flex-align:stretch;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;-ms-flex:0 0 var(--calcite-app-icon-size);flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:-ms-flexbox;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
+const calciteBlockCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex:0 0 auto;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:flex;align-items:center;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
 
 const CalciteBlock = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteBlockToggle = index.createEvent(this, "calciteBlockToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, this block will be collapsible.
-         */
-        this.collapsible = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, displays a drag handle in the header.
-         */
-        this.dragHandle = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * When true, the block's content will be displayed.
-         */
-        this.open = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.onHeaderClick = () => {
-            this.open = !this.open;
-            this.calciteBlockToggle.emit();
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteBlockToggle = index.createEvent(this, "calciteBlockToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderScrim() {
-        const { disabled, loading, el } = this;
-        const defaultSlot = index.h("slot", null);
-        return loading || disabled ? (index.h("calcite-scrim", { theme: dom.getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
-    }
-    render() {
-        const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const hasIcon = dom.getSlotted(el, SLOTS.icon);
-        const headerContent = (index.h("header", { class: CSS.header }, hasIcon ? (index.h("div", { class: CSS.icon }, index.h("slot", { name: SLOTS.icon }))) : null, index.h("div", { class: CSS.title }, index.h("h3", { class: CSS.heading }, heading), summary ? index.h("div", { class: CSS.summary }, summary) : null)));
-        const hasControl = dom.getSlotted(el, SLOTS.control);
-        const headerNode = (index.h("div", { class: CSS.headerContainer }, this.dragHandle ? index.h("calcite-handle", null) : null, collapsible ? (index.h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (index.h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (index.h("div", { class: CSS.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null));
-        const rtl = dom.getElementDir(el) === "rtl";
-        return (index.h(index.Host, { tabIndex: disabled ? -1 : null }, index.h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? resources.CSS_UTILITY.rtl : null }, headerNode, index.h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
-    }
-    get el() { return index.getElement(this); }
+    /**
+     * When true, this block will be collapsible.
+     */
+    this.collapsible = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, displays a drag handle in the header.
+     */
+    this.dragHandle = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * When true, the block's content will be displayed.
+     */
+    this.open = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.onHeaderClick = () => {
+      this.open = !this.open;
+      this.calciteBlockToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderScrim() {
+    const { disabled, loading, el } = this;
+    const defaultSlot = index.h("slot", null);
+    return loading || disabled ? (index.h("calcite-scrim", { theme: dom.getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
+  }
+  render() {
+    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const hasIcon = dom.getSlotted(el, SLOTS.icon);
+    const headerContent = (index.h("header", { class: CSS.header }, hasIcon ? (index.h("div", { class: CSS.icon }, index.h("slot", { name: SLOTS.icon }))) : null, index.h("div", { class: CSS.title }, index.h("h3", { class: CSS.heading }, heading), summary ? index.h("div", { class: CSS.summary }, summary) : null)));
+    const hasControl = dom.getSlotted(el, SLOTS.control);
+    const headerNode = (index.h("div", { class: CSS.headerContainer }, this.dragHandle ? index.h("calcite-handle", null) : null, collapsible ? (index.h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (index.h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (index.h("div", { class: CSS.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null));
+    const rtl = dom.getElementDir(el) === "rtl";
+    return (index.h(index.Host, { tabIndex: disabled ? -1 : null }, index.h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? resources.CSS_UTILITY.rtl : null }, headerNode, index.h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -95,0 +95,0 @@ CalciteBlock.style = calciteBlockCss;

dist/cjs/calcite-fab.cjs.entry.js

@@ -5,74 +5,74 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
 
 const CSS = {
-    button: "button"
+  button: "button"
 };
 const ICONS = {
-    plus: "plus"
+  plus: "plus"
 };
 
-const calciteFabCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{-webkit-box-shadow:var(--calcite-app-shadow-1);box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFabCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFab = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Used to set the button's appearance. Default is outline.
-         */
-        this.appearance = "outline";
-        /**
-         * Used to set the button's color. Default is light.
-         */
-        this.color = "light";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
-         */
-        this.icon = ICONS.plus;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the fab.
-         */
-        this.scale = "s";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        dom.focusElement(this.buttonEl);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
-        const titleText = !textEnabled && text;
-        const title = label || titleText;
-        const dir = dom.getElementDir(el);
-        return (index.h(index.Host, null, index.h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
-                this.buttonEl = buttonEl;
-            } }, this.textEnabled ? this.text : null)));
-    }
-    get el() { return index.getElement(this); }
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "light";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "s";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    dom.focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
+    const titleText = !textEnabled && text;
+    const title = label || titleText;
+    const dir = dom.getElementDir(el);
+    return (index.h(index.Host, null, index.h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
+        this.buttonEl = buttonEl;
+      } }, this.textEnabled ? this.text : null)));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -79,0 +79,0 @@ CalciteFab.style = calciteFabCss;

dist/cjs/calcite-filter.cjs.entry.js

@@ -5,86 +5,86 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
 const lodash = require('./lodash-421a9445.js');
 
 const CSS = {
-    searchIcon: "search-icon",
-    clearButton: "clear-button"
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
 };
 const TEXT = {
-    filterLabel: "filter",
-    clear: "Clear filter"
+  filterLabel: "filter",
+  clear: "Clear filter"
 };
 const ICONS = {
-    search: "search",
-    close: "x"
+  search: "search",
+  close: "x"
 };
 
-const calciteFilterCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
+const calciteFilterCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{align-items:center;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:flex;left:0;position:absolute;transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
 
 const filterDebounceInMs = 250;
 const CalciteFilter = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteFilterChange = index.createEvent(this, "calciteFilterChange", 7);
-        this.empty = true;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.filter = lodash.debounce((value) => {
-            const regex = new RegExp(value, "ig");
-            if (this.data.length === 0) {
-                console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-                this.calciteFilterChange.emit([]);
-                return;
-            }
-            const find = (input, RE) => {
-                let found = false;
-                lodash.forIn(input, (val) => {
-                    if (typeof val === "function") {
-                        return;
-                    }
-                    if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
-                        if (find(val, RE)) {
-                            found = true;
-                        }
-                    }
-                    else if (RE.test(val)) {
-                        found = true;
-                    }
-                });
-                return found;
-            };
-            const result = this.data.filter((item) => {
-                return find(item, regex);
-            });
-            this.calciteFilterChange.emit(result);
-        }, filterDebounceInMs);
-        this.inputHandler = (event) => {
-            const target = event.target;
-            this.empty = target.value === "";
-            this.filter(target.value);
-        };
-        this.clear = () => {
-            this.textInput.value = "";
-            this.empty = true;
-            this.calciteFilterChange.emit(this.data);
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteFilterChange = index.createEvent(this, "calciteFilterChange", 7);
+    this.empty = true;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        const rtl = dom.getElementDir(this.el) === "rtl";
-        return (index.h(index.Host, null, index.h("label", { class: rtl ? resources.CSS_UTILITY.rtl : null }, index.h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
-                this.textInput = el;
-            } }), index.h("div", { class: CSS.searchIcon }, index.h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (index.h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, index.h("calcite-icon", { icon: ICONS.close }))) : null));
-    }
-    get el() { return index.getElement(this); }
+    this.filter = lodash.debounce((value) => {
+      const regex = new RegExp(value, "ig");
+      if (this.data.length === 0) {
+        console.warn(`No data was passed to calcite-filter.
+      The data property expects an array of objects`);
+        this.calciteFilterChange.emit([]);
+        return;
+      }
+      const find = (input, RE) => {
+        let found = false;
+        lodash.forIn(input, (val) => {
+          if (typeof val === "function") {
+            return;
+          }
+          if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
+            if (find(val, RE)) {
+              found = true;
+            }
+          }
+          else if (RE.test(val)) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      const result = this.data.filter((item) => {
+        return find(item, regex);
+      });
+      this.calciteFilterChange.emit(result);
+    }, filterDebounceInMs);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.empty = target.value === "";
+      this.filter(target.value);
+    };
+    this.clear = () => {
+      this.textInput.value = "";
+      this.empty = true;
+      this.calciteFilterChange.emit(this.data);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const rtl = dom.getElementDir(this.el) === "rtl";
+    return (index.h(index.Host, null, index.h("label", { class: rtl ? resources.CSS_UTILITY.rtl : null }, index.h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
+        this.textInput = el;
+      } }), index.h("div", { class: CSS.searchIcon }, index.h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (index.h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, index.h("calcite-icon", { icon: ICONS.close }))) : null));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -91,0 +91,0 @@ CalciteFilter.style = calciteFilterCss;

dist/cjs/calcite-flow-item.cjs.entry.js

@@ -5,209 +5,209 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-36cf8dfa.js');
-const array = require('./array-d5ecc334.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-e96789eb.js');
+const array = require('./array-6fc4c87a.js');
 
 const CSS = {
-    header: "header-content",
-    heading: "heading",
-    summary: "summary",
-    backButton: "back-button",
-    footerActions: "footer-actions",
-    headerActions: "header-actions",
-    leadingActions: "leading-actions",
-    singleActionContainer: "single-action-container",
-    menuContainer: "menu-container",
-    menuButton: "menu-button",
-    menu: "menu",
-    menuOpen: "menu--open",
-    fabContainer: "fab-container"
+  header: "header-content",
+  heading: "heading",
+  summary: "summary",
+  backButton: "back-button",
+  footerActions: "footer-actions",
+  headerActions: "header-actions",
+  leadingActions: "leading-actions",
+  singleActionContainer: "single-action-container",
+  menuContainer: "menu-container",
+  menuButton: "menu-button",
+  menu: "menu",
+  menuOpen: "menu--open",
+  fabContainer: "fab-container"
 };
 const SLOTS = {
-    leadingActions: "leading-actions",
-    menuActions: "menu-actions",
-    fab: "fab",
-    footerActions: "footer-actions"
+  leadingActions: "leading-actions",
+  menuActions: "menu-actions",
+  fab: "fab",
+  footerActions: "footer-actions"
 };
 const ICONS = {
-    menu: "ellipsis",
-    backLeft: "chevron-left",
-    backRight: "chevron-right"
+  menu: "ellipsis",
+  backLeft: "chevron-left",
+  backRight: "chevron-right"
 };
 const TEXT = {
-    back: "Back",
-    open: "Open",
-    close: "Close"
+  back: "Back",
+  open: "Open",
+  close: "Close"
 };
 
-const calciteFlowItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:-ms-flexbox;display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:-ms-flexbox;display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:-ms-flexbox;display:flex}.menu{min-width:var(--calcite-app-menu-min-width);-ms-flex-flow:column nowrap;flex-flow:column nowrap}.footer-actions{display:-ms-flexbox;display:flex;width:100%}.fab-container{display:inline-block}";
+const calciteFlowItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{align-self:stretch;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:flex}.menu{min-width:var(--calcite-app-menu-min-width);flex-flow:column nowrap}.footer-actions{display:flex;width:100%}.fab-container{display:inline-block}";
 
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 const CalciteFlowItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteFlowItemBackClick = index.createEvent(this, "calciteFlowItemBackClick", 7);
-        this.calciteFlowItemScroll = index.createEvent(this, "calciteFlowItemScroll", 7);
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Opens the action menu.
-         */
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteFlowItemBackClick = index.createEvent(this, "calciteFlowItemBackClick", 7);
+    this.calciteFlowItemScroll = index.createEvent(this, "calciteFlowItemScroll", 7);
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Opens the action menu.
+     */
+    this.menuOpen = false;
+    /**
+     * Shows a back button in the header.
+     */
+    this.showBackButton = false;
+    this.toggleMenuOpen = () => {
+      this.menuOpen = !this.menuOpen;
+    };
+    this.backButtonClick = () => {
+      this.calciteFlowItemBackClick.emit();
+    };
+    this.menuButtonKeyDown = (event) => {
+      const { key } = event;
+      const { menuOpen } = this;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      if (!length) {
+        return;
+      }
+      event.preventDefault();
+      if (!menuOpen) {
+        this.menuOpen = true;
+      }
+      if (key === "ArrowUp") {
+        const lastAction = actions[length - 1];
+        dom.focusElement(lastAction);
+      }
+      if (key === "ArrowDown") {
+        const firstAction = actions[0];
+        dom.focusElement(firstAction);
+      }
+    };
+    this.menuActionsKeydown = (event) => {
+      const { key, target } = event;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      const currentIndex = actions.indexOf(target);
+      if (!length || currentIndex === -1) {
+        return;
+      }
+      event.preventDefault();
+      if (key === "ArrowUp") {
+        const value = array.getRoundRobinIndex(currentIndex - 1, length);
+        const previousAction = actions[value];
+        dom.focusElement(previousAction);
+      }
+      if (key === "ArrowDown") {
+        const value = array.getRoundRobinIndex(currentIndex + 1, length);
+        const nextAction = actions[value];
+        dom.focusElement(nextAction);
+      }
+    };
+    this.menuActionsContainerKeyDown = (event) => {
+      const { key } = event;
+      if (key === "Escape") {
         this.menuOpen = false;
-        /**
-         * Shows a back button in the header.
-         */
-        this.showBackButton = false;
-        this.toggleMenuOpen = () => {
-            this.menuOpen = !this.menuOpen;
-        };
-        this.backButtonClick = () => {
-            this.calciteFlowItemBackClick.emit();
-        };
-        this.menuButtonKeyDown = (event) => {
-            const { key } = event;
-            const { menuOpen } = this;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            if (!length) {
-                return;
-            }
-            event.preventDefault();
-            if (!menuOpen) {
-                this.menuOpen = true;
-            }
-            if (key === "ArrowUp") {
-                const lastAction = actions[length - 1];
-                dom.focusElement(lastAction);
-            }
-            if (key === "ArrowDown") {
-                const firstAction = actions[0];
-                dom.focusElement(firstAction);
-            }
-        };
-        this.menuActionsKeydown = (event) => {
-            const { key, target } = event;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            const currentIndex = actions.indexOf(target);
-            if (!length || currentIndex === -1) {
-                return;
-            }
-            event.preventDefault();
-            if (key === "ArrowUp") {
-                const value = array.getRoundRobinIndex(currentIndex - 1, length);
-                const previousAction = actions[value];
-                dom.focusElement(previousAction);
-            }
-            if (key === "ArrowDown") {
-                const value = array.getRoundRobinIndex(currentIndex + 1, length);
-                const nextAction = actions[value];
-                dom.focusElement(nextAction);
-            }
-        };
-        this.menuActionsContainerKeyDown = (event) => {
-            const { key } = event;
-            if (key === "Escape") {
-                this.menuOpen = false;
-            }
-        };
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalcitePanelScroll(event) {
-        event.stopPropagation();
-        this.calciteFlowItemScroll.emit();
-    }
-    queryActions() {
-        return dom.getSlotted(this.el, SLOTS.menuActions, {
-            all: true
-        });
-    }
-    isValidKey(key, supportedKeys) {
-        return !!supportedKeys.find((k) => k === key);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderBackButton(rtl) {
-        const { showBackButton, intlBack, backButtonClick } = this;
-        const label = intlBack || TEXT.back;
-        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-        return showBackButton ? (index.h("calcite-action", { slot: resources.SLOTS.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
-    }
-    renderMenuButton() {
-        const { menuOpen, intlOpen, intlClose } = this;
-        const closeLabel = intlClose || TEXT.close;
-        const openLabel = intlOpen || TEXT.open;
-        const menuLabel = menuOpen ? closeLabel : openLabel;
-        return (index.h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
-    }
-    renderMenuActions() {
-        const { el, menuOpen, menuButtonEl } = this;
-        return (index.h("calcite-popover", { referenceElement: menuButtonEl, theme: dom.getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, index.h("div", { class: CSS.menu }, index.h("slot", { name: SLOTS.menuActions }))));
-    }
-    renderFooterActions() {
-        const hasFooterActions = !!dom.getSlotted(this.el, SLOTS.footerActions);
-        return hasFooterActions ? (index.h("div", { slot: resources.SLOTS.footer, class: CSS.footerActions }, index.h("slot", { name: SLOTS.footerActions }))) : null;
-    }
-    renderSingleActionContainer() {
-        return (index.h("div", { class: CSS.singleActionContainer }, index.h("slot", { name: SLOTS.menuActions })));
-    }
-    renderMenuActionsContainer() {
-        return (index.h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
-    }
-    renderHeaderLeadingContent() {
-        const hasLeadingActions = dom.getSlotted(this.el, SLOTS.leadingActions);
-        return hasLeadingActions ? (index.h("div", { slot: resources.SLOTS.headerLeadingContent, class: CSS.leadingActions }, index.h("slot", { name: SLOTS.leadingActions }))) : null;
-    }
-    renderHeaderActions() {
-        const menuActions = dom.getSlotted(this.el, SLOTS.menuActions, { all: true });
-        const actionCount = menuActions.length;
-        const menuActionsNodes = actionCount === 1
-            ? this.renderSingleActionContainer()
-            : actionCount
-                ? this.renderMenuActionsContainer()
-                : null;
-        return menuActionsNodes ? (index.h("div", { slot: resources.SLOTS.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
-    }
-    renderHeading() {
-        const { heading } = this;
-        return heading ? (index.h("h2", { class: CSS.heading, slot: resources.SLOTS.headerContent }, heading)) : null;
-    }
-    renderSummary() {
-        const { summary } = this;
-        return summary ? index.h("span", { class: CSS.summary }, summary) : null;
-    }
-    renderHeader() {
-        const headingNode = this.renderHeading();
-        const summaryNode = this.renderSummary();
-        return headingNode || summaryNode ? (index.h("div", { class: CSS.header, slot: resources.SLOTS.headerContent }, headingNode, summaryNode)) : null;
-    }
-    renderFab() {
-        const hasFab = dom.getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (index.h("div", { class: CSS.fabContainer, slot: resources.SLOTS.fab }, index.h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { el } = this;
-        const dir = dom.getElementDir(el);
-        return (index.h(index.Host, null, index.h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: dom.getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), index.h("slot", null), this.renderFooterActions(), this.renderFab())));
-    }
-    get el() { return index.getElement(this); }
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalcitePanelScroll(event) {
+    event.stopPropagation();
+    this.calciteFlowItemScroll.emit();
+  }
+  queryActions() {
+    return dom.getSlotted(this.el, SLOTS.menuActions, {
+      all: true
+    });
+  }
+  isValidKey(key, supportedKeys) {
+    return !!supportedKeys.find((k) => k === key);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBackButton(rtl) {
+    const { showBackButton, intlBack, backButtonClick } = this;
+    const label = intlBack || TEXT.back;
+    const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+    return showBackButton ? (index.h("calcite-action", { slot: resources.SLOTS.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
+  }
+  renderMenuButton() {
+    const { menuOpen, intlOpen, intlClose } = this;
+    const closeLabel = intlClose || TEXT.close;
+    const openLabel = intlOpen || TEXT.open;
+    const menuLabel = menuOpen ? closeLabel : openLabel;
+    return (index.h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
+  }
+  renderMenuActions() {
+    const { el, menuOpen, menuButtonEl } = this;
+    return (index.h("calcite-popover", { referenceElement: menuButtonEl, theme: dom.getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, index.h("div", { class: CSS.menu }, index.h("slot", { name: SLOTS.menuActions }))));
+  }
+  renderFooterActions() {
+    const hasFooterActions = !!dom.getSlotted(this.el, SLOTS.footerActions);
+    return hasFooterActions ? (index.h("div", { slot: resources.SLOTS.footer, class: CSS.footerActions }, index.h("slot", { name: SLOTS.footerActions }))) : null;
+  }
+  renderSingleActionContainer() {
+    return (index.h("div", { class: CSS.singleActionContainer }, index.h("slot", { name: SLOTS.menuActions })));
+  }
+  renderMenuActionsContainer() {
+    return (index.h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
+  }
+  renderHeaderLeadingContent() {
+    const hasLeadingActions = dom.getSlotted(this.el, SLOTS.leadingActions);
+    return hasLeadingActions ? (index.h("div", { slot: resources.SLOTS.headerLeadingContent, class: CSS.leadingActions }, index.h("slot", { name: SLOTS.leadingActions }))) : null;
+  }
+  renderHeaderActions() {
+    const menuActions = dom.getSlotted(this.el, SLOTS.menuActions, { all: true });
+    const actionCount = menuActions.length;
+    const menuActionsNodes = actionCount === 1
+      ? this.renderSingleActionContainer()
+      : actionCount
+        ? this.renderMenuActionsContainer()
+        : null;
+    return menuActionsNodes ? (index.h("div", { slot: resources.SLOTS.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
+  }
+  renderHeading() {
+    const { heading } = this;
+    return heading ? (index.h("h2", { class: CSS.heading, slot: resources.SLOTS.headerContent }, heading)) : null;
+  }
+  renderSummary() {
+    const { summary } = this;
+    return summary ? index.h("span", { class: CSS.summary }, summary) : null;
+  }
+  renderHeader() {
+    const headingNode = this.renderHeading();
+    const summaryNode = this.renderSummary();
+    return headingNode || summaryNode ? (index.h("div", { class: CSS.header, slot: resources.SLOTS.headerContent }, headingNode, summaryNode)) : null;
+  }
+  renderFab() {
+    const hasFab = dom.getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (index.h("div", { class: CSS.fabContainer, slot: resources.SLOTS.fab }, index.h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { el } = this;
+    const dir = dom.getElementDir(el);
+    return (index.h(index.Host, null, index.h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: dom.getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), index.h("slot", null), this.renderFooterActions(), this.renderFab())));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -214,0 +214,0 @@ CalciteFlowItem.style = calciteFlowItemCss;

dist/cjs/calcite-flow.cjs.entry.js

@@ -5,107 +5,107 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 
 const CSS = {
-    frame: "frame",
-    frameAdvancing: "frame--advancing",
-    frameRetreating: "frame--retreating"
+  frame: "frame",
+  frameAdvancing: "frame--advancing",
+  frameRetreating: "frame--retreating"
 };
 
-const calciteFlowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{-ms-flex-align:stretch;align-items:stretch;width:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;position:relative}:host .frame--advancing{-webkit-animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{-webkit-animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@-webkit-keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFlowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{align-items:stretch;width:100%;padding:0;margin:0;display:flex;flex-flow:column;position:relative}:host .frame--advancing{animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@keyframes calcite-flow-item-advance{0%{opacity:0.5;transform:translate3d(50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFlow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.flowCount = 0;
-        this.flowDirection = null;
-        this.flows = [];
-        this.getFlowDirection = (oldFlowCount, newFlowCount) => {
-            const allowRetreatingDirection = oldFlowCount > 1;
-            const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
-            if (!allowAdvancingDirection && !allowRetreatingDirection) {
-                return null;
-            }
-            return newFlowCount < oldFlowCount ? "retreating" : "advancing";
-        };
-        this.updateFlowProps = () => {
-            const { flows } = this;
-            const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
-            const oldFlowCount = flows.length;
-            const newFlowCount = newFlows.length;
-            const activeFlow = newFlows[newFlowCount - 1];
-            const previousFlow = newFlows[newFlowCount - 2];
-            if (newFlowCount && activeFlow) {
-                newFlows.forEach((flowNode) => {
-                    flowNode.showBackButton = newFlowCount > 1;
-                    flowNode.hidden = flowNode !== activeFlow;
-                });
-            }
-            if (previousFlow) {
-                previousFlow.menuOpen = false;
-            }
-            this.flows = newFlows;
-            if (oldFlowCount !== newFlowCount) {
-                const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
-                this.flowCount = newFlowCount;
-                this.flowDirection = flowDirection;
-            }
-        };
-        this.flowItemObserver = new MutationObserver(this.updateFlowProps);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     */
-    async back() {
-        const lastItem = this.el.querySelector("calcite-flow-item:last-child");
-        if (!lastItem) {
-            return;
-        }
-        const beforeBack = lastItem.beforeBack
-            ? lastItem.beforeBack
-            : () => Promise.resolve();
-        return beforeBack.call(lastItem).then(() => {
-            lastItem.remove();
-            return lastItem;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.flowCount = 0;
+    this.flowDirection = null;
+    this.flows = [];
+    this.getFlowDirection = (oldFlowCount, newFlowCount) => {
+      const allowRetreatingDirection = oldFlowCount > 1;
+      const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
+      if (!allowAdvancingDirection && !allowRetreatingDirection) {
+        return null;
+      }
+      return newFlowCount < oldFlowCount ? "retreating" : "advancing";
+    };
+    this.updateFlowProps = () => {
+      const { flows } = this;
+      const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
+      const oldFlowCount = flows.length;
+      const newFlowCount = newFlows.length;
+      const activeFlow = newFlows[newFlowCount - 1];
+      const previousFlow = newFlows[newFlowCount - 2];
+      if (newFlowCount && activeFlow) {
+        newFlows.forEach((flowNode) => {
+          flowNode.showBackButton = newFlowCount > 1;
+          flowNode.hidden = flowNode !== activeFlow;
         });
+      }
+      if (previousFlow) {
+        previousFlow.menuOpen = false;
+      }
+      this.flows = newFlows;
+      if (oldFlowCount !== newFlowCount) {
+        const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
+        this.flowCount = newFlowCount;
+        this.flowDirection = flowDirection;
+      }
+    };
+    this.flowItemObserver = new MutationObserver(this.updateFlowProps);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Removes the currently active `calcite-flow-item`.
+   */
+  async back() {
+    const lastItem = this.el.querySelector("calcite-flow-item:last-child");
+    if (!lastItem) {
+      return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
-        this.updateFlowProps();
-    }
-    componentDidUnload() {
-        this.flowItemObserver.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalciteFlowItemBackClick() {
-        this.back();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { flowDirection, flowCount } = this;
-        const frameDirectionClasses = {
-            [CSS.frame]: true,
-            [CSS.frameAdvancing]: flowDirection === "advancing",
-            [CSS.frameRetreating]: flowDirection === "retreating"
-        };
-        return (index.h(index.Host, null, index.h("div", { key: flowCount, class: frameDirectionClasses }, index.h("slot", null))));
-    }
-    get el() { return index.getElement(this); }
+    const beforeBack = lastItem.beforeBack
+      ? lastItem.beforeBack
+      : () => Promise.resolve();
+    return beforeBack.call(lastItem).then(() => {
+      lastItem.remove();
+      return lastItem;
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
+    this.updateFlowProps();
+  }
+  disconnectedCallback() {
+    this.flowItemObserver.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalciteFlowItemBackClick() {
+    this.back();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { flowDirection, flowCount } = this;
+    const frameDirectionClasses = {
+      [CSS.frame]: true,
+      [CSS.frameAdvancing]: flowDirection === "advancing",
+      [CSS.frameRetreating]: flowDirection === "retreating"
+    };
+    return (index.h(index.Host, null, index.h("div", { key: flowCount, class: frameDirectionClasses }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -112,0 +112,0 @@ CalciteFlow.style = calciteFlowCss;

dist/cjs/calcite-handle.cjs.entry.js

@@ -5,76 +5,76 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 
 const CSS = {
-    handle: "handle",
-    handleActivated: "handle--activated"
+  handle: "handle",
+  handleActivated: "handle--activated"
 };
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:-ms-flexbox;display:flex}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
+const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:flex}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
 
 const CalciteHandle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteHandleNudge = index.createEvent(this, "calciteHandleNudge", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.activated = false;
-        /**
-         * Value for the button title attribute
-         */
-        this.textTitle = "handle";
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case " ":
-                    this.activated = !this.activated;
-                    break;
-                case "ArrowUp":
-                case "ArrowDown":
-                    if (!this.activated) {
-                        return;
-                    }
-                    const direction = event.key.toLowerCase().replace("arrow", "");
-                    this.calciteHandleNudge.emit({ handle: this.el, direction });
-                    break;
-            }
-        };
-        this.handleBlur = () => {
-            this.activated = false;
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteHandleNudge = index.createEvent(this, "calciteHandleNudge", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        this.handleButton.focus();
-    }
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.activated = false;
+    /**
+     * Value for the button title attribute
+     */
+    this.textTitle = "handle";
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        return (
-        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        index.h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
-                this.handleButton = el;
-            } }, index.h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-    }
-    get el() { return index.getElement(this); }
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          const direction = event.key.toLowerCase().replace("arrow", "");
+          this.calciteHandleNudge.emit({ handle: this.el, direction });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.handleButton.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    index.h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
+        this.handleButton = el;
+      } }, index.h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -81,0 +81,0 @@ CalciteHandle.style = calciteHandleCss;

dist/cjs/calcite-panel.cjs.entry.js

@@ -5,119 +5,119 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
-const resources$1 = require('./resources-36cf8dfa.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources$1 = require('./resources-9ca8c950.js');
+const resources = require('./resources-e96789eb.js');
 
-const calcitePanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{-ms-flex-align:stretch;align-items:stretch;-webkit-transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}calcite-scrim{-ms-flex-align:stretch;align-items:stretch;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:start;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex:1 1 auto;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:space-evenly;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:-webkit-sticky;position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
+const calcitePanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{align-items:stretch;transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:flex;flex-flow:column}calcite-scrim{align-items:stretch;width:100%;height:100%;display:flex;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{align-items:stretch;display:flex;flex:0 0 auto;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{align-items:stretch;display:flex;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{align-items:stretch;display:flex;flex-flow:column nowrap;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:flex;flex:0 0 auto;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
 
 const CalcitePanel = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calcitePanelDismissedChange = index.createEvent(this, "calcitePanelDismissedChange", 7);
-        this.calcitePanelScroll = index.createEvent(this, "calcitePanelScroll", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hides the panel.
-         */
-        this.dismissed = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Displays a close button in the trailing side of the header.
-         */
-        this.dismissible = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.panelKeyUpHandler = (event) => {
-            if (event.key === "Escape") {
-                this.dismiss();
-            }
-        };
-        this.dismiss = () => {
-            this.dismissed = true;
-        };
-        this.panelScrollHandler = () => {
-            this.calcitePanelScroll.emit();
-        };
-    }
-    dismissedHandler() {
-        this.calcitePanelDismissedChange.emit();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calcitePanelDismissedChange = index.createEvent(this, "calcitePanelDismissedChange", 7);
+    this.calcitePanelScroll = index.createEvent(this, "calcitePanelScroll", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus(focusId) {
-        var _a, _b;
-        if (focusId === "dismiss-button") {
-            (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-            return;
-        }
-        (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
-    }
+    /**
+     * Hides the panel.
+     */
+    this.dismissed = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Displays a close button in the trailing side of the header.
+     */
+    this.dismissible = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderHeaderLeadingContent() {
-        const hasLeadingContent = dom.getSlotted(this.el, resources$1.SLOTS.headerLeadingContent);
-        return hasLeadingContent ? (index.h("div", { key: "header-leading-content", class: resources$1.CSS.headerLeadingContent }, index.h("slot", { name: resources$1.SLOTS.headerLeadingContent }))) : null;
+    this.panelKeyUpHandler = (event) => {
+      if (event.key === "Escape") {
+        this.dismiss();
+      }
+    };
+    this.dismiss = () => {
+      this.dismissed = true;
+    };
+    this.panelScrollHandler = () => {
+      this.calcitePanelScroll.emit();
+    };
+  }
+  dismissedHandler() {
+    this.calcitePanelDismissedChange.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus(focusId) {
+    var _a, _b;
+    if (focusId === "dismiss-button") {
+      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      return;
     }
-    renderHeaderContent() {
-        return (index.h("div", { key: "header-content", class: resources$1.CSS.headerContent }, index.h("slot", { name: resources$1.SLOTS.headerContent })));
-    }
-    renderHeaderTrailingContent() {
-        const { dismiss, dismissible, intlClose } = this;
-        const text = intlClose || resources$1.TEXT.close;
-        const dismissibleNode = dismissible ? (index.h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: resources$1.ICONS.close })) : null;
-        const slotNode = index.h("slot", { name: resources$1.SLOTS.headerTrailingContent });
-        return (index.h("div", { key: "header-trailing-content", class: resources$1.CSS.headerTrailingContent }, slotNode, dismissibleNode));
-    }
-    renderHeader() {
-        const headerLeadingContentNode = this.renderHeaderLeadingContent();
-        const headerContentNode = this.renderHeaderContent();
-        const headerTrailingContentNode = this.renderHeaderTrailingContent();
-        const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
-        return canDisplayHeader ? (index.h("header", { class: resources$1.CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
-    }
-    renderFooter() {
-        const { el } = this;
-        const hasFooter = dom.getSlotted(el, resources$1.SLOTS.footer);
-        return hasFooter ? (index.h("footer", { class: resources$1.CSS.footer }, index.h("slot", { name: resources$1.SLOTS.footer }))) : null;
-    }
-    renderContent() {
-        return (index.h("section", { tabIndex: 0, class: resources$1.CSS.contentContainer, onScroll: this.panelScrollHandler }, index.h("slot", null), this.renderFab()));
-    }
-    renderFab() {
-        const hasFab = dom.getSlotted(this.el, resources$1.SLOTS.fab);
-        return hasFab ? (index.h("div", { class: resources$1.CSS.fabContainer }, index.h("slot", { name: resources$1.SLOTS.fab }))) : null;
-    }
-    render() {
-        const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-        const rtl = dom.getElementDir(el) === "rtl";
-        const panelNode = (index.h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
-                [resources$1.CSS.container]: true,
-                [resources.CSS_UTILITY.rtl]: rtl
-            } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
-        return (index.h(index.Host, null, loading || disabled ? (index.h("calcite-scrim", { theme: dom.getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "dismissed": ["dismissedHandler"]
-    }; }
+    (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeaderLeadingContent() {
+    const hasLeadingContent = dom.getSlotted(this.el, resources.SLOTS.headerLeadingContent);
+    return hasLeadingContent ? (index.h("div", { key: "header-leading-content", class: resources.CSS.headerLeadingContent }, index.h("slot", { name: resources.SLOTS.headerLeadingContent }))) : null;
+  }
+  renderHeaderContent() {
+    return (index.h("div", { key: "header-content", class: resources.CSS.headerContent }, index.h("slot", { name: resources.SLOTS.headerContent })));
+  }
+  renderHeaderTrailingContent() {
+    const { dismiss, dismissible, intlClose } = this;
+    const text = intlClose || resources.TEXT.close;
+    const dismissibleNode = dismissible ? (index.h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: resources.ICONS.close })) : null;
+    const slotNode = index.h("slot", { name: resources.SLOTS.headerTrailingContent });
+    return (index.h("div", { key: "header-trailing-content", class: resources.CSS.headerTrailingContent }, slotNode, dismissibleNode));
+  }
+  renderHeader() {
+    const headerLeadingContentNode = this.renderHeaderLeadingContent();
+    const headerContentNode = this.renderHeaderContent();
+    const headerTrailingContentNode = this.renderHeaderTrailingContent();
+    const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
+    return canDisplayHeader ? (index.h("header", { class: resources.CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const hasFooter = dom.getSlotted(el, resources.SLOTS.footer);
+    return hasFooter ? (index.h("footer", { class: resources.CSS.footer }, index.h("slot", { name: resources.SLOTS.footer }))) : null;
+  }
+  renderContent() {
+    return (index.h("section", { tabIndex: 0, class: resources.CSS.contentContainer, onScroll: this.panelScrollHandler }, index.h("slot", null), this.renderFab()));
+  }
+  renderFab() {
+    const hasFab = dom.getSlotted(this.el, resources.SLOTS.fab);
+    return hasFab ? (index.h("div", { class: resources.CSS.fabContainer }, index.h("slot", { name: resources.SLOTS.fab }))) : null;
+  }
+  render() {
+    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const rtl = dom.getElementDir(el) === "rtl";
+    const panelNode = (index.h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
+        [resources.CSS.container]: true,
+        [resources$1.CSS_UTILITY.rtl]: rtl
+      } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
+    return (index.h(index.Host, null, loading || disabled ? (index.h("calcite-scrim", { theme: dom.getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "dismissed": ["dismissedHandler"]
+  }; }
 };
@@ -124,0 +124,0 @@ CalcitePanel.style = calcitePanelCss;

dist/cjs/calcite-pick-list-group.cjs.entry.js

@@ -5,38 +5,39 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
 
 const CSS = {
-    heading: "heading",
-    container: "container",
-    indented: "container--indented"
+  heading: "heading",
+  container: "container",
+  indented: "container--indented"
 };
 const SLOTS = {
-    parentItem: "parent-item"
+  parentItem: "parent-item"
 };
 
-const calcitePickListGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
+const calcitePickListGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
 
 const CalcitePickListGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, textGroupTitle } = this;
-        const rtl = dom.getElementDir(el) === "rtl";
-        const hasParentItem = dom.getSlotted(el, SLOTS.parentItem) !== null;
-        const sectionClasses = {
-            [CSS.container]: true,
-            [CSS.indented]: hasParentItem,
-            [resources.CSS_UTILITY.rtl]: rtl
-        };
-        return (index.h(index.Host, null, textGroupTitle ? index.h("h3", { class: CSS.heading }, textGroupTitle) : null, index.h("slot", { name: SLOTS.parentItem }), index.h("section", { class: sectionClasses }, index.h("slot", null))));
-    }
-    get el() { return index.getElement(this); }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, groupTitle, textGroupTitle } = this;
+    const rtl = dom.getElementDir(el) === "rtl";
+    const hasParentItem = dom.getSlotted(el, SLOTS.parentItem) !== null;
+    const sectionClasses = {
+      [CSS.container]: true,
+      [CSS.indented]: hasParentItem,
+      [resources.CSS_UTILITY.rtl]: rtl
+    };
+    const title = groupTitle || textGroupTitle;
+    return (index.h(index.Host, null, title ? index.h("h3", { class: CSS.heading }, title) : null, index.h("slot", { name: SLOTS.parentItem }), index.h("section", { class: sectionClasses }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -43,0 +44,0 @@ CalcitePickListGroup.style = calcitePickListGroupCss;

dist/cjs/calcite-pick-list-item.cjs.entry.js

@@ -5,145 +5,149 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-d30f8d23.js');
-const resources$1 = require('./resources-2226849e.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources$1 = require('./resources-492cce22.js');
+const resources = require('./resources-78d932eb.js');
 
-const calcitePickListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;-ms-flex-align:center;align-items:center;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;margin:0;color:var(--calcite-app-foreground);-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);-ms-flex:0 0 0%;flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{-webkit-transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);-ms-flex-align:center;align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
+const calcitePickListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;align-items:center;background-color:var(--calcite-app-background-clear);display:flex;margin:0;color:var(--calcite-app-foreground);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:flex;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:flex;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{align-items:center;display:flex;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
 
 const CalcitePickListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteListItemChange = index.createEvent(this, "calciteListItemChange", 7);
-        this.calciteListItemRemove = index.createEvent(this, "calciteListItemRemove", 7);
-        this.calciteListItemPropsChange = index.createEvent(this, "calciteListItemPropsChange", 7);
-        this.calciteListItemValueChange = index.createEvent(this, "calciteListItemValueChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted.
-         */
-        this.disabled = false;
-        /**
-         * When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        /**
-         * The text for the remove item buttons. Only applicable if removable is true.
-         */
-        this.textRemove = resources$1.TEXT.remove;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.pickListClickHandler = (event) => {
-            if (this.disabled || (this.disableDeselect && this.selected)) {
-                return;
-            }
-            this.shiftPressed = event.shiftKey;
-            this.selected = !this.selected;
-        };
-        this.pickListKeyDownHandler = (event) => {
-            if (event.key === " ") {
-                event.preventDefault();
-                if (this.disableDeselect && this.selected) {
-                    return;
-                }
-                this.selected = !this.selected;
-            }
-        };
-        this.removeClickHandler = () => {
-            this.calciteListItemRemove.emit();
-        };
-    }
-    metadataWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    selectedWatchHandler() {
-        this.calciteListItemChange.emit({
-            item: this.el,
-            value: this.value,
-            selected: this.selected,
-            shiftPressed: this.shiftPressed
-        });
-        this.shiftPressed = false;
-    }
-    textDescriptionWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    textLabelWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    valueWatchHandler(newValue, oldValue) {
-        this.calciteListItemValueChange.emit({ oldValue, newValue });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteListItemChange = index.createEvent(this, "calciteListItemChange", 7);
+    this.calciteListItemRemove = index.createEvent(this, "calciteListItemRemove", 7);
+    this.calciteListItemPropsChange = index.createEvent(this, "calciteListItemPropsChange", 7);
+    this.calciteListItemValueChange = index.createEvent(this, "calciteListItemValueChange", 7);
     /**
-     * Used to toggle the selection state. By default this won't trigger an event.
-     * The first argument allows the value to be coerced, rather than swapping values.
+     * When true, the item cannot be clicked and is visually muted.
      */
-    async toggleSelected(coerce) {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
-    }
-    async setFocus() {
-        var _a;
-        (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+    this.disabled = false;
+    /**
+     * When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    /**
+     * The text for the remove item buttons. Only applicable if removable is true.
+     */
+    this.textRemove = resources.TEXT.remove;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderIcon() {
-        const { icon } = this;
-        if (!icon) {
-            return null;
+    this.pickListClickHandler = (event) => {
+      if (this.disabled || (this.disableDeselect && this.selected)) {
+        return;
+      }
+      this.shiftPressed = event.shiftKey;
+      this.selected = !this.selected;
+    };
+    this.pickListKeyDownHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if (this.disableDeselect && this.selected) {
+          return;
         }
-        const iconName = icon === resources.ICON_TYPES.circle ? resources$1.ICONS.circle : resources$1.ICONS.checked;
-        return (index.h("span", { class: resources$1.CSS.icon }, index.h("calcite-icon", { scale: "s", icon: iconName })));
+        this.selected = !this.selected;
+      }
+    };
+    this.removeClickHandler = () => {
+      this.calciteListItemRemove.emit();
+    };
+  }
+  descriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  labelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  metadataWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed
+    });
+    this.shiftPressed = false;
+  }
+  textDescriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  textLabelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  async toggleSelected(coerce) {
+    if (this.disabled) {
+      return;
     }
-    renderRemoveAction() {
-        if (!this.removable) {
-            return null;
-        }
-        return (index.h("calcite-action", { scale: "s", class: resources$1.CSS.remove, icon: resources$1.ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderIcon() {
+    const { icon } = this;
+    if (!icon) {
+      return null;
     }
-    renderSecondaryAction() {
-        const hasSecondaryAction = dom.getSlotted(this.el, resources$1.SLOTS.secondaryAction);
-        return hasSecondaryAction || this.removable ? (index.h("div", { class: resources$1.CSS.action }, index.h("slot", { name: resources$1.SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+    const iconName = icon === resources$1.ICON_TYPES.circle ? resources.ICONS.circle : resources.ICONS.checked;
+    return (index.h("span", { class: resources.CSS.icon }, index.h("calcite-icon", { scale: "s", icon: iconName })));
+  }
+  renderRemoveAction() {
+    if (!this.removable) {
+      return null;
     }
-    render() {
-        const description = this.textDescription ? (index.h("span", { class: resources$1.CSS.description }, this.textDescription)) : null;
-        return (index.h(index.Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, index.h("label", { class: resources$1.CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": this.textLabel }, this.renderIcon(), index.h("div", { class: resources$1.CSS.textContainer }, index.h("span", { class: resources$1.CSS.title }, this.textLabel), description)), this.renderSecondaryAction()));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "metadata": ["metadataWatchHandler"],
-        "selected": ["selectedWatchHandler"],
-        "textDescription": ["textDescriptionWatchHandler"],
-        "textLabel": ["textLabelWatchHandler"],
-        "value": ["valueWatchHandler"]
-    }; }
+    return (index.h("calcite-action", { scale: "s", class: resources.CSS.remove, icon: resources.ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+  }
+  renderSecondaryAction() {
+    const hasSecondaryAction = dom.getSlotted(this.el, resources.SLOTS.secondaryAction);
+    return hasSecondaryAction || this.removable ? (index.h("div", { class: resources.CSS.action }, index.h("slot", { name: resources.SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+  }
+  render() {
+    const description = this.description || this.textDescription;
+    const label = this.label || this.textLabel;
+    return (index.h(index.Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, index.h("label", { class: resources.CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": label }, this.renderIcon(), index.h("div", { class: resources.CSS.textContainer }, index.h("span", { class: resources.CSS.title }, label), description ? index.h("span", { class: resources.CSS.description }, description) : null)), this.renderSecondaryAction()));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "description": ["descriptionWatchHandler"],
+    "label": ["labelWatchHandler"],
+    "metadata": ["metadataWatchHandler"],
+    "selected": ["selectedWatchHandler"],
+    "textDescription": ["textDescriptionWatchHandler"],
+    "textLabel": ["textLabelWatchHandler"],
+    "value": ["valueWatchHandler"]
+  }; }
 };
@@ -150,0 +154,0 @@ CalcitePickListItem.style = calcitePickListItemCss;

dist/cjs/calcite-pick-list.cjs.entry.js

@@ -5,116 +5,118 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-require('./dom-59d13f9c.js');
-require('./array-d5ecc334.js');
-const resources = require('./resources-d30f8d23.js');
+const index = require('./index-dc491151.js');
+require('./dom-613dd356.js');
+require('./array-6fc4c87a.js');
+const resources = require('./resources-492cce22.js');
 require('./lodash-421a9445.js');
-const sharedListRender = require('./shared-list-render-62d5bbe5.js');
+const sharedListRender = require('./shared-list-render-00e64f94.js');
 
-const calcitePickListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-flow:column;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
+const calcitePickListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;flex:1 0 auto;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
 
 const CalcitePickList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteListChange = index.createEvent(this, "calciteListChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = resources.TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(sharedListRender.mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = sharedListRender.deselectSiblingItems.bind(this);
-        this.selectSiblings = sharedListRender.selectSiblings.bind(this);
-        this.handleFilter = sharedListRender.handleFilter.bind(this);
-        this.getItemData = sharedListRender.getItemData.bind(this);
-        this.keyDownHandler = sharedListRender.keyDownHandler.bind(this);
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteListChange = index.createEvent(this, "calciteListChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        sharedListRender.initialize.call(this);
-        sharedListRender.initializeObserver.call(this);
-    }
-    componentDidUnload() {
-        sharedListRender.cleanUpObserver.call(this);
-    }
-    calciteListItemChangeHandler(event) {
-        sharedListRender.calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        sharedListRender.calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = resources.TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        sharedListRender.setUpItems.call(this, "calcite-pick-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(sharedListRender.mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = sharedListRender.deselectSiblingItems.bind(this);
+    this.selectSiblings = sharedListRender.selectSiblings.bind(this);
+    this.handleFilter = sharedListRender.handleFilter.bind(this);
+    this.getItemData = sharedListRender.getItemData.bind(this);
+    this.keyDownHandler = sharedListRender.keyDownHandler.bind(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    sharedListRender.initialize.call(this);
+    sharedListRender.initializeObserver.call(this);
+  }
+  disconnectedCallback() {
+    sharedListRender.cleanUpObserver.call(this);
+  }
+  calciteListItemChangeHandler(event) {
+    sharedListRender.calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    sharedListRender.calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    sharedListRender.setUpItems.call(this, "calcite-pick-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return sharedListRender.setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        return this.multiple ? resources.ICON_TYPES.square : resources.ICON_TYPES.circle;
-    }
-    render() {
-        return index.h(sharedListRender.List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return index.getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return sharedListRender.setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    return this.multiple ? resources.ICON_TYPES.square : resources.ICON_TYPES.circle;
+  }
+  render() {
+    return index.h(sharedListRender.List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return index.getElement(this); }
 };
@@ -121,0 +123,0 @@ CalcitePickList.style = calcitePickListCss;

dist/cjs/calcite-shell-center-row.cjs.entry.js

@@ -5,55 +5,55 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
-const resources = require('./resources-c6a212f8.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
+const resources = require('./resources-9ca8c950.js');
 
 const CSS = {
-    actionBarContainer: "action-bar-container",
-    content: "content"
+  actionBarContainer: "action-bar-container",
+  content: "content"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellCenterRowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;overflow:hidden;-webkit-transition:height var(--calcite-app-animation-time) ease-in-out;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:-ms-flexbox;display:flex;-ms-flex:1 0 0px;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:-ms-flexbox;display:flex}:host([detached]){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){-ms-flex-item-align:end;align-self:flex-end}:host([position=start]){-ms-flex-item-align:start;align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
+const calciteShellCenterRowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;overflow:hidden;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:flex;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:flex}:host([detached]){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){align-self:flex-end}:host([position=start]){align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
 
 const CalciteShellCenterRow = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * Specifies the maxiumum height of the row.
-         */
-        this.heightScale = "s";
-        /**
-         * Arranges the component depending on the elements 'dir' property.
-         */
-        this.position = "end";
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { el } = this;
-        const rtl = dom.getElementDir(el) === "rtl";
-        const contentNode = (index.h("div", { class: { [CSS.content]: true, [resources.CSS_UTILITY.rtl]: rtl } }, index.h("slot", null)));
-        const actionBar = dom.getSlotted(el, SLOTS.actionBar);
-        const actionBarNode = actionBar ? (index.h("div", { class: { [CSS.actionBarContainer]: true, [resources.CSS_UTILITY.rtl]: rtl } }, index.h("slot", { name: SLOTS.actionBar }))) : null;
-        const children = [actionBarNode, contentNode];
-        if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
-            children.reverse();
-        }
-        return index.h(index.Host, null, children);
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * Specifies the maxiumum height of the row.
+     */
+    this.heightScale = "s";
+    /**
+     * Arranges the component depending on the elements 'dir' property.
+     */
+    this.position = "end";
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el } = this;
+    const rtl = dom.getElementDir(el) === "rtl";
+    const contentNode = (index.h("div", { class: { [CSS.content]: true, [resources.CSS_UTILITY.rtl]: rtl } }, index.h("slot", null)));
+    const actionBar = dom.getSlotted(el, SLOTS.actionBar);
+    const actionBarNode = actionBar ? (index.h("div", { class: { [CSS.actionBarContainer]: true, [resources.CSS_UTILITY.rtl]: rtl } }, index.h("slot", { name: SLOTS.actionBar }))) : null;
+    const children = [actionBarNode, contentNode];
+    if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
+      children.reverse();
     }
-    get el() { return index.getElement(this); }
+    return index.h(index.Host, null, children);
+  }
+  get el() { return index.getElement(this); }
 };
@@ -60,0 +60,0 @@ CalciteShellCenterRow.style = calciteShellCenterRowCss;

dist/cjs/calcite-shell-panel.cjs.entry.js

@@ -5,57 +5,57 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 
 const CSS = {
-    content: "content",
-    contentDetached: "content--detached"
+  content: "content",
+  contentDetached: "content--detached"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellPanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);-ms-flex-flow:column nowrap;flex-flow:column nowrap;display:-ms-flexbox;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
+const calciteShellPanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{align-items:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);flex-flow:column nowrap;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
 
 const CalciteShellPanel = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteShellPanelToggle = index.createEvent(this, "calciteShellPanelToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hide the content panel.
-         */
-        this.collapsed = false;
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * This sets limits the height of the content area. It only applies when detached is true.
-         */
-        this.detachedScale = "m";
-    }
-    watchHandler() {
-        this.calciteShellPanelToggle.emit();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteShellPanelToggle = index.createEvent(this, "calciteShellPanelToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { collapsed, detached, position } = this;
-        const contentNode = (index.h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, index.h("slot", null)));
-        const actionBarNode = index.h("slot", { name: SLOTS.actionBar });
-        const mainNodes = [actionBarNode, contentNode];
-        if (position === "end") {
-            mainNodes.reverse();
-        }
-        return index.h(index.Host, null, mainNodes);
+    /**
+     * Hide the content panel.
+     */
+    this.collapsed = false;
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * This sets limits the height of the content area. It only applies when detached is true.
+     */
+    this.detachedScale = "m";
+  }
+  watchHandler() {
+    this.calciteShellPanelToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { collapsed, detached, position } = this;
+    const contentNode = (index.h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, index.h("slot", null)));
+    const actionBarNode = index.h("slot", { name: SLOTS.actionBar });
+    const mainNodes = [actionBarNode, contentNode];
+    if (position === "end") {
+      mainNodes.reverse();
     }
-    static get watchers() { return {
-        "collapsed": ["watchHandler"]
-    }; }
+    return index.h(index.Host, null, mainNodes);
+  }
+  static get watchers() { return {
+    "collapsed": ["watchHandler"]
+  }; }
 };
@@ -62,0 +62,0 @@ CalciteShellPanel.style = calciteShellPanelCss;

dist/cjs/calcite-shell.cjs.entry.js

@@ -5,53 +5,53 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
 
 const CSS = {
-    main: "main",
-    mainReversed: "main--reversed",
-    content: "content",
-    footer: "footer"
+  main: "main",
+  mainReversed: "main--reversed",
+  content: "content",
+  footer: "footer"
 };
 const SLOTS = {
-    centerRow: "center-row",
-    primaryPanel: "primary-panel",
-    contextualPanel: "contextual-panel",
-    header: "shell-header",
-    footer: "shell-footer"
+  centerRow: "center-row",
+  primaryPanel: "primary-panel",
+  contextualPanel: "contextual-panel",
+  header: "shell-header",
+  footer: "shell-footer"
 };
 
-const calciteShellCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.main--reversed{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);-webkit-box-sizing:border-box;box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
+const calciteShellCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;flex:1 1 auto;display:flex;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);justify-content:space-between;overflow:hidden}.main--reversed{flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);box-shadow:var(--calcite-app-shadow-2);box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
 
 const CalciteShell = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHeader() {
-        const hasHeader = !!dom.getSlotted(this.el, SLOTS.header);
-        return hasHeader ? index.h("slot", { name: SLOTS.header }) : null;
-    }
-    renderContent() {
-        return (index.h("div", { class: CSS.content }, index.h("slot", null)));
-    }
-    renderFooter() {
-        const hasFooter = !!dom.getSlotted(this.el, SLOTS.footer);
-        return hasFooter ? (index.h("div", { class: CSS.footer }, index.h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderMain() {
-        const primaryPanel = dom.getSlotted(this.el, SLOTS.primaryPanel);
-        const mainClasses = {
-            [CSS.main]: true,
-            [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
-        };
-        return (index.h("div", { class: mainClasses }, index.h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), index.h("slot", { name: SLOTS.centerRow }), index.h("slot", { name: SLOTS.contextualPanel })));
-    }
-    render() {
-        return (index.h(index.Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
-    }
-    get el() { return index.getElement(this); }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const hasHeader = !!dom.getSlotted(this.el, SLOTS.header);
+    return hasHeader ? index.h("slot", { name: SLOTS.header }) : null;
+  }
+  renderContent() {
+    return (index.h("div", { class: CSS.content }, index.h("slot", null)));
+  }
+  renderFooter() {
+    const hasFooter = !!dom.getSlotted(this.el, SLOTS.footer);
+    return hasFooter ? (index.h("div", { class: CSS.footer }, index.h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderMain() {
+    const primaryPanel = dom.getSlotted(this.el, SLOTS.primaryPanel);
+    const mainClasses = {
+      [CSS.main]: true,
+      [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
+    };
+    return (index.h("div", { class: mainClasses }, index.h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), index.h("slot", { name: SLOTS.centerRow }), index.h("slot", { name: SLOTS.contextualPanel })));
+  }
+  render() {
+    return (index.h(index.Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -58,0 +58,0 @@ CalciteShell.style = calciteShellCss;

dist/cjs/calcite-sortable-list.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 const sortable_esm = require('./sortable.esm-500a5630.js');
@@ -12,128 +12,128 @@
 const CalciteSortableList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * The class on the handle elements.
-         */
-        this.handleSelector = "calcite-handle";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        this.handleActivated = false;
-        this.items = [];
-        this.observer = new MutationObserver(() => {
-            this.cleanUpDragAndDrop();
-            this.items = Array.from(this.el.children);
-            this.setUpDragAndDrop();
-        });
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.items = Array.from(this.el.children);
-        this.setUpDragAndDrop();
-        this.beginObserving();
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-        this.cleanUpDragAndDrop();
-    }
-    calciteHandleNudgeHandler(event) {
-        const sortItem = this.items.find((item) => {
-            return item.contains(event.detail.handle) || event.composedPath().includes(item);
-        });
-        const lastIndex = this.items.length - 1;
-        const startingIndex = this.items.indexOf(sortItem);
-        let appendInstead = false;
-        let buddyIndex;
-        switch (event.detail.direction) {
-            case "up":
-                event.preventDefault();
-                if (startingIndex === 0) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex - 1;
-                }
-                break;
-            case "down":
-                event.preventDefault();
-                if (startingIndex === lastIndex) {
-                    buddyIndex = 0;
-                }
-                else if (startingIndex === lastIndex - 1) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex + 2;
-                }
-                break;
-            default:
-                return;
+    /**
+     * The class on the handle elements.
+     */
+    this.handleSelector = "calcite-handle";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    this.handleActivated = false;
+    this.items = [];
+    this.observer = new MutationObserver(() => {
+      this.cleanUpDragAndDrop();
+      this.items = Array.from(this.el.children);
+      this.setUpDragAndDrop();
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.items = Array.from(this.el.children);
+    this.setUpDragAndDrop();
+    this.beginObserving();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.cleanUpDragAndDrop();
+  }
+  calciteHandleNudgeHandler(event) {
+    const sortItem = this.items.find((item) => {
+      return item.contains(event.detail.handle) || event.composedPath().includes(item);
+    });
+    const lastIndex = this.items.length - 1;
+    const startingIndex = this.items.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    switch (event.detail.direction) {
+      case "up":
+        event.preventDefault();
+        if (startingIndex === 0) {
+          appendInstead = true;
         }
-        this.observer.disconnect();
-        if (appendInstead) {
-            sortItem.parentElement.appendChild(sortItem);
+        else {
+          buddyIndex = startingIndex - 1;
         }
+        break;
+      case "down":
+        event.preventDefault();
+        if (startingIndex === lastIndex) {
+          buddyIndex = 0;
+        }
+        else if (startingIndex === lastIndex - 1) {
+          appendInstead = true;
+        }
         else {
-            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+          buddyIndex = startingIndex + 2;
         }
-        this.items = Array.from(this.el.children);
-        event.detail.handle.activated = true;
-        event.detail.handle.setFocus();
-        this.beginObserving();
+        break;
+      default:
+        return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpDragAndDrop() {
-        this.sortable = sortable_esm.Sortable.create(this.el, {
-            handle: this.handleSelector,
-            // Changed sorting within list
-            onUpdate: () => {
-                this.items = Array.from(this.el.children);
-                this.calciteListOrderChange.emit();
-            },
-            // Element dragging started
-            onStart: () => {
-                this.observer.disconnect();
-            },
-            // Element dragging ended
-            onEnd: () => {
-                this.beginObserving();
-            }
-        });
+    this.observer.disconnect();
+    if (appendInstead) {
+      sortItem.parentElement.appendChild(sortItem);
     }
-    cleanUpDragAndDrop() {
-        this.sortable.destroy();
-        this.sortable = null;
+    else {
+      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
-    beginObserving() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (index.h(index.Host, null, index.h("slot", null)));
-    }
-    get el() { return index.getElement(this); }
+    this.items = Array.from(this.el.children);
+    event.detail.handle.activated = true;
+    event.detail.handle.setFocus();
+    this.beginObserving();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpDragAndDrop() {
+    this.sortable = sortable_esm.Sortable.create(this.el, {
+      handle: this.handleSelector,
+      // Changed sorting within list
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
+      },
+      // Element dragging started
+      onStart: () => {
+        this.observer.disconnect();
+      },
+      // Element dragging ended
+      onEnd: () => {
+        this.beginObserving();
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    this.sortable.destroy();
+    this.sortable = null;
+  }
+  beginObserving() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -140,0 +140,0 @@ CalciteSortableList.style = calciteSortableListCss;

dist/cjs/calcite-tip-group.cjs.entry.js

@@ -5,13 +5,13 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
+const index = require('./index-dc491151.js');
 
-const calciteTipGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return index.h("slot", null);
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return index.h("slot", null);
+  }
 };
@@ -18,0 +18,0 @@ CalciteTipGroup.style = calciteTipGroupCss;

dist/cjs/calcite-tip-manager.cjs.entry.js

@@ -5,181 +5,181 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
 
 const CSS = {
-    header: "header",
-    heading: "heading",
-    close: "close",
-    container: "container",
-    tipContainer: "tip-container",
-    tipContainerAdvancing: "tip-container--advancing",
-    tipContainerRetreating: "tip-container--retreating",
-    pagination: "pagination",
-    pagePosition: "page-position",
-    pageNext: "page-next",
-    pagePrevious: "page-previous"
+  header: "header",
+  heading: "heading",
+  close: "close",
+  container: "container",
+  tipContainer: "tip-container",
+  tipContainerAdvancing: "tip-container--advancing",
+  tipContainerRetreating: "tip-container--retreating",
+  pagination: "pagination",
+  pagePosition: "page-position",
+  pageNext: "page-next",
+  pagePrevious: "page-previous"
 };
 const ICONS = {
-    chevronLeft: "chevron-left",
-    chevronRight: "chevron-right",
-    close: "x"
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  close: "x"
 };
 const TEXT = {
-    defaultGroupTitle: "Tips",
-    defaultPaginationLabel: "Tip",
-    close: "Close",
-    previous: "Previous",
-    next: "Next"
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
 };
 
-const calciteTipManagerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@-webkit-keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{-webkit-animation-name:none;animation-name:none;-webkit-animation-duration:var(--calcite-app-animation-time);animation-duration:var(--calcite-app-animation-time);-webkit-animation-timing-function:var(--calcite-app-easing-function);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{-webkit-animation-name:tip-advance;animation-name:tip-advance}.tip-container--retreating{-webkit-animation-name:tip-retreat;animation-name:tip-retreat}.pagination{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipManagerCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{animation-name:none;animation-duration:var(--calcite-app-animation-time);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:flex;justify-content:center;align-items:flex-start;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipManager = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteTipManagerToggle = index.createEvent(this, "calciteTipManagerToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Alternate text for closing the `calcite-tip-manager`.
-         */
-        this.closed = false;
-        this.observer = new MutationObserver(() => this.setUpTips());
-        this.hideTipManager = () => {
-            this.closed = true;
-            this.calciteTipManagerToggle.emit();
-        };
-        this.previousClicked = () => {
-            this.previousTip();
-        };
-        this.nextClicked = () => {
-            this.nextTip();
-        };
-        this.tipManagerKeyUpHandler = (event) => {
-            if (event.target !== this.container) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowRight":
-                    event.preventDefault();
-                    this.nextTip();
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    this.previousTip();
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    this.selectedIndex = 0;
-                    break;
-                case "End":
-                    event.preventDefault();
-                    this.selectedIndex = this.total - 1;
-                    break;
-            }
-        };
-        this.storeContainerRef = (el) => {
-            this.container = el;
-        };
-    }
-    closedChangeHandler() {
-        this.direction = null;
-        this.calciteTipManagerToggle.emit();
-    }
-    selectedChangeHandler() {
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteTipManagerToggle = index.createEvent(this, "calciteTipManagerToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.setUpTips();
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    /**
+     * Alternate text for closing the `calcite-tip-manager`.
+     */
+    this.closed = false;
+    this.observer = new MutationObserver(() => this.setUpTips());
+    this.hideTipManager = () => {
+      this.closed = true;
+      this.calciteTipManagerToggle.emit();
+    };
+    this.previousClicked = () => {
+      this.previousTip();
+    };
+    this.nextClicked = () => {
+      this.nextTip();
+    };
+    this.tipManagerKeyUpHandler = (event) => {
+      if (event.target !== this.container) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          this.nextTip();
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          this.previousTip();
+          break;
+        case "Home":
+          event.preventDefault();
+          this.selectedIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          this.selectedIndex = this.total - 1;
+          break;
+      }
+    };
+    this.storeContainerRef = (el) => {
+      this.container = el;
+    };
+  }
+  closedChangeHandler() {
+    this.direction = null;
+    this.calciteTipManagerToggle.emit();
+  }
+  selectedChangeHandler() {
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setUpTips();
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async nextTip() {
+    this.direction = "advancing";
+    const nextIndex = this.selectedIndex + 1;
+    this.selectedIndex = (nextIndex + this.total) % this.total;
+  }
+  async previousTip() {
+    this.direction = "retreating";
+    const previousIndex = this.selectedIndex - 1;
+    this.selectedIndex = (previousIndex + this.total) % this.total;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpTips() {
+    const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
+    this.total = tips.length;
+    if (this.total === 0) {
+      return;
     }
-    componentDidUnload() {
-        this.observer.disconnect();
+    const selectedTip = this.el.querySelector("calcite-tip[selected]");
+    this.tips = tips;
+    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
+    tips.forEach((tip) => {
+      tip.nonDismissible = true;
+    });
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  showSelectedTip() {
+    this.tips.forEach((tip, index) => {
+      const isSelected = this.selectedIndex === index;
+      tip.selected = isSelected;
+      tip.hidden = !isSelected;
+    });
+  }
+  updateGroupTitle() {
+    const selectedTip = this.tips[this.selectedIndex];
+    const tipParent = selectedTip.closest("calcite-tip-group");
+    this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.groupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderPagination() {
+    const dir = dom.getElementDir(this.el);
+    const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+    const nextLabel = intlNext || TEXT.next;
+    const previousLabel = intlPrevious || TEXT.previous;
+    const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+    return tips.length > 1 ? (index.h("footer", { class: CSS.pagination }, index.h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), index.h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), index.h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
+  }
+  render() {
+    const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
+    const closeLabel = intlClose || TEXT.close;
+    if (total === 0) {
+      return index.h(index.Host, null);
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async nextTip() {
-        this.direction = "advancing";
-        const nextIndex = this.selectedIndex + 1;
-        this.selectedIndex = (nextIndex + this.total) % this.total;
-    }
-    async previousTip() {
-        this.direction = "retreating";
-        const previousIndex = this.selectedIndex - 1;
-        this.selectedIndex = (previousIndex + this.total) % this.total;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpTips() {
-        const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
-        this.total = tips.length;
-        if (this.total === 0) {
-            return;
-        }
-        const selectedTip = this.el.querySelector("calcite-tip[selected]");
-        this.tips = tips;
-        this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
-        tips.forEach((tip) => {
-            tip.nonDismissible = true;
-        });
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
-    showSelectedTip() {
-        this.tips.forEach((tip, index) => {
-            const isSelected = this.selectedIndex === index;
-            tip.selected = isSelected;
-            tip.hidden = !isSelected;
-        });
-    }
-    updateGroupTitle() {
-        const selectedTip = this.tips[this.selectedIndex];
-        const tipParent = selectedTip.closest("calcite-tip-group");
-        this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.textGroupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderPagination() {
-        const dir = dom.getElementDir(this.el);
-        const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
-        const nextLabel = intlNext || TEXT.next;
-        const previousLabel = intlPrevious || TEXT.previous;
-        const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
-        return tips.length > 1 ? (index.h("footer", { class: CSS.pagination }, index.h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), index.h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), index.h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
-    }
-    render() {
-        const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
-        const closeLabel = intlClose || TEXT.close;
-        if (total === 0) {
-            return index.h(index.Host, null);
-        }
-        return (index.h(index.Host, null, index.h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, index.h("header", { class: CSS.header }, index.h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), index.h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), index.h("div", { tabIndex: 0, class: {
-                [CSS.tipContainer]: true,
-                [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
-                [CSS.tipContainerRetreating]: !closed && direction === "retreating"
-            }, key: selectedIndex }, index.h("slot", null)), this.renderPagination())));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "closed": ["closedChangeHandler"],
-        "selectedIndex": ["selectedChangeHandler"]
-    }; }
+    return (index.h(index.Host, null, index.h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, index.h("header", { class: CSS.header }, index.h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), index.h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), index.h("div", { tabIndex: 0, class: {
+        [CSS.tipContainer]: true,
+        [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
+        [CSS.tipContainerRetreating]: !closed && direction === "retreating"
+      }, key: selectedIndex }, index.h("slot", null)), this.renderPagination())));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "closed": ["closedChangeHandler"],
+    "selectedIndex": ["selectedChangeHandler"]
+  }; }
 };
@@ -186,0 +186,0 @@ CalciteTipManager.style = calciteTipManagerCss;

dist/cjs/calcite-tip.cjs.entry.js

@@ -5,79 +5,79 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const dom = require('./dom-59d13f9c.js');
+const index = require('./index-dc491151.js');
+const dom = require('./dom-613dd356.js');
 
 const CSS = {
-    container: "container",
-    header: "header",
-    heading: "heading",
-    close: "close",
-    imageFrame: "image-frame",
-    content: "content",
-    info: "info"
+  container: "container",
+  header: "header",
+  heading: "heading",
+  close: "close",
+  imageFrame: "image-frame",
+  content: "content",
+  info: "info"
 };
 const ICONS = {
-    close: "x"
+  close: "x"
 };
 const SLOTS = {
-    thumbnail: "thumbnail"
+  thumbnail: "thumbnail"
 };
 const TEXT = {
-    close: "Close"
+  close: "Close"
 };
 
-const calciteTipCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{-webkit-box-shadow:none;box-shadow:none;margin:0;padding:0}.header{-ms-flex-pack:end;justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:-ms-flexbox;display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
+const calciteTipCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{position:relative;display:flex;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{box-shadow:none;margin:0;padding:0}.header{justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
 
 const CalciteTip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteTipDismiss = index.createEvent(this, "calciteTipDismiss", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * No longer displays the tip.
-         */
-        this.dismissed = false;
-        /**
-         * Indicates whether the tip can be dismissed.
-         */
-        this.nonDismissible = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.hideTip = () => {
-            this.dismissed = true;
-            this.calciteTipDismiss.emit();
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteTipDismiss = index.createEvent(this, "calciteTipDismiss", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderHeader() {
-        const { nonDismissible, hideTip, intlClose, heading } = this;
-        const text = intlClose || TEXT.close;
-        const dismissButtonNode = !nonDismissible ? (index.h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
-        const headingNode = heading ? index.h("h3", { class: CSS.heading }, heading) : null;
-        return dismissButtonNode || headingNode ? (index.h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
-    }
-    renderImageFrame() {
-        const { el } = this;
-        return dom.getSlotted(el, SLOTS.thumbnail) ? (index.h("div", { class: CSS.imageFrame }, index.h("slot", { name: SLOTS.thumbnail }))) : null;
-    }
-    renderInfoNode() {
-        return (index.h("div", { class: CSS.info }, index.h("slot", null)));
-    }
-    renderContent() {
-        return (index.h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
-    }
-    render() {
-        return (index.h(index.Host, null, index.h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
-    }
-    get el() { return index.getElement(this); }
+    /**
+     * No longer displays the tip.
+     */
+    this.dismissed = false;
+    /**
+     * Indicates whether the tip can be dismissed.
+     */
+    this.nonDismissible = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.hideTip = () => {
+      this.dismissed = true;
+      this.calciteTipDismiss.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const { nonDismissible, hideTip, intlClose, heading } = this;
+    const text = intlClose || TEXT.close;
+    const dismissButtonNode = !nonDismissible ? (index.h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
+    const headingNode = heading ? index.h("h3", { class: CSS.heading }, heading) : null;
+    return dismissButtonNode || headingNode ? (index.h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
+  }
+  renderImageFrame() {
+    const { el } = this;
+    return dom.getSlotted(el, SLOTS.thumbnail) ? (index.h("div", { class: CSS.imageFrame }, index.h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderInfoNode() {
+    return (index.h("div", { class: CSS.info }, index.h("slot", null)));
+  }
+  renderContent() {
+    return (index.h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -84,0 +84,0 @@ CalciteTip.style = calciteTipCss;

dist/cjs/calcite-value-list-item.cjs.entry.js

@@ -5,101 +5,96 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const guid = require('./guid-637b2e0b.js');
-const resources = require('./resources-d30f8d23.js');
-const resources$1 = require('./resources-2226849e.js');
+const index = require('./index-dc491151.js');
+const guid = require('./guid-58dbdaea.js');
+const resources = require('./resources-492cce22.js');
+const resources$1 = require('./resources-78d932eb.js');
 
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteValueListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:-ms-flexbox;display:flex;-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{-webkit-box-shadow:none;box-shadow:none;-ms-flex-positive:1;flex-grow:1;position:relative;margin:0}:host([selected]){-webkit-box-shadow:0 0 0 1px var(--calcite-app-border-active) inset;box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
+const calciteValueListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:flex;transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{box-shadow:none;flex-grow:1;position:relative;margin:0}:host([selected]){box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
 
 const CalciteValueListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted
-         */
-        this.disabled = false;
-        /**
-         * @internal When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.handleActivated = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        this.pickListItem = null;
-        this.guid = `calcite-value-list-item-${guid.guid()}`;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.getPickListRef = (el) => (this.pickListItem = el);
-        this.handleKeyDown = (event) => {
-            if (event.key === " ") {
-                this.handleActivated = !this.handleActivated;
-            }
-        };
-        this.handleBlur = () => {
-            this.handleActivated = false;
-        };
-        this.handleSelectChange = (event) => {
-            this.selected = event.detail.selected;
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * When true, the item cannot be clicked and is visually muted
+     */
+    this.disabled = false;
+    /**
+     * @internal When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.handleActivated = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid.guid()}`;
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    async toggleSelected(coerce) {
-        this.pickListItem.toggleSelected(coerce);
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  // --------------------------------------------------------------------------
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHandle() {
+    const { icon } = this;
+    if (icon === resources.ICON_TYPES.grip) {
+      return (index.h("span", { role: "button", class: { [resources$1.CSS.handle]: true, [resources$1.CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, index.h("calcite-icon", { scale: "s", icon: ICONS.drag })));
     }
-    async setFocus() {
-        var _a;
-        (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Events
-    //
-    // --------------------------------------------------------------------------
-    calciteListItemChangeHandler(event) {
-        // adjust item payload from wrapped item before bubbling
-        event.detail.item = this.el;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHandle() {
-        const { icon } = this;
-        if (icon === resources.ICON_TYPES.grip) {
-            return (index.h("span", { role: "button", class: { [resources$1.CSS.handle]: true, [resources$1.CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, index.h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-        }
-    }
-    render() {
-        return (index.h(index.Host, { "data-id": this.guid }, this.renderHandle(), index.h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.textLabel, textDescription: this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, index.h("slot", { name: "secondary-action", slot: "secondary-action" }))));
-    }
-    get el() { return index.getElement(this); }
+  }
+  render() {
+    return (index.h(index.Host, { "data-id": this.guid }, this.renderHandle(), index.h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.label || this.textLabel, textDescription: this.description || this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, index.h("slot", { name: "secondary-action", slot: "secondary-action" }))));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -106,0 +101,0 @@ CalciteValueListItem.style = calciteValueListItemCss;

dist/cjs/calcite-value-list.cjs.entry.js

@@ -5,195 +5,197 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-require('./dom-59d13f9c.js');
-const array = require('./array-d5ecc334.js');
-require('./resources-d30f8d23.js');
+const index = require('./index-dc491151.js');
+require('./dom-613dd356.js');
+const array = require('./array-6fc4c87a.js');
+require('./resources-492cce22.js');
 require('./lodash-421a9445.js');
-const sharedListRender = require('./shared-list-render-62d5bbe5.js');
+const sharedListRender = require('./shared-list-render-00e64f94.js');
 const sortable_esm = require('./sortable.esm-500a5630.js');
 
 const CSS = {
-    container: "container",
-    handle: "handle"
+  container: "container",
+  handle: "handle"
 };
 var ICON_TYPES;
 (function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 const TEXT = {
-    filterPlaceholder: "Filter results"
+  filterResults: "Filter results"
 };
 
-const calciteValueListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{-webkit-box-shadow:none;box-shadow:none}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteValueListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;background-color:var(--calcite-app-background-clear);display:flex;flex:0 0 auto;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{box-shadow:none}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteValueList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteListChange = index.createEvent(this, "calciteListChange", 7);
-        this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, the items will be sortable via drag and drop.
-         */
-        this.dragEnabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple Works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(sharedListRender.mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = sharedListRender.deselectSiblingItems.bind(this);
-        this.selectSiblings = sharedListRender.selectSiblings.bind(this);
-        this.handleFilter = sharedListRender.handleFilter.bind(this);
-        this.getItemData = sharedListRender.getItemData.bind(this);
-        this.keyDownHandler = (event) => {
-            const handleElement = event
-                .composedPath()
-                .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
-            const item = event
-                .composedPath()
-                .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-            // Only trigger keyboard sorting when the internal drag handle is focused and activated
-            if (!handleElement || !item.handleActivated) {
-                sharedListRender.keyDownHandler.call(this, event);
-                return;
-            }
-            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
-                return;
-            }
-            event.preventDefault();
-            const { el, items } = this;
-            const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-            const currentIndex = items.indexOf(item);
-            const nextIndex = array.getRoundRobinIndex(currentIndex + moveOffset, items.length);
-            if (nextIndex === items.length - 1) {
-                el.appendChild(item);
-            }
-            else {
-                const itemAtNextIndex = el.children[nextIndex];
-                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
-                    ? itemAtNextIndex.nextElementSibling
-                    : itemAtNextIndex;
-                el.insertBefore(item, insertionReferenceItem);
-            }
-            requestAnimationFrame(() => handleElement.focus());
-            item.handleActivated = true;
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteListChange = index.createEvent(this, "calciteListChange", 7);
+    this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        sharedListRender.initialize.call(this);
-        sharedListRender.initializeObserver.call(this);
-    }
-    componentDidLoad() {
-        this.setUpDragAndDrop();
-    }
-    componentDidUnload() {
-        sharedListRender.cleanUpObserver.call(this);
-        this.cleanUpDragAndDrop();
-    }
-    calciteListItemChangeHandler(event) {
-        sharedListRender.calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        sharedListRender.calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, the items will be sortable via drag and drop.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple Works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        sharedListRender.setUpItems.call(this, "calcite-value-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(sharedListRender.mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = sharedListRender.deselectSiblingItems.bind(this);
+    this.selectSiblings = sharedListRender.selectSiblings.bind(this);
+    this.handleFilter = sharedListRender.handleFilter.bind(this);
+    this.getItemData = sharedListRender.getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      const handleElement = event
+        .composedPath()
+        .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
+      const item = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+      // Only trigger keyboard sorting when the internal drag handle is focused and activated
+      if (!handleElement || !item.handleActivated) {
+        sharedListRender.keyDownHandler.call(this, event);
+        return;
+      }
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const { el, items } = this;
+      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+      const currentIndex = items.indexOf(item);
+      const nextIndex = array.getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      requestAnimationFrame(() => handleElement.focus());
+      item.handleActivated = true;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    sharedListRender.initialize.call(this);
+    sharedListRender.initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  disconnectedCallback() {
+    sharedListRender.cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListItemChangeHandler(event) {
+    sharedListRender.calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    sharedListRender.calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    sharedListRender.setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
+  }
+  setUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    setUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable = sortable_esm.Sortable.create(this.el, {
-            handle: `.${CSS.handle}`,
-            draggable: "calcite-value-list-item",
-            group: this.group,
-            onSort: () => {
-                this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-                const values = this.items.map((item) => item.value);
-                this.calciteListOrderChange.emit(values);
-            }
-        });
+    this.sortable = sortable_esm.Sortable.create(this.el, {
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    cleanUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable.destroy();
+    this.sortable.destroy();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return sharedListRender.setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return sharedListRender.setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        let type = null;
-        if (this.dragEnabled) {
-            type = ICON_TYPES.grip;
-        }
-        return type;
-    }
-    render() {
-        return index.h(sharedListRender.List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return index.getElement(this); }
+    return type;
+  }
+  render() {
+    return index.h(sharedListRender.List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return index.getElement(this); }
 };
@@ -200,0 +202,0 @@ CalciteValueList.style = calciteValueListCss;

dist/cjs/loader.cjs.js

@@ -5,10 +5,31 @@ 'use strict';
 
-const index = require('./index-ce610515.js');
-const appGlobals = require('./app-globals-a8f32b85.js');
+const index = require('./index-dc491151.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
+/*
+ Stencil Client Patch Esm v2.0.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    // NOTE!! This fn cannot use async/await!
+    // @ts-ignore
+    if (index.BUILD.cssVarShim && !(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-f59a40c5.js'); }).then(() => {
+            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
+                return index.plt.$cssShim$.i();
+            }
+            else {
+                // for better minification
+                return 0;
+            }
+        });
+    }
+    return index.promiseResolve();
+};
+
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return appGlobals.patchEsm().then(() => {
+  return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["calcite-action-bar.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad.cjs",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item.cjs",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item.cjs",[[1,"calcite-value-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block.cjs",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section.cjs",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip.cjs",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager.cjs",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list.cjs",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab.cjs",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow.cjs",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell.cjs",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row.cjs",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel.cjs",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list.cjs",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group.cjs",[[1,"calcite-tip-group",{"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel.cjs",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle.cjs",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group.cjs",[[1,"calcite-action-group"]]],["calcite-filter.cjs",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action.cjs",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["calcite-action-bar.cjs",[[1,"calcite-action-bar",{"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-action-pad.cjs",[[1,"calcite-action-pad",{"layout":[513],"expand":[516],"expanded":[516],"tooltipExpand":[16],"intlExpand":[1,"intl-expand"],"intlCollapse":[1,"intl-collapse"],"position":[513],"theme":[513]}]]],["calcite-flow-item.cjs",[[1,"calcite-flow-item",{"beforeBack":[16],"disabled":[516],"heightScale":[513,"height-scale"],"heading":[1],"loading":[516],"menuOpen":[516,"menu-open"],"showBackButton":[4,"show-back-button"],"summary":[1],"intlBack":[1,"intl-back"],"intlClose":[1,"intl-close"],"intlOpen":[1,"intl-open"],"theme":[513]},[[0,"calcitePanelScroll","handleCalcitePanelScroll"]]]]],["calcite-value-list-item.cjs",[[1,"calcite-value-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"handleActivated":[1028,"handle-activated"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textLabel":[513,"text-label"],"textDescription":[513,"text-description"],"value":[513],"toggleSelected":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"]]]]],["calcite-block.cjs",[[1,"calcite-block",{"collapsible":[4],"disabled":[516],"dragHandle":[516,"drag-handle"],"heading":[1],"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"loading":[516],"open":[516],"summary":[1],"theme":[513]}]]],["calcite-block-section.cjs",[[1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[516],"text":[1],"toggleDisplay":[513,"toggle-display"]}]]],["calcite-pick-list.cjs",[[1,"calcite-pick-list",{"disabled":[516],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-tip.cjs",[[1,"calcite-tip",{"dismissed":[1028],"nonDismissible":[516,"non-dismissible"],"heading":[1],"selected":[516],"intlClose":[1,"intl-close"],"theme":[513]}]]],["calcite-tip-manager.cjs",[[1,"calcite-tip-manager",{"closed":[516],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"theme":[513],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32],"nextTip":[64],"previousTip":[64]}]]],["calcite-value-list.cjs",[[1,"calcite-value-list",{"disabled":[516],"dragEnabled":[516,"drag-enabled"],"filterEnabled":[516,"filter-enabled"],"filterPlaceholder":[513,"filter-placeholder"],"group":[1],"loading":[516],"multiple":[516],"textFilterPlaceholder":[513,"text-filter-placeholder"],"selectedValues":[32],"dataForFilter":[32],"getSelectedItems":[64],"setFocus":[64]},[[0,"calciteListItemChange","calciteListItemChangeHandler"],[0,"calciteListItemPropsChange","calciteListItemPropsChangeHandler"],[0,"calciteListItemValueChange","calciteListItemValueChangeHandler"]]]]],["calcite-fab.cjs",[[1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]],["calcite-flow.cjs",[[1,"calcite-flow",{"theme":[513],"flowCount":[32],"flowDirection":[32],"flows":[32],"back":[64]},[[0,"calciteFlowItemBackClick","handleCalciteFlowItemBackClick"]]]]],["calcite-pick-list-group.cjs",[[1,"calcite-pick-list-group",{"groupTitle":[513,"group-title"],"textGroupTitle":[513,"text-group-title"]}]]],["calcite-shell.cjs",[[1,"calcite-shell",{"theme":[513]}]]],["calcite-shell-center-row.cjs",[[1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]]],["calcite-shell-panel.cjs",[[1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedScale":[1,"detached-scale"],"position":[513]}]]],["calcite-sortable-list.cjs",[[1,"calcite-sortable-list",{"handleSelector":[1,"handle-selector"],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]]],["calcite-tip-group.cjs",[[1,"calcite-tip-group",{"groupTitle":[1,"group-title"],"textGroupTitle":[1,"text-group-title"]}]]],["calcite-panel.cjs",[[1,"calcite-panel",{"dismissed":[1540],"disabled":[516],"dismissible":[516],"heightScale":[513,"height-scale"],"loading":[516],"intlClose":[1,"intl-close"],"theme":[513],"setFocus":[64]}]]],["calcite-pick-list-item.cjs",[[1,"calcite-pick-list-item",{"description":[513],"disabled":[516],"disableDeselect":[4,"disable-deselect"],"icon":[513],"label":[513],"metadata":[16],"removable":[516],"selected":[1540],"textDescription":[513,"text-description"],"textLabel":[513,"text-label"],"textRemove":[513,"text-remove"],"value":[513],"toggleSelected":[64],"setFocus":[64]}]]],["calcite-handle.cjs",[[1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"],"setFocus":[64]}]]],["calcite-action-group.cjs",[[1,"calcite-action-group"]]],["calcite-filter.cjs",[[1,"calcite-filter",{"data":[16],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]]],["calcite-action.cjs",[[1,"calcite-action",{"appearance":[513],"active":[516],"compact":[516],"disabled":[516],"icon":[1],"indicator":[516],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"],"theme":[513],"setFocus":[64]}]]]], options);
   });
@@ -15,0 +36,0 @@ };

dist/collection/calcite-action-bar/calcite-action-bar.js

@@ -10,241 +10,241 @@ import { Component, Element, Event, Host, Prop, Watch, h } from "@stencil/core";
 export class CalciteActionBar {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        this.observer = new MutationObserver(() => {
-            const { el, expanded } = this;
-            toggleChildActionText({ parent: el, expanded });
-        });
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionBarToggle.emit();
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-        this.observer.observe(el, { childList: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
+    this.observer = new MutationObserver(() => {
+      const { el, expanded } = this;
+      toggleChildActionText({ parent: el, expanded });
+    });
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom },
-            h("slot", { name: SLOTS.bottomActions }),
-            expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        return (h(Host, null,
-            h("slot", null),
-            this.renderBottomActionGroup()));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    static get is() { return "calcite-action-bar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-action-bar.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-action-bar.css"]
-    }; }
-    static get properties() { return {
-        "expand": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether widget can be expanded."
-            },
-            "attribute": "expand",
-            "reflect": true,
-            "defaultValue": "true"
-        },
-        "expanded": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether widget is expanded."
-            },
-            "attribute": "expanded",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "tooltipExpand": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "HTMLCalciteTooltipElement",
-                "resolved": "HTMLCalciteTooltipElement",
-                "references": {
-                    "HTMLCalciteTooltipElement": {
-                        "location": "global"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the tooltip for the expand toggle."
-            }
-        },
-        "intlExpand": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Updates the label of the expand icon when the component is not expanded."
-            },
-            "attribute": "intl-expand",
-            "reflect": false
-        },
-        "intlCollapse": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Updates the label of the collapse icon when the component is expanded."
-            },
-            "attribute": "intl-collapse",
-            "reflect": false
-        },
-        "position": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalcitePosition",
-                "resolved": "\"end\" | \"start\"",
-                "references": {
-                    "CalcitePosition": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Arranges the component depending on the elements 'dir' property."
-            },
-            "attribute": "position",
-            "reflect": true
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
+    this.calciteActionBarToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+    this.observer.observe(el, { childList: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom },
+      h("slot", { name: SLOTS.bottomActions }),
+      expandToggleNode)) : null;
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null),
+      this.renderBottomActionGroup()));
+  }
+  static get is() { return "calcite-action-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-action-bar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-action-bar.css"]
+  }; }
+  static get properties() { return {
+    "expand": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether widget can be expanded."
+      },
+      "attribute": "expand",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether widget is expanded."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "tooltipExpand": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLCalciteTooltipElement",
+        "resolved": "HTMLCalciteTooltipElement",
+        "references": {
+          "HTMLCalciteTooltipElement": {
+            "location": "global"
+          }
         }
-    }; }
-    static get events() { return [{
-            "method": "calciteActionBarToggle",
-            "name": "calciteActionBarToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when expanded has been toggled."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
-    static get watchers() { return [{
-            "propName": "expand",
-            "methodName": "expandHandler"
-        }, {
-            "propName": "expanded",
-            "methodName": "expandedHandler"
-        }]; }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the tooltip for the expand toggle."
+      }
+    },
+    "intlExpand": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Updates the label of the expand icon when the component is not expanded."
+      },
+      "attribute": "intl-expand",
+      "reflect": false
+    },
+    "intlCollapse": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Updates the label of the collapse icon when the component is expanded."
+      },
+      "attribute": "intl-collapse",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalcitePosition",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "CalcitePosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Arranges the component depending on the elements 'dir' property."
+      },
+      "attribute": "position",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "calciteActionBarToggle",
+      "name": "calciteActionBarToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when expanded has been toggled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expand",
+      "methodName": "expandHandler"
+    }, {
+      "propName": "expanded",
+      "methodName": "expandedHandler"
+    }]; }
 }

dist/collection/calcite-action-bar/resources.js

 export const CSS = {
-    actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom"
 };
 export const SLOTS = {
-    bottomActions: "bottom-actions"
+  bottomActions: "bottom-actions"
 };
 export const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };

dist/collection/calcite-action-group/calcite-action-group.js

@@ -6,19 +6,19 @@ import { Component, Host, h } from "@stencil/core";
 export class CalciteActionGroup {
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null,
-            h("slot", null)));
-    }
-    static get is() { return "calcite-action-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-action-group.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-action-group.css"]
-    }; }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "calcite-action-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-action-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-action-group.css"]
+  }; }
 }

dist/collection/calcite-action-pad/calcite-action-pad.js

@@ -10,264 +10,264 @@ import { Component, Element, Event, Host, Prop, Watch, h } from "@stencil/core";
 export class CalciteActionPad {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates the horizontal or vertical layout of the component.
-         */
-        this.layout = "vertical";
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionPadToggle.emit();
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-    }
+    /**
+     * Indicates the horizontal or vertical layout of the component.
+     */
+    this.layout = "vertical";
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
     // --------------------------------------------------------------------------
     //
-    //  Component Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        const containerClasses = {
-            [CSS.container]: true,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null,
-            h("div", { class: containerClasses },
-                h("slot", null),
-                this.renderBottomActionGroup())));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    static get is() { return "calcite-action-pad"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-action-pad.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-action-pad.css"]
-    }; }
-    static get properties() { return {
-        "layout": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteLayout",
-                "resolved": "\"horizontal\" | \"vertical\"",
-                "references": {
-                    "CalciteLayout": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates the horizontal or vertical layout of the component."
-            },
-            "attribute": "layout",
-            "reflect": true,
-            "defaultValue": "\"vertical\""
-        },
-        "expand": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether widget can be expanded."
-            },
-            "attribute": "expand",
-            "reflect": true,
-            "defaultValue": "true"
-        },
-        "expanded": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether widget is expanded."
-            },
-            "attribute": "expanded",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "tooltipExpand": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "HTMLCalciteTooltipElement",
-                "resolved": "HTMLCalciteTooltipElement",
-                "references": {
-                    "HTMLCalciteTooltipElement": {
-                        "location": "global"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the tooltip for the expand toggle."
-            }
-        },
-        "intlExpand": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Updates the label of the expand icon when the component is not expanded."
-            },
-            "attribute": "intl-expand",
-            "reflect": false
-        },
-        "intlCollapse": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Updates the label of the collapse icon when the component is expanded."
-            },
-            "attribute": "intl-collapse",
-            "reflect": false
-        },
-        "position": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalcitePosition",
-                "resolved": "\"end\" | \"start\"",
-                "references": {
-                    "CalcitePosition": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Arranges the component depending on the elements 'dir' property."
-            },
-            "attribute": "position",
-            "reflect": true
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
+    this.calciteActionPadToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+  }
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    const containerClasses = {
+      [CSS.container]: true,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null,
+      h("div", { class: containerClasses },
+        h("slot", null),
+        this.renderBottomActionGroup())));
+  }
+  static get is() { return "calcite-action-pad"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-action-pad.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-action-pad.css"]
+  }; }
+  static get properties() { return {
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteLayout",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "CalciteLayout": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
-    }; }
-    static get events() { return [{
-            "method": "calciteActionPadToggle",
-            "name": "calciteActionPadToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when expanded has been toggled."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
-    static get watchers() { return [{
-            "propName": "expand",
-            "methodName": "expandHandler"
-        }, {
-            "propName": "expanded",
-            "methodName": "expandedHandler"
-        }]; }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the horizontal or vertical layout of the component."
+      },
+      "attribute": "layout",
+      "reflect": true,
+      "defaultValue": "\"vertical\""
+    },
+    "expand": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether widget can be expanded."
+      },
+      "attribute": "expand",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether widget is expanded."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "tooltipExpand": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLCalciteTooltipElement",
+        "resolved": "HTMLCalciteTooltipElement",
+        "references": {
+          "HTMLCalciteTooltipElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the tooltip for the expand toggle."
+      }
+    },
+    "intlExpand": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Updates the label of the expand icon when the component is not expanded."
+      },
+      "attribute": "intl-expand",
+      "reflect": false
+    },
+    "intlCollapse": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Updates the label of the collapse icon when the component is expanded."
+      },
+      "attribute": "intl-collapse",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalcitePosition",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "CalcitePosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Arranges the component depending on the elements 'dir' property."
+      },
+      "attribute": "position",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "calciteActionPadToggle",
+      "name": "calciteActionPadToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when expanded has been toggled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expand",
+      "methodName": "expandHandler"
+    }, {
+      "propName": "expanded",
+      "methodName": "expandedHandler"
+    }]; }
 }

dist/collection/calcite-action-pad/resources.js

 export const CSS = {
-    actionGroupBottom: "action-group--bottom",
-    container: "container"
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
 };
 export const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };

dist/collection/calcite-action/calcite-action.js

@@ -9,360 +9,360 @@ import { Component, Element, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 export class CalciteAction {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /** Specify the appearance style of the action, defaults to solid. */
-        this.appearance = "solid";
-        /**
-         * Indicates whether the action is highlighted.
-         */
-        this.active = false;
-        /**
-         * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
-         */
-        this.compact = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Indicates unread changes.
-         */
-        this.indicator = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the action.
-         */
-        this.scale = "m";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-        this.observer = new MutationObserver(() => forceUpdate(this));
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    /** Specify the appearance style of the action, defaults to solid. */
+    this.appearance = "solid";
+    /**
+     * Indicates whether the action is highlighted.
+     */
+    this.active = false;
+    /**
+     * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+     */
+    this.compact = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the action.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.observer = new MutationObserver(() => forceUpdate(this));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.buttonEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
+    const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } },
+      h("slot", null)));
+    return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer },
+      iconNode,
+      slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const rtl = getElementDir(el) === "rtl";
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null,
+      h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) },
+        this.renderIconContainer(),
+        this.renderTextContainer())));
+  }
+  static get is() { return "calcite-action"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-action.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-action.css"]
+  }; }
+  static get properties() { return {
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteAppearance",
+        "resolved": "\"clear\" | \"outline\" | \"solid\"",
+        "references": {
+          "CalciteAppearance": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the appearance style of the action, defaults to solid."
+      },
+      "attribute": "appearance",
+      "reflect": true,
+      "defaultValue": "\"solid\""
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the action is highlighted."
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "compact": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section."
+      },
+      "attribute": "compact",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "indicator": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates unread changes."
+      },
+      "attribute": "indicator",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Label of the action, exposed on hover. If no label is provided, the label inherits what's provided for the `text` prop."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the action."
+      },
+      "attribute": "scale",
+      "reflect": true,
+      "defaultValue": "\"m\""
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text that accompanies the action icon."
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "textEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the text is displayed."
+      },
+      "attribute": "text-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    componentDidUnload() {
-        this.observer.disconnect();
+  }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    async setFocus() {
-        this.buttonEl.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderTextContainer() {
-        const { text, textEnabled } = this;
-        const textContainerClasses = {
-            [CSS.textContainer]: true,
-            [CSS.textContainerVisible]: textEnabled
-        };
-        return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
-    }
-    renderIconContainer() {
-        var _a;
-        const { loading, icon, scale, el } = this;
-        const iconScale = scale === "l" ? "m" : "s";
-        const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
-        const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
-        const iconNode = calciteLoaderNode || calciteIconNode;
-        const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-        const slotContainerNode = (h("div", { class: {
-                [CSS.slotContainer]: true,
-                [CSS.slotContainerHidden]: loading
-            } },
-            h("slot", null)));
-        return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer },
-            iconNode,
-            slotContainerNode)) : null;
-    }
-    render() {
-        const { compact, disabled, loading, el, textEnabled, label, text } = this;
-        const ariaLabel = label || text;
-        const rtl = getElementDir(el) === "rtl";
-        const buttonClasses = {
-            [CSS.button]: true,
-            [CSS.buttonTextVisible]: textEnabled,
-            [CSS.buttonCompact]: compact,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null,
-            h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) },
-                this.renderIconContainer(),
-                this.renderTextContainer())));
-    }
-    static get is() { return "calcite-action"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-action.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-action.css"]
-    }; }
-    static get properties() { return {
-        "appearance": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteAppearance",
-                "resolved": "\"clear\" | \"outline\" | \"solid\"",
-                "references": {
-                    "CalciteAppearance": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specify the appearance style of the action, defaults to solid."
-            },
-            "attribute": "appearance",
-            "reflect": true,
-            "defaultValue": "\"solid\""
-        },
-        "active": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether the action is highlighted."
-            },
-            "attribute": "active",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "compact": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section."
-            },
-            "attribute": "compact",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "icon": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
-            },
-            "attribute": "icon",
-            "reflect": false
-        },
-        "indicator": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates unread changes."
-            },
-            "attribute": "indicator",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "label": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Label of the action, exposed on hover. If no label is provided, the label inherits what's provided for the `text` prop."
-            },
-            "attribute": "label",
-            "reflect": false
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "scale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specifies the size of the action."
-            },
-            "attribute": "scale",
-            "reflect": true,
-            "defaultValue": "\"m\""
-        },
-        "text": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": true,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Text that accompanies the action icon."
-            },
-            "attribute": "text",
-            "reflect": false
-        },
-        "textEnabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether the text is displayed."
-            },
-            "attribute": "text-enabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get methods() { return {
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-action/resources.js

 export const CSS = {
-    button: "button",
-    buttonTextVisible: "button--text-visible",
-    buttonCompact: "button--compact",
-    iconContainer: "icon-container",
-    slotContainer: "slot-container",
-    slotContainerHidden: "slot-container--hidden",
-    textContainer: "text-container",
-    textContainerVisible: "text-container--visible"
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
 };

dist/collection/calcite-block-section/calcite-block-section.js

@@ -10,181 +10,181 @@ import { Component, Element, Event, Prop, h } from "@stencil/core";
 export class CalciteBlockSection {
-    constructor() {
-        /**
-         * When true, the block's section content will be displayed.
-         */
-        this.open = false;
-        /**
-         * This property determines the look of the section toggle.
-         * If the value is "switch", a toggle-switch will be displayed.
-         * If the value is "button", a clickable header is displayed.
-         *
-         * @todo revisit doc
-         */
-        this.toggleDisplay = "button";
-        this.guid = `calcite-block-section-${guid()}`;
-        this.toggleSection = () => {
-            this.open = !this.open;
-            this.calciteBlockSectionToggle.emit();
-        };
+  constructor() {
+    /**
+     * When true, the block's section content will be displayed.
+     */
+    this.open = false;
+    /**
+     * This property determines the look of the section toggle.
+     * If the value is "switch", a toggle-switch will be displayed.
+     * If the value is "button", a clickable header is displayed.
+     *
+     * @todo revisit doc
+     */
+    this.toggleDisplay = "button";
+    this.guid = `calcite-block-section-${guid()}`;
+    this.toggleSection = () => {
+      this.open = !this.open;
+      this.calciteBlockSectionToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleHeaderLabelKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.click();
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleHeaderLabelKeyDown(event) {
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-            this.click();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
+    const dir = getElementDir(el);
+    const arrowIcon = open
+      ? ICONS.menuOpen
+      : dir === "rtl"
+        ? ICONS.menuClosedLeft
+        : ICONS.menuClosedRight;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const labelId = `${id}__label`;
+    const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
+        [CSS.toggle]: true,
+        [CSS.toggleSwitch]: true
+      }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 },
+      text,
+      h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
+    return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } },
+      headerNode,
+      h("div", { class: CSS.content, hidden: !open },
+        h("slot", null))));
+  }
+  static get is() { return "calcite-block-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-block-section.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-block-section.css"]
+  }; }
+  static get properties() { return {
+    "intlCollapse": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip used for the toggle when expanded."
+      },
+      "attribute": "intl-collapse",
+      "reflect": false
+    },
+    "intlExpand": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip used for the toggle when collapsed."
+      },
+      "attribute": "intl-expand",
+      "reflect": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the block's section content will be displayed."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text displayed in the button."
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "toggleDisplay": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteBlockSectionToggleDisplay",
+        "resolved": "\"button\" | \"switch\"",
+        "references": {
+          "CalciteBlockSectionToggleDisplay": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "revisit doc",
+            "name": "todo"
+          }],
+        "text": "This property determines the look of the section toggle.\nIf the value is \"switch\", a toggle-switch will be displayed.\nIf the value is \"button\", a clickable header is displayed."
+      },
+      "attribute": "toggle-display",
+      "reflect": true,
+      "defaultValue": "\"button\""
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-        const dir = getElementDir(el);
-        const arrowIcon = open
-            ? ICONS.menuOpen
-            : dir === "rtl"
-                ? ICONS.menuClosedLeft
-                : ICONS.menuClosedRight;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const labelId = `${id}__label`;
-        const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
-                [CSS.toggle]: true,
-                [CSS.toggleSwitch]: true
-            }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 },
-            text,
-            h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
-        return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } },
-            headerNode,
-            h("div", { class: CSS.content, hidden: !open },
-                h("slot", null))));
-    }
-    static get is() { return "calcite-block-section"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-block-section.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-block-section.css"]
-    }; }
-    static get properties() { return {
-        "intlCollapse": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Tooltip used for the toggle when expanded."
-            },
-            "attribute": "intl-collapse",
-            "reflect": false
-        },
-        "intlExpand": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Tooltip used for the toggle when collapsed."
-            },
-            "attribute": "intl-expand",
-            "reflect": false
-        },
-        "open": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, the block's section content will be displayed."
-            },
-            "attribute": "open",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "text": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Text displayed in the button."
-            },
-            "attribute": "text",
-            "reflect": false
-        },
-        "toggleDisplay": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteBlockSectionToggleDisplay",
-                "resolved": "\"button\" | \"switch\"",
-                "references": {
-                    "CalciteBlockSectionToggleDisplay": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [{
-                        "text": "revisit doc",
-                        "name": "todo"
-                    }],
-                "text": "This property determines the look of the section toggle.\nIf the value is \"switch\", a toggle-switch will be displayed.\nIf the value is \"button\", a clickable header is displayed."
-            },
-            "attribute": "toggle-display",
-            "reflect": true,
-            "defaultValue": "\"button\""
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteBlockSectionToggle",
-            "name": "calciteBlockSectionToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the header has been clicked."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get events() { return [{
+      "method": "calciteBlockSectionToggle",
+      "name": "calciteBlockSectionToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the header has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-block-section/resources.js

 export const CSS = {
-    content: "content",
-    toggle: "toggle",
-    toggleSwitch: "toggle--switch"
+  content: "content",
+  toggle: "toggle",
+  toggleSwitch: "toggle--switch"
 };
 export const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 export const ICONS = {
-    menuOpen: "chevron-down",
-    menuClosedLeft: "chevron-left",
-    menuClosedRight: "chevron-right"
+  menuOpen: "chevron-down",
+  menuClosedLeft: "chevron-left",
+  menuClosedRight: "chevron-right"
 };

dist/collection/calcite-block/calcite-block.js

@@ -11,277 +11,277 @@ import { Component, Element, Event, Host, Prop, h } from "@stencil/core";
 export class CalciteBlock {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, this block will be collapsible.
-         */
-        this.collapsible = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, displays a drag handle in the header.
-         */
-        this.dragHandle = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * When true, the block's content will be displayed.
-         */
-        this.open = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.onHeaderClick = () => {
-            this.open = !this.open;
-            this.calciteBlockToggle.emit();
-        };
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderScrim() {
-        const { disabled, loading, el } = this;
-        const defaultSlot = h("slot", null);
-        return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
+    /**
+     * When true, this block will be collapsible.
+     */
+    this.collapsible = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, displays a drag handle in the header.
+     */
+    this.dragHandle = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * When true, the block's content will be displayed.
+     */
+    this.open = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.onHeaderClick = () => {
+      this.open = !this.open;
+      this.calciteBlockToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderScrim() {
+    const { disabled, loading, el } = this;
+    const defaultSlot = h("slot", null);
+    return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
+  }
+  render() {
+    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const hasIcon = getSlotted(el, SLOTS.icon);
+    const headerContent = (h("header", { class: CSS.header },
+      hasIcon ? (h("div", { class: CSS.icon },
+        h("slot", { name: SLOTS.icon }))) : null,
+      h("div", { class: CSS.title },
+        h("h3", { class: CSS.heading }, heading),
+        summary ? h("div", { class: CSS.summary }, summary) : null)));
+    const hasControl = getSlotted(el, SLOTS.control);
+    const headerNode = (h("div", { class: CSS.headerContainer },
+      this.dragHandle ? h("calcite-handle", null) : null,
+      collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent),
+      loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer },
+        h("slot", { name: SLOTS.control }))) : null));
+    const rtl = getElementDir(el) === "rtl";
+    return (h(Host, { tabIndex: disabled ? -1 : null },
+      h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null },
+        headerNode,
+        h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
+  }
+  static get is() { return "calcite-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-block.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-block.css"]
+  }; }
+  static get properties() { return {
+    "collapsible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, this block will be collapsible."
+      },
+      "attribute": "collapsible",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "dragHandle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, displays a drag handle in the header."
+      },
+      "attribute": "drag-handle",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Block heading."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "intlCollapse": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip used for the toggle when expanded."
+      },
+      "attribute": "intl-collapse",
+      "reflect": false
+    },
+    "intlExpand": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip used for the toggle when collapsed."
+      },
+      "attribute": "intl-expand",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the block's content will be displayed."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "summary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Block summary."
+      },
+      "attribute": "summary",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    render() {
-        const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const hasIcon = getSlotted(el, SLOTS.icon);
-        const headerContent = (h("header", { class: CSS.header },
-            hasIcon ? (h("div", { class: CSS.icon },
-                h("slot", { name: SLOTS.icon }))) : null,
-            h("div", { class: CSS.title },
-                h("h3", { class: CSS.heading }, heading),
-                summary ? h("div", { class: CSS.summary }, summary) : null)));
-        const hasControl = getSlotted(el, SLOTS.control);
-        const headerNode = (h("div", { class: CSS.headerContainer },
-            this.dragHandle ? h("calcite-handle", null) : null,
-            collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent),
-            loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer },
-                h("slot", { name: SLOTS.control }))) : null));
-        const rtl = getElementDir(el) === "rtl";
-        return (h(Host, { tabIndex: disabled ? -1 : null },
-            h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null },
-                headerNode,
-                h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
-    }
-    static get is() { return "calcite-block"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-block.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-block.css"]
-    }; }
-    static get properties() { return {
-        "collapsible": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, this block will be collapsible."
-            },
-            "attribute": "collapsible",
-            "reflect": false,
-            "defaultValue": "false"
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "dragHandle": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, displays a drag handle in the header."
-            },
-            "attribute": "drag-handle",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "heading": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Block heading."
-            },
-            "attribute": "heading",
-            "reflect": false
-        },
-        "intlCollapse": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Tooltip used for the toggle when expanded."
-            },
-            "attribute": "intl-collapse",
-            "reflect": false
-        },
-        "intlExpand": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Tooltip used for the toggle when collapsed."
-            },
-            "attribute": "intl-expand",
-            "reflect": false
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "open": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, the block's content will be displayed."
-            },
-            "attribute": "open",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "summary": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Block summary."
-            },
-            "attribute": "summary",
-            "reflect": false
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteBlockToggle",
-            "name": "calciteBlockToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the header has been clicked."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get events() { return [{
+      "method": "calciteBlockToggle",
+      "name": "calciteBlockToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the header has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-block/resources.js

 export const CSS = {
-    content: "content",
-    headerContainer: "header-container",
-    icon: "icon",
-    toggle: "toggle",
-    toggleIcon: "toggle-icon",
-    title: "title",
-    heading: "heading",
-    header: "header",
-    button: "button",
-    summary: "summary",
-    controlContainer: "control-container"
+  content: "content",
+  headerContainer: "header-container",
+  icon: "icon",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  title: "title",
+  heading: "heading",
+  header: "header",
+  button: "button",
+  summary: "summary",
+  controlContainer: "control-container"
 };
 export const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 export const SLOTS = {
-    icon: "icon",
-    control: "control"
+  icon: "icon",
+  control: "control"
 };

dist/collection/calcite-fab/calcite-fab.js

@@ -5,286 +5,286 @@ import { Component, Element, Host, Method, Prop, h } from "@stencil/core";
 export class CalciteFab {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Used to set the button's appearance. Default is outline.
-         */
-        this.appearance = "outline";
-        /**
-         * Used to set the button's color. Default is light.
-         */
-        this.color = "light";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
-         */
-        this.icon = ICONS.plus;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the fab.
-         */
-        this.scale = "s";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        focusElement(this.buttonEl);
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "light";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "s";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
+    const titleText = !textEnabled && text;
+    const title = label || titleText;
+    const dir = getElementDir(el);
+    return (h(Host, null,
+      h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
+          this.buttonEl = buttonEl;
+        } }, this.textEnabled ? this.text : null)));
+  }
+  static get is() { return "calcite-fab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-fab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-fab.css"]
+  }; }
+  static get properties() { return {
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteAppearance",
+        "resolved": "\"clear\" | \"outline\" | \"solid\"",
+        "references": {
+          "CalciteAppearance": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the button's appearance. Default is outline."
+      },
+      "attribute": "appearance",
+      "reflect": true,
+      "defaultValue": "\"outline\""
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteColor",
+        "resolved": "\"blue\" | \"dark\" | \"light\" | \"red\"",
+        "references": {
+          "CalciteColor": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the button's color. Default is light."
+      },
+      "attribute": "color",
+      "reflect": true,
+      "defaultValue": "\"light\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "ICONS.plus"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Label of the FAB, exposed on hover. If no label is provided, the label inherits what's provided for the `text` prop."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the fab."
+      },
+      "attribute": "scale",
+      "reflect": true,
+      "defaultValue": "\"s\""
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Text that accompanies the FAB icon."
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "textEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the text is displayed."
+      },
+      "attribute": "text-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
-        const titleText = !textEnabled && text;
-        const title = label || titleText;
-        const dir = getElementDir(el);
-        return (h(Host, null,
-            h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
-                    this.buttonEl = buttonEl;
-                } }, this.textEnabled ? this.text : null)));
+  }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
-    static get is() { return "calcite-fab"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-fab.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-fab.css"]
-    }; }
-    static get properties() { return {
-        "appearance": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteAppearance",
-                "resolved": "\"clear\" | \"outline\" | \"solid\"",
-                "references": {
-                    "CalciteAppearance": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the button's appearance. Default is outline."
-            },
-            "attribute": "appearance",
-            "reflect": true,
-            "defaultValue": "\"outline\""
-        },
-        "color": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteColor",
-                "resolved": "\"blue\" | \"dark\" | \"light\" | \"red\"",
-                "references": {
-                    "CalciteColor": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the button's color. Default is light."
-            },
-            "attribute": "color",
-            "reflect": true,
-            "defaultValue": "\"light\""
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "icon": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
-            },
-            "attribute": "icon",
-            "reflect": false,
-            "defaultValue": "ICONS.plus"
-        },
-        "label": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Label of the FAB, exposed on hover. If no label is provided, the label inherits what's provided for the `text` prop."
-            },
-            "attribute": "label",
-            "reflect": false
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "scale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specifies the size of the fab."
-            },
-            "attribute": "scale",
-            "reflect": true,
-            "defaultValue": "\"s\""
-        },
-        "text": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Text that accompanies the FAB icon."
-            },
-            "attribute": "text",
-            "reflect": false
-        },
-        "textEnabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether the text is displayed."
-            },
-            "attribute": "text-enabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get methods() { return {
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-fab/resources.js

 export const CSS = {
-    button: "button"
+  button: "button"
 };
 export const ICONS = {
-    plus: "plus"
+  plus: "plus"
 };

dist/collection/calcite-filter/calcite-filter.js

@@ -8,163 +8,163 @@ import { Component, Element, Event, Host, Prop, State, h } from "@stencil/core";
 export class CalciteFilter {
-    constructor() {
-        this.empty = true;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.filter = debounce((value) => {
-            const regex = new RegExp(value, "ig");
-            if (this.data.length === 0) {
-                console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-                this.calciteFilterChange.emit([]);
-                return;
-            }
-            const find = (input, RE) => {
-                let found = false;
-                forIn(input, (val) => {
-                    if (typeof val === "function") {
-                        return;
-                    }
-                    if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
-                        if (find(val, RE)) {
-                            found = true;
-                        }
-                    }
-                    else if (RE.test(val)) {
-                        found = true;
-                    }
-                });
-                return found;
-            };
-            const result = this.data.filter((item) => {
-                return find(item, regex);
-            });
-            this.calciteFilterChange.emit(result);
-        }, filterDebounceInMs);
-        this.inputHandler = (event) => {
-            const target = event.target;
-            this.empty = target.value === "";
-            this.filter(target.value);
-        };
-        this.clear = () => {
-            this.textInput.value = "";
-            this.empty = true;
-            this.calciteFilterChange.emit(this.data);
-        };
-    }
+  constructor() {
+    this.empty = true;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        return (h(Host, null,
-            h("label", { class: rtl ? CSS_UTILITY.rtl : null },
-                h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
-                        this.textInput = el;
-                    } }),
-                h("div", { class: CSS.searchIcon },
-                    h("calcite-icon", { scale: "s", icon: ICONS.search }))),
-            !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear },
-                h("calcite-icon", { icon: ICONS.close }))) : null));
+    this.filter = debounce((value) => {
+      const regex = new RegExp(value, "ig");
+      if (this.data.length === 0) {
+        console.warn(`No data was passed to calcite-filter.
+      The data property expects an array of objects`);
+        this.calciteFilterChange.emit([]);
+        return;
+      }
+      const find = (input, RE) => {
+        let found = false;
+        forIn(input, (val) => {
+          if (typeof val === "function") {
+            return;
+          }
+          if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
+            if (find(val, RE)) {
+              found = true;
+            }
+          }
+          else if (RE.test(val)) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      const result = this.data.filter((item) => {
+        return find(item, regex);
+      });
+      this.calciteFilterChange.emit(result);
+    }, filterDebounceInMs);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.empty = target.value === "";
+      this.filter(target.value);
+    };
+    this.clear = () => {
+      this.textInput.value = "";
+      this.empty = true;
+      this.calciteFilterChange.emit(this.data);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    return (h(Host, null,
+      h("label", { class: rtl ? CSS_UTILITY.rtl : null },
+        h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
+            this.textInput = el;
+          } }),
+        h("div", { class: CSS.searchIcon },
+          h("calcite-icon", { scale: "s", icon: ICONS.search }))),
+      !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear },
+        h("calcite-icon", { icon: ICONS.close }))) : null));
+  }
+  static get is() { return "calcite-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-filter.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-filter.css"]
+  }; }
+  static get properties() { return {
+    "data": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input data. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search."
+      }
+    },
+    "intlClear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A text label that will appear on the clear button."
+      },
+      "attribute": "intl-clear",
+      "reflect": false
+    },
+    "intlLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A text label that will appear next to the input field."
+      },
+      "attribute": "intl-label",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder text for the input element's placeholder attribute"
+      },
+      "attribute": "placeholder",
+      "reflect": false
     }
-    static get is() { return "calcite-filter"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-filter.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-filter.css"]
-    }; }
-    static get properties() { return {
-        "data": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "object[]",
-                "resolved": "object[]",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The input data. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search."
-            }
-        },
-        "intlClear": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "A text label that will appear on the clear button."
-            },
-            "attribute": "intl-clear",
-            "reflect": false
-        },
-        "intlLabel": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "A text label that will appear next to the input field."
-            },
-            "attribute": "intl-label",
-            "reflect": false
-        },
-        "placeholder": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Placeholder text for the input element's placeholder attribute"
-            },
-            "attribute": "placeholder",
-            "reflect": false
-        }
-    }; }
-    static get states() { return {
-        "empty": {}
-    }; }
-    static get events() { return [{
-            "method": "calciteFilterChange",
-            "name": "calciteFilterChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get states() { return {
+    "empty": {}
+  }; }
+  static get events() { return [{
+      "method": "calciteFilterChange",
+      "name": "calciteFilterChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-filter/resources.js

 export const CSS = {
-    searchIcon: "search-icon",
-    clearButton: "clear-button"
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
 };
 export const TEXT = {
-    filterLabel: "filter",
-    clear: "Clear filter"
+  filterLabel: "filter",
+  clear: "Clear filter"
 };
 export const ICONS = {
-    search: "search",
-    close: "x"
+  search: "search",
+  close: "x"
 };

dist/collection/calcite-flow-item/calcite-flow-item.js

@@ -14,451 +14,451 @@ import { Component, Element, Event, Host, Listen, Prop, h } from "@stencil/core";
 export class CalciteFlowItem {
-    constructor() {
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Opens the action menu.
-         */
+  constructor() {
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Opens the action menu.
+     */
+    this.menuOpen = false;
+    /**
+     * Shows a back button in the header.
+     */
+    this.showBackButton = false;
+    this.toggleMenuOpen = () => {
+      this.menuOpen = !this.menuOpen;
+    };
+    this.backButtonClick = () => {
+      this.calciteFlowItemBackClick.emit();
+    };
+    this.menuButtonKeyDown = (event) => {
+      const { key } = event;
+      const { menuOpen } = this;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      if (!length) {
+        return;
+      }
+      event.preventDefault();
+      if (!menuOpen) {
+        this.menuOpen = true;
+      }
+      if (key === "ArrowUp") {
+        const lastAction = actions[length - 1];
+        focusElement(lastAction);
+      }
+      if (key === "ArrowDown") {
+        const firstAction = actions[0];
+        focusElement(firstAction);
+      }
+    };
+    this.menuActionsKeydown = (event) => {
+      const { key, target } = event;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      const currentIndex = actions.indexOf(target);
+      if (!length || currentIndex === -1) {
+        return;
+      }
+      event.preventDefault();
+      if (key === "ArrowUp") {
+        const value = getRoundRobinIndex(currentIndex - 1, length);
+        const previousAction = actions[value];
+        focusElement(previousAction);
+      }
+      if (key === "ArrowDown") {
+        const value = getRoundRobinIndex(currentIndex + 1, length);
+        const nextAction = actions[value];
+        focusElement(nextAction);
+      }
+    };
+    this.menuActionsContainerKeyDown = (event) => {
+      const { key } = event;
+      if (key === "Escape") {
         this.menuOpen = false;
-        /**
-         * Shows a back button in the header.
-         */
-        this.showBackButton = false;
-        this.toggleMenuOpen = () => {
-            this.menuOpen = !this.menuOpen;
-        };
-        this.backButtonClick = () => {
-            this.calciteFlowItemBackClick.emit();
-        };
-        this.menuButtonKeyDown = (event) => {
-            const { key } = event;
-            const { menuOpen } = this;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            if (!length) {
-                return;
-            }
-            event.preventDefault();
-            if (!menuOpen) {
-                this.menuOpen = true;
-            }
-            if (key === "ArrowUp") {
-                const lastAction = actions[length - 1];
-                focusElement(lastAction);
-            }
-            if (key === "ArrowDown") {
-                const firstAction = actions[0];
-                focusElement(firstAction);
-            }
-        };
-        this.menuActionsKeydown = (event) => {
-            const { key, target } = event;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            const currentIndex = actions.indexOf(target);
-            if (!length || currentIndex === -1) {
-                return;
-            }
-            event.preventDefault();
-            if (key === "ArrowUp") {
-                const value = getRoundRobinIndex(currentIndex - 1, length);
-                const previousAction = actions[value];
-                focusElement(previousAction);
-            }
-            if (key === "ArrowDown") {
-                const value = getRoundRobinIndex(currentIndex + 1, length);
-                const nextAction = actions[value];
-                focusElement(nextAction);
-            }
-        };
-        this.menuActionsContainerKeyDown = (event) => {
-            const { key } = event;
-            if (key === "Escape") {
-                this.menuOpen = false;
-            }
-        };
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalcitePanelScroll(event) {
+    event.stopPropagation();
+    this.calciteFlowItemScroll.emit();
+  }
+  queryActions() {
+    return getSlotted(this.el, SLOTS.menuActions, {
+      all: true
+    });
+  }
+  isValidKey(key, supportedKeys) {
+    return !!supportedKeys.find((k) => k === key);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBackButton(rtl) {
+    const { showBackButton, intlBack, backButtonClick } = this;
+    const label = intlBack || TEXT.back;
+    const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+    return showBackButton ? (h("calcite-action", { slot: PANEL_SLOTS.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
+  }
+  renderMenuButton() {
+    const { menuOpen, intlOpen, intlClose } = this;
+    const closeLabel = intlClose || TEXT.close;
+    const openLabel = intlOpen || TEXT.open;
+    const menuLabel = menuOpen ? closeLabel : openLabel;
+    return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
+  }
+  renderMenuActions() {
+    const { el, menuOpen, menuButtonEl } = this;
+    return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown },
+      h("div", { class: CSS.menu },
+        h("slot", { name: SLOTS.menuActions }))));
+  }
+  renderFooterActions() {
+    const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
+    return hasFooterActions ? (h("div", { slot: PANEL_SLOTS.footer, class: CSS.footerActions },
+      h("slot", { name: SLOTS.footerActions }))) : null;
+  }
+  renderSingleActionContainer() {
+    return (h("div", { class: CSS.singleActionContainer },
+      h("slot", { name: SLOTS.menuActions })));
+  }
+  renderMenuActionsContainer() {
+    return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown },
+      this.renderMenuButton(),
+      this.renderMenuActions()));
+  }
+  renderHeaderLeadingContent() {
+    const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
+    return hasLeadingActions ? (h("div", { slot: PANEL_SLOTS.headerLeadingContent, class: CSS.leadingActions },
+      h("slot", { name: SLOTS.leadingActions }))) : null;
+  }
+  renderHeaderActions() {
+    const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
+    const actionCount = menuActions.length;
+    const menuActionsNodes = actionCount === 1
+      ? this.renderSingleActionContainer()
+      : actionCount
+        ? this.renderMenuActionsContainer()
+        : null;
+    return menuActionsNodes ? (h("div", { slot: PANEL_SLOTS.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
+  }
+  renderHeading() {
+    const { heading } = this;
+    return heading ? (h("h2", { class: CSS.heading, slot: PANEL_SLOTS.headerContent }, heading)) : null;
+  }
+  renderSummary() {
+    const { summary } = this;
+    return summary ? h("span", { class: CSS.summary }, summary) : null;
+  }
+  renderHeader() {
+    const headingNode = this.renderHeading();
+    const summaryNode = this.renderSummary();
+    return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: PANEL_SLOTS.headerContent },
+      headingNode,
+      summaryNode)) : null;
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer, slot: PANEL_SLOTS.fab },
+      h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { el } = this;
+    const dir = getElementDir(el);
+    return (h(Host, null,
+      h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir },
+        this.renderBackButton(dir === "rtl"),
+        this.renderHeaderLeadingContent(),
+        this.renderHeader(),
+        this.renderHeaderActions(),
+        h("slot", null),
+        this.renderFooterActions(),
+        this.renderFab())));
+  }
+  static get is() { return "calcite-flow-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-flow-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-flow-item.css"]
+  }; }
+  static get properties() { return {
+    "beforeBack": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "() => Promise<void>",
+        "resolved": "() => Promise<void>",
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When provided, this method will be called before it is removed from the parent flow."
+      }
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "heightScale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maxiumum height of the panel that this wraps."
+      },
+      "attribute": "height-scale",
+      "reflect": true
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Heading text."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "menuOpen": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Opens the action menu."
+      },
+      "attribute": "menu-open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "showBackButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows a back button in the header."
+      },
+      "attribute": "show-back-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "summary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Summary text. A description displayed underneath the heading."
+      },
+      "attribute": "summary",
+      "reflect": false
+    },
+    "intlBack": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "'Back' text string."
+      },
+      "attribute": "intl-back",
+      "reflect": false
+    },
+    "intlClose": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true."
+      },
+      "attribute": "intl-close",
+      "reflect": false
+    },
+    "intlOpen": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "'Open' text string for the menu."
+      },
+      "attribute": "intl-open",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalcitePanelScroll(event) {
-        event.stopPropagation();
-        this.calciteFlowItemScroll.emit();
-    }
-    queryActions() {
-        return getSlotted(this.el, SLOTS.menuActions, {
-            all: true
-        });
-    }
-    isValidKey(key, supportedKeys) {
-        return !!supportedKeys.find((k) => k === key);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderBackButton(rtl) {
-        const { showBackButton, intlBack, backButtonClick } = this;
-        const label = intlBack || TEXT.back;
-        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-        return showBackButton ? (h("calcite-action", { slot: PANEL_SLOTS.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
-    }
-    renderMenuButton() {
-        const { menuOpen, intlOpen, intlClose } = this;
-        const closeLabel = intlClose || TEXT.close;
-        const openLabel = intlOpen || TEXT.open;
-        const menuLabel = menuOpen ? closeLabel : openLabel;
-        return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
-    }
-    renderMenuActions() {
-        const { el, menuOpen, menuButtonEl } = this;
-        return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown },
-            h("div", { class: CSS.menu },
-                h("slot", { name: SLOTS.menuActions }))));
-    }
-    renderFooterActions() {
-        const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
-        return hasFooterActions ? (h("div", { slot: PANEL_SLOTS.footer, class: CSS.footerActions },
-            h("slot", { name: SLOTS.footerActions }))) : null;
-    }
-    renderSingleActionContainer() {
-        return (h("div", { class: CSS.singleActionContainer },
-            h("slot", { name: SLOTS.menuActions })));
-    }
-    renderMenuActionsContainer() {
-        return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown },
-            this.renderMenuButton(),
-            this.renderMenuActions()));
-    }
-    renderHeaderLeadingContent() {
-        const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
-        return hasLeadingActions ? (h("div", { slot: PANEL_SLOTS.headerLeadingContent, class: CSS.leadingActions },
-            h("slot", { name: SLOTS.leadingActions }))) : null;
-    }
-    renderHeaderActions() {
-        const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
-        const actionCount = menuActions.length;
-        const menuActionsNodes = actionCount === 1
-            ? this.renderSingleActionContainer()
-            : actionCount
-                ? this.renderMenuActionsContainer()
-                : null;
-        return menuActionsNodes ? (h("div", { slot: PANEL_SLOTS.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
-    }
-    renderHeading() {
-        const { heading } = this;
-        return heading ? (h("h2", { class: CSS.heading, slot: PANEL_SLOTS.headerContent }, heading)) : null;
-    }
-    renderSummary() {
-        const { summary } = this;
-        return summary ? h("span", { class: CSS.summary }, summary) : null;
-    }
-    renderHeader() {
-        const headingNode = this.renderHeading();
-        const summaryNode = this.renderSummary();
-        return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: PANEL_SLOTS.headerContent },
-            headingNode,
-            summaryNode)) : null;
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer, slot: PANEL_SLOTS.fab },
-            h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { el } = this;
-        const dir = getElementDir(el);
-        return (h(Host, null,
-            h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir },
-                this.renderBackButton(dir === "rtl"),
-                this.renderHeaderLeadingContent(),
-                this.renderHeader(),
-                this.renderHeaderActions(),
-                h("slot", null),
-                this.renderFooterActions(),
-                this.renderFab())));
-    }
-    static get is() { return "calcite-flow-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-flow-item.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-flow-item.css"]
-    }; }
-    static get properties() { return {
-        "beforeBack": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "() => Promise<void>",
-                "resolved": "() => Promise<void>",
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "When provided, this method will be called before it is removed from the parent flow."
-            }
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "heightScale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specifies the maxiumum height of the panel that this wraps."
-            },
-            "attribute": "height-scale",
-            "reflect": true
-        },
-        "heading": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Heading text."
-            },
-            "attribute": "heading",
-            "reflect": false
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "menuOpen": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Opens the action menu."
-            },
-            "attribute": "menu-open",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "showBackButton": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Shows a back button in the header."
-            },
-            "attribute": "show-back-button",
-            "reflect": false,
-            "defaultValue": "false"
-        },
-        "summary": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Summary text. A description displayed underneath the heading."
-            },
-            "attribute": "summary",
-            "reflect": false
-        },
-        "intlBack": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "'Back' text string."
-            },
-            "attribute": "intl-back",
-            "reflect": false
-        },
-        "intlClose": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true."
-            },
-            "attribute": "intl-close",
-            "reflect": false
-        },
-        "intlOpen": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "'Open' text string for the menu."
-            },
-            "attribute": "intl-open",
-            "reflect": false
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteFlowItemBackClick",
-            "name": "calciteFlowItemBackClick",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the back button has been clicked."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }, {
-            "method": "calciteFlowItemScroll",
-            "name": "calciteFlowItemScroll",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the content has been scrolled."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calcitePanelScroll",
-            "method": "handleCalcitePanelScroll",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+  }; }
+  static get events() { return [{
+      "method": "calciteFlowItemBackClick",
+      "name": "calciteFlowItemBackClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the back button has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "calciteFlowItemScroll",
+      "name": "calciteFlowItemScroll",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the content has been scrolled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calcitePanelScroll",
+      "method": "handleCalcitePanelScroll",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-flow-item/resources.js

 export const CSS = {
-    header: "header-content",
-    heading: "heading",
-    summary: "summary",
-    backButton: "back-button",
-    footerActions: "footer-actions",
-    headerActions: "header-actions",
-    leadingActions: "leading-actions",
-    singleActionContainer: "single-action-container",
-    menuContainer: "menu-container",
-    menuButton: "menu-button",
-    menu: "menu",
-    menuOpen: "menu--open",
-    fabContainer: "fab-container"
+  header: "header-content",
+  heading: "heading",
+  summary: "summary",
+  backButton: "back-button",
+  footerActions: "footer-actions",
+  headerActions: "header-actions",
+  leadingActions: "leading-actions",
+  singleActionContainer: "single-action-container",
+  menuContainer: "menu-container",
+  menuButton: "menu-button",
+  menu: "menu",
+  menuOpen: "menu--open",
+  fabContainer: "fab-container"
 };
 export const SLOTS = {
-    leadingActions: "leading-actions",
-    menuActions: "menu-actions",
-    fab: "fab",
-    footerActions: "footer-actions"
+  leadingActions: "leading-actions",
+  menuActions: "menu-actions",
+  fab: "fab",
+  footerActions: "footer-actions"
 };
 export const ICONS = {
-    menu: "ellipsis",
-    backLeft: "chevron-left",
-    backRight: "chevron-right"
+  menu: "ellipsis",
+  backLeft: "chevron-left",
+  backRight: "chevron-right"
 };
 export const TEXT = {
-    back: "Back",
-    open: "Open",
-    close: "Close"
+  back: "Back",
+  open: "Open",
+  close: "Close"
 };

dist/collection/calcite-flow/calcite-flow.js

@@ -7,162 +7,162 @@ import { Component, Element, Host, Listen, Method, Prop, State, h } from "@stencil/core";
 export class CalciteFlow {
-    constructor() {
-        this.flowCount = 0;
-        this.flowDirection = null;
-        this.flows = [];
-        this.getFlowDirection = (oldFlowCount, newFlowCount) => {
-            const allowRetreatingDirection = oldFlowCount > 1;
-            const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
-            if (!allowAdvancingDirection && !allowRetreatingDirection) {
-                return null;
-            }
-            return newFlowCount < oldFlowCount ? "retreating" : "advancing";
-        };
-        this.updateFlowProps = () => {
-            const { flows } = this;
-            const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
-            const oldFlowCount = flows.length;
-            const newFlowCount = newFlows.length;
-            const activeFlow = newFlows[newFlowCount - 1];
-            const previousFlow = newFlows[newFlowCount - 2];
-            if (newFlowCount && activeFlow) {
-                newFlows.forEach((flowNode) => {
-                    flowNode.showBackButton = newFlowCount > 1;
-                    flowNode.hidden = flowNode !== activeFlow;
-                });
-            }
-            if (previousFlow) {
-                previousFlow.menuOpen = false;
-            }
-            this.flows = newFlows;
-            if (oldFlowCount !== newFlowCount) {
-                const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
-                this.flowCount = newFlowCount;
-                this.flowDirection = flowDirection;
-            }
-        };
-        this.flowItemObserver = new MutationObserver(this.updateFlowProps);
+  constructor() {
+    this.flowCount = 0;
+    this.flowDirection = null;
+    this.flows = [];
+    this.getFlowDirection = (oldFlowCount, newFlowCount) => {
+      const allowRetreatingDirection = oldFlowCount > 1;
+      const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
+      if (!allowAdvancingDirection && !allowRetreatingDirection) {
+        return null;
+      }
+      return newFlowCount < oldFlowCount ? "retreating" : "advancing";
+    };
+    this.updateFlowProps = () => {
+      const { flows } = this;
+      const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
+      const oldFlowCount = flows.length;
+      const newFlowCount = newFlows.length;
+      const activeFlow = newFlows[newFlowCount - 1];
+      const previousFlow = newFlows[newFlowCount - 2];
+      if (newFlowCount && activeFlow) {
+        newFlows.forEach((flowNode) => {
+          flowNode.showBackButton = newFlowCount > 1;
+          flowNode.hidden = flowNode !== activeFlow;
+        });
+      }
+      if (previousFlow) {
+        previousFlow.menuOpen = false;
+      }
+      this.flows = newFlows;
+      if (oldFlowCount !== newFlowCount) {
+        const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
+        this.flowCount = newFlowCount;
+        this.flowDirection = flowDirection;
+      }
+    };
+    this.flowItemObserver = new MutationObserver(this.updateFlowProps);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Removes the currently active `calcite-flow-item`.
+   */
+  async back() {
+    const lastItem = this.el.querySelector("calcite-flow-item:last-child");
+    if (!lastItem) {
+      return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     */
-    async back() {
-        const lastItem = this.el.querySelector("calcite-flow-item:last-child");
-        if (!lastItem) {
-            return;
+    const beforeBack = lastItem.beforeBack
+      ? lastItem.beforeBack
+      : () => Promise.resolve();
+    return beforeBack.call(lastItem).then(() => {
+      lastItem.remove();
+      return lastItem;
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
+    this.updateFlowProps();
+  }
+  disconnectedCallback() {
+    this.flowItemObserver.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalciteFlowItemBackClick() {
+    this.back();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { flowDirection, flowCount } = this;
+    const frameDirectionClasses = {
+      [CSS.frame]: true,
+      [CSS.frameAdvancing]: flowDirection === "advancing",
+      [CSS.frameRetreating]: flowDirection === "retreating"
+    };
+    return (h(Host, null,
+      h("div", { key: flowCount, class: frameDirectionClasses },
+        h("slot", null))));
+  }
+  static get is() { return "calcite-flow"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-flow.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-flow.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
-        const beforeBack = lastItem.beforeBack
-            ? lastItem.beforeBack
-            : () => Promise.resolve();
-        return beforeBack.call(lastItem).then(() => {
-            lastItem.remove();
-            return lastItem;
-        });
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
-        this.updateFlowProps();
+  }; }
+  static get states() { return {
+    "flowCount": {},
+    "flowDirection": {},
+    "flows": {}
+  }; }
+  static get methods() { return {
+    "back": {
+      "complexType": {
+        "signature": "() => Promise<HTMLCalciteFlowItemElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLCalciteFlowItemElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Removes the currently active `calcite-flow-item`.",
+        "tags": []
+      }
     }
-    componentDidUnload() {
-        this.flowItemObserver.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalciteFlowItemBackClick() {
-        this.back();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { flowDirection, flowCount } = this;
-        const frameDirectionClasses = {
-            [CSS.frame]: true,
-            [CSS.frameAdvancing]: flowDirection === "advancing",
-            [CSS.frameRetreating]: flowDirection === "retreating"
-        };
-        return (h(Host, null,
-            h("div", { key: flowCount, class: frameDirectionClasses },
-                h("slot", null))));
-    }
-    static get is() { return "calcite-flow"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-flow.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-flow.css"]
-    }; }
-    static get properties() { return {
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get states() { return {
-        "flowCount": {},
-        "flowDirection": {},
-        "flows": {}
-    }; }
-    static get methods() { return {
-        "back": {
-            "complexType": {
-                "signature": "() => Promise<HTMLCalciteFlowItemElement>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    },
-                    "HTMLCalciteFlowItemElement": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<any>"
-            },
-            "docs": {
-                "text": "Removes the currently active `calcite-flow-item`.",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calciteFlowItemBackClick",
-            "method": "handleCalciteFlowItemBackClick",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calciteFlowItemBackClick",
+      "method": "handleCalciteFlowItemBackClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-flow/resources.js

 export const CSS = {
-    frame: "frame",
-    frameAdvancing: "frame--advancing",
-    frameRetreating: "frame--retreating"
+  frame: "frame",
+  frameAdvancing: "frame--advancing",
+  frameRetreating: "frame--retreating"
 };

dist/collection/calcite-handle/calcite-handle.js

 import { Component, Element, Event, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
 export class CalciteHandle {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.activated = false;
-        /**
-         * Value for the button title attribute
-         */
-        this.textTitle = "handle";
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case " ":
-                    this.activated = !this.activated;
-                    break;
-                case "ArrowUp":
-                case "ArrowDown":
-                    if (!this.activated) {
-                        return;
-                    }
-                    const direction = event.key.toLowerCase().replace("arrow", "");
-                    this.calciteHandleNudge.emit({ handle: this.el, direction });
-                    break;
-            }
-        };
-        this.handleBlur = () => {
-            this.activated = false;
-        };
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        this.handleButton.focus();
-    }
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.activated = false;
+    /**
+     * Value for the button title attribute
+     */
+    this.textTitle = "handle";
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        return (
-        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
-                this.handleButton = el;
-            } },
-            h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          const direction = event.key.toLowerCase().replace("arrow", "");
+          this.calciteHandleNudge.emit({ handle: this.el, direction });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.handleButton.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
+        this.handleButton = el;
+      } },
+      h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+  }
+  static get is() { return "calcite-handle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-handle.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-handle.css"]
+  }; }
+  static get properties() { return {
+    "activated": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "- stores the activated state of the drag handle.",
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "activated",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "textTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Value for the button title attribute"
+      },
+      "attribute": "text-title",
+      "reflect": true,
+      "defaultValue": "\"handle\""
     }
-    static get is() { return "calcite-handle"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-handle.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-handle.css"]
-    }; }
-    static get properties() { return {
-        "activated": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [{
-                        "text": "- stores the activated state of the drag handle.",
-                        "name": "internal"
-                    }],
-                "text": ""
-            },
-            "attribute": "activated",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get events() { return [{
+      "method": "calciteHandleNudge",
+      "name": "calciteHandleNudge",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteHandleNudge",
+            "name": "event"
+          }],
+        "text": "Emmitted when the the handle is activated and the up or down arrow key is pressed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "textTitle": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Value for the button title attribute"
-            },
-            "attribute": "text-title",
-            "reflect": true,
-            "defaultValue": "\"handle\""
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteHandleNudge",
-            "name": "calciteHandleNudge",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteHandleNudge",
-                        "name": "event"
-                    }],
-                "text": "Emmitted when the the handle is activated and the up or down arrow key is pressed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-handle/resources.js

 export const CSS = {
-    handle: "handle",
-    handleActivated: "handle--activated"
+  handle: "handle",
+  handleActivated: "handle--activated"
 };
 export const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };

dist/collection/calcite-panel/calcite-panel.js

@@ -14,318 +14,318 @@ import { Component, Element, Event, Host, Method, Prop, Watch, h } from "@stencil/core";
 export class CalcitePanel {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hides the panel.
-         */
-        this.dismissed = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Displays a close button in the trailing side of the header.
-         */
-        this.dismissible = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.panelKeyUpHandler = (event) => {
-            if (event.key === "Escape") {
-                this.dismiss();
-            }
-        };
-        this.dismiss = () => {
-            this.dismissed = true;
-        };
-        this.panelScrollHandler = () => {
-            this.calcitePanelScroll.emit();
-        };
-    }
-    dismissedHandler() {
-        this.calcitePanelDismissedChange.emit();
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus(focusId) {
-        var _a, _b;
-        if (focusId === "dismiss-button") {
-            (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-            return;
-        }
-        (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
-    }
+    /**
+     * Hides the panel.
+     */
+    this.dismissed = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Displays a close button in the trailing side of the header.
+     */
+    this.dismissible = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderHeaderLeadingContent() {
-        const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
-        return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent },
-            h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+    this.panelKeyUpHandler = (event) => {
+      if (event.key === "Escape") {
+        this.dismiss();
+      }
+    };
+    this.dismiss = () => {
+      this.dismissed = true;
+    };
+    this.panelScrollHandler = () => {
+      this.calcitePanelScroll.emit();
+    };
+  }
+  dismissedHandler() {
+    this.calcitePanelDismissedChange.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus(focusId) {
+    var _a, _b;
+    if (focusId === "dismiss-button") {
+      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      return;
     }
-    renderHeaderContent() {
-        return (h("div", { key: "header-content", class: CSS.headerContent },
-            h("slot", { name: SLOTS.headerContent })));
+    (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeaderLeadingContent() {
+    const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
+    return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent },
+      h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+  }
+  renderHeaderContent() {
+    return (h("div", { key: "header-content", class: CSS.headerContent },
+      h("slot", { name: SLOTS.headerContent })));
+  }
+  renderHeaderTrailingContent() {
+    const { dismiss, dismissible, intlClose } = this;
+    const text = intlClose || TEXT.close;
+    const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
+    const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
+    return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent },
+      slotNode,
+      dismissibleNode));
+  }
+  renderHeader() {
+    const headerLeadingContentNode = this.renderHeaderLeadingContent();
+    const headerContentNode = this.renderHeaderContent();
+    const headerTrailingContentNode = this.renderHeaderTrailingContent();
+    const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
+    return canDisplayHeader ? (h("header", { class: CSS.header },
+      headerLeadingContentNode,
+      headerContentNode,
+      headerTrailingContentNode)) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const hasFooter = getSlotted(el, SLOTS.footer);
+    return hasFooter ? (h("footer", { class: CSS.footer },
+      h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderContent() {
+    return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler },
+      h("slot", null),
+      this.renderFab()));
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer },
+      h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
+        [CSS.container]: true,
+        [CSS_UTILITY.rtl]: rtl
+      } },
+      this.renderHeader(),
+      this.renderContent(),
+      this.renderFooter()));
+    return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
+  }
+  static get is() { return "calcite-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-panel.css"]
+  }; }
+  static get properties() { return {
+    "dismissed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides the panel."
+      },
+      "attribute": "dismissed",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "dismissible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displays a close button in the trailing side of the header."
+      },
+      "attribute": "dismissible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "heightScale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maxiumum height of the panel."
+      },
+      "attribute": "height-scale",
+      "reflect": true
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "intlClose": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true."
+      },
+      "attribute": "intl-close",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    renderHeaderTrailingContent() {
-        const { dismiss, dismissible, intlClose } = this;
-        const text = intlClose || TEXT.close;
-        const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
-        const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
-        return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent },
-            slotNode,
-            dismissibleNode));
+  }; }
+  static get events() { return [{
+      "method": "calcitePanelDismissedChange",
+      "name": "calcitePanelDismissedChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the close button has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "calcitePanelScroll",
+      "name": "calcitePanelScroll",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the content has been scrolled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(focusId?: \"dismiss-button\") => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
-    renderHeader() {
-        const headerLeadingContentNode = this.renderHeaderLeadingContent();
-        const headerContentNode = this.renderHeaderContent();
-        const headerTrailingContentNode = this.renderHeaderTrailingContent();
-        const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
-        return canDisplayHeader ? (h("header", { class: CSS.header },
-            headerLeadingContentNode,
-            headerContentNode,
-            headerTrailingContentNode)) : null;
-    }
-    renderFooter() {
-        const { el } = this;
-        const hasFooter = getSlotted(el, SLOTS.footer);
-        return hasFooter ? (h("footer", { class: CSS.footer },
-            h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderContent() {
-        return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler },
-            h("slot", null),
-            this.renderFab()));
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer },
-            h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
-                [CSS.container]: true,
-                [CSS_UTILITY.rtl]: rtl
-            } },
-            this.renderHeader(),
-            this.renderContent(),
-            this.renderFooter()));
-        return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
-    }
-    static get is() { return "calcite-panel"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-panel.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-panel.css"]
-    }; }
-    static get properties() { return {
-        "dismissed": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Hides the panel."
-            },
-            "attribute": "dismissed",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "dismissible": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Displays a close button in the trailing side of the header."
-            },
-            "attribute": "dismissible",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "heightScale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specifies the maxiumum height of the panel."
-            },
-            "attribute": "height-scale",
-            "reflect": true
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "intlClose": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true."
-            },
-            "attribute": "intl-close",
-            "reflect": false
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calcitePanelDismissedChange",
-            "name": "calcitePanelDismissedChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the close button has been clicked."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }, {
-            "method": "calcitePanelScroll",
-            "name": "calcitePanelScroll",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the content has been scrolled."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "setFocus": {
-            "complexType": {
-                "signature": "(focusId?: \"dismiss-button\") => Promise<void>",
-                "parameters": [{
-                        "tags": [],
-                        "text": ""
-                    }],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get watchers() { return [{
-            "propName": "dismissed",
-            "methodName": "dismissedHandler"
-        }]; }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "dismissed",
+      "methodName": "dismissedHandler"
+    }]; }
 }

dist/collection/calcite-panel/resources.js

 export const CSS = {
-    container: "container",
-    header: "header",
-    headerLeadingContent: "header-leading-content",
-    headerContent: "header-content",
-    headerTrailingContent: "header-trailing-content",
-    contentContainer: "content-container",
-    fabContainer: "fab-container",
-    footer: "footer"
+  container: "container",
+  header: "header",
+  headerLeadingContent: "header-leading-content",
+  headerContent: "header-content",
+  headerTrailingContent: "header-trailing-content",
+  contentContainer: "content-container",
+  fabContainer: "fab-container",
+  footer: "footer"
 };
 export const ICONS = {
-    close: "x"
+  close: "x"
 };
 export const SLOTS = {
-    headerContent: "header-content",
-    headerLeadingContent: "header-leading-content",
-    headerTrailingContent: "header-trailing-content",
-    fab: "fab",
-    footer: "footer"
+  headerContent: "header-content",
+  headerLeadingContent: "header-leading-content",
+  headerTrailingContent: "header-trailing-content",
+  fab: "fab",
+  footer: "footer"
 };
 export const TEXT = {
-    close: "Close"
+  close: "Close"
 };

dist/collection/calcite-pick-list-group/calcite-pick-list-group.js

@@ -9,50 +9,71 @@ import { Component, Element, Host, Prop, h } from "@stencil/core";
 export class CalcitePickListGroup {
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, textGroupTitle } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
-        const sectionClasses = {
-            [CSS.container]: true,
-            [CSS.indented]: hasParentItem,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null,
-            textGroupTitle ? h("h3", { class: CSS.heading }, textGroupTitle) : null,
-            h("slot", { name: SLOTS.parentItem }),
-            h("section", { class: sectionClasses },
-                h("slot", null))));
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, groupTitle, textGroupTitle } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
+    const sectionClasses = {
+      [CSS.container]: true,
+      [CSS.indented]: hasParentItem,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    const title = groupTitle || textGroupTitle;
+    return (h(Host, null,
+      title ? h("h3", { class: CSS.heading }, title) : null,
+      h("slot", { name: SLOTS.parentItem }),
+      h("section", { class: sectionClasses },
+        h("slot", null))));
+  }
+  static get is() { return "calcite-pick-list-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-pick-list-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-pick-list-group.css"]
+  }; }
+  static get properties() { return {
+    "groupTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The title used for all nested `calcite-pick-list` rows."
+      },
+      "attribute": "group-title",
+      "reflect": true
+    },
+    "textGroupTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use groupTitle instead",
+            "name": "deprecated"
+          }],
+        "text": "The title used for all nested `calcite-pick-list` rows."
+      },
+      "attribute": "text-group-title",
+      "reflect": true
     }
-    static get is() { return "calcite-pick-list-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-pick-list-group.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-pick-list-group.css"]
-    }; }
-    static get properties() { return {
-        "textGroupTitle": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The title used for all nested `calcite-pick-list` rows"
-            },
-            "attribute": "text-group-title",
-            "reflect": true
-        }
-    }; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-pick-list-group/resources.js

 export const CSS = {
-    heading: "heading",
-    container: "container",
-    indented: "container--indented"
+  heading: "heading",
+  container: "container",
+  indented: "container--indented"
 };
 export const SLOTS = {
-    parentItem: "parent-item"
+  parentItem: "parent-item"
 };

dist/collection/calcite-pick-list-item/calcite-pick-list-item.js

@@ -1,2 +0,2 @@
-import { Component, Element, Event, Host, Method, Prop, Watch, h } from "@stencil/core";
+import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -10,462 +10,510 @@ import { ICON_TYPES } from "../calcite-pick-list/resources";
 export class CalcitePickListItem {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted.
-         */
-        this.disabled = false;
-        /**
-         * When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        /**
-         * The text for the remove item buttons. Only applicable if removable is true.
-         */
-        this.textRemove = TEXT.remove;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.pickListClickHandler = (event) => {
-            if (this.disabled || (this.disableDeselect && this.selected)) {
-                return;
-            }
-            this.shiftPressed = event.shiftKey;
-            this.selected = !this.selected;
-        };
-        this.pickListKeyDownHandler = (event) => {
-            if (event.key === " ") {
-                event.preventDefault();
-                if (this.disableDeselect && this.selected) {
-                    return;
-                }
-                this.selected = !this.selected;
-            }
-        };
-        this.removeClickHandler = () => {
-            this.calciteListItemRemove.emit();
-        };
-    }
-    metadataWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    selectedWatchHandler() {
-        this.calciteListItemChange.emit({
-            item: this.el,
-            value: this.value,
-            selected: this.selected,
-            shiftPressed: this.shiftPressed
-        });
-        this.shiftPressed = false;
-    }
-    textDescriptionWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    textLabelWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    valueWatchHandler(newValue, oldValue) {
-        this.calciteListItemValueChange.emit({ oldValue, newValue });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
+  constructor() {
     /**
-     * Used to toggle the selection state. By default this won't trigger an event.
-     * The first argument allows the value to be coerced, rather than swapping values.
+     * When true, the item cannot be clicked and is visually muted.
      */
-    async toggleSelected(coerce) {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
-    }
-    async setFocus() {
-        var _a;
-        (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+    this.disabled = false;
+    /**
+     * When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    /**
+     * The text for the remove item buttons. Only applicable if removable is true.
+     */
+    this.textRemove = TEXT.remove;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderIcon() {
-        const { icon } = this;
-        if (!icon) {
-            return null;
+    this.pickListClickHandler = (event) => {
+      if (this.disabled || (this.disableDeselect && this.selected)) {
+        return;
+      }
+      this.shiftPressed = event.shiftKey;
+      this.selected = !this.selected;
+    };
+    this.pickListKeyDownHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if (this.disableDeselect && this.selected) {
+          return;
         }
-        const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
-        return (h("span", { class: CSS.icon },
-            h("calcite-icon", { scale: "s", icon: iconName })));
+        this.selected = !this.selected;
+      }
+    };
+    this.removeClickHandler = () => {
+      this.calciteListItemRemove.emit();
+    };
+  }
+  descriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  labelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  metadataWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed
+    });
+    this.shiftPressed = false;
+  }
+  textDescriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  textLabelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  async toggleSelected(coerce) {
+    if (this.disabled) {
+      return;
     }
-    renderRemoveAction() {
-        if (!this.removable) {
-            return null;
-        }
-        return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderIcon() {
+    const { icon } = this;
+    if (!icon) {
+      return null;
     }
-    renderSecondaryAction() {
-        const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
-        return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action },
-            h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+    const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
+    return (h("span", { class: CSS.icon },
+      h("calcite-icon", { scale: "s", icon: iconName })));
+  }
+  renderRemoveAction() {
+    if (!this.removable) {
+      return null;
     }
-    render() {
-        const description = this.textDescription ? (h("span", { class: CSS.description }, this.textDescription)) : null;
-        return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() },
-            h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": this.textLabel },
-                this.renderIcon(),
-                h("div", { class: CSS.textContainer },
-                    h("span", { class: CSS.title }, this.textLabel),
-                    description)),
-            this.renderSecondaryAction()));
+    return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+  }
+  renderSecondaryAction() {
+    const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
+    return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action },
+      h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+  }
+  render() {
+    const description = this.description || this.textDescription;
+    const label = this.label || this.textLabel;
+    return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() },
+      h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": label },
+        this.renderIcon(),
+        h("div", { class: CSS.textContainer },
+          h("span", { class: CSS.title }, label),
+          description ? h("span", { class: CSS.description }, description) : null)),
+      this.renderSecondaryAction()));
+  }
+  static get is() { return "calcite-pick-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-pick-list-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-pick-list-item.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "An optional description for this item.  This will appear below the label text."
+      },
+      "attribute": "description",
+      "reflect": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When true, the item cannot be clicked and is visually muted."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disableDeselect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When false, the item cannot be deselected by user interaction."
+      },
+      "attribute": "disable-deselect",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ICON_TYPES | null",
+        "resolved": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square",
+        "references": {
+          "ICON_TYPES": {
+            "location": "import",
+            "path": "../calcite-pick-list/resources"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null."
+      },
+      "attribute": "icon",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The main label for this item. This will appear next to the icon."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "metadata": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, unknown>",
+        "resolved": "{ [x: string]: unknown; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+      }
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to display a remove action that removes the item from the list."
+      },
+      "attribute": "removable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "textDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "use description instead.",
+            "name": "deprecated"
+          }],
+        "text": "An optional description for this item.  This will appear below the label text."
+      },
+      "attribute": "text-description",
+      "reflect": true
+    },
+    "textLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use label instead.",
+            "name": "deprecated"
+          }],
+        "text": "The main label for this item. This will appear next to the icon."
+      },
+      "attribute": "text-label",
+      "reflect": true
+    },
+    "textRemove": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text for the remove item buttons. Only applicable if removable is true."
+      },
+      "attribute": "text-remove",
+      "reflect": true,
+      "defaultValue": "TEXT.remove"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A unique value used to identify this item - similar to the value attribute on an <input>."
+      },
+      "attribute": "value",
+      "reflect": true
     }
-    static get is() { return "calcite-pick-list-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-pick-list-item.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-pick-list-item.css"]
-    }; }
-    static get properties() { return {
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "When true, the item cannot be clicked and is visually muted."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get events() { return [{
+      "method": "calciteListItemChange",
+      "name": "calciteListItemChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListItemChange",
+            "name": "event"
+          }],
+        "text": "Emitted whenever the item is selected or unselected."
+      },
+      "complexType": {
+        "original": "{\n    item: HTMLCalcitePickListItemElement;\n    value: string;\n    selected: boolean;\n    shiftPressed: boolean;\n  }",
+        "resolved": "{ item: any; value: string; selected: boolean; shiftPressed: boolean; }",
+        "references": {
+          "HTMLCalcitePickListItemElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteListItemRemove",
+      "name": "calciteListItemRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListItemRemove",
+            "name": "event"
+          }],
+        "text": "Emitted whenever the remove button is pressed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteListItemPropsChange",
+      "name": "calciteListItemPropsChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListItemPropsChange",
+            "name": "event"
+          }, {
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": "Emitted whenever the the item's textLabel, textDescription, value or metadata properties are modified."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "calciteListItemValueChange",
+      "name": "calciteListItemValueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListItemValueChange",
+            "name": "event"
+          }, {
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": "Emitted whenever the the item's value property is modified."
+      },
+      "complexType": {
+        "original": "{ oldValue: string; newValue: string }",
+        "resolved": "{ oldValue: string; newValue: string; }",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggleSelected": {
+      "complexType": {
+        "signature": "(coerce?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "disableDeselect": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When false, the item cannot be deselected by user interaction."
-            },
-            "attribute": "disable-deselect",
-            "reflect": false,
-            "defaultValue": "false"
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+        "tags": []
+      }
+    },
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "icon": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "ICON_TYPES | null",
-                "resolved": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square",
-                "references": {
-                    "ICON_TYPES": {
-                        "location": "import",
-                        "path": "../calcite-pick-list/resources"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null."
-            },
-            "attribute": "icon",
-            "reflect": true,
-            "defaultValue": "null"
-        },
-        "metadata": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "Record<string, unknown>",
-                "resolved": "{ [x: string]: unknown; }",
-                "references": {
-                    "Record": {
-                        "location": "global"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
-            }
-        },
-        "removable": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Set this to true to display a remove action that removes the item from the list."
-            },
-            "attribute": "removable",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "selected": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
-            },
-            "attribute": "selected",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "textDescription": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "An optional description for this item.  This will appear below the label text."
-            },
-            "attribute": "text-description",
-            "reflect": true
-        },
-        "textLabel": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The main label for this item. This will appear next to the icon."
-            },
-            "attribute": "text-label",
-            "reflect": true
-        },
-        "textRemove": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The text for the remove item buttons. Only applicable if removable is true."
-            },
-            "attribute": "text-remove",
-            "reflect": true,
-            "defaultValue": "TEXT.remove"
-        },
-        "value": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": true,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "A unique value used to identify this item - similar to the value attribute on an <input>."
-            },
-            "attribute": "value",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteListItemChange",
-            "name": "calciteListItemChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListItemChange",
-                        "name": "event"
-                    }],
-                "text": "Emitted whenever the item is selected or unselected."
-            },
-            "complexType": {
-                "original": "{\n    item: HTMLCalcitePickListItemElement;\n    value: string;\n    selected: boolean;\n    shiftPressed: boolean;\n  }",
-                "resolved": "{ item: any; value: string; selected: boolean; shiftPressed: boolean; }",
-                "references": {
-                    "HTMLCalcitePickListItemElement": {
-                        "location": "global"
-                    }
-                }
-            }
-        }, {
-            "method": "calciteListItemRemove",
-            "name": "calciteListItemRemove",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListItemRemove",
-                        "name": "event"
-                    }],
-                "text": "Emitted whenever the remove button is pressed."
-            },
-            "complexType": {
-                "original": "void",
-                "resolved": "void",
-                "references": {}
-            }
-        }, {
-            "method": "calciteListItemPropsChange",
-            "name": "calciteListItemPropsChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListItemPropsChange",
-                        "name": "event"
-                    }, {
-                        "text": undefined,
-                        "name": "internal"
-                    }],
-                "text": "Emitted whenever the the item's textLabel, textDescription, value or metadata properties are modified."
-            },
-            "complexType": {
-                "original": "void",
-                "resolved": "void",
-                "references": {}
-            }
-        }, {
-            "method": "calciteListItemValueChange",
-            "name": "calciteListItemValueChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListItemValueChange",
-                        "name": "event"
-                    }, {
-                        "text": undefined,
-                        "name": "internal"
-                    }],
-                "text": "Emitted whenever the the item's value property is modified."
-            },
-            "complexType": {
-                "original": "{ oldValue: string; newValue: string }",
-                "resolved": "{ oldValue: string; newValue: string; }",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "toggleSelected": {
-            "complexType": {
-                "signature": "(coerce?: boolean) => Promise<void>",
-                "parameters": [{
-                        "tags": [],
-                        "text": ""
-                    }],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
-                "tags": []
-            }
-        },
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get watchers() { return [{
-            "propName": "metadata",
-            "methodName": "metadataWatchHandler"
-        }, {
-            "propName": "selected",
-            "methodName": "selectedWatchHandler"
-        }, {
-            "propName": "textDescription",
-            "methodName": "textDescriptionWatchHandler"
-        }, {
-            "propName": "textLabel",
-            "methodName": "textLabelWatchHandler"
-        }, {
-            "propName": "value",
-            "methodName": "valueWatchHandler"
-        }]; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "description",
+      "methodName": "descriptionWatchHandler"
+    }, {
+      "propName": "label",
+      "methodName": "labelWatchHandler"
+    }, {
+      "propName": "metadata",
+      "methodName": "metadataWatchHandler"
+    }, {
+      "propName": "selected",
+      "methodName": "selectedWatchHandler"
+    }, {
+      "propName": "textDescription",
+      "methodName": "textDescriptionWatchHandler"
+    }, {
+      "propName": "textLabel",
+      "methodName": "textLabelWatchHandler"
+    }, {
+      "propName": "value",
+      "methodName": "valueWatchHandler"
+    }]; }
 }

dist/collection/calcite-pick-list-item/resources.js

 export const CSS = {
-    action: "action",
-    description: "description",
-    handle: "handle",
-    handleActivated: "handle--activated",
-    highlight: "highlight",
-    icon: "icon",
-    label: "label",
-    remove: "remove",
-    title: "title",
-    textContainer: "text-container"
+  action: "action",
+  description: "description",
+  handle: "handle",
+  handleActivated: "handle--activated",
+  highlight: "highlight",
+  icon: "icon",
+  label: "label",
+  remove: "remove",
+  title: "title",
+  textContainer: "text-container"
 };
 export const ICONS = {
-    checked: "check",
-    circle: "circleF",
-    remove: "x"
+  checked: "check",
+  circle: "circleF",
+  remove: "x"
 };
 export const SLOTS = {
-    secondaryAction: "secondary-action"
+  secondaryAction: "secondary-action"
 };
 export const TEXT = {
-    remove: "remove"
+  remove: "remove"
 };

dist/collection/calcite-pick-list/calcite-pick-list.js

@@ -10,286 +10,308 @@ import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 export class CalcitePickList {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = keyDownHandler.bind(this);
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-pick-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = keyDownHandler.bind(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-pick-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  static get is() { return "calcite-pick-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-pick-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-pick-list.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "filterEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
+      },
+      "attribute": "filter-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "filterPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder text for the filter input field."
+      },
+      "attribute": "filter-placeholder",
+      "reflect": true
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Multiple works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
+      },
+      "attribute": "multiple",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "textFilterPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use filterPlaceholder instead.",
+            "name": "deprecated"
+          }],
+        "text": "Placeholder text for the filter input field."
+      },
+      "attribute": "text-filter-placeholder",
+      "reflect": true,
+      "defaultValue": "TEXT.filterResults"
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    static get is() { return "calcite-pick-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-pick-list.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-pick-list.css"]
-    }; }
-    static get properties() { return {
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get states() { return {
+    "selectedValues": {},
+    "dataForFilter": {}
+  }; }
+  static get events() { return [{
+      "method": "calciteListChange",
+      "name": "calciteListChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListChange",
+            "name": "event"
+          }],
+        "text": "Emitted when any of the item selections have changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getSelectedItems": {
+      "complexType": {
+        "signature": "() => Promise<Map<string, HTMLCalcitePickListItemElement>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Map": {
+            "location": "global"
+          },
+          "HTMLCalcitePickListItemElement": {
+            "location": "global"
+          }
         },
-        "filterEnabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
-            },
-            "attribute": "filter-enabled",
-            "reflect": true,
-            "defaultValue": "false"
+        "return": "Promise<Map<string, any>>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "multiple": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Multiple works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
-            },
-            "attribute": "multiple",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "textFilterPlaceholder": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Placeholder text for the filter input field."
-            },
-            "attribute": "text-filter-placeholder",
-            "reflect": true,
-            "defaultValue": "TEXT.filterPlaceholder"
-        }
-    }; }
-    static get states() { return {
-        "selectedValues": {},
-        "dataForFilter": {}
-    }; }
-    static get events() { return [{
-            "method": "calciteListChange",
-            "name": "calciteListChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListChange",
-                        "name": "event"
-                    }],
-                "text": "Emitted when any of the item selections have changed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "getSelectedItems": {
-            "complexType": {
-                "signature": "() => Promise<Map<string, HTMLCalcitePickListItemElement>>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    },
-                    "Map": {
-                        "location": "global"
-                    },
-                    "HTMLCalcitePickListItemElement": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<Map<string, any>>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        },
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calciteListItemChange",
-            "method": "calciteListItemChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }, {
-            "name": "calciteListItemPropsChange",
-            "method": "calciteListItemPropsChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }, {
-            "name": "calciteListItemValueChange",
-            "method": "calciteListItemValueChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calciteListItemChange",
+      "method": "calciteListItemChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteListItemPropsChange",
+      "method": "calciteListItemPropsChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteListItemValueChange",
+      "method": "calciteListItemValueChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-pick-list/resources.js

 export const CSS = {
-    sticky: "sticky"
+  sticky: "sticky"
 };
 export var ICON_TYPES;
 (function (ICON_TYPES) {
-    ICON_TYPES["circle"] = "circle";
-    ICON_TYPES["square"] = "square";
-    ICON_TYPES["grip"] = "grip";
+  ICON_TYPES["circle"] = "circle";
+  ICON_TYPES["square"] = "square";
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 export const TEXT = {
-    filterPlaceholder: "Filter results"
+  filterResults: "Filter results"
 };

dist/collection/calcite-pick-list/shared-list-logic.js

@@ -5,4 +5,4 @@ import { debounce } from "lodash-es";
 export function mutationObserverCallback() {
-    this.setUpItems();
-    this.setUpFilter();
+  this.setUpItems();
+  this.setUpFilter();
 }
@@ -16,11 +16,11 @@ const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 export function initialize() {
-    this.setUpItems();
-    this.setUpFilter();
-    this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
+  this.setUpItems();
+  this.setUpFilter();
+  this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
 }
 export function initializeObserver() {
-    this.observer.observe(this.el, { childList: true, subtree: true });
+  this.observer.observe(this.el, { childList: true, subtree: true });
 }
 export function cleanUpObserver() {
-    this.observer.disconnect();
+  this.observer.disconnect();
 }
@@ -33,34 +33,34 @@ // --------------------------------------------------------------------------
 export function calciteListItemChangeHandler(event) {
-    const { selectedValues } = this;
-    const { item, value, selected, shiftPressed } = event.detail;
-    if (selected) {
-        if (!this.multiple) {
-            this.deselectSiblingItems(item);
-        }
-        if (this.multiple && shiftPressed) {
-            this.selectSiblings(item);
-        }
-        selectedValues.set(value, item);
+  const { selectedValues } = this;
+  const { item, value, selected, shiftPressed } = event.detail;
+  if (selected) {
+    if (!this.multiple) {
+      this.deselectSiblingItems(item);
     }
-    else {
-        selectedValues.delete(value);
-        if (this.multiple && shiftPressed) {
-            this.selectSiblings(item, true);
-        }
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item);
     }
-    if (!this.multiple) {
-        toggleSingleSelectItemTabbing(item, selected);
+    selectedValues.set(value, item);
+  }
+  else {
+    selectedValues.delete(value);
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item, true);
     }
-    this.lastSelectedItem = item;
-    this.emitCalciteListChange();
+  }
+  if (!this.multiple) {
+    toggleSingleSelectItemTabbing(item, selected);
+  }
+  this.lastSelectedItem = item;
+  this.emitCalciteListChange();
 }
 export function calciteListItemValueChangeHandler(event) {
-    event.stopPropagation();
-    const oldValue = event.detail.oldValue;
-    const selectedValues = this.selectedValues;
-    if (selectedValues.has(oldValue)) {
-        const item = selectedValues.get(oldValue);
-        selectedValues.delete(oldValue);
-        selectedValues.set(event.detail.newValue, item);
-    }
+  event.stopPropagation();
+  const oldValue = event.detail.oldValue;
+  const selectedValues = this.selectedValues;
+  if (selectedValues.has(oldValue)) {
+    const item = selectedValues.get(oldValue);
+    selectedValues.delete(oldValue);
+    selectedValues.set(event.detail.newValue, item);
+  }
 }
@@ -73,144 +73,144 @@ // --------------------------------------------------------------------------
 function isValidNavigationKey(key) {
-    return !!SUPPORTED_ARROW_KEYS.find((k) => k === key);
+  return !!SUPPORTED_ARROW_KEYS.find((k) => k === key);
 }
 export function keyDownHandler(event) {
-    const { key, target } = event;
-    if (!isValidNavigationKey(key)) {
-        return;
-    }
-    const { items, multiple } = this;
-    const { length: totalItems } = items;
-    const currentIndex = items.indexOf(target);
-    if (!totalItems || currentIndex === -1) {
-        return;
-    }
-    event.preventDefault();
-    const index = getRoundRobinIndex(currentIndex + (key === "ArrowUp" ? -1 : 1), totalItems);
-    const item = items[index];
-    toggleSingleSelectItemTabbing(item, true);
-    focusElement(item);
-    if (!multiple) {
-        item.selected = true;
-    }
+  const { key, target } = event;
+  if (!isValidNavigationKey(key)) {
+    return;
+  }
+  const { items, multiple } = this;
+  const { length: totalItems } = items;
+  const currentIndex = items.indexOf(target);
+  if (!totalItems || currentIndex === -1) {
+    return;
+  }
+  event.preventDefault();
+  const index = getRoundRobinIndex(currentIndex + (key === "ArrowUp" ? -1 : 1), totalItems);
+  const item = items[index];
+  toggleSingleSelectItemTabbing(item, true);
+  focusElement(item);
+  if (!multiple) {
+    item.selected = true;
+  }
 }
 export function internalCalciteListChangeEvent() {
-    this.calciteListChange.emit(this.selectedValues);
+  this.calciteListChange.emit(this.selectedValues);
 }
 function toggleSingleSelectItemTabbing(item, selectable) {
-    // using attribute intentionally
-    if (selectable) {
-        item.removeAttribute("tabindex");
-    }
-    else {
-        item.setAttribute("tabindex", "-1");
-    }
+  // using attribute intentionally
+  if (selectable) {
+    item.removeAttribute("tabindex");
+  }
+  else {
+    item.setAttribute("tabindex", "-1");
+  }
 }
 export function setFocus() {
-    const { multiple, items } = this;
-    if (items.length === 0) {
-        return;
-    }
-    if (multiple) {
-        return items[0].setFocus();
-    }
-    const selected = items.find((item) => item.selected);
-    return (selected ? selected : items[0]).setFocus();
+  const { multiple, items } = this;
+  if (items.length === 0) {
+    return;
+  }
+  if (multiple) {
+    return items[0].setFocus();
+  }
+  const selected = items.find((item) => item.selected);
+  return (selected ? selected : items[0]).setFocus();
 }
 export function setUpItems(tagName) {
-    this.items = Array.from(this.el.querySelectorAll(tagName));
-    let hasSelected = false;
-    const { items } = this;
-    items.forEach((item) => {
-        item.icon = this.getIconType();
-        if (!this.multiple) {
-            item.disableDeselect = true;
-            toggleSingleSelectItemTabbing(item, false);
-        }
-        if (item.selected) {
-            hasSelected = true;
-            toggleSingleSelectItemTabbing(item, true);
-            this.selectedValues.set(item.value, item);
-        }
-    });
-    const [first] = items;
-    if (!hasSelected && first) {
-        toggleSingleSelectItemTabbing(first, true);
+  this.items = Array.from(this.el.querySelectorAll(tagName));
+  let hasSelected = false;
+  const { items } = this;
+  items.forEach((item) => {
+    item.icon = this.getIconType();
+    if (!this.multiple) {
+      item.disableDeselect = true;
+      toggleSingleSelectItemTabbing(item, false);
     }
+    if (item.selected) {
+      hasSelected = true;
+      toggleSingleSelectItemTabbing(item, true);
+      this.selectedValues.set(item.value, item);
+    }
+  });
+  const [first] = items;
+  if (!hasSelected && first) {
+    toggleSingleSelectItemTabbing(first, true);
+  }
 }
 export function setUpFilter() {
-    if (this.filterEnabled) {
-        this.dataForFilter = this.getItemData();
-    }
+  if (this.filterEnabled) {
+    this.dataForFilter = this.getItemData();
+  }
 }
 export function deselectSiblingItems(item) {
-    this.items.forEach((currentItem) => {
-        if (currentItem.value !== item.value) {
-            currentItem.toggleSelected(false);
-            if (this.selectedValues.has(currentItem.value)) {
-                this.selectedValues.delete(currentItem.value);
-            }
-        }
-    });
+  this.items.forEach((currentItem) => {
+    if (currentItem.value !== item.value) {
+      currentItem.toggleSelected(false);
+      if (this.selectedValues.has(currentItem.value)) {
+        this.selectedValues.delete(currentItem.value);
+      }
+    }
+  });
 }
 export function selectSiblings(item, deselect = false) {
-    if (!this.lastSelectedItem) {
-        return;
+  if (!this.lastSelectedItem) {
+    return;
+  }
+  const { items } = this;
+  const start = items.findIndex((currentItem) => {
+    return currentItem.value === this.lastSelectedItem.value;
+  });
+  const end = items.findIndex((currentItem) => {
+    return currentItem.value === item.value;
+  });
+  items.slice(Math.min(start, end), Math.max(start, end)).forEach((currentItem) => {
+    currentItem.toggleSelected(!deselect);
+    if (!deselect) {
+      this.selectedValues.set(currentItem.value, currentItem);
     }
-    const { items } = this;
-    const start = items.findIndex((currentItem) => {
-        return currentItem.value === this.lastSelectedItem.value;
-    });
-    const end = items.findIndex((currentItem) => {
-        return currentItem.value === item.value;
-    });
-    items.slice(Math.min(start, end), Math.max(start, end)).forEach((currentItem) => {
-        currentItem.toggleSelected(!deselect);
-        if (!deselect) {
-            this.selectedValues.set(currentItem.value, currentItem);
-        }
-        else {
-            this.selectedValues.delete(currentItem.value);
-        }
-    });
+    else {
+      this.selectedValues.delete(currentItem.value);
+    }
+  });
 }
 let groups;
 export function handleFilter(event) {
-    const filteredData = event.detail;
-    const values = filteredData.map((item) => item.value);
-    if (!groups) {
-        groups = new Set();
+  const filteredData = event.detail;
+  const values = filteredData.map((item) => item.value);
+  if (!groups) {
+    groups = new Set();
+  }
+  const matchedItems = this.items.filter((item) => {
+    const parent = item.parentElement;
+    const grouped = parent.matches("calcite-pick-list-group");
+    if (grouped) {
+      groups.add(parent);
     }
-    const matchedItems = this.items.filter((item) => {
-        const parent = item.parentElement;
-        const grouped = parent.matches("calcite-pick-list-group");
-        if (grouped) {
-            groups.add(parent);
-        }
-        const matches = values.includes(item.value);
-        item.hidden = !matches;
-        return matches;
-    });
-    groups.forEach((group) => {
-        const hasAtLeastOneMatch = matchedItems.some((item) => group.contains(item));
-        group.hidden = !hasAtLeastOneMatch;
-        if (!hasAtLeastOneMatch) {
-            return;
-        }
-        const parentItem = getSlotted(group, "parent-item");
-        if (parentItem) {
-            parentItem.hidden = false;
-            if (matchedItems.includes(parentItem)) {
-                Array.from(group.children).forEach((child) => (child.hidden = false));
-            }
-        }
-    });
-    groups.clear();
+    const matches = values.includes(item.value);
+    item.hidden = !matches;
+    return matches;
+  });
+  groups.forEach((group) => {
+    const hasAtLeastOneMatch = matchedItems.some((item) => group.contains(item));
+    group.hidden = !hasAtLeastOneMatch;
+    if (!hasAtLeastOneMatch) {
+      return;
+    }
+    const parentItem = getSlotted(group, "parent-item");
+    if (parentItem) {
+      parentItem.hidden = false;
+      if (matchedItems.includes(parentItem)) {
+        Array.from(group.children).forEach((child) => (child.hidden = false));
+      }
+    }
+  });
+  groups.clear();
 }
 export function getItemData() {
-    return this.items.map((item) => ({
-        label: item.textLabel,
-        description: item.textDescription,
-        metadata: item.metadata,
-        value: item.value
-    }));
+  return this.items.map((item) => ({
+    label: item.label || item.textLabel,
+    description: item.description || item.textDescription,
+    metadata: item.metadata,
+    value: item.value
+  }));
 }

dist/collection/calcite-pick-list/shared-list-render.js

 var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
 };
@@ -16,12 +16,13 @@ import { Host, h } from "@stencil/core";
 export const List = (_a) => {
-    var { props } = _a, rest = __rest(_a, ["props"]);
-    const { disabled, loading, filterEnabled, dataForFilter, handleFilter, textFilterPlaceholder, el } = props;
-    const defaultSlot = h("slot", null);
-    return (h(Host, Object.assign({ role: "menu", "aria-disabled": disabled.toString(), "aria-busy": loading.toString() }, rest),
-        h("section", null,
-            h("header", { class: { [CSS.sticky]: true } },
-                filterEnabled ? (h("calcite-filter", { data: dataForFilter, dir: getElementDir(el), placeholder: textFilterPlaceholder, "aria-label": textFilterPlaceholder, onCalciteFilterChange: handleFilter })) : null,
-                h("slot", { name: "menu-actions" })),
-            loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot))));
+  var { props } = _a, rest = __rest(_a, ["props"]);
+  const { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, textFilterPlaceholder, el } = props;
+  const defaultSlot = h("slot", null);
+  const placeholder = filterPlaceholder || textFilterPlaceholder;
+  return (h(Host, Object.assign({ role: "menu", "aria-disabled": disabled.toString(), "aria-busy": loading.toString() }, rest),
+    h("section", null,
+      h("header", { class: { [CSS.sticky]: true } },
+        filterEnabled ? (h("calcite-filter", { data: dataForFilter, dir: getElementDir(el), placeholder: placeholder, "aria-label": placeholder, onCalciteFilterChange: handleFilter })) : null,
+        h("slot", { name: "menu-actions" })),
+      loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot))));
 };
 export default List;

dist/collection/calcite-pick-list/shared-list-tests.js

 import { newE2EPage } from "@stencil/core/testing";
 export function keyboardNavigation(listType) {
-    const getFocusedItemValue = (page) => page.evaluate(() => document.activeElement.value);
-    describe("multi selection", () => {
-        it("can be navigated with up/down arrow keys", async () => {
-            const page = await newE2EPage({
-                html: `
+  const getFocusedItemValue = (page) => page.evaluate(() => document.activeElement.value);
+  describe("multi selection", () => {
+    it("can be navigated with up/down arrow keys", async () => {
+      const page = await newE2EPage({
+        html: `
         <calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
         </calcite-${listType}-list>
       `
-            });
-            const list = await page.find(`calcite-${listType}-list`);
-            await list.callMethod("setFocus");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            await list.press("ArrowDown");
-            expect(await getFocusedItemValue(page)).toEqual("two");
-            await list.press("ArrowDown");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            await list.press("ArrowUp");
-            expect(await getFocusedItemValue(page)).toEqual("two");
-            await list.press("ArrowUp");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-        });
+      });
+      const list = await page.find(`calcite-${listType}-list`);
+      await list.callMethod("setFocus");
+      expect(await getFocusedItemValue(page)).toEqual("one");
+      await list.press("ArrowDown");
+      expect(await getFocusedItemValue(page)).toEqual("two");
+      await list.press("ArrowDown");
+      expect(await getFocusedItemValue(page)).toEqual("one");
+      await list.press("ArrowUp");
+      expect(await getFocusedItemValue(page)).toEqual("two");
+      await list.press("ArrowUp");
+      expect(await getFocusedItemValue(page)).toEqual("one");
     });
-    describe("single selection", () => {
-        describe("with selected item", () => {
-            it("can be navigated with up/down arrow keys", async () => {
-                const page = await newE2EPage({
-                    html: `
+  });
+  describe("single selection", () => {
+    describe("with selected item", () => {
+      it("can be navigated with up/down arrow keys", async () => {
+        const page = await newE2EPage({
+          html: `
         <calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two" selected></calcite-${listType}-list-item>
         </calcite-${listType}-list>
       `
-                });
-                const list = await page.find(`calcite-${listType}-list`);
-                await list.callMethod("setFocus");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-            });
         });
-        describe("no selected item", () => {
-            it("can be navigated with up/down arrow keys", async () => {
-                const page = await newE2EPage({
-                    html: `
+        const list = await page.find(`calcite-${listType}-list`);
+        await list.callMethod("setFocus");
+        expect(await getFocusedItemValue(page)).toEqual("two");
+        await list.press("ArrowDown");
+        expect(await getFocusedItemValue(page)).toEqual("one");
+        await list.press("ArrowDown");
+        expect(await getFocusedItemValue(page)).toEqual("two");
+        await list.press("ArrowUp");
+        expect(await getFocusedItemValue(page)).toEqual("one");
+        await list.press("ArrowUp");
+        expect(await getFocusedItemValue(page)).toEqual("two");
+      });
+    });
+    describe("no selected item", () => {
+      it("can be navigated with up/down arrow keys", async () => {
+        const page = await newE2EPage({
+          html: `
         <calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
         </calcite-${listType}-list>
       `
-                });
-                const list = await page.find(`calcite-${listType}-list`);
-                await list.callMethod("setFocus");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-            });
         });
+        const list = await page.find(`calcite-${listType}-list`);
+        await list.callMethod("setFocus");
+        expect(await getFocusedItemValue(page)).toEqual("one");
+        await list.press("ArrowDown");
+        expect(await getFocusedItemValue(page)).toEqual("two");
+        await list.press("ArrowDown");
+        expect(await getFocusedItemValue(page)).toEqual("one");
+        await list.press("ArrowUp");
+        expect(await getFocusedItemValue(page)).toEqual("two");
+        await list.press("ArrowUp");
+        expect(await getFocusedItemValue(page)).toEqual("one");
+      });
     });
+  });
 }
 export function selectionAndDeselection(listType) {
-    describe("when multiple is false and a item is clicked", () => {
-        it("should emit an event with the last selected item data", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
+  describe("when multiple is false and a item is clicked", () => {
+    it("should emit an event with the last selected item data", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item2 = await list.find("[value=two]");
-            const toggleSpy = await list.spyOnEvent("calciteListChange");
-            await item1.click();
-            await item2.click();
-            expect(toggleSpy).toHaveReceivedEventTimes(2);
-        });
+      const list = await page.find(`calcite-${listType}-list`);
+      const item1 = await list.find("[value=one]");
+      const item2 = await list.find("[value=two]");
+      const toggleSpy = await list.spyOnEvent("calciteListChange");
+      await item1.click();
+      await item2.click();
+      expect(toggleSpy).toHaveReceivedEventTimes(2);
     });
-    describe("when multiple is true and a item is clicked", () => {
-        it("should emit an event with each selected item's data", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
+  });
+  describe("when multiple is true and a item is clicked", () => {
+    it("should emit an event with each selected item's data", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list multiple>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item2 = await list.find("[value=two]");
-            const toggleSpy = await list.spyOnEvent("calciteListChange");
-            await item1.click();
-            await item2.click();
-            await item2.click(); // deselect
-            expect(toggleSpy).toHaveReceivedEventTimes(3);
-        });
+      const list = await page.find(`calcite-${listType}-list`);
+      const item1 = await list.find("[value=one]");
+      const item2 = await list.find("[value=two]");
+      const toggleSpy = await list.spyOnEvent("calciteListChange");
+      await item1.click();
+      await item2.click();
+      await item2.click(); // deselect
+      expect(toggleSpy).toHaveReceivedEventTimes(3);
     });
-    describe("preselected items", () => {
-        it("should be included in the list of selected items", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
+  });
+  describe("preselected items", () => {
+    it("should be included in the list of selected items", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list multiple>
+          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const numSelected = await page.evaluate(async (listType) => {
-                const list = document.querySelector(`calcite-${listType}-list`);
-                return (await list.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(1);
-        });
+      const numSelected = await page.evaluate(async (listType) => {
+        const list = document.querySelector(`calcite-${listType}-list`);
+        return (await list.getSelectedItems()).size;
+      }, listType);
+      expect(numSelected).toBe(1);
     });
-    describe("shift click behavior", () => {
-        it("should multi-select", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" text-label="Three"></calcite-${listType}-list-item>
+  });
+  describe("shift click behavior", () => {
+    it("should multi-select", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list multiple>
+          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="three" label="Three"></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item3 = await list.find("[value=three]");
-            await item1.click();
-            await page.keyboard.down("Shift");
-            await item3.click();
-            await page.keyboard.up("Shift");
-            const numSelected = await page.evaluate(async (listType) => {
-                const list = document.querySelector(`calcite-${listType}-list`);
-                return (await list.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(3);
-        });
-        it("should multi de-select", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" text-label="Three" selected></calcite-${listType}-list-item>
+      const list = await page.find(`calcite-${listType}-list`);
+      const item1 = await list.find("[value=one]");
+      const item3 = await list.find("[value=three]");
+      await item1.click();
+      await page.keyboard.down("Shift");
+      await item3.click();
+      await page.keyboard.up("Shift");
+      const numSelected = await page.evaluate(async (listType) => {
+        const list = document.querySelector(`calcite-${listType}-list`);
+        return (await list.getSelectedItems()).size;
+      }, listType);
+      expect(numSelected).toBe(3);
+    });
+    it("should multi de-select", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list multiple>
+          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="three" label="Three" selected></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item3 = await list.find("[value=three]");
-            await item1.click();
-            await page.keyboard.down("Shift");
-            await item3.click();
-            await page.keyboard.up("Shift");
-            const numSelected = await page.evaluate(async (type) => {
-                const domList = document.querySelector(`calcite-${type}-list`);
-                return (await domList.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(0);
-        });
+      const list = await page.find(`calcite-${listType}-list`);
+      const item1 = await list.find("[value=one]");
+      const item3 = await list.find("[value=three]");
+      await item1.click();
+      await page.keyboard.down("Shift");
+      await item3.click();
+      await page.keyboard.up("Shift");
+      const numSelected = await page.evaluate(async (type) => {
+        const domList = document.querySelector(`calcite-${type}-list`);
+        return (await domList.getSelectedItems()).size;
+      }, listType);
+      expect(numSelected).toBe(0);
     });
-    describe("calciteListChange event", () => {
-        it("should fire event when a selection changed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item text-label="test" value="example"></calcite-${listType}-list-item>
+  });
+  describe("calciteListChange event", () => {
+    it("should fire event when a selection changed", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list>
+          <calcite-${listType}-list-item label="test" value="example"></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const item = await page.find(`calcite-${listType}-list-item`);
-            await page.evaluate(() => {
-                document.addEventListener("calciteListChange", (event) => {
-                    window.eventDetail = event.detail;
-                });
-            });
-            await item.click();
-            await page.waitForChanges();
-            const eventDetail = await page.evaluateHandle(() => {
-                const detail = window.eventDetail;
-                return {
-                    size: detail.size,
-                    hasItem: detail.has("example")
-                };
-            });
-            const properties = await eventDetail.getProperties();
-            expect(eventDetail).toBeDefined();
-            expect(properties.get("size")._remoteObject.value).toBe(1);
-            expect(properties.get("hasItem")._remoteObject.value).toBe(true);
+      const item = await page.find(`calcite-${listType}-list-item`);
+      await page.evaluate(() => {
+        document.addEventListener("calciteListChange", (event) => {
+          window.eventDetail = event.detail;
         });
+      });
+      await item.click();
+      await page.waitForChanges();
+      const eventDetail = await page.evaluateHandle(() => {
+        const detail = window.eventDetail;
+        return {
+          size: detail.size,
+          hasItem: detail.has("example")
+        };
+      });
+      const properties = await eventDetail.getProperties();
+      expect(eventDetail).toBeDefined();
+      expect(properties.get("size")._remoteObject.value).toBe(1);
+      expect(properties.get("hasItem")._remoteObject.value).toBe(true);
     });
-    describe("value changes after item is selected", () => {
-        it("should update the value in selectedValues map", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" text-label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" text-label="Two" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" text-label="Three" selected></calcite-${listType}-list-item>
+  });
+  describe("value changes after item is selected", () => {
+    it("should update the value in selectedValues map", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-${listType}-list>
+          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="two" label="Two" selected></calcite-${listType}-list-item>
+          <calcite-${listType}-list-item value="three" label="Three" selected></calcite-${listType}-list-item>
         </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            await item1.click();
-            const hasValueOne = await page.evaluate(async (type) => {
-                const pageList = document.querySelector(`calcite-${type}-list`);
-                return (await pageList.getSelectedItems()).has("one");
-            }, listType);
-            expect(hasValueOne).toBe(true);
-            item1.setProperty("value", "four");
-            await page.waitForChanges();
-            const hasValues = await page.evaluate(async (type) => {
-                const pageList = document.querySelector(`calcite-${type}-list`);
-                const result = await pageList.getSelectedItems();
-                return {
-                    four: result.has("four"),
-                    one: result.has("one")
-                };
-            }, listType);
-            expect(hasValues.one).toBe(false);
-            expect(hasValues.four).toBe(true);
-        });
+      const list = await page.find(`calcite-${listType}-list`);
+      const item1 = await list.find("[value=one]");
+      await item1.click();
+      const hasValueOne = await page.evaluate(async (type) => {
+        const pageList = document.querySelector(`calcite-${type}-list`);
+        return (await pageList.getSelectedItems()).has("one");
+      }, listType);
+      expect(hasValueOne).toBe(true);
+      item1.setProperty("value", "four");
+      await page.waitForChanges();
+      const hasValues = await page.evaluate(async (type) => {
+        const pageList = document.querySelector(`calcite-${type}-list`);
+        const result = await pageList.getSelectedItems();
+        return {
+          four: result.has("four"),
+          one: result.has("one")
+        };
+      }, listType);
+      expect(hasValues.one).toBe(false);
+      expect(hasValues.four).toBe(true);
     });
+  });
 }
 export function filterBehavior(listType) {
-    let page = null;
-    let item1;
-    let item2;
-    let item1Visible;
-    let item2Visible;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<calcite-${listType}-list filter-enabled="true">
-        <calcite-${listType}-list-item value="1" text-label="One" text-description="uno"></calcite-${listType}-list-item>
-        <calcite-${listType}-list-item value="2" text-label="Two" text-description="dos"></calcite-${listType}-list-item>
+  let page = null;
+  let item1;
+  let item2;
+  let item1Visible;
+  let item2Visible;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<calcite-${listType}-list filter-enabled="true">
+        <calcite-${listType}-list-item value="1" label="One" description="uno"></calcite-${listType}-list-item>
+        <calcite-${listType}-list-item value="2" label="Two" description="dos"></calcite-${listType}-list-item>
       </calcite-${listType}-list>`);
-        item1 = await page.find(`calcite-${listType}-list-item[value="1"]`);
-        item2 = await page.find(`calcite-${listType}-list-item[value="2"]`);
-        item1.setProperty("metadata", { category: "first" });
-        item2.setProperty("metadata", { category: "second" });
-        await page.waitForChanges();
-        await page.evaluate((listType) => {
-            window.filter = document
-                .querySelector(`calcite-${listType}-list`)
-                .shadowRoot.querySelector("calcite-filter");
-            const filter = window.filter;
-            window.filterInput = filter.shadowRoot.querySelector("input");
-        }, listType);
+    item1 = await page.find(`calcite-${listType}-list-item[value="1"]`);
+    item2 = await page.find(`calcite-${listType}-list-item[value="2"]`);
+    item1.setProperty("metadata", { category: "first" });
+    item2.setProperty("metadata", { category: "second" });
+    await page.waitForChanges();
+    await page.evaluate((listType) => {
+      window.filter = document
+        .querySelector(`calcite-${listType}-list`)
+        .shadowRoot.querySelector("calcite-filter");
+      const filter = window.filter;
+      window.filterInput = filter.shadowRoot.querySelector("input");
+    }, listType);
+  });
+  it("should match text in the label prop", async () => {
+    // Match first item
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "one";
+      filterInput.dispatchEvent(new Event("input"));
     });
-    it("should match text in the text-label prop", async () => {
-        // Match first item
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "one";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item2.waitForNotVisible();
-        item1Visible = await item1.isVisible();
-        item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(true);
-        expect(item2Visible).toBe(false);
-        // Match second item
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "two";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item1.waitForNotVisible();
-        item1Visible = await item1.isVisible();
-        item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(false);
-        expect(item2Visible).toBe(true);
+    await item2.waitForNotVisible();
+    item1Visible = await item1.isVisible();
+    item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(true);
+    expect(item2Visible).toBe(false);
+    // Match second item
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "two";
+      filterInput.dispatchEvent(new Event("input"));
     });
-    it("should match text in the text-description prop", async () => {
-        // Match first item
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "uno";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item2.waitForNotVisible();
-        item1Visible = await item1.isVisible();
-        item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(true);
-        expect(item2Visible).toBe(false);
-        // Match second item
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "dos";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item1.waitForNotVisible();
-        item1Visible = await item1.isVisible();
-        item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(false);
-        expect(item2Visible).toBe(true);
+    await item1.waitForNotVisible();
+    item1Visible = await item1.isVisible();
+    item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(false);
+    expect(item2Visible).toBe(true);
+  });
+  it("should match text in the description prop", async () => {
+    // Match first item
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "uno";
+      filterInput.dispatchEvent(new Event("input"));
     });
-    it("should match text in the metadata prop", async () => {
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "first";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item2.waitForNotVisible();
-        let item1Visible = await item1.isVisible();
-        let item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(true);
-        expect(item2Visible).toBe(false);
-        await page.evaluate(() => {
-            const filterInput = window.filterInput;
-            filterInput.value = "second";
-            filterInput.dispatchEvent(new Event("input"));
-        });
-        await item1.waitForNotVisible();
-        item1Visible = await item1.isVisible();
-        item2Visible = await item2.isVisible();
-        expect(item1Visible).toBe(false);
-        expect(item2Visible).toBe(true);
+    await item2.waitForNotVisible();
+    item1Visible = await item1.isVisible();
+    item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(true);
+    expect(item2Visible).toBe(false);
+    // Match second item
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "dos";
+      filterInput.dispatchEvent(new Event("input"));
     });
+    await item1.waitForNotVisible();
+    item1Visible = await item1.isVisible();
+    item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(false);
+    expect(item2Visible).toBe(true);
+  });
+  it("should match text in the metadata prop", async () => {
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "first";
+      filterInput.dispatchEvent(new Event("input"));
+    });
+    await item2.waitForNotVisible();
+    let item1Visible = await item1.isVisible();
+    let item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(true);
+    expect(item2Visible).toBe(false);
+    await page.evaluate(() => {
+      const filterInput = window.filterInput;
+      filterInput.value = "second";
+      filterInput.dispatchEvent(new Event("input"));
+    });
+    await item1.waitForNotVisible();
+    item1Visible = await item1.isVisible();
+    item2Visible = await item2.isVisible();
+    expect(item1Visible).toBe(false);
+    expect(item2Visible).toBe(true);
+  });
 }
 export function disabledStates(listType) {
-    it("disabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-${listType}-list disabled>
-        <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
+  it("disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-${listType}-list disabled>
+        <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
       </calcite-${listType}-list>`);
-        const list = await page.find(`calcite-${listType}-list`);
-        const item1 = await list.find("[value=one]");
-        const toggleSpy = await list.spyOnEvent("calciteListChange");
-        await item1.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(0);
-    });
-    it("loading", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-${listType}-list loading>
-        <calcite-${listType}-list-item value="one" text-label="One"></calcite-${listType}-list-item>
+    const list = await page.find(`calcite-${listType}-list`);
+    const item1 = await list.find("[value=one]");
+    const toggleSpy = await list.spyOnEvent("calciteListChange");
+    await item1.click();
+    expect(toggleSpy).toHaveReceivedEventTimes(0);
+  });
+  it("loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-${listType}-list loading>
+        <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
       </calcite-${listType}-list>`);
-        const list = await page.find(`calcite-${listType}-list`);
-        const item1 = await list.find("[value=one]");
-        const toggleSpy = await list.spyOnEvent("calciteListChange");
-        await item1.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(0);
-    });
+    const list = await page.find(`calcite-${listType}-list`);
+    const item1 = await list.find("[value=one]");
+    const toggleSpy = await list.spyOnEvent("calciteListChange");
+    await item1.click();
+    expect(toggleSpy).toHaveReceivedEventTimes(0);
+  });
 }

dist/collection/calcite-shell-center-row/calcite-shell-center-row.js

@@ -10,115 +10,115 @@ import { Component, Element, Host, Prop, h } from "@stencil/core";
 export class CalciteShellCenterRow {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * Specifies the maxiumum height of the row.
-         */
-        this.heightScale = "s";
-        /**
-         * Arranges the component depending on the elements 'dir' property.
-         */
-        this.position = "end";
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { el } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } },
-            h("slot", null)));
-        const actionBar = getSlotted(el, SLOTS.actionBar);
-        const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } },
-            h("slot", { name: SLOTS.actionBar }))) : null;
-        const children = [actionBarNode, contentNode];
-        if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
-            children.reverse();
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * Specifies the maxiumum height of the row.
+     */
+    this.heightScale = "s";
+    /**
+     * Arranges the component depending on the elements 'dir' property.
+     */
+    this.position = "end";
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } },
+      h("slot", null)));
+    const actionBar = getSlotted(el, SLOTS.actionBar);
+    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } },
+      h("slot", { name: SLOTS.actionBar }))) : null;
+    const children = [actionBarNode, contentNode];
+    if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
+      children.reverse();
+    }
+    return h(Host, null, children);
+  }
+  static get is() { return "calcite-shell-center-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-shell-center-row.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-shell-center-row.css"]
+  }; }
+  static get properties() { return {
+    "detached": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This property makes the content area appear like a \"floating\" panel."
+      },
+      "attribute": "detached",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "heightScale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
-        return h(Host, null, children);
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maxiumum height of the row."
+      },
+      "attribute": "height-scale",
+      "reflect": true,
+      "defaultValue": "\"s\""
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalcitePosition",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "CalcitePosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Arranges the component depending on the elements 'dir' property."
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "\"end\""
     }
-    static get is() { return "calcite-shell-center-row"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-shell-center-row.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-shell-center-row.css"]
-    }; }
-    static get properties() { return {
-        "detached": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "This property makes the content area appear like a \"floating\" panel."
-            },
-            "attribute": "detached",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "heightScale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Specifies the maxiumum height of the row."
-            },
-            "attribute": "height-scale",
-            "reflect": true,
-            "defaultValue": "\"s\""
-        },
-        "position": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalcitePosition",
-                "resolved": "\"end\" | \"start\"",
-                "references": {
-                    "CalcitePosition": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Arranges the component depending on the elements 'dir' property."
-            },
-            "attribute": "position",
-            "reflect": true,
-            "defaultValue": "\"end\""
-        }
-    }; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-shell-center-row/resources.js

 export const CSS = {
-    actionBarContainer: "action-bar-container",
-    content: "content"
+  actionBarContainer: "action-bar-container",
+  content: "content"
 };
 export const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };

dist/collection/calcite-shell-panel/calcite-shell-panel.js

@@ -8,151 +8,151 @@ import { Component, Event, Host, Prop, Watch, h } from "@stencil/core";
 export class CalciteShellPanel {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hide the content panel.
-         */
-        this.collapsed = false;
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * This sets limits the height of the content area. It only applies when detached is true.
-         */
-        this.detachedScale = "m";
-    }
-    watchHandler() {
-        this.calciteShellPanelToggle.emit();
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { collapsed, detached, position } = this;
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed },
-            h("slot", null)));
-        const actionBarNode = h("slot", { name: SLOTS.actionBar });
-        const mainNodes = [actionBarNode, contentNode];
-        if (position === "end") {
-            mainNodes.reverse();
+    /**
+     * Hide the content panel.
+     */
+    this.collapsed = false;
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * This sets limits the height of the content area. It only applies when detached is true.
+     */
+    this.detachedScale = "m";
+  }
+  watchHandler() {
+    this.calciteShellPanelToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { collapsed, detached, position } = this;
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed },
+      h("slot", null)));
+    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const mainNodes = [actionBarNode, contentNode];
+    if (position === "end") {
+      mainNodes.reverse();
+    }
+    return h(Host, null, mainNodes);
+  }
+  static get is() { return "calcite-shell-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-shell-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-shell-panel.css"]
+  }; }
+  static get properties() { return {
+    "collapsed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hide the content panel."
+      },
+      "attribute": "collapsed",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "detached": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This property makes the content area appear like a \"floating\" panel."
+      },
+      "attribute": "detached",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "detachedScale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteScale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "CalciteScale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
-        return h(Host, null, mainNodes);
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This sets limits the height of the content area. It only applies when detached is true."
+      },
+      "attribute": "detached-scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalcitePosition",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "CalcitePosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Arranges the component depending on the elements 'dir' property."
+      },
+      "attribute": "position",
+      "reflect": true
     }
-    static get is() { return "calcite-shell-panel"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-shell-panel.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-shell-panel.css"]
-    }; }
-    static get properties() { return {
-        "collapsed": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Hide the content panel."
-            },
-            "attribute": "collapsed",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "detached": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "This property makes the content area appear like a \"floating\" panel."
-            },
-            "attribute": "detached",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "detachedScale": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteScale",
-                "resolved": "\"l\" | \"m\" | \"s\"",
-                "references": {
-                    "CalciteScale": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "This sets limits the height of the content area. It only applies when detached is true."
-            },
-            "attribute": "detached-scale",
-            "reflect": false,
-            "defaultValue": "\"m\""
-        },
-        "position": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalcitePosition",
-                "resolved": "\"end\" | \"start\"",
-                "references": {
-                    "CalcitePosition": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Arranges the component depending on the elements 'dir' property."
-            },
-            "attribute": "position",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteShellPanelToggle",
-            "name": "calciteShellPanelToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when collapse has been toggled."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get watchers() { return [{
-            "propName": "collapsed",
-            "methodName": "watchHandler"
-        }]; }
+  }; }
+  static get events() { return [{
+      "method": "calciteShellPanelToggle",
+      "name": "calciteShellPanelToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when collapse has been toggled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "collapsed",
+      "methodName": "watchHandler"
+    }]; }
 }

dist/collection/calcite-shell-panel/resources.js

 export const CSS = {
-    content: "content",
-    contentDetached: "content--detached"
+  content: "content",
+  contentDetached: "content--detached"
 };
 export const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };

dist/collection/calcite-shell/calcite-shell.js

@@ -13,71 +13,71 @@ import { Component, Element, Host, Prop, h } from "@stencil/core";
 export class CalciteShell {
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHeader() {
-        const hasHeader = !!getSlotted(this.el, SLOTS.header);
-        return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const hasHeader = !!getSlotted(this.el, SLOTS.header);
+    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content },
+      h("slot", null)));
+  }
+  renderFooter() {
+    const hasFooter = !!getSlotted(this.el, SLOTS.footer);
+    return hasFooter ? (h("div", { class: CSS.footer },
+      h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderMain() {
+    const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
+    const mainClasses = {
+      [CSS.main]: true,
+      [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
+    };
+    return (h("div", { class: mainClasses },
+      h("slot", { name: SLOTS.primaryPanel }),
+      this.renderContent(),
+      h("slot", { name: SLOTS.centerRow }),
+      h("slot", { name: SLOTS.contextualPanel })));
+  }
+  render() {
+    return (h(Host, null,
+      this.renderHeader(),
+      this.renderMain(),
+      this.renderFooter()));
+  }
+  static get is() { return "calcite-shell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["calcite-shell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-shell.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    renderContent() {
-        return (h("div", { class: CSS.content },
-            h("slot", null)));
-    }
-    renderFooter() {
-        const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-        return hasFooter ? (h("div", { class: CSS.footer },
-            h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderMain() {
-        const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
-        const mainClasses = {
-            [CSS.main]: true,
-            [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
-        };
-        return (h("div", { class: mainClasses },
-            h("slot", { name: SLOTS.primaryPanel }),
-            this.renderContent(),
-            h("slot", { name: SLOTS.centerRow }),
-            h("slot", { name: SLOTS.contextualPanel })));
-    }
-    render() {
-        return (h(Host, null,
-            this.renderHeader(),
-            this.renderMain(),
-            this.renderFooter()));
-    }
-    static get is() { return "calcite-shell"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["calcite-shell.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-shell.css"]
-    }; }
-    static get properties() { return {
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-shell/resources.js

 export const CSS = {
-    main: "main",
-    mainReversed: "main--reversed",
-    content: "content",
-    footer: "footer"
+  main: "main",
+  mainReversed: "main--reversed",
+  content: "content",
+  footer: "footer"
 };
 export const SLOTS = {
-    centerRow: "center-row",
-    primaryPanel: "primary-panel",
-    contextualPanel: "contextual-panel",
-    header: "shell-header",
-    footer: "shell-footer"
+  centerRow: "center-row",
+  primaryPanel: "primary-panel",
+  contextualPanel: "contextual-panel",
+  header: "shell-header",
+  footer: "shell-footer"
 };

dist/collection/calcite-sortable-list/calcite-sortable-list.js

@@ -7,220 +7,220 @@ import Sortable from "sortablejs";
 export class CalciteSortableList {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * The class on the handle elements.
-         */
-        this.handleSelector = "calcite-handle";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        this.handleActivated = false;
-        this.items = [];
-        this.observer = new MutationObserver(() => {
-            this.cleanUpDragAndDrop();
-            this.items = Array.from(this.el.children);
-            this.setUpDragAndDrop();
-        });
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.items = Array.from(this.el.children);
-        this.setUpDragAndDrop();
-        this.beginObserving();
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-        this.cleanUpDragAndDrop();
-    }
-    calciteHandleNudgeHandler(event) {
-        const sortItem = this.items.find((item) => {
-            return item.contains(event.detail.handle) || event.composedPath().includes(item);
-        });
-        const lastIndex = this.items.length - 1;
-        const startingIndex = this.items.indexOf(sortItem);
-        let appendInstead = false;
-        let buddyIndex;
-        switch (event.detail.direction) {
-            case "up":
-                event.preventDefault();
-                if (startingIndex === 0) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex - 1;
-                }
-                break;
-            case "down":
-                event.preventDefault();
-                if (startingIndex === lastIndex) {
-                    buddyIndex = 0;
-                }
-                else if (startingIndex === lastIndex - 1) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex + 2;
-                }
-                break;
-            default:
-                return;
+    /**
+     * The class on the handle elements.
+     */
+    this.handleSelector = "calcite-handle";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    this.handleActivated = false;
+    this.items = [];
+    this.observer = new MutationObserver(() => {
+      this.cleanUpDragAndDrop();
+      this.items = Array.from(this.el.children);
+      this.setUpDragAndDrop();
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.items = Array.from(this.el.children);
+    this.setUpDragAndDrop();
+    this.beginObserving();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.cleanUpDragAndDrop();
+  }
+  calciteHandleNudgeHandler(event) {
+    const sortItem = this.items.find((item) => {
+      return item.contains(event.detail.handle) || event.composedPath().includes(item);
+    });
+    const lastIndex = this.items.length - 1;
+    const startingIndex = this.items.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    switch (event.detail.direction) {
+      case "up":
+        event.preventDefault();
+        if (startingIndex === 0) {
+          appendInstead = true;
         }
-        this.observer.disconnect();
-        if (appendInstead) {
-            sortItem.parentElement.appendChild(sortItem);
+        else {
+          buddyIndex = startingIndex - 1;
         }
+        break;
+      case "down":
+        event.preventDefault();
+        if (startingIndex === lastIndex) {
+          buddyIndex = 0;
+        }
+        else if (startingIndex === lastIndex - 1) {
+          appendInstead = true;
+        }
         else {
-            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+          buddyIndex = startingIndex + 2;
         }
-        this.items = Array.from(this.el.children);
-        event.detail.handle.activated = true;
-        event.detail.handle.setFocus();
-        this.beginObserving();
+        break;
+      default:
+        return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpDragAndDrop() {
-        this.sortable = Sortable.create(this.el, {
-            handle: this.handleSelector,
-            // Changed sorting within list
-            onUpdate: () => {
-                this.items = Array.from(this.el.children);
-                this.calciteListOrderChange.emit();
-            },
-            // Element dragging started
-            onStart: () => {
-                this.observer.disconnect();
-            },
-            // Element dragging ended
-            onEnd: () => {
-                this.beginObserving();
-            }
-        });
+    this.observer.disconnect();
+    if (appendInstead) {
+      sortItem.parentElement.appendChild(sortItem);
     }
-    cleanUpDragAndDrop() {
-        this.sortable.destroy();
-        this.sortable = null;
+    else {
+      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
-    beginObserving() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    this.items = Array.from(this.el.children);
+    event.detail.handle.activated = true;
+    event.detail.handle.setFocus();
+    this.beginObserving();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpDragAndDrop() {
+    this.sortable = Sortable.create(this.el, {
+      handle: this.handleSelector,
+      // Changed sorting within list
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
+      },
+      // Element dragging started
+      onStart: () => {
+        this.observer.disconnect();
+      },
+      // Element dragging ended
+      onEnd: () => {
+        this.beginObserving();
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    this.sortable.destroy();
+    this.sortable = null;
+  }
+  beginObserving() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "calcite-sortable-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-sortable-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-sortable-list.css"]
+  }; }
+  static get properties() { return {
+    "handleSelector": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The class on the handle elements."
+      },
+      "attribute": "handle-selector",
+      "reflect": false,
+      "defaultValue": "\"calcite-handle\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null,
-            h("slot", null)));
-    }
-    static get is() { return "calcite-sortable-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-sortable-list.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-sortable-list.css"]
-    }; }
-    static get properties() { return {
-        "handleSelector": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The class on the handle elements."
-            },
-            "attribute": "handle-selector",
-            "reflect": false,
-            "defaultValue": "\"calcite-handle\""
-        },
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        }
-    }; }
-    static get states() { return {
-        "handleActivated": {}
-    }; }
-    static get events() { return [{
-            "method": "calciteListOrderChange",
-            "name": "calciteListOrderChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListOrderChange",
-                        "name": "event"
-                    }],
-                "text": "Emmitted when the order of the list has changed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calciteHandleNudge",
-            "method": "calciteHandleNudgeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+  }; }
+  static get states() { return {
+    "handleActivated": {}
+  }; }
+  static get events() { return [{
+      "method": "calciteListOrderChange",
+      "name": "calciteListOrderChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListOrderChange",
+            "name": "event"
+          }],
+        "text": "Emmitted when the order of the list has changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calciteHandleNudge",
+      "method": "calciteHandleNudgeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-sortable-list/resources.js

 export const CSS = {
-    sortItem: "sort-item"
+  sortItem: "sort-item"
 };

dist/collection/calcite-tip-group/calcite-tip-group.js

 import { Component, Prop, h } from "@stencil/core";
 export class CalciteTipGroup {
-    render() {
-        return h("slot", null);
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "calcite-tip-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-tip-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-tip-group.css"]
+  }; }
+  static get properties() { return {
+    "groupTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The title used for all nested tips."
+      },
+      "attribute": "group-title",
+      "reflect": false
+    },
+    "textGroupTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "use groupTitle instead.",
+            "name": "deprecated"
+          }],
+        "text": "The title used for all nested tips."
+      },
+      "attribute": "text-group-title",
+      "reflect": false
     }
-    static get is() { return "calcite-tip-group"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-tip-group.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-tip-group.css"]
-    }; }
-    static get properties() { return {
-        "textGroupTitle": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The title used for all nested tips."
-            },
-            "attribute": "text-group-title",
-            "reflect": false
-        }
-    }; }
+  }; }
 }

dist/collection/calcite-tip-manager/calcite-tip-manager.js

@@ -8,352 +8,352 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 export class CalciteTipManager {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Alternate text for closing the `calcite-tip-manager`.
-         */
-        this.closed = false;
-        this.observer = new MutationObserver(() => this.setUpTips());
-        this.hideTipManager = () => {
-            this.closed = true;
-            this.calciteTipManagerToggle.emit();
-        };
-        this.previousClicked = () => {
-            this.previousTip();
-        };
-        this.nextClicked = () => {
-            this.nextTip();
-        };
-        this.tipManagerKeyUpHandler = (event) => {
-            if (event.target !== this.container) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowRight":
-                    event.preventDefault();
-                    this.nextTip();
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    this.previousTip();
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    this.selectedIndex = 0;
-                    break;
-                case "End":
-                    event.preventDefault();
-                    this.selectedIndex = this.total - 1;
-                    break;
-            }
-        };
-        this.storeContainerRef = (el) => {
-            this.container = el;
-        };
-    }
-    closedChangeHandler() {
-        this.direction = null;
-        this.calciteTipManagerToggle.emit();
-    }
-    selectedChangeHandler() {
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.setUpTips();
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    /**
+     * Alternate text for closing the `calcite-tip-manager`.
+     */
+    this.closed = false;
+    this.observer = new MutationObserver(() => this.setUpTips());
+    this.hideTipManager = () => {
+      this.closed = true;
+      this.calciteTipManagerToggle.emit();
+    };
+    this.previousClicked = () => {
+      this.previousTip();
+    };
+    this.nextClicked = () => {
+      this.nextTip();
+    };
+    this.tipManagerKeyUpHandler = (event) => {
+      if (event.target !== this.container) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          this.nextTip();
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          this.previousTip();
+          break;
+        case "Home":
+          event.preventDefault();
+          this.selectedIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          this.selectedIndex = this.total - 1;
+          break;
+      }
+    };
+    this.storeContainerRef = (el) => {
+      this.container = el;
+    };
+  }
+  closedChangeHandler() {
+    this.direction = null;
+    this.calciteTipManagerToggle.emit();
+  }
+  selectedChangeHandler() {
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setUpTips();
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async nextTip() {
+    this.direction = "advancing";
+    const nextIndex = this.selectedIndex + 1;
+    this.selectedIndex = (nextIndex + this.total) % this.total;
+  }
+  async previousTip() {
+    this.direction = "retreating";
+    const previousIndex = this.selectedIndex - 1;
+    this.selectedIndex = (previousIndex + this.total) % this.total;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpTips() {
+    const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
+    this.total = tips.length;
+    if (this.total === 0) {
+      return;
     }
-    componentDidUnload() {
-        this.observer.disconnect();
+    const selectedTip = this.el.querySelector("calcite-tip[selected]");
+    this.tips = tips;
+    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
+    tips.forEach((tip) => {
+      tip.nonDismissible = true;
+    });
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  showSelectedTip() {
+    this.tips.forEach((tip, index) => {
+      const isSelected = this.selectedIndex === index;
+      tip.selected = isSelected;
+      tip.hidden = !isSelected;
+    });
+  }
+  updateGroupTitle() {
+    const selectedTip = this.tips[this.selectedIndex];
+    const tipParent = selectedTip.closest("calcite-tip-group");
+    this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.groupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderPagination() {
+    const dir = getElementDir(this.el);
+    const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+    const nextLabel = intlNext || TEXT.next;
+    const previousLabel = intlPrevious || TEXT.previous;
+    const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+    return tips.length > 1 ? (h("footer", { class: CSS.pagination },
+      h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }),
+      h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`),
+      h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
+  }
+  render() {
+    const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
+    const closeLabel = intlClose || TEXT.close;
+    if (total === 0) {
+      return h(Host, null);
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async nextTip() {
-        this.direction = "advancing";
-        const nextIndex = this.selectedIndex + 1;
-        this.selectedIndex = (nextIndex + this.total) % this.total;
-    }
-    async previousTip() {
-        this.direction = "retreating";
-        const previousIndex = this.selectedIndex - 1;
-        this.selectedIndex = (previousIndex + this.total) % this.total;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpTips() {
-        const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
-        this.total = tips.length;
-        if (this.total === 0) {
-            return;
+    return (h(Host, null,
+      h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef },
+        h("header", { class: CSS.header },
+          h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle),
+          h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })),
+        h("div", { tabIndex: 0, class: {
+            [CSS.tipContainer]: true,
+            [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
+            [CSS.tipContainerRetreating]: !closed && direction === "retreating"
+          }, key: selectedIndex },
+          h("slot", null)),
+        this.renderPagination())));
+  }
+  static get is() { return "calcite-tip-manager"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-tip-manager.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-tip-manager.css"]
+  }; }
+  static get properties() { return {
+    "closed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Alternate text for closing the `calcite-tip-manager`."
+      },
+      "attribute": "closed",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "intlClose": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Alternate text for closing the tip."
+      },
+      "attribute": "intl-close",
+      "reflect": false
+    },
+    "intlDefaultTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The default group title for the `calcite-tip-manager`."
+      },
+      "attribute": "intl-default-title",
+      "reflect": false
+    },
+    "intlNext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Alternate text for navigating to the next tip."
+      },
+      "attribute": "intl-next",
+      "reflect": false
+    },
+    "intlPaginationLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Label that appears on hover of pagination icon."
+      },
+      "attribute": "intl-pagination-label",
+      "reflect": false
+    },
+    "intlPrevious": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Alternate text for navigating to the previous tip."
+      },
+      "attribute": "intl-previous",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
         }
-        const selectedTip = this.el.querySelector("calcite-tip[selected]");
-        this.tips = tips;
-        this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
-        tips.forEach((tip) => {
-            tip.nonDismissible = true;
-        });
-        this.showSelectedTip();
-        this.updateGroupTitle();
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    showSelectedTip() {
-        this.tips.forEach((tip, index) => {
-            const isSelected = this.selectedIndex === index;
-            tip.selected = isSelected;
-            tip.hidden = !isSelected;
-        });
-    }
-    updateGroupTitle() {
-        const selectedTip = this.tips[this.selectedIndex];
-        const tipParent = selectedTip.closest("calcite-tip-group");
-        this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.textGroupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderPagination() {
-        const dir = getElementDir(this.el);
-        const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
-        const nextLabel = intlNext || TEXT.next;
-        const previousLabel = intlPrevious || TEXT.previous;
-        const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
-        return tips.length > 1 ? (h("footer", { class: CSS.pagination },
-            h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }),
-            h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`),
-            h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
-    }
-    render() {
-        const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
-        const closeLabel = intlClose || TEXT.close;
-        if (total === 0) {
-            return h(Host, null);
-        }
-        return (h(Host, null,
-            h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef },
-                h("header", { class: CSS.header },
-                    h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle),
-                    h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })),
-                h("div", { tabIndex: 0, class: {
-                        [CSS.tipContainer]: true,
-                        [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
-                        [CSS.tipContainerRetreating]: !closed && direction === "retreating"
-                    }, key: selectedIndex },
-                    h("slot", null)),
-                this.renderPagination())));
-    }
-    static get is() { return "calcite-tip-manager"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-tip-manager.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-tip-manager.css"]
-    }; }
-    static get properties() { return {
-        "closed": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Alternate text for closing the `calcite-tip-manager`."
-            },
-            "attribute": "closed",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get states() { return {
+    "selectedIndex": {},
+    "tips": {},
+    "total": {},
+    "direction": {},
+    "groupTitle": {}
+  }; }
+  static get events() { return [{
+      "method": "calciteTipManagerToggle",
+      "name": "calciteTipManagerToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "nextTip": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "intlClose": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Alternate text for closing the tip."
-            },
-            "attribute": "intl-close",
-            "reflect": false
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "previousTip": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "intlDefaultTitle": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The default group title for the `calcite-tip-manager`."
-            },
-            "attribute": "intl-default-title",
-            "reflect": false
-        },
-        "intlNext": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Alternate text for navigating to the next tip."
-            },
-            "attribute": "intl-next",
-            "reflect": false
-        },
-        "intlPaginationLabel": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Label that appears on hover of pagination icon."
-            },
-            "attribute": "intl-pagination-label",
-            "reflect": false
-        },
-        "intlPrevious": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Alternate text for navigating to the previous tip."
-            },
-            "attribute": "intl-previous",
-            "reflect": false
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get states() { return {
-        "selectedIndex": {},
-        "tips": {},
-        "total": {},
-        "direction": {},
-        "groupTitle": {}
-    }; }
-    static get events() { return [{
-            "method": "calciteTipManagerToggle",
-            "name": "calciteTipManagerToggle",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "nextTip": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        },
-        "previousTip": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get watchers() { return [{
-            "propName": "closed",
-            "methodName": "closedChangeHandler"
-        }, {
-            "propName": "selectedIndex",
-            "methodName": "selectedChangeHandler"
-        }]; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "closed",
+      "methodName": "closedChangeHandler"
+    }, {
+      "propName": "selectedIndex",
+      "methodName": "selectedChangeHandler"
+    }]; }
 }

dist/collection/calcite-tip-manager/resources.js

 export const CSS = {
-    header: "header",
-    heading: "heading",
-    close: "close",
-    container: "container",
-    tipContainer: "tip-container",
-    tipContainerAdvancing: "tip-container--advancing",
-    tipContainerRetreating: "tip-container--retreating",
-    pagination: "pagination",
-    pagePosition: "page-position",
-    pageNext: "page-next",
-    pagePrevious: "page-previous"
+  header: "header",
+  heading: "heading",
+  close: "close",
+  container: "container",
+  tipContainer: "tip-container",
+  tipContainerAdvancing: "tip-container--advancing",
+  tipContainerRetreating: "tip-container--retreating",
+  pagination: "pagination",
+  pagePosition: "page-position",
+  pageNext: "page-next",
+  pagePrevious: "page-previous"
 };
 export const ICONS = {
-    chevronLeft: "chevron-left",
-    chevronRight: "chevron-right",
-    close: "x"
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  close: "x"
 };
 export const TEXT = {
-    defaultGroupTitle: "Tips",
-    defaultPaginationLabel: "Tip",
-    close: "Close",
-    previous: "Previous",
-    next: "Next"
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
 };

dist/collection/calcite-tip/calcite-tip.js

@@ -8,196 +8,196 @@ import { Component, Element, Event, Host, Prop, h } from "@stencil/core";
 export class CalciteTip {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * No longer displays the tip.
-         */
-        this.dismissed = false;
-        /**
-         * Indicates whether the tip can be dismissed.
-         */
-        this.nonDismissible = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.hideTip = () => {
-            this.dismissed = true;
-            this.calciteTipDismiss.emit();
-        };
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderHeader() {
-        const { nonDismissible, hideTip, intlClose, heading } = this;
-        const text = intlClose || TEXT.close;
-        const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
-        const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
-        return dismissButtonNode || headingNode ? (h("header", { class: CSS.header },
-            headingNode,
-            dismissButtonNode)) : null;
+    /**
+     * No longer displays the tip.
+     */
+    this.dismissed = false;
+    /**
+     * Indicates whether the tip can be dismissed.
+     */
+    this.nonDismissible = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.hideTip = () => {
+      this.dismissed = true;
+      this.calciteTipDismiss.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const { nonDismissible, hideTip, intlClose, heading } = this;
+    const text = intlClose || TEXT.close;
+    const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
+    const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
+    return dismissButtonNode || headingNode ? (h("header", { class: CSS.header },
+      headingNode,
+      dismissButtonNode)) : null;
+  }
+  renderImageFrame() {
+    const { el } = this;
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame },
+      h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderInfoNode() {
+    return (h("div", { class: CSS.info },
+      h("slot", null)));
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content },
+      this.renderImageFrame(),
+      this.renderInfoNode()));
+  }
+  render() {
+    return (h(Host, null,
+      h("article", { class: CSS.container, hidden: this.dismissed },
+        this.renderHeader(),
+        this.renderContent())));
+  }
+  static get is() { return "calcite-tip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-tip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-tip.css"]
+  }; }
+  static get properties() { return {
+    "dismissed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "No longer displays the tip."
+      },
+      "attribute": "dismissed",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "nonDismissible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the tip can be dismissed."
+      },
+      "attribute": "non-dismissible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The heading of the tip."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
+      },
+      "attribute": "selected",
+      "reflect": true
+    },
+    "intlClose": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Alternate text for closing the tip."
+      },
+      "attribute": "intl-close",
+      "reflect": false
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CalciteTheme",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "CalciteTheme": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to set the component's color scheme."
+      },
+      "attribute": "theme",
+      "reflect": true
     }
-    renderImageFrame() {
-        const { el } = this;
-        return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame },
-            h("slot", { name: SLOTS.thumbnail }))) : null;
-    }
-    renderInfoNode() {
-        return (h("div", { class: CSS.info },
-            h("slot", null)));
-    }
-    renderContent() {
-        return (h("div", { class: CSS.content },
-            this.renderImageFrame(),
-            this.renderInfoNode()));
-    }
-    render() {
-        return (h(Host, null,
-            h("article", { class: CSS.container, hidden: this.dismissed },
-                this.renderHeader(),
-                this.renderContent())));
-    }
-    static get is() { return "calcite-tip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-tip.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-tip.css"]
-    }; }
-    static get properties() { return {
-        "dismissed": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "No longer displays the tip."
-            },
-            "attribute": "dismissed",
-            "reflect": false,
-            "defaultValue": "false"
-        },
-        "nonDismissible": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Indicates whether the tip can be dismissed."
-            },
-            "attribute": "non-dismissible",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "heading": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The heading of the tip."
-            },
-            "attribute": "heading",
-            "reflect": false
-        },
-        "selected": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
-            },
-            "attribute": "selected",
-            "reflect": true
-        },
-        "intlClose": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Alternate text for closing the tip."
-            },
-            "attribute": "intl-close",
-            "reflect": false
-        },
-        "theme": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "CalciteTheme",
-                "resolved": "\"dark\" | \"light\"",
-                "references": {
-                    "CalciteTheme": {
-                        "location": "import",
-                        "path": "../interfaces"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Used to set the component's color scheme."
-            },
-            "attribute": "theme",
-            "reflect": true
-        }
-    }; }
-    static get events() { return [{
-            "method": "calciteTipDismiss",
-            "name": "calciteTipDismiss",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Emitted when the component has been dismissed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get elementRef() { return "el"; }
+  }; }
+  static get events() { return [{
+      "method": "calciteTipDismiss",
+      "name": "calciteTipDismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the component has been dismissed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

dist/collection/calcite-tip/resources.js

 export const CSS = {
-    container: "container",
-    header: "header",
-    heading: "heading",
-    close: "close",
-    imageFrame: "image-frame",
-    content: "content",
-    info: "info"
+  container: "container",
+  header: "header",
+  heading: "heading",
+  close: "close",
+  imageFrame: "image-frame",
+  content: "content",
+  info: "info"
 };
 export const ICONS = {
-    close: "x"
+  close: "x"
 };
 export const SLOTS = {
-    thumbnail: "thumbnail"
+  thumbnail: "thumbnail"
 };
 export const TEXT = {
-    close: "Close"
+  close: "Close"
 };

dist/collection/calcite-value-list-item/calcite-value-list-item.js

@@ -1,2 +0,2 @@
-import { Component, Element, Host, Method, Prop, h, Listen } from "@stencil/core";
+import { Component, Element, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
@@ -10,335 +10,370 @@ import guid from "../utils/guid";
 export class CalciteValueListItem {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted
-         */
-        this.disabled = false;
-        /**
-         * @internal When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.handleActivated = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        this.pickListItem = null;
-        this.guid = `calcite-value-list-item-${guid()}`;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.getPickListRef = (el) => (this.pickListItem = el);
-        this.handleKeyDown = (event) => {
-            if (event.key === " ") {
-                this.handleActivated = !this.handleActivated;
-            }
-        };
-        this.handleBlur = () => {
-            this.handleActivated = false;
-        };
-        this.handleSelectChange = (event) => {
-            this.selected = event.detail.selected;
-        };
-    }
+  constructor() {
+    /**
+     * When true, the item cannot be clicked and is visually muted
+     */
+    this.disabled = false;
+    /**
+     * @internal When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.handleActivated = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid()}`;
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    async toggleSelected(coerce) {
-        this.pickListItem.toggleSelected(coerce);
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  // --------------------------------------------------------------------------
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHandle() {
+    const { icon } = this;
+    if (icon === ICON_TYPES.grip) {
+      return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur },
+        h("calcite-icon", { scale: "s", icon: ICONS.drag })));
     }
-    async setFocus() {
-        var _a;
-        (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Events
-    //
-    // --------------------------------------------------------------------------
-    calciteListItemChangeHandler(event) {
-        // adjust item payload from wrapped item before bubbling
-        event.detail.item = this.el;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHandle() {
-        const { icon } = this;
-        if (icon === ICON_TYPES.grip) {
-            return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur },
-                h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+  }
+  render() {
+    return (h(Host, { "data-id": this.guid },
+      this.renderHandle(),
+      h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.label || this.textLabel, textDescription: this.description || this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value },
+        h("slot", { name: "secondary-action", slot: "secondary-action" }))));
+  }
+  static get is() { return "calcite-value-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-value-list-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-value-list-item.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "An optional description for this item. Will appear below the label text."
+      },
+      "attribute": "description",
+      "reflect": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When true, the item cannot be clicked and is visually muted"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disableDeselect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "When false, the item cannot be deselected by user interaction.",
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "disable-deselect",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "handleActivated": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "- stores the activated state of the drag handle.",
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "handle-activated",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ICON_TYPES | null",
+        "resolved": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square",
+        "references": {
+          "ICON_TYPES": {
+            "location": "import",
+            "path": "../calcite-pick-list/resources"
+          }
         }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null."
+      },
+      "attribute": "icon",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The main label for this item. Appears next to the icon."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "metadata": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, unknown>",
+        "resolved": "{ [x: string]: unknown; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+      }
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to display a remove action that removes the item from the list."
+      },
+      "attribute": "removable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "textLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use label instead.",
+            "name": "deprecated"
+          }],
+        "text": "The main label for this item. Appears next to the icon."
+      },
+      "attribute": "text-label",
+      "reflect": true
+    },
+    "textDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "use description instead.",
+            "name": "deprecated"
+          }],
+        "text": "An optional description for this item. Will appear below the label text."
+      },
+      "attribute": "text-description",
+      "reflect": true
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A unique value used to identify this item - similar to the value attribute on an <input>."
+      },
+      "attribute": "value",
+      "reflect": true
     }
-    render() {
-        return (h(Host, { "data-id": this.guid },
-            this.renderHandle(),
-            h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.textLabel, textDescription: this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value },
-                h("slot", { name: "secondary-action", slot: "secondary-action" }))));
-    }
-    static get is() { return "calcite-value-list-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-value-list-item.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-value-list-item.css"]
-    }; }
-    static get properties() { return {
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "When true, the item cannot be clicked and is visually muted"
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get methods() { return {
+    "toggleSelected": {
+      "complexType": {
+        "signature": "(coerce?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "disableDeselect": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [{
-                        "text": "When false, the item cannot be deselected by user interaction.",
-                        "name": "internal"
-                    }],
-                "text": ""
-            },
-            "attribute": "disable-deselect",
-            "reflect": false,
-            "defaultValue": "false"
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "handleActivated": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [{
-                        "text": "- stores the activated state of the drag handle.",
-                        "name": "internal"
-                    }],
-                "text": ""
-            },
-            "attribute": "handle-activated",
-            "reflect": false,
-            "defaultValue": "false"
-        },
-        "icon": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "ICON_TYPES | null",
-                "resolved": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square",
-                "references": {
-                    "ICON_TYPES": {
-                        "location": "import",
-                        "path": "../calcite-pick-list/resources"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null."
-            },
-            "attribute": "icon",
-            "reflect": true,
-            "defaultValue": "null"
-        },
-        "metadata": {
-            "type": "unknown",
-            "mutable": false,
-            "complexType": {
-                "original": "Record<string, unknown>",
-                "resolved": "{ [x: string]: unknown; }",
-                "references": {
-                    "Record": {
-                        "location": "global"
-                    }
-                }
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
-            }
-        },
-        "removable": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Set this to true to display a remove action that removes the item from the list."
-            },
-            "attribute": "removable",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "selected": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
-            },
-            "attribute": "selected",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "textLabel": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": true,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The main label for this item. Appears next to the icon."
-            },
-            "attribute": "text-label",
-            "reflect": true
-        },
-        "textDescription": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": "An optional description for this item. Will appear below the label text."
-            },
-            "attribute": "text-description",
-            "reflect": true
-        },
-        "value": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": true,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "A unique value used to identify this item - similar to the value attribute on an <input>."
-            },
-            "attribute": "value",
-            "reflect": true
-        }
-    }; }
-    static get methods() { return {
-        "toggleSelected": {
-            "complexType": {
-                "signature": "(coerce?: boolean) => Promise<void>",
-                "parameters": [{
-                        "tags": [],
-                        "text": ""
-                    }],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        },
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calciteListItemChange",
-            "method": "calciteListItemChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calciteListItemChange",
+      "method": "calciteListItemChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-value-list-item/resources.js

 export const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };

dist/collection/calcite-value-list/calcite-value-list.js

@@ -12,404 +12,426 @@ import Sortable from "sortablejs";
 export class CalciteValueList {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, the items will be sortable via drag and drop.
-         */
-        this.dragEnabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple Works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = (event) => {
-            const handleElement = event
-                .composedPath()
-                .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
-            const item = event
-                .composedPath()
-                .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-            // Only trigger keyboard sorting when the internal drag handle is focused and activated
-            if (!handleElement || !item.handleActivated) {
-                keyDownHandler.call(this, event);
-                return;
-            }
-            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
-                return;
-            }
-            event.preventDefault();
-            const { el, items } = this;
-            const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-            const currentIndex = items.indexOf(item);
-            const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
-            if (nextIndex === items.length - 1) {
-                el.appendChild(item);
-            }
-            else {
-                const itemAtNextIndex = el.children[nextIndex];
-                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
-                    ? itemAtNextIndex.nextElementSibling
-                    : itemAtNextIndex;
-                el.insertBefore(item, insertionReferenceItem);
-            }
-            requestAnimationFrame(() => handleElement.focus());
-            item.handleActivated = true;
-        };
-    }
+  constructor() {
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidLoad() {
-        this.setUpDragAndDrop();
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-        this.cleanUpDragAndDrop();
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, the items will be sortable via drag and drop.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple Works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-value-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      const handleElement = event
+        .composedPath()
+        .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
+      const item = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+      // Only trigger keyboard sorting when the internal drag handle is focused and activated
+      if (!handleElement || !item.handleActivated) {
+        keyDownHandler.call(this, event);
+        return;
+      }
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const { el, items } = this;
+      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+      const currentIndex = items.indexOf(item);
+      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      requestAnimationFrame(() => handleElement.focus());
+      item.handleActivated = true;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
+  }
+  setUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    setUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable = Sortable.create(this.el, {
-            handle: `.${CSS.handle}`,
-            draggable: "calcite-value-list-item",
-            group: this.group,
-            onSort: () => {
-                this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-                const values = this.items.map((item) => item.value);
-                this.calciteListOrderChange.emit(values);
-            }
-        });
+    this.sortable = Sortable.create(this.el, {
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    cleanUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable.destroy();
+    this.sortable.destroy();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
+    return type;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  static get is() { return "calcite-value-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./calcite-value-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["calcite-value-list.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "dragEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the items will be sortable via drag and drop."
+      },
+      "attribute": "drag-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "filterEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
+      },
+      "attribute": "filter-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "filterPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder text for the filter input field."
+      },
+      "attribute": "filter-placeholder",
+      "reflect": true
+    },
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this is set and drag is enabled, items can be dropped between lists of the same group."
+      },
+      "attribute": "group",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Multiple Works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
+      },
+      "attribute": "multiple",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "textFilterPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "use filterPlaceholder instead.",
+            "name": "deprecated"
+          }],
+        "text": "Placeholder text for the filter input field."
+      },
+      "attribute": "text-filter-placeholder",
+      "reflect": true,
+      "defaultValue": "TEXT.filterResults"
     }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        let type = null;
-        if (this.dragEnabled) {
-            type = ICON_TYPES.grip;
-        }
-        return type;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    static get is() { return "calcite-value-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["./calcite-value-list.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["calcite-value-list.css"]
-    }; }
-    static get properties() { return {
-        "disabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
-            },
-            "attribute": "disabled",
-            "reflect": true,
-            "defaultValue": "false"
+  }; }
+  static get states() { return {
+    "selectedValues": {},
+    "dataForFilter": {}
+  }; }
+  static get events() { return [{
+      "method": "calciteListChange",
+      "name": "calciteListChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListChange",
+            "name": "event"
+          }],
+        "text": "Emitted when any of the item selections have changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "calciteListOrderChange",
+      "name": "calciteListOrderChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": "calciteListOrderChange",
+            "name": "event"
+          }],
+        "text": "Emmitted when the order of the list has changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getSelectedItems": {
+      "complexType": {
+        "signature": "() => Promise<Map<string, HTMLCalciteValueListItemElement>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Map": {
+            "location": "global"
+          },
+          "HTMLCalciteValueListItemElement": {
+            "location": "global"
+          }
         },
-        "dragEnabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, the items will be sortable via drag and drop."
-            },
-            "attribute": "drag-enabled",
-            "reflect": true,
-            "defaultValue": "false"
+        "return": "Promise<Map<string, any>>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "filterEnabled": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
-            },
-            "attribute": "filter-enabled",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "group": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "If this is set and drag is enabled, items can be dropped between lists of the same group."
-            },
-            "attribute": "group",
-            "reflect": false
-        },
-        "loading": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-            },
-            "attribute": "loading",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "multiple": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Multiple Works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items."
-            },
-            "attribute": "multiple",
-            "reflect": true,
-            "defaultValue": "false"
-        },
-        "textFilterPlaceholder": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Placeholder text for the filter input field."
-            },
-            "attribute": "text-filter-placeholder",
-            "reflect": true,
-            "defaultValue": "TEXT.filterPlaceholder"
-        }
-    }; }
-    static get states() { return {
-        "selectedValues": {},
-        "dataForFilter": {}
-    }; }
-    static get events() { return [{
-            "method": "calciteListChange",
-            "name": "calciteListChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListChange",
-                        "name": "event"
-                    }],
-                "text": "Emitted when any of the item selections have changed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }, {
-            "method": "calciteListOrderChange",
-            "name": "calciteListOrderChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [{
-                        "text": "calciteListOrderChange",
-                        "name": "event"
-                    }],
-                "text": "Emmitted when the order of the list has changed."
-            },
-            "complexType": {
-                "original": "any",
-                "resolved": "any",
-                "references": {}
-            }
-        }]; }
-    static get methods() { return {
-        "getSelectedItems": {
-            "complexType": {
-                "signature": "() => Promise<Map<string, HTMLCalciteValueListItemElement>>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    },
-                    "Map": {
-                        "location": "global"
-                    },
-                    "HTMLCalciteValueListItemElement": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<Map<string, any>>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        },
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "",
-                "tags": []
-            }
-        }
-    }; }
-    static get elementRef() { return "el"; }
-    static get listeners() { return [{
-            "name": "calciteListItemChange",
-            "method": "calciteListItemChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }, {
-            "name": "calciteListItemPropsChange",
-            "method": "calciteListItemPropsChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }, {
-            "name": "calciteListItemValueChange",
-            "method": "calciteListItemValueChangeHandler",
-            "target": undefined,
-            "capture": false,
-            "passive": false
-        }]; }
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "calciteListItemChange",
+      "method": "calciteListItemChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteListItemPropsChange",
+      "method": "calciteListItemPropsChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteListItemValueChange",
+      "method": "calciteListItemValueChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

dist/collection/calcite-value-list/resources.js

 export const CSS = {
-    container: "container",
-    handle: "handle"
+  container: "container",
+  handle: "handle"
 };
 export var ICON_TYPES;
 (function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 export const TEXT = {
-    filterPlaceholder: "Filter results"
+  filterResults: "Filter results"
 };

dist/collection/collection-manifest.json

@@ -30,4 +30,4 @@ {
     "name": "@stencil/core",
-    "version": "1.17.3",
-    "typescriptVersion": "3.9.7"
+    "version": "2.0.1",
+    "typescriptVersion": "4.0.2"
   },
@@ -34,0 +34,0 @@ "collections": [],

dist/collection/interfaces.js

 /* Note: using `.d.ts` file extension will exclude it from the output build */
+export {};

dist/collection/utils/array.js

 export function getRoundRobinIndex(index, total) {
-    return (index + total) % total;
+  return (index + total) % total;
 }

dist/collection/utils/CalciteExpandToggle.js

 import { h } from "@stencil/core";
 import { getElementDir } from "./dom";
 const ICONS = {
-    chevronsLeft: "chevrons-left",
-    chevronsRight: "chevrons-right"
+  chevronsLeft: "chevrons-left",
+  chevronsRight: "chevrons-right"
 };
 function getCalcitePosition(position, el) {
-    var _a;
-    return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
+  var _a;
+  return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
 }
 export function toggleChildActionText({ parent, expanded }) {
-    parent.querySelectorAll("calcite-action").forEach((action) => (action.textEnabled = expanded));
+  parent.querySelectorAll("calcite-action").forEach((action) => (action.textEnabled = expanded));
 }
 const setTooltipReference = (tooltip, referenceElement, expanded) => {
-    if (tooltip) {
-        tooltip.referenceElement = !expanded && referenceElement;
-    }
-    return referenceElement;
+  if (tooltip) {
+    tooltip.referenceElement = !expanded && referenceElement;
+  }
+  return referenceElement;
 };
 export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggleExpand, el, position, tooltipExpand }) => {
-    const rtl = getElementDir(el) === "rtl";
-    const expandText = expanded ? intlCollapse : intlExpand;
-    const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
-    if (rtl) {
-        icons.reverse();
-    }
-    const end = getCalcitePosition(position, el) === "end";
-    const expandIcon = end ? icons[1] : icons[0];
-    const collapseIcon = end ? icons[0] : icons[1];
-    const actionNode = (h("calcite-action", { ref: (referenceElement) => setTooltipReference(tooltipExpand, referenceElement, expanded), onClick: toggleExpand, textEnabled: expanded, text: expandText, icon: expanded ? expandIcon : collapseIcon }));
-    return tooltipExpand ? (h("calcite-tooltip-manager", null, actionNode)) : (actionNode);
+  const rtl = getElementDir(el) === "rtl";
+  const expandText = expanded ? intlCollapse : intlExpand;
+  const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+  if (rtl) {
+    icons.reverse();
+  }
+  const end = getCalcitePosition(position, el) === "end";
+  const expandIcon = end ? icons[1] : icons[0];
+  const collapseIcon = end ? icons[0] : icons[1];
+  const actionNode = (h("calcite-action", { ref: (referenceElement) => setTooltipReference(tooltipExpand, referenceElement, expanded), onClick: toggleExpand, textEnabled: expanded, text: expandText, icon: expanded ? expandIcon : collapseIcon }));
+  return tooltipExpand ? (h("calcite-tooltip-manager", null, actionNode)) : (actionNode);
 };

dist/collection/utils/dom.js

 export function getElementDir(el) {
-    return getElementProp(el, "dir", "ltr");
+  return getElementProp(el, "dir", "ltr");
 }
 export function getElementTheme(el) {
-    return getElementProp(el, "theme", "light");
+  return getElementProp(el, "theme", "light");
 }
 export function getElementProp(el, prop, value) {
-    const closestWithProp = el.closest(`[${prop}]`);
-    return closestWithProp ? closestWithProp.getAttribute(prop) : value;
+  const closestWithProp = el.closest(`[${prop}]`);
+  return closestWithProp ? closestWithProp.getAttribute(prop) : value;
 }
 export function focusElement(el) {
-    if (!el) {
-        return;
-    }
-    "setFocus" in el && typeof el.setFocus === "function" ? el.setFocus() : el.focus();
+  if (!el) {
+    return;
+  }
+  "setFocus" in el && typeof el.setFocus === "function" ? el.setFocus() : el.focus();
 }
 export function getSlotted(element, slotName, options) {
-    const slotSelector = `[slot="${slotName}"]`;
-    if (options === null || options === void 0 ? void 0 : options.all) {
-        return queryMultiple(element, slotSelector, options);
-    }
-    return querySingle(element, slotSelector, options);
+  const slotSelector = `[slot="${slotName}"]`;
+  if (options === null || options === void 0 ? void 0 : options.all) {
+    return queryMultiple(element, slotSelector, options);
+  }
+  return querySingle(element, slotSelector, options);
 }
 function queryMultiple(element, slotSelector, options) {
-    let matches = Array.from(element.querySelectorAll(slotSelector));
-    matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
-    const selector = options === null || options === void 0 ? void 0 : options.selector;
-    return selector ? matches.map((item) => item.querySelector(selector)).filter((match) => !!match) : matches;
+  let matches = Array.from(element.querySelectorAll(slotSelector));
+  matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
+  const selector = options === null || options === void 0 ? void 0 : options.selector;
+  return selector ? matches.map((item) => item.querySelector(selector)).filter((match) => !!match) : matches;
 }
 function querySingle(element, slotSelector, options) {
-    let match = element.querySelector(slotSelector);
-    match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
-    const selector = options === null || options === void 0 ? void 0 : options.selector;
-    return selector ? match.querySelector(selector) : match;
+  let match = element.querySelector(slotSelector);
+  match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  const selector = options === null || options === void 0 ? void 0 : options.selector;
+  return selector ? match.querySelector(selector) : match;
 }

dist/collection/utils/guid.js

 function generateId(counts) {
-    return counts
-        .map((count) => {
-        let out = "";
-        for (let i = 0; i < count; i++) {
-            out += (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-        }
-        return out;
-    })
-        .join("-");
+  return counts
+    .map((count) => {
+    let out = "";
+    for (let i = 0; i < count; i++) {
+      out += (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return out;
+  })
+    .join("-");
 }
 export const guid = () => generateId([2, 1, 1, 1, 3]);
 export default guid;

dist/collection/utils/resources.js

 export const CSS_UTILITY = {
-    rtl: "calcite--rtl"
+  rtl: "calcite--rtl"
 };

dist/esm/calcite-action-bar.entry.js

@@ -1,94 +0,94 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as getSlotted } from './dom-462ef99a.js';
-import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-d9051833.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
+import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-38d8c232.js';
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom"
 };
 const SLOTS = {
-    bottomActions: "bottom-actions"
+  bottomActions: "bottom-actions"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionBarCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-item-align:stretch;align-self:stretch;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";
+const calciteActionBarCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-self:stretch;display:inline-flex;flex-direction:column;max-width:15vw;overflow-y:auto;pointer-events:auto}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}";
 
 const CalciteActionBar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        this.observer = new MutationObserver(() => {
-            const { el, expanded } = this;
-            toggleChildActionText({ parent: el, expanded });
-        });
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionBarToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-        this.observer.observe(el, { childList: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
+    this.observer = new MutationObserver(() => {
+      const { el, expanded } = this;
+      toggleChildActionText({ parent: el, expanded });
+    });
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        return (h(Host, null, h("slot", null), this.renderBottomActionGroup()));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionBarToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+    this.observer.observe(el, { childList: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, h("slot", { name: SLOTS.bottomActions }), expandToggleNode)) : null;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.renderBottomActionGroup()));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -95,0 +95,0 @@ CalciteActionBar.style = calciteActionBarCss;

dist/esm/calcite-action-group.entry.js

@@ -1,17 +0,17 @@
-import { r as registerInstance, h, f as Host } from './index-6ab9e002.js';
+import { r as registerInstance, h, f as Host } from './index-e3ebf984.js';
 
-const calciteActionGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:-ms-flexbox;display:flex;width:100%}";
+const calciteActionGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:var(--calcite-app-cap-spacing-half) 0}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:first-child){padding-top:0}::slotted(calcite-action){display:flex;width:100%}";
 
 const CalciteActionGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null, h("slot", null)));
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
 };
@@ -18,0 +18,0 @@ CalciteActionGroup.style = calciteActionGroupCss;

dist/esm/calcite-action-pad.entry.js

@@ -1,94 +0,94 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-d9051833.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-38d8c232.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    actionGroupBottom: "action-group--bottom",
-    container: "container"
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
 };
 const TEXT = {
-    expand: "Expand",
-    collapse: "Collapse"
+  expand: "Expand",
+  collapse: "Collapse"
 };
 
-const calciteActionPadCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}:host([layout=horizontal]) .container{-ms-flex-direction:row;flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;-ms-flex-direction:row;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
+const calciteActionPadCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{animation:calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-bottom:1px solid var(--calcite-app-border);padding-bottom:0;padding-top:0}.container{display:inline-flex;flex-direction:column;box-shadow:var(--calcite-app-shadow-2);max-width:15vw;overflow-y:auto}.action-group--bottom{padding-bottom:0;flex-grow:1;justify-content:flex-end}:host([layout=horizontal]) .container{flex-direction:row;max-width:unset}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-right:1px solid var(--calcite-app-border);border-bottom:none;flex-direction:row;padding:0}:host([layout=horizontal]) .container.calcite--rtl ::slotted(calcite-action-group){border-right:none;border-left:1px solid var(--calcite-app-border)}::slotted(calcite-action-group:last-child){border-bottom:none}";
 
 const CalciteActionPad = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Indicates the horizontal or vertical layout of the component.
-         */
-        this.layout = "vertical";
-        /**
-         * Indicates whether widget can be expanded.
-         */
-        this.expand = true;
-        /**
-         * Indicates whether widget is expanded.
-         */
-        this.expanded = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-        };
-    }
-    expandHandler(expand) {
-        if (expand) {
-            toggleChildActionText({ parent: this.el, expanded: this.expanded });
-        }
-    }
-    expandedHandler(expanded) {
-        if (this.expand) {
-            toggleChildActionText({ parent: this.el, expanded });
-        }
-        this.calciteActionPadToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    componentWillLoad() {
-        const { el, expand, expanded } = this;
-        if (expand) {
-            toggleChildActionText({ parent: el, expanded });
-        }
-    }
+    /**
+     * Indicates the horizontal or vertical layout of the component.
+     */
+    this.layout = "vertical";
+    /**
+     * Indicates whether widget can be expanded.
+     */
+    this.expand = true;
+    /**
+     * Indicates whether widget is expanded.
+     */
+    this.expanded = false;
     // --------------------------------------------------------------------------
     //
-    //  Component Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
-        const expandLabel = intlExpand || TEXT.expand;
-        const collapseLabel = intlCollapse || TEXT.collapse;
-        const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
-        return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+    };
+  }
+  expandHandler(expand) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        const containerClasses = {
-            [CSS.container]: true,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, h("div", { class: containerClasses }, h("slot", null), this.renderBottomActionGroup())));
+  }
+  expandedHandler(expanded) {
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "expand": ["expandHandler"],
-        "expanded": ["expandedHandler"]
-    }; }
+    this.calciteActionPadToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    const { el, expand, expanded } = this;
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expand, intlExpand, intlCollapse, el, position, toggleExpand, tooltipExpand } = this;
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = expand ? (h(CalciteExpandToggle, { expanded: expanded, intlExpand: expandLabel, intlCollapse: collapseLabel, el: el, position: position, toggleExpand: toggleExpand, tooltipExpand: tooltipExpand })) : null;
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom }, expandToggleNode)) : null;
+  }
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    const containerClasses = {
+      [CSS.container]: true,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null, h("div", { class: containerClasses }, h("slot", null), this.renderBottomActionGroup())));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expand": ["expandHandler"],
+    "expanded": ["expandedHandler"]
+  }; }
 };
@@ -95,0 +95,0 @@ CalciteActionPad.style = calciteActionPadCss;

dist/esm/calcite-action.entry.js

@@ -1,117 +0,117 @@
-import { r as registerInstance, i as forceUpdate, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, i as forceUpdate, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    button: "button",
-    buttonTextVisible: "button--text-visible",
-    buttonCompact: "button--compact",
-    iconContainer: "icon-container",
-    slotContainer: "slot-container",
-    slotContainerHidden: "slot-container--hidden",
-    textContainer: "text-container",
-    textContainerVisible: "text-container--visible"
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
 };
 
-const calciteActionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:-ms-flexbox;display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;-webkit-transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;-webkit-transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{-ms-flex:1 1 auto;flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);-webkit-transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:-webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);-webkit-box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset;box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);-webkit-box-shadow:none;box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
+const calciteActionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;background-color:var(--calcite-app-background-clear)}:host([disabled]){pointer-events:none}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.button{font-family:var(--calcite-app-font-family);display:flex;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground);background-color:var(--calcite-app-background);outline-offset:var(--calcite-app-outline-inset);margin:0;justify-content:flex-start;align-items:center;border:none;width:auto;cursor:pointer;font-size:var(--calcite-app-font-size--1);line-height:normal;transition:color 125ms ease-in-out, fill 125ms ease-in-out, background-color 125ms ease-in-out;text-align:unset;position:relative;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.button:hover,.button:focus{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground-hover);fill:var(--calcite-app-foreground-hover)}.button:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.button .icon-container{min-width:var(--calcite-app-icon-size);min-height:var(--calcite-app-icon-size);margin:0;justify-content:center;align-items:center;display:flex;pointer-events:none}.button .text-container{line-height:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;opacity:0;width:0;transition:opacity var(--calcite-app-animation-time) var(--calcite-app-easing-function), margin var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), width var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.button .text-container--visible{flex:1 1 auto;opacity:1;width:auto}:host([scale=s]) .button{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}:host([scale=m]) .button{padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}:host([scale=l]) .button{padding:var(--calcite-app-cap-spacing-plus-half) var(--calcite-app-side-spacing-plus-half)}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0;padding-right:0}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}.button--text-visible .icon-container{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible .text-container--visible{margin:0 var(--calcite-app-side-spacing-half) 0 0}.button--text-visible.calcite--rtl .icon-container{margin:0 0 0 var(--calcite-app-side-spacing-half)}.button--text-visible.calcite--rtl .text-container--visible{margin:0 0 0 var(--calcite-app-side-spacing-half)}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active)}:host([appearance=clear]) .button{background-color:var(--calcite-app-background-clear);transition:box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:var(--calcite-app-background-clear);box-shadow:0 0 0 2px var(--calcite-app-border-hover) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{color:var(--calcite-app-foreground-active);fill:var(--calcite-app-foreground-active);background-color:var(--calcite-app-background-active);box-shadow:none}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:var(--calcite-app-background-clear)}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-app-background)}:host([loading]) calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);margin-right:0}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{opacity:var(--calcite-app-disabled-opacity);background-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible,:host([indicator][scale=s]) .button--text-visible,:host([indicator][scale=l]) .button--text-visible{padding-right:var(--calcite-app-side-spacing)}:host([indicator]) .button::after{content:\"\";border-radius:50%;width:var(--calcite-app-side-spacing-half);height:var(--calcite-app-side-spacing-half);border:var(--calcite-app-side-spacing-eighth) solid var(--calcite-app-background);background-color:var(--calcite-app-foreground-active);position:absolute;bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half);z-index:1}:host([indicator][scale=s]) .button::after{bottom:var(--calcite-app-cap-spacing-quarter);right:var(--calcite-app-side-spacing-quarter)}:host([indicator][scale=l]) .button::after{bottom:var(--calcite-app-cap-spacing-half);right:var(--calcite-app-side-spacing-half)}:host([indicator]) .calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-quarter)}:host([indicator]) .button--text-visible.calcite--rtl{padding-right:var(--calcite-app-side-spacing-three-quarters);padding-left:var(--calcite-app-side-spacing)}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-app-background-hover)}:host([indicator][active]) .button::after{border-color:var(--calcite-app-background-active)}:host([indicator]) .button--text-visible::after,:host([indicator][scale=s]) .button--text-visible::after,:host([indicator][scale=l]) .button--text-visible::after{bottom:unset;right:var(--calcite-app-side-spacing-half)}:host([indicator]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after{right:unset;left:var(--calcite-app-side-spacing-half)}";
 
 const CalciteAction = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /** Specify the appearance style of the action, defaults to solid. */
-        this.appearance = "solid";
-        /**
-         * Indicates whether the action is highlighted.
-         */
-        this.active = false;
-        /**
-         * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
-         */
-        this.compact = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Indicates unread changes.
-         */
-        this.indicator = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the action.
-         */
-        this.scale = "m";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-        this.observer = new MutationObserver(() => forceUpdate(this));
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Methods
-    //
-    // --------------------------------------------------------------------------
-    async setFocus() {
-        this.buttonEl.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderTextContainer() {
-        const { text, textEnabled } = this;
-        const textContainerClasses = {
-            [CSS.textContainer]: true,
-            [CSS.textContainerVisible]: textEnabled
-        };
-        return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
-    }
-    renderIconContainer() {
-        var _a;
-        const { loading, icon, scale, el } = this;
-        const iconScale = scale === "l" ? "m" : "s";
-        const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
-        const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
-        const iconNode = calciteLoaderNode || calciteIconNode;
-        const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-        const slotContainerNode = (h("div", { class: {
-                [CSS.slotContainer]: true,
-                [CSS.slotContainerHidden]: loading
-            } }, h("slot", null)));
-        return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
-    }
-    render() {
-        const { compact, disabled, loading, el, textEnabled, label, text } = this;
-        const ariaLabel = label || text;
-        const rtl = getElementDir(el) === "rtl";
-        const buttonClasses = {
-            [CSS.button]: true,
-            [CSS.buttonTextVisible]: textEnabled,
-            [CSS.buttonCompact]: compact,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
-    }
-    get el() { return getElement(this); }
+    /** Specify the appearance style of the action, defaults to solid. */
+    this.appearance = "solid";
+    /**
+     * Indicates whether the action is highlighted.
+     */
+    this.active = false;
+    /**
+     * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+     */
+    this.compact = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the action.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.observer = new MutationObserver(() => forceUpdate(this));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.buttonEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (h("div", { key: "text-container", class: textContainerClasses }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const calciteLoaderNode = loading ? h("calcite-loader", { "is-active": true, inline: true }) : null;
+    const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } }, h("slot", null)));
+    return hasIconToDisplay ? (h("div", { key: "icon-container", "aria-hidden": "true", class: CSS.iconContainer }, iconNode, slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const rtl = getElementDir(el) === "rtl";
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    return (h(Host, null, h("button", { class: buttonClasses, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled.toString(), "aria-busy": loading.toString(), ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
+  }
+  get el() { return getElement(this); }
 };
@@ -118,0 +118,0 @@ CalciteAction.style = calciteActionCss;

dist/esm/calcite-block-section.entry.js

@@ -1,79 +0,79 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
-import { g as guid } from './guid-ac11c5c8.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
+import { g as guid } from './guid-b6d0e663.js';
 
 const CSS = {
-    content: "content",
-    toggle: "toggle",
-    toggleSwitch: "toggle--switch"
+  content: "content",
+  toggle: "toggle",
+  toggleSwitch: "toggle--switch"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const ICONS = {
-    menuOpen: "chevron-down",
-    menuClosedLeft: "chevron-left",
-    menuClosedRight: "chevron-right"
+  menuOpen: "chevron-down",
+  menuClosedLeft: "chevron-left",
+  menuClosedRight: "chevron-right"
 };
 
-const calciteBlockSectionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
+const calciteBlockSectionCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{border-bottom:1px solid var(--calcite-app-border);display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:last-child){border-bottom:none}.toggle--switch{align-items:center;cursor:pointer;display:flex;justify-content:space-between;margin:var(--calcite-app-cap-spacing-quarter) 0;padding:var(--calcite-app-cap-spacing-half) 0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.toggle--switch calcite-switch{pointer-events:none;margin:0 0 0 var(--calcite-app-side-spacing-half)}.calcite--rtl .toggle--switch calcite-switch{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}";
 
 const CalciteBlockSection = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
-        /**
-         * When true, the block's section content will be displayed.
-         */
-        this.open = false;
-        /**
-         * This property determines the look of the section toggle.
-         * If the value is "switch", a toggle-switch will be displayed.
-         * If the value is "button", a clickable header is displayed.
-         *
-         * @todo revisit doc
-         */
-        this.toggleDisplay = "button";
-        this.guid = `calcite-block-section-${guid()}`;
-        this.toggleSection = () => {
-            this.open = !this.open;
-            this.calciteBlockSectionToggle.emit();
-        };
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
+    /**
+     * When true, the block's section content will be displayed.
+     */
+    this.open = false;
+    /**
+     * This property determines the look of the section toggle.
+     * If the value is "switch", a toggle-switch will be displayed.
+     * If the value is "button", a clickable header is displayed.
+     *
+     * @todo revisit doc
+     */
+    this.toggleDisplay = "button";
+    this.guid = `calcite-block-section-${guid()}`;
+    this.toggleSection = () => {
+      this.open = !this.open;
+      this.calciteBlockSectionToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleHeaderLabelKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.click();
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleHeaderLabelKeyDown(event) {
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            event.stopPropagation();
-            this.click();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-        const dir = getElementDir(el);
-        const arrowIcon = open
-            ? ICONS.menuOpen
-            : dir === "rtl"
-                ? ICONS.menuClosedLeft
-                : ICONS.menuClosedRight;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const labelId = `${id}__label`;
-        const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
-                [CSS.toggle]: true,
-                [CSS.toggleSwitch]: true
-            }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
-        return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, h("div", { class: CSS.content, hidden: !open }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, guid: id, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
+    const dir = getElementDir(el);
+    const arrowIcon = open
+      ? ICONS.menuOpen
+      : dir === "rtl"
+        ? ICONS.menuClosedLeft
+        : ICONS.menuClosedRight;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const labelId = `${id}__label`;
+    const headerNode = toggleDisplay === "switch" ? (h("label", { "aria-label": toggleLabel, class: {
+        [CSS.toggle]: true,
+        [CSS.toggleSwitch]: true
+      }, id: labelId, onKeyDown: this.handleHeaderLabelKeyDown, tabIndex: 0 }, text, h("calcite-switch", { "aria-labelledby": labelId, switched: open, onCalciteSwitchChange: this.toggleSection, scale: "s", tabIndex: -1 }))) : (h("calcite-action", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.toggleSection, text: text, textEnabled: true, compact: true, icon: arrowIcon }));
+    return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } }, headerNode, h("div", { class: CSS.content, hidden: !open }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -80,0 +80,0 @@ CalciteBlockSection.style = calciteBlockSectionCss;

dist/esm/calcite-block.entry.js

@@ -1,89 +0,89 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { b as getElementTheme, g as getSlotted, a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { b as getElementTheme, g as getSlotted, a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    content: "content",
-    headerContainer: "header-container",
-    icon: "icon",
-    toggle: "toggle",
-    toggleIcon: "toggle-icon",
-    title: "title",
-    heading: "heading",
-    header: "header",
-    button: "button",
-    summary: "summary",
-    controlContainer: "control-container"
+  content: "content",
+  headerContainer: "header-container",
+  icon: "icon",
+  toggle: "toggle",
+  toggleIcon: "toggle-icon",
+  title: "title",
+  heading: "heading",
+  header: "header",
+  button: "button",
+  summary: "summary",
+  controlContainer: "control-container"
 };
 const TEXT = {
-    collapse: "Collapse",
-    expand: "Expand"
+  collapse: "Collapse",
+  expand: "Expand"
 };
 const SLOTS = {
-    icon: "icon",
-    control: "control"
+  icon: "icon",
+  control: "control"
 };
 
-const calciteBlockCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-direction:column;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);-webkit-transition:margin var(--calcite-app-animation-time) ease-in-out;transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;-ms-flex-align:stretch;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;-ms-flex:0 0 var(--calcite-app-icon-size);flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:-ms-flexbox;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
+const calciteBlockCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;flex:0 0 auto;flex-direction:column;padding:0;border-top:1px solid var(--calcite-app-border);transition:margin var(--calcite-app-animation-time) ease-in-out;--calcite-app-block-header-min-height:2.5rem}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.header{justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;grid-template:auto/auto 1fr auto;grid-template-areas:\"handle header control\";grid-column:header-start/control-end;grid-row:1/2;align-items:stretch}.header-container>.header{padding:var(--calcite-app-cap-spacing-three-quarters) 0}.toggle{line-height:var(--calcite-app-line-height);display:flex;align-items:center;flex-wrap:nowrap;margin:0;padding:var(--calcite-app-cap-spacing-three-quarters) 0;background-color:transparent;border:none;cursor:pointer;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);text-align:unset;color:var(--calcite-app-foreground);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.toggle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}calcite-loader[inline]{color:var(--calcite-app-foreground-subtle);grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding:0 var(--calcite-app-side-spacing-three-quarters)}.header .title .heading{padding:0;font-size:var(--calcite-app-font-size-0);word-break:break-all}.summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1);padding:0;line-height:var(--calcite-app-line-height);word-break:break-all}.icon{margin-left:var(--calcite-app-side-spacing-three-quarters)}.toggle-icon{fill:currentColor;flex:0 0 var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing) 0 0}.content{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);position:relative}.control-container{grid-area:control;display:flex;margin:0}calcite-scrim{pointer-events:none}.calcite--rtl .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-three-quarters)}:host([open]){margin-top:var(--calcite-app-cap-spacing-quarter);margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([open]) .header-container{border-bottom:1px solid var(--calcite-app-border)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) .header-container{opacity:var(--calcite-app-disabled-opacity)}:host([collapsible]) .header-container:hover{background-color:var(--calcite-app-background-hover-opacity)}:host([drag-handle]) .title{padding-left:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .icon{margin-left:0;margin-right:var(--calcite-app-side-spacing-half)}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:var(--calcite-app-side-spacing-quarter)}:host([drag-handle]) .calcite--rtl .icon{margin-right:0;margin-left:var(--calcite-app-side-spacing-quarter)}";
 
 const CalciteBlock = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, this block will be collapsible.
-         */
-        this.collapsible = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, displays a drag handle in the header.
-         */
-        this.dragHandle = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * When true, the block's content will be displayed.
-         */
-        this.open = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.onHeaderClick = () => {
-            this.open = !this.open;
-            this.calciteBlockToggle.emit();
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderScrim() {
-        const { disabled, loading, el } = this;
-        const defaultSlot = h("slot", null);
-        return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
-    }
-    render() {
-        const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
-        const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
-        const hasIcon = getSlotted(el, SLOTS.icon);
-        const headerContent = (h("header", { class: CSS.header }, hasIcon ? (h("div", { class: CSS.icon }, h("slot", { name: SLOTS.icon }))) : null, h("div", { class: CSS.title }, h("h3", { class: CSS.heading }, heading), summary ? h("div", { class: CSS.summary }, summary) : null)));
-        const hasControl = getSlotted(el, SLOTS.control);
-        const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null));
-        const rtl = getElementDir(el) === "rtl";
-        return (h(Host, { tabIndex: disabled ? -1 : null }, h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null }, headerNode, h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
-    }
-    get el() { return getElement(this); }
+    /**
+     * When true, this block will be collapsible.
+     */
+    this.collapsible = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, displays a drag handle in the header.
+     */
+    this.dragHandle = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * When true, the block's content will be displayed.
+     */
+    this.open = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.onHeaderClick = () => {
+      this.open = !this.open;
+      this.calciteBlockToggle.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderScrim() {
+    const { disabled, loading, el } = this;
+    const defaultSlot = h("slot", null);
+    return loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, defaultSlot)) : (defaultSlot);
+  }
+  render() {
+    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary } = this;
+    const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
+    const hasIcon = getSlotted(el, SLOTS.icon);
+    const headerContent = (h("header", { class: CSS.header }, hasIcon ? (h("div", { class: CSS.icon }, h("slot", { name: SLOTS.icon }))) : null, h("div", { class: CSS.title }, h("h3", { class: CSS.heading }, heading), summary ? h("div", { class: CSS.summary }, summary) : null)));
+    const hasControl = getSlotted(el, SLOTS.control);
+    const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-label": toggleLabel, class: CSS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent)) : (headerContent), loading ? (h("calcite-loader", { inline: true, "is-active": true })) : hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null));
+    const rtl = getElementDir(el) === "rtl";
+    return (h(Host, { tabIndex: disabled ? -1 : null }, h("article", { "aria-expanded": collapsible ? open.toString() : null, "aria-busy": loading.toString(), class: rtl ? CSS_UTILITY.rtl : null }, headerNode, h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
+  }
+  get el() { return getElement(this); }
 };
@@ -90,0 +90,0 @@ CalciteBlock.style = calciteBlockCss;

dist/esm/calcite-fab.entry.js

@@ -1,73 +0,73 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { f as focusElement, a as getElementDir } from './dom-462ef99a.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { f as focusElement, a as getElementDir } from './dom-0962c5fe.js';
 
 const CSS = {
-    button: "button"
+  button: "button"
 };
 const ICONS = {
-    plus: "plus"
+  plus: "plus"
 };
 
-const calciteFabCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{-webkit-box-shadow:var(--calcite-app-shadow-1);box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFabCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-transparent)}calcite-button{box-shadow:var(--calcite-app-shadow-1)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFab = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Used to set the button's appearance. Default is outline.
-         */
-        this.appearance = "outline";
-        /**
-         * Used to set the button's color. Default is light.
-         */
-        this.color = "light";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
-         */
-        this.icon = ICONS.plus;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Specifies the size of the fab.
-         */
-        this.scale = "s";
-        /**
-         * Indicates whether the text is displayed.
-         */
-        this.textEnabled = false;
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        focusElement(this.buttonEl);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
-        const titleText = !textEnabled && text;
-        const title = label || titleText;
-        const dir = getElementDir(el);
-        return (h(Host, null, h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
-                this.buttonEl = buttonEl;
-            } }, this.textEnabled ? this.text : null)));
-    }
-    get el() { return getElement(this); }
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "light";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "s";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, el, loading, scale, theme, textEnabled, icon, label, text } = this;
+    const titleText = !textEnabled && text;
+    const title = label || titleText;
+    const dir = getElementDir(el);
+    return (h(Host, null, h("calcite-button", { class: CSS.button, loading: loading, disabled: disabled, title: title, "aria-label": label, theme: theme, dir: dir, scale: scale, "icon-start": icon, round: true, width: "auto", appearance: appearance, color: color, ref: (buttonEl) => {
+        this.buttonEl = buttonEl;
+      } }, this.textEnabled ? this.text : null)));
+  }
+  get el() { return getElement(this); }
 };
@@ -74,0 +74,0 @@ CalciteFab.style = calciteFabCss;

dist/esm/calcite-filter.entry.js

@@ -1,85 +0,85 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 import { d as debounce, f as forIn } from './lodash-fad0d111.js';
 
 const CSS = {
-    searchIcon: "search-icon",
-    clearButton: "clear-button"
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
 };
 const TEXT = {
-    filterLabel: "filter",
-    clear: "Clear filter"
+  filterLabel: "filter",
+  clear: "Clear filter"
 };
 const ICONS = {
-    search: "search",
-    close: "x"
+  search: "search",
+  close: "x"
 };
 
-const calciteFilterCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);-webkit-transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);-webkit-box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
+const calciteFilterCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}label{align-items:center;display:flex;margin:0 var(--calcite-app-side-spacing-quarter);overflow:hidden;position:relative;width:100%}input[type=text]{background-color:transparent;border:0;font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);margin-bottom:calc(var(--calcite-app-cap-spacing-minimum) * 2);padding:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-quarter) var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-plus-half);transition:padding var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);width:100%}input[type=text]::-ms-clear{display:none}.search-icon{color:var(--calcite-app-foreground-subtle);display:flex;left:0;position:absolute;transition:left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}.calcite--rtl .search-icon{left:unset;right:0}input[type=text]:focus{border-color:var(--calcite-app-foreground-active);box-shadow:0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);outline:none;padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-quarter)}input[type=text]:focus~.search-icon{left:calc(var(--calcite-app-icon-size) * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:var(--calcite-app-side-spacing-quarter);padding-right:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl input[type=text]:focus{padding-right:var(--calcite-app-side-spacing-plus-quarter)}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(var(--calcite-app-icon-size) * -1)}.clear-button{color:var(--calcite-app-foreground);background:none;border:0;cursor:pointer}.clear-button:hover,.clear-button:focus{color:var(--calcite-app-foreground-hover)}";
 
 const filterDebounceInMs = 250;
 const CalciteFilter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
-        this.empty = true;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.filter = debounce((value) => {
-            const regex = new RegExp(value, "ig");
-            if (this.data.length === 0) {
-                console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-                this.calciteFilterChange.emit([]);
-                return;
-            }
-            const find = (input, RE) => {
-                let found = false;
-                forIn(input, (val) => {
-                    if (typeof val === "function") {
-                        return;
-                    }
-                    if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
-                        if (find(val, RE)) {
-                            found = true;
-                        }
-                    }
-                    else if (RE.test(val)) {
-                        found = true;
-                    }
-                });
-                return found;
-            };
-            const result = this.data.filter((item) => {
-                return find(item, regex);
-            });
-            this.calciteFilterChange.emit(result);
-        }, filterDebounceInMs);
-        this.inputHandler = (event) => {
-            const target = event.target;
-            this.empty = target.value === "";
-            this.filter(target.value);
-        };
-        this.clear = () => {
-            this.textInput.value = "";
-            this.empty = true;
-            this.calciteFilterChange.emit(this.data);
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
+    this.empty = true;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        const rtl = getElementDir(this.el) === "rtl";
-        return (h(Host, null, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
-                this.textInput = el;
-            } }), h("div", { class: CSS.searchIcon }, h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, h("calcite-icon", { icon: ICONS.close }))) : null));
-    }
-    get el() { return getElement(this); }
+    this.filter = debounce((value) => {
+      const regex = new RegExp(value, "ig");
+      if (this.data.length === 0) {
+        console.warn(`No data was passed to calcite-filter.
+      The data property expects an array of objects`);
+        this.calciteFilterChange.emit([]);
+        return;
+      }
+      const find = (input, RE) => {
+        let found = false;
+        forIn(input, (val) => {
+          if (typeof val === "function") {
+            return;
+          }
+          if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
+            if (find(val, RE)) {
+              found = true;
+            }
+          }
+          else if (RE.test(val)) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      const result = this.data.filter((item) => {
+        return find(item, regex);
+      });
+      this.calciteFilterChange.emit(result);
+    }, filterDebounceInMs);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.empty = target.value === "";
+      this.filter(target.value);
+    };
+    this.clear = () => {
+      this.textInput.value = "";
+      this.empty = true;
+      this.calciteFilterChange.emit(this.data);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    return (h(Host, null, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("input", { type: "text", value: "", placeholder: this.placeholder, onInput: this.inputHandler, "aria-label": this.intlLabel || TEXT.filterLabel, ref: (el) => {
+        this.textInput = el;
+      } }), h("div", { class: CSS.searchIcon }, h("calcite-icon", { scale: "s", icon: ICONS.search }))), !this.empty ? (h("button", { onClick: this.clear, class: CSS.clearButton, "aria-label": this.intlClear || TEXT.clear }, h("calcite-icon", { icon: ICONS.close }))) : null));
+  }
+  get el() { return getElement(this); }
 };
@@ -86,0 +86,0 @@ CalciteFilter.style = calciteFilterCss;

dist/esm/calcite-flow-item.entry.js

@@ -1,208 +0,208 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { f as focusElement, g as getSlotted, b as getElementTheme, a as getElementDir } from './dom-462ef99a.js';
-import { S as SLOTS$1 } from './resources-cccf0a03.js';
-import { g as getRoundRobinIndex } from './array-dbbc14b3.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { f as focusElement, g as getSlotted, b as getElementTheme, a as getElementDir } from './dom-0962c5fe.js';
+import { S as SLOTS$1 } from './resources-2a60d745.js';
+import { g as getRoundRobinIndex } from './array-9b53302c.js';
 
 const CSS = {
-    header: "header-content",
-    heading: "heading",
-    summary: "summary",
-    backButton: "back-button",
-    footerActions: "footer-actions",
-    headerActions: "header-actions",
-    leadingActions: "leading-actions",
-    singleActionContainer: "single-action-container",
-    menuContainer: "menu-container",
-    menuButton: "menu-button",
-    menu: "menu",
-    menuOpen: "menu--open",
-    fabContainer: "fab-container"
+  header: "header-content",
+  heading: "heading",
+  summary: "summary",
+  backButton: "back-button",
+  footerActions: "footer-actions",
+  headerActions: "header-actions",
+  leadingActions: "leading-actions",
+  singleActionContainer: "single-action-container",
+  menuContainer: "menu-container",
+  menuButton: "menu-button",
+  menu: "menu",
+  menuOpen: "menu--open",
+  fabContainer: "fab-container"
 };
 const SLOTS = {
-    leadingActions: "leading-actions",
-    menuActions: "menu-actions",
-    fab: "fab",
-    footerActions: "footer-actions"
+  leadingActions: "leading-actions",
+  menuActions: "menu-actions",
+  fab: "fab",
+  footerActions: "footer-actions"
 };
 const ICONS = {
-    menu: "ellipsis",
-    backLeft: "chevron-left",
-    backRight: "chevron-right"
+  menu: "ellipsis",
+  backLeft: "chevron-left",
+  backRight: "chevron-right"
 };
 const TEXT = {
-    back: "Back",
-    open: "Open",
-    close: "Close"
+  back: "Back",
+  open: "Open",
+  close: "Close"
 };
 
-const calciteFlowItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:-ms-flexbox;display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:-ms-flexbox;display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:-ms-flexbox;display:flex}.menu{min-width:var(--calcite-app-menu-min-width);-ms-flex-flow:column nowrap;flex-flow:column nowrap}.footer-actions{display:-ms-flexbox;display:flex;width:100%}.fab-container{display:inline-block}";
+const calciteFlowItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-content);display:flex;height:100%;width:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-panel{width:100%;height:100%}.leading-actions{display:flex}.header-content{display:block}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.header-content .heading{font-size:var(--calcite-app-font-size-1);font-weight:var(--calcite-app-font-weight-demi);margin:0 0 var(--calcite-app-cap-spacing-quarter)}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-app-foreground-subtle);font-size:var(--calcite-app-font-size--1)}.menu-button{align-self:stretch;flex:0 1 auto;height:100%;position:relative}.header-actions,.single-action-container{display:flex}.menu{min-width:var(--calcite-app-menu-min-width);flex-flow:column nowrap}.footer-actions{display:flex;width:100%}.fab-container{display:inline-block}";
 
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 const CalciteFlowItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteFlowItemBackClick = createEvent(this, "calciteFlowItemBackClick", 7);
-        this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 7);
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Opens the action menu.
-         */
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteFlowItemBackClick = createEvent(this, "calciteFlowItemBackClick", 7);
+    this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 7);
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Opens the action menu.
+     */
+    this.menuOpen = false;
+    /**
+     * Shows a back button in the header.
+     */
+    this.showBackButton = false;
+    this.toggleMenuOpen = () => {
+      this.menuOpen = !this.menuOpen;
+    };
+    this.backButtonClick = () => {
+      this.calciteFlowItemBackClick.emit();
+    };
+    this.menuButtonKeyDown = (event) => {
+      const { key } = event;
+      const { menuOpen } = this;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      if (!length) {
+        return;
+      }
+      event.preventDefault();
+      if (!menuOpen) {
+        this.menuOpen = true;
+      }
+      if (key === "ArrowUp") {
+        const lastAction = actions[length - 1];
+        focusElement(lastAction);
+      }
+      if (key === "ArrowDown") {
+        const firstAction = actions[0];
+        focusElement(firstAction);
+      }
+    };
+    this.menuActionsKeydown = (event) => {
+      const { key, target } = event;
+      if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
+        return;
+      }
+      const actions = this.queryActions();
+      const { length } = actions;
+      const currentIndex = actions.indexOf(target);
+      if (!length || currentIndex === -1) {
+        return;
+      }
+      event.preventDefault();
+      if (key === "ArrowUp") {
+        const value = getRoundRobinIndex(currentIndex - 1, length);
+        const previousAction = actions[value];
+        focusElement(previousAction);
+      }
+      if (key === "ArrowDown") {
+        const value = getRoundRobinIndex(currentIndex + 1, length);
+        const nextAction = actions[value];
+        focusElement(nextAction);
+      }
+    };
+    this.menuActionsContainerKeyDown = (event) => {
+      const { key } = event;
+      if (key === "Escape") {
         this.menuOpen = false;
-        /**
-         * Shows a back button in the header.
-         */
-        this.showBackButton = false;
-        this.toggleMenuOpen = () => {
-            this.menuOpen = !this.menuOpen;
-        };
-        this.backButtonClick = () => {
-            this.calciteFlowItemBackClick.emit();
-        };
-        this.menuButtonKeyDown = (event) => {
-            const { key } = event;
-            const { menuOpen } = this;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            if (!length) {
-                return;
-            }
-            event.preventDefault();
-            if (!menuOpen) {
-                this.menuOpen = true;
-            }
-            if (key === "ArrowUp") {
-                const lastAction = actions[length - 1];
-                focusElement(lastAction);
-            }
-            if (key === "ArrowDown") {
-                const firstAction = actions[0];
-                focusElement(firstAction);
-            }
-        };
-        this.menuActionsKeydown = (event) => {
-            const { key, target } = event;
-            if (!this.isValidKey(key, SUPPORTED_ARROW_KEYS)) {
-                return;
-            }
-            const actions = this.queryActions();
-            const { length } = actions;
-            const currentIndex = actions.indexOf(target);
-            if (!length || currentIndex === -1) {
-                return;
-            }
-            event.preventDefault();
-            if (key === "ArrowUp") {
-                const value = getRoundRobinIndex(currentIndex - 1, length);
-                const previousAction = actions[value];
-                focusElement(previousAction);
-            }
-            if (key === "ArrowDown") {
-                const value = getRoundRobinIndex(currentIndex + 1, length);
-                const nextAction = actions[value];
-                focusElement(nextAction);
-            }
-        };
-        this.menuActionsContainerKeyDown = (event) => {
-            const { key } = event;
-            if (key === "Escape") {
-                this.menuOpen = false;
-            }
-        };
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalcitePanelScroll(event) {
-        event.stopPropagation();
-        this.calciteFlowItemScroll.emit();
-    }
-    queryActions() {
-        return getSlotted(this.el, SLOTS.menuActions, {
-            all: true
-        });
-    }
-    isValidKey(key, supportedKeys) {
-        return !!supportedKeys.find((k) => k === key);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderBackButton(rtl) {
-        const { showBackButton, intlBack, backButtonClick } = this;
-        const label = intlBack || TEXT.back;
-        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
-        return showBackButton ? (h("calcite-action", { slot: SLOTS$1.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
-    }
-    renderMenuButton() {
-        const { menuOpen, intlOpen, intlClose } = this;
-        const closeLabel = intlClose || TEXT.close;
-        const openLabel = intlOpen || TEXT.open;
-        const menuLabel = menuOpen ? closeLabel : openLabel;
-        return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
-    }
-    renderMenuActions() {
-        const { el, menuOpen, menuButtonEl } = this;
-        return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, h("div", { class: CSS.menu }, h("slot", { name: SLOTS.menuActions }))));
-    }
-    renderFooterActions() {
-        const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
-        return hasFooterActions ? (h("div", { slot: SLOTS$1.footer, class: CSS.footerActions }, h("slot", { name: SLOTS.footerActions }))) : null;
-    }
-    renderSingleActionContainer() {
-        return (h("div", { class: CSS.singleActionContainer }, h("slot", { name: SLOTS.menuActions })));
-    }
-    renderMenuActionsContainer() {
-        return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
-    }
-    renderHeaderLeadingContent() {
-        const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
-        return hasLeadingActions ? (h("div", { slot: SLOTS$1.headerLeadingContent, class: CSS.leadingActions }, h("slot", { name: SLOTS.leadingActions }))) : null;
-    }
-    renderHeaderActions() {
-        const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
-        const actionCount = menuActions.length;
-        const menuActionsNodes = actionCount === 1
-            ? this.renderSingleActionContainer()
-            : actionCount
-                ? this.renderMenuActionsContainer()
-                : null;
-        return menuActionsNodes ? (h("div", { slot: SLOTS$1.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
-    }
-    renderHeading() {
-        const { heading } = this;
-        return heading ? (h("h2", { class: CSS.heading, slot: SLOTS$1.headerContent }, heading)) : null;
-    }
-    renderSummary() {
-        const { summary } = this;
-        return summary ? h("span", { class: CSS.summary }, summary) : null;
-    }
-    renderHeader() {
-        const headingNode = this.renderHeading();
-        const summaryNode = this.renderSummary();
-        return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: SLOTS$1.headerContent }, headingNode, summaryNode)) : null;
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer, slot: SLOTS$1.fab }, h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { el } = this;
-        const dir = getElementDir(el);
-        return (h(Host, null, h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), h("slot", null), this.renderFooterActions(), this.renderFab())));
-    }
-    get el() { return getElement(this); }
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalcitePanelScroll(event) {
+    event.stopPropagation();
+    this.calciteFlowItemScroll.emit();
+  }
+  queryActions() {
+    return getSlotted(this.el, SLOTS.menuActions, {
+      all: true
+    });
+  }
+  isValidKey(key, supportedKeys) {
+    return !!supportedKeys.find((k) => k === key);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBackButton(rtl) {
+    const { showBackButton, intlBack, backButtonClick } = this;
+    const label = intlBack || TEXT.back;
+    const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+    return showBackButton ? (h("calcite-action", { slot: SLOTS$1.headerLeadingContent, key: "back-button", "aria-label": label, text: label, class: CSS.backButton, onClick: backButtonClick, icon: icon })) : null;
+  }
+  renderMenuButton() {
+    const { menuOpen, intlOpen, intlClose } = this;
+    const closeLabel = intlClose || TEXT.close;
+    const openLabel = intlOpen || TEXT.open;
+    const menuLabel = menuOpen ? closeLabel : openLabel;
+    return (h("calcite-action", { class: CSS.menuButton, "aria-label": menuLabel, text: menuLabel, ref: (menuButtonEl) => (this.menuButtonEl = menuButtonEl), onClick: this.toggleMenuOpen, onKeyDown: this.menuButtonKeyDown, icon: ICONS.menu }));
+  }
+  renderMenuActions() {
+    const { el, menuOpen, menuButtonEl } = this;
+    return (h("calcite-popover", { referenceElement: menuButtonEl, theme: getElementTheme(el), open: menuOpen, offsetDistance: 0, disablePointer: true, placement: "bottom-end", flipPlacements: ["bottom-end", "top-end"], onKeyDown: this.menuActionsKeydown }, h("div", { class: CSS.menu }, h("slot", { name: SLOTS.menuActions }))));
+  }
+  renderFooterActions() {
+    const hasFooterActions = !!getSlotted(this.el, SLOTS.footerActions);
+    return hasFooterActions ? (h("div", { slot: SLOTS$1.footer, class: CSS.footerActions }, h("slot", { name: SLOTS.footerActions }))) : null;
+  }
+  renderSingleActionContainer() {
+    return (h("div", { class: CSS.singleActionContainer }, h("slot", { name: SLOTS.menuActions })));
+  }
+  renderMenuActionsContainer() {
+    return (h("div", { class: CSS.menuContainer, onKeyDown: this.menuActionsContainerKeyDown }, this.renderMenuButton(), this.renderMenuActions()));
+  }
+  renderHeaderLeadingContent() {
+    const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
+    return hasLeadingActions ? (h("div", { slot: SLOTS$1.headerLeadingContent, class: CSS.leadingActions }, h("slot", { name: SLOTS.leadingActions }))) : null;
+  }
+  renderHeaderActions() {
+    const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
+    const actionCount = menuActions.length;
+    const menuActionsNodes = actionCount === 1
+      ? this.renderSingleActionContainer()
+      : actionCount
+        ? this.renderMenuActionsContainer()
+        : null;
+    return menuActionsNodes ? (h("div", { slot: SLOTS$1.headerTrailingContent, class: CSS.headerActions }, menuActionsNodes)) : null;
+  }
+  renderHeading() {
+    const { heading } = this;
+    return heading ? (h("h2", { class: CSS.heading, slot: SLOTS$1.headerContent }, heading)) : null;
+  }
+  renderSummary() {
+    const { summary } = this;
+    return summary ? h("span", { class: CSS.summary }, summary) : null;
+  }
+  renderHeader() {
+    const headingNode = this.renderHeading();
+    const summaryNode = this.renderSummary();
+    return headingNode || summaryNode ? (h("div", { class: CSS.header, slot: SLOTS$1.headerContent }, headingNode, summaryNode)) : null;
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer, slot: SLOTS$1.fab }, h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { el } = this;
+    const dir = getElementDir(el);
+    return (h(Host, null, h("calcite-panel", { loading: this.loading, disabled: this.disabled, theme: getElementTheme(el), "height-scale": this.heightScale, dir: dir }, this.renderBackButton(dir === "rtl"), this.renderHeaderLeadingContent(), this.renderHeader(), this.renderHeaderActions(), h("slot", null), this.renderFooterActions(), this.renderFab())));
+  }
+  get el() { return getElement(this); }
 };
@@ -209,0 +209,0 @@ CalciteFlowItem.style = calciteFlowItemCss;

dist/esm/calcite-flow.entry.js

@@ -1,106 +0,106 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
 
 const CSS = {
-    frame: "frame",
-    frameAdvancing: "frame--advancing",
-    frameRetreating: "frame--retreating"
+  frame: "frame",
+  frameAdvancing: "frame--advancing",
+  frameRetreating: "frame--retreating"
 };
 
-const calciteFlowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{-ms-flex-align:stretch;align-items:stretch;width:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;position:relative}:host .frame--advancing{-webkit-animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{-webkit-animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@-webkit-keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-advance{0%{opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
+const calciteFlowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;width:100%;height:100%;overflow:hidden;position:relative}:host .frame{align-items:stretch;width:100%;padding:0;margin:0;display:flex;flex-flow:column;position:relative}:host .frame--advancing{animation:calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host .frame--retreating{animation:calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function)}@keyframes calcite-flow-item-advance{0%{opacity:0.5;transform:translate3d(50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-flow-item-retreat{0%{opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}";
 
 const CalciteFlow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.flowCount = 0;
-        this.flowDirection = null;
-        this.flows = [];
-        this.getFlowDirection = (oldFlowCount, newFlowCount) => {
-            const allowRetreatingDirection = oldFlowCount > 1;
-            const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
-            if (!allowAdvancingDirection && !allowRetreatingDirection) {
-                return null;
-            }
-            return newFlowCount < oldFlowCount ? "retreating" : "advancing";
-        };
-        this.updateFlowProps = () => {
-            const { flows } = this;
-            const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
-            const oldFlowCount = flows.length;
-            const newFlowCount = newFlows.length;
-            const activeFlow = newFlows[newFlowCount - 1];
-            const previousFlow = newFlows[newFlowCount - 2];
-            if (newFlowCount && activeFlow) {
-                newFlows.forEach((flowNode) => {
-                    flowNode.showBackButton = newFlowCount > 1;
-                    flowNode.hidden = flowNode !== activeFlow;
-                });
-            }
-            if (previousFlow) {
-                previousFlow.menuOpen = false;
-            }
-            this.flows = newFlows;
-            if (oldFlowCount !== newFlowCount) {
-                const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
-                this.flowCount = newFlowCount;
-                this.flowDirection = flowDirection;
-            }
-        };
-        this.flowItemObserver = new MutationObserver(this.updateFlowProps);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     */
-    async back() {
-        const lastItem = this.el.querySelector("calcite-flow-item:last-child");
-        if (!lastItem) {
-            return;
-        }
-        const beforeBack = lastItem.beforeBack
-            ? lastItem.beforeBack
-            : () => Promise.resolve();
-        return beforeBack.call(lastItem).then(() => {
-            lastItem.remove();
-            return lastItem;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.flowCount = 0;
+    this.flowDirection = null;
+    this.flows = [];
+    this.getFlowDirection = (oldFlowCount, newFlowCount) => {
+      const allowRetreatingDirection = oldFlowCount > 1;
+      const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
+      if (!allowAdvancingDirection && !allowRetreatingDirection) {
+        return null;
+      }
+      return newFlowCount < oldFlowCount ? "retreating" : "advancing";
+    };
+    this.updateFlowProps = () => {
+      const { flows } = this;
+      const newFlows = Array.from(this.el.querySelectorAll("calcite-flow-item"));
+      const oldFlowCount = flows.length;
+      const newFlowCount = newFlows.length;
+      const activeFlow = newFlows[newFlowCount - 1];
+      const previousFlow = newFlows[newFlowCount - 2];
+      if (newFlowCount && activeFlow) {
+        newFlows.forEach((flowNode) => {
+          flowNode.showBackButton = newFlowCount > 1;
+          flowNode.hidden = flowNode !== activeFlow;
         });
+      }
+      if (previousFlow) {
+        previousFlow.menuOpen = false;
+      }
+      this.flows = newFlows;
+      if (oldFlowCount !== newFlowCount) {
+        const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
+        this.flowCount = newFlowCount;
+        this.flowDirection = flowDirection;
+      }
+    };
+    this.flowItemObserver = new MutationObserver(this.updateFlowProps);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Removes the currently active `calcite-flow-item`.
+   */
+  async back() {
+    const lastItem = this.el.querySelector("calcite-flow-item:last-child");
+    if (!lastItem) {
+      return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
-        this.updateFlowProps();
-    }
-    componentDidUnload() {
-        this.flowItemObserver.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    handleCalciteFlowItemBackClick() {
-        this.back();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { flowDirection, flowCount } = this;
-        const frameDirectionClasses = {
-            [CSS.frame]: true,
-            [CSS.frameAdvancing]: flowDirection === "advancing",
-            [CSS.frameRetreating]: flowDirection === "retreating"
-        };
-        return (h(Host, null, h("div", { key: flowCount, class: frameDirectionClasses }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+    const beforeBack = lastItem.beforeBack
+      ? lastItem.beforeBack
+      : () => Promise.resolve();
+    return beforeBack.call(lastItem).then(() => {
+      lastItem.remove();
+      return lastItem;
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.flowItemObserver.observe(this.el, { childList: true, subtree: true });
+    this.updateFlowProps();
+  }
+  disconnectedCallback() {
+    this.flowItemObserver.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalciteFlowItemBackClick() {
+    this.back();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { flowDirection, flowCount } = this;
+    const frameDirectionClasses = {
+      [CSS.frame]: true,
+      [CSS.frameAdvancing]: flowDirection === "advancing",
+      [CSS.frameRetreating]: flowDirection === "retreating"
+    };
+    return (h(Host, null, h("div", { key: flowCount, class: frameDirectionClasses }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -107,0 +107,0 @@ CalciteFlow.style = calciteFlowCss;

dist/esm/calcite-handle.entry.js

@@ -1,75 +0,75 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-6ab9e002.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e3ebf984.js';
 
 const CSS = {
-    handle: "handle",
-    handleActivated: "handle--activated"
+  handle: "handle",
+  handleActivated: "handle--activated"
 };
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:-ms-flexbox;display:flex}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
+const calciteHandleCss = ":host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host{display:flex}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background);background-color:transparent;border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover{background-color:var(--calcite-app-background-hover);color:var(--calcite-app-foreground)}.handle:focus{color:var(--calcite-app-foreground);outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}";
 
 const CalciteHandle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.activated = false;
-        /**
-         * Value for the button title attribute
-         */
-        this.textTitle = "handle";
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case " ":
-                    this.activated = !this.activated;
-                    break;
-                case "ArrowUp":
-                case "ArrowDown":
-                    if (!this.activated) {
-                        return;
-                    }
-                    const direction = event.key.toLowerCase().replace("arrow", "");
-                    this.calciteHandleNudge.emit({ handle: this.el, direction });
-                    break;
-            }
-        };
-        this.handleBlur = () => {
-            this.activated = false;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus() {
-        this.handleButton.focus();
-    }
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.activated = false;
+    /**
+     * Value for the button title attribute
+     */
+    this.textTitle = "handle";
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    render() {
-        return (
-        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
-                this.handleButton = el;
-            } }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-    }
-    get el() { return getElement(this); }
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          const direction = event.key.toLowerCase().replace("arrow", "");
+          this.calciteHandleNudge.emit({ handle: this.el, direction });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus() {
+    this.handleButton.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { role: "button", tabindex: "0", "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, title: this.textTitle, ref: (el) => {
+        this.handleButton = el;
+      } }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
+  }
+  get el() { return getElement(this); }
 };
@@ -76,0 +76,0 @@ CalciteHandle.style = calciteHandleCss;

dist/esm/calcite-panel.entry.js

@@ -1,118 +0,118 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as getSlotted, a as getElementDir, b as getElementTheme } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
-import { S as SLOTS, C as CSS, T as TEXT, I as ICONS } from './resources-cccf0a03.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as getSlotted, a as getElementDir, b as getElementTheme } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
+import { S as SLOTS, C as CSS, T as TEXT, I as ICONS } from './resources-2a60d745.js';
 
-const calcitePanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{-ms-flex-align:stretch;align-items:stretch;-webkit-transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}calcite-scrim{-ms-flex-align:stretch;align-items:stretch;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:start;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex:1 1 auto;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-pack:space-evenly;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:-webkit-sticky;position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
+const calcitePanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;position:relative;--calcite-app-panel-max-height-small:40vh;--calcite-app-panel-max-height-medium:60vh;--calcite-app-panel-max-height-large:80vh;--calcite-app-panel-min-header-height:calc(var(--calcite-app-icon-size) * 3)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{align-items:stretch;transition:max-height var(--calcite-app-animation-time) var(--calcite-app-easing-function);width:100%;height:100%;padding:0;margin:0;display:flex;flex-flow:column}calcite-scrim{align-items:stretch;width:100%;height:100%;display:flex;flex-flow:column;pointer-events:none}:host([height-scale=s]) .container{max-height:var(--calcite-app-panel-max-height-small)}:host([height-scale=m]) .container{max-height:var(--calcite-app-panel-max-height-medium)}:host([height-scale=l]) .container{max-height:var(--calcite-app-panel-max-height-large)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{align-items:stretch;display:flex;flex:0 0 auto;justify-content:flex-start;min-height:var(--calcite-app-header-min-height);position:relative;z-index:2;border-bottom:1px solid var(--calcite-app-border);width:100%}.header-content{overflow:hidden;padding:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing)}.header-leading-content,.header-trailing-content{align-items:stretch;display:flex;flex-flow:row nowrap}.header-trailing-content{margin-left:auto}.header-leading-content+.header-content{padding-left:var(--calcite-app-side-spacing-half)}.content-container{align-items:stretch;display:flex;flex-flow:column nowrap;flex:1 1 auto;background-color:var(--calcite-app-background-content);overflow:auto}.footer{border-top:1px solid var(--calcite-app-border);display:flex;flex:0 0 auto;justify-content:space-evenly;min-height:var(--calcite-app-footer-min-height);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}.calcite--rtl .header-leading-content+.header-content{padding-right:var(--calcite-app-side-spacing-half)}.calcite--rtl .header-trailing-content{margin-left:0;margin-right:auto}.fab-container{position:sticky;z-index:1;bottom:0;display:inline-block;margin:0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);left:0;right:0}";
 
 const CalcitePanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
-        this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hides the panel.
-         */
-        this.dismissed = false;
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * Displays a close button in the trailing side of the header.
-         */
-        this.dismissible = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.panelKeyUpHandler = (event) => {
-            if (event.key === "Escape") {
-                this.dismiss();
-            }
-        };
-        this.dismiss = () => {
-            this.dismissed = true;
-        };
-        this.panelScrollHandler = () => {
-            this.calcitePanelScroll.emit();
-        };
-    }
-    dismissedHandler() {
-        this.calcitePanelDismissedChange.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
+    this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    async setFocus(focusId) {
-        var _a, _b;
-        if (focusId === "dismiss-button") {
-            (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-            return;
-        }
-        (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
-    }
+    /**
+     * Hides the panel.
+     */
+    this.dismissed = false;
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Displays a close button in the trailing side of the header.
+     */
+    this.dismissible = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderHeaderLeadingContent() {
-        const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
-        return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent }, h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+    this.panelKeyUpHandler = (event) => {
+      if (event.key === "Escape") {
+        this.dismiss();
+      }
+    };
+    this.dismiss = () => {
+      this.dismissed = true;
+    };
+    this.panelScrollHandler = () => {
+      this.calcitePanelScroll.emit();
+    };
+  }
+  dismissedHandler() {
+    this.calcitePanelDismissedChange.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  async setFocus(focusId) {
+    var _a, _b;
+    if (focusId === "dismiss-button") {
+      (_a = this.dismissButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      return;
     }
-    renderHeaderContent() {
-        return (h("div", { key: "header-content", class: CSS.headerContent }, h("slot", { name: SLOTS.headerContent })));
-    }
-    renderHeaderTrailingContent() {
-        const { dismiss, dismissible, intlClose } = this;
-        const text = intlClose || TEXT.close;
-        const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
-        const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
-        return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent }, slotNode, dismissibleNode));
-    }
-    renderHeader() {
-        const headerLeadingContentNode = this.renderHeaderLeadingContent();
-        const headerContentNode = this.renderHeaderContent();
-        const headerTrailingContentNode = this.renderHeaderTrailingContent();
-        const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
-        return canDisplayHeader ? (h("header", { class: CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
-    }
-    renderFooter() {
-        const { el } = this;
-        const hasFooter = getSlotted(el, SLOTS.footer);
-        return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderContent() {
-        return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler }, h("slot", null), this.renderFab()));
-    }
-    renderFab() {
-        const hasFab = getSlotted(this.el, SLOTS.fab);
-        return hasFab ? (h("div", { class: CSS.fabContainer }, h("slot", { name: SLOTS.fab }))) : null;
-    }
-    render() {
-        const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
-                [CSS.container]: true,
-                [CSS_UTILITY.rtl]: rtl
-            } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
-        return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "dismissed": ["dismissedHandler"]
-    }; }
+    (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeaderLeadingContent() {
+    const hasLeadingContent = getSlotted(this.el, SLOTS.headerLeadingContent);
+    return hasLeadingContent ? (h("div", { key: "header-leading-content", class: CSS.headerLeadingContent }, h("slot", { name: SLOTS.headerLeadingContent }))) : null;
+  }
+  renderHeaderContent() {
+    return (h("div", { key: "header-content", class: CSS.headerContent }, h("slot", { name: SLOTS.headerContent })));
+  }
+  renderHeaderTrailingContent() {
+    const { dismiss, dismissible, intlClose } = this;
+    const text = intlClose || TEXT.close;
+    const dismissibleNode = dismissible ? (h("calcite-action", { ref: (dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl), "aria-label": text, text: text, onClick: dismiss, icon: ICONS.close })) : null;
+    const slotNode = h("slot", { name: SLOTS.headerTrailingContent });
+    return (h("div", { key: "header-trailing-content", class: CSS.headerTrailingContent }, slotNode, dismissibleNode));
+  }
+  renderHeader() {
+    const headerLeadingContentNode = this.renderHeaderLeadingContent();
+    const headerContentNode = this.renderHeaderContent();
+    const headerTrailingContentNode = this.renderHeaderTrailingContent();
+    const canDisplayHeader = headerContentNode || headerLeadingContentNode || headerTrailingContentNode;
+    return canDisplayHeader ? (h("header", { class: CSS.header }, headerLeadingContentNode, headerContentNode, headerTrailingContentNode)) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const hasFooter = getSlotted(el, SLOTS.footer);
+    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderContent() {
+    return (h("section", { tabIndex: 0, class: CSS.contentContainer, onScroll: this.panelScrollHandler }, h("slot", null), this.renderFab()));
+  }
+  renderFab() {
+    const hasFab = getSlotted(this.el, SLOTS.fab);
+    return hasFab ? (h("div", { class: CSS.fabContainer }, h("slot", { name: SLOTS.fab }))) : null;
+  }
+  render() {
+    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const panelNode = (h("article", { "aria-busy": loading.toString(), onKeyUp: panelKeyUpHandler, tabIndex: dismissible ? 0 : -1, hidden: dismissible && dismissed, ref: (containerEl) => (this.containerEl = containerEl), class: {
+        [CSS.container]: true,
+        [CSS_UTILITY.rtl]: rtl
+      } }, this.renderHeader(), this.renderContent(), this.renderFooter()));
+    return (h(Host, null, loading || disabled ? (h("calcite-scrim", { theme: getElementTheme(el), loading: loading }, panelNode)) : (panelNode)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "dismissed": ["dismissedHandler"]
+  }; }
 };
@@ -119,0 +119,0 @@ CalcitePanel.style = calcitePanelCss;

dist/esm/calcite-pick-list-group.entry.js

@@ -1,37 +0,38 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir, g as getSlotted } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir, g as getSlotted } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    heading: "heading",
-    container: "container",
-    indented: "container--indented"
+  heading: "heading",
+  container: "container",
+  indented: "container--indented"
 };
 const SLOTS = {
-    parentItem: "parent-item"
+  parentItem: "parent-item"
 };
 
-const calcitePickListGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
+const calcitePickListGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{background-color:var(--calcite-app-background-clear);display:block;margin-bottom:var(--calcite-app-cap-spacing-quarter)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host(:last-child){margin-bottom:0}h3.heading{font-size:var(--calcite-app-font-size-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}.container--indented{margin-left:var(--calcite-app-side-spacing-plus-half)}.calcite--rtl.container--indented{margin-left:0;margin-right:var(--calcite-app-side-spacing-plus-half)}";
 
 const CalcitePickListGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { el, textGroupTitle } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
-        const sectionClasses = {
-            [CSS.container]: true,
-            [CSS.indented]: hasParentItem,
-            [CSS_UTILITY.rtl]: rtl
-        };
-        return (h(Host, null, textGroupTitle ? h("h3", { class: CSS.heading }, textGroupTitle) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, groupTitle, textGroupTitle } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
+    const sectionClasses = {
+      [CSS.container]: true,
+      [CSS.indented]: hasParentItem,
+      [CSS_UTILITY.rtl]: rtl
+    };
+    const title = groupTitle || textGroupTitle;
+    return (h(Host, null, title ? h("h3", { class: CSS.heading }, title) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
 };
@@ -38,0 +39,0 @@ CalcitePickListGroup.style = calcitePickListGroupCss;

dist/esm/calcite-pick-list-item.entry.js

@@ -1,144 +0,148 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as getSlotted } from './dom-462ef99a.js';
-import { I as ICON_TYPES } from './resources-3de36c7f.js';
-import { T as TEXT, I as ICONS, C as CSS, S as SLOTS } from './resources-5f17182f.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
+import { I as ICON_TYPES } from './resources-fef38cfc.js';
+import { T as TEXT, I as ICONS, C as CSS, S as SLOTS } from './resources-ec6ffb66.js';
 
-const calcitePickListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;-ms-flex-align:center;align-items:center;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;margin:0;color:var(--calcite-app-foreground);-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);-webkit-animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);-ms-flex:0 0 0%;flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{-webkit-transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);-ms-flex-align:center;align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
+const calcitePickListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;align-items:center;background-color:var(--calcite-app-background-clear);display:flex;margin:0;color:var(--calcite-app-foreground);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);animation:calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover),:host(:focus){background-color:var(--calcite-app-background-hover)}.icon{color:var(--calcite-app-foreground-link);flex:0 0 0%;line-height:0;width:var(--calcite-app-icon-size);margin:0 var(--calcite-app-side-spacing-quarter);opacity:0}:host([selected]) .icon{transition:opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);opacity:1}.label{display:flex;flex:1 1 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);align-items:center;cursor:pointer;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.label:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.text-container{display:flex;flex-flow:column nowrap;overflow:hidden;pointer-events:none;padding:0 var(--calcite-app-side-spacing-quarter)}.title{font-size:var(--calcite-app-font-size--1);word-wrap:break-word;word-break:break-word}.description{color:var(--calcite-app-foreground-subtle);font-family:var(--calcite-app-font-family-monospace);font-size:var(--calcite-app-font-size--2);margin-top:var(--calcite-app-cap-spacing-quarter);word-wrap:break-word;word-break:break-word}.action{align-items:center;display:flex;flex:0 0 auto;justify-self:flex-end;margin:var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half)}";
 
 const CalcitePickListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
-        this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-        this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
-        this.calciteListItemValueChange = createEvent(this, "calciteListItemValueChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted.
-         */
-        this.disabled = false;
-        /**
-         * When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        /**
-         * The text for the remove item buttons. Only applicable if removable is true.
-         */
-        this.textRemove = TEXT.remove;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.pickListClickHandler = (event) => {
-            if (this.disabled || (this.disableDeselect && this.selected)) {
-                return;
-            }
-            this.shiftPressed = event.shiftKey;
-            this.selected = !this.selected;
-        };
-        this.pickListKeyDownHandler = (event) => {
-            if (event.key === " ") {
-                event.preventDefault();
-                if (this.disableDeselect && this.selected) {
-                    return;
-                }
-                this.selected = !this.selected;
-            }
-        };
-        this.removeClickHandler = () => {
-            this.calciteListItemRemove.emit();
-        };
-    }
-    metadataWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    selectedWatchHandler() {
-        this.calciteListItemChange.emit({
-            item: this.el,
-            value: this.value,
-            selected: this.selected,
-            shiftPressed: this.shiftPressed
-        });
-        this.shiftPressed = false;
-    }
-    textDescriptionWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    textLabelWatchHandler() {
-        this.calciteListItemPropsChange.emit();
-    }
-    valueWatchHandler(newValue, oldValue) {
-        this.calciteListItemValueChange.emit({ oldValue, newValue });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
+    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+    this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
+    this.calciteListItemValueChange = createEvent(this, "calciteListItemValueChange", 7);
     /**
-     * Used to toggle the selection state. By default this won't trigger an event.
-     * The first argument allows the value to be coerced, rather than swapping values.
+     * When true, the item cannot be clicked and is visually muted.
      */
-    async toggleSelected(coerce) {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
-    }
-    async setFocus() {
-        var _a;
-        (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+    this.disabled = false;
+    /**
+     * When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    /**
+     * The text for the remove item buttons. Only applicable if removable is true.
+     */
+    this.textRemove = TEXT.remove;
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    renderIcon() {
-        const { icon } = this;
-        if (!icon) {
-            return null;
+    this.pickListClickHandler = (event) => {
+      if (this.disabled || (this.disableDeselect && this.selected)) {
+        return;
+      }
+      this.shiftPressed = event.shiftKey;
+      this.selected = !this.selected;
+    };
+    this.pickListKeyDownHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if (this.disableDeselect && this.selected) {
+          return;
         }
-        const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
-        return (h("span", { class: CSS.icon }, h("calcite-icon", { scale: "s", icon: iconName })));
+        this.selected = !this.selected;
+      }
+    };
+    this.removeClickHandler = () => {
+      this.calciteListItemRemove.emit();
+    };
+  }
+  descriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  labelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  metadataWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed
+    });
+    this.shiftPressed = false;
+  }
+  textDescriptionWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  textLabelWatchHandler() {
+    this.calciteListItemPropsChange.emit();
+  }
+  valueWatchHandler(newValue, oldValue) {
+    this.calciteListItemValueChange.emit({ oldValue, newValue });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  async toggleSelected(coerce) {
+    if (this.disabled) {
+      return;
     }
-    renderRemoveAction() {
-        if (!this.removable) {
-            return null;
-        }
-        return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderIcon() {
+    const { icon } = this;
+    if (!icon) {
+      return null;
     }
-    renderSecondaryAction() {
-        const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
-        return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action }, h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+    const iconName = icon === ICON_TYPES.circle ? ICONS.circle : ICONS.checked;
+    return (h("span", { class: CSS.icon }, h("calcite-icon", { scale: "s", icon: iconName })));
+  }
+  renderRemoveAction() {
+    if (!this.removable) {
+      return null;
     }
-    render() {
-        const description = this.textDescription ? (h("span", { class: CSS.description }, this.textDescription)) : null;
-        return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": this.textLabel }, this.renderIcon(), h("div", { class: CSS.textContainer }, h("span", { class: CSS.title }, this.textLabel), description)), this.renderSecondaryAction()));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "metadata": ["metadataWatchHandler"],
-        "selected": ["selectedWatchHandler"],
-        "textDescription": ["textDescriptionWatchHandler"],
-        "textLabel": ["textLabelWatchHandler"],
-        "value": ["valueWatchHandler"]
-    }; }
+    return (h("calcite-action", { scale: "s", class: CSS.remove, icon: ICONS.remove, text: this.textRemove, onClick: this.removeClickHandler }));
+  }
+  renderSecondaryAction() {
+    const hasSecondaryAction = getSlotted(this.el, SLOTS.secondaryAction);
+    return hasSecondaryAction || this.removable ? (h("div", { class: CSS.action }, h("slot", { name: SLOTS.secondaryAction }, this.renderRemoveAction()))) : null;
+  }
+  render() {
+    const description = this.description || this.textDescription;
+    const label = this.label || this.textLabel;
+    return (h(Host, { role: "menuitemcheckbox", "aria-checked": this.selected.toString() }, h("label", { class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0, ref: (focusEl) => (this.focusEl = focusEl), "aria-label": label }, this.renderIcon(), h("div", { class: CSS.textContainer }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderSecondaryAction()));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "description": ["descriptionWatchHandler"],
+    "label": ["labelWatchHandler"],
+    "metadata": ["metadataWatchHandler"],
+    "selected": ["selectedWatchHandler"],
+    "textDescription": ["textDescriptionWatchHandler"],
+    "textLabel": ["textLabelWatchHandler"],
+    "value": ["valueWatchHandler"]
+  }; }
 };
@@ -145,0 +149,0 @@ CalcitePickListItem.style = calcitePickListItemCss;

dist/esm/calcite-pick-list.entry.js

@@ -1,115 +0,117 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-6ab9e002.js';
-import './dom-462ef99a.js';
-import './array-dbbc14b3.js';
-import { T as TEXT, I as ICON_TYPES } from './resources-3de36c7f.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e3ebf984.js';
+import './dom-0962c5fe.js';
+import './array-9b53302c.js';
+import { T as TEXT, I as ICON_TYPES } from './resources-fef38cfc.js';
 import './lodash-fad0d111.js';
-import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-25bae6dd.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-69dca85e.js';
 
-const calcitePickListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-flow:column;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
+const calcitePickListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;display:flex;flex:1 0 auto;flex-flow:column;padding-bottom:var(--calcite-app-cap-spacing);position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-half);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}:host([loading][disabled]){min-height:2rem}";
 
 const CalcitePickList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListChange = createEvent(this, "calciteListChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = keyDownHandler.bind(this);
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-pick-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = keyDownHandler.bind(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-pick-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return getElement(this); }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return getElement(this); }
 };
@@ -116,0 +118,0 @@ CalcitePickList.style = calcitePickListCss;

dist/esm/calcite-shell-center-row.entry.js

@@ -1,54 +0,54 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir, g as getSlotted } from './dom-462ef99a.js';
-import { C as CSS_UTILITY } from './resources-34eb8923.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir, g as getSlotted } from './dom-0962c5fe.js';
+import { C as CSS_UTILITY } from './resources-95dc0307.js';
 
 const CSS = {
-    actionBarContainer: "action-bar-container",
-    content: "content"
+  actionBarContainer: "action-bar-container",
+  content: "content"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellCenterRowCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;overflow:hidden;-webkit-transition:height var(--calcite-app-animation-time) ease-in-out;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:-ms-flexbox;display:flex;-ms-flex:1 0 0px;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:-ms-flexbox;display:flex}:host([detached]){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){-ms-flex-item-align:end;align-self:flex-end}:host([position=start]){-ms-flex-item-align:start;align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
+const calciteShellCenterRowCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;overflow:hidden;transition:height var(--calcite-app-animation-time) ease-in-out;background-color:var(--calcite-app-background-clear);border-left:1px solid var(--calcite-app-border);border-right:1px solid var(--calcite-app-border);--calcite-app-shell-center-row-height-small:33%;--calcite-app-shell-center-row-height-medium:70%;--calcite-app-shell-center-row-height-large:100%}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{display:flex;flex:1 0 0;height:100%;margin:0;overflow:hidden;width:100%}.action-bar-container{display:flex}:host([detached]){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border:none;border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) var(--calcite-app-cap-spacing-plus-half)}:host([position=end]){align-self:flex-end}:host([position=start]){align-self:flex-start}:host([height-scale=s]){height:var(--calcite-app-shell-center-row-height-small)}:host([height-scale=m]){height:var(--calcite-app-shell-center-row-height-medium)}:host([height-scale=l]){height:var(--calcite-app-shell-center-row-height-large)}:host([height-scale=l][detached]){height:calc(var(--calcite-app-shell-center-row-height-large) - var(--calcite-app-cap-spacing-double))}::slotted(calcite-panel){width:100%;height:100%}::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}::slotted(calcite-action-bar[position=end]){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar){border-right:none;border-left:1px solid var(--calcite-app-border)}.calcite--rtl ::slotted(calcite-action-bar[position=end]){border-left:none;border-right:1px solid var(--calcite-app-border)}";
 
 const CalciteShellCenterRow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * Specifies the maxiumum height of the row.
-         */
-        this.heightScale = "s";
-        /**
-         * Arranges the component depending on the elements 'dir' property.
-         */
-        this.position = "end";
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { el } = this;
-        const rtl = getElementDir(el) === "rtl";
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", null)));
-        const actionBar = getSlotted(el, SLOTS.actionBar);
-        const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", { name: SLOTS.actionBar }))) : null;
-        const children = [actionBarNode, contentNode];
-        if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
-            children.reverse();
-        }
-        return h(Host, null, children);
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * Specifies the maxiumum height of the row.
+     */
+    this.heightScale = "s";
+    /**
+     * Arranges the component depending on the elements 'dir' property.
+     */
+    this.position = "end";
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el } = this;
+    const rtl = getElementDir(el) === "rtl";
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", null)));
+    const actionBar = getSlotted(el, SLOTS.actionBar);
+    const actionBarNode = actionBar ? (h("div", { class: { [CSS.actionBarContainer]: true, [CSS_UTILITY.rtl]: rtl } }, h("slot", { name: SLOTS.actionBar }))) : null;
+    const children = [actionBarNode, contentNode];
+    if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
+      children.reverse();
     }
-    get el() { return getElement(this); }
+    return h(Host, null, children);
+  }
+  get el() { return getElement(this); }
 };
@@ -55,0 +55,0 @@ CalciteShellCenterRow.style = calciteShellCenterRowCss;

dist/esm/calcite-shell-panel.entry.js

@@ -1,56 +0,56 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-6ab9e002.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-e3ebf984.js';
 
 const CSS = {
-    content: "content",
-    contentDetached: "content--detached"
+  content: "content",
+  contentDetached: "content--detached"
 };
 const SLOTS = {
-    actionBar: "action-bar"
+  actionBar: "action-bar"
 };
 
-const calciteShellPanelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);-ms-flex-flow:column nowrap;flex-flow:column nowrap;display:-ms-flexbox;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);-webkit-box-shadow:var(--calcite-app-shadow-0);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
+const calciteShellPanelCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{display:flex;align-items:stretch;background-color:var(--calcite-app-background-transparent);pointer-events:none;--calcite-app-shell-panel-width:20vw;--calcite-app-shell-panel-min-width:240px;--calcite-app-shell-panel-max-width:360px;--calcite-app-shell-panel-min-height:4rem;--calcite-app-shell-panel-max-height-small:35vh;--calcite-app-shell-panel-max-height-medium:55vh;--calcite-app-shell-panel-max-height-large:80vh}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.content{align-items:stretch;align-self:stretch;background-color:var(--calcite-app-background-content);flex-flow:column nowrap;display:flex;width:var(--calcite-app-shell-panel-width);min-width:var(--calcite-app-shell-panel-min-width);max-width:var(--calcite-app-shell-panel-max-width);min-height:var(--calcite-app-shell-panel-min-height);padding:0;pointer-events:auto}.content--detached{border-radius:var(--calcite-app-border-radius);box-shadow:var(--calcite-app-shadow-0);margin:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) auto;max-height:var(--calcite-app-shell-panel-max-height-medium);overflow:auto}:host([detached-scale=s]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-small)}:host([detached-scale=l]) .content--detached{max-height:var(--calcite-app-shell-panel-max-height-large)}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right:1px solid var(--calcite-app-border)}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left:1px solid var(--calcite-app-border)}";
 
 const CalciteShellPanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Hide the content panel.
-         */
-        this.collapsed = false;
-        /**
-         * This property makes the content area appear like a "floating" panel.
-         */
-        this.detached = false;
-        /**
-         * This sets limits the height of the content area. It only applies when detached is true.
-         */
-        this.detachedScale = "m";
-    }
-    watchHandler() {
-        this.calciteShellPanelToggle.emit();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    render() {
-        const { collapsed, detached, position } = this;
-        const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, h("slot", null)));
-        const actionBarNode = h("slot", { name: SLOTS.actionBar });
-        const mainNodes = [actionBarNode, contentNode];
-        if (position === "end") {
-            mainNodes.reverse();
-        }
-        return h(Host, null, mainNodes);
+    /**
+     * Hide the content panel.
+     */
+    this.collapsed = false;
+    /**
+     * This property makes the content area appear like a "floating" panel.
+     */
+    this.detached = false;
+    /**
+     * This sets limits the height of the content area. It only applies when detached is true.
+     */
+    this.detachedScale = "m";
+  }
+  watchHandler() {
+    this.calciteShellPanelToggle.emit();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { collapsed, detached, position } = this;
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed }, h("slot", null)));
+    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const mainNodes = [actionBarNode, contentNode];
+    if (position === "end") {
+      mainNodes.reverse();
     }
-    static get watchers() { return {
-        "collapsed": ["watchHandler"]
-    }; }
+    return h(Host, null, mainNodes);
+  }
+  static get watchers() { return {
+    "collapsed": ["watchHandler"]
+  }; }
 };
@@ -57,0 +57,0 @@ CalciteShellPanel.style = calciteShellPanelCss;

dist/esm/calcite-shell.entry.js

@@ -1,52 +0,52 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as getSlotted } from './dom-462ef99a.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
 
 const CSS = {
-    main: "main",
-    mainReversed: "main--reversed",
-    content: "content",
-    footer: "footer"
+  main: "main",
+  mainReversed: "main--reversed",
+  content: "content",
+  footer: "footer"
 };
 const SLOTS = {
-    centerRow: "center-row",
-    primaryPanel: "primary-panel",
-    contextualPanel: "contextual-panel",
-    header: "shell-header",
-    footer: "shell-footer"
+  centerRow: "center-row",
+  primaryPanel: "primary-panel",
+  contextualPanel: "contextual-panel",
+  header: "shell-header",
+  footer: "shell-footer"
 };
 
-const calciteShellCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.main--reversed{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){-webkit-animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);-webkit-box-sizing:border-box;box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
+const calciteShellCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;overflow:hidden;--calcite-app-shell-tip-spacing:26vw}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.main{height:100%;width:100%;flex:1 1 auto;display:flex;flex-direction:row;position:relative;border-top:1px solid var(--calcite-app-border-subtle);border-bottom:1px solid var(--calcite-app-border-subtle);justify-content:space-between;overflow:hidden}.main--reversed{flex-direction:row-reverse}.content{height:100%;width:100%;position:absolute;left:0;right:0;bottom:0;top:0;z-index:0}::slotted(.header .heading){font-weight:var(--calcite-app-font-weight);font-size:var(--calcite-app-font-size-1)}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-tip-manager){animation:calcite-app-fade-in-up var(--calcite-app-animation-time) var(--calcite-app-easing-function);border-radius:var(--calcite-app-border-radius);bottom:var(--calcite-app-cap-spacing-plus-half);box-shadow:var(--calcite-app-shadow-2);box-sizing:border-box;left:var(--calcite-app-shell-tip-spacing);position:absolute;right:var(--calcite-app-shell-tip-spacing);z-index:2}.footer{padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing)}";
 
 const CalciteShell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHeader() {
-        const hasHeader = !!getSlotted(this.el, SLOTS.header);
-        return hasHeader ? h("slot", { name: SLOTS.header }) : null;
-    }
-    renderContent() {
-        return (h("div", { class: CSS.content }, h("slot", null)));
-    }
-    renderFooter() {
-        const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-        return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
-    }
-    renderMain() {
-        const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
-        const mainClasses = {
-            [CSS.main]: true,
-            [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
-        };
-        return (h("div", { class: mainClasses }, h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), h("slot", { name: SLOTS.centerRow }), h("slot", { name: SLOTS.contextualPanel })));
-    }
-    render() {
-        return (h(Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
-    }
-    get el() { return getElement(this); }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const hasHeader = !!getSlotted(this.el, SLOTS.header);
+    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderFooter() {
+    const hasFooter = !!getSlotted(this.el, SLOTS.footer);
+    return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+  }
+  renderMain() {
+    const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);
+    const mainClasses = {
+      [CSS.main]: true,
+      [CSS.mainReversed]: (primaryPanel === null || primaryPanel === void 0 ? void 0 : primaryPanel.position) === "end"
+    };
+    return (h("div", { class: mainClasses }, h("slot", { name: SLOTS.primaryPanel }), this.renderContent(), h("slot", { name: SLOTS.centerRow }), h("slot", { name: SLOTS.contextualPanel })));
+  }
+  render() {
+    return (h(Host, null, this.renderHeader(), this.renderMain(), this.renderFooter()));
+  }
+  get el() { return getElement(this); }
 };
@@ -53,0 +53,0 @@ CalciteShell.style = calciteShellCss;

dist/esm/calcite-sortable-list.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
 import { S as Sortable } from './sortable.esm-107104a2.js';
@@ -7,128 +7,128 @@
 const CalciteSortableList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * The class on the handle elements.
-         */
-        this.handleSelector = "calcite-handle";
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        this.handleActivated = false;
-        this.items = [];
-        this.observer = new MutationObserver(() => {
-            this.cleanUpDragAndDrop();
-            this.items = Array.from(this.el.children);
-            this.setUpDragAndDrop();
-        });
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.items = Array.from(this.el.children);
-        this.setUpDragAndDrop();
-        this.beginObserving();
-    }
-    componentDidUnload() {
-        this.observer.disconnect();
-        this.cleanUpDragAndDrop();
-    }
-    calciteHandleNudgeHandler(event) {
-        const sortItem = this.items.find((item) => {
-            return item.contains(event.detail.handle) || event.composedPath().includes(item);
-        });
-        const lastIndex = this.items.length - 1;
-        const startingIndex = this.items.indexOf(sortItem);
-        let appendInstead = false;
-        let buddyIndex;
-        switch (event.detail.direction) {
-            case "up":
-                event.preventDefault();
-                if (startingIndex === 0) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex - 1;
-                }
-                break;
-            case "down":
-                event.preventDefault();
-                if (startingIndex === lastIndex) {
-                    buddyIndex = 0;
-                }
-                else if (startingIndex === lastIndex - 1) {
-                    appendInstead = true;
-                }
-                else {
-                    buddyIndex = startingIndex + 2;
-                }
-                break;
-            default:
-                return;
+    /**
+     * The class on the handle elements.
+     */
+    this.handleSelector = "calcite-handle";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    this.handleActivated = false;
+    this.items = [];
+    this.observer = new MutationObserver(() => {
+      this.cleanUpDragAndDrop();
+      this.items = Array.from(this.el.children);
+      this.setUpDragAndDrop();
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.items = Array.from(this.el.children);
+    this.setUpDragAndDrop();
+    this.beginObserving();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.cleanUpDragAndDrop();
+  }
+  calciteHandleNudgeHandler(event) {
+    const sortItem = this.items.find((item) => {
+      return item.contains(event.detail.handle) || event.composedPath().includes(item);
+    });
+    const lastIndex = this.items.length - 1;
+    const startingIndex = this.items.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    switch (event.detail.direction) {
+      case "up":
+        event.preventDefault();
+        if (startingIndex === 0) {
+          appendInstead = true;
         }
-        this.observer.disconnect();
-        if (appendInstead) {
-            sortItem.parentElement.appendChild(sortItem);
+        else {
+          buddyIndex = startingIndex - 1;
         }
+        break;
+      case "down":
+        event.preventDefault();
+        if (startingIndex === lastIndex) {
+          buddyIndex = 0;
+        }
+        else if (startingIndex === lastIndex - 1) {
+          appendInstead = true;
+        }
         else {
-            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+          buddyIndex = startingIndex + 2;
         }
-        this.items = Array.from(this.el.children);
-        event.detail.handle.activated = true;
-        event.detail.handle.setFocus();
-        this.beginObserving();
+        break;
+      default:
+        return;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpDragAndDrop() {
-        this.sortable = Sortable.create(this.el, {
-            handle: this.handleSelector,
-            // Changed sorting within list
-            onUpdate: () => {
-                this.items = Array.from(this.el.children);
-                this.calciteListOrderChange.emit();
-            },
-            // Element dragging started
-            onStart: () => {
-                this.observer.disconnect();
-            },
-            // Element dragging ended
-            onEnd: () => {
-                this.beginObserving();
-            }
-        });
+    this.observer.disconnect();
+    if (appendInstead) {
+      sortItem.parentElement.appendChild(sortItem);
     }
-    cleanUpDragAndDrop() {
-        this.sortable.destroy();
-        this.sortable = null;
+    else {
+      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
-    beginObserving() {
-        this.observer.observe(this.el, { childList: true, subtree: true });
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, null, h("slot", null)));
-    }
-    get el() { return getElement(this); }
+    this.items = Array.from(this.el.children);
+    event.detail.handle.activated = true;
+    event.detail.handle.setFocus();
+    this.beginObserving();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpDragAndDrop() {
+    this.sortable = Sortable.create(this.el, {
+      handle: this.handleSelector,
+      // Changed sorting within list
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
+      },
+      // Element dragging started
+      onStart: () => {
+        this.observer.disconnect();
+      },
+      // Element dragging ended
+      onEnd: () => {
+        this.beginObserving();
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    this.sortable.destroy();
+    this.sortable = null;
+  }
+  beginObserving() {
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return getElement(this); }
 };
@@ -135,0 +135,0 @@ CalciteSortableList.style = calciteSortableListCss;

dist/esm/calcite-tip-group.entry.js

@@ -1,12 +0,12 @@
-import { r as registerInstance, h } from './index-6ab9e002.js';
+import { r as registerInstance, h } from './index-e3ebf984.js';
 
-const calciteTipGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipGroupCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return h("slot", null);
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
 };
@@ -13,0 +13,0 @@ CalciteTipGroup.style = calciteTipGroupCss;

dist/esm/calcite-tip-manager.entry.js

@@ -1,180 +0,180 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { a as getElementDir } from './dom-462ef99a.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { a as getElementDir } from './dom-0962c5fe.js';
 
 const CSS = {
-    header: "header",
-    heading: "heading",
-    close: "close",
-    container: "container",
-    tipContainer: "tip-container",
-    tipContainerAdvancing: "tip-container--advancing",
-    tipContainerRetreating: "tip-container--retreating",
-    pagination: "pagination",
-    pagePosition: "page-position",
-    pageNext: "page-next",
-    pagePrevious: "page-previous"
+  header: "header",
+  heading: "heading",
+  close: "close",
+  container: "container",
+  tipContainer: "tip-container",
+  tipContainerAdvancing: "tip-container--advancing",
+  tipContainerRetreating: "tip-container--retreating",
+  pagination: "pagination",
+  pagePosition: "page-position",
+  pageNext: "page-next",
+  pagePrevious: "page-previous"
 };
 const ICONS = {
-    chevronLeft: "chevron-left",
-    chevronRight: "chevron-right",
-    close: "x"
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  close: "x"
 };
 const TEXT = {
-    defaultGroupTitle: "Tips",
-    defaultPaginationLabel: "Tip",
-    close: "Close",
-    previous: "Previous",
-    next: "Next"
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
 };
 
-const calciteTipManagerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@-webkit-keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{-webkit-animation-name:none;animation-name:none;-webkit-animation-duration:var(--calcite-app-animation-time);animation-duration:var(--calcite-app-animation-time);-webkit-animation-timing-function:var(--calcite-app-easing-function);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{-webkit-animation-name:tip-advance;animation-name:tip-advance}.tip-container--retreating{-webkit-animation-name:tip-retreat;animation-name:tip-retreat}.pagination{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
+const calciteTipManagerCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host{display:block}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}:host([closed]){display:none}.header .heading{padding-left:var(--calcite-app-side-spacing-half);padding-right:var(--calcite-app-side-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;min-height:150px;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{animation-name:none;animation-duration:var(--calcite-app-animation-time);animation-timing-function:var(--calcite-app-easing-function);height:18vh;margin-top:var(--calcite-app-cap-spacing-quarter);overflow:auto;display:flex;justify-content:center;align-items:flex-start;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip-group){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}::slotted(calcite-tip){max-width:540px;padding:0 var(--calcite-app-side-spacing-half)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding:var(--calcite-app-cap-spacing-quarter) 0}.page-position{font-size:var(--calcite-app-font-size--1);margin:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteTipManager = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * Alternate text for closing the `calcite-tip-manager`.
-         */
-        this.closed = false;
-        this.observer = new MutationObserver(() => this.setUpTips());
-        this.hideTipManager = () => {
-            this.closed = true;
-            this.calciteTipManagerToggle.emit();
-        };
-        this.previousClicked = () => {
-            this.previousTip();
-        };
-        this.nextClicked = () => {
-            this.nextTip();
-        };
-        this.tipManagerKeyUpHandler = (event) => {
-            if (event.target !== this.container) {
-                return;
-            }
-            switch (event.key) {
-                case "ArrowRight":
-                    event.preventDefault();
-                    this.nextTip();
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    this.previousTip();
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    this.selectedIndex = 0;
-                    break;
-                case "End":
-                    event.preventDefault();
-                    this.selectedIndex = this.total - 1;
-                    break;
-            }
-        };
-        this.storeContainerRef = (el) => {
-            this.container = el;
-        };
-    }
-    closedChangeHandler() {
-        this.direction = null;
-        this.calciteTipManagerToggle.emit();
-    }
-    selectedChangeHandler() {
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.setUpTips();
-        this.observer.observe(this.el, { childList: true, subtree: true });
+    /**
+     * Alternate text for closing the `calcite-tip-manager`.
+     */
+    this.closed = false;
+    this.observer = new MutationObserver(() => this.setUpTips());
+    this.hideTipManager = () => {
+      this.closed = true;
+      this.calciteTipManagerToggle.emit();
+    };
+    this.previousClicked = () => {
+      this.previousTip();
+    };
+    this.nextClicked = () => {
+      this.nextTip();
+    };
+    this.tipManagerKeyUpHandler = (event) => {
+      if (event.target !== this.container) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          this.nextTip();
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          this.previousTip();
+          break;
+        case "Home":
+          event.preventDefault();
+          this.selectedIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          this.selectedIndex = this.total - 1;
+          break;
+      }
+    };
+    this.storeContainerRef = (el) => {
+      this.container = el;
+    };
+  }
+  closedChangeHandler() {
+    this.direction = null;
+    this.calciteTipManagerToggle.emit();
+  }
+  selectedChangeHandler() {
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setUpTips();
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async nextTip() {
+    this.direction = "advancing";
+    const nextIndex = this.selectedIndex + 1;
+    this.selectedIndex = (nextIndex + this.total) % this.total;
+  }
+  async previousTip() {
+    this.direction = "retreating";
+    const previousIndex = this.selectedIndex - 1;
+    this.selectedIndex = (previousIndex + this.total) % this.total;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpTips() {
+    const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
+    this.total = tips.length;
+    if (this.total === 0) {
+      return;
     }
-    componentDidUnload() {
-        this.observer.disconnect();
+    const selectedTip = this.el.querySelector("calcite-tip[selected]");
+    this.tips = tips;
+    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
+    tips.forEach((tip) => {
+      tip.nonDismissible = true;
+    });
+    this.showSelectedTip();
+    this.updateGroupTitle();
+  }
+  showSelectedTip() {
+    this.tips.forEach((tip, index) => {
+      const isSelected = this.selectedIndex === index;
+      tip.selected = isSelected;
+      tip.hidden = !isSelected;
+    });
+  }
+  updateGroupTitle() {
+    const selectedTip = this.tips[this.selectedIndex];
+    const tipParent = selectedTip.closest("calcite-tip-group");
+    this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.groupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderPagination() {
+    const dir = getElementDir(this.el);
+    const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+    const nextLabel = intlNext || TEXT.next;
+    const previousLabel = intlPrevious || TEXT.previous;
+    const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+    return tips.length > 1 ? (h("footer", { class: CSS.pagination }, h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
+  }
+  render() {
+    const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
+    const closeLabel = intlClose || TEXT.close;
+    if (total === 0) {
+      return h(Host, null);
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async nextTip() {
-        this.direction = "advancing";
-        const nextIndex = this.selectedIndex + 1;
-        this.selectedIndex = (nextIndex + this.total) % this.total;
-    }
-    async previousTip() {
-        this.direction = "retreating";
-        const previousIndex = this.selectedIndex - 1;
-        this.selectedIndex = (previousIndex + this.total) % this.total;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    setUpTips() {
-        const tips = Array.from(this.el.querySelectorAll("calcite-tip"));
-        this.total = tips.length;
-        if (this.total === 0) {
-            return;
-        }
-        const selectedTip = this.el.querySelector("calcite-tip[selected]");
-        this.tips = tips;
-        this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
-        tips.forEach((tip) => {
-            tip.nonDismissible = true;
-        });
-        this.showSelectedTip();
-        this.updateGroupTitle();
-    }
-    showSelectedTip() {
-        this.tips.forEach((tip, index) => {
-            const isSelected = this.selectedIndex === index;
-            tip.selected = isSelected;
-            tip.hidden = !isSelected;
-        });
-    }
-    updateGroupTitle() {
-        const selectedTip = this.tips[this.selectedIndex];
-        const tipParent = selectedTip.closest("calcite-tip-group");
-        this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.textGroupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderPagination() {
-        const dir = getElementDir(this.el);
-        const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
-        const nextLabel = intlNext || TEXT.next;
-        const previousLabel = intlPrevious || TEXT.previous;
-        const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
-        return tips.length > 1 ? (h("footer", { class: CSS.pagination }, h("calcite-action", { text: previousLabel, onClick: this.previousClicked, class: CSS.pagePrevious, icon: dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight }), h("span", { class: CSS.pagePosition }, `${paginationLabel} ${selectedIndex + 1}/${total}`), h("calcite-action", { text: nextLabel, onClick: this.nextClicked, class: CSS.pageNext, icon: dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft }))) : null;
-    }
-    render() {
-        const { closed, direction, groupTitle, selectedIndex, intlClose, total } = this;
-        const closeLabel = intlClose || TEXT.close;
-        if (total === 0) {
-            return h(Host, null);
-        }
-        return (h(Host, null, h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, h("header", { class: CSS.header }, h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), h("div", { tabIndex: 0, class: {
-                [CSS.tipContainer]: true,
-                [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
-                [CSS.tipContainerRetreating]: !closed && direction === "retreating"
-            }, key: selectedIndex }, h("slot", null)), this.renderPagination())));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "closed": ["closedChangeHandler"],
-        "selectedIndex": ["selectedChangeHandler"]
-    }; }
+    return (h(Host, null, h("section", { class: CSS.container, hidden: closed, "aria-hidden": closed.toString(), tabIndex: 0, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef }, h("header", { class: CSS.header }, h("h2", { key: selectedIndex, class: CSS.heading }, groupTitle), h("calcite-action", { text: closeLabel, onClick: this.hideTipManager, class: CSS.close, icon: ICONS.close })), h("div", { tabIndex: 0, class: {
+        [CSS.tipContainer]: true,
+        [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
+        [CSS.tipContainerRetreating]: !closed && direction === "retreating"
+      }, key: selectedIndex }, h("slot", null)), this.renderPagination())));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "closed": ["closedChangeHandler"],
+    "selectedIndex": ["selectedChangeHandler"]
+  }; }
 };
@@ -181,0 +181,0 @@ CalciteTipManager.style = calciteTipManagerCss;

dist/esm/calcite-tip.entry.js

@@ -1,78 +0,78 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as getSlotted } from './dom-462ef99a.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as getSlotted } from './dom-0962c5fe.js';
 
 const CSS = {
-    container: "container",
-    header: "header",
-    heading: "heading",
-    close: "close",
-    imageFrame: "image-frame",
-    content: "content",
-    info: "info"
+  container: "container",
+  header: "header",
+  heading: "heading",
+  close: "close",
+  imageFrame: "image-frame",
+  content: "content",
+  info: "info"
 };
 const ICONS = {
-    close: "x"
+  close: "x"
 };
 const SLOTS = {
-    thumbnail: "thumbnail"
+  thumbnail: "thumbnail"
 };
 const TEXT = {
-    close: "Close"
+  close: "Close"
 };
 
-const calciteTipCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);-webkit-box-shadow:var(--calcite-app-shadow-2);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{-webkit-box-shadow:none;box-shadow:none;margin:0;padding:0}.header{-ms-flex-pack:end;justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:-ms-flexbox;display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
+const calciteTipCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{position:relative;display:flex;flex-flow:column;background-color:var(--calcite-app-background-clear)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}.header{margin:0;display:flex;align-items:center;justify-content:space-between;color:var(--calcite-app-foreground);fill:var(--calcite-app-foreground)}.heading{padding:0;margin:0;font-weight:var(--calcite-app-font-weight)}.header .heading{flex:1 0 auto;padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half)}h1.heading{font-size:var(--calcite-app-font-size-3)}h2.heading{font-size:var(--calcite-app-font-size-2)}h3.heading{font-size:var(--calcite-app-font-size-1)}h4.heading,h5.heading{font-size:var(--calcite-app-font-size-0)}.container{background-color:var(--calcite-app-background);padding:var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing) var(--calcite-app-cap-spacing);margin:var(--calcite-app-cap-spacing) var(--calcite-app-side-spacing);box-shadow:var(--calcite-app-shadow-2);border-radius:var(--calcite-app-border-radius)}:host([selected]) .container{box-shadow:none;margin:0;padding:0}.header{justify-content:flex-end}.header .heading{padding-left:0;padding-right:0}.container[hidden]{display:none}.content{display:flex;padding-top:var(--calcite-app-cap-spacing-half)}.info{padding:0 var(--calcite-app-side-spacing);width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-app-foreground-link);outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";
 
 const CalciteTip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * No longer displays the tip.
-         */
-        this.dismissed = false;
-        /**
-         * Indicates whether the tip can be dismissed.
-         */
-        this.nonDismissible = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.hideTip = () => {
-            this.dismissed = true;
-            this.calciteTipDismiss.emit();
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
     // --------------------------------------------------------------------------
     //
-    //  Render Methods
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    renderHeader() {
-        const { nonDismissible, hideTip, intlClose, heading } = this;
-        const text = intlClose || TEXT.close;
-        const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
-        const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
-        return dismissButtonNode || headingNode ? (h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
-    }
-    renderImageFrame() {
-        const { el } = this;
-        return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
-    }
-    renderInfoNode() {
-        return (h("div", { class: CSS.info }, h("slot", null)));
-    }
-    renderContent() {
-        return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
-    }
-    render() {
-        return (h(Host, null, h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
-    }
-    get el() { return getElement(this); }
+    /**
+     * No longer displays the tip.
+     */
+    this.dismissed = false;
+    /**
+     * Indicates whether the tip can be dismissed.
+     */
+    this.nonDismissible = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.hideTip = () => {
+      this.dismissed = true;
+      this.calciteTipDismiss.emit();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHeader() {
+    const { nonDismissible, hideTip, intlClose, heading } = this;
+    const text = intlClose || TEXT.close;
+    const dismissButtonNode = !nonDismissible ? (h("calcite-action", { text: text, onClick: hideTip, class: CSS.close, icon: ICONS.close })) : null;
+    const headingNode = heading ? h("h3", { class: CSS.heading }, heading) : null;
+    return dismissButtonNode || headingNode ? (h("header", { class: CSS.header }, headingNode, dismissButtonNode)) : null;
+  }
+  renderImageFrame() {
+    const { el } = this;
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderInfoNode() {
+    return (h("div", { class: CSS.info }, h("slot", null)));
+  }
+  renderContent() {
+    return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
+  }
+  render() {
+    return (h(Host, null, h("article", { class: CSS.container, hidden: this.dismissed }, this.renderHeader(), this.renderContent())));
+  }
+  get el() { return getElement(this); }
 };
@@ -79,0 +79,0 @@ CalciteTip.style = calciteTipCss;

dist/esm/calcite-value-list-item.entry.js

@@ -1,100 +0,95 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6ab9e002.js';
-import { g as guid } from './guid-ac11c5c8.js';
-import { I as ICON_TYPES } from './resources-3de36c7f.js';
-import { C as CSS } from './resources-5f17182f.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-e3ebf984.js';
+import { g as guid } from './guid-b6d0e663.js';
+import { I as ICON_TYPES } from './resources-fef38cfc.js';
+import { C as CSS } from './resources-ec6ffb66.js';
 
 const ICONS = {
-    drag: "drag"
+  drag: "drag"
 };
 
-const calciteValueListItemCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:-ms-flexbox;display:flex;-webkit-transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), -webkit-box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{-webkit-box-shadow:none;box-shadow:none;-ms-flex-positive:1;flex-grow:1;position:relative;margin:0}:host([selected]){-webkit-box-shadow:0 0 0 1px var(--calcite-app-border-active) inset;box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
+const calciteValueListItemCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{box-shadow:0 -1px 0 var(--calcite-app-border) inset;display:flex;transition:background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function), box-shadow var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function)}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}:host(:hover){background-color:var(--calcite-app-background-hover)}calcite-pick-list-item{box-shadow:none;flex-grow:1;position:relative;margin:0}:host([selected]){box-shadow:0 0 0 1px var(--calcite-app-border-active) inset}:host([selected]) calcite-pick-list-item:hover{background-color:var(--calcite-app-background-clear)}.handle{display:flex;align-items:center;align-self:stretch;justify-content:center;margin-bottom:var(--calcite-app-cap-spacing-minimum);padding:var(--calcite-app-cap-spacing-three-quarters) var(--calcite-app-side-spacing-quarter);background-color:var(--calcite-app-background-clear);border:none;color:var(--calcite-app-border);line-height:0;cursor:move;outline-offset:0;outline-color:transparent;transition:outline-offset var(--calcite-app-animation-time-fast) ease-in-out, outline-color var(--calcite-app-animation-time-fast) ease-in-out}.handle:hover,.handle:focus{background-color:var(--calcite-app-background-hover);outline-offset:var(--calcite-app-outline-inset);color:var(--calcite-app-foreground)}.handle:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.handle--activated{background-color:var(--calcite-app-background-active);color:var(--calcite-app-foreground-active)}:host(:last-child) .handle{margin-bottom:0}";
 
 const CalciteValueListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, the item cannot be clicked and is visually muted
-         */
-        this.disabled = false;
-        /**
-         * @internal When false, the item cannot be deselected by user interaction.
-         */
-        this.disableDeselect = false;
-        /**
-         * @internal - stores the activated state of the drag handle.
-         */
-        this.handleActivated = false;
-        /**
-         * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
-         */
-        this.icon = null;
-        /**
-         * Set this to true to display a remove action that removes the item from the list.
-         */
-        this.removable = false;
-        /**
-         * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
-         */
-        this.selected = false;
-        this.pickListItem = null;
-        this.guid = `calcite-value-list-item-${guid()}`;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.getPickListRef = (el) => (this.pickListItem = el);
-        this.handleKeyDown = (event) => {
-            if (event.key === " ") {
-                this.handleActivated = !this.handleActivated;
-            }
-        };
-        this.handleBlur = () => {
-            this.handleActivated = false;
-        };
-        this.handleSelectChange = (event) => {
-            this.selected = event.detail.selected;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * When true, the item cannot be clicked and is visually muted
+     */
+    this.disabled = false;
+    /**
+     * @internal When false, the item cannot be deselected by user interaction.
+     */
+    this.disableDeselect = false;
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.handleActivated = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.
+     */
+    this.icon = null;
+    /**
+     * Set this to true to display a remove action that removes the item from the list.
+     */
+    this.removable = false;
+    /**
+     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid()}`;
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    async toggleSelected(coerce) {
-        this.pickListItem.toggleSelected(coerce);
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  // --------------------------------------------------------------------------
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderHandle() {
+    const { icon } = this;
+    if (icon === ICON_TYPES.grip) {
+      return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
     }
-    async setFocus() {
-        var _a;
-        (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Events
-    //
-    // --------------------------------------------------------------------------
-    calciteListItemChangeHandler(event) {
-        // adjust item payload from wrapped item before bubbling
-        event.detail.item = this.el;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderHandle() {
-        const { icon } = this;
-        if (icon === ICON_TYPES.grip) {
-            return (h("span", { role: "button", class: { [CSS.handle]: true, [CSS.handleActivated]: this.handleActivated }, tabindex: "0", "data-js-handle": "true", "aria-pressed": this.handleActivated.toString(), onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }, h("calcite-icon", { scale: "s", icon: ICONS.drag })));
-        }
-    }
-    render() {
-        return (h(Host, { "data-id": this.guid }, this.renderHandle(), h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.textLabel, textDescription: this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, h("slot", { name: "secondary-action", slot: "secondary-action" }))));
-    }
-    get el() { return getElement(this); }
+  }
+  render() {
+    return (h(Host, { "data-id": this.guid }, this.renderHandle(), h("calcite-pick-list-item", { ref: this.getPickListRef, disabled: this.disabled, disableDeselect: this.disableDeselect, selected: this.selected, metadata: this.metadata, removable: this.removable, textLabel: this.label || this.textLabel, textDescription: this.description || this.textDescription, onCalciteListItemChange: this.handleSelectChange, value: this.value }, h("slot", { name: "secondary-action", slot: "secondary-action" }))));
+  }
+  get el() { return getElement(this); }
 };
@@ -101,0 +96,0 @@ CalciteValueListItem.style = calciteValueListItemCss;

dist/esm/calcite-value-list.entry.js

@@ -1,194 +0,196 @@
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-6ab9e002.js';
-import './dom-462ef99a.js';
-import { g as getRoundRobinIndex } from './array-dbbc14b3.js';
-import './resources-3de36c7f.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e3ebf984.js';
+import './dom-0962c5fe.js';
+import { g as getRoundRobinIndex } from './array-9b53302c.js';
+import './resources-fef38cfc.js';
 import './lodash-fad0d111.js';
-import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-25bae6dd.js';
+import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, f as setUpItems, j as setFocus, L as List } from './shared-list-render-69dca85e.js';
 import { S as Sortable } from './sortable.esm-107104a2.js';
 
 const CSS = {
-    container: "container",
-    handle: "handle"
+  container: "container",
+  handle: "handle"
 };
 var ICON_TYPES;
 (function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 const TEXT = {
-    filterPlaceholder: "Filter results"
+  filterResults: "Filter results"
 };
 
-const calciteValueListCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-app-background-clear);display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{-webkit-box-shadow:none;box-shadow:none}header{background-color:var(--calcite-app-background);display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);-webkit-box-shadow:0 -1px 0 var(--calcite-app-border) inset;box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:column;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
+const calciteValueListCss = ":host{box-sizing:border-box;color:var(--calcite-app-foreground);font-family:var(--calcite-app-font-family);font-size:var(--calcite-app-font-size-0);line-height:var(--calcite-app-line-height);background-color:var(--calcite-app-background)}:host *{box-sizing:border-box}:host{align-items:stretch;background-color:var(--calcite-app-background-clear);display:flex;flex:0 0 auto;flex-flow:column;position:relative}:host([hidden]){display:none}:host([theme=dark]){--calcite-app-background:#404040;--calcite-app-foreground:#dfdfdf;--calcite-app-background-hover:#2b2b2b;--calcite-app-foreground-hover:#f3f3f3;--calcite-app-background-active:#151515;--calcite-app-foreground-active:#59d6ff;--calcite-app-foreground-subtle:#eaeaea;--calcite-app-background-content:#2b2b2b;--calcite-app-border:#2b2b2b;--calcite-app-border-hover:#2b2b2b;--calcite-app-border-subtle:#2b2b2b;--calcite-app-scrim:rgba(64, 64, 64, 0.8)}:host([theme=light]){--calcite-app-background:#ffffff;--calcite-app-foreground:#404040;--calcite-app-background-hover:#eaeaea;--calcite-app-foreground-hover:#2b2b2b;--calcite-app-background-active:#c7eaff;--calcite-app-foreground-active:#00619b;--calcite-app-foreground-subtle:#757575;--calcite-app-foreground-link:#007ac2;--calcite-app-background-content:#f3f3f3;--calcite-app-background-clear:transparent;--calcite-app-border:#eaeaea;--calcite-app-border-hover:#dfdfdf;--calcite-app-border-subtle:#f3f3f3;--calcite-app-border-active:#00619b;--calcite-app-disabled-opacity:0.25;--calcite-app-scrim:rgba(255, 255, 255, 0.8)}calcite-value-list-item:last-of-type{box-shadow:none}header{background-color:var(--calcite-app-background);display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--calcite-app-cap-spacing-quarter);box-shadow:0 -1px 0 var(--calcite-app-border) inset}header.sticky{position:sticky;top:0;z-index:1}calcite-filter{margin-bottom:1px}calcite-scrim{display:flex;flex:0 0 auto;flex-flow:column;pointer-events:none}slot[name=menu-actions]::slotted(calcite-action){padding:0 var(--calcite-app-side-spacing-half)}";
 
 const CalciteValueList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteListChange = createEvent(this, "calciteListChange", 7);
-        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        /**
-         * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
-         */
-        this.disabled = false;
-        /**
-         * When true, the items will be sortable via drag and drop.
-         */
-        this.dragEnabled = false;
-        /**
-         * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
-         */
-        this.filterEnabled = false;
-        /**
-         * When true, content is waiting to be loaded. This state shows a busy indicator.
-         */
-        this.loading = false;
-        /**
-         * Multiple Works similar to standard radio buttons and checkboxes.
-         * When true, a user can select multiple items at a time.
-         * When false, only a single item can be selected at a time
-         * and selecting a new item will deselect any other selected items.
-         */
-        this.multiple = false;
-        /**
-         * Placeholder text for the filter input field.
-         */
-        this.textFilterPlaceholder = TEXT.filterPlaceholder;
-        // --------------------------------------------------------------------------
-        //
-        //  Private Properties
-        //
-        // --------------------------------------------------------------------------
-        this.selectedValues = new Map();
-        this.dataForFilter = [];
-        this.lastSelectedItem = null;
-        this.observer = new MutationObserver(mutationObserverCallback.bind(this));
-        this.deselectSiblingItems = deselectSiblingItems.bind(this);
-        this.selectSiblings = selectSiblings.bind(this);
-        this.handleFilter = handleFilter.bind(this);
-        this.getItemData = getItemData.bind(this);
-        this.keyDownHandler = (event) => {
-            const handleElement = event
-                .composedPath()
-                .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
-            const item = event
-                .composedPath()
-                .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-            // Only trigger keyboard sorting when the internal drag handle is focused and activated
-            if (!handleElement || !item.handleActivated) {
-                keyDownHandler.call(this, event);
-                return;
-            }
-            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
-                return;
-            }
-            event.preventDefault();
-            const { el, items } = this;
-            const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-            const currentIndex = items.indexOf(item);
-            const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
-            if (nextIndex === items.length - 1) {
-                el.appendChild(item);
-            }
-            else {
-                const itemAtNextIndex = el.children[nextIndex];
-                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
-                    ? itemAtNextIndex.nextElementSibling
-                    : itemAtNextIndex;
-                el.insertBefore(item, insertionReferenceItem);
-            }
-            requestAnimationFrame(() => handleElement.focus());
-            item.handleActivated = true;
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
     //
-    //  Lifecycle
+    //  Properties
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        initialize.call(this);
-        initializeObserver.call(this);
-    }
-    componentDidLoad() {
-        this.setUpDragAndDrop();
-    }
-    componentDidUnload() {
-        cleanUpObserver.call(this);
-        this.cleanUpDragAndDrop();
-    }
-    calciteListItemChangeHandler(event) {
-        calciteListItemChangeHandler.call(this, event);
-    }
-    calciteListItemPropsChangeHandler(event) {
-        event.stopPropagation();
-        this.setUpFilter();
-    }
-    calciteListItemValueChangeHandler(event) {
-        calciteListItemValueChangeHandler.call(this, event);
-    }
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, the items will be sortable via drag and drop.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Multiple Works similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple items at a time.
+     * When false, only a single item can be selected at a time
+     * and selecting a new item will deselect any other selected items.
+     */
+    this.multiple = false;
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @deprecated use filterPlaceholder instead.
+     */
+    this.textFilterPlaceholder = TEXT.filterResults;
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    setUpItems() {
-        setUpItems.call(this, "calcite-value-list-item");
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      const handleElement = event
+        .composedPath()
+        .find((item) => { var _a; return (_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle; });
+      const item = event
+        .composedPath()
+        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+      // Only trigger keyboard sorting when the internal drag handle is focused and activated
+      if (!handleElement || !item.handleActivated) {
+        keyDownHandler.call(this, event);
+        return;
+      }
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+        return;
+      }
+      event.preventDefault();
+      const { el, items } = this;
+      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
+      const currentIndex = items.indexOf(item);
+      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      requestAnimationFrame(() => handleElement.focus());
+      item.handleActivated = true;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteListItemValueChangeHandler(event) {
+    calciteListItemValueChangeHandler.call(this, event);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpItems() {
+    setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
     }
-    setUpFilter() {
-        if (this.filterEnabled) {
-            this.dataForFilter = this.getItemData();
-        }
+  }
+  setUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    setUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable = Sortable.create(this.el, {
-            handle: `.${CSS.handle}`,
-            draggable: "calcite-value-list-item",
-            group: this.group,
-            onSort: () => {
-                this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-                const values = this.items.map((item) => item.value);
-                this.calciteListOrderChange.emit(values);
-            }
-        });
+    this.sortable = Sortable.create(this.el, {
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    if (!this.dragEnabled) {
+      return;
     }
-    cleanUpDragAndDrop() {
-        if (!this.dragEnabled) {
-            return;
-        }
-        this.sortable.destroy();
+    this.sortable.destroy();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  async setFocus() {
+    return setFocus.call(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    async getSelectedItems() {
-        return this.selectedValues;
-    }
-    async setFocus() {
-        return setFocus.call(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    getIconType() {
-        let type = null;
-        if (this.dragEnabled) {
-            type = ICON_TYPES.grip;
-        }
-        return type;
-    }
-    render() {
-        return h(List, { props: this, onKeyDown: this.keyDownHandler });
-    }
-    get el() { return getElement(this); }
+    return type;
+  }
+  render() {
+    return h(List, { props: this, onKeyDown: this.keyDownHandler });
+  }
+  get el() { return getElement(this); }
 };
@@ -195,0 +197,0 @@ CalciteValueList.style = calciteValueListCss;

dist/esm/polyfills/css-shim.js

@@ -1,1 +0,1 @@
-var StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return Object.assign(Object.assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return Object.assign(Object.assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);

dist/index.js

@@ -1,1 +0,1 @@
-module.exports = require('./cjs/index.cjs.js');
+export * from './esm/index.js';

dist/loader/package.json

 {
   "name": "calcite-app-loader",
   "typings": "./index.d.ts",
-  "module": "./index.mjs",
+  "module": "./index.js",
   "main": "./index.cjs.js",
-  "node:main": "./node-main.js",
-  "jsnext:main": "./index.es2017.mjs",
-  "es2015": "./index.es2017.mjs",
-  "es2017": "./index.es2017.mjs",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
   "unpkg": "./cdn.js"
 }

dist/types/calcite-action-bar/resources.d.ts

 export declare const CSS: {
-    actionGroupBottom: string;
+  actionGroupBottom: string;
 };
 export declare const SLOTS: {
-    bottomActions: string;
+  bottomActions: string;
 };
 export declare const TEXT: {
-    expand: string;
-    collapse: string;
+  expand: string;
+  collapse: string;
 };

dist/types/calcite-action-group/calcite-action-group.d.ts

 import { VNode } from "../stencil-public-runtime";
 export declare class CalciteActionGroup {
-    render(): VNode;
+  render(): VNode;
 }

dist/types/calcite-action-pad/resources.d.ts

 export declare const CSS: {
-    actionGroupBottom: string;
-    container: string;
+  actionGroupBottom: string;
+  container: string;
 };
 export declare const TEXT: {
-    expand: string;
-    collapse: string;
+  expand: string;
+  collapse: string;
 };

dist/types/calcite-action/resources.d.ts

 export declare const CSS: {
-    button: string;
-    buttonTextVisible: string;
-    buttonCompact: string;
-    iconContainer: string;
-    slotContainer: string;
-    slotContainerHidden: string;
-    textContainer: string;
-    textContainerVisible: string;
+  button: string;
+  buttonTextVisible: string;
+  buttonCompact: string;
+  iconContainer: string;
+  slotContainer: string;
+  slotContainerHidden: string;
+  textContainer: string;
+  textContainerVisible: string;
 };

dist/types/calcite-block-section/resources.d.ts

 export declare const CSS: {
-    content: string;
-    toggle: string;
-    toggleSwitch: string;
+  content: string;
+  toggle: string;
+  toggleSwitch: string;
 };
 export declare const TEXT: {
-    collapse: string;
-    expand: string;
+  collapse: string;
+  expand: string;
 };
 export declare const ICONS: {
-    menuOpen: string;
-    menuClosedLeft: string;
-    menuClosedRight: string;
+  menuOpen: string;
+  menuClosedLeft: string;
+  menuClosedRight: string;
 };

dist/types/calcite-block/resources.d.ts

 export declare const CSS: {
-    content: string;
-    headerContainer: string;
-    icon: string;
-    toggle: string;
-    toggleIcon: string;
-    title: string;
-    heading: string;
-    header: string;
-    button: string;
-    summary: string;
-    controlContainer: string;
+  content: string;
+  headerContainer: string;
+  icon: string;
+  toggle: string;
+  toggleIcon: string;
+  title: string;
+  heading: string;
+  header: string;
+  button: string;
+  summary: string;
+  controlContainer: string;
 };
 export declare const TEXT: {
-    collapse: string;
-    expand: string;
+  collapse: string;
+  expand: string;
 };
 export declare const SLOTS: {
-    icon: string;
-    control: string;
+  icon: string;
+  control: string;
 };

dist/types/calcite-fab/resources.d.ts

 export declare const CSS: {
-    button: string;
+  button: string;
 };
 export declare const ICONS: {
-    plus: string;
+  plus: string;
 };

dist/types/calcite-filter/resources.d.ts

 export declare const CSS: {
-    searchIcon: string;
-    clearButton: string;
+  searchIcon: string;
+  clearButton: string;
 };
 export declare const TEXT: {
-    filterLabel: string;
-    clear: string;
+  filterLabel: string;
+  clear: string;
 };
 export declare const ICONS: {
-    search: string;
-    close: string;
+  search: string;
+  close: string;
 };

dist/types/calcite-flow-item/resources.d.ts

 export declare const CSS: {
-    header: string;
-    heading: string;
-    summary: string;
-    backButton: string;
-    footerActions: string;
-    headerActions: string;
-    leadingActions: string;
-    singleActionContainer: string;
-    menuContainer: string;
-    menuButton: string;
-    menu: string;
-    menuOpen: string;
-    fabContainer: string;
+  header: string;
+  heading: string;
+  summary: string;
+  backButton: string;
+  footerActions: string;
+  headerActions: string;
+  leadingActions: string;
+  singleActionContainer: string;
+  menuContainer: string;
+  menuButton: string;
+  menu: string;
+  menuOpen: string;
+  fabContainer: string;
 };
 export declare const SLOTS: {
-    leadingActions: string;
-    menuActions: string;
-    fab: string;
-    footerActions: string;
+  leadingActions: string;
+  menuActions: string;
+  fab: string;
+  footerActions: string;
 };
 export declare const ICONS: {
-    menu: string;
-    backLeft: string;
-    backRight: string;
+  menu: string;
+  backLeft: string;
+  backRight: string;
 };
 export declare const TEXT: {
-    back: string;
-    open: string;
-    close: string;
+  back: string;
+  open: string;
+  close: string;
 };

dist/types/calcite-flow/resources.d.ts

 export declare const CSS: {
-    frame: string;
-    frameAdvancing: string;
-    frameRetreating: string;
+  frame: string;
+  frameAdvancing: string;
+  frameRetreating: string;
 };

dist/types/calcite-handle/resources.d.ts

 export declare const CSS: {
-    handle: string;
-    handleActivated: string;
+  handle: string;
+  handleActivated: string;
 };
 export declare const ICONS: {
-    drag: string;
+  drag: string;
 };

dist/types/calcite-panel/resources.d.ts

 export declare const CSS: {
-    container: string;
-    header: string;
-    headerLeadingContent: string;
-    headerContent: string;
-    headerTrailingContent: string;
-    contentContainer: string;
-    fabContainer: string;
-    footer: string;
+  container: string;
+  header: string;
+  headerLeadingContent: string;
+  headerContent: string;
+  headerTrailingContent: string;
+  contentContainer: string;
+  fabContainer: string;
+  footer: string;
 };
 export declare const ICONS: {
-    close: string;
+  close: string;
 };
 export declare const SLOTS: {
-    headerContent: string;
-    headerLeadingContent: string;
-    headerTrailingContent: string;
-    fab: string;
-    footer: string;
+  headerContent: string;
+  headerLeadingContent: string;
+  headerTrailingContent: string;
+  fab: string;
+  footer: string;
 };
 export declare const TEXT: {
-    close: string;
+  close: string;
 };

dist/types/calcite-pick-list-group/resources.d.ts

 export declare const CSS: {
-    heading: string;
-    container: string;
-    indented: string;
+  heading: string;
+  container: string;
+  indented: string;
 };
 export declare const SLOTS: {
-    parentItem: string;
+  parentItem: string;
 };

dist/types/calcite-pick-list-item/resources.d.ts

 export declare const CSS: {
-    action: string;
-    description: string;
-    handle: string;
-    handleActivated: string;
-    highlight: string;
-    icon: string;
-    label: string;
-    remove: string;
-    title: string;
-    textContainer: string;
+  action: string;
+  description: string;
+  handle: string;
+  handleActivated: string;
+  highlight: string;
+  icon: string;
+  label: string;
+  remove: string;
+  title: string;
+  textContainer: string;
 };
 export declare const ICONS: {
-    checked: string;
-    circle: string;
-    remove: string;
+  checked: string;
+  circle: string;
+  remove: string;
 };
 export declare const SLOTS: {
-    secondaryAction: string;
+  secondaryAction: string;
 };
 export declare const TEXT: {
-    remove: string;
+  remove: string;
 };

dist/types/calcite-pick-list/resources.d.ts

 export declare const CSS: {
-    sticky: string;
+  sticky: string;
 };
 export declare enum ICON_TYPES {
-    circle = "circle",
-    square = "square",
-    grip = "grip"
+  circle = "circle",
+  square = "square",
+  grip = "grip"
 }
 export declare const TEXT: {
-    filterPlaceholder: string;
+  filterResults: string;
 };

dist/types/calcite-pick-list/shared-list-render.d.ts

 import { VNode } from "../stencil-public-runtime";
 export declare const List: ({ props, ...rest }: {
-    [x: string]: any;
-    props: any;
+  [x: string]: any;
+  props: any;
 }) => VNode;
 export default List;

dist/types/calcite-shell-center-row/resources.d.ts

 export declare const CSS: {
-    actionBarContainer: string;
-    content: string;
+  actionBarContainer: string;
+  content: string;
 };
 export declare const SLOTS: {
-    actionBar: string;
+  actionBar: string;
 };

dist/types/calcite-shell-panel/calcite-shell-panel.d.ts

@@ -8,24 +8,24 @@ import { EventEmitter, VNode } from "../stencil-public-runtime";
 export declare class CalciteShellPanel {
-    /**
-     * Hide the content panel.
-     */
-    collapsed: boolean;
-    watchHandler(): void;
-    /**
-     * This property makes the content area appear like a "floating" panel.
-     */
-    detached: boolean;
-    /**
-     * This sets limits the height of the content area. It only applies when detached is true.
-     */
-    detachedScale: CalciteScale;
-    /**
-     * Arranges the component depending on the elements 'dir' property.
-     */
-    position: CalcitePosition;
-    /**
-     * Emitted when collapse has been toggled.
-     */
-    calciteShellPanelToggle: EventEmitter;
-    render(): VNode;
+  /**
+   * Hide the content panel.
+   */
+  collapsed: boolean;
+  watchHandler(): void;
+  /**
+   * This property makes the content area appear like a "floating" panel.
+   */
+  detached: boolean;
+  /**
+   * This sets limits the height of the content area. It only applies when detached is true.
+   */
+  detachedScale: CalciteScale;
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  position: CalcitePosition;
+  /**
+   * Emitted when collapse has been toggled.
+   */
+  calciteShellPanelToggle: EventEmitter;
+  render(): VNode;
 }

dist/types/calcite-shell-panel/resources.d.ts

 export declare const CSS: {
-    content: string;
-    contentDetached: string;
+  content: string;
+  contentDetached: string;
 };
 export declare const SLOTS: {
-    actionBar: string;
+  actionBar: string;
 };

dist/types/calcite-shell/resources.d.ts

 export declare const CSS: {
-    main: string;
-    mainReversed: string;
-    content: string;
-    footer: string;
+  main: string;
+  mainReversed: string;
+  content: string;
+  footer: string;
 };
 export declare const SLOTS: {
-    centerRow: string;
-    primaryPanel: string;
-    contextualPanel: string;
-    header: string;
-    footer: string;
+  centerRow: string;
+  primaryPanel: string;
+  contextualPanel: string;
+  header: string;
+  footer: string;
 };

dist/types/calcite-sortable-list/resources.d.ts

 export declare const CSS: {
-    sortItem: string;
+  sortItem: string;
 };

dist/types/calcite-tip-group/calcite-tip-group.d.ts

 import { VNode } from "../stencil-public-runtime";
 export declare class CalciteTipGroup {
-    /**
-     * The title used for all nested tips.
-     */
-    textGroupTitle?: string;
-    render(): VNode;
+  /**
+   * The title used for all nested tips.
+   *
+   */
+  groupTitle?: string;
+  /**
+   * The title used for all nested tips.
+   *
+   * @deprecated use groupTitle instead.
+   */
+  textGroupTitle?: string;
+  render(): VNode;
 }

dist/types/calcite-tip-manager/resources.d.ts

 export declare const CSS: {
-    header: string;
-    heading: string;
-    close: string;
-    container: string;
-    tipContainer: string;
-    tipContainerAdvancing: string;
-    tipContainerRetreating: string;
-    pagination: string;
-    pagePosition: string;
-    pageNext: string;
-    pagePrevious: string;
+  header: string;
+  heading: string;
+  close: string;
+  container: string;
+  tipContainer: string;
+  tipContainerAdvancing: string;
+  tipContainerRetreating: string;
+  pagination: string;
+  pagePosition: string;
+  pageNext: string;
+  pagePrevious: string;
 };
 export declare const ICONS: {
-    chevronLeft: string;
-    chevronRight: string;
-    close: string;
+  chevronLeft: string;
+  chevronRight: string;
+  close: string;
 };
 export declare const TEXT: {
-    defaultGroupTitle: string;
-    defaultPaginationLabel: string;
-    close: string;
-    previous: string;
-    next: string;
+  defaultGroupTitle: string;
+  defaultPaginationLabel: string;
+  close: string;
+  previous: string;
+  next: string;
 };

dist/types/calcite-tip/resources.d.ts

 export declare const CSS: {
-    container: string;
-    header: string;
-    heading: string;
-    close: string;
-    imageFrame: string;
-    content: string;
-    info: string;
+  container: string;
+  header: string;
+  heading: string;
+  close: string;
+  imageFrame: string;
+  content: string;
+  info: string;
 };
 export declare const ICONS: {
-    close: string;
+  close: string;
 };
 export declare const SLOTS: {
-    thumbnail: string;
+  thumbnail: string;
 };
 export declare const TEXT: {
-    close: string;
+  close: string;
 };

dist/types/calcite-value-list-item/resources.d.ts

 export declare const ICONS: {
-    drag: string;
+  drag: string;
 };

dist/types/calcite-value-list/resources.d.ts

 export declare const CSS: {
-    container: string;
-    handle: string;
+  container: string;
+  handle: string;
 };
 export declare enum ICON_TYPES {
-    grip = "grip"
+  grip = "grip"
 }
 export declare const TEXT: {
-    filterPlaceholder: string;
+  filterResults: string;
 };

dist/types/components.d.ts

@@ -362,2 +362,6 @@ /* eslint-disable */
         "filterEnabled": boolean;
+        /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder": string;
         "getSelectedItems": () => Promise<Map<string, HTMLCalcitePickListItemElement>>;
@@ -375,2 +379,3 @@ /**
           * Placeholder text for the filter input field.
+          * @deprecated use filterPlaceholder instead.
          */
@@ -381,4 +386,9 @@ "textFilterPlaceholder": string;
         /**
-          * The title used for all nested `calcite-pick-list` rows
+          * The title used for all nested `calcite-pick-list` rows.
          */
+        "groupTitle": string;
+        /**
+          * The title used for all nested `calcite-pick-list` rows.
+          * @deprecated use groupTitle instead
+         */
         "textGroupTitle": string;
@@ -388,2 +398,6 @@ }
         /**
+          * An optional description for this item.  This will appear below the label text.
+         */
+        "description"?: string;
+        /**
           * When false, the item cannot be deselected by user interaction.
@@ -401,2 +415,6 @@ */
         /**
+          * The main label for this item. This will appear next to the icon.
+         */
+        "label": string;
+        /**
           * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
@@ -416,2 +434,3 @@ */
           * An optional description for this item.  This will appear below the label text.
+          * @deprecated use description instead.
          */
@@ -421,2 +440,3 @@ "textDescription"?: string;
           * The main label for this item. This will appear next to the icon.
+          * @deprecated use label instead.
          */
@@ -519,2 +539,7 @@ "textLabel": string;
          */
+        "groupTitle"?: string;
+        /**
+          * The title used for all nested tips.
+          * @deprecated use groupTitle instead.
+         */
         "textGroupTitle"?: string;
@@ -567,2 +592,6 @@ }
         "filterEnabled": boolean;
+        /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder": string;
         "getSelectedItems": () => Promise<Map<string, HTMLCalciteValueListItemElement>>;
@@ -584,2 +613,3 @@ /**
           * Placeholder text for the filter input field.
+          * @deprecated use filterPlaceholder instead.
          */
@@ -589,2 +619,6 @@ "textFilterPlaceholder": string;
     interface CalciteValueListItem {
+        /**
+          * An optional description for this item. Will appear below the label text.
+         */
+        "description"?: string;
         "disableDeselect": boolean;
@@ -601,2 +635,6 @@ /**
         /**
+          * The main label for this item. Appears next to the icon.
+         */
+        "label": string;
+        /**
           * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
@@ -616,2 +654,3 @@ */
           * An optional description for this item. Will appear below the label text.
+          * @deprecated use description instead.
          */
@@ -621,2 +660,3 @@ "textDescription"?: string;
           * The main label for this item. Appears next to the icon.
+          * @deprecated use label instead.
          */
@@ -1185,2 +1225,6 @@ "textLabel": string;
         /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder"?: string;
+        /**
           * When true, content is waiting to be loaded. This state shows a busy indicator.
@@ -1200,2 +1244,3 @@ */
           * Placeholder text for the filter input field.
+          * @deprecated use filterPlaceholder instead.
          */
@@ -1206,4 +1251,9 @@ "textFilterPlaceholder"?: string;
         /**
-          * The title used for all nested `calcite-pick-list` rows
+          * The title used for all nested `calcite-pick-list` rows.
          */
+        "groupTitle"?: string;
+        /**
+          * The title used for all nested `calcite-pick-list` rows.
+          * @deprecated use groupTitle instead
+         */
         "textGroupTitle"?: string;
@@ -1213,2 +1263,6 @@ }
         /**
+          * An optional description for this item.  This will appear below the label text.
+         */
+        "description"?: string;
+        /**
           * When false, the item cannot be deselected by user interaction.
@@ -1226,2 +1280,6 @@ */
         /**
+          * The main label for this item. This will appear next to the icon.
+         */
+        "label"?: string;
+        /**
           * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
@@ -1255,2 +1313,3 @@ */
           * An optional description for this item.  This will appear below the label text.
+          * @deprecated use description instead.
          */
@@ -1260,2 +1319,3 @@ "textDescription"?: string;
           * The main label for this item. This will appear next to the icon.
+          * @deprecated use label instead.
          */
@@ -1367,2 +1427,7 @@ "textLabel"?: string;
          */
+        "groupTitle"?: string;
+        /**
+          * The title used for all nested tips.
+          * @deprecated use groupTitle instead.
+         */
         "textGroupTitle"?: string;
@@ -1418,2 +1483,6 @@ }
         /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder"?: string;
+        /**
           * If this is set and drag is enabled, items can be dropped between lists of the same group.
@@ -1442,2 +1511,3 @@ */
           * Placeholder text for the filter input field.
+          * @deprecated use filterPlaceholder instead.
          */
@@ -1448,2 +1518,6 @@ "textFilterPlaceholder"?: string;
         /**
+          * An optional description for this item. Will appear below the label text.
+         */
+        "description"?: string;
+        /**
           * When true, the item cannot be clicked and is visually muted
@@ -1457,2 +1531,6 @@ */
         /**
+          * The main label for this item. Appears next to the icon.
+         */
+        "label": string;
+        /**
           * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
@@ -1471,2 +1549,3 @@ */
           * An optional description for this item. Will appear below the label text.
+          * @deprecated use description instead.
          */
@@ -1476,2 +1555,3 @@ "textDescription"?: string;
           * The main label for this item. Appears next to the icon.
+          * @deprecated use label instead.
          */
@@ -1478,0 +1558,0 @@ "textLabel": string;

dist/types/stencil-public-runtime.d.ts

@@ -46,6 +46,2 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     assetsDirs?: string[];
-    /**
-     * @deprecated Use `assetsDirs` instead
-     */
-    assetsDir?: string;
 }
@@ -85,10 +81,2 @@ export interface ShadowRootOptions {
     reflect?: boolean;
-    /** @deprecated: "attr" has been deprecated, please use "attribute" instead. */
-    attr?: string;
-    /** @deprecated "context" has been deprecated. */
-    context?: string;
-    /** @deprecated "connect" has been deprecated, please use ES modules and/or dynamic imports instead. */
-    connect?: string;
-    /** @deprecated "reflectToAttr" has been deprecated, please use "reflect" instead. */
-    reflectToAttr?: boolean;
 }
@@ -150,3 +138,3 @@ export interface MethodDecorator {
 }
-export declare type ListenTargetOptions = 'parent' | 'body' | 'document' | 'window';
+export declare type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
@@ -270,4 +258,2 @@ (): PropertyDecorator;
     componentOnReady(): Promise<this>;
-    /** @deprecated */
-    forceUpdate(): void;
 }
@@ -338,9 +324,2 @@ /**
 }
-export interface ComponentDidUnload {
-    /**
-     * The component did unload and the element
-     * will be destroyed.
-     */
-    componentDidUnload(): void;
-}
 export interface ComponentInterface {
@@ -450,2 +429,6 @@ connectedCallback?(): void;
 /**
+ * Fragment
+ */
+export declare const Fragment: FunctionalComponent<{}>;
+/**
  * The "h" namespace is used to import JSX types for elements and attributes.
@@ -452,0 +435,0 @@ * It is imported in order to avoid conflicting global JSX issues.

dist/types/utils/CalciteExpandToggle.d.ts

 import { FunctionalComponent } from "../stencil-public-runtime";
 import { CalcitePosition } from "../interfaces";
 interface CalciteExpandToggleProps {
-    expanded: boolean;
-    intlExpand: string;
-    intlCollapse: string;
-    el: HTMLElement;
-    position: CalcitePosition;
-    tooltipExpand?: HTMLCalciteTooltipElement;
-    toggleExpand: () => void;
+  expanded: boolean;
+  intlExpand: string;
+  intlCollapse: string;
+  el: HTMLElement;
+  position: CalcitePosition;
+  tooltipExpand?: HTMLCalciteTooltipElement;
+  toggleExpand: () => void;
 }
 export declare function toggleChildActionText({ parent, expanded }: {
-    parent: HTMLElement;
-    expanded: boolean;
+  parent: HTMLElement;
+  expanded: boolean;
 }): void;
 export declare const CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>;
 export {};

dist/types/utils/dom.d.ts

@@ -6,14 +6,14 @@ import { CalciteTheme } from "../interfaces";
 export interface CalciteFocusableElement extends HTMLElement {
-    setFocus?: () => void;
+  setFocus?: () => void;
 }
 export declare function focusElement(el: CalciteFocusableElement): void;
 interface GetSlottedOptions {
-    all?: boolean;
-    direct?: boolean;
-    selector?: string;
+  all?: boolean;
+  direct?: boolean;
+  selector?: string;
 }
 export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string, options: GetSlottedOptions & {
-    all: true;
+  all: true;
 }): T[];
 export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string, options?: GetSlottedOptions): T | null;
 export {};

dist/types/utils/resources.d.ts

 export declare const CSS_UTILITY: {
-    rtl: string;
+  rtl: string;
 };

package.json

 {
   "name": "@esri/calcite-app-components",
-  "version": "6.3.0-beta.0",
+  "version": "6.3.0-beta.1",
   "description": "A collection of web components for building single-page applications.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "jsnext:main": "dist/esm/index.mjs",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
   "unpkg": "dist/calcite-app.js",
@@ -58,13 +58,13 @@ "types": "dist/types/components.d.ts",
     "@esri/calcite-components": "1.0.0-beta.37",
-    "@stencil/core": "1.17.3",
+    "@stencil/core": "2.0.1",
     "@stencil/eslint-plugin": "0.3.1",
     "@stencil/postcss": "1.0.1",
     "@stencil/sass": "1.3.2",
-    "@storybook/addon-a11y": "6.0.16",
-    "@storybook/addon-backgrounds": "6.0.16",
-    "@storybook/addon-centered": "5.3.19",
-    "@storybook/addon-docs": "6.0.16",
-    "@storybook/addon-knobs": "6.0.16",
-    "@storybook/addon-notes": "5.3.19",
-    "@storybook/html": "6.0.16",
+    "@storybook/addon-a11y": "6.0.21",
+    "@storybook/addon-backgrounds": "6.0.21",
+    "@storybook/addon-centered": "5.3.21",
+    "@storybook/addon-docs": "6.0.21",
+    "@storybook/addon-knobs": "6.0.21",
+    "@storybook/addon-notes": "5.3.21",
+    "@storybook/html": "6.0.21",
     "@types/autoprefixer": "9.7.2",
@@ -81,4 +81,4 @@ "@types/dedent": "0.7.0",
     "@types/webpack": "4.41.21",
-    "@typescript-eslint/eslint-plugin": "3.10.0",
-    "@typescript-eslint/parser": "3.10.0",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
     "autoprefixer": "9.8.6",
@@ -93,3 +93,3 @@ "awesome-typescript-loader": "5.2.1",
     "dedent": "0.7.0",
-    "eslint": "7.7.0",
+    "eslint": "7.8.0",
     "eslint-config-prettier": "6.11.0",
@@ -106,14 +106,14 @@ "eslint-plugin-prettier": "3.1.4",
     "jest-runner": "24.9.0",
-    "lint-staged": "10.2.11",
+    "lint-staged": "10.2.13",
     "package": "1.0.1",
     "pify": "5.0.0",
     "posthtml": "0.13.3",
-    "prettier": "2.1.0",
+    "prettier": "2.1.1",
     "puppeteer": "2.1.0",
     "rimraf": "3.0.2",
     "standard-version": "9.0.0",
-    "stylelint": "13.6.1",
+    "stylelint": "13.7.0",
     "stylelint-config-recommended-scss": "4.2.0",
     "stylelint-scss": "3.18.0",
-    "ts-jest": "26.2.0",
+    "ts-jest": "26.3.0",
     "ts-node": "9.0.0",
@@ -123,2 +123,3 @@ "tslint": "6.1.3",
     "tslint-stencil": "1.0.1",
+    "typescript": "4.0.2",
     "updtr": "3.1.0"
@@ -125,0 +126,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

8

decreased by-33.33%

Worsened metrics

Total package byte prevSize

3523003

decreased by-31.61%

Dev dependency count

64

increased by1.59%

Number of package files

262

decreased by-14.66%

Lines of code

92409

decreased by-23.3%

No dependency changes