@kofile/gds-foundations 1.1.0 → 1.1.1

package/build/css/components/badge.module.css

@@ -5,7 +5,13 @@
   border-end-start-radius: var(--badge-size-sm-border-radius);
   border-end-end-radius: var(--badge-size-sm-border-radius);
   color: var(--badge-light-color-text-fill);
-  font: var(--badge-size-lg-typography);
+  font-family: var(--badge-size-lg-typography-font-family);
+  font-size: var(--badge-size-lg-typography-font-size);
+  font-weight: var(--badge-size-lg-typography-font-weight);
+  letter-spacing: var(--badge-size-lg-typography-letter-spacing);
+  line-height: var(--badge-size-lg-typography-line-height);
+  text-decoration: var(--badge-size-lg-typography-text-decoration);
+
   display: inline-flex;
   align-items: center;
   gap: var(--badge-gap-spacing);
@@ -19,14 +25,24 @@
   width: fit-content;
 }
 .badge[data-size="md"] {
-  font: var(--badge-size-md-typography);
+  font-family: var(--badge-size-md-typography-font-family);
+  font-size: var(--badge-size-md-typography-font-size);
+  font-weight: var(--badge-size-md-typography-font-weight);
+  letter-spacing: var(--badge-size-md-typography-letter-spacing);
+  line-height: var(--badge-size-md-typography-line-height);
+  text-decoration: var(--badge-size-md-typography-text-decoration);
   padding-block-start: var(--badge-size-md-vertical-padding);
   padding-block-end: var(--badge-size-md-vertical-padding);
   padding-inline-start: var(--badge-size-md-horizontal-padding);
   padding-inline-end: var(--badge-size-md-horizontal-padding);
 }
 .badge[data-size="sm"] {
-  font: var(--badge-size-sm-typography);
+  font-family: var(--badge-size-sm-typography-font-family);
+  font-size: var(--badge-size-sm-typography-font-size);
+  font-weight: var(--badge-size-sm-typography-font-weight);
+  letter-spacing: var(--badge-size-sm-typography-letter-spacing);
+  line-height: var(--badge-size-sm-typography-line-height);
+  text-decoration: var(--badge-size-sm-typography-text-decoration);
   padding-block-start: var(--badge-size-sm-vertical-padding);
   padding-block-end: var(--badge-size-sm-vertical-padding);
   padding-inline-start: var(--badge-size-sm-horizontal-padding);

package/build/css/components/button.module.css

@@ -13,7 +13,12 @@
   display: inline-flex;
   gap: var(--button-size-xl-spacing);
   align-items: center;
-  font: var(--button-size-xl-typography);
+  font-family: var(--button-size-xl-typography-font-family);
+  font-size: var(--button-size-xl-typography-font-size);
+  font-weight: var(--button-size-xl-typography-font-weight);
+  letter-spacing: var(--button-size-xl-typography-letter-spacing);
+  line-height: var(--button-size-xl-typography-line-height);
+  text-decoration: var(--button-size-xl-typography-text-decoration);
   height: var(--button-size-xl-height);
   padding-block-start: var(--button-size-xl-padding-top);
   padding-block-end: var(--button-size-xl-padding-bottom);
@@ -73,7 +78,12 @@
 }
 
 .button[data-size="md"] {
-  font: var(--button-size-md-typography);
+  font-family: var(--button-size-md-typography-font-family);
+  font-size: var(--button-size-md-typography-font-size);
+  font-weight: var(--button-size-md-typography-font-weight);
+  letter-spacing: var(--button-size-md-typography-letter-spacing);
+  line-height: var(--button-size-md-typography-line-height);
+  text-decoration: var(--button-size-md-typography-text-decoration);
   height: var(--button-size-md-height);
   padding-block-start: var(--button-size-md-padding-top);
   padding-block-end: var(--button-size-md-padding-bottom);
@@ -82,7 +92,12 @@
 }
 
 .button[data-size="lg"] {
-  font: var(--button-size-lg-typography);
+  font-family: var(--button-size-lg-typography-font-family);
+  font-size: var(--button-size-lg-typography-font-size);
+  font-weight: var(--button-size-lg-typography-font-weight);
+  letter-spacing: var(--button-size-lg-typography-letter-spacing);
+  line-height: var(--button-size-lg-typography-line-height);
+  text-decoration: var(--button-size-lg-typography-text-decoration);
   height: var(--button-size-lg-height);
   padding-block-start: var(--button-size-lg-padding-top);
   padding-block-end: var(--button-size-lg-padding-bottom);

package/build/css/components/dialog.module.css

@@ -45,7 +45,12 @@
   margin: var(--dialog-elements-title-margin);
   margin-block-start: var(--dialog-elements-title-margin-block-start);
   color: var(--dialog-light-elements-title-color-text-primary-default);
-  font: var(--dialog-elements-title-typography);
+  font-family: var(--dialog-elements-title-typography-font-family);
+  font-size: var(--dialog-elements-title-typography-font-size);
+  font-weight: var(--dialog-elements-title-typography-font-weight);
+  letter-spacing: var(--dialog-elements-title-typography-letter-spacing);
+  line-height: var(--dialog-elements-title-typography-line-height);
+  text-decoration: var(--dialog-elements-title-typography-text-decoration);
   text-align: var(--dialog-elements-title-text-align);
 }
 .title[data-mode="dark"] {
@@ -56,7 +61,15 @@
   margin: var(--dialog-elements-description-margin);
   margin-block-start: var(--dialog-elements-description-margin-block-start);
   color: var(--dialog-light-elements-description-color-text-primary-default);
-  font: var(--dialog-elements-description-typography);
+  font-family: var(--dialog-elements-description-typography-font-family);
+  font-size: var(--dialog-elements-description-typography-font-size);
+  font-weight: var(--dialog-elements-description-typography-font-weight);
+  letter-spacing: var(--dialog-elements-description-typography-letter-spacing);
+  line-height: var(--dialog-elements-description-typography-line-height);
+  text-decoration: var(
+    --dialog-elements-description-typography-text-decoration
+  );
+
   text-align: var(--dialog-elements-description-text-align);
 }
 .description[data-mode="dark"] {

package/build/css/components/field-message.module.css

@@ -1,11 +1,22 @@
 .message {
   display: block;
   color: var(--field-message-light-color-text-primary-default);
-  font: var(--field-message-size-md-typography);
+
+  font-family: var(--field-message-size-md-typography-font-family);
+  font-size: var(--field-message-size-md-typography-font-size);
+  font-weight: var(--field-message-size-md-typography-font-weight);
+  letter-spacing: var(--field-message-size-md-typography-letter-spacing);
+  line-height: var(--field-message-size-md-typography-line-height);
+  text-decoration: var(--field-message-size-md-typography-text-decoration);
 }
 
 .message[data-size="sm"] {
-  font: var(--field-message-size-sm-typography);
+  font-family: var(--field-message-size-sm-typography-font-family);
+  font-size: var(--field-message-size-sm-typography-font-size);
+  font-weight: var(--field-message-size-sm-typography-font-weight);
+  letter-spacing: var(--field-message-size-sm-typography-letter-spacing);
+  line-height: var(--field-message-size-sm-typography-line-height);
+  text-decoration: var(--field-message-size-sm-typography-text-decoration);
 }
 
 .message[data-error="true"] {

package/build/css/components/form-label.module.css

@@ -1,13 +1,24 @@
 .label {
   box-sizing: border-box;
   color: var(--form-label-light-color-text-primary-default);
-  font: var(--form-label-size-md-typography);
+  font-family: var(--form-label-size-md-typography-font-family);
+  font-size: var(--form-label-size-md-typography-font-size);
+  font-weight: var(--form-label-size-md-typography-font-weight);
+  letter-spacing: var(--form-label-size-md-typography-letter-spacing);
+  line-height: var(--form-label-size-md-typography-line-height);
+  text-decoration: var(--form-label-size-md-typography-text-decoration);
+
   display: inline-flex;
   align-items: center;
   gap: var(--form-label-size-md-gap);
 }
 .label[data-size="sm"] {
-  font: var(--form-label-size-sm-typography);
+  font-family: var(--form-label-size-sm-typography-font-family);
+  font-size: var(--form-label-size-sm-typography-font-size);
+  font-weight: var(--form-label-size-sm-typography-font-weight);
+  letter-spacing: var(--form-label-size-sm-typography-letter-spacing);
+  line-height: var(--form-label-size-sm-typography-line-height);
+  text-decoration: var(--form-label-size-sm-typography-text-decoration);
 }
 .label[data-mode="dark"] {
   color: var(--form-label-dark-color-text-primary-default);

package/build/css/components/input.module.css

@@ -18,7 +18,16 @@
   border-width: var(--input-elements-text-field-size-xl-border-width);
   box-sizing: border-box;
   color: var(--input-light-elements-color-text-primary-default);
-  font: var(--input-elements-text-field-size-xl-typography);
+  font-family: var(--input-elements-text-field-size-xl-typography-font-family);
+  font-size: var(--input-elements-text-field-size-xl-typography-font-size);
+  font-weight: var(--input-elements-text-field-size-xl-typography-font-weight);
+  letter-spacing: var(
+    --input-elements-text-field-size-xl-typography-letter-spacing
+  );
+  line-height: var(--input-elements-text-field-size-xl-typography-line-height);
+  text-decoration: var(
+    --input-elements-text-field-size-xl-typography-text-decoration
+  );
   outline: none;
   padding-inline-start: var(--input-elements-text-field-size-xl-padding-inline);
   padding-block: var(--input-elements-text-field-size-xl-padding-block);
@@ -34,7 +43,16 @@
     --input-elements-text-field-size-lg-padding-inline-start
   );
   height: var(--input-elements-text-field-size-lg-height);
-  font: var(--input-elements-text-field-size-lg-typography);
+  font-family: var(--input-elements-text-field-size-lg-typography-font-family);
+  font-size: var(--input-elements-text-field-size-lg-typography-font-size);
+  font-weight: var(--input-elements-text-field-size-lg-typography-font-weight);
+  letter-spacing: var(
+    --input-elements-text-field-size-lg-typography-letter-spacing
+  );
+  line-height: var(--input-elements-text-field-size-lg-typography-line-height);
+  text-decoration: var(
+    --input-elements-text-field-size-lg-typography-text-decoration
+  );
 }
 .input[data-size="lg"] + .icon {
   height: var(--input-elements-icon-size-lg-height);
@@ -47,7 +65,16 @@
     --input-elements-text-field-size-md-padding-inline-start
   );
   height: var(--input-elements-text-field-size-md-height);
-  font: var(--input-elements-text-field-size-md-typography);
+  font-family: var(--input-elements-text-field-size-md-typography-font-family);
+  font-size: var(--input-elements-text-field-size-md-typography-font-size);
+  font-weight: var(--input-elements-text-field-size-md-typography-font-weight);
+  letter-spacing: var(
+    --input-elements-text-field-size-md-typography-letter-spacing
+  );
+  line-height: var(--input-elements-text-field-size-md-typography-line-height);
+  text-decoration: var(
+    --input-elements-text-field-size-md-typography-text-decoration
+  );
 }
 .input[data-size="md"] + .icon {
   height: var(--input-elements-icon-size-md-height);

package/build/css/components/label.module.css

@@ -3,7 +3,12 @@
   box-sizing: border-box;
   color: var(--label-light-color-text-primary-default);
   cursor: default;
-  font: var(--label-size-md-typography);
+  font-family: var(--label-size-md-typography-font-family);
+  font-size: var(--label-size-md-typography-font-size);
+  font-weight: var(--label-size-md-typography-font-weight);
+  letter-spacing: var(--label-size-md-typography-letter-spacing);
+  line-height: var(--label-size-md-typography-line-height);
+  text-decoration: var(--label-size-md-typography-text-decoration);
 }
 
 .label[aria-disabled="true"] {
@@ -13,7 +18,12 @@
 }
 
 .label[data-size="sm"] {
-  font: var(--label-size-sm-typography);
+  font-family: var(--label-size-sm-typography-font-family);
+  font-size: var(--label-size-sm-typography-font-size);
+  font-weight: var(--label-size-sm-typography-font-weight);
+  letter-spacing: var(--label-size-sm-typography-letter-spacing);
+  line-height: var(--label-size-sm-typography-line-height);
+  text-decoration: var(--label-size-sm-typography-text-decoration);
 }
 
 .label[data-mode="dark"] {

package/build/css/components/link.module.css

@@ -3,9 +3,13 @@
   box-sizing: border-box;
   color: var(--link-light-color-text-primary-default);
   cursor: pointer;
-  font: var(--link-size-xl-typography);
+  font-family: var(--link-size-xl-typography-font-family);
+  font-size: var(--link-size-xl-typography-font-size);
+  font-weight: var(--link-size-xl-typography-font-weight);
+  letter-spacing: var(--link-size-xl-typography-letter-spacing);
+  line-height: var(--link-size-xl-typography-line-height);
+  text-decoration: var(--link-size-xl-typography-text-decoration);
   display: inline-flex;
-  align-items: center;
   gap: var(--link-gap-default);
   vertical-align: top;
   text-decoration: underline;
@@ -17,25 +21,60 @@
   color: var(--link-light-color-text-primary-active);
 }
 .link[data-size="3xs"] {
-  font: var(--link-size-3xs-typography);
+  font-family: var(--link-size-3xs-typography-font-family);
+  font-size: var(--link-size-3xs-typography-font-size);
+  font-weight: var(--link-size-3xs-typography-font-weight);
+  letter-spacing: var(--link-size-3xs-typography-letter-spacing);
+  line-height: var(--link-size-3xs-typography-line-height);
+  text-decoration: var(--link-size-3xs-typography-text-decoration);
 }
 .link[data-size="2xs"] {
-  font: var(--link-size-2xs-typography);
+  font-family: var(--link-size-2xs-typography-font-family);
+  font-size: var(--link-size-2xs-typography-font-size);
+  font-weight: var(--link-size-2xs-typography-font-weight);
+  letter-spacing: var(--link-size-2xs-typography-letter-spacing);
+  line-height: var(--link-size-2xs-typography-line-height);
+  text-decoration: var(--link-size-2xs-typography-text-decoration);
 }
 .link[data-size="xs"] {
-  font: var(--link-size-xs-typography);
+  font-family: var(--link-size-xs-typography-font-family);
+  font-size: var(--link-size-xs-typography-font-size);
+  font-weight: var(--link-size-xs-typography-font-weight);
+  letter-spacing: var(--link-size-xs-typography-letter-spacing);
+  line-height: var(--link-size-xs-typography-line-height);
+  text-decoration: var(--link-size-xs-typography-text-decoration);
 }
 .link[data-size="sm"] {
-  font: var(--link-size-sm-typography);
+  font-family: var(--link-size-sm-typography-font-family);
+  font-size: var(--link-size-sm-typography-font-size);
+  font-weight: var(--link-size-sm-typography-font-weight);
+  letter-spacing: var(--link-size-sm-typography-letter-spacing);
+  line-height: var(--link-size-sm-typography-line-height);
+  text-decoration: var(--link-size-sm-typography-text-decoration);
 }
 .link[data-size="md"] {
-  font: var(--link-size-md-typography);
+  font-family: var(--link-size-md-typography-font-family);
+  font-size: var(--link-size-md-typography-font-size);
+  font-weight: var(--link-size-md-typography-font-weight);
+  letter-spacing: var(--link-size-md-typography-letter-spacing);
+  line-height: var(--link-size-md-typography-line-height);
+  text-decoration: var(--link-size-md-typography-text-decoration);
 }
 .link[data-size="lg"] {
-  font: var(--link-size-lg-typography);
+  font-family: var(--link-size-lg-typography-font-family);
+  font-size: var(--link-size-lg-typography-font-size);
+  font-weight: var(--link-size-lg-typography-font-weight);
+  letter-spacing: var(--link-size-lg-typography-letter-spacing);
+  line-height: var(--link-size-lg-typography-line-height);
+  text-decoration: var(--link-size-lg-typography-text-decoration);
 }
 .link[data-size="xl"] {
-  font: var(--link-size-xl-typography);
+  font-family: var(--link-size-xl-typography-font-family);
+  font-size: var(--link-size-xl-typography-font-size);
+  font-weight: var(--link-size-xl-typography-font-weight);
+  letter-spacing: var(--link-size-xl-typography-letter-spacing);
+  line-height: var(--link-size-xl-typography-line-height);
+  text-decoration: var(--link-size-xl-typography-text-decoration);
 }
 .link[data-weight="regular"] {
   font-weight: var(--link-weight-regular);

package/build/css/components/segmented-controller.module.css

@@ -34,7 +34,24 @@ input {
   display: flex;
   align-items: center;
   justify-content: center;
-  font: var(--segmented-controller-elements-trigger-size-lg-typography);
+  font-family: var(
+    --segmented-controller-elements-trigger-size-lg-typography-font-family
+  );
+  font-size: var(
+    --segmented-controller-elements-trigger-size-lg-typography-font-size
+  );
+  font-weight: var(
+    --segmented-controller-elements-trigger-size-lg-typography-font-weight
+  );
+  letter-spacing: var(
+    --segmented-controller-elements-trigger-size-lg-typography-letter-spacing
+  );
+  line-height: var(
+    --segmented-controller-elements-trigger-size-lg-typography-line-height
+  );
+  text-decoration: var(
+    --segmented-controller-elements-trigger-size-lg-typography-text-decoration
+  );
   color: var(--segmented-controller-trigger-color);
 }
 .trigger:hover {
@@ -77,7 +94,24 @@ input {
   margin: -1px;
 }
 .trigger[data-size="md"] {
-  font: var(--segmented-controller-elements-trigger-size-md-typography);
+  font-family: var(
+    --segmented-controller-elements-trigger-size-md-typography-font-family
+  );
+  font-size: var(
+    --segmented-controller-elements-trigger-size-md-typography-font-size
+  );
+  font-weight: var(
+    --segmented-controller-elements-trigger-size-md-typography-font-weight
+  );
+  letter-spacing: var(
+    --segmented-controller-elements-trigger-size-md-typography-letter-spacing
+  );
+  line-height: var(
+    --segmented-controller-elements-trigger-size-md-typography-line-height
+  );
+  text-decoration: var(
+    --segmented-controller-elements-trigger-size-md-typography-text-decoration
+  );
   padding-block: var(
     --segmented-controller-elements-trigger-size-md-padding-block
   );

package/build/css/components/select.module.css

@@ -137,12 +137,27 @@
   );
 }
 
-/* .separator {
-  height: var(--select-elements-separator-size-lg-height);
-  background-color: var(
-    --select-light-elements-separtor-color-background-primary-default
-  );
-} */
+.selection {
+  padding-block-start: var(--spacing-2xs);
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  alignitems: center;
+  border-block-end: var(--border-width-sm) solid
+    var(--select-light-elements-separtor-color-background-primary-default);
+}
+
+.count {
+  margin: 0 auto;
+  margin-right: var(--spacing-xs);
+  font: var(--font-size-xs-regular);
+  color: var(--color-neutral-600);
+  display: flex;
+  align-items: center;
+}
 
 .info {
   margin: 0 auto;
@@ -242,7 +257,16 @@
 
 .heading {
   display: inline-block;
-  font: var(--select-elements-heading-size-sm-typography);
+  font-family: var(--select-elements-heading-size-sm-typography-font-family);
+  font-size: var(--select-elements-heading-size-sm-typography-font-size);
+  font-weight: var(--select-elements-heading-size-sm-typography-font-weight);
+  letter-spacing: var(
+    --select-elements-heading-size-sm-typography-letter-spacing
+  );
+  line-height: var(--select-elements-heading-size-sm-typography-line-height);
+  text-decoration: var(
+    --select-elements-heading-size-sm-typography-text-decoration
+  );
   color: var(--select-light-elements-heading-color-text-primary-default);
   padding-block: var(--select-elements-heading-size-sm-padding-block);
   padding-inline: var(--select-elements-heading-size-sm-padding-inline);
@@ -254,6 +278,16 @@
 
 .label {
   font: var(--select-elements-label-size-sm-typography);
+  font-family: var(--select-elements-label-size-sm-typography-font-family);
+  font-size: var(--select-elements-label-size-sm-typography-font-size);
+  font-weight: var(--select-elements-label-size-sm-typography-font-weight);
+  letter-spacing: var(
+    --select-elements-label-size-sm-typography-letter-spacing
+  );
+  line-height: var(--select-elements-label-size-sm-typography-line-height);
+  text-decoration: var(
+    --select-elements-label-size-sm-typography-text-decoration
+  );
   color: var(--select-light-elements-label-color-text-primary-default);
 }
 

package/build/css/components/table.module.css

@@ -136,7 +136,12 @@
   border-bottom-style: solid;
   border-bottom-width: var(--table-elements-th-size-xl-border-bottom-width);
   color: var(--table-light-elements-th-color-text-primary-default);
-  font: var(--table-elements-th-size-xl-typography);
+  font-family: var(--table-elements-th-size-xl-typography-font-family);
+  font-size: var(--table-elements-th-size-xl-typography-font-size);
+  font-weight: var(--table-elements-th-size-xl-typography-font-weight);
+  letter-spacing: var(--table-elements-th-size-xl-typography-letter-spacing);
+  line-height: var(--table-elements-th-size-xl-typography-line-height);
+  text-decoration: var(--table-elements-th-size-xl-typography-text-decoration);
   height: var(--table-elements-th-size-xl-max-height);
   padding-inline: var(--table-elements-th-size-xl-padding-inline);
   padding-block-start: var(--table-elements-th-size-xl-padding-block-start);
@@ -154,7 +159,13 @@
 }
 
 .th[data-size="2xl"] {
-  font: var(--table-elements-th-size-2xl-typography);
+  font-family: var(--table-elements-th-size-2xl-typography-font-family);
+  font-size: var(--table-elements-th-size-2xl-typography-font-size);
+  font-weight: var(--table-elements-th-size-2xl-typography-font-weight);
+  letter-spacing: var(--table-elements-th-size-2xl-typography-letter-spacing);
+  line-height: var(--table-elements-th-size-2xl-typography-line-height);
+  text-decoration: var(--table-elements-th-size-2xl-typography-text-decoration);
+
   height: var(--table-elements-th-size-2xl-max-height);
   padding-block-start: var(--table-elements-th-size-2xl-padding-block-start);
   padding-block-end: var(--table-elements-th-size-2xl-padding-block-end);
@@ -180,18 +191,36 @@
 .td {
   box-sizing: border-box;
   color: var(--table-light-elements-td-color-text-primary-default);
-  font: var(--table-elements-td-size-2xl-typography);
+  font-family: var(--table-elements-td-size-2xl-typography-font-family);
+  font-size: var(--table-elements-td-size-2xl-typography-font-size);
+  font-weight: var(--table-elements-td-size-2xl-typography-font-weight);
+  letter-spacing: var(--table-elements-td-size-2xl-typography-letter-spacing);
+  line-height: var(--table-elements-td-size-2xl-typography-line-height);
+  text-decoration: var(--table-elements-td-size-2xl-typography-text-decoration);
+
   height: var(--table-elements-td-size-2xl-max-height);
   padding-inline: var(--table-elements-td-size-2xl-padding-inline);
 }
 
 .td[data-size="xl"] {
-  font: var(--table-elements-td-size-xl-typography);
+  font-family: var(--table-elements-td-size-xl-typography-font-family);
+  font-size: var(--table-elements-td-size-xl-typography-font-size);
+  font-weight: var(--table-elements-td-size-xl-typography-font-weight);
+  letter-spacing: var(--table-elements-td-size-xl-typography-letter-spacing);
+  line-height: var(--table-elements-td-size-xl-typography-line-height);
+  text-decoration: var(--table-elements-td-size-xl-typography-text-decoration);
+
   height: var(--table-elements-td-size-xl-max-height);
 }
 
 .td[data-size="lg"] {
-  font: var(--table-elements-td-size-lg-typography);
+  font-family: var(--table-elements-td-size-lg-typography-font-family);
+  font-size: var(--table-elements-td-size-lg-typography-font-size);
+  font-weight: var(--table-elements-td-size-lg-typography-font-weight);
+  letter-spacing: var(--table-elements-td-size-lg-typography-letter-spacing);
+  line-height: var(--table-elements-td-size-lg-typography-line-height);
+  text-decoration: var(--table-elements-td-size-lg-typography-text-decoration);
+
   line-height: var(--line-heights-3xs);
   height: var(--table-elements-td-size-lg-max-height);
   padding-inline-start: var(--table-elements-td-size-lg-padding-inline);

package/build/css/components/tabs.module.css

@@ -31,7 +31,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font: var(--tabs-elements-trigger-size-lg-typography);
+  font-family: var(--tabs-elements-trigger-size-lg-typography-font-family);
+  font-size: var(--tabs-elements-trigger-size-lg-typography-font-size);
+  font-weight: var(--tabs-elements-trigger-size-lg-typography-font-weight);
+  letter-spacing: var(
+    --tabs-elements-trigger-size-lg-typography-letter-spacing
+  );
+  line-height: var(--tabs-elements-trigger-size-lg-typography-line-height);
+  text-decoration: var(
+    --tabs-elements-trigger-size-lg-typography-text-decoration
+  );
   height: var(--tabs-elements-trigger-size-lg-max-height);
   color: var(--tabs-trigger-color);
 }
@@ -44,7 +53,16 @@
   border-color: var(--tabs-light-elements-trigger-color-border-primary-active);
 }
 .trigger[data-size="xl"] {
-  font: var(--tabs-elements-trigger-size-xl-typography);
+  font-family: var(--tabs-elements-trigger-size-lg-typography-font-family);
+  font-size: var(--tabs-elements-trigger-size-lg-typography-font-size);
+  font-weight: var(--tabs-elements-trigger-size-lg-typography-font-weight);
+  letter-spacing: var(
+    --tabs-elements-trigger-size-lg-typography-letter-spacing
+  );
+  line-height: var(--tabs-elements-trigger-size-lg-typography-line-height);
+  text-decoration: var(
+    --tabs-elements-trigger-size-lg-typography-text-decoration
+  );
   height: var(--tabs-elements-trigger-size-xl-max-height);
 }
 .trigger[data-mode="dark"] {

package/build/css/themes/badge/dark.css

@@ -3,7 +3,7 @@
 :host {
 --badge-dark-color-background-neutral-light-fill: #343944;
 --badge-dark-color-background-neutral-dark-fill: #242831;
---badge-dark-color-background-primary-fill: #041C4F;
+--badge-dark-color-background-primary-fill: #041c4f;
 --badge-dark-color-background-success-fill: #063724;
 --badge-dark-color-background-danger-fill: #5c0b09;
 --badge-dark-color-background-warning-fill: #553008;

package/build/css/themes/badge/light.css

@@ -4,9 +4,9 @@
 --badge-light-color-background-neutral-light-fill: #edeeef;
 --badge-light-color-background-neutral-dark-fill: #d5d7db;
 --badge-light-color-background-primary-fill: #d9eafe;
---badge-light-color-background-success-fill: #C0F6DC;
---badge-light-color-background-danger-fill: #FEDCDC;
---badge-light-color-background-warning-fill: #FFE4C2;
---badge-light-color-background-hightlight-fill: #FDEEAF;
+--badge-light-color-background-success-fill: #c0f6dc;
+--badge-light-color-background-danger-fill: #fedcdc;
+--badge-light-color-background-warning-fill: #ffe4c2;
+--badge-light-color-background-hightlight-fill: #fdeeaf;
 --badge-light-color-text-fill: #121212;
 }

package/build/css/themes/button/light.css

@@ -18,7 +18,7 @@
 --button-light-color-background-transparent-neutral-hover: #edeeef;
 --button-light-color-background-transparent-neutral-active: #d5d7db;
 --button-light-color-border-solid-primary-default: #063b99;
---button-light-color-border-solid-primary-hover: #041C4F;
+--button-light-color-border-solid-primary-hover: #041c4f;
 --button-light-color-border-solid-danger-default: #ab1a1d;
 --button-light-color-border-solid-danger-hover: #7e130e;
 --button-light-color-border-outlined-primary-default: #0c57cd;

package/build/css/themes/checkbox/dark.css

@@ -12,7 +12,7 @@
 --checkbox-dark-color-background-indeterminate-hover: #ffffff;
 --checkbox-dark-color-border-primary-active: #3a89fd;
 --checkbox-dark-color-border-primary-default: #343944;
---checkbox-dark-color-border-primary-hover: #041C4F;
+--checkbox-dark-color-border-primary-hover: #041c4f;
 --checkbox-dark-color-border-danger-default: #ab1a1d;
 --checkbox-dark-color-border-danger-hover: #7e130e;
 --checkbox-dark-color-outline-primary-fill: #063b99;

package/build/css/themes/checkbox/light.css

@@ -10,9 +10,9 @@
 --checkbox-light-color-background-indeterminate-active: #0c57cd;
 --checkbox-light-color-background-indeterminate-default: #0c57cd;
 --checkbox-light-color-background-indeterminate-hover: #ffffff;
---checkbox-light-color-border-primary-active: #041C4F;
+--checkbox-light-color-border-primary-active: #041c4f;
 --checkbox-light-color-border-primary-default: #343944;
---checkbox-light-color-border-primary-hover: #041C4F;
+--checkbox-light-color-border-primary-hover: #041c4f;
 --checkbox-light-color-border-danger-default: #ab1a1d;
 --checkbox-light-color-border-danger-hover: #7e130e;
 --checkbox-light-color-outline-primary-fill: #063b99;

package/build/css/themes/checkbox-tile/dark.css

@@ -1,10 +1,10 @@
 
 :root, 
 :host {
---checkbox-tile-dark-color-background-primary-active: #041C4F;
+--checkbox-tile-dark-color-background-primary-active: #041c4f;
 --checkbox-tile-dark-color-background-primary-default: #242831;
 --checkbox-tile-dark-color-background-primary-hover: #343944;
---checkbox-tile-dark-color-background-altbackground-active: #041C4F;
+--checkbox-tile-dark-color-background-altbackground-active: #041c4f;
 --checkbox-tile-dark-color-background-altbackground-default: #121212;
 --checkbox-tile-dark-color-background-altbackground-hover: #343944;
 --checkbox-tile-dark-color-border-primary-active: #0c57cd;

package/build/css/themes/composite/shadows.css

@@ -0,0 +1,12 @@
+:root {
+  --shadow-xs: var(--shadow-xs-offset-x) var(--shadow-xs-offset-y)
+    var(--shadow-xs-blur) var(--shadow-xs-spread) var(--shadow-xs-color);
+  --shadow-sm: var(--shadow-sm-offset-x) var(--shadow-sm-offset-y)
+    var(--shadow-sm-blur) var(--shadow-sm-spread) var(--shadow-sm-color);
+  --shadow-md: var(--shadow-md-offset-x) var(--shadow-md-offset-y)
+    var(--shadow-md-blur) var(--shadow-md-spread) var(--shadow-md-color);
+  --shadow-lg: var(--shadow-lg-offset-x) var(--shadow-lg-offset-y)
+    var(--shadow-lg-blur) var(--shadow-lg-spread) var(--shadow-lg-color);
+  --shadow-xl: var(--shadow-xl-offset-x) var(--shadow-xl-offset-y)
+    var(--shadow-xl-blur) var(--shadow-xl-spread) var(--shadow-xl-color);
+}

package/build/css/themes/dialog/light.css

@@ -6,8 +6,8 @@
 --dialog-light-elements-title-color-text-primary-default: #121212;
 --dialog-light-elements-description-color-text-primary-default: #6b7280;
 --dialog-light-elements-icon-color-background-generic-default: #edeeef;
---dialog-light-elements-icon-color-background-destructive-default: #FEECEC;
---dialog-light-elements-icon-color-background-error-default: #FEECEC;
+--dialog-light-elements-icon-color-background-destructive-default: #feecec;
+--dialog-light-elements-icon-color-background-error-default: #feecec;
 --dialog-light-elements-icon-color-background-success-default: #e2fdee;
 --dialog-light-elements-icon-color-background-loading-default: transparent;
 }