@db-ux/core-components 2.0.9 → 2.1.0

package/build/components/drawer/drawer.scss

@@ -133,6 +133,23 @@ $spacings: (
 				--db-drawer-max-width,
 				calc(100% - #{variables.$db-spacing-fixed-xl})
 			);
+
+			&:not([data-direction]),
+			&[data-direction="right"] {
+				border-inline-start: component.$component-border;
+			}
+
+			&[data-direction="left"] {
+				border-inline-end: component.$component-border;
+			}
+
+			&[data-direction="up"] {
+				border-block-start: component.$component-border;
+			}
+
+			&[data-direction="down"] {
+				border-block-end: component.$component-border;
+			}
 		}
 
 		&[data-rounded="true"] {

package/build/components/header/header.css

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

package/build/components/icon/icon.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-icon {
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */

package/build/components/infotext/infotext.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/input/input.css

@@ -355,6 +355,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/link/link.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/navigation/navigation.css

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

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

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/notification/notification.css

@@ -771,6 +771,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/popover/popover.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 @keyframes show-right-to-left {
   from {
     transform: translateX(110%);

package/build/components/radio/radio.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/section/section.css

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

package/build/components/select/select.css

@@ -355,6 +355,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-select:not([data-hide-icon-after=true])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/stack/stack-web-component.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-stack {
   display: flex;
   gap: var(--db-spacing-fixed-sm);

package/build/components/stack/stack.css

@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-stack {
   display: flex;
   gap: var(--db-spacing-fixed-sm);

package/build/components/switch/switch.css

@@ -350,6 +350,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
   outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
   outline-offset: var(--db-border-width-xs);

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

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 .db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
   transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
 }

package/build/components/tabs/tabs.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/tag/tag.css

@@ -854,6 +854,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -1000,7 +1004,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] dbbutton:not(.db-tab-remove-button) > button,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] db-button > button,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] a, .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong]:has(input):not(:has(input:checked)) {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
@@ -1105,7 +1112,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] dbbutton:not(.db-tab-remove-button) > button,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] db-button > button,
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] a, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=checkbox]:checked) {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
@@ -1194,6 +1202,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-tag:not([data-no-text=true]):has(.db-tab-remove-button) {
   padding-inline-end: 0;
+  border-inline-end: 0;
 }
 .db-tag:not([data-no-text=true]):has(dbbutton):has(dbbutton:not(.db-tab-remove-button)), .db-tag:not([data-no-text=true]):has(db-button):has(db-button:not(.db-tab-remove-button)), .db-tag:not([data-no-text=true]):not(:has(dbbutton)):has(button:not(.db-tab-remove-button)), .db-tag:not([data-no-text=true]):has(a), .db-tag:not([data-no-text=true]):has(label) {
   padding-inline: 0;
@@ -1209,7 +1218,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   gap: var(--db-spacing-fixed-2xs);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic]):not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=weak], .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=weak], .db-tag:has(.db-tab-remove-button):not([data-semantic]):not([data-emphasis]), .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=weak] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-adaptive-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
@@ -1217,7 +1229,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a)):not([data-semantic])[data-emphasis=strong], .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=adaptive][data-emphasis=strong], .db-tag:has(.db-tab-remove-button):not([data-semantic])[data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=adaptive][data-emphasis=strong] {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
 }
@@ -1225,7 +1238,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=neutral]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=weak] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-neutral-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-basic-level-1-default);
   color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
@@ -1233,7 +1249,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=neutral][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=neutral][data-emphasis=strong] {
-  border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-neutral-bg-vibrant-default);
   color: var(--db-neutral-on-bg-vibrant-default);
 }
@@ -1241,7 +1258,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=critical]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=weak] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-critical-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-basic-level-1-default);
   color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
@@ -1249,7 +1269,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=critical][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=critical][data-emphasis=strong] {
-  border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-critical-bg-vibrant-default);
   color: var(--db-critical-on-bg-vibrant-default);
 }
@@ -1257,7 +1278,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-critical-on-bg-vibrant-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=successful]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=weak] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-successful-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-basic-level-1-default);
   color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
@@ -1265,7 +1289,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=successful][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=successful][data-emphasis=strong] {
-  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-successful-bg-vibrant-default);
   color: var(--db-successful-on-bg-vibrant-default);
 }
@@ -1273,7 +1298,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-successful-on-bg-vibrant-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=warning]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=weak] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-warning-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-basic-level-1-default);
   color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
@@ -1281,7 +1309,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=warning][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=warning][data-emphasis=strong] {
-  border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-warning-bg-vibrant-default);
   color: var(--db-warning-on-bg-vibrant-default);
 }
@@ -1289,7 +1318,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-warning-on-bg-vibrant-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational]:not([data-emphasis]), .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=weak], .db-tag:has(.db-tab-remove-button)[data-semantic=informational]:not([data-emphasis]), .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=weak] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-60-default);
+  --db-tag-border-color: var(
+  	--db-informational-on-bg-basic-emphasis-60-default
+  );
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-basic-level-1-default);
   color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
@@ -1297,7 +1329,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
 .db-tag:not(:has(label, button:not(.db-tab-remove-button), a))[data-semantic=informational][data-emphasis=strong], .db-tag:has(.db-tab-remove-button)[data-semantic=informational][data-emphasis=strong] {
-  border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-informational-bg-vibrant-default);
   color: var(--db-informational-on-bg-vibrant-default);
 }
@@ -1349,7 +1382,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   cursor: pointer;
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a):not([data-emphasis]) label:has(input[type=radio]:checked), .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=weak] label:has(input[type=radio]:checked) {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
 }
@@ -1357,7 +1391,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
 }
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked) {
-  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+  border-color: var(--db-tag-border-color);
   background-color: var(--db-adaptive-bg-vibrant-default);
   color: var(--db-adaptive-on-bg-vibrant-default);
 }
@@ -1493,6 +1528,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tag .db-tab-remove-button button {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);
   color: currentcolor;
-  border: 0;
   aspect-ratio: 1/1;
+  border-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-color: var(--db-tag-border-color);
 }

package/build/components/tag/tag.scss

@@ -33,6 +33,7 @@
 
 		&:has(.db-tab-remove-button) {
 			padding-inline-end: 0;
+			border-inline-end: 0;
 		}
 
 		&:has(dbbutton):has(dbbutton:not(.db-tab-remove-button)),
@@ -229,8 +230,12 @@
 			// overwrite to transparent
 			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 			color: currentcolor;
-			border: 0;
 			aspect-ratio: 1 / 1;
+			border-inline-start: 0;
+			border-start-start-radius: 0;
+			border-end-start-radius: 0;
+			// stylelint-disable-next-line db-ux/use-border-color
+			border-color: var(--db-tag-border-color);
 		}
 	}
 }

package/build/components/textarea/textarea.css

@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md