@vsn-ux/gaia-styles 0.4.1 → 0.4.3

package/dist/all-no-reset-10pt.css

@@ -1,33 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-leading: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-duration: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 :root {
   --ga-color-black: #000000;
   --ga-color-blue-10: #edf4fe;
@@ -338,7 +310,7 @@
     &.ga-badge--muted {
       background-color: #fff;
       color: var(--ga-color-cyan-70);
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       --tw-ring-color: var(--ga-color-grey-40);
       --tw-ring-inset: inset;
@@ -365,6 +337,7 @@
     line-height: calc(0.4rem * 1);
     --tw-font-weight: 700;
     font-weight: 700;
+    white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1181,6 +1154,7 @@
       vertical-align: middle;
       --tw-leading: calc(0.4rem * 1);
       line-height: calc(0.4rem * 1);
+      white-space: nowrap;
       color: var(--ga-color-text-action);
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
@@ -1196,12 +1170,23 @@
         outline-color: var(--ga-color-border-focus);
       }
       &.ga-segmented-control__button--icon-only {
-        padding-inline: 0.5625rem;
+        padding-inline: calc(0.4rem * 2.25);
         &:hover {
           color: var(--ga-color-icon-action-hover);
         }
       }
     }
+    .ga-segmented-control__button-sr-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
   }
   .ga-native-select {
     position: relative;
@@ -1850,3 +1835,32 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+    }
+  }
+}

package/dist/all-no-reset.css

@@ -1,33 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-leading: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-duration: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 :root {
   --ga-color-black: #000000;
   --ga-color-blue-10: #edf4fe;
@@ -338,7 +310,7 @@
     &.ga-badge--muted {
       background-color: #fff;
       color: var(--ga-color-cyan-70);
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       --tw-ring-color: var(--ga-color-grey-40);
       --tw-ring-inset: inset;
@@ -365,6 +337,7 @@
     line-height: calc(0.25rem * 1);
     --tw-font-weight: 700;
     font-weight: 700;
+    white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1181,6 +1154,7 @@
       vertical-align: middle;
       --tw-leading: calc(0.25rem * 1);
       line-height: calc(0.25rem * 1);
+      white-space: nowrap;
       color: var(--ga-color-text-action);
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
@@ -1196,12 +1170,23 @@
         outline-color: var(--ga-color-border-focus);
       }
       &.ga-segmented-control__button--icon-only {
-        padding-inline: 0.5625rem;
+        padding-inline: calc(0.25rem * 2.25);
         &:hover {
           color: var(--ga-color-icon-action-hover);
         }
       }
     }
+    .ga-segmented-control__button-sr-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
   }
   .ga-native-select {
     position: relative;
@@ -1850,3 +1835,32 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+    }
+  }
+}

package/dist/all.css

@@ -1,33 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-leading: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-duration: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 :root {
   --ga-color-black: #000000;
   --ga-color-blue-10: #edf4fe;
@@ -362,7 +334,10 @@
   }
   @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
     ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
+      color: currentColor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }
     }
   }
   textarea {
@@ -481,7 +456,7 @@
     &.ga-badge--muted {
       background-color: #fff;
       color: var(--ga-color-cyan-70);
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       --tw-ring-color: var(--ga-color-grey-40);
       --tw-ring-inset: inset;
@@ -508,6 +483,7 @@
     line-height: calc(0.25rem * 1);
     --tw-font-weight: 700;
     font-weight: 700;
+    white-space: nowrap;
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1324,6 +1300,7 @@
       vertical-align: middle;
       --tw-leading: calc(0.25rem * 1);
       line-height: calc(0.25rem * 1);
+      white-space: nowrap;
       color: var(--ga-color-text-action);
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
@@ -1339,12 +1316,23 @@
         outline-color: var(--ga-color-border-focus);
       }
       &.ga-segmented-control__button--icon-only {
-        padding-inline: 0.5625rem;
+        padding-inline: calc(0.25rem * 2.25);
         &:hover {
           color: var(--ga-color-icon-action-hover);
         }
       }
     }
+    .ga-segmented-control__button-sr-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
   }
   .ga-native-select {
     position: relative;
@@ -1993,3 +1981,32 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+    }
+  }
+}

package/dist/base.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
 body {
   font-family: Inter, ui-sans-serif, system-ui, sans-serif;
   font-feature-settings: 'liga' 1, 'calt' 1;

package/dist/components/avatar.css

@@ -1,12 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-avatar {
   display: inline-flex;
   height: calc(0.25rem * 10);
@@ -44,3 +37,11 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+    }
+  }
+}

package/dist/components/badge.css

@@ -1,26 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-badge {
   display: inline-block;
   border-radius: calc(infinity * 1px);
@@ -69,7 +48,7 @@
   &.ga-badge--muted {
     background-color: #fff;
     color: var(--ga-color-cyan-70);
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--ga-color-grey-40);
     --tw-ring-inset: inset;
@@ -152,3 +131,25 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@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-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/dist/components/button.css

@@ -1,14 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-outline-style: solid;
-      --tw-border-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-button {
   display: inline-flex;
   height: calc(0.25rem * 10);
@@ -26,6 +17,7 @@
   line-height: calc(0.25rem * 1);
   --tw-font-weight: 700;
   font-weight: 700;
+  white-space: nowrap;
   &:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -125,3 +117,13 @@
   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-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-border-style: solid;
+    }
+  }
+}

package/dist/components/card.css

@@ -1,12 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-card {
   display: inline-block;
   border-radius: var(--ga-radius);
@@ -47,3 +40,11 @@
   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-border-style: solid;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/checkbox.css

@@ -1,13 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-leading: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-checkbox {
   position: relative;
   display: inline-flex;
@@ -108,3 +100,12 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-leading: initial;
+    }
+  }
+}

package/dist/components/dropdown.css

@@ -1,14 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-content: "";
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-dropdown {
   display: flex;
   max-height: calc(0.25rem * 81);
@@ -135,3 +126,13 @@
   inherits: false;
   initial-value: "";
 }
+@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-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-content: "";
+    }
+  }
+}

package/dist/components/form-field.css

@@ -1,14 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-leading: initial;
-      --tw-outline-style: solid;
-      --tw-font-weight: initial;
-      --tw-border-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-form-field {
   display: flex;
   flex-direction: column;
@@ -98,3 +89,13 @@
   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;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+    }
+  }
+}

package/dist/components/input.css

@@ -1,13 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-leading: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-input {
   display: flex;
   height: calc(0.25rem * 10);
@@ -96,3 +88,12 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-leading: initial;
+    }
+  }
+}

package/dist/components/menu.css

@@ -1,14 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-content: "";
-      --tw-font-weight: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-menu {
   display: flex;
   max-height: calc(0.25rem * 81);
@@ -195,3 +186,13 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-leading: initial;
+      --tw-content: "";
+      --tw-font-weight: initial;
+    }
+  }
+}

package/dist/components/notification.css

@@ -1,12 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-notification {
   display: inline-flex;
   flex-direction: row;
@@ -83,3 +76,11 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+    }
+  }
+}

package/dist/components/radio.css

@@ -1,17 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-outline-style: solid;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-content: "";
-      --tw-border-style: solid;
-      --tw-leading: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-radio-group {
   display: inline-flex;
   flex-direction: column;
@@ -147,3 +135,16 @@
   syntax: "*";
   inherits: false;
 }
+@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-outline-style: solid;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-content: "";
+      --tw-border-style: solid;
+      --tw-leading: initial;
+    }
+  }
+}

package/dist/components/segmented-control.css

@@ -1,13 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-outline-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-segmented-control {
   display: inline-flex;
   align-items: center;
@@ -38,6 +30,7 @@
     vertical-align: middle;
     --tw-leading: calc(0.25rem * 1);
     line-height: calc(0.25rem * 1);
+    white-space: nowrap;
     color: var(--ga-color-text-action);
     &.ga-segmented-control__button--selected, &:hover {
       border-color: var(--ga-color-border-action);
@@ -53,12 +46,23 @@
       outline-color: var(--ga-color-border-focus);
     }
     &.ga-segmented-control__button--icon-only {
-      padding-inline: 0.5625rem;
+      padding-inline: calc(0.25rem * 2.25);
       &:hover {
         color: var(--ga-color-icon-action-hover);
       }
     }
   }
+  .ga-segmented-control__button-sr-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 }
 @property --tw-border-style {
   syntax: "*";
@@ -74,3 +78,12 @@
   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-border-style: solid;
+      --tw-leading: initial;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/select.css

@@ -1,16 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-outline-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-native-select {
   position: relative;
   select {
@@ -150,3 +139,15 @@
   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-border-style: solid;
+      --tw-leading: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/switch.css

@@ -1,16 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-duration: initial;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-outline-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-switch {
   position: relative;
   display: inline-flex;
@@ -151,3 +140,15 @@
   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-border-style: solid;
+      --tw-duration: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/tag.css

@@ -1,12 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-tag {
   box-sizing: content-box;
   display: inline-flex;
@@ -191,3 +184,11 @@
   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-border-style: solid;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/dist/components/text-area.css

@@ -1,13 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-leading: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-text-area {
   display: flex;
   width: calc(0.25rem * 50);
@@ -70,3 +62,12 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-leading: initial;
+    }
+  }
+}

package/dist/components/tooltip.css

@@ -1,16 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-content: "";
-      --tw-border-style: solid;
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-font-weight: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-tooltip {
   position: relative;
   max-width: calc(0.25rem * 100);
@@ -136,3 +125,15 @@
   syntax: "*";
   inherits: false;
 }
+@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-content: "";
+      --tw-border-style: solid;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-font-weight: initial;
+    }
+  }
+}

package/dist/components.css

@@ -1,33 +1,5 @@
-/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-leading: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-duration: initial;
-    }
-  }
-}
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 .ga-avatar {
   display: inline-flex;
   height: calc(0.25rem * 10);
@@ -104,7 +76,7 @@
   &.ga-badge--muted {
     background-color: #fff;
     color: var(--ga-color-cyan-70);
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--ga-color-grey-40);
     --tw-ring-inset: inset;
@@ -131,6 +103,7 @@
   line-height: calc(0.25rem * 1);
   --tw-font-weight: 700;
   font-weight: 700;
+  white-space: nowrap;
   &:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -947,6 +920,7 @@
     vertical-align: middle;
     --tw-leading: calc(0.25rem * 1);
     line-height: calc(0.25rem * 1);
+    white-space: nowrap;
     color: var(--ga-color-text-action);
     &.ga-segmented-control__button--selected, &:hover {
       border-color: var(--ga-color-border-action);
@@ -962,12 +936,23 @@
       outline-color: var(--ga-color-border-focus);
     }
     &.ga-segmented-control__button--icon-only {
-      padding-inline: 0.5625rem;
+      padding-inline: calc(0.25rem * 2.25);
       &:hover {
         color: var(--ga-color-icon-action-hover);
       }
     }
   }
+  .ga-segmented-control__button-sr-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 }
 .ga-native-select {
   position: relative;
@@ -1615,3 +1600,32 @@
   syntax: "*";
   inherits: false;
 }
+@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-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-duration: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/styles/components/button.css

@@ -1,5 +1,5 @@
 .ga-button {
-  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-bold;
+  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-bold whitespace-nowrap;
 
   &:focus-visible {
     @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);

package/src/styles/components/segmented-control.css

@@ -2,7 +2,7 @@
   @apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-primary) p-0.5 align-middle;
 
   .ga-segmented-control__button {
-    @apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 text-(--ga-color-text-action);
+    @apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action);
 
     &.ga-segmented-control__button--selected,
     &:hover {
@@ -18,11 +18,15 @@
     }
 
     &.ga-segmented-control__button--icon-only {
-      @apply px-[0.5625rem];
+      @apply px-2.25;
 
       &:hover {
         @apply text-(--ga-color-icon-action-hover);
       }
     }
   }
+
+  .ga-segmented-control__button-sr-label {
+    @apply sr-only;
+  }
 }