Merge branch 'next' of github.com:klaascuvelier/carbon-components-angular into cca6-eslint-migration

* 'next' of github.com:klaascuvelier/carbon-components-angular:
  fix: set id to popover content and aria-live attribute (carbon-design-system#3110)
  feat: add new menu based components (carbon-design-system#3106)
  feat: convert components to use OnPush change detection strategy 2 (carbon-design-system#3100)
  docs: add updated getting started steps  (carbon-design-system#3107)
  chore(deps-dev): bump serialize-javascript from 6.0.1 to 6.0.2 (carbon-design-system#3104)
  chore(deps-dev): bump store2 from 2.14.2 to 2.14.4 (carbon-design-system#3095)
  chore(deps-dev): bump serialize-javascript from 6.0.1 to 6.0.2 in /integration/ng17 (carbon-design-system#3103)
  fix: pass autoAlign property to icon button (carbon-design-system#3101)
  ci: bump deprecated version of GH action and resolve integration test build issue (carbon-design-system#3102)
  fix: set publish config access to 'public' (carbon-design-system#3098)
  fix: add publish config to library (dist) package.json (carbon-design-system#3097)
  feat: create npmrc file to enable publishing with provenance
  ci: bump github actions to latest version
  fix: typing for loading translation strings (carbon-design-system#3077)

Author: klaascuvelier

.github/workflows/codeql.yml

@@ -14,13 +14,13 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
-        languages: javascript
+        languages: javascript-typescript
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/publish.yml

@@ -25,11 +25,11 @@ jobs:
     steps:
       # Checkout to branch
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Set up node to use v20
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: "npm"

.github/workflows/test.yml

@@ -16,9 +16,9 @@ jobs:
         node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm i

README.md

@@ -29,20 +29,37 @@ Assuming we're starting with a new @angular/cli project:
 ```shell
 $ npx @angular/cli new my-project --style=scss
 $ cd my-project
-$ npm i --save carbon-components-angular @carbon/styles
+$ npm i --save carbon-components-angular @carbon/styles @carbon/icons
 ```
 
-Then we need to include carbon-components in `src/styles.scss`:
+Next, we need to include carbon styles in `src/styles.scss`:
 
 ```scss
-@use "@carbon/styles";
+@use '@carbon/styles/scss/config' with (
+	// Use flexbox for grid - stick to CSS Grid or Flexbox
+	// CSS Grid has become the default grid system in v11
+	$use-flexbox-grid: true,
+	// Update path of fonts to exclude tilde, required for vite (Angular 16+)
+	$font-path: '@ibm/plex'
+);
+
+@use '@carbon/styles';
+
+// Import css variables in root
+html {
+	@include styles.theme(styles.$white);
+}
 ```
 
-> *Note:* For offline usage we'll need to set `$font-path: '~carbon-components/src/globals/fonts';` at the very top of our `src/styles.scss`. This will copy the fonts to our `dist` folder upon successful build. If you like the fonts to be a part of your `assets` folder and not pollute the `dist` folder then copy the fonts from `node_modules/carbon-components/src/globals/fonts` into our app's `src/assets/fonts` folder and add `$font-path: '/assets/fonts/';` at the very top of our `src/styles.scss`.
+Then we need to declare `@carbon/icons` as a module by creating a `module.d.ts` file (or use any existing declaration file - has `.d.ts` suffix) in your src directory:
+
+```ts
+declare module '@carbon/icons/*';
+```
 
 That's it! Now we can run `npm start` and start building out our application!
 
-> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` scss is our recommended setup.
+> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `@carbon/styles` scss is our recommended setup.
 
 [![Edit Carbon Components Angular](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/stackblitz-starters-exxkq4?file=src%2Fmain.ts)
 
@@ -172,4 +189,4 @@ This package uses IBM Telemetry to collect de-identified and anonymized metrics
 this package as a dependency you are agreeing to telemetry collection. To opt out, see
 [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
 For more information on the data being collected, please see the
-[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).