@db-ux/core-components 4.5.4 → 4.6.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @db-ux/core-components
 
+## 4.6.1
+
+### Patch Changes
+
+- fix(navigation): issue with changed transform inside drawer lead to broken sub-navigation for mobile view - [see commit 1762975](https://github.com/db-ux-design-system/core-web/commit/17629755c0c249808c0bb69686f167677d4181ee)
+
+## 4.6.0
+
+### Minor Changes
+
+- refactor: exclude whitelabel-theme from default bundle to reduce size and to align with "how to import a theme" - [see commit f272967](https://github.com/db-ux-design-system/core-web/commit/f272967acb7a37dc9b07d9786134e437b284e9b6)
+
+### Patch Changes
+
+- fix: issue with tailwind duplicating some classes by using `@theme` inline - [see commit 92de4e6](https://github.com/db-ux-design-system/core-web/commit/92de4e6e5fdad3be5629d7457944d3b9b7396cf4)
+
+- fix: the drawer ignored custom `max-width` and `max-height` properties due to internal `min-width` overrides. Additionally, resolved a bug where nested fixed-position elements (like DBCustomSelect dropdowns) were incorrectly positioned while the drawer was open. - [see commit d40e651](https://github.com/db-ux-design-system/core-web/commit/d40e6516c147c5e0f62bd049cf9bc1928ed6b36f)
+
+- docs(vite): mentioning version 8 configuration in `README.md` file - [see commit 4c5fc92](https://github.com/db-ux-design-system/core-web/commit/4c5fc9266402d9585087f4738a1a800cff1515f1)
+
+- fix(number input): prevent from clearing on intermediate decimal entry - [see commit aa85967](https://github.com/db-ux-design-system/core-web/commit/aa85967ffeaa685f6b647069d0e1d415d812dc87):
+    - fix(input,textarea): allow using `undefined` as `value`
+
 ## 4.5.4
 
 ### Patch Changes
@@ -139,14 +162,14 @@ _version bump_
 - refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
 
 - fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
-  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+    - feat(DBCustomSelect): introduce new property `selectedPrefix`
 
 ### Patch Changes
 
 - fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
-  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
-  - This listener detects form resets and updates the component's internal value/checked state accordingly.
-  - > **Note**: This does not work for `ngModel` in Angular.
+    - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+    - This listener detects form resets and updates the component's internal value/checked state accordingly.
+    - > **Note**: This does not work for `ngModel` in Angular.
 
 - fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
 
@@ -169,7 +192,7 @@ _version bump_
 ### Patch Changes
 
 - chore: update instructions files for better copilot outputs - [see commit e4bc905](https://github.com/db-ux-design-system/core-web/commit/e4bc90508479387371d816d5776f9f568aa5fb82):
-  - fix: add some missing variables
+    - fix: add some missing variables
 
 - fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 34c78df](https://github.com/db-ux-design-system/core-web/commit/34c78dffd4f43b0ac740574358b426a562e05cd0)
 
@@ -184,9 +207,9 @@ _version bump_
 ### Major Changes
 
 - feat: Switch stable rework - [see commit cb2deb0](https://github.com/db-ux-design-system/core-web/commit/cb2deb0f1c54900d1967483aea05d81279c02f59):
-  - **BREAKING CHANGE**: remove `emphasis` property
-  - introduce validation (invalid and valid)
-  - configurable label position
+    - **BREAKING CHANGE**: remove `emphasis` property
+    - introduce validation (invalid and valid)
+    - configurable label position
 
 - **BREAKING CHANGE**: refactor(Custom Select): renamed `ariaListLabel` property to `listLabel` - [see commit 966d5ad](https://github.com/db-ux-design-system/core-web/commit/966d5ad01f00d0ca1707cc316a63e2d431fff1e9)
 
@@ -205,12 +228,12 @@ _version bump_
 ### Patch Changes
 
 - fix(DBTabs): ensure navigation arrows appear correctly on window resize - [see commit 4e65e00](https://github.com/db-ux-design-system/core-web/commit/4e65e00d280cae18baee03b5a7a9b13eec063835):
-  - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
+    - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
 
 - fix(select): jumping placeholder for label above - [see commit 7ed8d22](https://github.com/db-ux-design-system/core-web/commit/7ed8d2225102e0e9044437e95917e11eef4bc73f)
 
 - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
-  - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
+    - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
 
 ## 3.1.17
 
@@ -218,17 +241,17 @@ _version bump_
 
 - fix: color mode for textarea resizer control set by color-mode-switch documentation UI component - [see commit 354e270](https://github.com/db-ux-design-system/core-web/commit/354e27029a4378288a97ed5e31b75c11758f0c01)
 - refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`) - [see commit 4826455](https://github.com/db-ux-design-system/core-web/commit/4826455637590b6ae780afb93abb9effe9380342)
-  - @db-ux/core-foundations@3.1.17
+    - @db-ux/core-foundations@3.1.17
 
 ## 3.1.16
 
 ### Patch Changes
 
 - a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
-  - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
-  - Now, all options are accessible via keyboard regardless of group boundaries.
+    - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
+    - Now, all options are accessible via keyboard regardless of group boundaries.
 - fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
-  - @db-ux/core-foundations@3.1.16
+    - @db-ux/core-foundations@3.1.16
 
 ## 3.1.15
 
@@ -237,4 +260,4 @@ _version bump_
 - 262964b: fix(Switch): double event firing with Angular signals
 - 262964b: fix(CustomSelect): tags remaining visible when form values are reset
 - 262964b: fix(CustomSelect): custom removeTagsTexts are not applied correctly
-  - @db-ux/core-foundations@3.1.15
+    - @db-ux/core-foundations@3.1.15

package/README.md

@@ -27,7 +27,7 @@ If you just need the styling follow this:
 
 **✅ Do I need foundations if I install components?**
 
-**No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to install one package:
+**No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to include one package:
 
 - **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.)
 - **Use `@db-ux/core-foundations`** - If you only need design tokens, colors, spacing, fonts, and assets without any component styles
@@ -36,11 +36,11 @@ If you just need the styling follow this:
 
 `npm i @db-ux/core-components`
 
-> **Note**: This automatically includes `@db-ux/core-foundations` as a dependency, so you don't need to install it separately.
+> **Note**: This automatically includes `@db-ux/core-foundations` as a dependency, if you use `npm`. If you use `pnpm` you need to install `@db-ux/core-foundations` as well.
 
 ## Styling Dependencies
 
-Import the styles in `scss` or `css`. Based on your technology the file names could be different.
+Import the styles in `css`. Based on your technology the file names could be different.
 
 - `relative`: asset path point to `../assets`
 - `webpack`: asset path point to `~@db-ux/core-foundations/assets`
@@ -48,27 +48,52 @@ Import the styles in `scss` or `css`. Based on your technology the file names co
 
 **Important**: These bundled files automatically include **all dependencies from [foundations](https://www.npmjs.com/package/@db-ux/core-foundations)** (design tokens, colors, fonts, etc.) **and all [components](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss)** - everything you need in one import!
 
-**SCSS**
+### Import
 
-```scss
-// index.scss
-@forward "@db-ux/core-components/build/styles/rollup";
-```
-
-**CSS**
+Import the styles in your main `.css` file.
 
-Within HTML files directly:
+```css
+/* index.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);
 
-```html
-<!-- index.html //-->
-<link rel="stylesheet" href="/styles/rollup.css" />
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
 ```
 
-Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite):
+> **Vite 8 Note:** Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `vite.config.ts` like this:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+	build: {
+		cssMinify: "esbuild"
+	}
+});
+```
 
-```js
-// main.js
-import "@db-ux/core-components/build/styles/rollup.css";
+> Alternatively, you could define a [browserslist](https://browsersl.ist/) based on your individual browser support strategy — which might be totally different from the list Vite 8 defines by default (targeting browsers from the early 2020s):
+
+```ts
+// Note: You need to install the required packages first:
+// npm install -D lightningcss browserslist
+
+// vite.config.ts
+import { browserslistToTargets } from "lightningcss";
+import browserslist from "browserslist";
+
+export default defineConfig({
+	css: {
+		lightningcss: {
+			targets: browserslistToTargets(
+				browserslist(
+					">= 0.5%, last 2 major versions, Firefox ESR, not dead"
+				)
+			)
+		}
+	}
+});
 ```
 
 ### DB Theme
@@ -82,7 +107,7 @@ In the case you want to include only some components, and you could do it like t
 
 ```css
 /* The theme contains all props required for components like spacings, colors, ... */
-@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
+@import "@db-ux/core-foundations/build/styles/bundle.css";
 /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
 @import "@db-ux/core-foundations/build/styles/fonts/rollup.css";
 /* The required styles will normalize css and add focus and default font to body */

package/agent/Best-Practise_Common-AI-Mistakes.md

@@ -6,10 +6,92 @@
 - always use variant `outlined` as default
 - use variant `brand` as CTA or primary action
 - if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
-- always add a `type` as property as best practise
+- if `noText`/`no-text` property is used, an icon attribute (`icon`, `iconLeading`, or `iconTrailing`) is also required
+- always add a `type` as property as best practise (`button`, `submit`, or `reset`)
 - there is no `size=large` button
+- only use one icon attribute at a time: `icon`, `iconLeading`, or `iconTrailing` — never combine them
 
 ## `DBStack` or `db-stack`
 
 - there is no property `gap="fix-md"`, available values are `small`, `medium`, etc.
 - there is no property `direction="horizontal"`, available values are `row`, `column`, etc.
+
+## `DBPage` or `db-page`
+
+- If you use `DBHeader` or a footer use `<DBPage variant="fixed">`, without a header use `DBPage variant="auto"`
+
+## `DBAccordion` or `db-accordion`
+
+- never nest a `DBAccordion`/`db-accordion` inside another `DBAccordion`/`db-accordion` — it confuses users
+
+## `DBAccordionItem` or `db-accordion-item`
+
+- always provide either a `headline`, `headlinePlain` attribute, or a headline slot
+- must have children content (text or child elements)
+
+## `DBBadge` or `db-badge`
+
+- when using corner placement (`corner-top-left`, `corner-top-right`, `corner-bottom-left`, `corner-bottom-right`), text/children must be max 3 characters
+- when using corner placement, a `label` attribute is required for accessibility
+- inside interactive elements (`DBButton`, `DBLink`, `button`, `a`), do not use `placement="inline"` — use corner placement instead
+- when no `placement` is set, the default is `inline`
+
+## `DBLink` or `db-link`
+
+- when using `content="external"`, always add `target="_blank"` and `referrerPolicy` (e.g. `"no-referrer"`)
+- when using `target="_blank"`, always set `content="external"`
+
+## `DBInput` or `db-input`
+
+- always add a `type` attribute (e.g. `text`, `email`, `password`, `file`) for better developer experience
+- when `type="file"`, always add an `accept` attribute (e.g. `".pdf"`, `"image/*"`)
+- `multiple` and `accept` attributes are only valid for `type="file"` — do not use them with other types
+
+## `DBSelect` or `db-select`
+
+- must have either an `options` property or `<option>` children — never leave it empty
+
+## `DBCustomSelect` or `db-custom-select`
+
+- always provide `mobileCloseButtonText` for accessibility
+- when using `selectedType="tag"`, always provide `removeTagsTexts` attribute for accessibility
+
+## `DBNotification` or `db-notification`
+
+- always provide `closeButtonText` attribute for accessibility
+- must have children content (text or child elements)
+
+## `DBDrawer` or `db-drawer`
+
+- always provide `closeButtonText` attribute for accessibility
+
+## `DBHeader` or `db-header`
+
+- always provide `burgerMenuLabel` attribute for accessibility
+
+## `DBNavigationItem` or `db-navigation-item`
+
+- always provide `backButtonText` attribute for accessibility
+- must have children content (text or child elements)
+
+## `DBTag` or `db-tag`
+
+- when using `behavior="removable"`, always provide `removeButton` attribute for accessibility
+
+## `DBTooltip` or `db-tooltip`
+
+- must not contain interactive elements (buttons, links, inputs, etc.) — use `DBPopover` for interactive content
+- must be a child of an interactive element (`button`, `a`, `DBButton`, `DBLink`, `DBNavigationItem`, `DBTabItem`, `input`, `select`, `textarea`, etc.) for accessibility
+
+## `DBIcon` or `db-icon`
+
+- prefer using the `icon` attribute on the parent component (`DBButton`, `DBInput`, `DBLink`, `DBTag`, etc.) instead of nesting a `DBIcon`/`db-icon` child
+
+## Form components (`DBInput`, `DBTextarea`, `DBSelect`, `DBCustomSelect`, `DBCheckbox`, `DBRadio`, `DBSwitch`)
+
+- always provide a `label` attribute for accessibility (for `DBCheckbox`, `DBRadio`, `DBSwitch` children text content also counts as label)
+- when using validation attributes (`required`, `minLength`, `maxLength`, `min`, `max`, `pattern`), always provide an `invalidMessage` attribute for better UX (exception: `DBRadio` with `required` does not need `invalidMessage`)
+
+## Content components (`DBButton`, `DBLink`, `DBBadge`, `DBIcon`, `DBInfotext`, `DBNavigationItem`, `DBNotification`, `DBAccordionItem`)
+
+- must have either a `text` property or children content — never leave them empty

package/agent/_instructions.md

@@ -1,3 +1,22 @@
 ## Best Practise / Common AI mistakes
 
 - always read this file if you use Components: `**agent-path**/agent/Best-Practise_Common-AI-Mistakes.md`
+
+## Styling Dependencies
+
+Import the styles in `scss` or `css`. Based on your technology the file names could be different.
+
+- `relative`: asset path point to `../assets`
+- `webpack`: asset path point to `~@db-ux/core-foundations/assets`
+- `rollup`: asset path point to `@db-ux/core-foundations/assets`
+
+**Important**: These bundled files automatically include **all dependencies from [foundations](https://www.npmjs.com/package/@db-ux/core-foundations)** (design tokens, colors, fonts, etc.) **and all [components](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss)** - everything you need in one import!
+
+**CSS**
+
+```css
+// index.css
+@import "@db-ux/core-components/build/styles/rollup.css";
+```
+
+> **Note:** Create a new `.css` file if not present to include the styles

package/build/components/accordion/accordion.css

@@ -1,38 +1,4 @@
 /* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
 .db-accordion[data-variant=card] .db-accordion-item::after {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }

package/build/components/accordion-item/accordion-item.css

@@ -18,40 +18,6 @@
 }
 
 /* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
 @keyframes popover-animation {
   0% {
     pointer-events: none;
@@ -110,70 +76,13 @@
   }
 }
 
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
 .db-accordion-item > details > summary {
   font: var(--db-type-body-md);
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
-}
-@layer variables {
-  .db-accordion-item > details > summary {
-    /* Those variables are only for components to calculate heights and change icons */
-    --db-icon-font-weight: var(--db-base-body-icon-weight-md);
-    --db-icon-font-size: var(--db-base-body-icon-font-size-md);
-  }
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
 }
 
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
 .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "chevron_down";
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));

package/build/components/badge/badge.css

@@ -1,115 +1,19 @@
 /* Variants for adaptive components like input, select, notification, ... */
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
 .db-badge[data-size=medium], .db-badge[data-size=medium] > *,
 .db-badge[data-size=medium] .db-icon {
   font: var(--db-type-body-sm);
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
 }
-@layer variables {
-  .db-badge[data-size=medium], .db-badge[data-size=medium] > *,
-  .db-badge[data-size=medium] .db-icon {
-    /* Those variables are only for components to calculate heights and change icons */
-    --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
-    --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  }
-}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
 
 .db-badge, .db-badge > *,
 .db-badge .db-icon {
   font: var(--db-type-body-2xs);
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
 }
-@layer variables {
-  .db-badge, .db-badge > *,
-  .db-badge .db-icon {
-    /* Those variables are only for components to calculate heights and change icons */
-    --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
-    --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
-  }
-}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
-
-@layer variables {}
 
 .db-badge {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);