@esri/calcite-components 3.2.0-next.9 → 3.2.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { html, nothing } from "lit";
@@ -11,14 +11,13 @@ import { u as updateHostInteraction, I as InteractiveContainer } from "../../chu
 import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { l as logger } from "../../chunks/logger.js";
+import { s as styles$1 } from "../../chunks/_sortable.js";
 import { l as listSelector, g as getDepth, a as getListItemChildren } from "../../chunks/utils.js";
 import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources5.js";
 import { css } from "@lit/reactive-element/css-tag.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}.container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;user-select:none;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.icon:hover,.icon:active{color:var(--calcite-color-text-1)}:host([display-mode=flat][drag-handle]:is([selection-mode=none],[selection-appearance=border])) .drag-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .actions-start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:.625rem;padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}:host(:not([disabled])) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-sort-handle,.actions-end calcite-action,.actions-end calcite-sort-handle,.content-start calcite-action,.content-start calcite-sort-handle,.content-end calcite-action,.content-end calcite-sort-handle,.selection-container calcite-action,.selection-container calcite-sort-handle,.drag-container calcite-action,.drag-container calcite-sort-handle,.expanded-container calcite-action,.expanded-container calcite-sort-handle{align-self:stretch}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}.row:focus .actions-start,.row:focus .actions-end{inset-block:.125rem}.row:focus .actions-start .close,.row:focus .actions-start ::slotted(calcite-action),.row:focus .actions-start ::slotted(calcite-action-menu),.row:focus .actions-start ::slotted(calcite-sort-handle),.row:focus .actions-start ::slotted(calcite-dropdown),.row:focus .actions-end .close,.row:focus .actions-end ::slotted(calcite-action),.row:focus .actions-end ::slotted(calcite-action-menu),.row:focus .actions-end ::slotted(calcite-sort-handle),.row:focus .actions-end ::slotted(calcite-dropdown){block-size:calc(100% - .25rem)}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}.container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--border-selected:focus{box-shadow:inset var(--calcite-border-width-lg) 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;user-select:none;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.icon:hover,.icon:active{color:var(--calcite-color-text-1)}:host([display-mode=flat][drag-handle]:is([selection-mode=none],[selection-appearance=border])) .drag-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .actions-start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:.625rem;padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}:host(:not([disabled])) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-sort-handle,.actions-end calcite-action,.actions-end calcite-sort-handle,.content-start calcite-action,.content-start calcite-sort-handle,.content-end calcite-action,.content-end calcite-sort-handle,.selection-container calcite-action,.selection-container calcite-sort-handle,.drag-container calcite-action,.drag-container calcite-sort-handle,.expanded-container calcite-action,.expanded-container calcite-sort-handle{align-self:stretch}.drag-container,.selection-container,.expanded-container{padding-block-end:var(--calcite-spacing-px)}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}.row:focus .actions-start,.row:focus .actions-end{inset-block:.125rem}.row:focus .actions-start .close,.row:focus .actions-start ::slotted(calcite-action),.row:focus .actions-start ::slotted(calcite-action-menu),.row:focus .actions-start ::slotted(calcite-sort-handle),.row:focus .actions-start ::slotted(calcite-dropdown),.row:focus .actions-end .close,.row:focus .actions-end ::slotted(calcite-action),.row:focus .actions-end ::slotted(calcite-action-menu),.row:focus .actions-end ::slotted(calcite-sort-handle),.row:focus .actions-end ::slotted(calcite-dropdown){block-size:calc(100% - .25rem)}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}`;
 const focusMap = /* @__PURE__ */ new Map();
 class ListItem extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.actionsEndEl = createRef();
@@ -27,6 +26,7 @@ class ListItem extends LitElement {
     this.contentEl = createRef();
     this.defaultSlotEl = createRef();
     this.handleGridEl = createRef();
+    this.messages = useT9n();
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
     this.hasContentBottom = false;
@@ -45,15 +45,12 @@ class ListItem extends LitElement {
     this.expanded = false;
     this.filterHidden = false;
     this.interactionMode = null;
-    this.messages = useT9n();
     this.displayMode = "flat";
     this.moveToItems = [];
     this.scale = "m";
     this.selected = false;
     this.selectionAppearance = null;
     this.selectionMode = null;
-    this.setPosition = null;
-    this.setSize = null;
     this.sortHandleOpen = false;
     this.unavailable = false;
     this.calciteInternalFocusPreviousItem = createEvent({ cancelable: false });
@@ -73,16 +70,11 @@ class ListItem extends LitElement {
     this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
   }
   static {
-    this.properties = { hasActionsEnd: [16, { state: true }], hasActionsStart: [16, { state: true }], hasContentBottom: [16, { state: true }], hasContentEnd: [16, { state: true }], hasContentStart: [16, { state: true }], hasCustomContent: [16, { state: true }], level: [16, { state: true }], expandable: [16, { state: true }], parentListEl: [16, { state: true }], active: [5, { type: Boolean }], bordered: [5, { type: Boolean }], closable: [7, { reflect: true, type: Boolean }], closed: [7, { reflect: true, type: Boolean }], description: 1, disabled: [7, { reflect: true, type: Boolean }], dragDisabled: [7, { reflect: true, type: Boolean }], dragHandle: [7, { reflect: true, type: Boolean }], expanded: [7, { reflect: true, type: Boolean }], filterHidden: [7, { reflect: true, type: Boolean }], interactionMode: 1, label: 1, messageOverrides: [0, { attribute: false }], metadata: [0, { attribute: false }], displayMode: [3, { reflect: true }], moveToItems: [0, { attribute: false }], open: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selected: [7, { reflect: true, type: Boolean }], selectionAppearance: [3, { reflect: true }], selectionMode: [3, { reflect: true }], setPosition: [9, { type: Number }], setSize: [9, { type: Number }], sortHandleOpen: [7, { reflect: true, type: Boolean }], unavailable: [7, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { reflect: true }], iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }] };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
-  /**
-   * When `true`, the item is open to show child components.
-   *
-   * @deprecated Use `expanded` prop instead.
-   */
   get open() {
     return this.expanded;
   }
@@ -94,9 +86,6 @@ class ListItem extends LitElement {
     });
     this.expanded = value;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     const { containerEl: { value: containerEl }, parentListEl } = this;
@@ -119,11 +108,6 @@ class ListItem extends LitElement {
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
-  /**
-   * TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code
-   *
-   * @param changes
-   */
   willUpdate(changes) {
     if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
       this.activeHandler(this.active);
@@ -150,8 +134,6 @@ class ListItem extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   activeHandler(active) {
     if (!active) {
       this.focusCell(null, false);
@@ -368,8 +350,6 @@ class ListItem extends LitElement {
     this.setFocusCell(focusEl, focusedEl, saveFocusIndex);
     focusedEl?.focus();
   }
-  // #endregion
-  // #region Rendering
   renderSelected() {
     const { selected, selectionMode, selectionAppearance } = this;
     if (selectionMode === "none" || selectionAppearance === "border") {

package/dist/components/calcite-list-item-group/customElement.d.ts

@@ -3,9 +3,13 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { InteractiveComponent } from '../../utils/interactive';
 import { Scale } from '../interfaces';
 
-/** @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. */
+/** @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. */
 export declare class ListItemGroup extends LitElement {
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /** The header text for all nested `calcite-list-item` rows. */
     heading: string;
@@ -13,6 +17,7 @@ export declare class ListItemGroup extends LitElement {
      * Specifies the size of the component.
      *
      * @internal
-     * */
+     * @default "m"
+     */
     scale: Scale;
 }

package/dist/components/calcite-list-item-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -21,23 +21,17 @@ class ListItemGroup extends LitElement {
     this.calciteInternalListItemGroupDefaultSlotChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], filterHidden: [7, { reflect: true, type: Boolean }], heading: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   handleDefaultSlotChange() {
     this.calciteInternalListItemGroupDefaultSlotChange.emit();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { disabled, heading } = this;
     return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)} role=row><div .ariaColSpan=${MAX_COLUMNS} class=${safeClassMap(CSS.heading)} role=cell>${heading}</div></div><slot @slotchange=${this.handleDefaultSlotChange}></slot>` });

package/dist/components/calcite-loader/customElement.d.ts

@@ -4,7 +4,11 @@ import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/
 import { Scale } from '../interfaces';
 
 export declare class Loader extends LitElement {
-    /** When `true`, the component displays smaller. */
+    /**
+     * When `true`, the component displays smaller.
+     *
+     * @default false
+     */
     inline: boolean;
     /**
      * Accessible name for the component.
@@ -12,16 +16,30 @@ export declare class Loader extends LitElement {
      * @required
      */
     label: string;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** When not `inline`, displays text under the component's indicator. */
+    /**
+     * When not `inline`, displays text under the component's indicator.
+     *
+     * @default ""
+     */
     text: string;
     /**
      * Specifies the component type.
      *
      * Use `"indeterminate"` if finding actual progress value is impossible. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress.
+     *
+     * @default "indeterminate"
      */
     type: "indeterminate" | "determinate" | "determinate-value";
-    /** The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. */
+    /**
+     * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100.
+     *
+     * @default 0
+     */
     value: number;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html, nothing, svg } from "lit";
 import { LitElement, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
@@ -28,13 +28,11 @@ class Loader extends LitElement {
     this.value = 0;
   }
   static {
-    this.properties = { complete: [7, { reflect: true, type: Boolean }], inline: [7, { reflect: true, type: Boolean }], label: 1, scale: [3, { reflect: true }], text: 1, type: [3, { reflect: true }], value: [9, { type: Number }] };
+    this.properties = { complete: [7, {}, { reflect: true, type: Boolean }], inline: [7, {}, { reflect: true, type: Boolean }], label: 1, scale: [3, {}, { reflect: true }], text: 1, type: [3, {}, { reflect: true }], value: [9, {}, { type: Number }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.updateFormatter();
@@ -50,8 +48,6 @@ class Loader extends LitElement {
       this.updateFormatter();
     }
   }
-  // #endregion
-  // #region Private Methods
   valueChangeHandler() {
     this.complete = this.type.startsWith("determinate") && this.value === 100;
   }
@@ -61,11 +57,6 @@ class Loader extends LitElement {
     }
     return this.formatter.format(this.value / 100);
   }
-  /**
-   * Return the proper sizes based on the scale property
-   *
-   * @param scale
-   */
   getSize(scale) {
     return {
       s: 32,
@@ -88,8 +79,6 @@ class Loader extends LitElement {
       style: "percent"
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { el, inline, label, text, type, value } = this;
     const id = el.id || guid();

package/dist/components/calcite-menu/customElement.d.ts

@@ -10,21 +10,20 @@ export declare class Menu extends LitElement {
      * @required
      */
     label: string;
-    /** Specifies the layout of the component. */
-    layout: Layout;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only.
+     * Specifies the layout of the component.
      *
-     * @private
+     * @default "horizontal"
      */
+    layout: Layout;
+    /** Use this property to override individual strings used by the component. */
+    messageOverrides?: typeof this.messages._overrides;
+    /** Sets focus on the component's first focusable element. */
+    setFocus(): Promise<void>;
     private messages: Partial<{
         more: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
         more: string;
     }>;
-    /** Sets focus on the component's first focusable element. */
-    setFocus(): Promise<void>;
 }
 export {};

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

@@ -1,28 +1,26 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/components-controllers";
+import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { h as focusFirstTabbable, d as focusElementInGroup, s as slotChangeGetAssignedElements, b as focusElement } from "../../chunks/dom.js";
 import { c as componentFocusable } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { css } from "@lit/reactive-element/css-tag.js";
 const styles = css`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
 class Menu extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.attributeWatch = useWatchAttributes(["role"], this.handleGlobalAttributesChanged);
     this.menuItems = [];
-    this.layout = "horizontal";
     this.messages = useT9n();
+    this.layout = "horizontal";
     this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
   }
   static {
-    this.properties = { label: 1, layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }] };
+    this.properties = { label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -30,9 +28,6 @@ class Menu extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.menuItems[0]);
@@ -42,8 +37,6 @@ class Menu extends LitElement {
       this.setMenuItemLayout(this.menuItems, this.layout);
     }
   }
-  // #endregion
-  // #region Private Methods
   handleGlobalAttributesChanged() {
     this.requestUpdate();
     this.setMenuItemLayout(this.menuItems, this.layout);
@@ -113,8 +106,6 @@ class Menu extends LitElement {
   getEffectiveRole() {
     return this.el.role || "menubar";
   }
-  // #endregion
-  // #region Rendering
   render() {
     return html`<ul .ariaLabel=${this.label} .role=${this.getEffectiveRole()}><slot @slotchange=${this.handleMenuSlotChange}></slot></ul>`;
   }

package/dist/components/calcite-menu-item/customElement.d.ts

@@ -4,11 +4,19 @@ import { FlipContext, Layout } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 import { MenuItemCustomEvent } from './interfaces';
 
-/** @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu. */
+/** @slot [submenu-item] - A slot for adding `calcite-menu-item`s in a submenu. */
 export declare class MenuItem extends LitElement {
-    /** When `true`, the component is highlighted. */
+    /**
+     * When `true`, the component is highlighted.
+     *
+     * @default false
+     */
     active: boolean;
-    /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */
+    /**
+     * When `true`, the component displays a breadcrumb trail for use as a navigational aid.
+     *
+     * @default false
+     */
     breadcrumb: boolean;
     /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
     href: string;
@@ -27,18 +35,10 @@ export declare class MenuItem extends LitElement {
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only.
+     * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
      *
-     * @private
+     * @default false
      */
-    private messages: Partial<{
-        submenu: string;
-        open: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        submenu: string;
-        open: string;
-    }>;
-    /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. */
     open: boolean;
     /**
      * Defines the relationship between the `href` value and the current document.
@@ -57,5 +57,12 @@ export declare class MenuItem extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Emits when the component is selected. */
-    readonly calciteMenuItemSelect: TargetedEvent<this, undefined>;
+    readonly calciteMenuItemSelect: TargetedEvent<this, void>;
+    private messages: Partial<{
+        submenu: string;
+        open: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        submenu: string;
+        open: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -31,15 +31,13 @@ const CSS = {
 };
 const styles = css`:host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;padding-inline:1rem;font-size:var(--calcite-font-size-0);outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:.125rem;border-block-end:.125rem solid var(--calcite-color-transparent);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{--calcite-internal-menu-background-color: var(--calcite-color-foreground-2)}.content:focus{border-block-end-width:4px;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));padding-block-start:.25rem;border-block-end-width:.25rem}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:.25rem solid var(--calcite-color-transparent)}:host([layout=vertical]) .content{padding-inline:.75rem}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var(--calcite-color-brand)}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-color-text-3))))}.icon--start{margin-inline-end:.75rem}.icon--end{margin-inline-start:.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1);--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}calcite-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}.content:focus~calcite-action,.content:hover~calcite-action{--calcite-action-text-color: var(--calcite-menu-text-color, var(--calcite-color-text-1))}.content:focus~calcite-action:after,.content:hover~calcite-action:after{block-size:100%;inset-block:0}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
 class MenuItem extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.anchorEl = createRef();
     this.dropdownActionEl = createRef();
+    this.messages = useT9n();
     this.hasSubmenu = false;
     this.isTopLevelItem = false;
-    this.messages = useT9n();
     this.open = false;
     this.calciteInternalMenuItemKeyEvent = createEvent();
     this.calciteMenuItemSelect = createEvent();
@@ -49,20 +47,15 @@ class MenuItem extends LitElement {
     this.listen("focus", this.focusHandler);
   }
   static {
-    this.properties = { hasSubmenu: [16, { state: true }], submenuItems: [16, { state: true }], active: [7, { reflect: true, type: Boolean }], breadcrumb: [7, { reflect: true, type: Boolean }], href: 1, iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconStart: [3, { reflect: true }], isTopLevelItem: [5, { type: Boolean }], label: 1, layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], open: [7, { reflect: true, type: Boolean }], rel: [3, { reflect: true }], target: [3, { reflect: true }], text: 1, topLevelMenuLayout: 1 };
+    this.properties = { hasSubmenu: [16, {}, { state: true }], submenuItems: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], breadcrumb: [7, {}, { reflect: true, type: Boolean }], href: 1, iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], isTopLevelItem: [5, {}, { type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], text: 1, topLevelMenuLayout: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.anchorEl.value.focus();
   }
-  // #endregion
-  // #region Private Methods
   handleClickOut(event) {
     if (this.topLevelMenuLayout !== "vertical" && this.hasSubmenu && this.open && !event.composedPath().includes(this.el)) {
       this.open = false;
@@ -158,8 +151,6 @@ class MenuItem extends LitElement {
       this.calciteMenuItemSelect.emit();
     }
   }
-  // #endregion
-  // #region Rendering
   renderIconStart() {
     return keyed(CSS.iconStart, html`<calcite-icon class=${`${CSS.icon} ${CSS.iconStart}`} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} scale=s></calcite-icon>`);
   }

package/dist/components/calcite-meter/customElement.d.ts

@@ -8,11 +8,23 @@ import { Label } from '../calcite-label/customElement.js';
 import { MeterFillType, MeterLabelType } from './interfaces';
 
 export declare class Meter extends LitElement {
-    /** Specifies the appearance style of the component. */
+    /**
+     * Specifies the appearance style of the component.
+     *
+     * @default "outline-fill"
+     */
     appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
-    /** Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */
+    /**
+     * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
+     *
+     * @default "range"
+     */
     fillType: MeterFillType;
     /**
      * The `id` of the form that will be associated with the component.
@@ -20,7 +32,11 @@ export declare class Meter extends LitElement {
      * When not set, the component will be associated with its ancestor form element, if any.
      */
     form: string;
-    /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */
+    /**
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+     *
+     * @default false
+     */
     groupSeparator: boolean;
     /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
     high: number;
@@ -32,9 +48,17 @@ export declare class Meter extends LitElement {
     label: string;
     /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
     low: number;
-    /** Specifies the highest allowed value of the component. */
+    /**
+     * Specifies the highest allowed value of the component.
+     *
+     * @default 100
+     */
     max: number;
-    /** Specifies the lowest allowed value of the component. */
+    /**
+     * Specifies the lowest allowed value of the component.
+     *
+     * @default 0
+     */
     min: number;
     /**
      * Specifies the name of the component.
@@ -44,18 +68,42 @@ export declare class Meter extends LitElement {
     name: string;
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem: NumberingSystem;
-    /** When `rangeLabels` is `true`, specifies the format of displayed labels. */
+    /**
+     * When `rangeLabels` is `true`, specifies the format of displayed labels.
+     *
+     * @default "percent"
+     */
     rangeLabelType: MeterLabelType;
-    /** When `true`, displays the values of `high`, `low`, `min`, and `max`. */
+    /**
+     * When `true`, displays the values of `high`, `low`, `min`, and `max`.
+     *
+     * @default false
+     */
     rangeLabels: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values. */
+    /**
+     * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.
+     *
+     * @default ""
+     */
     unitLabel: string;
     /** Specifies the current value of the component. */
     value: number;
-    /** When `true`, displays the current value. */
+    /**
+     * When `true`, displays the current value.
+     *
+     * @default false
+     */
     valueLabel: boolean;
-    /** When `valueLabel` is `true`, specifies the format of displayed label. */
+    /**
+     * When `valueLabel` is `true`, specifies the format of displayed label.
+     *
+     * @default "percent"
+     */
     valueLabelType: MeterLabelType;
 }