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

package/dist/components/calcite-radio-button-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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
@@ -15,10 +15,8 @@ const CSS = {
 const IDS = {
   validationMessage: "radioButtonGroupValidationMessage"
 };
-const styles = css`:host{display:flex;flex-direction:column}:host>.item-wrapper{display:flex;max-inline-size:100vw}:host([layout=horizontal])>.item-wrapper{flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s])>.item-wrapper{column-gap:1rem}:host([layout=horizontal][scale=m])>.item-wrapper{column-gap:1.25rem}:host([layout=horizontal][scale=l])>.item-wrapper{column-gap:1.5rem}:host([layout=vertical])>.item-wrapper{flex-direction:column;inline-size:fit-content}:host([scale=s]) calcite-input-message{--calcite-input-message-spacing-value: calc(var(--calcite-spacing-xxs) * -1)}:host([scale=m]) calcite-input-message{--calcite-input-message-spacing-value: calc(var(--calcite-spacing-sm) * -1)}:host([scale=l]) calcite-input-message{--calcite-input-message-spacing-value: calc(var(--calcite-spacing-md) * -1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:flex;flex-direction:column}:host>.item-wrapper{display:flex;max-inline-size:100vw}:host([layout=horizontal])>.item-wrapper{flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-lg))}:host([layout=horizontal][scale=m])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xl))}:host([layout=horizontal][scale=l])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xxl))}:host([layout=vertical])>.item-wrapper{flex-direction:column;inline-size:fit-content}:host([scale=s]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-xxs) * -1) )}:host([scale=m]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-sm) * -1) )}:host([scale=l]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-md) * -1) )}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 class RadioButtonGroup extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
@@ -33,14 +31,11 @@ class RadioButtonGroup extends LitElement {
     this.listen("calciteRadioButtonChange", this.radioButtonChangeHandler);
   }
   static {
-    this.properties = { radioButtons: [16, { state: true }], disabled: [7, { reflect: true, type: Boolean }], layout: [3, { reflect: true }], name: [3, { reflect: true }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selectedItem: [0, { attribute: false }], status: [3, { reflect: true }], validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1 };
+    this.properties = { radioButtons: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */
   async setFocus() {
     await componentFocusable(this);
     if (this.selectedItem && !this.selectedItem.disabled) {
@@ -67,8 +62,6 @@ class RadioButtonGroup extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   passPropsToRadioButtons() {
     this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button"));
     this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) || null;
@@ -90,8 +83,6 @@ class RadioButtonGroup extends LitElement {
     this.selectedItem = event.target;
     this.calciteRadioButtonGroupChange.emit();
   }
-  // #endregion
-  // #region Rendering
   render() {
     this.el.role = "radiogroup";
     return html`<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} class=${safeClassMap(CSS.itemWrapper)}><slot></slot></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;

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

@@ -12,7 +12,11 @@ export declare class Rating extends LitElement {
     average: number;
     /** Specifies the number of previous ratings to display. */
     count: number;
-    /** 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.
@@ -22,31 +26,35 @@ export declare class Rating extends LitElement {
     form: string;
     /** 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: {
-        rating: string;
-        stars: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        rating: string;
-        stars: string;
-    }>;
     /**
      * Specifies the name of the component.
      *
      * Required to pass the component's `value` on form submission.
      */
     name: string;
-    /** When `true`, the component's value can be read, but cannot be modified. */
+    /**
+     * When `true`, the component's value can be read, but cannot be modified.
+     *
+     * @default false
+     */
     readOnly: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */
+    /**
+     * When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.
+     *
+     * @default false
+     */
     showChip: boolean;
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * Specifies the status of the input field, which determines message and icons.
+     *
+     * @default "idle"
+     */
     status: Status;
     /** Specifies the validation icon to display under the component. */
     validationIcon: IconNameOrString | boolean;
@@ -55,7 +63,6 @@ export declare class Rating extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
@@ -65,5 +72,12 @@ export declare class Rating extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the component's value changes. */
-    readonly calciteRatingChange: TargetedEvent<this, undefined>;
+    readonly calciteRatingChange: TargetedEvent<this, void>;
+    private messages: {
+        rating: string;
+        stars: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        rating: string;
+        stars: string;
+    }>;
 }

package/dist/components/calcite-rating/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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit-html/directives/live.js";
 import { html } from "lit-html";
@@ -20,8 +20,6 @@ const IDS = {
 };
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-internal-rating-spacing: .25rem}:host([scale=m]){block-size:2rem;--calcite-internal-rating-spacing: .5rem}:host([scale=l]){block-size:2.75rem;--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{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;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star: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))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{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;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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 Rating extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.emit = false;
@@ -30,8 +28,8 @@ class Rating extends LitElement {
     this.labelElements = [];
     this.max = 5;
     this._value = 0;
-    this.disabled = false;
     this.messages = useT9n({ blocking: true });
+    this.disabled = false;
     this.readOnly = false;
     this.required = false;
     this.scale = "m";
@@ -56,12 +54,11 @@ class Rating extends LitElement {
     this.listen("pointerover", this.handleRatingPointerOver);
   }
   static {
-    this.properties = { hoverValue: [16, { state: true }], average: [11, { reflect: true, type: Number }], count: [11, { reflect: true, type: Number }], disabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], name: [3, { reflect: true }], readOnly: [7, { reflect: true, type: Boolean }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], showChip: [7, { reflect: true, type: Boolean }], status: [3, { reflect: true }], validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1, validity: [0, { attribute: false }], value: [11, { reflect: true, type: Number }] };
+    this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
   }
   static {
     this.styles = styles;
   }
-  /** The component's value. */
   get value() {
     return this._value;
   }
@@ -74,9 +71,6 @@ class Rating extends LitElement {
       }
     }
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
@@ -124,8 +118,6 @@ class Rating extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  // #endregion
-  // #region Private Methods
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
     if (this.emit) {
@@ -225,8 +217,6 @@ class Rating extends LitElement {
   getPreviousRatingValue(currentValue) {
     return currentValue === 1 ? 5 : currentValue - 1;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const countString = this.count?.toString();
     return InteractiveContainer({ disabled: this.disabled, children: html`<span class="wrapper"><fieldset class="fieldset" .disabled=${this.disabled}><legend class="visually-hidden">${this.messages.rating}</legend>${this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {

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

@@ -2,20 +2,19 @@
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Scale } from '../interfaces';
 
-/** @slot - A slot for adding custom content, primarily loading information. */
+/** @slot  - A slot for adding custom content, primarily loading information. */
 export declare class Scrim extends LitElement {
-    /** When `true`, a busy indicator is displayed. */
-    loading: boolean;
-    /** 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`, a busy indicator is displayed.
      *
-     * @private
+     * @default false
      */
+    loading: boolean;
+    /** Use this property to override individual strings used by the component. */
+    messageOverrides?: typeof this.messages._overrides;
     private messages: Partial<{
         loading: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
         loading: string;
     }>;
 }

package/dist/components/calcite-scrim/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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit-html";
@@ -25,18 +25,16 @@ class Scrim extends LitElement {
   constructor() {
     super(...arguments);
     this.resizeObserver = createObserver("resize", () => this.handleResize());
+    this.messages = useT9n();
     this.hasContent = false;
     this.loading = false;
-    this.messages = useT9n();
   }
   static {
-    this.properties = { hasContent: [16, { state: true }], loaderScale: [16, { state: true }], loading: [7, { reflect: true, type: Boolean }], messageOverrides: [0, { attribute: false }] };
+    this.properties = { hasContent: [16, {}, { state: true }], loaderScale: [16, {}, { state: true }], loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver?.observe(this.el);
@@ -45,8 +43,6 @@ class Scrim extends LitElement {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   handleDefaultSlotChange(event) {
     this.hasContent = slotChangeHasContent(event);
   }
@@ -70,8 +66,6 @@ class Scrim extends LitElement {
     }
     this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { hasContent, loading, messages } = this;
     return html`<div class=${safeClassMap(CSS.scrim)}>${loading ? html`<calcite-loader .label=${messages.loading} .scale=${this.loaderScale} ${ref(this.storeLoaderEl)}></calcite-loader>` : null}<div class=${safeClassMap(CSS.content)} .hidden=${!hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>`;

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -9,11 +9,19 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
 import { SegmentedControlItem } from '../calcite-segmented-control-item/customElement.js';
 import { Label } from '../calcite-label/customElement.js';
 
-/** @slot - A slot for adding `calcite-segmented-control-item`s. */
+/** @slot  - A slot for adding `calcite-segmented-control-item`s. */
 export declare class SegmentedControl extends LitElement {
-    /** Specifies the appearance style of the component. */
+    /**
+     * Specifies the appearance style of the component.
+     *
+     * @default "solid"
+     */
     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;
     /**
      * The `id` of the form that will be associated with the component.
@@ -21,7 +29,11 @@ export declare class SegmentedControl extends LitElement {
      * When not set, the component will be associated with its ancestor form element, if any.
      */
     form: string;
-    /** Defines the layout of the component. */
+    /**
+     * Defines the layout of the component.
+     *
+     * @default "horizontal"
+     */
     layout: Extract<"horizontal" | "vertical", Layout>;
     /**
      * Specifies the name of the component.
@@ -32,17 +44,23 @@ export declare class SegmentedControl extends LitElement {
     /**
      * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
+     *
+     * @default false
      */
     required: boolean;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * The component's selected item `HTMLElement`.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** The component's selected item `HTMLElement`. */
     readonly selectedItem: HTMLCalciteSegmentedControlItemElement;
-    /** Specifies the status of the validation message. */
+    /**
+     * Specifies the status of the validation message.
+     *
+     * @default "idle"
+     */
     status: Status;
     /** Specifies the validation icon to display under the component. */
     validationIcon: IconNameOrString | boolean;
@@ -51,16 +69,19 @@ export declare class SegmentedControl extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
     /** The component's `selectedItem` value. */
     value: string;
-    /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+    /**
+     * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+     *
+     * @default "auto"
+     */
     width: Extract<"auto" | "full", Width>;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the `calcite-segmented-control-item` selection changes. */
-    readonly calciteSegmentedControlChange: TargetedEvent<this, undefined>;
+    readonly calciteSegmentedControlChange: TargetedEvent<this, void>;
 }

package/dist/components/calcite-segmented-control/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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
@@ -19,8 +19,6 @@ const IDS = {
 };
 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}.item-wrapper{display:flex;background-color:var(--calcite-color-foreground-1);inline-size:fit-content;outline:1px solid var(--calcite-segmented-control-border-color, var(--calcite-color-border-input));outline-offset:-1px}:host([appearance=outline])>.item-wrapper{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([layout=vertical])>.item-wrapper{flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full])>.item-wrapper{inline-size:100%;min-inline-size:fit-content}:host([width=full])>.item-wrapper ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical])>.item-wrapper ::slotted(calcite-segmented-control-item){justify-content:flex-start}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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 SegmentedControl extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.items = [];
@@ -51,14 +49,11 @@ class SegmentedControl extends LitElement {
     this.listen("click", this.handleClick);
   }
   static {
-    this.properties = { appearance: [3, { reflect: true }], disabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], layout: [3, { reflect: true }], name: [3, { reflect: true }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selectedItem: [0, { attribute: false }], status: [3, { reflect: true }], validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1, validity: [0, { attribute: false }], value: 1, width: [3, { reflect: true }] };
+    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     (this.selectedItem || this.items[0])?.focus();
@@ -90,8 +85,6 @@ class SegmentedControl extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  // #endregion
-  // #region Private Methods
   valueHandler(value) {
     const { items } = this;
     items.forEach((item) => item.checked = item.value === value);
@@ -223,8 +216,6 @@ class SegmentedControl extends LitElement {
       match.focus();
     }
   }
-  // #endregion
-  // #region Rendering
   render() {
     this.el.role = "radiogroup";
     return html`<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} class=${safeClassMap(CSS.itemWrapper)}>${InteractiveContainer({ disabled: this.disabled, children: html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${HiddenFormInputSlot({ component: this })}` })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;

package/dist/components/calcite-segmented-control-item/customElement.d.ts

@@ -5,11 +5,19 @@ import { Appearance, Layout, Scale } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 
 export declare class SegmentedControlItem extends LitElement {
-    /** When `true`, the component is checked. */
+    /**
+     * When `true`, the component is checked.
+     *
+     * @default false
+     */
     checked: boolean;
     /** Specifies an icon to display at the end of the component. */
     iconEnd: IconNameOrString;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
     /** Specifies an icon to display at the start of the component. */
     iconStart: IconNameOrString;

package/dist/components/calcite-segmented-control-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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -31,25 +31,19 @@ class SegmentedControlItem extends LitElement {
     this.calciteInternalSegmentedControlItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasSlottedContent: [16, { state: true }], appearance: 1, checked: [7, { reflect: true, type: Boolean }], iconEnd: [3, { reflect: true }], iconFlipRtl: [7, { reflect: true, type: Boolean }], iconStart: [3, { reflect: true }], layout: 1, scale: 1, value: 1 };
+    this.properties = { hasSlottedContent: [16, {}, { state: true }], appearance: 1, checked: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], iconStart: [3, {}, { reflect: true }], layout: 1, scale: 1, value: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   willUpdate(changes) {
     if (changes.has("checked") && (this.hasUpdated || this.checked !== false)) {
       this.calciteInternalSegmentedControlItemChange.emit();
     }
   }
-  // #endregion
-  // #region Private Methods
   handleSlotChange(event) {
     this.hasSlottedContent = slotChangeHasContent(event);
   }
-  // #endregion
-  // #region Rendering
   renderIcon(icon, solo = false) {
     return icon ? html`<calcite-icon class=${safeClassMap({
       [CSS.icon]: true,

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

@@ -9,9 +9,13 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
 import { Option } from '../calcite-option/customElement.js';
 import { Label } from '../calcite-label/customElement.js';
 
-/** @slot - A slot for adding `calcite-option`s. */
+/** @slot  - A slot for adding `calcite-option`s. */
 export declare class Select 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 `id` of the form that will be associated with the component.
@@ -34,17 +38,23 @@ export declare class Select extends LitElement {
     /**
      * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
+     *
+     * @default false
      */
     required: boolean;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * The component's selected option `HTMLElement`.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** The component's selected option `HTMLElement`. */
     readonly selectedOption: HTMLCalciteOptionElement;
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * Specifies the status of the input field, which determines message and icons.
+     *
+     * @default "idle"
+     */
     status: Status;
     /** Specifies the validation icon to display under the component. */
     validationIcon: IconNameOrString | boolean;
@@ -53,16 +63,19 @@ export declare class Select extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
     /** The component's `selectedOption` value. */
     value: string;
-    /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+    /**
+     * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+     *
+     * @default "auto"
+     */
     width: Extract<Width, "auto" | "half" | "full">;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the `selectedOption` changes. */
-    readonly calciteSelectChange: TargetedEvent<this, undefined>;
+    readonly calciteSelectChange: TargetedEvent<this, void>;
 }

package/dist/components/calcite-select/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.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -30,8 +30,6 @@ function isOptionGroup(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
 }
 class Select extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.componentToNativeEl = /* @__PURE__ */ new Map();
@@ -60,14 +58,11 @@ class Select extends LitElement {
     this.listen("calciteInternalOptionGroupChange", this.handleOptionOrGroupChange);
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], label: 1, name: [3, { reflect: true }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selectedOption: [0, { attribute: false }], status: [3, { reflect: true }], validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1, validity: [0, { attribute: false }], value: 1, width: [3, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedOption: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     focusElement(this.selectEl);
@@ -108,8 +103,6 @@ class Select extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  // #endregion
-  // #region Private Methods
   handleInternalSelectChange() {
     const selected = this.selectEl.selectedOptions[0];
     this.selectFromNativeOption(selected);
@@ -206,8 +199,6 @@ class Select extends LitElement {
   emitChangeEvent() {
     this.calciteSelectChange.emit();
   }
-  // #endregion
-  // #region Rendering
   renderChevron() {
     return html`<div class=${safeClassMap(CSS.iconContainer)}><calcite-icon class=${safeClassMap(CSS.icon)} icon=chevron-down .scale=${getIconScale(this.scale)}></calcite-icon></div>`;
   }