@ac-design/design-system 2.3.0 → 2.4.1

package/dist/lib/compat.css

@@ -482,9 +482,24 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .left-4:where([data-ac-ds], [data-ac-ds] *) {
     left: calc(var(--spacing) * 4) !important;
   }
+  .left-\[7px\]:where([data-ac-ds], [data-ac-ds] *) {
+    left: 7px !important;
+  }
   .left-\[8\%\]:where([data-ac-ds], [data-ac-ds] *) {
     left: 8% !important;
   }
+  .left-\[9px\]:where([data-ac-ds], [data-ac-ds] *) {
+    left: 9px !important;
+  }
+  .left-\[11px\]:where([data-ac-ds], [data-ac-ds] *) {
+    left: 11px !important;
+  }
+  .left-\[15px\]:where([data-ac-ds], [data-ac-ds] *) {
+    left: 15px !important;
+  }
+  .left-\[19px\]:where([data-ac-ds], [data-ac-ds] *) {
+    left: 19px !important;
+  }
   .left-\[calc\(50\%\+26px\)\]:where([data-ac-ds], [data-ac-ds] *) {
     left: calc(50% + 26px) !important;
   }
@@ -650,12 +665,18 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .mr-1\.5:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 1.5) !important;
   }
+  .mr-2:where([data-ac-ds], [data-ac-ds] *) {
+    margin-right: calc(var(--spacing) * 2) !important;
+  }
   .mr-3:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 3) !important;
   }
   .mr-4:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 4) !important;
   }
+  .mr-5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-right: calc(var(--spacing) * 5) !important;
+  }
   .mb-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-bottom: var(--spacing) !important;
   }
@@ -930,6 +951,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .h-6:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 6) !important;
   }
+  .h-6\.5:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 6.5) !important;
+  }
   .h-7:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 7) !important;
   }
@@ -954,9 +978,18 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .h-11:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 11) !important;
   }
+  .h-11\.5:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 11.5) !important;
+  }
   .h-12:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 12) !important;
   }
+  .h-12\.5:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 12.5) !important;
+  }
+  .h-15:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 15) !important;
+  }
   .h-18:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 18) !important;
   }
@@ -972,6 +1005,15 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .h-48:where([data-ac-ds], [data-ac-ds] *) {
     height: calc(var(--spacing) * 48) !important;
   }
+  .h-60:where([data-ac-ds], [data-ac-ds] *) {
+    height: calc(var(--spacing) * 60) !important;
+  }
+  .h-\[50px\]:where([data-ac-ds], [data-ac-ds] *) {
+    height: 50px !important;
+  }
+  .h-auto:where([data-ac-ds], [data-ac-ds] *) {
+    height: auto !important;
+  }
   .h-full:where([data-ac-ds], [data-ac-ds] *) {
     height: 100% !important;
   }
@@ -1026,6 +1068,18 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .min-h-40:where([data-ac-ds], [data-ac-ds] *) {
     min-height: calc(var(--spacing) * 40) !important;
   }
+  .min-h-\[26px\]:where([data-ac-ds], [data-ac-ds] *) {
+    min-height: 26px !important;
+  }
+  .min-h-\[34px\]:where([data-ac-ds], [data-ac-ds] *) {
+    min-height: 34px !important;
+  }
+  .min-h-\[38px\]:where([data-ac-ds], [data-ac-ds] *) {
+    min-height: 38px !important;
+  }
+  .min-h-\[50px\]:where([data-ac-ds], [data-ac-ds] *) {
+    min-height: 50px !important;
+  }
   .min-h-full:where([data-ac-ds], [data-ac-ds] *) {
     min-height: 100% !important;
   }
@@ -1053,6 +1107,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-3\/5:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(3 / 5 * 100%) !important;
   }
+  .w-6\.5:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 6.5) !important;
+  }
   .w-7:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 7) !important;
   }
@@ -1065,6 +1122,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-9:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 9) !important;
   }
+  .w-9\.5:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 9.5) !important;
+  }
   .w-10:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 10) !important;
   }
@@ -1077,6 +1137,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-12:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 12) !important;
   }
+  .w-12\.5:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(var(--spacing) * 12.5) !important;
+  }
   .w-14:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 14) !important;
   }
@@ -1535,6 +1598,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .grid-cols-\[minmax\(0\,1fr\)_auto\]:where([data-ac-ds], [data-ac-ds] *) {
     grid-template-columns: minmax(0,1fr) auto !important;
   }
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_256px\]:where([data-ac-ds], [data-ac-ds] *) {
+    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 256px !important;
+  }
   .grid-rows-\[0fr\]:where([data-ac-ds], [data-ac-ds] *) {
     grid-template-rows: 0fr !important;
   }
@@ -1710,6 +1776,11 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .justify-self-end:where([data-ac-ds], [data-ac-ds] *) {
     justify-self: flex-end !important;
   }
+  .\!truncate:where([data-ac-ds], [data-ac-ds] *) {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
   .truncate:where([data-ac-ds], [data-ac-ds] *) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
@@ -1807,6 +1878,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
   }
+  .border-0:where([data-ac-ds], [data-ac-ds] *) {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
   .border-2:where([data-ac-ds], [data-ac-ds] *) {
     border-style: var(--tw-border-style) !important;
     border-width: 2px !important;
@@ -2021,6 +2096,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .border-transparent:where([data-ac-ds], [data-ac-ds] *) {
     border-color: transparent !important;
   }
+  .border-warning\/20:where([data-ac-ds], [data-ac-ds] *) {
+    border-color: color-mix(in srgb, #f59e0b 20%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-warning) 20%, transparent) !important;
+    }
+  }
   .border-warning\/25:where([data-ac-ds], [data-ac-ds] *) {
     border-color: color-mix(in srgb, #f59e0b 25%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -2123,12 +2204,6 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;
     }
   }
-  .bg-black\/80:where([data-ac-ds], [data-ac-ds] *) {
-    background-color: color-mix(in srgb, hsl(0 0% 0%) 80%, transparent) !important;
-    @supports (color: color-mix(in lab, red, red)) {
-      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;
   }
@@ -2797,6 +2872,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .fill-brand-navy:where([data-ac-ds], [data-ac-ds] *) {
     fill: var(--color-brand-navy) !important;
   }
+  .fill-danger:where([data-ac-ds], [data-ac-ds] *) {
+    fill: var(--color-danger) !important;
+  }
   .fill-primary:where([data-ac-ds], [data-ac-ds] *) {
     fill: var(--color-primary) !important;
   }
@@ -2890,6 +2968,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .px-px:where([data-ac-ds], [data-ac-ds] *) {
     padding-inline: 1px !important;
   }
+  .py-0:where([data-ac-ds], [data-ac-ds] *) {
+    padding-block: 0px !important;
+  }
   .py-0\.5:where([data-ac-ds], [data-ac-ds] *) {
     padding-block: calc(var(--spacing) * 0.5) !important;
   }
@@ -3007,6 +3088,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .pr-5:where([data-ac-ds], [data-ac-ds] *) {
     padding-right: calc(var(--spacing) * 5) !important;
   }
+  .pr-6:where([data-ac-ds], [data-ac-ds] *) {
+    padding-right: calc(var(--spacing) * 6) !important;
+  }
   .pr-8:where([data-ac-ds], [data-ac-ds] *) {
     padding-right: calc(var(--spacing) * 8) !important;
   }
@@ -3067,6 +3151,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .pl-5:where([data-ac-ds], [data-ac-ds] *) {
     padding-left: calc(var(--spacing) * 5) !important;
   }
+  .pl-6:where([data-ac-ds], [data-ac-ds] *) {
+    padding-left: calc(var(--spacing) * 6) !important;
+  }
   .pl-9:where([data-ac-ds], [data-ac-ds] *) {
     padding-left: calc(var(--spacing) * 9) !important;
   }
@@ -3088,6 +3175,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .align-top:where([data-ac-ds], [data-ac-ds] *) {
     vertical-align: top !important;
   }
+  .font-\[inherit\]:where([data-ac-ds], [data-ac-ds] *) {
+    font-family: inherit !important;
+  }
   .font-heading:where([data-ac-ds], [data-ac-ds] *) {
     font-family: var(--font-heading) !important;
   }
@@ -3499,6 +3589,13 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .shadow-\[0_0_0_2px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 20%,transparent)) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 20%,transparent)) !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;
+  }
   .shadow-\[0_0_0_6px_color-mix\(in_srgb\,var\(--color-primary\)_15\%\,transparent\)\]:where([data-ac-ds], [data-ac-ds] *) {
     --tw-shadow: 0 0 0 6px var(--tw-shadow-color, color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 15%,transparent)) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -4142,9 +4239,30 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
     }
   }
+  .focus-within\:border-\[color-mix\(in_srgb\,var\(--color-primary\)_35\%\,transparent\)\]:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    border-color: color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 35%,transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--color-primary) 35%,transparent) !important;
+    }
+  }
   .focus-within\:border-danger:focus-within:where([data-ac-ds], [data-ac-ds] *) {
     border-color: var(--color-danger) !important;
   }
+  .focus-within\:bg-accent-hover:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent-hover) !important;
+  }
+  .focus-within\:bg-danger\/5:focus-within: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;
+    }
+  }
+  .focus-within\:bg-danger\/10:focus-within: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)) {
+      background-color: color-mix(in oklab, var(--color-danger) 10%, transparent) !important;
+    }
+  }
   .focus-within\:shadow-\[0_0_0_2px_color-mix\(in_srgb\,var\(--color-danger\)_20\%\,transparent\)\]:focus-within:where([data-ac-ds], [data-ac-ds] *) {
     --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,#ef4444 20%,transparent)) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -4152,6 +4270,13 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .focus-within\:shadow-\[0_0_0_2px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\]:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 20%,transparent)) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 20%,transparent)) !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;
+  }
   @media (hover: hover) {
     .hover\:-translate-y-0\.5:hover:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-y: calc(var(--spacing) * -0.5) !important;
@@ -4549,6 +4674,15 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       border-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
     }
   }
+  .focus\:bg-accent-hover:focus:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent-hover) !important;
+  }
+  .focus\:bg-danger\/5:focus: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;
+    }
+  }
   .focus\:bg-danger\/10:focus: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)) {
@@ -4571,6 +4705,13 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .focus\:shadow-\[0_0_0_2px_color-mix\(in_srgb\,var\(--color-primary\)_20\%\,transparent\)\]:focus:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light)) 20%,transparent)) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 20%,transparent)) !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;
+  }
   .focus\:outline-none:focus:where([data-ac-ds], [data-ac-ds] *) {
     --tw-outline-style: none !important;
     outline-style: none !important;
@@ -4679,6 +4820,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       color: var(--color-heading) !important;
     }
   }
+  .disabled\:pointer-events-none:disabled:where([data-ac-ds], [data-ac-ds] *) {
+    pointer-events: none !important;
+  }
   .disabled\:cursor-not-allowed:disabled:where([data-ac-ds], [data-ac-ds] *) {
     cursor: not-allowed !important;
   }
@@ -4698,6 +4842,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-shadow: 0 0 #0000 !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;
   }
+  .disabled\:not-checked\:not-indeterminate\:bg-surface-sunken:disabled:not(:checked):not(:indeterminate):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-surface-sunken) !important;
+  }
   @media (hover: hover) {
     .disabled\:hover\:scale-100:disabled:hover:where([data-ac-ds], [data-ac-ds] *) {
       --tw-scale-x: 100% !important;
@@ -4717,6 +4864,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .disabled\:hover\:text-muted:disabled:hover:where([data-ac-ds], [data-ac-ds] *) {
       color: var(--color-muted) !important;
     }
+    .disabled\:hover\:no-underline:disabled:hover:where([data-ac-ds], [data-ac-ds] *) {
+      text-decoration-line: none !important;
+    }
   }
   .disabled\:active\:translate-y-0:disabled:active:where([data-ac-ds], [data-ac-ds] *) {
     --tw-translate-y: 0px !important;
@@ -5005,6 +5155,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .max-sm\:w-auto:where([data-ac-ds], [data-ac-ds] *) {
       width: auto !important;
     }
+    .max-sm\:min-w-0:where([data-ac-ds], [data-ac-ds] *) {
+      min-width: 0px !important;
+    }
+    .max-sm\:flex-1:where([data-ac-ds], [data-ac-ds] *) {
+      flex: 1 !important;
+    }
+    .max-sm\:basis-full:where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 100% !important;
+    }
+    .max-sm\:flex-wrap:where([data-ac-ds], [data-ac-ds] *) {
+      flex-wrap: wrap !important;
+    }
+    .max-sm\:gap-2:where([data-ac-ds], [data-ac-ds] *) {
+      gap: calc(var(--spacing) * 2) !important;
+    }
     .max-sm\:rounded-10:where([data-ac-ds], [data-ac-ds] *) {
       border-radius: var(--radius-10) !important;
     }
@@ -5364,6 +5529,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .\[\&_\.cm-mergeView\]\:h-full .cm-mergeView:where([data-ac-ds], [data-ac-ds] *) {
     height: 100% !important;
   }
+  .\[\&_\:has\(\>input\)\]\:rounded-8 :has( > input):where([data-ac-ds], [data-ac-ds] *) {
+    border-radius: var(--radius-8) !important;
+  }
   .\[\&_\[data-ac-ds\]\>label\:first-child\]\:sr-only [data-ac-ds] > label:first-child:where([data-ac-ds], [data-ac-ds] *) {
     position: absolute !important;
     width: 1px !important;
@@ -5424,6 +5592,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .\[\&_input\]\:rounded-8 input:where([data-ac-ds], [data-ac-ds] *) {
     border-radius: var(--radius-8) !important;
   }
+  .\[\&_input\]\:pr-3 input:where([data-ac-ds], [data-ac-ds] *) {
+    padding-right: calc(var(--spacing) * 3) !important;
+  }
+  .\[\&_input\]\:pl-3 input:where([data-ac-ds], [data-ac-ds] *) {
+    padding-left: calc(var(--spacing) * 3) !important;
+  }
   .\[\&_input\]\:font-mono input:where([data-ac-ds], [data-ac-ds] *) {
     font-family: var(--font-mono) !important;
   }
@@ -5431,6 +5605,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-font-weight: var(--font-weight-medium) !important;
     font-weight: var(--font-weight-medium) !important;
   }
+  .\[\&_input\]\:placeholder\:text-heading\/50 input:where([data-ac-ds], [data-ac-ds] *)::placeholder {
+    color: color-mix(in srgb, #252525 50%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-heading) 50%, transparent) !important;
+    }
+  }
   .\[\&_strong\]\:font-semibold strong:where([data-ac-ds], [data-ac-ds] *) {
     --tw-font-weight: var(--font-weight-semibold) !important;
     font-weight: var(--font-weight-semibold) !important;
@@ -5523,6 +5703,17 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-shadow: 0 0 #0000 !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;
   }
+  .\[\&\>div\:first-child\]\:sr-only > div:first-child:where([data-ac-ds], [data-ac-ds] *) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border-width: 0 !important;
+  }
   @media (width >= 40rem) {
     .sm\:\[\&\>div\:first-child\]\:sr-only > div:first-child:where([data-ac-ds], [data-ac-ds] *) {
       position: absolute !important;
@@ -5544,6 +5735,17 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: 17px !important;
     height: 17px !important;
   }
+  .\[\&\>label\:first-child\]\:sr-only > label:first-child:where([data-ac-ds], [data-ac-ds] *) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border-width: 0 !important;
+  }
   @media (width >= 40rem) {
     .sm\:\[\&\>label\:first-child\]\:sr-only > label:first-child:where([data-ac-ds], [data-ac-ds] *) {
       position: absolute !important;
@@ -5615,6 +5817,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   [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;
   }
+  tbody .\[tbody_\&\]\:h-\[51px\]:where([data-ac-ds], [data-ac-ds] *) {
+    height: 51px !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/AcAppSwitcher.vue.d.ts

@@ -63,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string;
+    align: "start" | "end";
     currentApp: "console" | "db" | "platform" | "id" | "billing" | "selfhost" | "learn" | "grafana" | "observe" | (string & {});
     baseUrl: string;
     activeOrganization: string;
@@ -71,7 +72,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     isOfflineInstaller: boolean;
     apps: AppSwitcherApp[];
     hideCurrent: boolean;
-    align: "start" | "end";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/lib/components/AcAppSwitcher.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import e from "./AcLogo.js";
-import t from "./AcNavbarItem.js";
-import { fixedFrame as n } from "./fixedFrame.js";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcLogo.js";
+import n from "./AcNavbarItem.js";
 import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, openBlock as _, ref as v, renderList as te, renderSlot as ne, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as re, useModel as ie, watch as ae, withCtx as oe } from "vue";
 import { ChartLine as se, Check as ce, Database as le, GraduationCap as ue, Grip as de, Receipt as fe, Server as pe, ServerCog as me, Telescope as he } from "@lucide/vue";
 //#region src/lib/components/AcAppSwitcher.vue?vue&type=script&setup=true&lang.ts
@@ -163,11 +163,11 @@ var ge = {
 			t.length && t[Math.max(0, Math.min(e, t.length - 1))].focus();
 		}
 		function X() {
-			let e = q();
-			if (!e || !V.value) return;
-			let t = e.getBoundingClientRect(), r = n(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - t.bottom - 6 - 8, s = t.top - r.top - 6 - 8, c = o < a && s > o, l = (j.align === "end" ? t.right - i : t.left) - r.left;
+			let t = q();
+			if (!t || !V.value) return;
+			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (j.align === "end" ? n.right - i : n.left) - r.left;
 			U.value = !c, H.value = {
-				[c ? "bottom" : "top"]: `${c ? r.bottom - t.top + 6 : t.bottom + 6 - r.top}px`,
+				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.bottom + 6 - r.top}px`,
 				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
 				maxHeight: `${Math.max(c ? s : o, 160)}px`
 			};
@@ -217,7 +217,7 @@ var ge = {
 			await m(), X();
 			let t = J(), n = G.value.findIndex(K);
 			Y(n >= 0 && t[n] ? n : 0);
-		}), ee(() => $(!1)), (n, o) => (_(), l("div", ge, [d(t, {
+		}), ee(() => $(!1)), (e, o) => (_(), l("div", ge, [d(n, {
 			ref_key: "trigger",
 			ref: B,
 			label: f.label,
@@ -260,41 +260,41 @@ var ge = {
 					id: z,
 					class: "px-3 pt-2 pb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 				}, b(f.label), 1),
-				u("ul", _e, [(_(!0), l(r, null, te(G.value, (t) => (_(), l("li", { key: t.name }, [u("a", {
-					href: t.url,
+				u("ul", _e, [(_(!0), l(r, null, te(G.value, (e) => (_(), l("li", { key: e.name }, [u("a", {
+					href: e.url,
 					"data-app-tile": "",
-					"aria-current": K(t) ? "page" : void 0,
-					title: t.subtitle || void 0,
+					"aria-current": K(e) ? "page" : void 0,
+					title: e.subtitle || void 0,
 					class: "group relative flex h-full flex-col items-center gap-2 rounded-8 px-1.5 pt-3 pb-2.5 text-center no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
 					"data-ac-ds": "",
 					"data-testid": "ac-app-switcher-app",
-					onClick: (e) => De(t)
+					onClick: (t) => De(e)
 				}, [
 					u("span", {
-						class: h(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", t.iconUrl || t.name === O && !t.icon ? "bg-surface ring-border" : be[t.color ?? "slate"]]),
+						class: h(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", e.iconUrl || e.name === O && !e.icon ? "bg-surface ring-border" : be[e.color ?? "slate"]]),
 						"aria-hidden": "true"
-					}, [t.iconUrl ? (_(), l("img", {
+					}, [e.iconUrl ? (_(), l("img", {
 						key: 0,
-						src: t.iconUrl,
+						src: e.iconUrl,
 						alt: "",
 						class: "size-7 object-contain"
-					}, null, 8, S)) : t.icon ? (_(), s(y(t.icon), {
+					}, null, 8, S)) : e.icon ? (_(), s(y(e.icon), {
 						key: 1,
 						class: "size-5"
-					})) : t.name === O ? (_(), s(e, {
+					})) : e.name === O ? (_(), s(t, {
 						key: 2,
 						variant: "mark",
 						size: 28,
 						label: ""
-					})) : (_(), l("span", C, b(t.title.charAt(0)), 1))], 2),
-					u("span", w, b(t.title), 1),
-					t.subtitle ? (_(), l("span", T, b(t.subtitle), 1)) : c("", !0),
-					K(t) ? (_(), l("span", E, [d(x(ce), {
+					})) : (_(), l("span", C, b(e.title.charAt(0)), 1))], 2),
+					u("span", w, b(e.title), 1),
+					e.subtitle ? (_(), l("span", T, b(e.subtitle), 1)) : c("", !0),
+					K(e) ? (_(), l("span", E, [d(x(ce), {
 						class: "size-2.5",
 						"stroke-width": 3
 					})])) : c("", !0)
 				], 8, ve)]))), 128))]),
-				n.$slots.footer ? (_(), l("div", D, [ne(n.$slots, "footer", { close: Z })])) : c("", !0)
+				e.$slots.footer ? (_(), l("div", D, [ne(e.$slots, "footer", { close: Z })])) : c("", !0)
 			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));

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

@@ -20,9 +20,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     height: number;
-    loading: boolean;
     animation: boolean;
     tooltip: boolean;
+    loading: boolean;
     emptyText: string;
     lineWidth: number;
     stacked: boolean;

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

@@ -21,9 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     height: number;
     orientation: "vertical" | "horizontal";
     radius: number;
-    loading: boolean;
     animation: boolean;
     tooltip: boolean;
+    loading: boolean;
     emptyText: string;
     stacked: boolean;
     renderer: "canvas" | "svg";

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

@@ -12,7 +12,7 @@ export interface Props {
     iconOnly?: boolean;
     /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
-    /** Disables the button (50% opacity, no click events). */
+    /** Disables the button: 50% opacity, no clicks, and no hover colour. With `hint` it keeps hover so the hint still shows, with a not-allowed cursor. */
     disabled?: boolean;
     /** Native button type. Use `submit` inside forms. */
     type?: "button" | "submit" | "reset";
@@ -24,6 +24,10 @@ export interface Props {
     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;
+    /** Shows this text in an `AcTooltip` above the button on hover and keyboard focus, e.g. "Delete VPC" on an icon-only button. An icon-only button without `title` also takes it as its accessible name. Old `tooltip-text`. */
+    tooltip?: string;
+    /** Stretches the button to the full width of its container. */
+    block?: boolean;
 }
 type __VLS_Slots = {
     /** Button content, after the icon and `title`. An icon here is 16px unless it has its own size class, e.g. `size-5`. */
@@ -45,11 +49,13 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     color: Tone | "neutral" | "white" | "ghost";
     href: string;
     size: "xs" | "small" | "normal" | "medium" | "xlarge";
+    tooltip: string;
     iconOnly: boolean;
     loading: boolean;
     rounded: boolean;
     boxed: boolean;
     hint: string;
+    block: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;