@vsn-ux/gaia-styles 0.6.6 → 0.6.8

package/dist/components/modal.css

@@ -2,19 +2,19 @@
 @layer properties;
 .ga-modal__backdrop {
   position: fixed;
-  inset: calc(0.25rem * 0);
+  inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   z-index: 50;
   background-color: var(--ga-color-miscellaneous-overlay);
 }
 .ga-modal__container {
   position: fixed;
-  inset: calc(0.25rem * 0);
+  inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   z-index: 50;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   .ga-modal {
-    margin-top: calc(0.25rem * 16);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
   }
 }
 .ga-modal {
@@ -29,8 +29,8 @@
   border-width: 1px;
   border-color: var(--ga-color-border-focus);
   background-color: #fff;
-  padding-inline: calc(0.25rem * 2);
-  padding-block: calc(0.25rem * 4);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -42,13 +42,13 @@
   ));
   scrollbar-width: thin;
   &.ga-modal--small {
-    width: calc(0.25rem * 85);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 85);
   }
   &.ga-modal--medium {
-    width: calc(0.25rem * 174);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 174);
   }
   &.ga-modal--large {
-    width: calc(0.25rem * 307.5);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 307.5);
   }
   &.ga-modal--danger .ga-modal__icon {
     color: var(--ga-color-icon-error);
@@ -64,30 +64,30 @@
   }
   .ga-modal__top-section {
     display: flex;
-    min-height: calc(0.25rem * 8);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
     flex-shrink: 0;
     align-items: flex-start;
-    gap: calc(0.25rem * 4);
-    padding-inline: calc(0.25rem * 2);
-    padding-bottom: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &.ga-modal__top-section--scrollable {
       flex-shrink: 1;
     }
   }
   .ga-modal__heading {
     display: flex;
-    min-height: calc(0.25rem * 0);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     flex-direction: column;
     align-self: stretch;
   }
   .ga-modal__icon {
-    padding: calc(0.25rem * 2);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-modal__label {
-    margin-bottom: calc(0.25rem * 1);
+    margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     display: flex;
-    min-height: calc(0.25rem * 6);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     align-items: center;
   }
   .ga-modal__title {
@@ -104,33 +104,33 @@
     font-weight: 600;
   }
   .ga-modal__content {
-    margin-top: calc(0.25rem * 4);
-    min-height: calc(0.25rem * 0);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow-y: auto;
-    padding: calc(0.25rem * 2);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &:empty {
-      margin-top: calc(0.25rem * 0);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     }
     scrollbar-width: thin;
   }
   .ga-modal__description {
-    margin-top: calc(0.25rem * 4);
-    min-height: calc(0.25rem * 0);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow-y: auto;
     scrollbar-width: thin;
   }
   .ga-modal__actions {
-    margin-top: calc(0.25rem * 6);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    gap: calc(0.25rem * 2);
-    padding-inline: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-modal__close-icon {
-    margin-top: calc(0.25rem * -2);
-    margin-right: calc(0.25rem * -2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
+    margin-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
   }
 }
 @property --tw-border-style {

package/dist/components/notification.css

@@ -5,16 +5,16 @@
   display: inline-flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: calc(0.25rem * 4);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding-top: calc(0.25rem * 2);
-  padding-right: calc(0.25rem * 2);
-  padding-bottom: calc(0.25rem * 2);
-  padding-left: calc(0.25rem * 4);
+  padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -65,24 +65,24 @@
     }
   }
   .ga-notification__icon {
-    margin-top: calc(0.25rem * 2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     flex-shrink: 0;
     color: var(--ga-color-icon-action);
   }
   .ga-notification__description {
-    margin-top: calc(0.25rem * 2.5);
-    padding-right: calc(0.25rem * 2);
-    padding-bottom: calc(0.25rem * 2.5);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
   }
   .ga-notification__heading {
     display: flex;
-    min-height: calc(0.25rem * 10);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     ~ .ga-notification__description {
-      margin-top: calc(0.25rem * 0);
-      padding-bottom: calc(0.25rem * 0);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     }
   }
   .ga-notification__title {
@@ -94,23 +94,23 @@
     display: flex;
     flex-shrink: 0;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-notification__content {
     flex: 1;
     &:not(:has(.ga-notification__heading)) {
-      min-height: calc(0.25rem * 8);
+      min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
     }
     &:has(.ga-notification__heading) {
-      padding-bottom: calc(0.25rem * 2);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     }
   }
   .ga-notification__progress {
     position: absolute;
-    right: calc(0.25rem * 0);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     bottom: 1px;
-    left: calc(0.25rem * 0);
-    height: calc(0.25rem * 1);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     overflow: hidden;
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;

package/dist/components/page-header.css

@@ -4,8 +4,8 @@
   width: 100%;
   flex-direction: column;
   align-items: flex-start;
-  gap: calc(0.25rem * 1);
-  padding: calc(0.25rem * 0);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   .ga-page-header__global-navigation {
     display: flex;
     width: 100%;
@@ -13,21 +13,21 @@
     justify-content: space-between;
     border-radius: var(--ga-radius);
     background-color: var(--ga-color-surface-primary);
-    padding-inline: calc(0.25rem * 4);
-    padding-block: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__menu-breadcrumbs {
     display: flex;
     flex-shrink: 0;
     flex-grow: 1;
-    flex-basis: calc(0.25rem * 0);
+    flex-basis: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     align-items: center;
-    gap: calc(0.25rem * 4);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   .ga-page-header__header-actions {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     background-color: var(--ga-color-surface-primary);
   }
   .ga-page-header__page-navigation {
@@ -36,24 +36,24 @@
     align-items: center;
     justify-content: space-between;
     align-self: stretch;
-    padding-inline: calc(0.25rem * 4);
-    padding-bottom: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__page-nav-start {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__page-nav-end {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
 }
 @media (max-width: 767px) {
   .ga-page-header .ga-page-header__global-navigation {
     flex-wrap: wrap;
-    row-gap: calc(0.25rem * 2);
+    row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-page-header .ga-page-header__header-actions {
     margin-left: auto;

package/dist/components/progress-bar.css

@@ -2,19 +2,19 @@
 .ga-progress {
   display: flex;
   flex-direction: column;
-  gap: calc(0.25rem * 1);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   .ga-progress__label {
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
-    line-height: calc(0.25rem * 5);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     color: var(--ga-color-text-action);
   }
   .ga-progress__helper {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -28,7 +28,7 @@
   }
   .ga-progress__buffer {
     position: relative;
-    height: calc(0.25rem * 1);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     width: 100%;
     overflow: hidden;
     border-radius: var(--ga-radius);

package/dist/components/progress-indicator.css

@@ -6,16 +6,16 @@
     position: relative;
     display: flex;
     cursor: pointer;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-style: var(--tw-border-style);
     border-width: 0px;
     border-top-style: var(--tw-border-style);
     border-top-width: 2px;
     border-color: var(--ga-color-surface-disabled);
     background-color: transparent;
-    padding: calc(0.25rem * 0);
-    padding-top: calc(0.25rem * 1.5);
-    padding-right: calc(0.25rem * 0.5);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
     text-align: left;
     &:focus-visible {
       --tw-outline-style: none;
@@ -41,25 +41,25 @@
     flex-shrink: 0;
     align-items: flex-start;
     justify-content: center;
-    padding-left: calc(0.25rem * 2);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     .ga-icon {
       margin: 1px;
     }
   }
   .ga-progress-indicator__content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-direction: column;
   }
   .ga-progress-indicator__label {
     display: inline-flex;
-    height: calc(0.25rem * 6);
-    min-width: calc(0.25rem * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     align-items: center;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   }
   .ga-progress-indicator__label-text {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -128,10 +128,10 @@
   }
   .ga-progress-indicator__current-dot {
     position: absolute;
-    top: calc(0.25rem * 2);
-    right: calc(0.25rem * 2);
-    height: calc(0.25rem * 2);
-    width: calc(0.25rem * 2);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: calc(infinity * 1px);
     background-color: var(--ga-color-icon-action);
   }
@@ -145,7 +145,7 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
     border-color: var(--ga-color-border-action);
-    padding-top: calc(0.25rem * 1);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     .ga-progress-indicator__indicator .ga-icon {
       color: var(--ga-color-icon-action);
     }
@@ -159,7 +159,7 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
     border-color: var(--ga-color-border-error);
-    padding-top: calc(0.25rem * 1);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     .ga-progress-indicator__indicator .ga-icon {
       color: var(--ga-color-icon-error);
     }
@@ -186,10 +186,10 @@
       border-top-width: 0px;
       border-left-style: var(--tw-border-style);
       border-left-width: 2px;
-      padding-top: calc(0.25rem * 0);
-      padding-bottom: calc(0.25rem * 6);
+      padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
       .ga-progress-indicator__indicator {
-        padding-left: calc(0.25rem * 1.5);
+        padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
       }
     }
     .ga-progress-indicator__item--current, .ga-progress-indicator__item--error {
@@ -197,9 +197,9 @@
       border-top-width: 0px;
       border-left-style: var(--tw-border-style);
       border-left-width: 4px;
-      padding-top: calc(0.25rem * 0);
+      padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       .ga-progress-indicator__indicator {
-        padding-left: calc(0.25rem * 1);
+        padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       }
     }
   }

package/dist/components/quantity-selector.css

@@ -0,0 +1,80 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+.ga-input--quantity-selector {
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 40);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  &:has(input:disabled):has(input:not(:placeholder-shown)) {
+    .ga-input__quantity-separator {
+      background-color: var(--ga-color-text-on-action);
+    }
+    .ga-input__quantity-button {
+      color: var(--ga-color-text-on-action);
+    }
+  }
+  input {
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    flex: 1;
+    background-color: transparent;
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+    appearance: textfield;
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+  .ga-input__quantity-separator {
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    width: 1px;
+    background-color: var(--ga-color-border-disabled);
+  }
+  .ga-input__quantity-button {
+    display: flex;
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    &:hover:not(:disabled) {
+      border-radius: var(--ga-radius);
+      background-color: var(--ga-color-surface-action-hover-2);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-action-hover);
+    }
+    &:focus-visible {
+      border-radius: var(--ga-radius);
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/quick-filter-button.css

@@ -2,13 +2,13 @@
 @layer properties;
 .ga-quick-filter-button {
   display: inline-flex;
-  height: calc(0.25rem * 10);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   border-radius: calc(infinity * 1px);
-  padding-inline: calc(0.25rem * 4);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -19,8 +19,8 @@
   letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-  --tw-leading: calc(0.25rem * 1);
-  line-height: calc(0.25rem * 1);
+  --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   --tw-font-weight: 500;
   font-weight: 500;
   white-space: nowrap;

package/dist/components/radio.css

@@ -3,16 +3,16 @@
 .ga-radio-group {
   display: inline-flex;
   flex-direction: column;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
 }
 .ga-radio-button {
   position: relative;
   display: inline-flex;
   cursor: pointer;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   .ga-radio-button__native {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     cursor: pointer;
     opacity: 0%;
@@ -33,8 +33,8 @@
         top: calc(1 / 2 * 100%);
         left: calc(1 / 2 * 100%);
         display: block;
-        height: calc(0.25rem * 1);
-        width: calc(0.25rem * 1);
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
         --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
         --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
         translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -78,10 +78,10 @@
   .ga-radio-button__marker {
     pointer-events: none;
     position: absolute;
-    top: calc(0.25rem * 0);
-    left: calc(0.25rem * 0);
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -94,7 +94,7 @@
     transition-timing-function: var(--ga-easing-standard);
   }
   .ga-radio-button__label {
-    min-height: calc(0.25rem * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -104,8 +104,8 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 4);
-    line-height: calc(0.25rem * 4);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     &:empty {
       display: none;
     }

package/dist/components/segmented-control.css

@@ -4,12 +4,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 0.5);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-tertiary);
-  padding: calc(0.25rem * 0.5);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -22,19 +22,19 @@
   ));
   .ga-segmented-control__button {
     display: inline-flex;
-    height: calc(0.25rem * 8.5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8.5);
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: var(--ga-radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    padding-inline: calc(0.25rem * 4);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     vertical-align: middle;
-    --tw-leading: calc(0.25rem * 1);
-    line-height: calc(0.25rem * 1);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     white-space: nowrap;
     color: var(--ga-color-text-action);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -59,7 +59,7 @@
       outline-color: var(--ga-color-border-focus);
     }
     &.ga-segmented-control__button--icon-only {
-      padding-inline: calc(0.25rem * 2.25);
+      padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.25);
       &:hover:not(.ga-segmented-control__button--selected) {
         color: var(--ga-color-icon-action-hover);
       }