@agent-ui-kit/web-components 0.0.14 → 0.0.16

package/dist/components/agent.js

@@ -1,13 +1,13 @@
-import { j as t, f as a, m as i, h as n, l as s, n as g, k as u, i as r, g as d } from "../chunks/agent-C72JZNe6.js";
+import { b as t, d as a, e as i, f as s, g, h as n, i as u, j as d, k as r } from "../chunks/agent-XMhz_6OA.js";
 export {
   t as AuiAgentActivity,
   a as AuiAgentFeed,
   i as AuiAgentInput,
-  n as AuiAgentMessage,
-  s as AuiAgentPanel,
-  g as AuiAgentPrompt,
+  s as AuiAgentMessage,
+  g as AuiAgentPanel,
+  n as AuiAgentPrompt,
   u as AuiAgentSeeds,
-  r as AuiAgentText,
-  d as AuiAgentThread
+  d as AuiAgentText,
+  r as AuiAgentThread
 };
 //# sourceMappingURL=agent.js.map

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,7 +1,9 @@
 import { AgentElement, AttributeSchema } from '../../element/index.ts';
 export declare class AuiBreadcrumb extends AgentElement {
+    #private;
     static attributes: AttributeSchema;
     label: string;
     joiner: string;
+    'max-depth': string;
     protected activate(): void;
 }

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,14 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiCheckboxGroup extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    label: string;
+    min: number;
+    max: number;
+    protected activate(): void;
+    protected dispose(): void;
+}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export { AuiCheckboxGroup } from './checkbox-group.ts';

package/dist/components/color-area/color-area.d.ts

@@ -3,9 +3,10 @@ export declare class AuiColorArea extends AgentElement {
     #private;
     static attributes: AttributeSchema;
     hue: string;
-    saturation: string;
+    chroma: string;
     lightness: string;
     disabled: boolean;
+    static readonly MAX_CHROMA = 0.4;
     protected activate(): void;
     protected dispose(): void;
 }

package/dist/components/color-picker/color-picker.d.ts

@@ -4,6 +4,7 @@ export declare class AuiColorPicker extends AgentElement {
     static attributes: AttributeSchema;
     value: string;
     format: string;
+    alpha: boolean;
     disabled: boolean;
     protected activate(): void;
     protected dispose(): void;

package/dist/components/color-picker/oklch-utils.d.ts

@@ -0,0 +1,18 @@
+export declare function oklchToHex(l: number, c: number, h: number, a?: number): string;
+export declare function hexToOklch(hex: string): {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+};
+export declare function oklchToString(l: number, c: number, h: number, a?: number): string;
+export declare function parseOklchString(str: string): {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+} | null;
+/**
+ * Check whether an OKLCH color is within sRGB gamut.
+ */
+export declare function isInGamut(l: number, c: number, h: number): boolean;

package/dist/components/color-slider/color-slider.d.ts

@@ -7,7 +7,7 @@ export declare class AuiColorSlider extends AgentElement {
     min: string;
     max: string;
     hue: string;
-    saturation: string;
+    chroma: string;
     lightness: string;
     disabled: boolean;
     protected activate(): void;

package/dist/components/editor.js

@@ -1,4 +1,4 @@
-import { c as x, A as p, C as z } from "../chunks/agent-C72JZNe6.js";
+import { c as x, A as p, C as z } from "../chunks/agent-XMhz_6OA.js";
 const b = x("aui-editor");
 class S extends p {
   static attributes = {

package/dist/components/form/form.d.ts

@@ -0,0 +1,12 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiForm extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    action: string;
+    method: string;
+    get noValidate(): boolean;
+    protected activate(): void;
+    protected dispose(): void;
+    /** Programmatic submit — runs validation then dispatches. */
+    submit(): void;
+}

package/dist/components/form/index.d.ts

@@ -0,0 +1 @@
+export { AuiForm } from './form.ts';

package/dist/components/graph.js

@@ -1,5 +1,5 @@
 import { AuiEditor as E, AuiEditorLayer as S } from "./editor.js";
-import { A as f } from "../chunks/agent-C72JZNe6.js";
+import { A as f } from "../chunks/agent-XMhz_6OA.js";
 const w = "http://www.w3.org/2000/svg";
 class N extends E {
   static attributes = {

package/dist/components/index.d.ts

@@ -70,3 +70,5 @@ export { AuiCarousel } from './carousel/index.ts';
 export { AuiNotificationCenter } from './notification-center/index.ts';
 export type { Notification } from './notification-center/index.ts';
 export { AuiEmptyState } from './empty-state/index.ts';
+export { AuiCheckboxGroup } from './checkbox-group/index.ts';
+export { AuiForm } from './form/index.ts';

package/dist/components/noodles/noodle-controller.d.ts

@@ -18,7 +18,7 @@ export interface NoodleOptions {
     selector?: string;
     /** Allow interactive creation/deletion of connections (default: false) */
     editable?: boolean;
-    /** Noodle stroke color (default: 'var(--aui-accent-500)') */
+    /** Noodle stroke color (default: 'var(--aui-accent)') */
     color?: string;
     /** Noodle stroke width in px (default: 2) */
     strokeWidth?: number;

package/dist/components/stat/stat.d.ts

@@ -6,6 +6,10 @@ export declare class AuiStat extends AgentElement {
     value: string;
     trend: string;
     change: string;
+    'animate-count': boolean;
+    'animate-count-start': string;
+    'animate-scramble': boolean;
+    'duration-ms': string;
     protected activate(): void;
     protected dispose(): void;
 }

package/dist/components/time-field/time-field.d.ts

@@ -7,6 +7,7 @@ export declare class AuiTimeField extends AgentElement {
     max: string;
     step: string;
     format: string;
+    'show-seconds': boolean;
     placeholder: string;
     disabled: boolean;
     protected activate(): void;

package/dist/components.js

@@ -1,140 +1,129 @@
-import { A as a } from "./chunks/agent-C72JZNe6.js";
-import { o as b, j as x, f as S, m as T, h as I, l as P, n as h, k as f, i as k, g as y, R, r as v, q as F } from "./chunks/agent-C72JZNe6.js";
-import { v as D, w as E, X as G, a8 as B, x as N, y as w, A as H, V as O, W as L, ap as j, b as q, a6 as U, a4 as _, ac as z, ae as Y, ak as J, ad as K, D as Q, I as V, H as W, E as X, G as Z, F as $, g as aa, ah as ia, am as ea, ag as sa, h as ua, a7 as ta, aa as Aa, i as ra, ai as na, ar as oa, T as la, al as da, n as ma, aj as pa, j as ca, ao as ga, a as Ca, m as ba, aq as xa, p as Sa, o as Ta, Y as Ia, _ as Pa, Z as ha, C as fa, K as ka, J as ya, a3 as Ra, a9 as va, d as Fa, e as Ma, l as Da, U as Ea, B as Ga, z as Ba, q as Na, $ as wa, a1 as Ha, a2 as Oa, a0 as La, a5 as ja, an as qa, c as Ua, t as _a, u as za, L as Ya, N as Ja, Q as Ka, M as Qa, P as Va, O as Wa, s as Xa, ab as Za, f as $a, af as ai, r as ii, k as ei, R as si, S as ui } from "./chunks/empty-state-5M3uR5CM.js";
-import { g as Ai, a as ri, r as ni } from "./chunks/registry-BNb5ABBs.js";
-class r extends a {
-}
-class n extends a {
+import { A as a } from "./chunks/agent-XMhz_6OA.js";
+import { a as p, b as m, d as c, e as g, f as C, g as T, h as S, i as b, j as x, k as I, R as P, r as k, s as R } from "./chunks/agent-XMhz_6OA.js";
+import { A as h, a as G, b as f, c as D, d as B, e as E, f as M, g as w, h as y, i as H, j as O, k as v, l as L, m as N, n as j, o as U, p as _, q, r as z, s as Y, t as J, u as K, v as Q, w as V, x as W, y as X, z as Z, B as $, C as aa, D as ia, E as sa, F as ea, G as ua, H as Aa, I as ta, J as oa, K as ra, L as na, M as da, N as la, O as pa, P as ma, Q as ca, R as ga, S as Ca, T as Ta, U as Sa, V as ba, W as xa, X as Ia, Y as Pa, Z as ka, _ as Ra, $ as Fa, a0 as ha, a1 as Ga, a2 as fa, a3 as Da, a4 as Ba, a5 as Ea, a6 as Ma, a7 as wa, a8 as ya, a9 as Ha, aa as Oa, ab as va, ac as La, ad as Na, ae as ja, af as Ua, ag as _a, ah as qa, ai as za, aj as Ya, ak as Ja, al as Ka, am as Qa, an as Va, ao as Wa, ap as Xa, aq as Za, ar as $a, as as ai, at as ii, au as si } from "./chunks/form-oekEhwja.js";
+import { g as ui, a as Ai, r as ti } from "./chunks/registry-BNb5ABBs.js";
+class e extends a {
 }
-class o extends a {
+class u extends a {
 }
-class l extends a {
+class A extends a {
 }
-class d extends a {
-  static attributes = {
-    value: { type: "string", default: "0" },
-    min: { type: "string", default: "0" },
-    max: { type: "string", default: "100" }
-  };
-  activate() {
-    this.addEffect(() => {
-      const e = Number(this.min) || 0, s = Number(this.max) || 100, u = Number(this.value) || 0, t = Math.max(0, Math.min(100, (u - e) / (s - e) * 100));
-      this.style.setProperty("--aui-meter-pct", String(t));
-    });
-  }
+class t extends a {
 }
-class m extends a {
+class o extends a {
 }
-class p extends a {
+class r extends a {
 }
-class c extends a {
+class n extends a {
 }
 export {
-  b as ACTION_REGISTRY,
-  D as AuiAccordion,
-  E as AuiAccordionItem,
-  x as AuiAgentActivity,
-  S as AuiAgentFeed,
-  T as AuiAgentInput,
-  I as AuiAgentMessage,
-  P as AuiAgentPanel,
-  h as AuiAgentPrompt,
-  f as AuiAgentSeeds,
-  k as AuiAgentText,
-  y as AuiAgentThread,
-  n as AuiAlert,
-  G as AuiAppShell,
-  B as AuiAvatarGroup,
-  N as AuiBreadcrumb,
-  w as AuiBreadcrumbItem,
-  H as AuiButton,
-  O as AuiCalendarPicker,
-  L as AuiCalendarRangePicker,
-  j as AuiCarousel,
-  q as AuiCheckbox,
-  U as AuiChip,
-  _ as AuiCodeBlock,
-  z as AuiColorArea,
-  Y as AuiColorField,
-  J as AuiColorPicker,
-  K as AuiColorSlider,
-  Q as AuiCommand,
-  V as AuiCommandEmpty,
-  W as AuiCommandGroup,
-  X as AuiCommandInput,
-  Z as AuiCommandItem,
-  $ as AuiCommandList,
-  aa as AuiContainer,
-  ia as AuiContextMenu,
-  ea as AuiCopyButton,
-  sa as AuiDateField,
-  ua as AuiDialog,
-  ta as AuiDisclosure,
-  Aa as AuiDisclosureGroup,
-  ra as AuiDrawer,
-  na as AuiDropdownMenu,
-  oa as AuiEmptyState,
-  la as AuiFeed,
-  da as AuiFileUpload,
-  ma as AuiGripper,
-  pa as AuiHoverCard,
-  ca as AuiIcon,
-  ga as AuiImage,
-  Ca as AuiInput,
-  ba as AuiInputOtp,
-  o as AuiLink,
-  d as AuiMeter,
-  m as AuiNavItem,
-  xa as AuiNotificationCenter,
-  Sa as AuiOptgroup,
-  Ta as AuiOption,
-  Ia as AuiPage,
-  Pa as AuiPageContext,
-  ha as AuiPageMain,
-  fa as AuiPagination,
+  p as ACTION_REGISTRY,
+  h as AuiAccordion,
+  G as AuiAccordionItem,
+  m as AuiAgentActivity,
+  c as AuiAgentFeed,
+  g as AuiAgentInput,
+  C as AuiAgentMessage,
+  T as AuiAgentPanel,
+  S as AuiAgentPrompt,
+  b as AuiAgentSeeds,
+  x as AuiAgentText,
+  I as AuiAgentThread,
+  u as AuiAlert,
+  f as AuiAppShell,
+  D as AuiAvatarGroup,
+  B as AuiBreadcrumb,
+  E as AuiBreadcrumbItem,
+  M as AuiButton,
+  w as AuiCalendarPicker,
+  y as AuiCalendarRangePicker,
+  H as AuiCarousel,
+  O as AuiCheckbox,
+  v as AuiCheckboxGroup,
+  L as AuiChip,
+  N as AuiCodeBlock,
+  j as AuiColorArea,
+  U as AuiColorField,
+  _ as AuiColorPicker,
+  q as AuiColorSlider,
+  z as AuiCommand,
+  Y as AuiCommandEmpty,
+  J as AuiCommandGroup,
+  K as AuiCommandInput,
+  Q as AuiCommandItem,
+  V as AuiCommandList,
+  W as AuiContainer,
+  X as AuiContextMenu,
+  Z as AuiCopyButton,
+  $ as AuiDateField,
+  aa as AuiDialog,
+  ia as AuiDisclosure,
+  sa as AuiDisclosureGroup,
+  ea as AuiDrawer,
+  ua as AuiDropdownMenu,
+  Aa as AuiEmptyState,
+  ta as AuiFeed,
+  oa as AuiFileUpload,
+  ra as AuiForm,
+  na as AuiGripper,
+  da as AuiHoverCard,
+  la as AuiIcon,
+  pa as AuiImage,
+  ma as AuiInput,
+  ca as AuiInputOtp,
+  A as AuiLink,
+  ga as AuiMeter,
+  o as AuiNavItem,
+  Ca as AuiNotificationCenter,
+  Ta as AuiOptgroup,
+  Sa as AuiOption,
+  ba as AuiPage,
+  xa as AuiPageContext,
+  Ia as AuiPageMain,
+  Pa as AuiPagination,
   ka as AuiPane,
-  ya as AuiPanes,
-  Ra as AuiProgress,
-  va as AuiProgressCircle,
-  Fa as AuiRadio,
-  Ma as AuiRadioGroup,
+  Ra as AuiPanes,
+  Fa as AuiProgress,
+  ha as AuiProgressCircle,
+  Ga as AuiRadio,
+  fa as AuiRadioGroup,
   Da as AuiRange,
-  Ea as AuiRoot,
-  Ga as AuiSegment,
-  Ba as AuiSegmentedControl,
-  Na as AuiSelect,
-  wa as AuiSidebar,
+  Ba as AuiRoot,
+  Ea as AuiSegment,
+  Ma as AuiSegmentedControl,
+  wa as AuiSelect,
+  ya as AuiSidebar,
   Ha as AuiSidebarContent,
   Oa as AuiSidebarFooter,
-  La as AuiSidebarHeader,
-  r as AuiSkeleton,
-  ja as AuiSparkline,
-  l as AuiSpinner,
-  qa as AuiStat,
-  c as AuiStep,
-  p as AuiStepper,
-  Ua as AuiSwitch,
-  _a as AuiTab,
-  za as AuiTabPanel,
-  Ya as AuiTable,
-  Ja as AuiTableBody,
-  Ka as AuiTableCell,
-  Qa as AuiTableHead,
-  Va as AuiTableHeader,
-  Wa as AuiTableRow,
-  Xa as AuiTabs,
-  Za as AuiTagGroup,
-  $a as AuiTextarea,
-  ai as AuiTimeField,
-  ii as AuiToast,
-  ei as AuiTooltip,
-  si as AuiTree,
-  ui as AuiTreeItem,
-  R as ROLE_DEFAULTS,
-  Ai as getIcon,
-  ri as registerIcon,
-  ni as registerIcons,
-  v as renderMarkdown,
-  F as sanitizeHtml
+  va as AuiSidebarHeader,
+  e as AuiSkeleton,
+  La as AuiSparkline,
+  t as AuiSpinner,
+  Na as AuiStat,
+  n as AuiStep,
+  r as AuiStepper,
+  ja as AuiSwitch,
+  Ua as AuiTab,
+  _a as AuiTabPanel,
+  qa as AuiTable,
+  za as AuiTableBody,
+  Ya as AuiTableCell,
+  Ja as AuiTableHead,
+  Ka as AuiTableHeader,
+  Qa as AuiTableRow,
+  Va as AuiTabs,
+  Wa as AuiTagGroup,
+  Xa as AuiTextarea,
+  Za as AuiTimeField,
+  $a as AuiToast,
+  ai as AuiTooltip,
+  ii as AuiTree,
+  si as AuiTreeItem,
+  P as ROLE_DEFAULTS,
+  ui as getIcon,
+  Ai as registerIcon,
+  ti as registerIcons,
+  k as renderMarkdown,
+  R as sanitizeHtml
 };
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../src/components/skeleton/skeleton.ts","../src/components/alert/alert.ts","../src/components/link/link.ts","../src/components/spinner/spinner.ts","../src/components/meter/meter.ts","../src/components/nav-item/nav-item.ts","../src/components/stepper/stepper.ts","../src/components/stepper/step.ts"],"sourcesContent":["import { AgentElement } from '#element'\n\nexport class AuiSkeleton extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiAlert extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiLink extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiSpinner extends AgentElement {}\n","import { AgentElement } from '#element'\nimport type { AttributeSchema } from '#element'\n\nexport class AuiMeter extends AgentElement {\n  static override attributes: AttributeSchema = {\n    value: { type: 'string', default: '0' },\n    min: { type: 'string', default: '0' },\n    max: { type: 'string', default: '100' },\n  }\n\n  declare value: string\n  declare min: string\n  declare max: string\n\n  protected override activate(): void {\n    this.addEffect(() => {\n      const min = Number(this.min) || 0\n      const max = Number(this.max) || 100\n      const val = Number(this.value) || 0\n      const pct = Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100))\n      this.style.setProperty('--aui-meter-pct', String(pct))\n    })\n  }\n}\n","import { AgentElement } from '#element'\n\nexport class AuiNavItem extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiStepper extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiStep extends AgentElement {}\n"],"names":["AuiSkeleton","AgentElement","AuiAlert","AuiLink","AuiSpinner","AuiMeter","min","max","val","pct","AuiNavItem","AuiStepper","AuiStep"],"mappings":";;;;AAEO,MAAMA,UAAoBC,EAAa;AAAC;ACAxC,MAAMC,UAAiBD,EAAa;AAAC;ACArC,MAAME,UAAgBF,EAAa;AAAC;ACApC,MAAMG,UAAmBH,EAAa;AAAC;ACCvC,MAAMI,UAAiBJ,EAAa;AAAA,EACzC,OAAgB,aAA8B;AAAA,IAC5C,OAAO,EAAE,MAAM,UAAU,SAAS,IAAA;AAAA,IAClC,KAAK,EAAE,MAAM,UAAU,SAAS,IAAA;AAAA,IAChC,KAAK,EAAE,MAAM,UAAU,SAAS,MAAA;AAAA,EAAM;AAAA,EAOrB,WAAiB;AAClC,SAAK,UAAU,MAAM;AACnB,YAAMK,IAAM,OAAO,KAAK,GAAG,KAAK,GAC1BC,IAAM,OAAO,KAAK,GAAG,KAAK,KAC1BC,IAAM,OAAO,KAAK,KAAK,KAAK,GAC5BC,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,MAAOD,IAAMF,MAAQC,IAAMD,KAAQ,GAAG,CAAC;AACxE,WAAK,MAAM,YAAY,mBAAmB,OAAOG,CAAG,CAAC;AAAA,IACvD,CAAC;AAAA,EACH;AACF;ACrBO,MAAMC,UAAmBT,EAAa;AAAC;ACAvC,MAAMU,UAAmBV,EAAa;AAAC;ACAvC,MAAMW,UAAgBX,EAAa;AAAC;"}
+{"version":3,"file":"components.js","sources":["../src/components/skeleton/skeleton.ts","../src/components/alert/alert.ts","../src/components/link/link.ts","../src/components/spinner/spinner.ts","../src/components/nav-item/nav-item.ts","../src/components/stepper/stepper.ts","../src/components/stepper/step.ts"],"sourcesContent":["import { AgentElement } from '#element'\n\nexport class AuiSkeleton extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiAlert extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiLink extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiSpinner extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiNavItem extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiStepper extends AgentElement {}\n","import { AgentElement } from '#element'\n\nexport class AuiStep extends AgentElement {}\n"],"names":["AuiSkeleton","AgentElement","AuiAlert","AuiLink","AuiSpinner","AuiNavItem","AuiStepper","AuiStep"],"mappings":";;;;AAEO,MAAMA,UAAoBC,EAAa;AAAC;ACAxC,MAAMC,UAAiBD,EAAa;AAAC;ACArC,MAAME,UAAgBF,EAAa;AAAC;ACApC,MAAMG,UAAmBH,EAAa;AAAC;ACAvC,MAAMI,UAAmBJ,EAAa;AAAC;ACAvC,MAAMK,UAAmBL,EAAa;AAAC;ACAvC,MAAMM,UAAgBN,EAAa;AAAC;"}

package/dist/docs/blocks/agent-chat.yaml

@@ -1,32 +1,42 @@
 name: agent-chat
 type: block
 summary: Full agent chat interface with message feed, composer, and suggestion chips.
-description: >
-  Complete chat composition showing a multi-turn conversation between
-  user and AI assistant. Uses aui-agent-panel as the outer shell to
-  coordinate header, feed, and input. Includes message feed with
-  auto-scroll, threaded messages with avatars, markdown rendering,
-  activity indicators, bordered prompt input with action toolbar,
-  and suggestion chips. Demonstrates all aui-agent-* components
-  working together as a cohesive chat experience.
-
-components: [aui-agent-panel, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge, aui-button, aui-icon, aui-agent-feed, aui-agent-thread, aui-agent-message, aui-agent-text, aui-agent-activity, aui-agent-seeds, aui-agent-input, aui-agent-prompt]
+description: |
+  Complete chat composition showing a multi-turn conversation between user and AI assistant. Uses aui-agent-panel as the outer shell to coordinate header, feed, and input. Includes message feed with auto-scroll, threaded messages with avatars, markdown rendering, activity indicators, bordered prompt input with action toolbar, and suggestion chips. Demonstrates all aui-agent-* components working together as a cohesive chat experience.
+components:
+  - aui-agent-panel
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-badge
+  - aui-button
+  - aui-icon
+  - aui-agent-feed
+  - aui-agent-thread
+  - aui-agent-message
+  - aui-agent-text
+  - aui-agent-activity
+  - aui-agent-seeds
+  - aui-agent-input
+  - aui-agent-prompt
 kind: panel
-
 examples:
-  - html: |
+  - description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips
+    html: |-
       <aui-agent-panel panel-title="Design Assistant" max-width="xl" style="height: 32rem;">
         <aui-header dividers>
-          <span slot="leading">
-            <aui-stack direction="row" gap="2" align-items="center">
-              <aui-avatar square>AI</aui-avatar>
-              <aui-stack gap="0">
-                <aui-heading size="sm">Design Assistant</aui-heading>
-                <aui-text muted size="xs">Claude 3.5 Sonnet</aui-text>
-              </aui-stack>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar square>AI</aui-avatar>
+            <aui-stack gap="0" spacer>
+              <aui-heading size="sm">Design Assistant</aui-heading>
+              <aui-text muted size="xs">Claude Sonnet 4</aui-text>
             </aui-stack>
-          </span>
-          <aui-badge accent slot="trailing">Online</aui-badge>
+            <aui-badge accent>Online</aui-badge>
+          </aui-stack>
         </aui-header>
         <aui-agent-feed auto-scroll scrollable>
           <aui-agent-thread role="user" sender="You">
@@ -68,9 +78,8 @@ examples:
         </aui-agent-input>
         <aui-agent-seeds options='[{"value":"tokens","label":"Generate token file"},{"value":"themes","label":"Add dark theme"},{"value":"chart","label":"Chart palette"}]'></aui-agent-seeds>
       </aui-agent-panel>
-    description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips.
-
-  - html: |
+  - description: Code review chat with structured markdown feedback
+    html: |-
       <aui-agent-panel panel-title="Code Review" max-width="xl" style="height: 28rem;">
         <aui-header dividers>
           <span slot="leading">
@@ -108,4 +117,3 @@ examples:
           </aui-agent-prompt>
         </aui-agent-input>
       </aui-agent-panel>
-    description: Code review chat with structured markdown feedback.

package/dist/docs/blocks/announcement-card.yaml

@@ -1,17 +1,22 @@
 name: announcement-card
 type: block
 summary: Announcement card with image area, description, and contextual footer actions.
-description: >
-  A card featuring a tall image or illustration area at top, followed by
-  a title, description, and footer with a primary action and a contextual
-  badge or label. Use for product announcements, deprecation notices, or
-  feature highlights.
-
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button]
+description: |
+  A card featuring a tall image or illustration area at top, followed by a title, description, and footer with a primary action and a contextual badge or label. Use for product announcements, deprecation notices, or feature highlights.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Announcement card with image area, description, and contextual footer actions.
+    html: |-
       <aui-container kind="card" bordered max-width="sm" style="overflow: hidden;">
         <div style="height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);"></div>
         <aui-content>
@@ -27,4 +32,3 @@ examples:
           <span slot="leading"><aui-button primary>Create Query</aui-button></span>
         </aui-footer>
       </aui-container>
-    description: Deprecation announcement with gradient image placeholder and warning badge.