@db-ux/core-components 4.0.1 → 4.0.3

package/CHANGELOG.md

@@ -1,10 +1,25 @@
 # @db-ux/core-components
 
-## 4.0.1
+## 4.0.3
 
 _version bump_
 
 
+## 4.0.2
+
+### Patch Changes
+
+- chore: update instructions files for better copilot outputs - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e):
+  - fix: add some missing variables
+
+- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+
+- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+
+## 4.0.1
+
+_version bump_
+
 ## 4.0.0
 
 ### Major Changes

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

@@ -0,0 +1,15 @@
+# Best Practise / Common AI mistakes
+
+## `DBButton` or `db-button`
+
+- available variants are `outlined`, `brand`, `filled`, `ghost`
+- 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
+- there is no `size=large` button
+
+## `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.

package/agent/_instructions.md

@@ -1,9 +1,3 @@
-## Common AI mistakes
+## Best Practise / Common AI mistakes
 
-### `DBButton` or `db-button`
-
-- available variants are `outline`, `brand`, `filled`, `ghost`
-- always use variant `outline` 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
+- always read this file if you use Components: `**agent-path**/agent/Best-Practise_Common-AI-Mistakes.md`

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

@@ -251,6 +251,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/badge/badge.css

@@ -127,6 +127,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-badge {
   font-weight: 700;
   white-space: nowrap;

package/build/components/brand/brand.css

@@ -113,6 +113,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-brand {
   gap: var(--db-spacing-fixed-sm);
   align-items: center;

package/build/components/button/button.css

@@ -123,6 +123,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/card/card.css

@@ -56,36 +56,41 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
 }
 
-:is(a, button) {
+:is(a[href], button) {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-:is(a, button):has(.db-card) {
-  all: unset;
+:is(a[href], button):has(.db-card) {
+  text-decoration: unset;
+  margin: unset;
+  border: unset;
+  background-color: transparent;
+  padding: unset;
+  font: inherit;
 }
-:is(a, button):hover:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a, button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a, button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
+:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
   background-color: var(--db-card-background-color-hovered);
 }
-:is(a, button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-:is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a, button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-:is(a, button):active:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a, button):active:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a, button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > .db-card,
+:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
   background-color: var(--db-card-background-color-pressed);
 }
-:is(a, button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a, button):active:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-:is(a, button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a, button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 

package/build/components/card/card.scss

@@ -3,9 +3,15 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 
-:is(a, button) {
+:is(a[href], button) {
+	// Resetting button and link specific declarations
 	&:has(.db-card) {
-		all: unset;
+		text-decoration: unset;
+		margin: unset;
+		border: unset;
+		background-color: transparent;
+		padding: unset;
+		font: inherit;
 	}
 
 	@include helpers.hover {

package/build/components/checkbox/checkbox.css

@@ -182,6 +182,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select/custom-select.css

@@ -679,6 +679,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-custom-select summary {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -834,6 +836,18 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
     content: "*"/"";
   }
 }
+.db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select[data-custom-validity=valid]) label, .db-custom-select[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select[data-custom-validity=invalid]) label, .db-custom-select[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-custom-select[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -358,6 +358,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-custom-select-dropdown {
   position: absolute;
   z-index: 32;

package/build/components/custom-select-form-field/custom-select-form-field.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select-list/custom-select-list.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -146,6 +146,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/header/header.css

@@ -117,6 +117,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 @layer variables {}
 
 @layer variables {}

package/build/components/infotext/infotext.css

@@ -123,6 +123,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/input/input.css

@@ -522,6 +522,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -607,6 +609,18 @@ input[type=radio]:checked) > label {
     content: "*"/"";
   }
 }
+.db-input[data-variant=floating]:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-input[data-variant=floating]:has(input[data-custom-validity=valid]) label, .db-input[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-input[data-variant=floating]:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-input[data-variant=floating]:has(input[data-custom-validity=invalid]) label, .db-input[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-input[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;

package/build/components/link/link.css

@@ -123,6 +123,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-link {
   transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
 }

package/build/components/navigation/navigation.css

@@ -126,6 +126,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-navigation > menu .db-navigation-item::after {
   content: "";
   position: absolute;

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

@@ -115,6 +115,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/notification/notification.css

@@ -888,6 +888,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/radio/radio.css

@@ -142,6 +142,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/select/select.css

@@ -522,6 +522,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -633,6 +635,18 @@ input[type=radio]:checked) > label {
     content: "*"/"";
   }
 }
+.db-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-select[data-variant=floating]:has(select[data-custom-validity=valid]) label, .db-select[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-select[data-variant=floating]:has(select[data-custom-validity=invalid]) label, .db-select[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-select[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;

package/build/components/switch/switch.css

@@ -153,6 +153,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

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

@@ -140,6 +140,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-tab-item {
   position: relative;
   list-style-type: "";

package/build/components/tab-list/tab-list.css

@@ -215,6 +215,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/tabs/tabs.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/tag/tag.css

@@ -965,6 +965,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-tag[data-show-check-state=true] label:not([data-show-icon-trailing=false])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/textarea/textarea.css

@@ -170,6 +170,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -399,6 +401,18 @@ input[type=radio]:checked) > label {
     content: "*"/"";
   }
 }
+.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=valid]) label, .db-textarea[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-textarea[data-variant=floating]:has(textarea[data-custom-validity=invalid]) label, .db-textarea[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-textarea[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -493,7 +507,6 @@ input[type=radio]:checked) textarea:is([type=date],
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
-  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-basic-transparent-full-default
@@ -521,6 +534,10 @@ input[type=radio]:checked) textarea:is([type=date],
   );
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) textarea,
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
@@ -552,7 +569,6 @@ input[type=radio]:checked) textarea:is([type=date],
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
-  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-successful-bg-basic-transparent-full-default
@@ -580,6 +596,11 @@ input[type=radio]:checked) textarea:is([type=date],
   );
 }
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
+> db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after {
+  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+}
+.db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) textarea,
 .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
@@ -622,7 +643,6 @@ input[type=radio]:checked) textarea:is([type=date],
   display: none;
 }
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
-  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-basic-transparent-full-default
@@ -649,6 +669,9 @@ input[type=radio]:checked) textarea:is([type=date],
   	--db-critical-on-bg-basic-emphasis-60-default
   );
 }
+.db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid)[data-variant=floating]::after {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) textarea,
 .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) [id$=-placeholder] {
   color: var(--db-critical-on-bg-basic-emphasis-100-default);
@@ -666,7 +689,6 @@ input[type=radio]:checked) textarea:is([type=date],
   display: none;
 }
 .db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
-  --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-textarea-read-only: var(--db-critical-bg-basic-level-1-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
   	--db-critical-bg-basic-transparent-full-default
@@ -693,6 +715,9 @@ input[type=radio]:checked) textarea:is([type=date],
   	--db-critical-on-bg-basic-emphasis-60-default
   );
 }
+.db-textarea:has(textarea[data-custom-validity=invalid])[data-variant=floating]::after, .db-textarea[data-custom-validity=invalid][data-variant=floating]::after {
+  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+}
 .db-textarea:has(textarea[data-custom-validity=invalid]) textarea,
 .db-textarea:has(textarea[data-custom-validity=invalid]) [id$=-placeholder], .db-textarea[data-custom-validity=invalid] textarea,
 .db-textarea[data-custom-validity=invalid] [id$=-placeholder] {

package/build/components/tooltip/tooltip.css

@@ -113,6 +113,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);