@db-ux/ngx-core-components 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/ngx-core-components
 
+## 4.10.0
+
+### Minor Changes
+
+- feat(`DBAccordionItem`): add `open` prop to control the expanded state of an accordion item programmatically. - [see commit 8e7c85d](https://github.com/db-ux-design-system/core-web/commit/8e7c85dfba9e0b013fce9db2151545b8f336a29a)
+
+- refactor(form components): replace hard 25ch label width limit with customizable CSS variable `--db-label-max-size` (defaults to `100%`). To restore the previous behavior, set `--db-label-max-size: 25ch;` in your project styles. - [see commit 08b1234](https://github.com/db-ux-design-system/core-web/commit/08b1234342e3c0d622116d528a979ff53d7e2356)
+
+## 4.9.1
+
+### Patch Changes
+
+- fix(switch): use `2lh` unit and add `min-inline-size` to prevent track from shrinking - [see commit 78c9fde](https://github.com/db-ux-design-system/core-web/commit/78c9fde67d9677f61eaa41761a088b9c1a9773a1)
+
+- fix(notification): remove empty grid gap when icon is hidden - [see commit 96f94c6](https://github.com/db-ux-design-system/core-web/commit/96f94c651391f014e2d073402c2700b524ccbf5e)
+
 ## 4.9.0
 
 ### Minor Changes
@@ -199,7 +215,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-          - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+                      - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/README.md

@@ -6,52 +6,55 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
 
 An Angular library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
-
-> **Note:** Find more information about specific components [here](https://design-system.deutschebahn.com/core-web/review/main)
+We also provide more information about specific components. This information is in our [Design System documentation](https://design-system.deutschebahn.com/documentation/get-started/).
 
 ## Install
 
 ```shell
-npm i @db-ux/ngx-core-components
+pnpm add @db-ux/ngx-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
 ```
 
-> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
-
 ## Styling Dependencies
 
-Import the styles in `scss` or `css`. Based on your technology the file names could be different.
+Import the styles in your main CSS file:
+
+```css
+/* styles.css */
+@layer whitelabel-theme, db-ux;
+/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
+@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
+	layer(whitelabel-theme);
+
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
+```
 
-- Default (relative): points to `../assets`
-- Rollup (rollup): points to `@db-ux/core-foundations/assets`
-- Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+### PostCSS Plugin (recommended)
 
-<details>
-  <summary><strong>SCSS</strong></summary>
+We recommend using the [`@db-ux/core-postcss-plugin`](https://www.npmjs.com/package/@db-ux/core-postcss-plugin) to reduce your bundle size. It flattens CSS custom properties by resolving `var()`, `calc()`, `color-mix()`, and `light-dark()` at build time, removing unused declarations.
 
-```scss styles.scss
-// styles.scss
-@forward "@db-ux/core-components/build/styles/rollup";
+```shell
+pnpm add @db-ux/core-postcss-plugin --save-dev
 ```
 
-</details>
-<details>
-  <summary><strong>CSS</strong></summary>
+Create a `postcss.config.json` in your project root:
 
-```css styles.css
-/* styles.css */
-@import "@db-ux/core-components/build/styles/rollup.css";
+```json
+{
+	"plugins": {
+		"@db-ux/core-postcss-plugin": {}
+	}
+}
 ```
 
-</details>
+> Angular CLI (`@angular/build:application`) only supports JSON-based PostCSS configs and loads plugins by name via `require()`. Works in both `ng build` and `ng serve`.
 
-> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
+📖 **[Learn more about `@db-ux/core-postcss-plugin` node package](https://www.npmjs.com/package/@db-ux/core-postcss-plugin)**
 
 ### Resolve assets
 
 The current default development config in `angular.json` doesn't use output hashing. This may cause an issue loading the fonts. Look at [this](https://github.com/angular/angular-cli/issues/26347) for more information.
 
-As a solution add `
-"outputHashing": "media"` to `configurations/development` in`angular.json`.
+As a solution add `"outputHashing": "media"` to `configurations/development` in `angular.json`.
 
 ### DB Theme
 
@@ -59,8 +62,8 @@ In case that you're building a website or application for Deutsche Bahn, you'll
 
 ## Usage
 
-```ts app.component.ts
-//app.component.ts
+```ts
+// app.component.ts
 import { DBButton } from '@db-ux/ngx-core-components';
 
 @Component({
@@ -68,13 +71,13 @@ import { DBButton } from '@db-ux/ngx-core-components';
 	imports: [
 		// ...,
 		DBButton
-    ],
+	],
 	standalone: true
 	// ...
 })
 ```
 
-```html app.component.html
+```html
 <!-- app.component.html -->
 <db-button variant="brand">Button</db-button>
 ```
@@ -83,7 +86,7 @@ import { DBButton } from '@db-ux/ngx-core-components';
 
 There are 3 ways to use Events in Angular:
 
-**[ngModel](https://angular.io/api/forms/NgModel)**
+**[ngModel](https://angular.dev/api/forms/NgModel)**
 
 ```html
 <db-input
@@ -93,7 +96,7 @@ There are 3 ways to use Events in Angular:
 ></db-input>
 ```
 
-**[FormControl](https://angular.io/api/forms/FormControl)**
+**[FormControl](https://angular.dev/api/forms/FormControl)**
 
 ```html
 <db-input
@@ -103,7 +106,7 @@ There are 3 ways to use Events in Angular:
 ></db-input>
 ```
 
-**[change](https://developer.mozilla.org/de/docs/Web/API/HTMLElement/change_event)**
+**[change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)**
 
 ```html
 <db-input
@@ -127,7 +130,7 @@ npx @db-ux/agent-cli
 
 This will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.
 
-📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
+📖 **[Learn more about `@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli)**
 
 ## Code Quality
 
@@ -136,7 +139,7 @@ To enforce correct usage of DB UX Design System components in your Angular templ
 ### Installation
 
 ```shell
-npm install eslint @db-ux/core-eslint-plugin @angular-eslint/template-parser --save-dev
+pnpm add eslint @db-ux/core-eslint-plugin @angular-eslint/template-parser --save-dev
 ```
 
 ### Setup
@@ -162,6 +165,35 @@ export default [
 
 📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**
 
+## Stylelint
+
+To validate correct usage of DB UX Design System tokens in your CSS/SCSS, use the [`@db-ux/core-stylelint`](https://www.npmjs.com/package/@db-ux/core-stylelint) plugin.
+
+### Installation
+
+```shell
+pnpm add stylelint @db-ux/core-stylelint --save-dev
+```
+
+### Setup
+
+Add to your `.stylelintrc.json`:
+
+```json
+{
+	"plugins": ["@db-ux/core-stylelint"],
+	"rules": {
+		"db-ux/use-spacings": [true],
+		"db-ux/use-sizing": [true],
+		"db-ux/use-border-width": [true],
+		"db-ux/use-border-radius": [true],
+		"db-ux/use-border-color": [true]
+	}
+}
+```
+
+📖 **[Learn more about `@db-ux/core-stylelint` node package](https://www.npmjs.com/package/@db-ux/core-stylelint)**
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.