@ac-design/design-system 2.2.1 → 2.3.0

package/dist/lib/compat.css

@@ -584,6 +584,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .my-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-block: var(--spacing) !important;
   }
+  .my-6:where([data-ac-ds], [data-ac-ds] *) {
+    margin-block: calc(var(--spacing) * 6) !important;
+  }
   .-mt-0\.5:where([data-ac-ds], [data-ac-ds] *) {
     margin-top: calc(var(--spacing) * -0.5) !important;
   }
@@ -831,6 +834,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 12) !important;
     height: calc(var(--spacing) * 12) !important;
   }
+  .size-14:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 14) !important;
+    height: calc(var(--spacing) * 14) !important;
+  }
   .size-15:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 15) !important;
     height: calc(var(--spacing) * 15) !important;
@@ -953,6 +960,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .h-18:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 18) !important;
   }
+  .h-30:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 30) !important;
+  }
   .h-32:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 32) !important;
   }
@@ -1049,6 +1059,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-8:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 8) !important;
   }
+  .w-8\.5:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 8.5) !important;
+  }
   .w-9:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 9) !important;
   }
@@ -1235,6 +1248,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .min-w-10:where([data-ac-ds], [data-ac-ds] *) {
     min-width: calc(var(--spacing) * 10) !important;
   }
+  .min-w-12:where([data-ac-ds], [data-ac-ds] *) {
+    min-width: calc(var(--spacing) * 12) !important;
+  }
   .min-w-14:where([data-ac-ds], [data-ac-ds] *) {
     min-width: calc(var(--spacing) * 14) !important;
   }
@@ -1408,6 +1424,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-scale-z: 95% !important;
     scale: var(--tw-scale-x) var(--tw-scale-y) !important;
   }
+  .scale-100:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-scale-x: 100% !important;
+    --tw-scale-y: 100% !important;
+    --tw-scale-z: 100% !important;
+    scale: var(--tw-scale-x) var(--tw-scale-y) !important;
+  }
   .scale-110:where([data-ac-ds], [data-ac-ds] *) {
     --tw-scale-x: 110% !important;
     --tw-scale-y: 110% !important;
@@ -2107,6 +2129,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent) !important;
     }
   }
+  .bg-body:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-body) !important;
+  }
   .bg-border:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-border) !important;
   }
@@ -2152,6 +2177,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-danger) 5%, transparent) !important;
     }
   }
+  .bg-danger\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-danger) 6%, transparent) !important;
+    }
+  }
   .bg-danger\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ef4444 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2182,6 +2213,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bg-info:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-info) !important;
   }
+  .bg-info\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #0069ff 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-info) 6%, transparent) !important;
+    }
+  }
   .bg-info\/8:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #0069ff 8%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2266,6 +2303,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-primary) 5%, transparent) !important;
     }
   }
+  .bg-primary\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 6%, transparent) !important;
+    }
+  }
   .bg-primary\/8:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 8%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2344,6 +2387,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-success) 5%, transparent) !important;
     }
   }
+  .bg-success\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #00a651 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-success) 6%, transparent) !important;
+    }
+  }
   .bg-success\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #00a651 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2395,6 +2444,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-surface-sunken) 50%, transparent) !important;
     }
   }
+  .bg-surface-sunken\/70:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f0f0f0 70%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-sunken) 70%, transparent) !important;
+    }
+  }
   .bg-surface\/85:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ffffff 85%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2428,6 +2483,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-warning) 5%, transparent) !important;
     }
   }
+  .bg-warning\/6:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f59e0b 6%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-warning) 6%, transparent) !important;
+    }
+  }
   .bg-warning\/10:where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #f59e0b 10%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2880,6 +2941,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .py-20:where([data-ac-ds], [data-ac-ds] *) {
     padding-block: calc(var(--spacing) * 20) !important;
   }
+  .py-\[5px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 5px !important;
+  }
+  .py-\[7px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 7px !important;
+  }
   .pt-0:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: 0px !important;
   }
@@ -2910,6 +2977,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .pt-10:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: calc(var(--spacing) * 10) !important;
   }
+  .pt-\[54px\]:where([data-ac-ds], [data-ac-ds] *) {
+    padding-top: 54px !important;
+  }
   .pr-0:where([data-ac-ds], [data-ac-ds] *) {
     padding-right: 0px !important;
   }
@@ -3142,6 +3212,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-tracking: -0.03em !important;
     letter-spacing: -0.03em !important;
   }
+  .tracking-\[-0\.012em\]:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-tracking: -0.012em !important;
+    letter-spacing: -0.012em !important;
+  }
   .tracking-\[0\.08em\]:where([data-ac-ds], [data-ac-ds] *) {
     --tw-tracking: 0.08em !important;
     letter-spacing: 0.08em !important;
@@ -3186,6 +3260,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .whitespace-pre:where([data-ac-ds], [data-ac-ds] *) {
     white-space: pre !important;
   }
+  .text-background:where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-background) !important;
+  }
   .text-body:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-body) !important;
   }
@@ -3944,6 +4021,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     border-width: 0px !important;
   }
   @media (hover: hover) {
+    .group-hover\:border-primary\/60:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
+      border-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 60%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-hover\:border-primary\/60:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
+        border-color: color-mix(in oklab, var(--color-primary) 60%, transparent) !important;
+      }
+    }
     .group-hover\:text-heading:is(:where(.group):hover *):where([data-ac-ds], [data-ac-ds] *) {
       color: var(--color-heading) !important;
     }
@@ -4174,6 +4259,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-accent) 60%, transparent) !important;
       }
     }
+    .hover\:bg-body\/90:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #252525 90%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-body\/90:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-body) 90%, transparent) !important;
+      }
+    }
     .hover\:bg-current\/10:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: currentcolor !important;
     }
@@ -4201,6 +4294,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-danger) 10%, transparent) !important;
       }
     }
+    .hover\:bg-danger\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #ef4444 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-danger\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-danger) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-danger\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #ef4444 18%, transparent) !important;
     }
@@ -4228,6 +4329,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-info) 10%, transparent) !important;
       }
     }
+    .hover\:bg-info\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #0069ff 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-info\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-info) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-info\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #0069ff 18%, transparent) !important;
     }
@@ -4255,6 +4364,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
       }
     }
+    .hover\:bg-primary\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-primary) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-primary\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 18%, transparent) !important;
     }
@@ -4277,6 +4394,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-success) 10%, transparent) !important;
       }
     }
+    .hover\:bg-success\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #00a651 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-success\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-success) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-success\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #00a651 18%, transparent) !important;
     }
@@ -4331,6 +4456,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
         background-color: color-mix(in oklab, var(--color-warning) 10%, transparent) !important;
       }
     }
+    .hover\:bg-warning\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+      background-color: color-mix(in srgb, #f59e0b 12%, transparent) !important;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-warning\/12:hover:where([data-ac-ds], [data-ac-ds] *) {
+        background-color: color-mix(in oklab, var(--color-warning) 12%, transparent) !important;
+      }
+    }
     .hover\:bg-warning\/18:hover:where([data-ac-ds], [data-ac-ds] *) {
       background-color: color-mix(in srgb, #f59e0b 18%, transparent) !important;
     }
@@ -4549,6 +4682,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .disabled\:cursor-not-allowed:disabled:where([data-ac-ds], [data-ac-ds] *) {
     cursor: not-allowed !important;
   }
+  .disabled\:cursor-wait:disabled:where([data-ac-ds], [data-ac-ds] *) {
+    cursor: wait !important;
+  }
   .disabled\:bg-surface-sunken:disabled:where([data-ac-ds], [data-ac-ds] *) {
     background-color: var(--color-surface-sunken) !important;
   }
@@ -4681,6 +4817,20 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .has-\[input\:focus-visible\]\:ring-offset-surface:has(:is(input:focus-visible)):where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-offset-color: var(--color-surface) !important;
   }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-2:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-ring:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-color: var(--color-ring) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-offset-2:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-offset-width: 2px !important;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  }
+  .has-\[\>span\>input\[type\=radio\]\:focus-visible\]\:ring-offset-background:has( > span > input[type=radio]:focus-visible):where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-offset-color: var(--color-background) !important;
+  }
   .aria-disabled\:pointer-events-none[aria-disabled="true"]:where([data-ac-ds], [data-ac-ds] *) {
     pointer-events: none !important;
   }
@@ -5051,6 +5201,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .md\:h-11:where([data-ac-ds], [data-ac-ds] *) {
       height: calc(var(--spacing) * 11) !important;
     }
+    .md\:h-13:where([data-ac-ds], [data-ac-ds] *) {
+      height: calc(var(--spacing) * 13) !important;
+    }
     .md\:w-60:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 60) !important;
     }
@@ -5060,6 +5213,18 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\]:where([data-ac-ds], [data-ac-ds] *) {
       grid-template-columns: minmax(0,1fr) minmax(0,2fr) !important;
     }
+    .md\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
+      flex-direction: row !important;
+    }
+    .md\:items-start:where([data-ac-ds], [data-ac-ds] *) {
+      align-items: flex-start !important;
+    }
+    .md\:justify-between:where([data-ac-ds], [data-ac-ds] *) {
+      justify-content: space-between !important;
+    }
+    .md\:gap-4:where([data-ac-ds], [data-ac-ds] *) {
+      gap: calc(var(--spacing) * 4) !important;
+    }
     .md\:gap-10:where([data-ac-ds], [data-ac-ds] *) {
       gap: calc(var(--spacing) * 10) !important;
     }
@@ -5109,6 +5274,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .lg\:w-80:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 80) !important;
     }
+    .lg\:w-\[120px\]:where([data-ac-ds], [data-ac-ds] *) {
+      width: 120px !important;
+    }
     .lg\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
       flex-direction: row !important;
     }
@@ -5121,6 +5289,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .lg\:py-16:where([data-ac-ds], [data-ac-ds] *) {
       padding-block: calc(var(--spacing) * 16) !important;
     }
+    .lg\:pl-52:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 52) !important;
+    }
     .lg\:text-\[60px\]:where([data-ac-ds], [data-ac-ds] *) {
       font-size: 60px !important;
     }
@@ -5132,6 +5303,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .xl\:w-96:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(var(--spacing) * 96) !important;
     }
+    .xl\:pl-64:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 64) !important;
+    }
   }
   @container (width < 768px) {
     .\@max-3xl\:hidden:where([data-ac-ds], [data-ac-ds] *) {
@@ -5287,6 +5461,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 8) !important;
     height: calc(var(--spacing) * 8) !important;
   }
+  .\[\&_svg\]\:size-24\! svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 24) !important;
+    height: calc(var(--spacing) * 24) !important;
+  }
   .\[\&_svg\]\:animate-spin svg:where([data-ac-ds], [data-ac-ds] *) {
     animation: var(--animate-spin) !important;
   }
@@ -5389,6 +5567,35 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .\[\&\>svg\]\:text-muted > svg:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-muted) !important;
   }
+  :where(.\[\:where\(\&\)\]\:bg-danger\/5):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #ef4444 5%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-danger) 5%, transparent) !important;
+    }
+  }
+  :where(.\[\:where\(\&\)\]\:bg-surface):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-surface) !important;
+  }
+  :where(.\[\:where\(\&\)\]\:bg-surface-sunken\/40):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f0f0f0 40%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface-sunken) 40%, transparent) !important;
+    }
+  }
+  :where(.\[\:where\(\&\)\]\:bg-transparent):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: transparent !important;
+  }
+  :where(.\[\:where\(\&\)_svg\]\:size-3\.5) svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 3.5) !important;
+    height: calc(var(--spacing) * 3.5) !important;
+  }
+  :where(.\[\:where\(\&\)_svg\]\:size-4) svg:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 4) !important;
+    height: calc(var(--spacing) * 4) !important;
+  }
+  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-2\.5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: calc(var(--spacing) * 2.5) !important;
+  }
   [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-5:where([data-ac-ds], [data-ac-ds] *) {
     margin-top: calc(var(--spacing) * 5) !important;
   }
@@ -5405,6 +5612,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:pt-4:where([data-ac-ds], [data-ac-ds] *) {
     padding-top: calc(var(--spacing) * 4) !important;
   }
+  [data-testid=ac-sidebar-section][data-closed] + .\[\[data-testid\=ac-sidebar-section\]\[data-closed\]\+\&\]\:mt-0:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: 0px !important;
+  }
   tr:last-child .\[tr\:last-child_\&\]\:border-0:where([data-ac-ds], [data-ac-ds] *) {
     border-style: var(--tw-border-style) !important;
     border-width: 0px !important;

package/dist/lib/components/AcButton.vue.d.ts

@@ -2,13 +2,13 @@ import type { Tone, Variant } from "./types";
 export interface Props {
     /** Text label. You can also pass content through the default slot. */
     title?: string;
-    /** Colour of the button. `white` and `ghost` are neutral styles for secondary actions. */
-    color?: Tone | "white" | "ghost";
-    /** `solid` fill, `light` tinted fill (12% of the colour), `outlined` border on the page background, or `link`: coloured text with no box that underlines on hover, e.g. "Go to Health". */
-    variant?: Variant | "link";
-    /** Height and padding: `xs` 28px, `small` 36px, `normal` 42px (the field height, so a button lines up with an input), `medium` 42px with 16px text and 44px from 768px (cloud-ui's default `lg`). */
-    size?: "xs" | "small" | "normal" | "medium";
-    /** A round, square button for a single icon: 28px at `xs`, 32px at `small`, 36px at `normal`, 44px at `medium`. Put the icon in the `icon` or default slot; `title` becomes the accessible name, or add an `aria-label`. */
+    /** Colour of the button. `neutral` is a grey or near-black button that takes every `variant`; `white` and `ghost` are fixed neutral styles (the same as `neutral` with `outlined` and `ghost`). */
+    color?: Tone | "neutral" | "white" | "ghost";
+    /** `solid` fill, `light` tinted fill (12% of the colour), `subtle` a fainter 6% tint, `outlined` border on the page background, `ghost` no fill until hover, or `link`: coloured text with no box that underlines on hover, e.g. "Go to Health". */
+    variant?: Variant | "subtle" | "ghost" | "link";
+    /** Height and padding: `xs` 28px, `small` 36px, `normal` 42px (the field height, so a button lines up with an input), `medium` 42px with 16px text and 44px from 768px (cloud-ui's default `lg`), `xlarge` 48px with 16px text and 52px with 18px text from 768px (cloud-ui's `xl`). */
+    size?: "xs" | "small" | "normal" | "medium" | "xlarge";
+    /** A round, square button for a single icon: 28px at `xs`, 32px at `small`, 36px at `normal`, 44px at `medium`, 56px at `xlarge`. Put the icon in the `icon` or default slot; `title` becomes the accessible name, or add an `aria-label`. */
     iconOnly?: boolean;
     /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
@@ -20,11 +20,15 @@ export interface Props {
     href?: string;
     /** Fully rounded pill corners at every size and variant, e.g. an empty state's "Get started". */
     rounded?: boolean;
+    /** With `variant="link"`, keeps the height, padding and corners of `size`, so a text link lines up with the buttons next to it. */
+    boxed?: boolean;
+    /** Native hover hint (the `title` attribute). Use it when the label comes from the default slot; the `title` prop is the visible label. */
+    hint?: string;
 }
 type __VLS_Slots = {
-    /** Button content, after the icon and `title`. */
+    /** Button content, after the icon and `title`. An icon here is 16px unless it has its own size class, e.g. `size-5`. */
     default?: () => unknown;
-    /** A 16px icon before the label (an inline SVG or icon component). */
+    /** A 16px icon before the label (an inline SVG or icon component). A size class on the icon, e.g. `size-3.5`, wins. */
     icon?: () => unknown;
     /** A 16px icon after the label, e.g. an arrow or chevron. */
     "icon-right"?: () => unknown;
@@ -34,16 +38,18 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
-    variant: Variant | "link";
+    variant: Variant | "subtle" | "ghost" | "link";
     type: "button" | "submit" | "reset";
     title: string;
     disabled: boolean;
-    color: Tone | "white" | "ghost";
+    color: Tone | "neutral" | "white" | "ghost";
     href: string;
-    size: "xs" | "small" | "normal" | "medium";
+    size: "xs" | "small" | "normal" | "medium" | "xlarge";
     iconOnly: boolean;
     loading: boolean;
     rounded: boolean;
+    boxed: boolean;
+    hint: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;