@supersoniks/concorde 3.1.76 → 3.1.78

package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md

@@ -0,0 +1,130 @@
+# Input-autocomplete
+
+The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form [input](#core/components/ui/form/input/input.md/input) and as a [queue](#core/components/functional/queue/queue.md/queue).
+
+Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a [queue](#core/components/functional/queue/queue.md/queue) in order to take full advantage of the input-autocomplete component.
+
+Here are some of the features of the input-autocomplete component:
+
+* It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
+* It can be used with a variety of data providers, such as an API.
+* It is fully customizable, so you can change the look and feel of the component to match your needs.
+
+If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+
+
+
+## Simple Example
+
+In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+
+The template is used to render the list items of results.
+The list items are responsible for making a selection.
+
+This time, we added buttons with the same name as the input while keeping the same data provider.
+The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.
+
+
+<sonic-code>
+  <template>
+    <sonic-input-autocomplete 
+    class="w-64"
+    label="A french city name" 
+    formDataProvider="autoComplete-example-base" 
+    name="nom" 
+    placeholder="Paris, Lyon, Tours, ..." 
+    serviceurl="https://geo.api.gouv.fr" 
+    dataproviderexpression="communes?limit=5&boost=population"
+    >
+      <template>
+        <sonic-menu-item debug radio name="nom" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
+      </template>
+    </sonic-input-autocomplete>
+  </template>
+</sonic-code> 
+
+
+## Value different from search parameter
+
+In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.
+
+To do this, we need to use the `searchParam` attribute on the input element. This attribute specifies the name of the search parameter that will be used.
+
+We also need to use the `name` and `value` attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.
+
+By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.
+
+
+<sonic-code>
+  <template>
+    <sonic-input-autocomplete 
+    class="w-64"
+    label="A french city name" 
+    formDataProvider="autoComplete-example" 
+    name="siren" 
+    value="212703771" 
+    placeholder="Paris, Lyon, Tours, ..." 
+    serviceurl="https://geo.api.gouv.fr" 
+    dataproviderexpression="communes?limit=5&boost=population"
+    searchParameter="nom" 
+    >
+      <template>
+        <sonic-menu-item debug  radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
+      </template>
+    </sonic-input-autocomplete>
+  </template>
+</sonic-code> 
+
+
+## Select autocomplete / value different from search parameter
+
+This example is the same as the previous one, except that the `select` attribute is used. This attribute changes the look and feel of the component slightly.
+
+Now the text is less free because, you must select either something from the list given by the service, or nothing else.
+
+The following code shows how to use the `select` attribute in an autocomplete input:
+
+<sonic-code>
+  <template>
+    <sonic-input-autocomplete 
+    select
+    class="w-64"
+    label="A french city name" 
+    formDataProvider="autoComplete-example2" 
+    name="siren" 
+    value="212703771" 
+    placeholder="Paris, Lyon, Tours, ..." 
+    serviceurl="https://geo.api.gouv.fr" 
+    dataproviderexpression="communes?limit=5&boost=population"
+    searchParameter="nom" 
+    >
+      <template>
+        <sonic-menu-item debug radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
+      </template>
+    </sonic-input-autocomplete>
+  </template>
+</sonic-code> 
+
+## keyboard navigation
+
+At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems
+
+<sonic-code>
+  <template>
+    <sonic-input-autocomplete 
+    class="w-64"
+    label="A french city name" 
+    formDataProvider="autoComplete-example-keyboard" 
+    name="nom" 
+    data-keyboard-nav="nav-autocomplete" 
+    placeholder="Paris, Lyon, Tours, ..." 
+    serviceurl="https://geo.api.gouv.fr" 
+    dataproviderexpression="communes?limit=60&boost=population"
+    >
+    <template>
+        <sonic-menu-item debug radio name="nom" data-keyboard-nav="nav-autocomplete" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
+      </template>
+    </sonic-input-autocomplete>
+  </template>
+</sonic-code> 
+

package/docs/src/core/components/ui/form/radio/radio.md

@@ -0,0 +1,84 @@
+# Radio
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="radioSizeExemple">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
+      <sonic-radio name="size" value="default" >default radio</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-radio checked
+    >Already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-radio disabled
+    >Disabled radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-radio disabled checked
+    >Disabled but already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## radio with link
+<sonic-code>
+  <template>
+  <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+      <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
+        Remove following jokes :
+        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+      </sonic-subscriber>
+      <div formDataProvider="jokeFilterRadio"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+        <sonic-radio name="blacklistFlags"  value="nsfw">nsfw</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="religious">religious</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="political">political</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="racist" checked >racist</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="sexist"  >sexist</sonic-radio>
+        <sonic-radio name="blacklistFlags"   value="explicit">explicit</sonic-radio>
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10&lang=en"
+        dataFilterProvider="jokeFilterRadio"
+        serviceURL="https://v2.jokeapi.dev"
+        key="jokes"
+      >
+        <template>
+          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+            <sonic-value key="joke"></sonic-value>
+            <sonic-value key="setup" class="font-bold"></sonic-value><br>
+            <sonic-value key="delivery"></sonic-value>
+          </div>
+        </template>
+      </sonic-queue>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/form/select/select.md

@@ -0,0 +1,97 @@
+# Select
+
+## Options
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select> 
+        <option value="">No Selection</option>
+        <option value="1">One</option>
+        <option value="2" selected>Two (set by "tag")</option>
+        <option value="3">Three</option>
+      </sonic-select>
+      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
+              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
+              ]'> 
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select size="2xs"><option>2xs</option></sonic-select>
+      <sonic-select size="xs"><option>xs</option></sonic-select>
+      <sonic-select size="sm"><option>sm</option></sonic-select>
+      <sonic-select size="md"><option>md</option></sonic-select>
+      <sonic-select size="default"><option>default</option></sonic-select>
+      <sonic-select size="lg"><option>lg</option></sonic-select>
+      <sonic-select size="xl"><option>xl</option></sonic-select>
+      <sonic-select size="2xl"><option>2xl</option></sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Multiple
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select multiple> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Disabled
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select disabled> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use
+<sonic-code>
+  <template>
+    <sonic-select
+      formDataProvider="select-filter"
+      name="lang"
+      value="fr"
+    >
+    <option value="fr">fr<option>
+    <optionn value="en">en<option>
+    </sonic-select>
+    <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
+      Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
+    </sonic-subscriber>
+    <sonic-queue
+      lazyload
+      dataProviderExpression="joke/Any?amount=10"
+      dataFilterProvider="select-filter"
+      serviceURL="https://v2.jokeapi.dev"
+      key="jokes"
+    >
+      <template>
+        <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
+          <div data-bind ::inner-html="$joke"></div>
+          <div data-bind ::inner-html="$setup"></div>
+          <div data-bind ::inner-html="$delivery"></div>
+        </div>
+      </template>
+    </sonic-queue>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/form/switch/switch.md

@@ -0,0 +1,84 @@
+# Switch
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="switchSizeExemple">
+      <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
+      <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
+      <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
+      <sonic-switch name="size" value="default" >default switch</sonic-switch>
+      <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
+      <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
+      <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-switch checked
+    >Already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-switch disabled
+    >Disabled switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-switch disabled checked
+    >Disabled but already checked switch
+  </sonic-switch>
+  </template>
+</sonic-code>
+
+## switch with link
+<sonic-code>
+  <template>
+  <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+      <sonic-subscriber dataProvider="jokeFilterswitch" class="text-xl my-4 block font-bold">
+        Remove following jokes :
+        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+      </sonic-subscriber>
+      <div formDataProvider="jokeFilterswitch"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+        <sonic-switch name="blacklistFlags"  value="nsfw">nsfw</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="religious">religious</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="political">political</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="racist" checked >racist</sonic-switch>
+        <sonic-switch name="blacklistFlags"  value="sexist"  >sexist</sonic-switch>
+        <sonic-switch name="blacklistFlags"   value="explicit">explicit</sonic-switch>
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10&lang=en"
+        dataFilterProvider="jokeFilterswitch"
+        serviceURL="https://v2.jokeapi.dev"
+        key="jokes"
+      >
+        <template>
+          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+            <sonic-value key="joke"></sonic-value>
+            <sonic-value key="setup" class="font-bold"></sonic-value><br>
+            <sonic-value key="delivery"></sonic-value>
+          </div>
+        </template>
+      </sonic-queue>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/form/textarea/textarea.md

@@ -0,0 +1,65 @@
+# Textarea
+
+<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
+  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
+  Native attibutes list
+</sonic-button>
+
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-textarea label="Label"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-textarea placeholder="placeholder"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-textarea value="value"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Rows
+<sonic-code>
+  <template>
+  <sonic-textarea rows="8"></sonic-textarea>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-textarea  description="Description goes here" ></sonic-textarea>
+  </template>
+</sonic-code>
+
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+    <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
+    <sonic-textarea size="xs" value="xs"></sonic-textarea>
+    <sonic-textarea size="sm" value="sm"></sonic-textarea>
+    <sonic-textarea value="md / default"></sonic-textarea>
+    <sonic-textarea size="lg" value="lg"></sonic-textarea>
+    <sonic-textarea size="xl" value="xl"></sonic-textarea>
+    <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
+  </div>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/group/group.md

@@ -0,0 +1,75 @@
+# Group
+
+## Radio group
+<sonic-code>
+  <template>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
+      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Button group
+<sonic-code>
+  <template>
+    <sonic-group>
+      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
+      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
+      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Input actions prefix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input  ></sonic-input>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input ></sonic-input>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>
+
+## Input actions suffix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-input  ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-input ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/icon/icon.md

@@ -0,0 +1,125 @@
+# Icon
+
+
+## Custom
+
+<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
+
+<sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular">
+  <template>
+    <sonic-scope  customIconLibraryPath="/svg/$prefix/$name.svg"
+      customIconDefaultPrefix="regular">
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">regular</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">solid</div>
+        </div>
+        <div class="text-center">
+          <sonic-icon library="custom"  name="plane"></sonic-icon>
+          <br>
+          <div class="text-xs mt-1">default prefix</div>
+        </div>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+
+## External
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
+      <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">heroicons</div>
+      </sonic-link>
+      <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
+        <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">iconoir</div>
+      </sonic-link>
+      <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
+        <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">material design</div>
+      </sonic-link>
+      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
+        <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">fontAwesome regular</div>
+      </sonic-link>
+      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
+        <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">fontAwesome solid</div>
+      </sonic-link>
+      <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
+        <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">feathers</div>
+      </sonic-link>
+      <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
+        <sonic-icon library="lucide" name="album"  size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">lucide</div>
+      </sonic-link>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">2xs</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">xs</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">sm</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">default</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">lg</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">xl</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">2xl</div>
+      </div>
+      <div class="text-center">
+        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
+        <br>
+        <div class="text-xs mt-1">3xl</div>
+      </div>
+    </div>
+  </template>
+</sonic-code>
+