@accelint/design-toolkit 6.0.0 → 7.0.1

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
 @layer properties;
 @font-face {
   font-family: 'Roboto Flex Variable';
@@ -370,6 +370,12 @@
   .left-s {
     left: var(--spacing-s);
   }
+  .isolate {
+    isolation: isolate;
+  }
+  .z-10 {
+    z-index: 10;
+  }
   .-order-1 {
     order: calc(1 * -1);
   }
@@ -609,6 +615,9 @@
   .min-h-\[48px\] {
     min-height: 48px;
   }
+  .min-h-\[50px\] {
+    min-height: 50px;
+  }
   .min-h-l {
     min-height: var(--spacing-l);
   }
@@ -918,6 +927,13 @@
   .gap-xxs {
     gap: var(--spacing-xxs);
   }
+  .space-y-l {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-l) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-l) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-s {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1008,6 +1024,9 @@
   .\!bg-surface-default {
     background-color: var(--bg-surface-default) !important;
   }
+  .\[background-color\:var\(--fg-accent-primary-bold\)\] {
+    background-color: var(--fg-accent-primary-bold);
+  }
   .bg-\[\#E8178A\]\/40 {
     background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
@@ -1569,6 +1588,9 @@
   .outline {
     outline-offset: -1px;
   }
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
   .outline-\[\#E8178A\] {
     outline-color: #E8178A;
   }
@@ -1653,6 +1675,10 @@
   .outline-transparent {
     outline-color: transparent;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1900,11 +1926,20 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-hover\/checkbox\:bg-accent-primary-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
-          outline-color: var(--outline-interactive-hover);
+          background-color: var(--bg-accent-primary-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-hover\/checkbox\:outline-accent-primary-hover {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
+          outline-color: var(--outline-accent-primary-hover);
         }
       }
     }
@@ -1916,11 +1951,20 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus-visible\/checkbox\:bg-accent-primary-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--outline-interactive-hover);
+          background-color: var(--bg-accent-primary-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus-visible\/checkbox\:outline-accent-primary-hover {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
+          outline-color: var(--outline-accent-primary-hover);
         }
       }
     }
@@ -2119,6 +2163,22 @@
       --icon-color: var(--fg-disabled);
     }
   }
+  .group-disabled\/slider\:cursor-not-allowed {
+    &:is(:where(.group\/slider):where([disabled], [data-disabled], :disabled) *) {
+      cursor: not-allowed;
+    }
+  }
+  .group-disabled\/slider\:fg-disabled {
+    &:is(:where(.group\/slider):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--fg-disabled);
+      --icon-color: var(--fg-disabled);
+    }
+  }
+  .group-disabled\/slider\:outline-interactive-disabled {
+    &:is(:where(.group\/slider):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--outline-interactive-disabled);
+    }
+  }
   .group-disabled\/switch\:bg-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       background-color: var(--bg-interactive-disabled);
@@ -2196,14 +2256,6 @@
       }
     }
   }
-  .group-enabled\/options-item\:group-color-serious\/options-item\:fg-serious-bold {
-    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
-        color: var(--fg-serious-bold);
-        --icon-color: var(--fg-serious-bold);
-      }
-    }
-  }
   .group-enabled\/options-item\:group-hover\/options-item\:group-color-serious\/options-item\:fg-a11y-on-accent {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
@@ -2676,11 +2728,6 @@
       gap: var(--spacing-l);
     }
   }
-  .group-size-medium\/select-field\:min-w-\[220px\] {
-    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
-      min-width: 220px;
-    }
-  }
   .group-size-medium\/select-field\:gap-s {
     &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
       gap: var(--spacing-s);
@@ -3247,6 +3294,115 @@
       display: none;
     }
   }
+  .group-enabled\/checkbox\:group-pressed\/checkbox\:outline-interactive-pressed {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-pressed], :active) *) {
+        outline-color: var(--outline-interactive-pressed);
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-pressed\/checkbox\:bg-accent-primary-pressed {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        &:is(:where(.group\/checkbox):where([data-pressed], :active) *) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-pressed\/checkbox\:outline-accent-primary-pressed {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        &:is(:where(.group\/checkbox):where([data-pressed], :active) *) {
+          outline-color: var(--outline-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-pressed\/menu-item\:group-color-info\/menu-item\:fg-accent-primary-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/menu-item):where([data-color="info"]) *) {
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-pressed\/menu-item\:group-color-serious\/menu-item\:fg-serious-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/menu-item):where([data-color="serious"]) *) {
+          color: var(--fg-serious-bold);
+          --icon-color: var(--fg-serious-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-pressed\/menu-item\:group-color-critical\/menu-item\:fg-critical-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/menu-item):where([data-color="critical"]) *) {
+          color: var(--fg-critical-bold);
+          --icon-color: var(--fg-critical-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/options-item\:group-pressed\/options-item\:group-color-info\/options-item\:fg-accent-primary-bold {
+    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/options-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/options-item\:group-pressed\/options-item\:group-color-info\/options-item\:fg-accent-primary-pressed {
+    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/options-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
+          color: var(--fg-accent-primary-pressed);
+          --icon-color: var(--fg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/options-item\:group-pressed\/options-item\:group-color-serious\/options-item\:fg-serious-bold {
+    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/options-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
+          color: var(--fg-serious-bold);
+          --icon-color: var(--fg-serious-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/options-item\:group-pressed\/options-item\:group-color-critical\/options-item\:fg-critical-bold {
+    &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/options-item):where([data-pressed], :active) *) {
+        &:is(:where(.group\/options-item):where([data-color="critical"]) *) {
+          color: var(--fg-critical-bold);
+          --icon-color: var(--fg-critical-bold);
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-pressed\/radio\:outline-interactive-pressed {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-pressed], :active) *) {
+        outline-color: var(--outline-interactive-pressed);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-pressed\/switch\:outline-interactive-pressed {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-pressed], :active) *) {
+        outline-color: var(--outline-interactive-pressed);
+      }
+    }
+  }
   .group-selected\:rotate-180 {
     &:is(:where(.group):where([data-selected], :checked) *) {
       rotate: 180deg;
@@ -3274,20 +3430,38 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/checkbox\:bg-accent-primary-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
         &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
-          outline-color: var(--outline-interactive-hover);
+          background-color: var(--bg-accent-primary-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/checkbox\:outline-accent-primary-hover {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
+          outline-color: var(--outline-accent-primary-hover);
         }
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus-visible\/checkbox\:bg-accent-primary-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
         &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--outline-interactive-hover);
+          background-color: var(--bg-accent-primary-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus-visible\/checkbox\:outline-accent-primary-hover {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
+          outline-color: var(--outline-accent-primary-hover);
         }
       }
     }
@@ -3307,6 +3481,68 @@
       }
     }
   }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-pressed\/checkbox\:bg-accent-primary-pressed {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        &:is(:where(.group\/checkbox):where([data-pressed], :active) *) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-pressed\/checkbox\:outline-accent-primary-pressed {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        &:is(:where(.group\/checkbox):where([data-pressed], :active) *) {
+          outline-color: var(--outline-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-selected\/menu-item\:group-pressed\/menu-item\:group-color-info\/menu-item\:fg-accent-primary-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-selected], :checked) *) {
+        &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+          &:is(:where(.group\/menu-item):where([data-color="info"]) *) {
+            color: var(--fg-accent-primary-bold);
+            --icon-color: var(--fg-accent-primary-bold);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-selected\/menu-item\:group-pressed\/menu-item\:group-color-serious\/menu-item\:fg-serious-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-selected], :checked) *) {
+        &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+          &:is(:where(.group\/menu-item):where([data-color="serious"]) *) {
+            color: var(--fg-serious-bold);
+            --icon-color: var(--fg-serious-bold);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\/menu-item\:group-selected\/menu-item\:group-pressed\/menu-item\:group-color-critical\/menu-item\:fg-critical-bold {
+    &:is(:where(.group\/menu-item):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/menu-item):where([data-selected], :checked) *) {
+        &:is(:where(.group\/menu-item):where([data-pressed], :active) *) {
+          &:is(:where(.group\/menu-item):where([data-color="critical"]) *) {
+            color: var(--fg-critical-bold);
+            --icon-color: var(--fg-critical-bold);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:outline-1 {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+      }
+    }
+  }
   .group-enabled\/radio\:group-selected\/radio\:outline-accent-primary-bold {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
@@ -3323,11 +3559,30 @@
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
+  .group-enabled\/radio\:group-selected\/radio\:group-focus-visible\/radio\:outline-accent-primary-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
-          outline-color: var(--outline-interactive-hover);
+          outline-color: var(--outline-accent-primary-hover);
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:group-pressed\/radio\:outline-2 {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &:is(:where(.group\/radio):where([data-pressed], :active) *) {
+          outline-style: var(--tw-outline-style);
+          outline-width: 2px;
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:group-pressed\/radio\:outline-info-pressed {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &:is(:where(.group\/radio):where([data-pressed], :active) *) {
+          outline-color: var(--outline-info-pressed);
         }
       }
     }
@@ -3375,6 +3630,24 @@
       }
     }
   }
+  .group-enabled\/switch\:group-selected\/switch\:group-pressed\/switch\:bg-accent-primary-pressed {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+        &:is(:where(.group\/switch):where([data-pressed], :active) *) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-pressed\/switch\:outline-accent-primary-pressed {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+        &:is(:where(.group\/switch):where([data-pressed], :active) *) {
+          outline-color: var(--outline-accent-primary-pressed);
+        }
+      }
+    }
+  }
   .placeholder\:fg-primary-muted {
     &::placeholder {
       color: var(--fg-primary-muted);
@@ -3437,105 +3710,163 @@
       border-radius: calc(infinity * 1px);
     }
   }
-  .before\:bg-info-bold {
+  .before\:\[background-color\:var\(--fg-primary-muted\)\] {
     &::before {
       content: var(--tw-content);
-      background-color: var(--bg-info-bold);
+      background-color: var(--fg-primary-muted);
     }
   }
-  .group-enabled\/switch\:group-hover\/switch\:before\:bg-interactive-bold-hover {
+  .group-enabled\/switch\:group-hover\/switch\:before\:\[background-color\:var\(--fg-primary-bold\)\] {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--bg-interactive-bold-hover);
+          background-color: var(--fg-primary-bold);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-focus-visible\/switch\:before\:bg-interactive-bold-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:before\:\[background-color\:var\(--fg-primary-bold\)\] {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--bg-interactive-bold-hover);
+          background-color: var(--fg-primary-bold);
         }
       }
     }
   }
-  .group-disabled\/switch\:before\:bg-interactive-disabled {
+  .group-disabled\/switch\:before\:\[background-color\:var\(--fg-disabled\)\] {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       &::before {
         content: var(--tw-content);
-        background-color: var(--bg-interactive-disabled);
+        background-color: var(--fg-disabled);
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:before\:bg-accent-primary-bold {
-    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+  .group-enabled\/switch\:group-pressed\/switch\:before\:\[background-color\:var\(--fg-pressed\)\] {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-pressed], :active) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--fg-pressed);
         }
       }
     }
   }
-  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
-    &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
+  .group-enabled\/radio\:group-selected\/radio\:before\:\[background-color\:var\(--fg-accent-primary-bold\)\] {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--bg-interactive-disabled);
+          background-color: var(--fg-accent-primary-bold);
         }
       }
     }
   }
-  .group-selected\/switch\:before\:mr-0 {
-    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-      &::before {
-        content: var(--tw-content);
-        margin-right: var(--spacing-0);
+  .group-enabled\/radio\:group-selected\/radio\:group-hover\/radio\:before\:\[background-color\:var\(--fg-accent-primary-hover\)\] {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--fg-accent-primary-hover);
+          }
+        }
       }
     }
   }
-  .group-selected\/switch\:before\:ml-l {
-    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-      &::before {
-        content: var(--tw-content);
-        margin-left: var(--spacing-l);
+  .group-enabled\/radio\:group-selected\/radio\:group-focus-visible\/radio\:before\:\[background-color\:var\(--fg-accent-primary-hover\)\] {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--fg-accent-primary-hover);
+          }
+        }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:before\:bg-accent-primary-bold {
-    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
+    &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--bg-interactive-disabled);
+        }
+      }
+    }
+  }
+  .group-enabled\/radio\:group-selected\/radio\:group-pressed\/radio\:before\:\[background-color\:var\(--fg-accent-primary-pressed\)\] {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &:is(:where(.group\/radio):where([data-pressed], :active) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--fg-accent-primary-pressed);
+          }
+        }
+      }
+    }
+  }
+  .group-selected\/switch\:before\:mr-0 {
+    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+      &::before {
+        content: var(--tw-content);
+        margin-right: var(--spacing-0);
+      }
+    }
+  }
+  .group-selected\/switch\:before\:ml-l {
+    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+      &::before {
+        content: var(--tw-content);
+        margin-left: var(--spacing-l);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:before\:\[background-color\:var\(--fg-accent-primary-bold\)\] {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--fg-accent-primary-bold);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:before\:bg-accent-primary-bold {
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:before\:\[background-color\:var\(--fg-accent-primary-hover\)\] {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
           &::before {
             content: var(--tw-content);
-            background-color: var(--bg-accent-primary-bold);
+            background-color: var(--fg-accent-primary-hover);
           }
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:bg-accent-primary-bold {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:\[background-color\:var\(--fg-accent-primary-hover\)\] {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           &::before {
             content: var(--tw-content);
-            background-color: var(--bg-accent-primary-bold);
+            background-color: var(--fg-accent-primary-hover);
+          }
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-pressed\/switch\:before\:\[background-color\:var\(--fg-accent-primary-pressed\)\] {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+        &:is(:where(.group\/switch):where([data-pressed], :active) *) {
+          &::before {
+            content: var(--tw-content);
+            background-color: var(--fg-accent-primary-pressed);
           }
         }
       }
@@ -3644,11 +3975,21 @@
       }
     }
   }
+  .hover\:\[background-color\:var\(--fg-accent-primary-hover\)\] {
+    &:where([data-hovered], :hover) {
+      background-color: var(--fg-accent-primary-hover);
+    }
+  }
   .hover\:bg-info-bold {
     &:where([data-hovered], :hover) {
       background-color: var(--bg-info-bold);
     }
   }
+  .hover\:bg-interactive-muted-hover {
+    &:where([data-hovered], :hover) {
+      background-color: var(--bg-interactive-muted-hover);
+    }
+  }
   .hover\:fg-info-hover {
     &:where([data-hovered], :hover) {
       color: var(--fg-info-hover);
@@ -3671,12 +4012,6 @@
       opacity: 100%;
     }
   }
-  .hover\:outline-4 {
-    &:where([data-hovered], :hover) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 4px;
-    }
-  }
   .hover\:outline-interactive-hover {
     &:where([data-hovered], :hover) {
       outline-color: var(--outline-interactive-hover);
@@ -3721,6 +4056,11 @@
       background-color: var(--bg-accent-primary-bold);
     }
   }
+  .focus-visible\:bg-interactive-muted-hover {
+    &:where([data-focus-visible], :focus-visible) {
+      background-color: var(--bg-interactive-muted-hover);
+    }
+  }
   .focus-visible\:fg-a11y-on-accent {
     &:where([data-focus-visible], :focus-visible) {
       color: var(--fg-a11y-on-accent);
@@ -3733,12 +4073,6 @@
       --icon-color: var(--fg-info-hover);
     }
   }
-  .focus-visible\:outline-4 {
-    &:where([data-focus-visible], :focus-visible) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 4px;
-    }
-  }
   .focus-visible\:outline-interactive-hover {
     &:where([data-focus-visible], :focus-visible) {
       outline-color: var(--outline-interactive-hover);
@@ -3792,6 +4126,12 @@
       --icon-color: var(--fg-primary-bold);
     }
   }
+  .enabled\:fg-primary-muted {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      color: var(--fg-primary-muted);
+      --icon-color: var(--fg-primary-muted);
+    }
+  }
   .enabled\:group-invalid\/input\:outline-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
@@ -3893,6 +4233,14 @@
       }
     }
   }
+  .enabled\:hover\:fg-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        color: var(--fg-hover);
+        --icon-color: var(--fg-hover);
+      }
+    }
+  }
   .enabled\:hover\:fg-info-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -3909,6 +4257,14 @@
       }
     }
   }
+  .enabled\:hover\:outline-2 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+      }
+    }
+  }
   .enabled\:hover\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -3993,6 +4349,14 @@
       }
     }
   }
+  .enabled\:focus-visible\:outline-2 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+      }
+    }
+  }
   .enabled\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
@@ -4024,6 +4388,11 @@
       border-style: none;
     }
   }
+  .disabled\:\[background-color\:var\(--fg-disabled\)\] {
+    &:where([disabled], [data-disabled], :disabled) {
+      background-color: var(--fg-disabled);
+    }
+  }
   .disabled\:bg-interactive-disabled {
     &:where([disabled], [data-disabled], :disabled) {
       background-color: var(--bg-interactive-disabled);
@@ -4075,6 +4444,24 @@
       --drawer-main-col-start: 2;
     }
   }
+  .has-\[button\:focus-visible\]\:fg-hover {
+    &:has(*:is(button:focus-visible)) {
+      color: var(--fg-hover);
+      --icon-color: var(--fg-hover);
+    }
+  }
+  .has-\[button\:hover\]\:fg-hover {
+    &:has(*:is(button:hover)) {
+      color: var(--fg-hover);
+      --icon-color: var(--fg-hover);
+    }
+  }
+  .has-\[button\[data-pressed\]\]\:fg-pressed {
+    &:has(*:is(button[data-pressed])) {
+      color: var(--fg-pressed);
+      --icon-color: var(--fg-pressed);
+    }
+  }
   .has-\[\+\[data-selected\]\]\:not-selected\:border-b-\[var\(--outline-accent-primary-bold\)\] {
     &:has(+[data-selected]) {
       &:not(*:where([data-selected], :checked)) {
@@ -4183,14 +4570,6 @@
       outline-color: var(--outline-info-bold);
     }
   }
-  .color-info\:enabled\:fg-primary-bold {
-    &:where([data-color="info"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        color: var(--fg-primary-bold);
-        --icon-color: var(--fg-primary-bold);
-      }
-    }
-  }
   .enabled\:color-info\:fg-primary-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
@@ -4199,39 +4578,29 @@
       }
     }
   }
-  .color-info\:enabled\:open\:bg-accent-primary-bold {
-    &:where([data-color="info"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([open], [data-open], :open) {
-          background-color: var(--bg-accent-primary-bold);
-        }
-      }
-    }
-  }
-  .color-info\:enabled\:open\:fg-a11y-on-accent {
+  .color-info\:enabled\:open\:bg-accent-primary-muted {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          color: var(--fg-a11y-on-accent);
-          --icon-color: var(--fg-a11y-on-accent);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
   }
-  .color-info\:enabled\:hover\:bg-accent-primary-bold {
+  .color-info\:enabled\:hover\:bg-accent-primary-muted {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
   }
-  .enabled\:hover\:color-info\:bg-accent-primary-bold {
+  .enabled\:hover\:color-info\:bg-accent-primary-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
         &:where([data-color="info"]) {
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
@@ -4245,16 +4614,6 @@
       }
     }
   }
-  .color-info\:enabled\:hover\:fg-a11y-on-accent {
-    &:where([data-color="info"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([data-hovered], :hover) {
-          color: var(--fg-a11y-on-accent);
-          --icon-color: var(--fg-a11y-on-accent);
-        }
-      }
-    }
-  }
   .enabled\:color-info\:hover\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="info"]) {
@@ -4265,30 +4624,20 @@
       }
     }
   }
-  .color-info\:enabled\:focus-visible\:bg-accent-primary-bold {
+  .color-info\:enabled\:focus-visible\:bg-accent-primary-muted {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
   }
-  .enabled\:focus-visible\:color-info\:bg-accent-primary-bold {
+  .enabled\:focus-visible\:color-info\:bg-accent-primary-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
         &:where([data-color="info"]) {
-          background-color: var(--bg-accent-primary-bold);
-        }
-      }
-    }
-  }
-  .color-info\:enabled\:focus-visible\:fg-a11y-on-accent {
-    &:where([data-color="info"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([data-focus-visible], :focus-visible) {
-          color: var(--fg-a11y-on-accent);
-          --icon-color: var(--fg-a11y-on-accent);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
@@ -4352,6 +4701,15 @@
       }
     }
   }
+  .enabled\:color-mono-muted\:hover\:bg-transparent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="mono-muted"]) {
+        &:where([data-hovered], :hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .enabled\:hover\:color-mono-muted\:bg-interactive-muted-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -4361,6 +4719,25 @@
       }
     }
   }
+  .enabled\:hover\:color-mono-muted\:bg-transparent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="mono-muted"]) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-mono-muted\:outline-1 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="mono-muted"]) {
+          outline-style: var(--tw-outline-style);
+          outline-width: 1px;
+        }
+      }
+    }
+  }
   .enabled\:hover\:color-mono-muted\:outline-2 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -4389,6 +4766,25 @@
       }
     }
   }
+  .enabled\:focus-visible\:color-mono-muted\:bg-transparent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="mono-muted"]) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-mono-muted\:outline-1 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="mono-muted"]) {
+          outline-style: var(--tw-outline-style);
+          outline-width: 1px;
+        }
+      }
+    }
+  }
   .enabled\:focus-visible\:color-mono-muted\:outline-2 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
@@ -4876,14 +5272,6 @@
       }
     }
   }
-  .color-serious\:enabled\:fg-serious-bold {
-    &:where([data-color="serious"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        color: var(--fg-serious-bold);
-        --icon-color: var(--fg-serious-bold);
-      }
-    }
-  }
   .enabled\:color-serious\:fg-a11y-on-utility {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-color="serious"]) {
@@ -4930,30 +5318,20 @@
       }
     }
   }
-  .color-serious\:enabled\:open\:bg-serious-bold {
+  .color-serious\:enabled\:open\:bg-serious-muted {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([open], [data-open], :open) {
-          background-color: var(--bg-serious-bold);
-        }
-      }
-    }
-  }
-  .color-serious\:enabled\:open\:fg-a11y-on-utility {
-    &:where([data-color="serious"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([open], [data-open], :open) {
-          color: var(--fg-a11y-on-utility);
-          --icon-color: var(--fg-a11y-on-utility);
+          background-color: var(--bg-serious-muted);
         }
       }
     }
   }
-  .color-serious\:enabled\:hover\:bg-serious-bold {
+  .color-serious\:enabled\:hover\:bg-serious-muted {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-hovered], :hover) {
-          background-color: var(--bg-serious-bold);
+          background-color: var(--bg-serious-muted);
         }
       }
     }
@@ -4994,16 +5372,6 @@
       }
     }
   }
-  .color-serious\:enabled\:hover\:fg-a11y-on-utility {
-    &:where([data-color="serious"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([data-hovered], :hover) {
-          color: var(--fg-a11y-on-utility);
-          --icon-color: var(--fg-a11y-on-utility);
-        }
-      }
-    }
-  }
   .enabled\:hover\:color-serious\:fg-a11y-on-accent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -5062,11 +5430,11 @@
       }
     }
   }
-  .color-serious\:enabled\:focus-visible\:bg-serious-bold {
+  .color-serious\:enabled\:focus-visible\:bg-serious-muted {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-focus-visible], :focus-visible) {
-          background-color: var(--bg-serious-bold);
+          background-color: var(--bg-serious-muted);
         }
       }
     }
@@ -5080,15 +5448,6 @@
       }
     }
   }
-  .enabled\:focus-visible\:color-serious\:bg-serious-bold {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focus-visible], :focus-visible) {
-        &:where([data-color="serious"]) {
-          background-color: var(--bg-serious-bold);
-        }
-      }
-    }
-  }
   .enabled\:focus-visible\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
@@ -5107,16 +5466,6 @@
       }
     }
   }
-  .color-serious\:enabled\:focus-visible\:fg-a11y-on-utility {
-    &:where([data-color="serious"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([data-focus-visible], :focus-visible) {
-          color: var(--fg-a11y-on-utility);
-          --icon-color: var(--fg-a11y-on-utility);
-        }
-      }
-    }
-  }
   .enabled\:focus-visible\:color-serious\:fg-a11y-on-accent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
@@ -5252,6 +5601,24 @@
       }
     }
   }
+  .color-critical\:enabled\:open\:bg-critical-muted {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          background-color: var(--bg-critical-muted);
+        }
+      }
+    }
+  }
+  .color-critical\:enabled\:hover\:bg-critical-muted {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          background-color: var(--bg-critical-muted);
+        }
+      }
+    }
+  }
   .enabled\:hover\:color-critical\:bg-critical-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
@@ -5337,6 +5704,15 @@
       }
     }
   }
+  .color-critical\:enabled\:focus-visible\:bg-critical-muted {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          background-color: var(--bg-critical-muted);
+        }
+      }
+    }
+  }
   .enabled\:focus-visible\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-focus-visible], :focus-visible) {
@@ -5710,6 +6086,11 @@
       min-height: var(--spacing-xl);
     }
   }
+  .size-medium\:max-w-\[16px\] {
+    &:where([data-size="medium"]) {
+      max-width: 16px;
+    }
+  }
   .size-medium\:max-w-\[28px\] {
     &:where([data-size="medium"]) {
       max-width: 28px;
@@ -5720,6 +6101,11 @@
       min-width: var(--spacing-0);
     }
   }
+  .size-medium\:min-w-\[16px\] {
+    &:where([data-size="medium"]) {
+      min-width: 16px;
+    }
+  }
   .size-medium\:min-w-\[28px\] {
     &:where([data-size="medium"]) {
       min-width: 28px;
@@ -5730,6 +6116,11 @@
       min-width: 68px;
     }
   }
+  .size-medium\:min-w-\[220px\] {
+    &:where([data-size="medium"]) {
+      min-width: 220px;
+    }
+  }
   .size-medium\:gap-l {
     &:where([data-size="medium"]) {
       gap: var(--spacing-l);
@@ -5745,6 +6136,11 @@
       gap: var(--spacing-xs);
     }
   }
+  .size-medium\:p-0 {
+    &:where([data-size="medium"]) {
+      padding: var(--spacing-0);
+    }
+  }
   .size-medium\:p-l {
     &:where([data-size="medium"]) {
       padding: var(--spacing-l);
@@ -5837,6 +6233,11 @@
       min-height: var(--spacing-l);
     }
   }
+  .size-small\:max-w-\[12px\] {
+    &:where([data-size="small"]) {
+      max-width: 12px;
+    }
+  }
   .size-small\:max-w-xl {
     &:where([data-size="small"]) {
       max-width: var(--spacing-xl);
@@ -5847,6 +6248,11 @@
       min-width: var(--spacing-0);
     }
   }
+  .size-small\:min-w-\[12px\] {
+    &:where([data-size="small"]) {
+      min-width: 12px;
+    }
+  }
   .size-small\:min-w-\[54px\] {
     &:where([data-size="small"]) {
       min-width: 54px;
@@ -5882,6 +6288,11 @@
       border-radius: var(--radius-small);
     }
   }
+  .size-small\:p-0 {
+    &:where([data-size="small"]) {
+      padding: var(--spacing-0);
+    }
+  }
   .size-small\:p-s {
     &:where([data-size="small"]) {
       padding: var(--spacing-s);
@@ -6216,6 +6627,11 @@
       }
     }
   }
+  .pressed\:bg-interactive-muted-pressed {
+    &:where([data-pressed], :active) {
+      background-color: var(--bg-interactive-muted-pressed);
+    }
+  }
   .pressed\:outline-interactive-pressed {
     &:where([data-pressed], :active) {
       outline-color: var(--outline-interactive-pressed);
@@ -6279,6 +6695,21 @@
       }
     }
   }
+  .enabled\:pressed\:outline-1 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+      }
+    }
+  }
+  .enabled\:pressed\:outline-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        outline-color: var(--outline-accent-primary-pressed);
+      }
+    }
+  }
   .enabled\:pressed\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-interactive-pressed\)\] {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6291,6 +6722,34 @@
       }
     }
   }
+  .color-info\:enabled\:pressed\:bg-accent-primary-pressed {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .enabled\:pressed\:color-info\:bg-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        &:where([data-color="info"]) {
+          background-color: var(--bg-accent-primary-pressed);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:pressed\:fg-accent-primary-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          color: var(--fg-accent-primary-bold);
+          --icon-color: var(--fg-accent-primary-bold);
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-mono-muted\:bg-interactive-muted-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6300,6 +6759,15 @@
       }
     }
   }
+  .enabled\:pressed\:color-mono-muted\:bg-transparent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        &:where([data-color="mono-muted"]) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-mono-muted\:fg-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6320,12 +6788,31 @@
       }
     }
   }
+  .enabled\:pressed\:color-mono-muted\:outline-1 {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        &:where([data-color="mono-muted"]) {
+          outline-style: var(--tw-outline-style);
+          outline-width: 1px;
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-mono-muted\:outline-2 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
         &:where([data-color="mono-muted"]) {
-          outline-style: var(--tw-outline-style);
-          outline-width: 2px;
+          outline-style: var(--tw-outline-style);
+          outline-width: 2px;
+        }
+      }
+    }
+  }
+  .enabled\:pressed\:color-mono-muted\:outline-accent-primary-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-pressed], :active) {
+        &:where([data-color="mono-muted"]) {
+          outline-color: var(--outline-accent-primary-bold);
         }
       }
     }
@@ -6463,6 +6950,15 @@
       }
     }
   }
+  .color-serious\:enabled\:pressed\:bg-serious-pressed {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          background-color: var(--bg-serious-pressed);
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-serious\:bg-interactive-muted-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6481,6 +6977,16 @@
       }
     }
   }
+  .color-serious\:enabled\:pressed\:fg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          color: var(--fg-serious-bold);
+          --icon-color: var(--fg-serious-bold);
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-serious\:fg-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6520,6 +7026,15 @@
       }
     }
   }
+  .color-critical\:enabled\:pressed\:bg-critical-pressed {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          background-color: var(--bg-critical-pressed);
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-critical\:bg-critical-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6538,6 +7053,16 @@
       }
     }
   }
+  .color-critical\:enabled\:pressed\:fg-critical-bold {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-pressed], :active) {
+          color: var(--fg-critical-bold);
+          --icon-color: var(--fg-critical-bold);
+        }
+      }
+    }
+  }
   .enabled\:pressed\:color-critical\:fg-critical-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-pressed], :active) {
@@ -6644,6 +7169,14 @@
       }
     }
   }
+  .enabled\:selected\:inset-shadow-\[3px_0_0_0_\] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        --tw-inset-shadow: inset 3px 0 0 0 var(--tw-inset-shadow-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);
+      }
+    }
+  }
   .enabled\:selected\:outline-accent-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -6682,15 +7215,6 @@
       }
     }
   }
-  .enabled\:selected\:hover\:outline-interactive-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-selected], :checked) {
-        &:where([data-hovered], :hover) {
-          outline-color: var(--outline-interactive-hover);
-        }
-      }
-    }
-  }
   .enabled\:selected\:hover\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-hover\)\] {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -6724,15 +7248,6 @@
       }
     }
   }
-  .enabled\:selected\:focus-visible\:outline-interactive-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-selected], :checked) {
-        &:where([data-focus-visible], :focus-visible) {
-          outline-color: var(--outline-interactive-hover);
-        }
-      }
-    }
-  }
   .enabled\:selected\:focus-visible\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-hover\)\] {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -6769,21 +7284,45 @@
       }
     }
   }
-  .color-info\:enabled\:selected\:bg-accent-primary-bold {
+  .color-info\:enabled\:selected\:bg-accent-primary-muted {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          background-color: var(--bg-accent-primary-bold);
+          background-color: var(--bg-accent-primary-muted);
         }
       }
     }
   }
-  .color-info\:enabled\:selected\:fg-a11y-on-accent {
+  .color-info\:enabled\:selected\:inset-shadow-\[color\:var\(--outline-accent-primary-bold\)\] {
     &:where([data-color="info"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          color: var(--fg-a11y-on-accent);
-          --icon-color: var(--fg-a11y-on-accent);
+          --tw-inset-shadow-color: var(--outline-accent-primary-bold);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-inset-shadow-color: color-mix(in oklab, var(--outline-accent-primary-bold) var(--tw-inset-shadow-alpha), transparent);
+          }
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:hover\:bg-accent-primary-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-hovered], :hover) {
+            background-color: var(--bg-accent-primary-bold);
+          }
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:focus-visible\:bg-accent-primary-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-focus-visible], :focus-visible) {
+            background-color: var(--bg-accent-primary-bold);
+          }
         }
       }
     }
@@ -7258,11 +7797,11 @@
       }
     }
   }
-  .color-serious\:enabled\:selected\:bg-serious-bold {
+  .color-serious\:enabled\:selected\:bg-serious-muted {
     &:where([data-color="serious"]) {
       &:where(:not([disabled], [data-disabled]), :enabled) {
         &:where([data-selected], :checked) {
-          background-color: var(--bg-serious-bold);
+          background-color: var(--bg-serious-muted);
         }
       }
     }
@@ -7276,16 +7815,6 @@
       }
     }
   }
-  .color-serious\:enabled\:selected\:fg-a11y-on-utility {
-    &:where([data-color="serious"]) {
-      &:where(:not([disabled], [data-disabled]), :enabled) {
-        &:where([data-selected], :checked) {
-          color: var(--fg-a11y-on-utility);
-          --icon-color: var(--fg-a11y-on-utility);
-        }
-      }
-    }
-  }
   .enabled\:selected\:color-serious\:fg-primary-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7306,6 +7835,18 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:inset-shadow-\[color\:var\(--outline-serious-bold\)\] {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          --tw-inset-shadow-color: var(--outline-serious-bold);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-inset-shadow-color: color-mix(in oklab, var(--outline-serious-bold) var(--tw-inset-shadow-alpha), transparent);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:color-serious\:outline {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7334,6 +7875,17 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:hover\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-hovered], :hover) {
+            background-color: var(--bg-serious-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:hover\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7380,6 +7932,17 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:focus-visible\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-focus-visible], :focus-visible) {
+            background-color: var(--bg-serious-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:focus-visible\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7426,6 +7989,15 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:bg-critical-muted {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          background-color: var(--bg-critical-muted);
+        }
+      }
+    }
+  }
   .enabled\:selected\:color-critical\:bg-critical-muted {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7455,6 +8027,18 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:inset-shadow-\[color\:var\(--outline-critical-bold\)\] {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          --tw-inset-shadow-color: var(--outline-critical-bold);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-inset-shadow-color: color-mix(in oklab, var(--outline-critical-bold) var(--tw-inset-shadow-alpha), transparent);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:color-critical\:outline {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7483,6 +8067,17 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:hover\:bg-critical-bold {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-hovered], :hover) {
+            background-color: var(--bg-critical-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:hover\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7541,6 +8136,17 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:focus-visible\:bg-critical-bold {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-focus-visible], :focus-visible) {
+            background-color: var(--bg-critical-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:focus-visible\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7627,6 +8233,15 @@
       }
     }
   }
+  .enabled\:selected\:pressed\:outline-accent-primary-pressed {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-pressed], :active) {
+          outline-color: var(--outline-accent-primary-pressed);
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:group-orientation-horizontal\/tabs\:after\:bg-\[color\:var\(--outline-accent-primary-pressed\)\] {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7641,6 +8256,43 @@
       }
     }
   }
+  .color-info\:enabled\:selected\:pressed\:bg-accent-primary-pressed {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            background-color: var(--bg-accent-primary-pressed);
+          }
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:pressed\:fg-accent-primary-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            color: var(--fg-accent-primary-bold);
+            --icon-color: var(--fg-accent-primary-bold);
+          }
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:pressed\:inset-shadow-\[color\:var\(--outline-accent-primary-pressed\)\] {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            --tw-inset-shadow-color: var(--outline-accent-primary-pressed);
+            @supports (color: color-mix(in lab, red, red)) {
+              --tw-inset-shadow-color: color-mix(in oklab, var(--outline-accent-primary-pressed) var(--tw-inset-shadow-alpha), transparent);
+            }
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-mono-muted\:bg-interactive-muted-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7802,6 +8454,17 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:pressed\:bg-serious-pressed {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            background-color: var(--bg-serious-pressed);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-serious\:bg-serious-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7813,6 +8476,18 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:pressed\:fg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            color: var(--fg-serious-bold);
+            --icon-color: var(--fg-serious-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-serious\:fg-serious-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7825,6 +8500,20 @@
       }
     }
   }
+  .color-serious\:enabled\:selected\:pressed\:inset-shadow-\[color\:var\(--outline-serious-pressed\)\] {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            --tw-inset-shadow-color: var(--outline-serious-pressed);
+            @supports (color: color-mix(in lab, red, red)) {
+              --tw-inset-shadow-color: color-mix(in oklab, var(--outline-serious-pressed) var(--tw-inset-shadow-alpha), transparent);
+            }
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-serious\:outline-2 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7848,6 +8537,17 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:pressed\:bg-critical-pressed {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            background-color: var(--bg-critical-pressed);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-critical\:bg-critical-pressed {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7859,6 +8559,18 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:pressed\:fg-critical-bold {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            color: var(--fg-critical-bold);
+            --icon-color: var(--fg-critical-bold);
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-critical\:fg-critical-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7883,6 +8595,20 @@
       }
     }
   }
+  .color-critical\:enabled\:selected\:pressed\:inset-shadow-\[color\:var\(--outline-critical-pressed\)\] {
+    &:where([data-color="critical"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          &:where([data-pressed], :active) {
+            --tw-inset-shadow-color: var(--outline-critical-pressed);
+            @supports (color: color-mix(in lab, red, red)) {
+              --tw-inset-shadow-color: color-mix(in oklab, var(--outline-critical-pressed) var(--tw-inset-shadow-alpha), transparent);
+            }
+          }
+        }
+      }
+    }
+  }
   .enabled\:selected\:pressed\:color-critical\:outline-2 {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
@@ -7917,6 +8643,38 @@
       border-bottom-color: var(--outline-accent-primary-bold);
     }
   }
+  .dragging\:\[background-color\:var\(--fg-a11y-on-accent\)\] {
+    &:where([data-dragging]) {
+      background-color: var(--fg-a11y-on-accent);
+    }
+  }
+  .dragging\:ring-8 {
+    &:where([data-dragging]) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + 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);
+    }
+  }
+  .dragging\:ring-\[rgba\(110\,209\,255\,0\.08\)\] {
+    &:where([data-dragging]) {
+      --tw-ring-color: rgba(110,209,255,0.08);
+    }
+  }
+  .dragging\:outline {
+    &:where([data-dragging]) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .dragging\:outline {
+    &:where([data-dragging]) {
+      outline-offset: -1px;
+    }
+  }
+  .dragging\:outline-interactive-hover {
+    &:where([data-dragging]) {
+      outline-color: var(--outline-interactive-hover);
+    }
+  }
   .drop-target\:border {
     &:where([data-drop-target]) {
       border-style: var(--tw-border-style);
@@ -8401,7 +9159,7 @@
       --fg-inverse-muted: var(--primitive-neutral-400, #888a8f);
       --fg-disabled: var(--primitive-neutral-300, #c3c5c7);
       --fg-accent-primary-bold: var(--primitive-accent-primary-300, #39b7fa);
-      --fg-accent-primary-hover: var(--primitive-accent-primary-200, #6ed1ff);
+      --fg-accent-primary-hover: var(--primitive-accent-primary-700, #004f7e);
       --fg-accent-primary-pressed: var(--primitive-accent-primary-600, #0068a1);
       --fg-info-bold: var(--primitive-utility-info-600, #414245);
       --fg-info-hover: var(--primitive-utility-info-700, #38393A);
@@ -8474,42 +9232,6 @@ html {
     border: 5px solid transparent;
     background-clip: padding-box;
   }
-  .queryBuilder .rule-lines::before {
-    content: '';
-    width: 10px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
-    background-position: left -1px, center;
-    background-repeat: repeat-y, repeat-x;
-    background-size: 1px 4px, 4px 1px;
-  }
-  .queryBuilder .group > span.rule-lines:last-of-type::before {
-    content: '';
-    width: 10px;
-    position: absolute;
-    top: 0;
-    bottom: 50%;
-    left: 50%;
-    background-image: repeating-linear-gradient(to bottom,var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
-    background-position: left -1px, bottom;
-    background-repeat: repeat-y, repeat-x;
-    background-size: 1px 4px, 4px 1px;
-  }
-  .queryBuilder .group > span.rule-lines:last-of-type:has(~ div.group)::before {
-    content: '';
-    width: 10px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    background-image: repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)), repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
-    background-position: left -1px, center;
-    background-repeat: repeat-y, repeat-x;
-    background-size: 1px 4px, 4px 1px;
-  }
 }
 @property --tw-rotate-x {
   syntax: "*";