@db-ux/core-components 4.0.0 → 4.0.1-0-540218c

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @db-ux/core-components
 
+## 4.0.1
+
+_version bump_
+
+
 ## 4.0.0
 
 ### Major Changes

package/agent/_instructions.md

@@ -2,8 +2,13 @@
 
 ### `DBButton` or `db-button`
 
-- available variants are `outline`, `brand`, `filled`, `ghost`
-- always use variant `outline` as default
+- 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
+
+### `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/build/components/accordion-item/accordion-item.css

@@ -161,7 +161,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -250,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/checkbox/checkbox.css

@@ -82,7 +82,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -181,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

@@ -551,7 +551,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -678,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);
 }
@@ -833,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;
@@ -850,6 +865,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   transition: none;
   opacity: 0;
 }
+.db-custom-select[data-variant=floating] summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-custom-select[data-variant=floating] summary {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -893,6 +916,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-custom-select[data-variant=floating]:has(summary:focus-within,
+summary:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  summary:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) summary:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -1005,6 +1056,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-custom-select summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-custom-select summary {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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;
@@ -143,7 +145,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

package/build/components/input/input.css

@@ -394,7 +394,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -521,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")
@@ -606,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;
@@ -623,6 +638,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-input[data-variant=floating] input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-input[data-variant=floating] input {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -664,6 +687,32 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-input[data-variant=floating]:has(input:focus-within,
+input:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-input[data-variant=floating]:has(input:focus-within,
+  input:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) input:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-input: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):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -791,6 +840,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-input input:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-input input {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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);
 }
@@ -226,7 +228,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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")
@@ -219,7 +221,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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")
@@ -930,7 +932,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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

@@ -394,7 +394,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -521,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")
@@ -632,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;
@@ -649,6 +664,14 @@ input[type=radio]:checked) > label {
   transition: none;
   opacity: 0;
 }
+.db-select[data-variant=floating] select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-select[data-variant=floating] select {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -692,6 +715,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-select[data-variant=floating]:has(select:focus-within,
+select:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-select[data-variant=floating]:has(select:focus-within,
+  select:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) select:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -804,6 +855,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-select select:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-select select {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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;
@@ -173,7 +175,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {

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;
@@ -985,7 +987,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {