@supersoniks/concorde 5.0.5 → 5.1.0

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Icon — Concorde</title>
-  <meta name="description" content="sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json">
+  <meta name="description" content="customIconDefaultPrefix=&quot;regular&quot;&gt;">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component">
   <meta name="concorde-doc-id" content="core/components/ui/icon/icon">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">
 </head>
@@ -15,206 +15,117 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. customIconDefaultPrefix=&quot;regular&quot;&gt; <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
       <h1 id="icon">Icon</h1>
-<p><strong><code>sonic-icon</code></strong> renders inline SVG icons from the <strong>bundled core set</strong> or from <strong>CDN libraries</strong>. Set <strong><code>name</code></strong> (and <strong><code>library</code></strong> / <strong><code>prefix</code></strong> when needed); scale with <strong><code>size</code></strong>. Icons inherit <strong><code>currentColor</code></strong> and are <strong><code>aria-hidden</code></strong> by default—keep visible text nearby or label the control that contains them.</p>
-<h2 id="core-library">Core library</h2>
-<p>Omit <strong><code>library</code></strong> to use the bundled set in <code>icons.json</code>. Available <strong><code>name</code></strong> values: <code>cancel</code> · <code>check</code> · <code>check-circled-outline</code> · <code>emoji-puzzled</code> · <code>info-empty</code> · <code>loader</code> · <code>minus-small</code> · <code>more-horiz</code> · <code>more-vert</code> · <code>nav-arrow-down</code> · <code>warning-circled-outline</code>.</p>
-<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;cancel&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;cancel&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;check&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;check&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;check-circled-outline&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;check-circled-outline&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;emoji-puzzled&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;emoji-puzzled&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;info-empty&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;info-empty&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;loader&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;loader&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;minus-small&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;minus-small&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;more-horiz&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;more-horiz&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;more-vert&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;more-vert&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;nav-arrow-down&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;nav-arrow-down&lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class=&quot;text-center&quot;&gt;
-        &lt;sonic-icon name=&quot;warning-circled-outline&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;div class=&quot;text-xs mt-1&quot;&gt;warning-circled-outline&lt;/div&gt;
+<h2 id="custom">Custom</h2>
+<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
+
+
+
+<pre><code>&lt;sonic-scope  customIconLibraryPath=&quot;/svg/$prefix/$name.svg&quot;
+      customIconDefaultPrefix=&quot;regular&quot;&gt;
+      &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8&quot;&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;regular&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;regular&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;solid&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;solid&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot;  name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;default prefix&lt;/div&gt;
+        &lt;/div&gt;
       &lt;/div&gt;
-    &lt;/div&gt;
+    &lt;/sonic-scope&gt;
 </code></pre>
-<h2 id="external-libraries">External libraries</h2>
-<p>Set <strong><code>library</code></strong> to load SVGs from a built-in CDN template. <strong><code>prefix</code></strong> falls back to each library’s default when omitted (<code>outline</code> for <strong><code>heroicons</code></strong>, <strong><code>regular</code></strong> for <strong><code>fontAwesome</code></strong> and <strong><code>material</code></strong>, and so on).</p>
+<h2 id="external">External</h2>
 <pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
       &lt;sonic-link href=&quot;https://heroicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;heroicons&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://iconoir.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;2x2-cell&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;2x2-cell&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;iconoir&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://materialdesignicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;material&quot; prefix=&quot;outline&quot; name=&quot;email&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;material design&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=regular&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;regular&quot; name=&quot;user&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome regular&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=solid&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;solid&quot; name=&quot;book&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome solid&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://feathericons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;feathers&quot; name=&quot;activity&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;sonic-icon library=&quot;feathers&quot; name=&quot;activity&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;feathers&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://lucide.dev/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;lucide&quot; name=&quot;album&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;sonic-icon library=&quot;lucide&quot; name=&quot;album&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;lucide&lt;/div&gt;
       &lt;/sonic-link&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="custom-library">Custom library</h2>
-<p>Use <strong><code>library=&quot;custom&quot;</code></strong> with SVG files on your origin. On an ancestor (for example <strong><code>sonic-scope</code></strong> or <strong><code>sonic-code</code></strong>), set <strong><code>customIconLibraryPath</code></strong> to a URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong> placeholders, and optionally <strong><code>customIconDefaultPrefix</code></strong> when <strong><code>prefix</code></strong> is omitted.</p>
-<pre><code>&lt;sonic-scope
-      customIconLibraryPath=&quot;/svg/$prefix/$name.svg&quot;
-      customIconDefaultPrefix=&quot;regular&quot;
-    &gt;
-      &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;regular&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br /&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;regular&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;solid&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br /&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;solid&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br /&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;default prefix&lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/sonic-scope&gt;
-</code></pre>
 <h2 id="size">Size</h2>
-<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height). Larger steps use <strong><code>3xl</code></strong>.</p>
-<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
+<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8&quot;&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;2xs&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xs&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;xs&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;sm&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;sm&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;default&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;lg&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;xl&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;2xl&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;3xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br /&gt;
+        &lt;br&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;3xl&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="accessibility">Accessibility</h2>
-<p>On connect, the host sets <strong><code>aria-hidden=&quot;true&quot;</code></strong>. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on <strong><code>sonic-icon</code></strong> alone for meaning—use visible text or <strong><code>aria-label</code></strong> on the parent button / link.</p>
-<pre><code>&lt;sonic-button type=&quot;neutral&quot; variant=&quot;outline&quot; shape=&quot;circle&quot; aria-label=&quot;User profile&quot;&gt;
-      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
-    &lt;/sonic-button&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>name</code></td>
-<td>string</td>
-<td>Icon id in the core bundle or in the remote library</td>
-</tr>
-<tr>
-<td><code>library</code></td>
-<td><code>heroicons</code> · <code>iconoir</code> · <code>feathers</code> · <code>lucide</code> · <code>material</code> · <code>fontAwesome</code> · <code>custom</code></td>
-<td>CDN or custom template; omit for bundled core icons</td>
-</tr>
-<tr>
-<td><code>prefix</code></td>
-<td>string</td>
-<td>Library-specific variant; defaults per library when empty</td>
-</tr>
-<tr>
-<td><code>size</code></td>
-<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>md</code>)</td>
-<td><code>em</code>-based SVG scale on the host</td>
-</tr>
-</tbody></table>
-<p>Ancestor attributes (for <strong><code>library=&quot;custom&quot;</code></strong> only): <strong><code>customIconLibraryPath</code></strong> (URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong>) and <strong><code>customIconDefaultPrefix</code></strong>. May be set on <strong><code>sonic-scope</code></strong>, theme roots, or globally in the document.</p>
-<p>No slots — the component inlines fetched or bundled SVG markup.</p>
 
     </article>
   </main>