@ac-design/design-system 2.6.1 → 2.8.0

package/dist/lib/compat.css

@@ -16,6 +16,7 @@ code:is([data-ac-ds], [data-ac-ds] *), kbd:is([data-ac-ds], [data-ac-ds] *), sam
     --font-sans: "Roboto Variable", "Roboto", ui-sans-serif, system-ui, sans-serif;
     --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
     --spacing: calc(4px * var(--ac-scale));
+    --container-xs: 320px;
     --container-sm: 384px;
     --container-md: 448px;
     --container-xl: 576px;
@@ -315,6 +316,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     display: none !important;
   }
 @layer ac-compat {
+  .\@container\/steps:where([data-ac-ds], [data-ac-ds] *) {
+    container-type: inline-size !important;
+    container-name: steps !important;
+  }
   .\@container:where([data-ac-ds], [data-ac-ds] *) {
     container-type: inline-size !important;
   }
@@ -371,6 +376,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .inset-y-0:where([data-ac-ds], [data-ac-ds] *) {
     inset-block: 0px !important;
   }
+  .start-0:where([data-ac-ds], [data-ac-ds] *) {
+    inset-inline-start: calc(var(--spacing) * 0) !important;
+  }
   .-top-1:where([data-ac-ds], [data-ac-ds] *) {
     top: calc(var(--spacing) * -1) !important;
   }
@@ -407,8 +415,8 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .top-10:where([data-ac-ds], [data-ac-ds] *) {
     top: calc(var(--spacing) * 10) !important;
   }
-  .top-20:where([data-ac-ds], [data-ac-ds] *) {
-    top: calc(var(--spacing) * 20) !important;
+  .top-\[var\(--ac-toaster-offset\,80px\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    top: var(--ac-toaster-offset,80px) !important;
   }
   .top-full:where([data-ac-ds], [data-ac-ds] *) {
     top: 100% !important;
@@ -455,14 +463,17 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bottom-0:where([data-ac-ds], [data-ac-ds] *) {
     bottom: 0px !important;
   }
+  .bottom-1\.5:where([data-ac-ds], [data-ac-ds] *) {
+    bottom: calc(var(--spacing) * 1.5) !important;
+  }
   .bottom-2:where([data-ac-ds], [data-ac-ds] *) {
     bottom: calc(var(--spacing) * 2) !important;
   }
   .bottom-3:where([data-ac-ds], [data-ac-ds] *) {
     bottom: calc(var(--spacing) * 3) !important;
   }
-  .bottom-5:where([data-ac-ds], [data-ac-ds] *) {
-    bottom: calc(var(--spacing) * 5) !important;
+  .bottom-\[var\(--ac-toaster-offset\,20px\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    bottom: var(--ac-toaster-offset,20px) !important;
   }
   .bottom-full:where([data-ac-ds], [data-ac-ds] *) {
     bottom: 100% !important;
@@ -572,6 +583,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     margin-inline: auto !important;
     padding-inline: calc(var(--spacing) * 4) !important;
   }
+  .-mx-1:where([data-ac-ds], [data-ac-ds] *) {
+    margin-inline: calc(var(--spacing) * -1) !important;
+  }
   .-mx-2:where([data-ac-ds], [data-ac-ds] *) {
     margin-inline: calc(var(--spacing) * -2) !important;
   }
@@ -659,24 +673,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .-mr-2:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * -2) !important;
   }
+  .mr-0\.5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-right: calc(var(--spacing) * 0.5) !important;
+  }
   .mr-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: var(--spacing) !important;
   }
   .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;
   }
@@ -1188,6 +1199,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-72:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(var(--spacing) * 72) !important;
   }
+  .w-\[3ch\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: 3ch !important;
+  }
+  .w-\[3px\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: 3px !important;
+  }
   .w-\[34px\]:where([data-ac-ds], [data-ac-ds] *) {
     width: 34px !important;
   }
@@ -1197,6 +1214,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .w-\[calc\(100\%-52px\)\]:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(100% - 52px) !important;
   }
+  .w-\[calc\(296px\*var\(--ac-scale\)\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    width: calc(296px * var(--ac-scale)) !important;
+  }
   .w-\[calc\(320px\*var\(--ac-scale\)\)\]:where([data-ac-ds], [data-ac-ds] *) {
     width: calc(320px * var(--ac-scale)) !important;
   }
@@ -1302,6 +1322,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .max-w-xl:where([data-ac-ds], [data-ac-ds] *) {
     max-width: var(--container-xl) !important;
   }
+  .max-w-xs:where([data-ac-ds], [data-ac-ds] *) {
+    max-width: var(--container-xs) !important;
+  }
   .min-w-0:where([data-ac-ds], [data-ac-ds] *) {
     min-width: 0px !important;
   }
@@ -1810,6 +1833,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .overflow-auto:where([data-ac-ds], [data-ac-ds] *) {
     overflow: auto !important;
   }
+  .overflow-clip:where([data-ac-ds], [data-ac-ds] *) {
+    overflow: clip !important;
+  }
   .overflow-hidden:where([data-ac-ds], [data-ac-ds] *) {
     overflow: hidden !important;
   }
@@ -1855,6 +1881,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .rounded-full:where([data-ac-ds], [data-ac-ds] *) {
     border-radius: calc(infinity * 1px) !important;
   }
+  .rounded-e-full:where([data-ac-ds], [data-ac-ds] *) {
+    border-start-end-radius: calc(infinity * 1px) !important;
+    border-end-end-radius: calc(infinity * 1px) !important;
+  }
   .rounded-t-8:where([data-ac-ds], [data-ac-ds] *) {
     border-top-left-radius: var(--radius-8) !important;
     border-top-right-radius: var(--radius-8) !important;
@@ -3425,6 +3455,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       color: color-mix(in oklab, var(--color-info) 5%, transparent) !important;
     }
   }
+  .text-inherit:where([data-ac-ds], [data-ac-ds] *) {
+    color: inherit !important;
+  }
   .text-muted:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-muted) !important;
   }
@@ -4174,9 +4207,27 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .group-focus-visible\/thumb\:opacity-100:is(:where(.group\/thumb):focus-visible *):where([data-ac-ds], [data-ac-ds] *) {
     opacity: 100% !important;
   }
+  .group-aria-pressed\/row\:block:is(:where(.group\/row)[aria-pressed="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-pressed\/row\:text-primary:is(:where(.group\/row)[aria-pressed="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
   .group-aria-\[current\=page\]\:text-primary\!:is(:where(.group)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-primary) !important;
   }
+  .group-aria-\[current\=page\]\/row\:block:is(:where(.group\/row)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-\[current\=page\]\/row\:text-primary:is(:where(.group\/row)[aria-current="page"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
+  .group-aria-\[current\=true\]\/row\:block:is(:where(.group\/row)[aria-current="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    display: block !important;
+  }
+  .group-aria-\[current\=true\]\/row\:text-primary:is(:where(.group\/row)[aria-current="true"] *):where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-primary) !important;
+  }
   .peer-checked\:scale-100:is(:where(.peer):checked ~ *):where([data-ac-ds], [data-ac-ds] *) {
     --tw-scale-x: 100% !important;
     --tw-scale-y: 100% !important;
@@ -4284,6 +4335,12 @@ 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;
     }
   }
+  .focus-within\:bg-surface-sunken:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-surface-sunken) !important;
+  }
+  .focus-within\:text-heading:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    color: var(--color-heading) !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)) {
@@ -4298,6 +4355,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\:ring-2:focus-within: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;
+  }
+  .focus-within\:ring-ring:focus-within:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-color: var(--color-ring) !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;
@@ -4961,6 +5025,12 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .has-\[\[data-ac-card-link\]\:focus-visible\]\:ring-offset-surface:has(:is([data-ac-card-link]:focus-visible)):where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-offset-color: var(--color-surface) !important;
   }
+  .has-\[\[data-accordion-trigger\]\:enabled\:hover\]\:bg-accent-hover\/60:has(:is([data-accordion-trigger]:enabled:hover)):where([data-ac-ds], [data-ac-ds] *) {
+    background-color: color-mix(in srgb, #f2f9fd 60%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-accent-hover) 60%, transparent) !important;
+    }
+  }
   .has-\[img\]\:border:has(:is(img)):where([data-ac-ds], [data-ac-ds] *) {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -5014,6 +5084,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .aria-disabled\:opacity-50[aria-disabled="true"]:where([data-ac-ds], [data-ac-ds] *) {
     opacity: 50% !important;
   }
+  .aria-pressed\:bg-accent[aria-pressed="true"]:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent) !important;
+  }
   .aria-\[current\=page\]\:border-primary\/35[aria-current="page"]: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)) {
@@ -5045,6 +5118,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 10%, transparent) var(--tw-shadow-alpha), transparent) !important;
     }
   }
+  .aria-\[current\=true\]\:bg-accent[aria-current="true"]:where([data-ac-ds], [data-ac-ds] *) {
+    background-color: var(--color-accent) !important;
+  }
   @media (prefers-reduced-motion: no-preference) {
     .motion-safe\:-translate-x-1:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-x: calc(var(--spacing) * -1) !important;
@@ -5282,6 +5358,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .sm\:shrink-0:where([data-ac-ds], [data-ac-ds] *) {
       flex-shrink: 0 !important;
     }
+    .sm\:basis-\[160px\]:where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 160px !important;
+    }
     .sm\:-translate-x-1\/2:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-x: calc(calc(1 / 2 * 100%) * -1) !important;
       translate: var(--tw-translate-x) var(--tw-translate-y) !important;
@@ -5503,7 +5582,77 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       display: none !important;
     }
   }
+  @container steps (width < 480px) {
+    .\@max-\[480px\]\/steps\:sr-only: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;
+    }
+  }
+  @container (width < 448px) {
+    .\@max-md\:-mt-1:where([data-ac-ds], [data-ac-ds] *) {
+      margin-top: calc(var(--spacing) * -1) !important;
+    }
+    .\@max-md\:-mt-2:where([data-ac-ds], [data-ac-ds] *) {
+      margin-top: calc(var(--spacing) * -2) !important;
+    }
+    .\@max-md\:w-full:where([data-ac-ds], [data-ac-ds] *) {
+      width: 100% !important;
+    }
+    .\@max-md\:basis-full:where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 100% !important;
+    }
+    .\@max-md\:flex-wrap:where([data-ac-ds], [data-ac-ds] *) {
+      flex-wrap: wrap !important;
+    }
+    .\@max-md\:pb-3:where([data-ac-ds], [data-ac-ds] *) {
+      padding-bottom: calc(var(--spacing) * 3) !important;
+    }
+    .\@max-md\:pb-4:where([data-ac-ds], [data-ac-ds] *) {
+      padding-bottom: calc(var(--spacing) * 4) !important;
+    }
+    .\@max-md\:pl-8:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 8) !important;
+    }
+    .\@max-md\:pl-12:where([data-ac-ds], [data-ac-ds] *) {
+      padding-left: calc(var(--spacing) * 12) !important;
+    }
+  }
+  @container (width >= 401px) {
+    .\@min-\[401px\]\:sr-only: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;
+    }
+  }
   @container (width >= 512px) {
+    .\@lg\:w-2\/5:where([data-ac-ds], [data-ac-ds] *) {
+      width: calc(2 / 5 * 100%) !important;
+    }
+    .\@lg\:max-w-\[240px\]:where([data-ac-ds], [data-ac-ds] *) {
+      max-width: 240px !important;
+    }
+    .\@lg\:shrink-0:where([data-ac-ds], [data-ac-ds] *) {
+      flex-shrink: 0 !important;
+    }
+    .\@lg\:flex-row:where([data-ac-ds], [data-ac-ds] *) {
+      flex-direction: row !important;
+    }
+    .\@lg\:items-center:where([data-ac-ds], [data-ac-ds] *) {
+      align-items: center !important;
+    }
     .\@lg\:gap-x-2:where([data-ac-ds], [data-ac-ds] *) {
       column-gap: calc(var(--spacing) * 2) !important;
     }
@@ -5796,6 +5945,9 @@ 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\(\&\)\]\:w-full):where([data-ac-ds], [data-ac-ds] *) {
+    width: 100% !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)) {

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

@@ -14,12 +14,14 @@ type __VLS_Props = Props;
 type __VLS_Slots = {
     /** The panel content, shown when open. */
     default?: () => unknown;
-    /** Replaces the `title` text. Keep it to text and inline badges; it sits inside the header button. */
+    /** Replaces the `title` text. Keep it to text and inline badges; it sits inside the header button. Put buttons in `actions`. */
     title?: () => unknown;
     /** Replaces the `description` text. */
     description?: () => unknown;
     /** A 16px icon before the title, shown in a tinted 32px tile. */
     icon?: () => unknown;
+    /** Buttons at the right of the header, e.g. Edit and Delete. They sit beside the header button, not in it, so clicking them doesn't open or close the item. The chevron moves to the start of the header; below 448px the actions wrap under the title. */
+    actions?: () => unknown;
 };
 type __VLS_ModelProps = {
     /** Whether the item is open. Use `v-model:open` for a single item outside an AcAccordion. */

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

@@ -1,5 +1,5 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
-import { ChevronDown as b } from "@lucide/vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useId as h, useModel as g, watch as _, withCtx as v } from "vue";
+import { ChevronDown as y, ChevronRight as b } from "@lucide/vue";
 //#region src/lib/components/AcAccordionItem.vue?vue&type=script&setup=true&lang.ts
 var x = [
 	"id",
@@ -7,7 +7,7 @@ var x = [
 	"aria-controls",
 	"disabled"
 ], S = {
-	key: 0,
+	key: 1,
 	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-4",
 	"aria-hidden": "true"
 }, C = { class: "min-w-0 flex-1" }, w = { class: "block text-lg leading-6 font-semibold tracking-tight text-heading" }, T = {
@@ -17,9 +17,9 @@ var x = [
 	"id",
 	"aria-labelledby",
 	"inert"
-], D = /*@__PURE__*/ s({
+], D = /*@__PURE__*/ o({
 	__name: "AcAccordionItem",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ c({
 		value: { default: void 0 },
 		title: { default: "" },
 		description: { default: "" },
@@ -35,46 +35,55 @@ var x = [
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ l(["toggle"], ["update:open"]),
-	setup(s, { emit: l }) {
-		let D = s, O = _(s, "open"), k = l, A = c("ac-accordion", null), j = g(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
+	emits: /*@__PURE__*/ c(["toggle"], ["update:open"]),
+	setup(o, { emit: c }) {
+		let D = o, O = g(o, "open"), k = c, A = s("ac-accordion", null), j = h(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
 		function I() {
 			if (D.disabled) return;
 			let e = !N.value;
 			A ? A.toggle(M.value) : O.value = e, k("toggle", e);
 		}
-		return v(N, (e) => {
+		return _(N, (e) => {
 			A && (O.value = e);
-		}), (e, c) => (d(), r("div", {
-			class: u(F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface"),
+		}), (e, s) => (u(), r("div", {
+			class: l([F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion-item"
-		}, [(d(), t(p(`h${P.value}`), { class: "m-0 text-base leading-5 font-normal tracking-normal" }, {
-			default: y(() => [i("button", {
-				id: `${h(j)}-trigger`,
+		}, [i("div", { class: l(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(u(), t(f(`h${P.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
+			default: v(() => [i("button", {
+				id: `${m(j)}-trigger`,
 				type: "button",
 				"data-accordion-trigger": "",
 				"aria-expanded": N.value,
-				"aria-controls": `${h(j)}-panel`,
-				disabled: s.disabled,
-				class: u(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !s.disabled && "hover:bg-accent-hover/60"]]),
+				"aria-controls": `${m(j)}-panel`,
+				disabled: o.disabled,
+				class: l(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"]]),
 				onClick: I
 			}, [
-				e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
-				i("span", C, [i("span", w, [f(e.$slots, "title", {}, () => [a(m(s.title), 1)])]), s.description || e.$slots.description ? (d(), r("span", T, [f(e.$slots, "description", {}, () => [a(m(s.description), 1)])])) : n("", !0)]),
-				o(h(b), {
-					class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
+				e.$slots.actions ? (u(), t(m(b), {
+					key: 0,
+					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-90 text-heading"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : n("", !0),
+				e.$slots.icon ? (u(), r("span", S, [d(e.$slots, "icon")])) : n("", !0),
+				i("span", C, [i("span", w, [d(e.$slots, "title", {}, () => [a(p(o.title), 1)])]), o.description || e.$slots.description ? (u(), r("span", T, [d(e.$slots, "description", {}, () => [a(p(o.description), 1)])])) : n("", !0)]),
+				e.$slots.actions ? n("", !0) : (u(), t(m(y), {
+					key: 2,
+					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])
+				}, null, 8, ["class"]))
 			], 10, x)]),
 			_: 3
-		})), i("div", { class: u(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
-			id: `${h(j)}-panel`,
+		})), e.$slots.actions ? (u(), r("div", {
+			key: 0,
+			class: l(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", F.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
+		}, [d(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: l(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
+			id: `${m(j)}-panel`,
 			role: "region",
-			"aria-labelledby": `${h(j)}-trigger`,
+			"aria-labelledby": `${m(j)}-trigger`,
 			inert: !N.value || void 0,
 			class: "min-h-0 overflow-hidden"
-		}, [i("div", { class: u(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+		}, [i("div", { class: l(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [d(e.$slots, "default")], 2)], 8, E)], 2)], 2));
 	}
 });
 //#endregion

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

@@ -41,8 +41,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     variant: "tinted" | "callout";
     title: string;
-    icon: Component;
     color: Tone | "neutral";
+    icon: Component;
     size: "normal" | "small";
     loading: boolean;
     dismissible: boolean;

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

@@ -27,8 +27,8 @@ type __VLS_Slots = {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: Variant;
     label: string;
-    icon: Component;
     color: Tone | "pending" | "default" | "secondary" | "dark";
+    icon: Component;
     status: string | null;
     rounded: boolean;
     dot: boolean;

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

@@ -40,8 +40,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     variant: "subtle" | "solid";
     title: string;
-    icon: Component;
     color: "info" | "warning" | "danger" | "primary" | "neutral";
+    icon: Component;
     dismissible: boolean;
     hideIcon: boolean;
     actionLabel: string;

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

@@ -49,8 +49,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     variant: "default" | "muted" | "dashed" | "danger";
     title: string;
     description: string;
-    icon: Component;
     color: "primary" | "blue" | "violet" | "red" | "amber";
+    icon: Component;
     subtitle: string;
     padded: boolean;
     padding: "none" | "xs" | "sm" | "md" | "lg";

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

@@ -12,7 +12,7 @@ var g = {
 	class: "mt-0.5 text-xs leading-4 text-muted"
 }, b = {
 	key: 1,
-	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2"
+	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap"
 }, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
@@ -203,7 +203,7 @@ var g = {
 						key: 1,
 						class: l(["absolute -top-4 -right-4 [&_svg]:size-24!", M.value.watermark])
 					}, [d(e.$slots, "icon")], 2))])) : i("", !0),
-					o("div", { class: l(["flex min-w-0 flex-1 basis-[220px] items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
+					o("div", { class: l(["flex min-w-0 flex-1 basis-[220px] items-center sm:basis-[160px]", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
 						key: 0,
 						class: l(["flex shrink-0 items-center justify-center", [
 							M.value.tile,

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

@@ -123,9 +123,9 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     bold: boolean;
     title: string;
     value: undefined;
-    icon: string;
     color: string;
     href: string;
+    icon: string;
     align: "left" | "center" | "right";
     maxWidth: string;
     tooltip: string;