refactor: update code per codemod changes

Update the codemod to fix detected bugs and to automatically apply the
required changes to have tests pass. All the changes in this commit are
automated in the codemod.

packages/calcite-components/package.json

@@ -55,9 +55,9 @@
     "directory": "packages/calcite-components"
   },
   "dependencies": {
-    "@arcgis/components-controllers": "4.32.0-next.1",
-    "@arcgis/components-utils": "4.32.0-next.1",
-    "@arcgis/lumina": "4.32.0-next.1",
+    "@arcgis/components-controllers": "4.32.0-next.7",
+    "@arcgis/components-utils": "4.32.0-next.7",
+    "@arcgis/lumina": "4.32.0-next.7",
     "@esri/calcite-ui-icons": "3.33.0-next.0",
     "@floating-ui/dom": "1.6.11",
     "@types/color": "3.0.6",
@@ -73,15 +73,16 @@
     "type-fest": "4.18.2"
   },
   "devDependencies": {
-    "@arcgis/lumina-compiler": "4.32.0-next.1",
+    "@arcgis/lumina-compiler": "4.32.0-next.7",
     "@esri/calcite-design-tokens": "2.2.1-next.4",
     "@esri/eslint-plugin-calcite-components": "1.2.2-next.0",
     "@stencil-community/eslint-plugin": "0.8.0",
     "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/ui": "2.1.2",
     "happy-dom": "^14.12.3",
     "puppeteer": "23.4.1",
     "vite": "^5.4.8",
-    "vitest": "2.1.2"
+    "vitest": "^2.1.2"
   },
   "license": "SEE LICENSE.md",
   "volta": {

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -115,7 +115,7 @@ export class AccordionItem extends LitElement implements LoadableComponent {
   // #region Events
 
   /** @notPublic */
-  calciteInternalAccordionItemClose = createEvent<void>({ cancelable: false });
+  calciteInternalAccordionItemClose = createEvent({ cancelable: false });
 
   /** @notPublic */
   calciteInternalAccordionItemSelect = createEvent<RequestedItem>({ cancelable: false });

packages/calcite-components/src/components/action-bar/action-bar.tsx

@@ -200,7 +200,7 @@ export class ActionBar extends LitElement implements LoadableComponent {
   // #region Events
 
   /** Fires when the `expanded` property is toggled. */
-  calciteActionBarToggle = createEvent<void>({ cancelable: false });
+  calciteActionBarToggle = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/action-group/action-group.tsx

@@ -46,7 +46,7 @@ export class ActionGroup extends LitElement implements LoadableComponent {
   // #region Public Properties
 
   /** Indicates number of columns. */
-  @property({ reflect: true }) columns: Columns;
+  @property({ type: Number, reflect: true }) columns: Columns;
 
   /** When `true`, the component is expanded. */
   @property({ reflect: true }) expanded = false;

packages/calcite-components/src/components/action-menu/action-menu.tsx

@@ -96,7 +96,7 @@ export class ActionMenu extends LitElement implements LoadableComponent {
 
   private menuId = `${this.guid}-menu`;
 
-  _open = false;
+  private _open = false;
 
   private slottedMenuButtonEl: Action["el"];
 
@@ -162,8 +162,11 @@ export class ActionMenu extends LitElement implements LoadableComponent {
   }
 
   set open(open: boolean) {
-    this._open = open;
-    this.openHandler(open);
+    const oldOpen = this._open;
+    if (open !== oldOpen) {
+      this._open = open;
+      this.openHandler(open);
+    }
   }
 
   /**
@@ -197,7 +200,7 @@ export class ActionMenu extends LitElement implements LoadableComponent {
   // #region Events
 
   /** Fires when the `open` property is toggled. */
-  calciteActionMenuOpen = createEvent<void>({ cancelable: false });
+  calciteActionMenuOpen = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/action-pad/action-pad.tsx

@@ -116,7 +116,7 @@ export class ActionPad extends LitElement implements LoadableComponent {
   // #region Events
 
   /** Fires when the `expanded` property is toggled. */
-  calciteActionPadToggle = createEvent<void>({ cancelable: false });
+  calciteActionPadToggle = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/alert/alert.tsx

@@ -194,16 +194,16 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
   // #region Events
 
   /** Fires when the component is requested to be closed and before the closing transition begins. */
-  calciteAlertBeforeClose = createEvent<void>({ cancelable: false });
+  calciteAlertBeforeClose = createEvent({ cancelable: false });
 
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-  calciteAlertBeforeOpen = createEvent<void>({ cancelable: false });
+  calciteAlertBeforeOpen = createEvent({ cancelable: false });
 
   /** Fires when the component is closed and animation is complete. */
-  calciteAlertClose = createEvent<void>({ cancelable: false });
+  calciteAlertClose = createEvent({ cancelable: false });
 
   /** Fires when the component is open and animation is complete. */
-  calciteAlertOpen = createEvent<void>({ cancelable: false });
+  calciteAlertOpen = createEvent({ cancelable: false });
 
   // #endregion
 
@@ -217,7 +217,7 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     }
 
     this.numberStringFormatter.numberFormatOptions = {
-      locale: this.messages._t9nLocale,
+      locale: this.messages._lang,
       numberingSystem: this.numberingSystem,
       signDisplay: "always",
     };
@@ -333,15 +333,15 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
 
   private effectiveLocaleChange(): void {
     this.numberStringFormatter.numberFormatOptions = {
-      locale: this.messages._t9nLocale,
+      locale: this.messages._lang,
       numberingSystem: this.numberingSystem,
       signDisplay: "always",
     };
   }
 
   private numberingSystemChange(): void {
     this.numberStringFormatter.numberFormatOptions = {
-      locale: this.messages._t9nLocale,
+      locale: this.messages._lang,
       numberingSystem: this.numberingSystem,
       signDisplay: "always",
     };

packages/calcite-components/src/components/block-section/block-section.tsx

@@ -91,7 +91,7 @@ export class BlockSection extends LitElement implements LoadableComponent {
   // #region Events
 
   /** Fires when the header has been clicked. */
-  calciteBlockSectionToggle = createEvent<void>({ cancelable: false });
+  calciteBlockSectionToggle = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/block/block.tsx

@@ -98,7 +98,7 @@ export class Block
   @property() heading: string;
 
   /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-  @property({ reflect: true }) headingLevel: HeadingLevel;
+  @property({ type: Number, reflect: true }) headingLevel: HeadingLevel;
 
   /** Specifies an icon to display at the end of the component. */
   @property({ reflect: true }) iconEnd: IconNameOrString;
@@ -166,23 +166,23 @@ export class Block
   // #region Events
 
   /** Fires when the component is requested to be closed and before the closing transition begins. */
-  calciteBlockBeforeClose = createEvent<void>({ cancelable: false });
+  calciteBlockBeforeClose = createEvent({ cancelable: false });
 
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-  calciteBlockBeforeOpen = createEvent<void>({ cancelable: false });
+  calciteBlockBeforeOpen = createEvent({ cancelable: false });
 
   /** Fires when the component is closed and animation is complete. */
-  calciteBlockClose = createEvent<void>({ cancelable: false });
+  calciteBlockClose = createEvent({ cancelable: false });
 
   /** Fires when the component is open and animation is complete. */
-  calciteBlockOpen = createEvent<void>({ cancelable: false });
+  calciteBlockOpen = createEvent({ cancelable: false });
 
   /**
    * Fires when the component's header is clicked.
    *
    * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.
    */
-  calciteBlockToggle = createEvent<void>({ cancelable: false });
+  calciteBlockToggle = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/button/button.e2e.ts

@@ -117,7 +117,7 @@ describe("calcite-button", () => {
     expect(elementAsButton).toBeNull();
     expect(elementAsLink).not.toBeNull();
 
-    expect(await elementAsLink.getProperty("disabled")).toBe(undefined);
+    expect(await elementAsLink.getProperty("disabled")).toBe(null);
   });
 
   it("renders as a button with default props", async () => {

packages/calcite-components/src/components/button/button.tsx

@@ -29,7 +29,6 @@ import { getIconScale } from "../../utils/component";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
-import { toAriaBoolean } from "../../utils/dom";
 import { useT9n } from "../../controllers/useT9n";
 import type { Label } from "../label/label";
 import T9nStrings from "./assets/t9n/button.t9n.en.json";
@@ -341,14 +340,14 @@ export class Button
     return (
       <InteractiveContainer disabled={this.disabled}>
         <DynamicHtmlTag
-          aria-busy={toAriaBoolean(this.loading)}
-          aria-expanded={
+          ariaBusy={this.loading}
+          ariaExpanded={
             this.el.ariaExpanded
               ? (this.el.ariaExpanded as LuminaJsx.HTMLElementTags["button"]["ariaExpanded"])
               : null
           }
-          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
-          aria-live="polite"
+          ariaLabel={!this.loading ? getLabelText(this) : this.messages.loading}
+          ariaLive="polite"
           class={{
             [CSS.buttonPadding]: noStartEndIcons,
             [CSS.buttonPaddingShrunk]: !noStartEndIcons,

packages/calcite-components/src/components/card-group/card-group.tsx

@@ -84,7 +84,7 @@ export class CardGroup extends LitElement implements InteractiveComponent, Loada
   // #region Events
 
   /** Emits when the component's selection changes and the `selectionMode` is not `none`. */
-  calciteCardGroupSelect = createEvent<void>({ cancelable: false });
+  calciteCardGroupSelect = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/card/card.tsx

@@ -145,7 +145,7 @@ export class Card extends LitElement implements InteractiveComponent, LoadableCo
   // #region Events
 
   /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */
-  calciteCardSelect = createEvent<void>({ cancelable: false });
+  calciteCardSelect = createEvent({ cancelable: false });
 
   /** @notPublic */
   calciteInternalCardKeyEvent = createEvent<KeyboardEvent>({ cancelable: false });

packages/calcite-components/src/components/carousel/carousel.tsx

@@ -122,7 +122,7 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
   @property({ reflect: true }) autoplay: AutoplayType = false;
 
   /** When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. */
-  @property({ reflect: true }) autoplayDuration = DURATION;
+  @property({ type: Number, reflect: true }) autoplayDuration = DURATION;
 
   /** Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. */
   @property({ reflect: true }) controlOverlay = false;
@@ -201,19 +201,19 @@ export class Carousel extends LitElement implements InteractiveComponent, Loadab
   // #region Events
 
   /** Fires when the selected `calcite-carousel-item` changes. */
-  calciteCarouselChange = createEvent<void>({ cancelable: false });
+  calciteCarouselChange = createEvent({ cancelable: false });
 
   /** Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content */
-  calciteCarouselPause = createEvent<void>({ cancelable: false });
+  calciteCarouselPause = createEvent({ cancelable: false });
 
   /** Fires when the carousel autoplay is invoked by the user. */
-  calciteCarouselPlay = createEvent<void>({ cancelable: false });
+  calciteCarouselPlay = createEvent({ cancelable: false });
 
   /** 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 */
-  calciteCarouselResume = createEvent<void>({ cancelable: false });
+  calciteCarouselResume = createEvent({ cancelable: false });
 
   /** Fires when the carousel autoplay state is stopped by a user. */
-  calciteCarouselStop = createEvent<void>({ cancelable: false });
+  calciteCarouselStop = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/checkbox/checkbox.tsx

@@ -164,7 +164,7 @@ export class Checkbox
   // #region Events
 
   /** Fires when the component's `checked` status changes. */
-  calciteCheckboxChange = createEvent<void>({ cancelable: false });
+  calciteCheckboxChange = createEvent({ cancelable: false });
 
   /**
    * Fires when the component is blurred.

packages/calcite-components/src/components/chip-group/chip-group.tsx

@@ -95,7 +95,7 @@ export class ChipGroup extends LitElement implements InteractiveComponent {
   // #region Events
 
   /** Fires when the component's selection changes. */
-  calciteChipGroupSelect = createEvent<void>({ cancelable: false });
+  calciteChipGroupSelect = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/chip/chip.tsx

@@ -156,19 +156,19 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
   // #region Events
 
   /** Fires when the component's close button is selected. */
-  calciteChipClose = createEvent<void>({ cancelable: false });
+  calciteChipClose = createEvent({ cancelable: false });
 
   /** Fires when the selected state of the component changes. */
-  calciteChipSelect = createEvent<void>({ cancelable: false });
+  calciteChipSelect = createEvent({ cancelable: false });
 
   /** @notPublic */
   calciteInternalChipKeyEvent = createEvent<KeyboardEvent>({ cancelable: false });
 
   /** @notPublic */
-  calciteInternalChipSelect = createEvent<void>({ cancelable: false });
+  calciteInternalChipSelect = createEvent({ cancelable: false });
 
   /** @notPublic */
-  calciteInternalSyncSelectedChips = createEvent<void>({ cancelable: false });
+  calciteInternalSyncSelectedChips = createEvent({ cancelable: false });
 
   // #endregion
 

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

@@ -117,7 +117,7 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
   // #region Events
 
   /** Emitted when the hex value changes. */
-  calciteColorPickerHexInputChange = createEvent<void>({ cancelable: false });
+  calciteColorPickerHexInputChange = createEvent({ cancelable: false });
 
   // #endregion