merge dev and resolve conflicts

.github/ISSUE_TEMPLATE/bug.yml

@@ -98,6 +98,7 @@ body:
         - label: "@esri/calcite-components"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
+        - label: "@esri/calcite-ui-icons"
         - label: "@esri/eslint-plugin-calcite-components"
     validations:
       required: false

.github/ISSUE_TEMPLATE/refactor.yml

@@ -43,6 +43,7 @@ body:
         - label: "@esri/calcite-components"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
+        - label: "@esri/calcite-ui-icons"
         - label: "@esri/eslint-plugin-calcite-components"
     validations:
       required: false

.github/workflows/deploy-latest.yml

@@ -67,15 +67,13 @@ jobs:
           npm install
           npm run build
 
-          # These git commands can be removed once we stop tracking components.d.ts
-          # For more info, see: https://github.com/Esri/calcite-design-system/pull/9011
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
           git config --global user.name "github-actions[bot]"
 
           release_commit="$(git rev-parse HEAD)"
 
           # The "|| true" prevents failure if there are no changes
-          git add packages/calcite-components/src/components.d.ts package-lock.json || true
+          git add package-lock.json || true
 
           # The release-please PR only updates when there are new deployable
           # commits, e.g., fixes, features, or breaking changes. This is fine
@@ -88,7 +86,7 @@ jobs:
           # will be up to date in the dists. The commit will be discarded once
           # the container is destroyed, and then the autogenerated files will be
           # updated in a subsequent PR.
-          git commit -m "build: update types and package-lock" || true
+          git commit -m "build(deps): update package-lock" || true
 
           npm run publish:latest
           npm run util:upload-release-assets -- "${{toJSON(steps.release.outputs.paths_released)}}"

.husky/pre-commit

@@ -1,18 +1,9 @@
 #!/usr/bin/env sh
 
-ensure_types_are_up_to_date() {
-  types_path="packages/calcite-components/src/components.d.ts"
-
-  if [ -n "$(git diff --name-only -- "$types_path")" ]; then
-    echo "Automatically staging changes to \"$types_path\""
-    git add "$types_path" >/dev/null 2>&1 || true
-  fi
-}
-
 update_stylelint_config_if_sass_file_edited() {
   staged_files="$(
     git diff --cached --name-only --diff-filter=ACM -- packages/**/*.scss
-  )" 
+  )"
 
   if [ -n "$staged_files" ]; then
     npm run util:update-stylelint-custom-sass-functions
@@ -61,7 +52,6 @@ check_ui_icon_name_consistency() {
 
 lint-staged
 check_ui_icon_name_consistency
-ensure_types_are_up_to_date
 update_stylelint_config_if_sass_file_edited
 
 exit 0

.vscode/launch.json

@@ -15,65 +15,54 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Stencil Prerender",
-      "args": [
-        "${workspaceFolder}/node_modules/@stencil/core/bin/stencil",
-        "prerender",
-        "${workspaceFolder}/dist/hydrate/index.js",
-        "--max-workers=0",
-        "--config=${workspaceFolder}/stencil.config.ts"
-      ]
+      "name": "Components E2E test {currentFile} (headful)",
+      "cwd": "${workspaceFolder}/packages/calcite-components",
+      "sourceMaps": true,
+      "args": ["${workspaceFolder}/node_modules/.bin/vitest", "run", "--no-file-parallelism", "${file}"],
+      "env": {
+        "DEVTOOLS": "true"
+      },
+      "internalConsoleOptions": "neverOpen",
+      "console": "integratedTerminal"
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug Stencil --e2e {currentFile}",
+      "name": "Components E2E test {currentFile} (headless)",
       "cwd": "${workspaceFolder}/packages/calcite-components",
       "sourceMaps": true,
-      "args": [
-        "${workspaceFolder}/node_modules/@stencil/core/bin/stencil",
-        "test",
-        "--no-docs",
-        "--no-build",
-        "--no-cache",
-        "--e2e",
-        "--devtools",
-        "--",
-        "--max-workers=0",
-        "${file}"
-      ],
+      "args": ["${workspaceFolder}/node_modules/.bin/vitest", "run", "--no-file-parallelism", "${file}"],
       "internalConsoleOptions": "neverOpen",
       "console": "integratedTerminal"
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug Stencil --spec {currentFile}",
+      "name": "Components Spec test {currentFile}",
       "cwd": "${workspaceFolder}/packages/calcite-components",
-      "sourceMaps": true,
-      "args": [
-        "${workspaceFolder}/node_modules/@stencil/core/bin/stencil",
-        "test",
-        "--no-docs",
-        "--no-build",
-        "--no-cache",
-        "--spec",
-        "--devtools",
-        "--",
-        "--max-workers=0",
-        "${file}"
-      ],
-      "skipFiles": ["<node_internals>/**"],
+      "args": ["${workspaceFolder}/node_modules/.bin/vitest", "run", "--no-file-parallelism", "${file}"],
       "internalConsoleOptions": "neverOpen",
       "console": "integratedTerminal"
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug Tokens --spec {currentFile}",
+      "name": "Components Prerender build",
+      "cwd": "${workspaceFolder}/packages/calcite-components",
+      "args": ["${workspaceFolder}/node_modules/.bin/vite", "build", "--ssr"],
+      "internalConsoleOptions": "neverOpen",
+      "console": "integratedTerminal"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Design Tokens Spec Test {currentFile}",
       "cwd": "${workspaceFolder}/packages/calcite-design-tokens",
       "sourceMaps": true,
       "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand", "${file}"],
+      "env": {
+        "NODE_OPTIONS": "--experimental-vm-modules"
+      },
       "skipFiles": ["<node_internals>/**"],
       "internalConsoleOptions": "neverOpen",
       "console": "integratedTerminal"

documentation/releasing.md

@@ -52,7 +52,7 @@ The following are some troubleshooting steps you can take if a release is unsucc
 
 1. Find the workflow run for the release [here](https://github.com/Esri/calcite-design-system/actions/workflows/deploy-latest.yml), and view the logs to find the error message.
 1. Fix the error:
-   - In some cases you can resolve the issue with a temporary solution, and then fix the CI after the release is completed. For example, if the `components.d.ts` file is outdated and breaks releases due to an unclean working tree, the [temporary solution](https://github.com/Esri/calcite-design-system/pull/9008) would be to build locally and submit a PR with the updated file. That way you won't be so time crunched when determining an [actual fix](https://github.com/Esri/calcite-design-system/pull/9011) to prevent the same error from occurring in the future. Reach out to Ben or Franco if a solution to the error isn't clear.
+   - In some cases you can resolve the issue with a temporary solution, and then fix the CI after the release is completed. Reach out to Ben or Franco if a solution to the error isn't clear.
    - If the `dev`->`main` sync failed, you may have to resolve merge conflicts locally. See the "Sync dev to main" step in the `deploy-latest.yml` workflow for the process.
    - If the release succeeded, but the cherry-pick PR wasn't created, you may need to fix merge conflicts locally.
 1. Once the PR with the fix is installed, make sure the new workflow run is passing.

examples/components/angular/.gitignore

@@ -1,6 +1,7 @@
 # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 /public/assets
+/.angular
 
 # Compiled output
 /dist

examples/components/angular/README.md

@@ -2,8 +2,6 @@
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/esri/calcite-design-system/tree/dev/examples/components/angular?file=README.md)
 
-This examples use [`@esri/calcite-components-angular`](https://www.npmjs.com/package/@esri/calcite-components-angular), which provides Angular wrappers for Calcite components.
-
 To install dependencies and start the server, run:
 
 ```sh
@@ -13,55 +11,70 @@ npm start
 
 ## Developer info
 
-To install `@esri/calcite-components-angular`, run:
+To install `@esri/calcite-components`, run:
 
 ```sh
-npm install @esri/calcite-components-angular
+npm install @esri/calcite-components
 ```
 
-This package includes the compatible version of the main component library as a dependency, so no need to install `@esri/calcite-components` separately.
-
 ### Setup components
 
-The Angular wrapper components must use Calcite component's [distribution build](https://developers.arcgis.com/calcite-design-system/get-started/#distribution). First, define the components, specifying the path to the assets:
+Import and call `setAssetPath`, which ensures translations, icons, and other required assets are available to Calcite components (more on copying assets below).
 
 ```ts
 // src/main.ts
-import { defineCustomElements } from "@esri/calcite-components/dist/loader";
-defineCustomElements(window, { resourcesUrl: "./assets" });
+import { setAssetPath } from "@esri/calcite-components/dist/components";
+
+setAssetPath(location.href);
+```
+
+Next, import the components used in your application:
+
+```ts
+// src/app/app.component.ts
+import "@esri/calcite-components/dist/components/calcite-button.js";
+import "@esri/calcite-components/dist/components/calcite-icon.js";
+import "@esri/calcite-components/dist/components/calcite-loader.js";
+import "@esri/calcite-components/dist/components/calcite-slider.js";
+```
+
+Then, import the global Calcite components stylesheet (only do this once):
+
+```css
+/* src/styles.css */
+@import "@esri/calcite-components/dist/calcite/calcite.css";
 ```
 
-To use Calcite components, add `CalciteComponentsModule` to the `imports`:
+To use Calcite components in Angular, you **must** add CUSTOM_ELEMENTS_SCHEMA to the `schemas` property:
 
 ```ts
 // src/app/app.component.ts
 import { CommonModule } from '@angular/common';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { CalciteComponentsModule } from '@esri/calcite-components-angular';
 
 @Component({
   selector: 'app-root',
   standalone: true,
+  imports: [CommonModule, RouterOutlet],
   templateUrl: './app.component.html',
-  imports: [CommonModule, CalciteComponentsModule, RouterOutlet],
   styleUrls: ['./app.component.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 ```
 
 Calcite components can now be used in your application like any other Angular component!
 
 ```html
-<!-- app.component.html -->
+<!-- src/app/app.component.html -->
 <calcite-slider min="1" max="100" [value]="sliderValue" (calciteSliderInput)="onSliderInput($event)"></calcite-slider>
 ```
 
-Lastly, import the global Calcite components stylesheet (only do this once):
-
-```css
-/* src/styles.css */
-@import "@esri/calcite-components/dist/calcite/calcite.css";
-```
-
 ### Copy the assets
 
 Calcite components' assets need to be copied to the `./public` directory when [using assets](https://developers.arcgis.com/calcite-design-system/get-started/#load-the-assets) locally. This example has a `copy` npm script, which will automatically run after installing dependencies. For example:

examples/components/angular/angular.json

@@ -83,5 +83,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }