@kofile/gds-foundations 1.1.2 → 1.2.0

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

@@ -2,21 +2,17 @@
   display: block;
   color: var(--field-message-light-color-text-primary-default);
 
-  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);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
 }
 
 .message[data-size="sm"] {
-  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);
+  font-size: var(--font-size-3xs);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-heights-3xs);
 }
 
 .message[data-error="true"] {

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

@@ -1,24 +1,20 @@
 .label {
   box-sizing: border-box;
   color: var(--form-label-light-color-text-primary-default);
-  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);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-lg);
+  line-height: var(--line-heights-lg);
 
   display: inline-flex;
   align-items: center;
   gap: var(--form-label-size-md-gap);
 }
 .label[data-size="sm"] {
-  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);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-heights-xs);
 }
 .label[data-mode="dark"] {
   color: var(--form-label-dark-color-text-primary-default);

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

@@ -18,16 +18,11 @@
   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-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
-  );
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-md);
+  line-height: var(--line-heights-md);
   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);
@@ -37,22 +32,14 @@
 
 .input[data-size="lg"] {
   border-radius: var(--input-elements-text-field-size-lg-border-radius);
-
   padding-block: var(--input-elements-text-field-size-lg-padding-block);
   padding-inline-start: var(
     --input-elements-text-field-size-lg-padding-inline-start
   );
   height: var(--input-elements-text-field-size-lg-height);
-  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
-  );
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-heights-xs);
 }
 .input[data-size="lg"] + .icon {
   height: var(--input-elements-icon-size-lg-height);
@@ -65,16 +52,9 @@
     --input-elements-text-field-size-md-padding-inline-start
   );
   height: var(--input-elements-text-field-size-md-height);
-  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
-  );
+  font-size: var(--font-size-3xs);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-heights-3xs);
 }
 .input[data-size="md"] + .icon {
   height: var(--input-elements-icon-size-md-height);
@@ -108,7 +88,7 @@
 .input[data-disabled="true"],
 .icon[aria-disabled="true"] {
   opacity: var(--input-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .icon {
   background-color: var(

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

@@ -3,27 +3,22 @@
   box-sizing: border-box;
   color: var(--label-light-color-text-primary-default);
   cursor: default;
-  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);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--letter-spacing-md);
+  line-height: var(--line-heights-md);
 }
 
 .label[aria-disabled="true"] {
   opacity: var(--label-opacity-disabled);
-  pointer-events: none;
   cursor: not-allowed;
 }
 
 .label[data-size="sm"] {
-  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);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-heights-xs);
 }
 
 .label[data-mode="dark"] {

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

@@ -3,12 +3,11 @@
   box-sizing: border-box;
   color: var(--link-light-color-text-primary-default);
   cursor: pointer;
-  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);
+  font-family: var(--font-families-default);
+  font-weight: var(--font-weights-bold);
+  font-size: var(--font-size-xl);
+  letter-spacing: var(--letter-spacing-xl);
+  line-height: var(--line-height-xl);
   display: inline-flex;
   gap: var(--link-gap-default);
   vertical-align: top;
@@ -21,63 +20,42 @@
   color: var(--link-light-color-text-primary-active);
 }
 .link[data-size="3xs"] {
-  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);
+  font-size: var(--font-size-3xs);
+  letter-spacing: var(--letter-spacing-3xs);
+  line-height: var(--line-height-3xs);
 }
 .link[data-size="2xs"] {
-  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);
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-height-2xs);
 }
 .link[data-size="xs"] {
-  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);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-height-xs);
 }
 .link[data-size="sm"] {
-  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);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-height-sm);
 }
 .link[data-size="md"] {
-  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);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  line-height: var(--line-height-md);
 }
 .link[data-size="lg"] {
-  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);
+  font-size: var(--font-size-lg);
+  letter-spacing: var(--letter-spacing-lg);
+  line-height: var(--line-height-lg);
 }
 .link[data-size="xl"] {
-  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);
+  font-size: var(--font-size-xl);
+  letter-spacing: var(--letter-spacing-xl);
+  line-height: var(--line-height-xl);
 }
 .link[data-weight="regular"] {
-  font-weight: var(--link-weight-regular);
+  font-weight: var(--font-weights-regular);
 }
 
 .link[data-mode="dark"] {

package/build/css/components/radio-group.module.css

@@ -41,7 +41,6 @@
 .item[data-disabled] {
   opacity: var(--radio-group-opacity-disabled);
   cursor: not-allowed;
-  pointer-events: none;
 }
 .item[data-mode="dark"] {
   background-color: var(--radio-group-dark-color-background-primary-default);

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

@@ -34,24 +34,11 @@ input {
   display: flex;
   align-items: center;
   justify-content: center;
-  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
-  );
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
   color: var(--segmented-controller-trigger-color);
 }
 .trigger:hover {
@@ -84,9 +71,6 @@ input {
   color: var(
     --segmented-controller-light-elements-trigger-color-text-primary-active
   );
-  /* border-color: var(
-    --segmented-controller-light-elements-trigger-color-border-primary-active
-  ); */
 
   border: 1px solid var(--color-primary-300);
   border-radius: 6px;
@@ -94,24 +78,9 @@ input {
   margin: -1px;
 }
 .trigger[data-size="md"] {
-  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
-  );
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
   padding-block: var(
     --segmented-controller-elements-trigger-size-md-padding-block
   );

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

@@ -1,8 +1,3 @@
-/* reset */
-/* button {
-  all: unset;
-} */
-
 .trigger {
   box-sizing: border-box;
   background-color: var(
@@ -22,8 +17,9 @@
   max-height: var(--select-elements-trigger-size-xl-max-height);
   width: var(--select-elements-trigger-size-xl-width);
 }
-.trigger[data-disabled] {
-  pointer-events: none;
+.trigger[data-disabled],
+.trigger[disabled] {
+  cursor: not-allowed;
   opacity: var(--select-elements-trigger-opacity-disabled);
   user-select: none;
 }
@@ -60,7 +56,8 @@
   max-height: var(--select-elements-trigger-size-lg-max-height);
 }
 
-.content {
+.content,
+.container {
   --select-dropdown-menu-width: var(--radix-dropdown-menu-width);
   background-color: var(
     --select-light-elements-content-color-background-primary-default
@@ -75,10 +72,18 @@
   border-style: solid;
   width: var(--radix-dropdown-menu-trigger-width);
   max-width: var(--select-elements-content-size-lg-max-width);
-  max-height: var(--select-elements-content-size-lg-max-height);
   z-index: var(--select-elements-content-size-lg-z-index);
 }
 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollable {
+  max-height: 256px;
+  overflow-y: auto;
+}
+
+.scrollable::-webkit-scrollbar {
   width: var(--select-elements-content-scrollbar-size-lg-width);
   background-color: var(
     --select-light-elements-content-scrollbar-color-background-primary-default
@@ -89,7 +94,7 @@
   border-radius: var(--select-elements-content-scrollbar-size-lg-border-radius);
 }
 
-.content::-webkit-scrollbar-thumb {
+.scrollable::-webkit-scrollbar-thumb {
   border-width: var(--select-elements-content-scrollbar-size-lg-border-width);
   border-color: var(
     --select-light-elements-content-scrollbar-thumb-color-border-primary-default
@@ -99,7 +104,16 @@
     --select-light-elements-content-scrollbar-thumb-color-background-primary-default
   );
   border-radius: var(--select-elements-content-scrollbar-size-lg-border-radius);
-  height: var(--select-elements-content-scrollbar-thumb-size-lg-height);
+  max-height: var(--select-elements-content-scrollbar-thumb-size-lg-height);
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.list:focus {
+  outline: none;
 }
 
 .item {
@@ -116,6 +130,9 @@
   opacity: var(--select-elements-menu-item-opacity-disabled);
 }
 .item[data-highlighted],
+.item:focus-visible,
+.item:focus,
+.item:hover,
 .sub-trigger[data-highlighted],
 .item-radio[data-highlighted],
 .item-checkbox[data-highlighted] {
@@ -124,6 +141,7 @@
   );
 }
 .item[data-state="checked"],
+.item[data-checked="true"],
 .item[aria-checked="true"] {
   background-color: var(
     --select-light-elements-menu-item-color-background-primary-active
@@ -137,17 +155,29 @@
   );
 }
 
-.selection {
-  padding-block-start: var(--spacing-2xs);
-  position: sticky;
-  top: 0;
-  background-color: white;
+.controls {
+  background-color: var(--color-neutral-lightest);
+  border-block-end: var(--border-width-sm) solid
+    var(--select-light-elements-separtor-color-background-primary-default);
   z-index: 1;
+  position: sticky;
   width: 100%;
+  padding-block-start: var(--spacing-2xs);
+  top: 0;
+}
+
+.controls[data-mode="dark"] {
+  background-color: var(--color-neutral-1000);
+  border-block-end: var(--border-width-sm) solid var(--color-neutral-darkest);
+}
+
+.selection {
   display: flex;
   alignitems: center;
-  border-block-end: var(--border-width-sm) solid
-    var(--select-light-elements-separtor-color-background-primary-default);
+}
+
+.search {
+  padding: var(--spacing-xs);
 }
 
 .count {
@@ -156,6 +186,8 @@
   font-family: var(--font-families-default);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-xs);
+  letter-spacing: var(--letter-spacing-xs);
   color: var(--color-neutral-600);
   display: flex;
   align-items: center;
@@ -166,8 +198,10 @@
   margin-right: 0;
   color: var(--select-light-elements-info-color-text-primary-default);
   font-family: var(--font-families-default);
-  font-size: var(--select-elements-info-size-lg-typography-font-size);
-  font-weight: var(--select-elements-info-size-lg-typography-font-weight);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  line-heights: var(--line-heights-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
 }
 
 /* DARK */
@@ -208,6 +242,40 @@
   );
 }
 .content[data-mode="dark"]::-webkit-scrollbar {
+  display: none;
+}
+
+.content[data-mode="dark"] > .scrollable::-webkit-scrollbar {
+  background-color: var(
+    --select-dark-elements-content-scrollbar-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-scrollbar-color-border-primary-default
+  );
+}
+
+.content[data-mode="dark"] > .scrollable::-webkit-scrollbar-thumb {
+  background-color: var(
+    --select-dark-elements-content-scrollbar-thumb-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-scrollbar-thumb-color-border-primary-default
+  );
+}
+
+.container[data-mode="dark"] {
+  background-color: var(
+    --select-dark-elements-content-color-background-primary-default
+  );
+  border-color: var(
+    --select-dark-elements-content-color-border-primary-default
+  );
+}
+.container[data-mode="dark"]::-webkit-scrollbar {
+  display: none;
+}
+
+.container[data-mode="dark"] > .scrollable::-webkit-scrollbar {
   background-color: var(
     --select-dark-elements-content-scrollbar-color-background-primary-default
   );
@@ -216,7 +284,7 @@
   );
 }
 
-.content[data-mode="dark"]::-webkit-scrollbar-thumb {
+.container[data-mode="dark"] > .scrollable::-webkit-scrollbar-thumb {
   background-color: var(
     --select-dark-elements-content-scrollbar-thumb-color-background-primary-default
   );
@@ -237,12 +305,15 @@
 .item[data-highlighted][data-mode="dark"],
 .sub-trigger[data-highlighted][data-mode="dark"],
 .item-radio[data-highlighted][data-mode="dark"],
-.item-checkbox[data-highlighted][data-mode="dark"] {
+.item-checkbox[data-highlighted][data-mode="dark"],
+.item[data-mode="dark"]:hover,
+.item[data-mode="dark"]:focus {
   background-color: var(
     --select-dark-elements-menu-item-color-background-primary-hover
   );
 }
 .item[data-state="checked"][data-mode="dark"],
+.item[data-checked="true"][data-mode="dark"],
 .item[aria-checked="true"][data-mode="dark"] {
   background-color: var(
     --select-dark-elements-menu-item-color-background-primary-active
@@ -253,6 +324,10 @@
   color: var(--select-dark-elements-info-color-text-primary-default);
 }
 
+.count[data-mode="dark"] {
+  color: var(--select-dark-elements-info-color-text-primary-default);
+}
+
 .icon {
   min-width: var(--select-elements-icon-size-md-min-height);
   min-height: var(--select-elements-icon-size-md-min-height);
@@ -261,16 +336,11 @@
 
 .heading {
   display: inline-block;
-  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
-  );
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-semibold);
+  letter-spacing: var(--letter-spacing-xs);
+  line-height: var(--line-heights-xs);
   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);
@@ -281,21 +351,17 @@
 }
 
 .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
-  );
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
   color: var(--select-light-elements-label-color-text-primary-default);
 }
 
 .label[data-mode="dark"] {
-  font: var(--select-elements-label-size-sm-typography);
+  font-family: var(--font-famililes-default);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--line-heights-sm);
   color: var(--select-dark-elements-label-color-text-primary-default);
 }

package/build/css/components/switch.module.css

@@ -16,13 +16,13 @@
   outline-style: solid;
   outline-width: var(--switch-outline-primary-width);
 }
-.root:hover {
+.root:not(:disabled):hover {
   background-color: var(--switch-light-color-background-primary-hover);
   cursor: pointer;
 }
 .root:disabled {
   opacity: var(--switch-opacity-disabled);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .root[data-state="checked"] {
   background-color: var(--switch-light-color-background-primary-active);