@db-ux/core-components 4.5.4-table-c758ae7 → 4.5.4-tailwind-inline-5d37a00

package/README.md

@@ -95,7 +95,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"
+				)
+			)
 		}
 	}
 });

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

@@ -6,10 +6,88 @@
 - 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.
+
+## `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/build/assets/icons/LICENCES.json

@@ -1,16 +1,4 @@
 [
-	{
-		"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/components/checkbox/checkbox.css

@@ -209,6 +209,7 @@
 .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]),
@@ -232,7 +233,6 @@
 }
 .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,6 +150,7 @@
 .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]),
@@ -173,7 +174,6 @@
 }
 .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,6 +222,7 @@
 .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]),
@@ -245,7 +246,6 @@
 }
 .db-switch[data-hide-label=true] {
   font-size: 0;
-  inline-size: fit-content;
 }
 .db-switch[data-hide-label=true] input {
   margin-inline-end: 0;