@supersoniks/concorde 5.0.4 → 5.0.5

package/docs/crawl/core/components/ui/alert/alert.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Alert — Concorde</title>
-  <meta name="description" content="This address is already in use. Lorem ipsum dolor sit amet.">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component">
+  <meta name="description" content="Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live">
   <meta name="concorde-doc-id" content="core/components/ui/alert/alert">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">
 </head>
@@ -15,94 +15,195 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. This address is already in use. Lorem ipsum dolor sit amet. <span>Doc ID: <code>core/components/ui/alert/alert</code>. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa <span>Doc ID: <code>core/components/ui/alert/alert</code>. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html</a>.</span></p>
       <h1 id="alert">Alert</h1>
+<p>Alerts <strong>surface important feedback</strong> inline—errors, confirmations, or contextual help. Use <strong><code>label</code></strong> / <strong><code>text</code></strong> for simple copy, or the <strong>default slot</strong> for rich content (links, buttons). Set <strong><code>announce</code></strong> when the message appears after an action so screen readers pick it up.</p>
+<h2 id="basic-example">Basic example</h2>
 <pre><code>&lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; text=&quot;This address is already in use&quot; background&gt;&lt;/sonic-alert&gt;
 </code></pre>
 <h2 id="status">Status</h2>
+<p>Color and icon follow <code>status</code>. With no <code>status</code>, behavior is <code>default</code>.</p>
 <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
-  &lt;sonic-alert label=&quot;Default&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;success&quot; label=&quot;Success&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Error&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;warning&quot; label=&quot;Warning&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;info&quot; label=&quot;Info&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
-  &lt;/div&gt;
+      &lt;sonic-alert label=&quot;Default&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;success&quot; label=&quot;Success&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Error&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;warning&quot; label=&quot;Warning&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;info&quot; label=&quot;Info&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="accessibility-announce">Accessibility (<code>announce</code>)</h2>
+<p>By default, an alert already in the DOM is <strong>not</strong> announced (no <code>role</code> / <code>aria-live</code>). Set <strong><code>announce</code></strong> when the message appears <strong>after</strong> user action (API response, validation, etc.): screen readers get <code>role=&quot;alert&quot;</code> for <code>error</code>, otherwise <code>role=&quot;status&quot;</code> and <code>aria-live=&quot;polite&quot;</code>.</p>
+<p><code>sonic-alert-messages</code> sets <code>announce</code> on every rendered alert.</p>
+<pre><code>&lt;sonic-alert announce status=&quot;success&quot; label=&quot;Saved&quot; text=&quot;Your changes were saved.&quot;&gt;&lt;/sonic-alert&gt;
+</code></pre>
+<h2 id="content-and-icon">Content and icon</h2>
+<p><code>label</code> and <code>text</code> accept plain text only. The default slot is rendered after <code>text</code>. Use the <strong><code>icon</code></strong> slot to replace the default <code>sonic-icon</code>. <strong><code>noIcon</code></strong> hides the icon.</p>
+<pre><code>&lt;sonic-alert status=&quot;info&quot; noIcon label=&quot;No icon&quot; text=&quot;Informational message.&quot;&gt;&lt;/sonic-alert&gt;
+</code></pre>
+<h2 id="custom-icon-slot">Custom icon slot</h2>
+<p>Project any markup into <strong><code>slot=&quot;icon&quot;</code></strong> (emoji, image, custom component). Keep it decorative with <code>aria-hidden=&quot;true&quot;</code> when the message text already conveys meaning.</p>
+<pre><code>&lt;sonic-alert status=&quot;success&quot; label=&quot;Achievement unlocked&quot; background&gt;
+      &lt;span slot=&quot;icon&quot; aria-hidden=&quot;true&quot; class=&quot;text-lg leading-none&quot;&gt;🎉&lt;/span&gt;
+      You unlocked a new badge.
+    &lt;/sonic-alert&gt;
 </code></pre>
 <h2 id="sizes">Sizes</h2>
 <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xs&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xs&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;sm&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;lg&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xl&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xl&quot;&gt;
-    This address is already in use. Lorem ipsum dolor sit amet.
-  &lt;/sonic-alert&gt;
-  &lt;/div&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xs&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xs&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;sm&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;lg&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xl&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xl&quot;&gt;
+        This address is already in use. Lorem ipsum dolor sit amet.
+      &lt;/sonic-alert&gt;
+    &lt;/div&gt;
 </code></pre>
 <h2 id="alert-with-link">Alert with link</h2>
+<p>Rich content in the slot (buttons, links).</p>
 <pre><code>&lt;sonic-alert status=&quot;info&quot; label=&quot;New messages !&quot;&gt;
-    You have 2 unread messages&lt;br /&gt;
-    &lt;div class=&quot;flex gap-2 mt-1&quot;&gt;
-      &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;See messages&lt;/sonic-button&gt;
-      &lt;sonic-button variant=&quot;ghost&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;dismiss&lt;/sonic-button&gt;
-    &lt;/div&gt;
-  &lt;/sonic-alert&gt;
+      You have 2 unread messages&lt;br /&gt;
+      &lt;div class=&quot;flex gap-2 mt-1&quot;&gt;
+        &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;See messages&lt;/sonic-button&gt;
+        &lt;sonic-button variant=&quot;ghost&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;Dismiss&lt;/sonic-button&gt;
+      &lt;/div&gt;
+    &lt;/sonic-alert&gt;
 </code></pre>
 <h2 id="background">Background</h2>
+<p>Tinted background from the <code>status</code> color (<code>color-mix</code> on <code>currentColor</code>).</p>
 <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
-  &lt;sonic-alert background label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;success&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;warning&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;info&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;/div&gt;
+      &lt;sonic-alert background label=&quot;Lorem ipsum dolor&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;success&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
+        This address is already in use.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;error&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
+        This address is already in use.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;warning&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
+        This address is already in use.
+      &lt;/sonic-alert&gt;
+      &lt;sonic-alert status=&quot;info&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
+        This address is already in use.
+      &lt;/sonic-alert&gt;
+    &lt;/div&gt;
 </code></pre>
 <h2 id="dismissible">Dismissible</h2>
-<pre><code>&lt;sonic-alert class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;success&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;error&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;warning&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
-  &lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
+<p><code>dismissible</code> removes the alert from the DOM when the close control is clicked (i18n aria label). <strong><code>dismissible</code></strong> and <strong><code>background</code></strong> are independent: without <code>background</code>, close sits at the end of the row; with <code>background</code>, top-right.</p>
+<pre><code>&lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible label=&quot;This address is already in use.&quot;&gt;
+    &lt;/sonic-alert&gt;
+    &lt;sonic-alert class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
+    &lt;sonic-alert status=&quot;success&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
+    &lt;sonic-alert status=&quot;error&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
+    &lt;sonic-alert status=&quot;warning&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
+    &lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
 </code></pre>
 <h2 id="dismiss-forever">Dismiss forever</h2>
-<pre><code>&lt;sonic-alert class=&quot;mb-3&quot; dismissible dismissForever label=&quot;Lorem ipsum dolor&quot; id=&quot;addressUniqueId&quot;&gt;
-    This address is already in use.
-  &lt;/sonic-alert&gt;
+<p>With <strong><code>dismissForever</code></strong>, dismissal is stored in <code>localStorage</code> (key <code>sonic-alert-dismissed</code>). A stable <strong><code>id</code></strong> on the element is <strong>required</strong>; without <code>id</code>, a warning is logged and nothing is persisted.</p>
+<pre><code>&lt;sonic-alert
+      class=&quot;mb-3&quot;
+      dismissible
+      background
+      dismissForever
+      label=&quot;Lorem ipsum dolor&quot;
+      id=&quot;addressUniqueId&quot;
+    &gt;
+      This address is already in use.
+    &lt;/sonic-alert&gt;
 </code></pre>
+<h2 id="api-reference">API reference</h2>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>status</code></td>
+<td><code>default</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>error</code></td>
+<td>Color and default icon</td>
+</tr>
+<tr>
+<td><code>label</code></td>
+<td>string</td>
+<td>Title (plain text)</td>
+</tr>
+<tr>
+<td><code>text</code></td>
+<td>string</td>
+<td>Short body (plain text), rendered before the slot</td>
+</tr>
+<tr>
+<td><code>size</code></td>
+<td><code>2xs</code> … <code>2xl</code></td>
+<td>Corner radius and typography</td>
+</tr>
+<tr>
+<td><code>background</code></td>
+<td>boolean</td>
+<td>Tinted background (<code>color-mix</code> on status color)</td>
+</tr>
+<tr>
+<td><code>dismissible</code></td>
+<td>boolean</td>
+<td>Close control; removes the element from the DOM</td>
+</tr>
+<tr>
+<td><code>dismissForever</code></td>
+<td>boolean</td>
+<td>Persists dismissal in <code>localStorage</code>; requires <strong><code>id</code></strong></td>
+</tr>
+<tr>
+<td><code>noIcon</code></td>
+<td>boolean</td>
+<td>Hides the icon (including custom <code>icon</code> slot content)</td>
+</tr>
+<tr>
+<td><code>announce</code></td>
+<td>boolean</td>
+<td><code>role=&quot;alert&quot;</code> / <code>aria-live</code> for dynamically injected content</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Message body (HTML, actions); rendered after <code>text</code></td>
+</tr>
+<tr>
+<td><code>icon</code></td>
+<td>Replaces the default <code>sonic-icon</code></td>
+</tr>
+</tbody></table>
 
     </article>
   </main>

package/docs/crawl/core/components/ui/alert-messages/alert-messages.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Concorde — Concorde</title>
-  <meta name="description" content="Concorde documentation: Concorde">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, UI component, sonic-alert-messages, web component">
+  <title>Alert messages — Concorde</title>
+  <meta name="description" content="sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type">
   <meta name="concorde-doc-id" content="core/components/ui/alert-messages/alert-messages">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">
 </head>
@@ -15,8 +15,116 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Concorde</strong>. Concorde documentation: Concorde <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, UI component, sonic-alert-messages, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
-      
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert messages</strong>. sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
+      <h1 id="alert-messages">Alert messages</h1>
+<p><strong><code>sonic-alert-messages</code></strong> renders a vertical stack of <strong><code>sonic-alert</code></strong> items from a <strong><code>messages</code></strong> array on a linked <strong>data provider</strong> (typical pattern: <strong><code>submitResultDataProvider</code></strong> after a form submit). Only entries with <strong><code>type=&quot;public&quot;</code></strong> are shown. Each alert gets <strong><code>announce</code></strong> so screen readers pick up feedback after the request.</p>
+<h2 id="with-submit-result">With submit result</h2>
+<p>Bind <strong><code>dataProvider</code></strong> to the same publisher as <strong><code>submitResultDataProvider</code></strong>. API <strong><code>messages</code></strong> entries need <strong><code>type</code></strong>: <strong><code>public</code></strong>, plus <strong><code>content</code></strong> and optional <strong><code>status</code></strong> (<code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code>).</p>
+<pre><code>&lt;sonic-scope
+      serviceURL=&quot;/docs-mock-api&quot;
+      formDataProvider=&quot;submit-example&quot;
+      submitResultDataProvider=&quot;submit-example-result&quot;
+    &gt;
+      &lt;sonic-alert-messages dataProvider=&quot;submit-example-result&quot; background class=&quot;mb-4&quot;&gt;&lt;/sonic-alert-messages&gt;
+      &lt;div class=&quot;grid gap-4 max-w-md&quot;&gt;
+        &lt;sonic-input name=&quot;email&quot; type=&quot;email&quot; label=&quot;Email&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-input name=&quot;password&quot; type=&quot;password&quot; label=&quot;Password&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
+        &lt;sonic-submit endPoint=&quot;api/register&quot; onClick&gt;
+          &lt;sonic-button type=&quot;primary&quot;&gt;Submit (empty fields → error messages)&lt;/sonic-button&gt;
+        &lt;/sonic-submit&gt;
+      &lt;/div&gt;
+    &lt;/sonic-scope&gt;
+</code></pre>
+<h2 id="shared-alert-props">Shared alert props</h2>
+<p><strong><code>size</code></strong> · <strong><code>background</code></strong> and <strong><code>noIcon</code></strong> apply to every rendered <strong><code>sonic-alert</code></strong> in the list.</p>
+<pre><code>&lt;sonic-button
+      size=&quot;sm&quot;
+      variant=&quot;outline&quot;
+      class=&quot;mb-3&quot;
+      onclick=&quot;SonicPublisherManager.get(&#39;submit-example-result&#39;).set({ messages: [{ type: &#39;public&#39;, content: &#39;Compact inline feedback without icons.&#39;, status: &#39;info&#39; }] })&quot;
+    &gt;
+      Load sample messages
+    &lt;/sonic-button&gt;
+    &lt;sonic-alert-messages
+      dataProvider=&quot;submit-example-result&quot;
+      size=&quot;sm&quot;
+      background
+      noIcon
+    &gt;&lt;/sonic-alert-messages&gt;
+</code></pre>
+<h2 id="message-shape">Message shape</h2>
+<p>Example JSON on the result publisher (or API response merged into it):</p>
+<pre><code class="language-typescript">{
+  &quot;messages&quot;: [
+    {
+      &quot;type&quot;: &quot;public&quot;,
+      &quot;content&quot;: &quot;The product has been added to your cart&quot;,
+      &quot;status&quot;: &quot;success&quot;
+    }
+  ]
+}
+</code></pre>
+<h2 id="api-reference">API reference</h2>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>dataProvider</code></td>
+<td>publisher id</td>
+<td>Source object; <strong><code>messages</code></strong> array is auto-filled via <strong>Subscriber</strong></td>
+</tr>
+<tr>
+<td><code>size</code></td>
+<td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
+<td>Passed to each <strong><code>sonic-alert</code></strong></td>
+</tr>
+<tr>
+<td><code>background</code></td>
+<td>boolean</td>
+<td>Tinted background on each alert</td>
+</tr>
+<tr>
+<td><code>noIcon</code></td>
+<td>boolean</td>
+<td>Hides icons on each alert</td>
+</tr>
+<tr>
+<td><code>messages</code></td>
+<td><code>Message[]</code></td>
+<td>Usually set by the publisher; each item uses <strong><code>content</code></strong> as alert <strong><code>text</code></strong></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Message field</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>type</code></td>
+<td><code>public</code></td>
+<td>Required for the message to render</td>
+</tr>
+<tr>
+<td><code>content</code></td>
+<td>string</td>
+<td>Alert body (<strong><code>text</code></strong> on <strong><code>sonic-alert</code></strong>)</td>
+</tr>
+<tr>
+<td><code>status</code></td>
+<td><code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code></td>
+<td>Alert <strong><code>status</code></strong>; defaults to <strong><code>default</code></strong> when omitted</td>
+</tr>
+</tbody></table>
+<p>No slots — alerts are generated from <strong><code>messages</code></strong>.</p>
+
     </article>
   </main>
 </body>