@db-ux/core-components 4.5.4-mcp-e4cd7e6 → 4.5.4-table-c758ae7

package/README.md

@@ -71,6 +71,36 @@ Or within your JavaScript files, with the related bundler as a prefix (in this c
 import "@db-ux/core-components/build/styles/rollup.css";
 ```
 
+> **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"
+	}
+});
+```
+
+> 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
 
 In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).

package/build/assets/icons/LICENCES.json

@@ -1,4 +1,16 @@
 [
+	{
+		"name": "arrows_vertical.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "arrow-down-up"
+	},
+	{
+		"name": "more_vertical.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "ellipsis-vertical"
+	},
 	{
 		"name": "arrow_down.svg",
 		"type": "lucide",

package/build/assets/icons/arrows_vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-up-icon lucide-arrow-down-up"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>

package/build/assets/icons/more_vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>

package/build/components/checkbox/checkbox.css

@@ -209,7 +209,6 @@
 .db-checkbox:is(label),
 .db-checkbox > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-checkbox:is(label):not([hidden]),
@@ -233,6 +232,7 @@
 }
 .db-checkbox[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-checkbox[data-hide-label=true] input {
   margin-inline-end: 0;

package/build/components/radio/radio.css

@@ -150,7 +150,6 @@
 .db-radio:is(label),
 .db-radio > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-radio:is(label):not([hidden]),
@@ -174,6 +173,7 @@
 }
 .db-radio[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-radio[data-hide-label=true] input {
   margin-inline-end: 0;

package/build/components/switch/switch.css

@@ -222,7 +222,6 @@
 .db-switch:is(label),
 .db-switch > label {
   align-items: flex-start;
-  position: relative;
   color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
 }
 .db-switch:is(label):not([hidden]),
@@ -246,6 +245,7 @@
 }
 .db-switch[data-hide-label=true] {
   font-size: 0;
+  inline-size: fit-content;
 }
 .db-switch[data-hide-label=true] input {
   margin-inline-end: 0;