@db-ux/core-components 4.5.4-mcp-server-migrate-tool-test-1-eb724df → 4.5.4-postcss2-6de35db

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,18 @@ 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**
-
-Within HTML files directly:
+Import the styles in your main `.css` file.
 
-```html
-<!-- index.html //-->
-<link rel="stylesheet" href="/styles/rollup.css" />
-```
-
-Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite):
+```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);
 
-```js
-// main.js
-import "@db-ux/core-components/build/styles/rollup.css";
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
 ```
 
 > **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:
@@ -95,7 +86,11 @@ import browserslist from "browserslist";
 export default defineConfig({
 	css: {
 		lightningcss: {
-			targets: browserslistToTargets(browserslist(">= 0.5%, last 2 major versions, Firefox ESR, not dead"))
+			targets: browserslistToTargets(
+				browserslist(
+					">= 0.5%, last 2 major versions, Firefox ESR, not dead"
+				)
+			)
 		}
 	}
 });
@@ -112,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/drawer/drawer.css

@@ -99,7 +99,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-sizing */
   max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
   /* stylelint-disable-next-line db-ux/use-sizing */
-  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
+  min-block-size: var(--db-drawer-min-height, auto);
   max-inline-size: none;
 }
 
@@ -220,7 +220,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   /* stylelint-disable-next-line db-ux/use-sizing */
   max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
   /* stylelint-disable-next-line db-ux/use-sizing */
-  min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
+  min-inline-size: var(--db-drawer-min-width, auto);
 }
 .db-drawer .db-drawer-container:not([data-width=full]):not([data-direction]), .db-drawer .db-drawer-container:not([data-width=full])[data-direction=right] {
   border-inline-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -302,10 +302,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   position: relative;
 }
 .db-drawer[open] .db-drawer-container[data-transition=open]:not([data-direction]), .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=right], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=left] {
-  transform: translateX(0%);
+  transform: none;
 }
 .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=up], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=down] {
-  transform: translateY(0%);
+  transform: none;
 }
 @media (prefers-reduced-motion: no-preference) {
   .db-drawer[open] .db-drawer-container[data-transition=close] {

package/build/components/drawer/drawer.scss

@@ -40,7 +40,7 @@
 		/* stylelint-disable-next-line db-ux/use-sizing */
 		min-block-size: var(
 			--db-drawer-min-height,
-			calc(100% - #{variables.$db-spacing-fixed-xl})
+			auto
 		);
 		max-inline-size: none;
 	}
@@ -173,7 +173,7 @@ $spacings: (
 			/* stylelint-disable-next-line db-ux/use-sizing */
 			min-inline-size: var(
 				--db-drawer-min-width,
-				calc(100% - #{variables.$db-spacing-fixed-xl})
+				auto
 			);
 
 			&:not([data-direction]),
@@ -287,12 +287,12 @@ $spacings: (
 				&:not([data-direction]),
 				&[data-direction="right"],
 				&[data-direction="left"] {
-					transform: translateX(0%);
+					transform: none;
 				}
 
 				&[data-direction="up"],
 				&[data-direction="down"] {
-					transform: translateY(0%);
+					transform: none;
 				}
 			}