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

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-BF_R_HJk.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/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-BF_R_HJk.js";
 const b = x("aui-editor");
 class S extends p {
   static attributes = {

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-BF_R_HJk.js";
 const w = "http://www.w3.org/2000/svg";
 class N extends E {
   static attributes = {

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,127 @@
-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-BF_R_HJk.js";
+import { a as p, b as m, d as g, e as c, 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-BF_R_HJk.js";
+import { A as f, a as h, b as D, c as G, 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 Aa, H as ua, 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 ga, R as ca, 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 fa, a1 as ha, a2 as Da, a3 as Ga, 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 } from "./chunks/meter-Dju8ik6C.js";
+import { g as si, a as ei, r as Ai } from "./chunks/registry-BNb5ABBs.js";
+class e extends a {
 }
-class o extends a {
+class A extends a {
 }
-class l extends a {
+class u 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,
-  ka as AuiPane,
-  ya as AuiPanes,
-  Ra as AuiProgress,
-  va as AuiProgressCircle,
+  p as ACTION_REGISTRY,
+  f as AuiAccordion,
+  h as AuiAccordionItem,
+  m as AuiAgentActivity,
+  g as AuiAgentFeed,
+  c as AuiAgentInput,
+  C as AuiAgentMessage,
+  T as AuiAgentPanel,
+  S as AuiAgentPrompt,
+  b as AuiAgentSeeds,
+  x as AuiAgentText,
+  I as AuiAgentThread,
+  A as AuiAlert,
+  D as AuiAppShell,
+  G 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 AuiChip,
+  L as AuiCodeBlock,
+  N as AuiColorArea,
+  j as AuiColorField,
+  U as AuiColorPicker,
+  _ as AuiColorSlider,
+  q as AuiCommand,
+  z as AuiCommandEmpty,
+  Y as AuiCommandGroup,
+  J as AuiCommandInput,
+  K as AuiCommandItem,
+  Q as AuiCommandList,
+  V as AuiContainer,
+  W as AuiContextMenu,
+  X as AuiCopyButton,
+  Z as AuiDateField,
+  $ as AuiDialog,
+  aa as AuiDisclosure,
+  ia as AuiDisclosureGroup,
+  sa as AuiDrawer,
+  ea as AuiDropdownMenu,
+  Aa as AuiEmptyState,
+  ua as AuiFeed,
+  ta as AuiFileUpload,
+  oa as AuiGripper,
+  ra as AuiHoverCard,
+  na as AuiIcon,
+  da as AuiImage,
+  la as AuiInput,
+  pa as AuiInputOtp,
+  u as AuiLink,
+  ma as AuiMeter,
+  o as AuiNavItem,
+  ga as AuiNotificationCenter,
+  ca as AuiOptgroup,
+  Ca as AuiOption,
+  Ta as AuiPage,
+  Sa as AuiPageContext,
+  ba as AuiPageMain,
+  xa as AuiPagination,
+  Ia as AuiPane,
+  Pa as AuiPanes,
+  ka as AuiProgress,
+  Ra as AuiProgressCircle,
   Fa as AuiRadio,
-  Ma as AuiRadioGroup,
-  Da as AuiRange,
-  Ea as AuiRoot,
+  fa as AuiRadioGroup,
+  ha as AuiRange,
+  Da as AuiRoot,
   Ga as AuiSegment,
   Ba as AuiSegmentedControl,
-  Na as AuiSelect,
-  wa 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
+  Ea as AuiSelect,
+  Ma as AuiSidebar,
+  wa as AuiSidebarContent,
+  ya as AuiSidebarFooter,
+  Ha as AuiSidebarHeader,
+  e as AuiSkeleton,
+  Oa as AuiSparkline,
+  t as AuiSpinner,
+  va as AuiStat,
+  n as AuiStep,
+  r as AuiStepper,
+  La as AuiSwitch,
+  Na as AuiTab,
+  ja as AuiTabPanel,
+  Ua as AuiTable,
+  _a as AuiTableBody,
+  qa as AuiTableCell,
+  za as AuiTableHead,
+  Ya as AuiTableHeader,
+  Ja as AuiTableRow,
+  Ka as AuiTabs,
+  Qa as AuiTagGroup,
+  Va as AuiTextarea,
+  Wa as AuiTimeField,
+  Xa as AuiToast,
+  Za as AuiTooltip,
+  $a as AuiTree,
+  ai as AuiTreeItem,
+  P as ROLE_DEFAULTS,
+  si as getIcon,
+  ei as registerIcon,
+  Ai 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/login-two-column.yaml

@@ -9,7 +9,7 @@ description: >
   marketing-oriented sign-in pages where you want to reinforce brand
   identity alongside the auth flow.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-divider]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-button-group, aui-divider]
 kind: panel
 
 examples:
@@ -48,11 +48,11 @@ examples:
                   </aui-stack>
 
                   <!-- Social row -->
-                  <aui-stack direction="row" gap="2">
-                    <aui-button scrim grow="1">Apple</aui-button>
-                    <aui-button scrim grow="1">Google</aui-button>
-                    <aui-button scrim grow="1">Meta</aui-button>
-                  </aui-stack>
+                  <aui-button-group>
+                    <aui-button scrim grow="1" basis="0">Apple</aui-button>
+                    <aui-button scrim grow="1" basis="0">Google</aui-button>
+                    <aui-button scrim grow="1" basis="0">Meta</aui-button>
+                  </aui-button-group>
 
                   <!-- Terms -->
                   <aui-text muted size="xs" align-items="center" text="center">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>

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

@@ -8,7 +8,7 @@ description: >
   team directories, account pages, or social-style dashboards where you
   need to present identity alongside engagement metrics.
 
-components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-stat, aui-avatar, aui-button]
+components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-stat, aui-avatar, aui-button, aui-button-group]
 kind: card
 
 examples:
@@ -28,10 +28,10 @@ examples:
                 <aui-stat label="Followers" value="1.2k"></aui-stat>
                 <aui-stat label="Following" value="340"></aui-stat>
               </aui-stack>
-              <aui-stack direction="row" gap="2">
-                <aui-button scrim spacer>Edit profile</aui-button>
-                <aui-button primary accent spacer>Message</aui-button>
-              </aui-stack>
+              <aui-button-group>
+                <aui-button scrim grow="1" basis="0">Edit profile</aui-button>
+                <aui-button primary accent grow="1" basis="0">Message</aui-button>
+              </aui-button-group>
             </aui-stack>
           </aui-inset>
         </aui-content>

package/dist/docs/components/accordion-item.yaml

@@ -2,40 +2,34 @@ name: aui-accordion-item
 tag: aui-accordion-item
 type: component
 summary: Collapsible section with trigger and content panel.
-description: >
-  Uses native details/summary for baseline accessibility. Chevron
-  indicator rotates on open. Can be used standalone or inside
-  aui-accordion for coordinated single-open behavior.
-
+description: |
+  Uses native details/summary for baseline accessibility. Chevron indicator rotates on open. Can be used standalone or inside aui-accordion for coordinated single-open behavior.
 base: AgentElement
-
 attributes:
   open:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the content is expanded.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents toggling.
-
 a11y:
   role: Uses native details/summary semantics.
   keyboard:
     Enter: Toggle open/closed.
     Space: Toggle open/closed.
-
 events:
   toggle:
     description: Fired when open state changes. detail.open is the new state.
-
 composition:
-  parents: [aui-accordion, any]
-  children: [any]
-
+  parents:
+    - aui-accordion
+    - any
+  children:
+    - any
 tokens:
   - name: --aui-accordion-item-border-color
     default: var(--aui-border-muted)
@@ -76,18 +70,16 @@ tokens:
   - name: --aui-accordion-item-color-disabled
     default: var(--aui-ink-disabled, var(--aui-ink-muted))
     description: Header text color when disabled.
-
 examples:
-  - html: |
+  - description: Single collapsible section
+    html: |-
       <aui-accordion-item>
         <span data-trigger>Section Title</span>
-        <p>Collapsible content here.</p>
+        <aui-text>Collapsible content here.</aui-text>
       </aui-accordion-item>
-    description: Single collapsible section.
-
-  - html: |
+  - description: Pre-opened section
+    html: |-
       <aui-accordion-item open>
         <span data-trigger>Initially Open</span>
-        <p>This section starts expanded.</p>
+        <aui-text>This section starts expanded.</aui-text>
       </aui-accordion-item>
-    description: Pre-opened section.