@esri/calcite-components 1.0.0-next.646 → 1.0.0-next.648

package/dist/cjs/calcite-modal.cjs.entry.js

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.646
+ * v1.0.0-next.648
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-964a2875.js');
-const dom = require('./dom-81242a2a.js');
-const observers = require('./observers-695d3a8d.js');
-const conditionalSlot = require('./conditionalSlot-e2ec6e00.js');
-const openCloseComponent = require('./openCloseComponent-b4926038.js');
-const focusTrapComponent = require('./focusTrapComponent-30c7c8ee.js');
-const loadable = require('./loadable-d48dcbfa.js');
-require('./resources-e2ae989b.js');
-require('./guid-5b4f687e.js');
+const index = require('./index-66bfeb5a.js');
+const dom = require('./dom-8dcbe60b.js');
+const observers = require('./observers-b2096d49.js');
+const conditionalSlot = require('./conditionalSlot-ab38a07e.js');
+const openCloseComponent = require('./openCloseComponent-7d4eb009.js');
+const focusTrapComponent = require('./focusTrapComponent-4575255a.js');
+const loadable = require('./loadable-f0410eb8.js');
+require('./resources-aab81366.js');
+require('./guid-4caf8697.js');
 
 const CSS = {
   modal: "modal",
@@ -59,53 +59,6 @@ const Modal = class {
     this.calciteModalClose = index.createEvent(this, "calciteModalClose", 6);
     this.calciteModalBeforeOpen = index.createEvent(this, "calciteModalBeforeOpen", 6);
     this.calciteModalOpen = index.createEvent(this, "calciteModalOpen", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /** When `true`, displays and positions the component.  */
-    this.open = false;
-    /** Passes a function to run before the component closes. */
-    this.beforeClose = () => Promise.resolve();
-    /** When `true`, disables the component's close button. */
-    this.disableCloseButton = false;
-    /** When `true`, disables the closing of the component when clicked outside. */
-    this.disableOutsideClose = false;
-    /** Accessible name for the component's close button. */
-    this.intlClose = TEXT.close;
-    /** When `true`, disables the default close on escape behavior. */
-    this.disableEscape = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
-    this.width = "m";
-    /** Sets the background color of the component's content. */
-    this.backgroundColor = "white";
-    /**
-     * When `true`, disables spacing to the content area slot.
-     *
-     * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
-     */
-    this.noPadding = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Variables
-    //
-    //--------------------------------------------------------------------------
-    this.hasFooter = true;
-    /**
-     * We use internal variable to make sure initially open modal can transition from closed state when rendered
-     *
-     * @private
-     */
-    this.isOpen = false;
     this.mutationObserver = observers.createObserver("mutation", () => this.updateFooterVisibility());
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
@@ -141,6 +94,22 @@ const Modal = class {
     this.updateFooterVisibility = () => {
       this.hasFooter = !!dom.getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
+    this.active = false;
+    this.open = false;
+    this.beforeClose = () => Promise.resolve();
+    this.disableCloseButton = false;
+    this.disableOutsideClose = false;
+    this.intlClose = TEXT.close;
+    this.docked = undefined;
+    this.disableEscape = false;
+    this.scale = "m";
+    this.width = "m";
+    this.fullscreen = undefined;
+    this.color = undefined;
+    this.backgroundColor = "white";
+    this.noPadding = false;
+    this.hasFooter = true;
+    this.isOpen = false;
   }
   //--------------------------------------------------------------------------
   //

package/dist/cjs/calcite-notice.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.646
+ * v1.0.0-next.648
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-964a2875.js');
-const interfaces = require('./interfaces-072b9615.js');
-const dom = require('./dom-81242a2a.js');
-const conditionalSlot = require('./conditionalSlot-e2ec6e00.js');
-const loadable = require('./loadable-d48dcbfa.js');
-require('./resources-e2ae989b.js');
-require('./guid-5b4f687e.js');
-require('./observers-695d3a8d.js');
+const index = require('./index-66bfeb5a.js');
+const interfaces = require('./interfaces-f9527bdd.js');
+const dom = require('./dom-8dcbe60b.js');
+const conditionalSlot = require('./conditionalSlot-ab38a07e.js');
+const loadable = require('./loadable-f0410eb8.js');
+require('./resources-aab81366.js');
+require('./guid-4caf8697.js');
+require('./observers-b2096d49.js');
 
 const TEXT = {
   close: "Close"
@@ -42,46 +42,22 @@ const Notice = class {
     this.calciteNoticeOpen = index.createEvent(this, "calciteNoticeOpen", 6);
     //--------------------------------------------------------------------------
     //
-    //  Properties
+    //  Private Methods
     //
-    //---------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated Use `open` instead.
-     */
+    //--------------------------------------------------------------------------
+    this.close = () => {
+      this.open = false;
+      this.calciteNoticeClose.emit();
+    };
     this.active = false;
-    /** When `true`, the component is visible. */
     this.open = false;
-    /** The color for the component's top border and icon. */
     this.color = "blue";
-    /**
-     * When `true`, a close button is added to the component.
-     *
-     * @deprecated use `closable` instead.
-     */
     this.dismissible = false;
-    /** When `true`, a close button is added to the component. */
     this.closable = false;
-    /**
-     * Accessible name for the close button.
-     *
-     * @default "Close"
-     */
+    this.icon = undefined;
     this.intlClose = TEXT.close;
-    /** Specifies the size of the component. */
     this.scale = "m";
-    /** Specifies the width of the component. */
     this.width = "auto";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.close = () => {
-      this.open = false;
-      this.calciteNoticeClose.emit();
-    };
   }
   activeHandler(value) {
     this.open = value;

package/dist/cjs/calcite-option_3.cjs.entry.js

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.646
+ * v1.0.0-next.648
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-964a2875.js');
-const observers = require('./observers-695d3a8d.js');
-const dom = require('./dom-81242a2a.js');
-const label = require('./label-125b7cd1.js');
-const form = require('./form-66a5b3fc.js');
-const interactive = require('./interactive-58105b6c.js');
-const loadable = require('./loadable-d48dcbfa.js');
-require('./resources-e2ae989b.js');
-require('./guid-5b4f687e.js');
+const index = require('./index-66bfeb5a.js');
+const observers = require('./observers-b2096d49.js');
+const dom = require('./dom-8dcbe60b.js');
+const label = require('./label-ebe09dfe.js');
+const form = require('./form-54565442.js');
+const interactive = require('./interactive-61857e22.js');
+const loadable = require('./loadable-f0410eb8.js');
+require('./resources-aab81366.js');
+require('./guid-4caf8697.js');
 
 const optionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}";
 
@@ -23,19 +23,14 @@ const Option = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteInternalOptionChange = index.createEvent(this, "calciteInternalOptionChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
     this.mutationObserver = observers.createObserver("mutation", () => {
       this.ensureTextContentDependentProps();
       this.calciteInternalOptionChange.emit();
     });
+    this.disabled = false;
+    this.label = undefined;
+    this.selected = undefined;
+    this.value = undefined;
   }
   handlePropChange(_newValue, _oldValue, propName) {
     if (propName === "label" || propName === "value") {
@@ -102,15 +97,8 @@ const OptionGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteInternalOptionGroupChange = index.createEvent(this, "calciteInternalOptionGroupChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
     this.disabled = false;
+    this.label = undefined;
   }
   handlePropChange() {
     this.calciteInternalOptionGroupChange.emit();
@@ -148,31 +136,6 @@ const Select = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteSelectChange = index.createEvent(this, "calciteSelectChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When `true`, the component must have a value in order for the form to submit.
-     *
-     * @internal
-     */
-    this.required = false;
-    /**
-     * Specifies the size of the component.
-     */
-    this.scale = "m";
-    /** The component's `selectedOption` value. */
-    this.value = null;
-    /**
-     * Specifies the width of the component.
-     */
-    this.width = "auto";
     this.componentToNativeEl = new Map();
     this.mutationObserver = observers.createObserver("mutation", () => this.populateInternalSelect());
     this.handleInternalSelectChange = () => {
@@ -194,6 +157,14 @@ const Select = class {
     this.emitChangeEvent = () => {
       this.calciteSelectChange.emit();
     };
+    this.disabled = false;
+    this.label = undefined;
+    this.name = undefined;
+    this.required = false;
+    this.scale = "m";
+    this.value = null;
+    this.selectedOption = undefined;
+    this.width = "auto";
   }
   valueHandler(value) {
     const items = this.el.querySelectorAll("calcite-option");

package/dist/cjs/calcite-pagination.cjs.entry.js

@@ -1,19 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.646
+ * v1.0.0-next.648
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-964a2875.js');
-const locale = require('./locale-e2250b5b.js');
-require('./key-e3a69c1b.js');
-require('./observers-695d3a8d.js');
-require('./dom-81242a2a.js');
-require('./resources-e2ae989b.js');
-require('./guid-5b4f687e.js');
+const index = require('./index-66bfeb5a.js');
+const locale = require('./locale-6b2788ff.js');
+require('./key-aa68c66b.js');
+require('./observers-b2096d49.js');
+require('./dom-8dcbe60b.js');
+require('./resources-aab81366.js');
+require('./guid-4caf8697.js');
 
 const CSS = {
   page: "page",
@@ -38,41 +38,6 @@ const Pagination = class {
     index.registerInstance(this, hostRef);
     this.calcitePaginationUpdate = index.createEvent(this, "calcitePaginationUpdate", 6);
     this.calcitePaginationChange = index.createEvent(this, "calcitePaginationChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     */
-    this.groupSeparator = false;
-    /** Specifies the number of items per page. */
-    this.num = 20;
-    /** Specifies the starting item number. */
-    this.start = 1;
-    /** Specifies the total number of items. */
-    this.total = 0;
-    /**
-     * Accessible name for the component's next button.
-     *
-     * @default "Next"
-     */
-    this.textLabelNext = TEXT.nextLabel;
-    /**
-     * Accessible name for the component's previous button.
-     *
-     * @default "Previous"
-     */
-    this.textLabelPrevious = TEXT.previousLabel;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
     this.previousClicked = () => {
       this.previousPage().then();
       this.emitUpdate();
@@ -81,20 +46,21 @@ const Pagination = class {
       this.nextPage();
       this.emitUpdate();
     };
-    /**
-     * Returns a string representing the localized label value based on groupSeparator prop being on or off.
-     *
-     * @param value
-     */
-    this.determineGroupSeparator = (value) => {
-      locale.numberStringFormatter.numberFormatOptions = {
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
-      };
-      return this.groupSeparator
-        ? locale.numberStringFormatter.localize(value.toString())
-        : value.toString();
+    this.groupSeparator = false;
+    this.num = 20;
+    this.numberingSystem = undefined;
+    this.start = 1;
+    this.total = 0;
+    this.textLabelNext = TEXT.nextLabel;
+    this.textLabelPrevious = TEXT.previousLabel;
+    this.scale = "m";
+    this.effectiveLocale = "";
+  }
+  effectiveLocaleWatcher() {
+    locale.numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: this.groupSeparator
     };
   }
   // --------------------------------------------------------------------------
@@ -187,7 +153,12 @@ const Pagination = class {
   }
   renderPage(start) {
     const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
-    const displayedPage = this.determineGroupSeparator(page);
+    locale.numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: this.groupSeparator
+    };
+    const displayedPage = locale.numberStringFormatter.localize(page.toString());
     return (index.h("button", { class: {
         [CSS.page]: true,
         [CSS.selected]: start === this.start
@@ -219,6 +190,9 @@ const Pagination = class {
       }, disabled: nextDisabled, onClick: this.nextClicked }, index.h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "effectiveLocale": ["effectiveLocaleWatcher"]
+  }; }
 };
 Pagination.style = paginationCss;
 

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

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.646
+ * v1.0.0-next.648
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-964a2875.js');
-const resources = require('./resources-26b6359a.js');
-const dom = require('./dom-81242a2a.js');
-const Heading = require('./Heading-2e646368.js');
-const resources$1 = require('./resources-5b8c7ec7.js');
-const interactive = require('./interactive-58105b6c.js');
-const observers = require('./observers-695d3a8d.js');
-const loadable = require('./loadable-d48dcbfa.js');
-require('./resources-e2ae989b.js');
-require('./guid-5b4f687e.js');
+const index = require('./index-66bfeb5a.js');
+const resources = require('./resources-df673a39.js');
+const dom = require('./dom-8dcbe60b.js');
+const Heading = require('./Heading-9512d69c.js');
+const resources$1 = require('./resources-15b63465.js');
+const interactive = require('./interactive-61857e22.js');
+const observers = require('./observers-b2096d49.js');
+const loadable = require('./loadable-f0410eb8.js');
+require('./resources-aab81366.js');
+require('./guid-4caf8697.js');
 
 const panelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-max-height:unset;--calcite-panel-width:100%;--calcite-panel-min-width:unset;--calcite-panel-max-width:unset}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;max-block-size:var(--calcite-panel-max-height);inline-size:var(--calcite-panel-width);max-inline-size:var(--calcite-panel-max-width);min-inline-size:var(--calcite-panel-min-width);transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}:host([height-scale=s]){--calcite-panel-max-height:40vh}:host([height-scale=m]){--calcite-panel-max-height:60vh}:host([height-scale=l]){--calcite-panel-max-height:80vh}:host([width-scale=s]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}:host([width-scale=m]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}:host([width-scale=l]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}.container[hidden]{display:none}.header{border-block-end:1px solid;position:sticky;inset-block-start:0px;z-index:400;inline-size:100%;align-items:stretch;justify-content:flex-start;background-color:var(--calcite-ui-foreground-1);border-block-end-color:var(--calcite-ui-border-3);flex:0 0 auto}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{overflow:auto}.content-height{block-size:100%}.content-container{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;background-color:var(--calcite-ui-background)}.footer{border-block-start:1px solid;position:sticky;inset-block-end:0px;display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);border-block-start-color:var(--calcite-ui-border-3);flex:0 0 auto;min-block-size:3rem;padding:0.5rem}.fab-container{position:sticky;inset-block-end:0px;z-index:300;margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}[hidden]{display:none}";
 
@@ -25,35 +25,7 @@ const Panel = class {
     index.registerInstance(this, hostRef);
     this.calcitePanelClose = index.createEvent(this, "calcitePanelClose", 6);
     this.calcitePanelScroll = index.createEvent(this, "calcitePanelScroll", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /** When `true`, the component will be hidden. */
-    this.closed = false;
-    /**
-     *  When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /** When `true`, displays a close button in the trailing side of the header. */
-    this.closable = false;
-    /**
-     * When `true`, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * When `true`, the action menu items in the `header-menu-actions` slot are open.
-     */
-    this.menuOpen = false;
     this.resizeObserver = observers.createObserver("resize", () => this.resizeHandler());
-    this.hasStartActions = false;
-    this.hasEndActions = false;
-    this.hasMenuItems = false;
-    this.hasHeaderContent = false;
-    this.hasFooterContent = false;
-    this.hasFooterActions = false;
-    this.hasFab = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -141,6 +113,25 @@ const Panel = class {
         this.resizeHandler();
       }
     };
+    this.closed = false;
+    this.disabled = false;
+    this.closable = false;
+    this.headingLevel = undefined;
+    this.heightScale = undefined;
+    this.widthScale = undefined;
+    this.loading = false;
+    this.intlClose = undefined;
+    this.intlOptions = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.menuOpen = false;
+    this.hasStartActions = false;
+    this.hasEndActions = false;
+    this.hasMenuItems = false;
+    this.hasHeaderContent = false;
+    this.hasFooterContent = false;
+    this.hasFooterActions = false;
+    this.hasFab = false;
   }
   //--------------------------------------------------------------------------
   //