@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/select.css

@@ -5,33 +5,14 @@
   flex-shrink: 0;
   user-select: none;
   vertical-align: top;
-  line-height: var(--height);
 
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
   font-style: normal;
   text-align: start;
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
   /* Selected values use medium font weight */
   &:where(:not([data-placeholder])) {
     & :where(.rt-SelectTriggerInner) {
@@ -43,8 +24,6 @@
     outline: var(--focus-outline-width) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
   }
-
-  /* Reduced motion support */
 }
 
 .rt-SelectTriggerInner {
@@ -61,13 +40,6 @@
 }
 
 .rt-SelectContent {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
   --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
@@ -76,7 +48,6 @@
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
   background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
 
   &:where([data-side]) {
@@ -91,7 +62,7 @@
   padding: var(--select-content-padding);
 
   :where(.rt-SelectContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-3);
+    padding-right: var(--space-4);
   }
 }
 
@@ -120,8 +91,8 @@
     height: auto;
     min-height: var(--select-item-height);
     align-items: flex-start;
-    padding-top: var(--space-2);
-    padding-bottom: var(--space-2);
+    padding-top: var(--space-3);
+    padding-bottom: var(--space-3);
   }
 }
 
@@ -136,8 +107,8 @@
 
 .rt-SelectSeparator {
   height: var(--separator-height-thin);
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-3);
   margin-left: var(--select-item-indicator-width);
   margin-right: var(--select-separator-margin-right);
 }
@@ -153,7 +124,7 @@
   cursor: default;
 
   :where(.rt-SelectItem) + & {
-    margin-top: var(--space-2);
+    margin-top: var(--space-3);
   }
 }
 
@@ -165,37 +136,34 @@
 
 .rt-SelectTrigger {
   color: var(--gray-12);
+  box-sizing: border-box;
+  /* min-height, not height: a hard height clips text resized to 200%. */
+  min-height: var(--select-trigger-height);
+  gap: var(--select-trigger-gap);
 
-  &:where(:not(.rt-variant-ghost)) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-  }
-  &:where(.rt-variant-ghost) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-    padding: 0 var(--select-trigger-ghost-padding-x);
-
-  }
+  /*
+   * The label's edge is bare, so under a full radius it pads wider (the curve cuts into the
+   * text). `--radius-full` is 0px below `full` and 9999px at `full`. The chevron's edge keeps
+   * the plain padding.
+   */
+  padding-left: calc(
+    var(--select-trigger-px) + min(var(--radius-full, 0px), var(--select-trigger-px-pill) - var(--select-trigger-px))
+  );
+  padding-right: var(--select-trigger-px);
 }
 
 @breakpoints {
   .rt-SelectTrigger {
     &:where(.rt-r-size-1) {
       --select-trigger-height: var(--control-height-1);
-      gap: var(--component-gap-1);
+      --select-trigger-px: var(--control-px-1);
+      --select-trigger-px-pill: var(--control-px-pill-1);
+      --select-trigger-gap: var(--control-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-pill-1);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-2);
-        padding-right: var(--space-2);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-1);
-        --select-trigger-ghost-padding-x: var(--space-2);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-1);
         height: var(--trigger-icon-size-1);
@@ -203,20 +171,14 @@
     }
     &:where(.rt-r-size-2) {
       --select-trigger-height: var(--control-height-2);
-      gap: var(--component-gap-2);
+      --select-trigger-px: var(--control-px-2);
+      --select-trigger-px-pill: var(--control-px-pill-2);
+      --select-trigger-gap: var(--control-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-pill-2);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-2);
-        --select-trigger-ghost-padding-x: var(--space-2);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-2);
         height: var(--trigger-icon-size-2);
@@ -224,20 +186,14 @@
     }
     &:where(.rt-r-size-3) {
       --select-trigger-height: var(--control-height-3);
-      gap: var(--component-gap-3);
+      --select-trigger-px: var(--control-px-3);
+      --select-trigger-px-pill: var(--control-px-pill-3);
+      --select-trigger-gap: var(--control-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       border-radius: var(--radius-pill-3);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-3);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-3);
         height: var(--trigger-icon-size-3);
@@ -245,20 +201,14 @@
     }
     &:where(.rt-r-size-4) {
       --select-trigger-height: var(--control-height-4);
-      gap: var(--component-gap-4);
+      --select-trigger-px: var(--control-px-4);
+      --select-trigger-px-pill: var(--control-px-pill-4);
+      --select-trigger-gap: var(--control-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       border-radius: var(--radius-pill-4);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-4);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-4);
         height: var(--trigger-icon-size-4);
@@ -276,10 +226,10 @@
 @breakpoints {
   .rt-SelectContent {
     &:where(.rt-r-size-1) {
-      --select-content-padding: var(--space-1);
+      --select-content-padding: var(--space-2);
       --select-item-height: var(--control-height-1);
-      --select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
-      --select-separator-margin-right: var(--space-2);
+      --select-item-indicator-width: calc(var(--space-6) / var(--select-item-indicator-width-factor));
+      --select-separator-margin-right: var(--space-3);
       border-radius: var(--radius-surface-3);
 
       & :where(.rt-SelectLabel) {
@@ -299,9 +249,9 @@
       }
     }
     &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
-      --select-content-padding: var(--space-2);
-      --select-item-indicator-width: var(--space-5);
-      --select-separator-margin-right: var(--space-3);
+      --select-content-padding: var(--space-3);
+      --select-item-indicator-width: var(--space-6);
+      --select-separator-margin-right: var(--space-4);
       border-radius: var(--radius-surface-4);
 
       & :where(.rt-SelectLabel) {
@@ -368,80 +318,24 @@
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: var(--color-surface);
-  }
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--color-surface);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: var(--color-surface);
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-2);
-
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      }
-
-      /* Component-level overrides for hover */
-      &:where([data-material='solid']) {
-        background-color: var(--accent-2);
-      }
-
-      &:where([data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      }
     }
   }
 
   &:where([data-state='open']) {
     background-color: var(--accent-3);
-
-    /* Theme-level translucent override for open */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
-
-    /* Component-level overrides for open */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
   }
 
   &:where(:active:not([data-state='open'], [data-disabled])) {
     background-color: var(--accent-3);
-
-    /* Theme-level translucent override for active */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
-
-    /* Component-level overrides for active */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
   }
 
   &:where(:disabled) {
@@ -449,8 +343,7 @@
     background-color: var(--gray-a3);
     box-shadow: none;
     outline: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
     top: 0;
   }
 
@@ -464,90 +357,32 @@
 /* soft */
 
 .rt-SelectTrigger:where(.rt-variant-soft) {
-  /* Base state: solid accent for solid panels */
   background-color: var(--accent-3);
   color: var(--accent-ink);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  }
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--accent-3);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--accent-8);
     outline-offset: -1px;
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-4);
-      
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-      }
-
-      /* Component-level overrides for hover */
-      &:where([data-material='solid']) {
-        background-color: var(--accent-4);
-      }
-
-      &:where([data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-      }
     }
   }
 
   &:where([data-state='open']) {
     background-color: var(--accent-4);
-    
-    /* Theme-level translucent override for open */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-    }
-
-    /* Component-level overrides for open */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-4);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-    }
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-5);
-    
-    /* Theme-level translucent override for active */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-    }
-
-    /* Component-level overrides for active */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-5);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a5), var(--accent-5) 60%);
-    }
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -573,28 +408,8 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
-      /* Base state: solid accent for solid panels */
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
-      
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
-
-      /* Component-level overrides for hover */
-      &:where([data-material='solid']) {
-        background-color: var(--accent-3);
-      }
-
-      &:where([data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
-
-      /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-      /* :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-        backdrop-filter: none !important;
-      } */
     }
   }
 
@@ -604,148 +419,41 @@
   }
 
   &:where([data-state='open']) {
-    /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
-    
-    /* Theme-level translucent override for open */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
-
-    /* Component-level overrides for open */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
-
-    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-    /* :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-      backdrop-filter: none !important;
-    } */
   }
 
-  &:where(:active:not([data-state='open'])) {
-    /* Base state: solid accent for solid panels */
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
-    
-    /* Theme-level translucent override for active */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-    }
-
-    /* Component-level overrides for active */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-4);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-    }
-
-    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-    /* :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-      backdrop-filter: none !important;
-    } */
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
 /* outline */
 
 .rt-SelectTrigger:where(.rt-variant-outline) {
-  /* Base state: solid colors for solid panels */
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    box-shadow: inset 0 0 0 1px var(--accent-a6);
-  }
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    box-shadow: inset 0 0 0 1px var(--accent-6);
-  }
-
-  &:where([data-material='translucent']) {
-    box-shadow: inset 0 0 0 1px var(--accent-a6);
-  }
-
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
-      
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
-
-      /* Component-level overrides for hover */
-      &:where([data-material='solid']) {
-        background-color: var(--accent-2);
-        box-shadow: inset 0 0 0 1px var(--accent-7);
-      }
-
-      &:where([data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
     }
   }
 
   &:where([data-state='open']) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
-    
-    /* Theme-level translucent override for open */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a7);
-    }
-
-    /* Component-level overrides for open */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a7);
-    }
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-8);
-    
-    /* Theme-level translucent override for active */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
-
-    /* Component-level overrides for active */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
   }
 
   &:where(:focus-visible) {
@@ -757,8 +465,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -772,94 +479,25 @@
 /* surface */
 
 .rt-SelectTrigger:where(.rt-variant-surface) {
-  /* Base state: solid accent for solid panels */
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a6);
-  }
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-6);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a6);
-  }
-
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-7);
-      
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
-
-      /* Component-level overrides for hover */
-      &:where([data-material='solid']) {
-        background-color: var(--accent-3);
-        box-shadow: inset 0 0 0 1px var(--accent-7);
-      }
-
-      &:where([data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        box-shadow: inset 0 0 0 1px var(--accent-a7);
-      }
     }
   }
 
   &:where([data-state='open']) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-8);
-    
-    /* Theme-level translucent override for open */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
-
-    /* Component-level overrides for open */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
     box-shadow: inset 0 0 0 1px var(--accent-8);
-    
-    /* Theme-level translucent override for active */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
-
-    /* Component-level overrides for active */
-    &:where([data-material='solid']) {
-      background-color: var(--accent-4);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
   }
 
   &:where(:focus-visible) {
@@ -871,8 +509,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
     background-color: var(--gray-a2);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -883,22 +520,50 @@
   }
 }
 
-/* all disabled */
+/* all disabled: a colour remap, never opacity, and the arrow cursor */
 .rt-SelectTrigger {
   &:where(:disabled) {
     & :where(.rt-SelectIcon) {
       color: var(--gray-a9);
     }
+    &:where([data-placeholder]) :where(.rt-SelectTriggerInner) {
+      color: var(--gray-a8);
+      opacity: 1;
+    }
   }
 }
 
-/* Error state styling */
-.rt-SelectTrigger:where([data-error="true"]) {
-  box-shadow: inset 0 0 0 1px var(--red-9);
-}
+/*
+ * Invalid. Keyed on `aria-invalid`, which the `error` prop sets, so both paths style the same.
+ * Only the border and the focus ring move; the fill stays the variant's.
+ */
+.rt-SelectTrigger:where([aria-invalid='true']) {
+  &:where(:not(.rt-variant-raised)) {
+    box-shadow: inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: inset 0 0 0 1px var(--red-7);
+      }
+    }
+    &:where([data-state='open'], :active) {
+      box-shadow: inset 0 0 0 1px var(--red-7);
+    }
+  }
+
+  &:where(.rt-variant-raised) {
+    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
+      }
+    }
+  }
 
-.rt-SelectTrigger:where([data-error="true"]:focus-visible) {
-  outline: 2px solid var(--red-8);
+  &:where(:focus-visible) {
+    outline-color: var(--red-8);
+  }
 }
 
 /* Loading state styling */
@@ -930,11 +595,9 @@
   }
 }
 
-/* Reduced motion support */
-
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-SelectTrigger:where([data-error="true"]) {
+  .rt-SelectTrigger:where([aria-invalid='true']) {
     border: 1px solid CanvasText;
   }
 }