@db-ux/core-foundations 2.4.4 → 3.0.0

package/build/styles/defaults/default-theme.scss

@@ -1,6 +1,7 @@
 @use "../colors/placeholder";
 
 @forward "default-properties";
+@forward "default-container-properties";
 
 @property --db-font-family-sans {
 	syntax: "*";

package/build/styles/density/classes/all.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -160,7 +162,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
@@ -174,7 +176,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
@@ -236,7 +238,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
@@ -250,7 +252,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
@@ -312,7 +314,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
@@ -326,7 +328,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
@@ -370,7 +372,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
@@ -402,7 +404,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
@@ -482,7 +484,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
@@ -514,7 +516,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);
@@ -594,7 +596,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
@@ -626,7 +628,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
@@ -706,7 +708,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
@@ -738,7 +740,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
@@ -818,7 +820,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
@@ -850,7 +852,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
@@ -930,7 +932,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
@@ -962,7 +964,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);

package/build/styles/density/classes/expressive.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -154,7 +156,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
@@ -168,7 +170,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
@@ -216,7 +218,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
@@ -248,7 +250,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
@@ -328,7 +330,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
@@ -360,7 +362,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-expressive,
     [data-density=expressive] {
       --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);

package/build/styles/density/classes/functional.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -158,7 +160,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
@@ -172,7 +174,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
@@ -224,7 +226,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
@@ -256,7 +258,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
@@ -336,7 +338,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
@@ -368,7 +370,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-functional,
     [data-density=functional] {
       --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);

package/build/styles/density/classes/regular.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -156,7 +158,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
@@ -170,7 +172,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
@@ -220,7 +222,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
@@ -252,7 +254,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
@@ -332,7 +334,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
@@ -364,7 +366,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     .db-density-regular,
     [data-density=regular] {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);

package/build/styles/fonts/classes/all.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/2xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/2xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/3xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/3xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/all.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/lg.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/md.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/sm.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/body/xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/2xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/2xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/3xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/3xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/all.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/lg.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/md.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/sm.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/xl.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/fonts/classes/headline/xs.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/helpers/classes/all.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/helpers/classes/divider.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/helpers/classes/focus.css

@@ -6,6 +6,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 

package/build/styles/icons/_icon-helpers.scss

@@ -9,7 +9,7 @@ $default-icon-size-rem: #{helpers.px-to-rem($default-icon-size)};
 $default-icon-variants: "default", "filled";
 
 $default-icon-content: var(--db-icon, attr(data-icon));
-$default-icon-content-after: var(--db-icon-after, attr(data-icon-after));
+$default-icon-content-after: var(--db-icon-trailing, attr(data-icon-trailing));
 
 $default-icon-margin-end: var(
 	--db-icon-margin-end,
@@ -57,7 +57,13 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 
 // Icon SCSS mixin
 @mixin set-icon($icon: "", $position: "before") {
-	&:not([data-hide-icon-#{$position}="true"]) {
+	$pos: "leading";
+
+	@if ($position == "after") {
+		$pos: "trailing";
+	}
+
+	&:not([data-show-icon-#{$pos}="false"]) {
 		&::#{$position} {
 			@if $icon != "" {
 				@extend %icon;
@@ -69,7 +75,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 				}
 
 				@if $position == "after" {
-					--db-icon-after: "#{$icon}";
+					--db-icon-trailing: "#{$icon}";
 
 					margin-inline-start: $default-icon-margin-start;
 
@@ -145,7 +151,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 	/* stylelint-disable-next-line declaration-property-value-no-unknown */
 	speak: never; // Hiding icon from screenreaders
 	text-transform: none;
-	vertical-align: middle;
+	vertical-align: var(--db-icon-vertical-align, middle);
 	block-size: $default-icon-font-size;
 	inline-size: $default-icon-font-size;