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

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

@@ -5,17 +5,37 @@ import { InteractiveComponent } from '../../utils/interactive';
 import { CarouselItem } from '../calcite-carousel-item/customElement.js';
 import { ArrowType, AutoplayType } from './interfaces';
 
-/** @slot - A slot for adding `calcite-carousel-item`s. */
+/** @slot  - A slot for adding `calcite-carousel-item`s. */
 export declare class Carousel extends LitElement {
-    /** Specifies how and if the "previous" and "next" arrows are displayed. */
+    /**
+     * Specifies how and if the "previous" and "next" arrows are displayed.
+     *
+     * @default "inline"
+     */
     arrowType: ArrowType;
-    /** When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. */
+    /**
+     * When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed.
+     *
+     * @default false
+     */
     autoplay: AutoplayType;
-    /** When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. */
+    /**
+     * When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.
+     *
+     * @default 6000
+     */
     autoplayDuration: number;
-    /** Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. */
+    /**
+     * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.
+     *
+     * @default false
+     */
     controlOverlay: 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;
     /**
      * Accessible name for the component.
@@ -25,11 +45,24 @@ export declare class Carousel extends LitElement {
     label: 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
-     */
+    /** The component's selected `calcite-carousel-item`. */
+    readonly selectedItem: HTMLCalciteCarouselItemElement;
+    /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
+    play(): Promise<void>;
+    /** Sets focus on the component. */
+    setFocus(): Promise<void>;
+    /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
+    stop(): Promise<void>;
+    /** Fires when the selected `calcite-carousel-item` changes. */
+    readonly calciteCarouselChange: TargetedEvent<this, void>;
+    /** Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content */
+    readonly calciteCarouselPause: TargetedEvent<this, void>;
+    /** Fires when the carousel autoplay is invoked by the user. */
+    readonly calciteCarouselPlay: TargetedEvent<this, void>;
+    /** Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content */
+    readonly calciteCarouselResume: TargetedEvent<this, void>;
+    /** Fires when the carousel autoplay state is stopped by a user. */
+    readonly calciteCarouselStop: TargetedEvent<this, void>;
     private messages: Partial<{
         previous: string;
         next: string;
@@ -37,7 +70,7 @@ export declare class Carousel extends LitElement {
         pause: string;
         carousel: string;
         carouselItemProgress: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
         previous: string;
         next: string;
         play: string;
@@ -45,26 +78,4 @@ export declare class Carousel extends LitElement {
         carousel: string;
         carouselItemProgress: string;
     }>;
-    /**
-     * The component's selected `calcite-carousel-item`.
-     *
-     * @readonly
-     */
-    readonly selectedItem: HTMLCalciteCarouselItemElement;
-    /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
-    play(): Promise<void>;
-    /** Sets focus on the component. */
-    setFocus(): Promise<void>;
-    /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
-    stop(): Promise<void>;
-    /** Fires when the selected `calcite-carousel-item` changes. */
-    readonly calciteCarouselChange: TargetedEvent<this, undefined>;
-    /** Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content */
-    readonly calciteCarouselPause: TargetedEvent<this, undefined>;
-    /** Fires when the carousel autoplay is invoked by the user. */
-    readonly calciteCarouselPlay: TargetedEvent<this, undefined>;
-    /** Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content */
-    readonly calciteCarouselResume: TargetedEvent<this, undefined>;
-    /** Fires when the carousel autoplay state is stopped by a user. */
-    readonly calciteCarouselStop: TargetedEvent<this, undefined>;
 }

package/dist/components/calcite-carousel/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 { repeat } from "lit-html/directives/repeat.js";
@@ -81,6 +81,7 @@ class Carousel extends LitElement {
         this.slideDurationRemaining = time;
       }
     };
+    this.messages = useT9n();
     this.direction = "standby";
     this.items = [];
     this.maxItems = centerItemsByBreakpoint.xxsmall;
@@ -95,7 +96,6 @@ class Carousel extends LitElement {
     this.autoplayDuration = DURATION;
     this.controlOverlay = false;
     this.disabled = false;
-    this.messages = useT9n();
     this.calciteCarouselChange = createEvent({ cancelable: false });
     this.calciteCarouselPause = createEvent({ cancelable: false });
     this.calciteCarouselPlay = createEvent({ cancelable: false });
@@ -103,34 +103,27 @@ class Carousel extends LitElement {
     this.calciteCarouselStop = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { direction: [16, { state: true }], items: [16, { state: true }], maxItems: [16, { state: true }], playing: [16, { state: true }], selectedIndex: [16, { state: true }], slideDurationRemaining: [16, { state: true }], suspendedDueToFocus: [16, { state: true }], suspendedDueToHover: [16, { state: true }], suspendedSlideDurationRemaining: [16, { state: true }], userPreventsSuspend: [16, { state: true }], arrowType: [3, { reflect: true }], autoplay: [3, { reflect: true }], autoplayDuration: [11, { type: Number, reflect: true }], controlOverlay: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, { attribute: false }], paused: [5, { type: Boolean }], selectedItem: [0, { attribute: false }] };
+    this.properties = { direction: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
   async play() {
     if (this.playing || this.autoplay !== "" && !this.autoplay && this.autoplay !== "paused") {
       return;
     }
     this.handlePlay(true);
   }
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.container?.focus();
   }
-  /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
   async stop() {
     if (!this.playing) {
       return;
     }
     this.handlePause(true);
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver?.observe(this.el);
@@ -164,8 +157,6 @@ class Carousel extends LitElement {
     this.clearIntervals();
     this.resizeObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   autoplayWatcher(autoplay) {
     if (!autoplay) {
       this.handlePause(false);
@@ -412,8 +403,6 @@ class Carousel extends LitElement {
   storeItemContainerRef(el) {
     this.itemContainer = el;
   }
-  // #endregion
-  // #region Rendering
   renderRotationControl() {
     const text = this.playing ? this.messages.pause : this.messages.play;
     const formattedValue = this.slideDurationRemaining * 100;

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

@@ -1,7 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 
-/** @slot - A slot for adding content. */
+/** @slot  - A slot for adding content. */
 export declare class CarouselItem extends LitElement {
     /**
      * Accessible name for the component.
@@ -9,6 +9,10 @@ export declare class CarouselItem extends LitElement {
      * @required
      */
     label: string;
-    /** When `true`, the component is selected. */
+    /**
+     * When `true`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
 }

package/dist/components/calcite-carousel-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 { html } from "lit-html";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
@@ -18,13 +18,11 @@ class CarouselItem extends LitElement {
     this.selected = false;
   }
   static {
-    this.properties = { label: 1, selected: [7, { reflect: true, type: Boolean }] };
+    this.properties = { label: 1, selected: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const id = this.el.id || this.guid;
     setAttribute(this.el, "id", id);

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

@@ -7,9 +7,17 @@ import { Scale, Status } from '../interfaces';
 import { Label } from '../calcite-label/customElement.js';
 
 export declare class Checkbox 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.
@@ -23,6 +31,7 @@ export declare class Checkbox extends LitElement {
      * The state is visual only, and can look different across browsers.
      *
      * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
+     * @default false
      */
     indeterminate: boolean;
     /** Accessible name for the component. */
@@ -36,16 +45,25 @@ export declare class Checkbox 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. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** 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;
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
@@ -54,5 +72,5 @@ export declare class Checkbox extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the component's `checked` status changes. */
-    readonly calciteCheckboxChange: TargetedEvent<this, undefined>;
+    readonly calciteCheckboxChange: TargetedEvent<this, void>;
 }

package/dist/components/calcite-checkbox/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 { svg, html } from "lit-html";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -18,8 +18,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([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size--1));block-size:var(--calcite-checkbox-size, var(--calcite-font-size--1))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;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;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{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))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media (forced-colors: active){.check-svg{border:1px solid currentColor}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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 Checkbox extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
@@ -55,14 +53,11 @@ class Checkbox 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 }], hovered: [7, { reflect: true, type: Boolean }], indeterminate: [7, { reflect: true, type: Boolean }], label: 1, name: [3, { reflect: true }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], status: [3, { reflect: true }], validity: [0, { attribute: false }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.toggleEl.value?.focus();
@@ -80,8 +75,6 @@ class Checkbox extends LitElement {
     disconnectLabel(this);
     disconnectForm(this);
   }
-  // #endregion
-  // #region Private Methods
   syncHiddenFormInput(input) {
     input.type = "checkbox";
   }
@@ -111,8 +104,6 @@ class Checkbox extends LitElement {
   onToggleFocus() {
     this.calciteInternalCheckboxFocus.emit(true);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const rtl = getElementDir(this.el) === "rtl";
     return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap({

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

@@ -7,25 +7,53 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
 import { ChipGroup } from '../calcite-chip-group/customElement.js';
 
 /**
- * @slot - A slot for adding text.
- * @slot image - A slot for adding an image.
+ * @slot  - A slot for adding text.
+ * @slot [image] - A slot for adding an image.
  */
 export declare class Chip 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`, a close button is added to the component. */
+    /**
+     * When `true`, a close button is added to the component.
+     *
+     * @default false
+     */
     closable: boolean;
-    /** When `true`, hides the component. */
+    /**
+     * When `true`, hides the component.
+     *
+     * @default false
+     */
     closed: boolean;
-    /** When `true`, the component closes when the Delete or Backspace key is pressed while focused. */
+    /**
+     * When `true`, the component closes when the Delete or Backspace key is pressed while focused.
+     *
+     * @default false
+     */
     closeOnDelete: 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. */
     icon: 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 the kind of the component, which will apply to border and background if applicable. */
+    /**
+     * Specifies the kind of the component, which will apply to border and background if applicable.
+     *
+     * @default "neutral"
+     */
     kind: Extract<"brand" | "inverse" | "neutral", Kind>;
     /**
      * Accessible name for the component.
@@ -36,25 +64,28 @@ export declare class Chip 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
+     * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value.
      *
-     * @private
+     * @default "m"
      */
-    private messages: Partial<{
-        dismissLabel: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        dismissLabel: string;
-    }>;
-    /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */
     scale: Scale;
-    /** When `true`, the component is selected. */
+    /**
+     * When `true`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
     /** The component's value. */
     value: any;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the component's close button is selected. */
-    readonly calciteChipClose: TargetedEvent<this, undefined>;
+    readonly calciteChipClose: TargetedEvent<this, void>;
     /** Fires when the selected state of the component changes. */
-    readonly calciteChipSelect: TargetedEvent<this, undefined>;
+    readonly calciteChipSelect: TargetedEvent<this, void>;
+    private messages: Partial<{
+        dismissLabel: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        dismissLabel: string;
+    }>;
 }

package/dist/components/calcite-chip/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 { isServer, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -40,12 +40,11 @@ const ICONS = {
 };
 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:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]) .close,:host([appearance=outline-fill]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand))}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]){--calcite-internal-chip-background-color: transparent}:host([appearance=outline-fill]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]){--calcite-internal-chip-border-color: transparent}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{outline-color:var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=inverse]) .close:hover{background-color:var(--calcite-color-inverse-hover)}:host([appearance=solid]):host([kind=inverse]) .close:active{background-color:var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([kind=neutral]) .close{color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)))}:host([selected]) .select-icon{opacity:1}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-border-3)}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-inverse-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-brand-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline-fill]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press)}:host([scale=s]) .container{--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: var(--calcite-size-xs, 1rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-image-size: var(--calcite-spacing-xl, 1.25rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-close-size: var(--calcite-size-xs, 1rem) }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container{--calcite-internal-chip-block-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-image-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-close-size: var(--calcite-size-sm, 1.5rem) }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: var(--calcite-size-md, 2rem) }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-internal-chip-background-color);border-color:var(--calcite-internal-chip-border-color);border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:var(--calcite-opacity-full, 1)}.container.selectable{cursor:pointer}.container.selectable:hover{background-color:var(--calcite-internal-chip-selectable-hover-background-color);border-color:var(--calcite-internal-chip-selectable-hover-border-color)}.container.selectable:active{background-color:var(--calcite-internal-chip-selectable-active-background-color);border-color:var(--calcite-internal-chip-selectable-active-border-color)}.container:not(.non-interactive):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))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:var(--calcite-spacing-none, 0)}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));padding-inline-start:var(--calcite-spacing-none, 0);padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));padding-inline:var(--calcite-internal-chip-icon-space, var(--calcite-spacing-xs, .375rem))}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:var(--calcite-opacity-half, .5);color:var(--calcite-chip-select-icon-color-press, var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor)))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem))}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.close{margin:0;cursor:pointer;align-items:center;border-radius:50%;border-style:none;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;background-color:var(--calcite-close-background-color, var(--calcite-color-transparent));-webkit-appearance:none;display:flex;align-content:center;justify-content:center;color:var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));block-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-close-size, var(--calcite-spacing-xxl, 1.5rem));padding:0}.close:hover,.close:focus{background-color:var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover))}.close: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))))}.close:active{background-color:var(--calcite-close-background-color-press, var(--calcite-color-transparent-press))}.close calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Chip extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.closeButtonEl = createRef();
     this.containerEl = createRef();
+    this.messages = useT9n();
     this.hasImage = false;
     this.hasText = false;
     this.appearance = "solid";
@@ -56,7 +55,6 @@ class Chip extends LitElement {
     this.iconFlipRtl = false;
     this.interactive = false;
     this.kind = "neutral";
-    this.messages = useT9n();
     this.scale = "m";
     this.selected = false;
     this.selectionMode = "none";
@@ -69,14 +67,11 @@ class Chip extends LitElement {
     this.listen("click", this.clickHandler);
   }
   static {
-    this.properties = { hasImage: [16, { state: true }], hasText: [16, { state: true }], appearance: [3, { reflect: true }], closable: [7, { reflect: true, type: Boolean }], closed: [7, { reflect: true, type: Boolean }], closeOnDelete: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], icon: [3, { reflect: true }], iconFlipRtl: [7, { reflect: true, type: Boolean }], interactive: [5, { type: Boolean }], kind: [3, { reflect: true }], label: 1, messageOverrides: [0, { attribute: false }], parentChipGroup: [0, { attribute: false }], scale: [3, { reflect: true }], selected: [7, { reflect: true, type: Boolean }], selectionMode: 1, value: 1 };
+    this.properties = { hasImage: [16, {}, { state: true }], hasText: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], closeOnDelete: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], parentChipGroup: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, value: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     if (!this.disabled && this.interactive) {
@@ -103,8 +98,6 @@ class Chip extends LitElement {
       this.handleSelectionPropertyChange(this.selected);
     }
   }
-  // #endregion
-  // #region Private Methods
   watchSelected(selected) {
     if (this.selectionMode === "none") {
       return;
@@ -178,8 +171,6 @@ class Chip extends LitElement {
       this.calciteInternalSyncSelectedChips.emit();
     }
   }
-  // #endregion
-  // #region Rendering
   renderChipImage() {
     return html`<div class=${safeClassMap(CSS.imageContainer)}><slot name=${SLOTS.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
   }

package/dist/components/calcite-chip-group/customElement.d.ts

@@ -5,9 +5,13 @@ import { InteractiveComponent } from '../../utils/interactive';
 import { Scale, SelectionMode } from '../interfaces';
 import { Chip } from '../calcite-chip/customElement.js';
 
-/** @slot - A slot for adding one or more `calcite-chip`s. */
+/** @slot  - A slot for adding one or more `calcite-chip`s. */
 export declare class ChipGroup 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;
     /**
      * Accessible name for the component.
@@ -15,13 +19,13 @@ export declare class ChipGroup extends LitElement {
      * @required
      */
     label: string;
-    /** Specifies the size of the component. Child `calcite-chip`s inherit the component's value. */
-    scale: Scale;
     /**
-     * Specifies the component's selected items.
+     * Specifies the size of the component. Child `calcite-chip`s inherit the component's value.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** Specifies the component's selected items. */
     readonly selectedItems: HTMLCalciteChipElement[];
     /**
      * Specifies the selection mode of the component, where:
@@ -33,10 +37,12 @@ export declare class ChipGroup extends LitElement {
      * `"single-persist"` allows one selection and prevents de-selection, and
      *
      * `"none"` does not allow any selections.
+     *
+     * @default "none"
      */
     selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
     /** Fires when the component's selection changes. */
-    readonly calciteChipGroupSelect: TargetedEvent<this, undefined>;
+    readonly calciteChipGroupSelect: TargetedEvent<this, void>;
 }

package/dist/components/calcite-chip-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";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -11,8 +11,6 @@ import { c as componentFocusable } from "../../chunks/component.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}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class ChipGroup extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.items = [];
@@ -29,14 +27,11 @@ class ChipGroup extends LitElement {
     this.listen("calciteInternalSyncSelectedChips", this.calciteInternalSyncSelectedChips);
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], label: 1, scale: [3, { reflect: true }], selectedItems: [0, { attribute: false }], selectionMode: [3, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     if (!this.disabled) {
@@ -51,8 +46,6 @@ class ChipGroup extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   calciteInternalChipKeyEventListener(event) {
     if (event.composedPath().includes(this.el)) {
       const interactiveItems = this.items?.filter((el) => !el.disabled);
@@ -149,8 +142,6 @@ class ChipGroup extends LitElement {
       this.calciteChipGroupSelect.emit();
     }
   }
-  // #endregion
-  // #region Rendering
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
     const { disabled } = this;