@db-ux/core-components 4.5.4 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @db-ux/core-components
 
+## 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

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);

package/build/components/brand/brand.css

@@ -1,102 +1,11 @@
 /* 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 {}
-
 .db-brand {
   font: var(--db-type-body-md);
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
-}
-@layer variables {
-  .db-brand {
-    /* 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-brand {
   gap: var(--db-spacing-fixed-sm);
   align-items: center;