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

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

@@ -7,9 +7,17 @@ import { Scale } from '../interfaces';
 import { Label } from '../calcite-label/customElement.js';
 
 export declare class Switch extends LitElement {
-    /** When `true`, the component is checked. */
+    /**
+     * When `true`, the component is checked.
+     *
+     * @default false
+     */
     checked: boolean;
-    /** 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 `id` of the form that will be associated with the component.
@@ -25,12 +33,16 @@ export declare class Switch extends LitElement {
      * Required to pass the component's `value` on form submission.
      */
     name: string;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** The component's value. */
     value: any;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the `checked` value has changed. */
-    readonly calciteSwitchChange: TargetedEvent<this, undefined>;
+    readonly calciteSwitchChange: TargetedEvent<this, void>;
 }

package/dist/components/calcite-switch/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 { ref } from "lit-html/directives/ref.js";
 import { html } from "lit-html";
@@ -17,10 +17,8 @@ const CSS = {
   track: "track",
   handle: "handle"
 };
-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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-width:1px;border-style:solid;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color, var(--calcite-color-border-2));background-color:var(--calcite-switch-background-color, var(--calcite-color-foreground-2))}.container:focus .track{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))))}.handle{pointer-events:none;position:absolute;display:block;border-width:2px;border-style:solid;transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:-1px;inset-inline:-1px auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host(:hover:not([disabled])) .handle,:host(:focus:not([disabled])) .handle{border-color:var(--calcite-switch-handle-border-color, var(--calcite-color-brand));box-shadow:var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand))}:host([checked]) .track{border-color:var(--calcite-switch-border-color, var(--calcite-color-brand-hover));background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{border-color:var(--calcite-switch-handle-border-color, var(--calcite-color-brand));inset-inline:auto -1px}:host([checked]):host(:hover:not([disabled])) .handle{border-color:var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));box-shadow:var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand-hover))}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}: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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{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))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 class Switch extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.checked = false;
@@ -31,14 +29,11 @@ class Switch extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { checked: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], label: 1, name: [3, { reflect: true }], scale: [3, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     focusElement(this.switchEl);
@@ -56,8 +51,6 @@ class Switch extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  // #endregion
-  // #region Private Methods
   syncHiddenFormInput(input) {
     input.type = "checkbox";
   }
@@ -86,8 +79,6 @@ class Switch extends LitElement {
   setSwitchEl(el) {
     this.switchEl = el;
   }
-  // #endregion
-  // #region Rendering
   render() {
     return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.setSwitchEl)}><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${HiddenFormInputSlot({ component: this })}</div>` });
   }

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

@@ -2,12 +2,14 @@
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Scale } from '../interfaces';
 
-/** @slot - A slot for adding custom content. */
+/** @slot  - A slot for adding custom content. */
 export declare class Tab extends LitElement {
     /**
      * When `true`, the component's contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
+     *
+     * @default false
      */
     selected: boolean;
     /**

package/dist/components/calcite-tab/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, setAttribute, safeClassMap } from "@arcgis/lumina";
@@ -11,10 +11,8 @@ const CSS = {
   container: "container",
   content: "content"
 };
-const styles = css`:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}:host([selected]) section,:host([selected]) .container{display:block}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: .625rem;font-size:var(--calcite-font-size-md);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container: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))))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: .625rem;font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container: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))))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tab extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.guid = `calcite-tab-title-${guid()}`;
@@ -23,22 +21,14 @@ class Tab extends LitElement {
     this.listenOn(document.body, "calciteInternalTabChange", this.internalTabChangeHandler);
   }
   static {
-    this.properties = { labeledBy: [16, { state: true }], scale: 1, selected: [7, { reflect: true, type: Boolean }], tab: [3, { reflect: true }] };
+    this.properties = { labeledBy: [16, {}, { state: true }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Returns the index of the component item within the tab array. */
   async getTabIndex() {
     return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
   }
-  /**
-   * @param tabIds
-   * @param titleIds
-   * @private
-   */
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
   }
@@ -52,8 +42,6 @@ class Tab extends LitElement {
       detail: this.el
     }));
   }
-  // #endregion
-  // #region Private Methods
   internalTabChangeHandler(event) {
     const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
     if (targetTabsEl !== this.parentTabsEl) {
@@ -68,8 +56,6 @@ class Tab extends LitElement {
     }
     event.stopPropagation();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const id = this.el.id || this.guid;
     setAttribute(this.el, "aria-labelledby", this.labeledBy);

package/dist/components/calcite-tab-nav/customElement.d.ts

@@ -6,38 +6,31 @@ import { TabChangeEventDetail } from '../calcite-tab/interfaces';
 import { TabID, TabLayout, TabPosition } from '../calcite-tabs/interfaces';
 import { TabTitle } from '../calcite-tab-title/customElement.js';
 
-/** @slot - A slot for adding `calcite-tab-title`s. */
+/** @slot  - A slot for adding `calcite-tab-title`s. */
 export declare class TabNav 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.
-     *
-     * @private
-     */
-    private messages: Partial<{
-        nextTabTitles: string;
-        previousTabTitles: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        nextTabTitles: string;
-        previousTabTitles: string;
-    }>;
     /**
      * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
      *
      *  `@internal`
-     */
-    position: TabPosition;
-    /**
-     * Specifies the component's selected `calcite-tab-title`.
      *
-     * @readonly
+     * @default "bottom"
      */
+    position: TabPosition;
+    /** Specifies the component's selected `calcite-tab-title`. */
     readonly selectedTitle: HTMLCalciteTabTitleElement;
     /** Specifies the name when saving selected `calcite-tab` data to `localStorage`. */
     storageId: string;
     /** Specifies text to update multiple components to keep in sync if one changes. */
     syncId: string;
     /** Emits when the selected `calcite-tab` changes. */
-    readonly calciteTabChange: TargetedEvent<this, undefined>;
+    readonly calciteTabChange: TargetedEvent<this, void>;
+    private messages: Partial<{
+        nextTabTitles: string;
+        previousTabTitles: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        nextTabTitles: string;
+        previousTabTitles: string;
+    }>;
 }

package/dist/components/calcite-tab-nav/customElement.js

@@ -1,13 +1,13 @@
 /*! 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 { ref } from "lit-html/directives/ref.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from "../../chunks/core.js";
 import { html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { f as filterDirectChildren, g as getElementDir, d as focusElementInGroup } from "../../chunks/dom.js";
+import { g as getElementDir, f as filterDirectChildren, d as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { css } from "@lit/reactive-element/css-tag.js";
@@ -27,8 +27,6 @@ const CSS = {
 };
 const styles = css`:host{--calcite-internal-tab-nav-gradient-start-side: left;--calcite-internal-tab-nav-gradient-end-side: right;position:relative;display:flex}:host([bordered]):not([selected]) .container{background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([bordered]) calcite-button{--calcite-button-border-color: var(--calcite-tab-border-color, var(--calcite-color-border-1))}.scale-s{--calcite-internal-tab-nav-button-width: 24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-button-width: 32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-button-width: 44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side: right;--calcite-internal-tab-nav-gradient-end-side: left}.container--start-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side),transparent,transparent var(--calcite-internal-tab-nav-button-width),white var(--calcite-internal-tab-nav-button-width),white 51%)}.container--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side),transparent,transparent var(--calcite-internal-tab-nav-button-width),white var(--calcite-internal-tab-nav-button-width),white 51%)}.container--start-overflow.container--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side),transparent,transparent var(--calcite-internal-tab-nav-button-width),white var(--calcite-internal-tab-nav-button-width),white 51%,transparent 51%),linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side),transparent,transparent var(--calcite-internal-tab-nav-button-width),white var(--calcite-internal-tab-nav-button-width),white 51%,transparent 51%)}.container::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap: var(--calcite-spacing-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xl)}.container,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));--calcite-button-background-color: var(--calcite-color-transparent);--calcite-offset-invert-focus: 1;block-size:var(--calcite-container-size-content-fluid)}.scroll-button-container calcite-button:hover .scroll-button-container calcite-button:focus{--calcite-button-background-color: var(--calcite-color-transparent-hover)}.scroll-button-container calcite-button:active{--calcite-button-background-color: var(--calcite-color-transparent-press)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward:before,:host(:not([bordered])) .scroll-button-container--forward:before{background-color:var(--calcite-tab-border-color, var(--calcite-color-border-1));opacity:.5;content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward:before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward:before{inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class TabNav extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.effectiveDir = "ltr";
@@ -37,11 +35,11 @@ class TabNav extends LitElement {
       this.updateScrollingState();
     });
     this.makeFirstVisibleTabClosable = false;
+    this.messages = useT9n();
     this.hasOverflowingEndTabTitle = false;
     this.hasOverflowingStartTabTitle = false;
     this.bordered = false;
     this.layout = "inline";
-    this.messages = useT9n();
     this.position = "bottom";
     this.scale = "m";
     this.selectedTitle = null;
@@ -58,21 +56,11 @@ class TabNav extends LitElement {
     this.listenOn(document.body, "calciteInternalTabChange", this.globalInternalTabChangeHandler);
   }
   static {
-    this.properties = { hasOverflowingEndTabTitle: [16, { state: true }], hasOverflowingStartTabTitle: [16, { state: true }], selectedTabId: [16, { state: true }], bordered: [7, { reflect: true, type: Boolean }], layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, { attribute: false }], storageId: [3, { reflect: true }], syncId: [3, { reflect: true }] };
+    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  get enabledTabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
-  }
-  get scrollerButtonWidth() {
-    const { scale } = this;
-    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
-  }
-  get tabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title");
-  }
   connectedCallback() {
     super.connectedCallback();
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -113,8 +101,16 @@ class TabNav extends LitElement {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
+  get enabledTabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
+  }
+  get scrollerButtonWidth() {
+    const { scale } = this;
+    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
+  }
+  get tabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title");
+  }
   focusPreviousTabHandler(event) {
     this.handleTabFocus(event, event.target, "previous");
   }
@@ -164,11 +160,6 @@ class TabNav extends LitElement {
     this.handleTabTitleClose(closedTabTitleEl);
     event.stopPropagation();
   }
-  /**
-   * Check for active tabs on register and update selected
-   *
-   * @param event
-   */
   async updateTabTitles(event) {
     if (event.target.selected) {
       this.selectedTabId = event.detail;
@@ -348,8 +339,6 @@ class TabNav extends LitElement {
       tabTitles[this.selectedTabId].focus();
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     this.el.role = "tablist";
     return html`<div class=${safeClassMap({

package/dist/components/calcite-tab-title/customElement.d.ts

@@ -10,14 +10,26 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
 /**
  * Tab-titles are optionally individually closable.
  *
- * @slot - A slot for adding text.
+ * @slot  - A slot for adding text.
  */
 export declare class TabTitle extends LitElement {
-    /** When `true`, a close button is added to the component. */
+    /**
+     * When `true`, a close button is added to the component.
+     *
+     * @default false
+     */
     closable: boolean;
-    /** When `true`, does not display or position the component. */
+    /**
+     * When `true`, does not display or position the component.
+     *
+     * @default false
+     */
     closed: boolean;
-    /** 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 an icon to display at the end of the component. */
     iconEnd: IconNameOrString;
@@ -27,26 +39,20 @@ export declare class TabTitle extends LitElement {
     iconStart: IconNameOrString;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        close: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        close: string;
-    }>;
     /**
      * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.
      *
      *  `@internal`
+     *
+     * @default "top"
      */
     position: TabPosition;
     /**
      * When `true`, the component and its respective `calcite-tab` contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
+     *
+     * @default false
      */
     selected: boolean;
     /**
@@ -58,7 +64,12 @@ export declare class TabTitle extends LitElement {
     /** Returns the index of the title within the `calcite-tab-nav`. */
     getTabIndex(): Promise<number>;
     /** Fires when a `calcite-tab` is selected. */
-    readonly calciteTabsActivate: TargetedEvent<this, undefined>;
+    readonly calciteTabsActivate: TargetedEvent<this, void>;
     /** Fires when a `calcite-tab` is closed. */
-    readonly calciteTabsClose: TargetedEvent<this, undefined>;
+    readonly calciteTabsClose: TargetedEvent<this, void>;
+    private messages: Partial<{
+        close: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        close: string;
+    }>;
 }

package/dist/components/calcite-tab-title/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 { isServer, html } from "lit";
@@ -28,8 +28,6 @@ const CSS = {
 };
 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:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .x-button{inline-size:1.25rem}.scale-m .content{padding-block:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .x-button{inline-size:1.75rem}.scale-l .content{padding-block:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .x-button{inline-size:2rem}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-tab-text-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-background-color, transparent)}.selected-indicator{position:absolute;display:block;block-size:.125rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}:host([bordered][selected]) .container:after{position:absolute;display:block;block-size:.125rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;content:""}:host([bordered][selected]) .container.container--bottom:after{inset-block-start:-1px}:host([bordered][selected]:focus) .container:after{background:transparent}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host(:not([bordered])) .container:hover,:host(:not([bordered])) .container:active{color:var(--calcite-color-text-1)}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([selected]:focus) .selected-indicator{block-size:4px}.calcite-tab-title--icon{position:relative;margin:0;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.content--has-text .icon-start,.content--has-text .calcite-tab-title--icon.icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color))}.content--has-text .calcite-tab-title--icon.icon-start .icon-end,.content--has-text .calcite-tab-title--icon.icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-icon-color))}.content--has-text{padding:.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.x-button{display:flex;block-size:100%;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs));color:var(--calcite-tab-close-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent))}.x-button:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}.x-button:focus,.x-button:hover,.x-button:active{color:var(--calcite-tab-close-icon-color-press, var(--calcite-color-text-1));background-color:var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-spacing-px);border-inline-style:solid}:host([bordered]) .container:hover,:host([bordered]) .container:active{color:var(--calcite-color-text-1)}:host([bordered]) .container .x-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .x-button:focus,:host([bordered]) .container .x-button:hover,:host([bordered]) .container .x-button:active{box-shadow:0 2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container.container--bottom{border-block-start-style:solid;border-block-start-width:1px}:host([bordered]) .container.container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([bordered]) .container.container--bottom .x-button{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent))}:host([bordered]) .container.container--bottom .x-button:focus,:host([bordered]) .container.container--bottom .x-button:hover,:host([bordered]) .container.container--bottom .x-button:active{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container.container--bottom .x-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container:not(.container--bottom) .x-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-1px}:host([bordered]) .container .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:host(:not([selected])) .container .x-button{box-shadow:0 2px 0 0 transparent}:host([bordered]) .container:host(:not([selected])):host(:hover) .container:not(.container--bottom){border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .selected-indicator{box-shadow:inset 0 var(--calcite-internal-tab-shadow-length) var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) :not(.container--bottom){--calcite-internal-tab-shadow-length: 1px}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .container--bottom{--calcite-internal-tab-shadow-length: -1px}:host([bordered]) .container:hover{background-color:var(--calcite-tab-background-color-hover, var(--calcite-color-foreground-2));border-block-end-color:var(--calcite-color-border-1)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator,:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-tab-accent-color-press, var(--calcite-color-brand))}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-tab-text-color, var(--calcite-color-text-1))}:host([selected][bordered]) .container{border-inline-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([selected][bordered]) .container:after{background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([selected][bordered]) .container:hover,:host([selected][bordered]) .container:active{background:transparent}:host(:focus) .container{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))))}:host(:focus) .container:focus-within{outline-color:transparent}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.x-button{z-index:var(--calcite-z-index)}.selected-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .container{pointer-events:none;opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class TabTitle extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.closeButtonEl = createRef();
@@ -38,12 +36,12 @@ class TabTitle extends LitElement {
     this.resizeObserver = createObserver("resize", () => {
       this.calciteInternalTabIconChanged.emit();
     });
+    this.messages = useT9n();
     this.hasText = false;
     this.bordered = false;
     this.closable = false;
     this.closed = false;
     this.disabled = false;
-    this.messages = useT9n();
     this.position = "top";
     this.scale = "m";
     this.selected = false;
@@ -62,19 +60,11 @@ class TabTitle extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { controls: [16, { state: true }], hasText: [16, { state: true }], bordered: [7, { reflect: true, type: Boolean }], closable: [7, { reflect: true, type: Boolean }], closed: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconStart: [3, { reflect: true }], layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], position: 1, scale: 1, selected: [7, { reflect: true, type: Boolean }], tab: [3, { reflect: true }] };
+    this.properties = { controls: [16, {}, { state: true }], hasText: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * This activates a tab in order for it and its associated tab-title be selected.
-   *
-   * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events
-   * @private
-   */
   async activateTab(userTriggered = true) {
     if (this.disabled || this.closed) {
       return;
@@ -85,19 +75,12 @@ class TabTitle extends LitElement {
       requestAnimationFrame(() => this.calciteTabsActivate.emit());
     }
   }
-  /** @private */
   async getTabIdentifier() {
     return this.tab ? this.tab : this.getTabIndex();
   }
-  /** Returns the index of the title within the `calcite-tab-nav`. */
   async getTabIndex() {
     return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab-title")), this.el);
   }
-  /**
-   * @param tabIds
-   * @param titleIds
-   * @private
-   */
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
   }
@@ -126,7 +109,6 @@ class TabTitle extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async loaded() {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
   }
@@ -138,8 +120,6 @@ class TabTitle extends LitElement {
     }));
     this.resizeObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   selectedHandler() {
     if (this.selected) {
       this.activateTab(false);
@@ -211,8 +191,6 @@ class TabTitle extends LitElement {
     this.calciteInternalTabsClose.emit({ tab: this.tab });
     this.calciteTabsClose.emit();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { el, closed } = this;
     const id = el.id || this.guid;