@supersoniks/concorde 3.2.1 → 3.2.2

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

@@ -1,43 +0,0 @@
-# Link
-
-## Href
-<sonic-code>
-  <template>
-    <sonic-link href="/">Basic link with href attibute</sonic-link>
-  </template>
-</sonic-code>
-
-## Target
-<sonic-code>
-  <template>
-    <sonic-link href="/" target="_blank">Link with target attibute</sonic-link>
-  </template>
-</sonic-code>
-
-## AutoActive
-
-<sonic-code>
-  <template>
-    <sonic-link href="/#core/components"  class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
-  </template>
-</sonic-code>
-
-### AutoActive Strict vs partial
-
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
-      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
-    </div>
-  </template>
-</sonic-code>
-
-### AutoActive disabled
-
-<sonic-code>
-  <template>
-      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
-  </template>
-</sonic-code>
-

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

@@ -1,67 +0,0 @@
-# Loader 
-
-## Inline mode
-
-<sonic-code>
-  <template>
-    <sonic-loader mode="inline"></sonic-loader>
-  </template>
-</sonic-code>
-
-## CurrentColor 
-
-<sonic-code>
-  <template>
-    <sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
-  </template>
-</sonic-code>
-
-
-## Align
-
-<sonic-code>
-  <template>
-    <sonic-loader mode="inline" align="left"></sonic-loader>
-    <sonic-loader mode="inline" align="center"></sonic-loader>
-    <sonic-loader mode="inline" align="right"></sonic-loader>
-  </template>
-</sonic-code>
-
-## Fixed mode
-
-<sonic-code >
-  <template>
-    <div dataProvider="toggleLoaderForm" formDataProvider="toggleLoaderForm">
-      <sonic-checkbox label="Show fixed loader" 
-          name="toggleLoader"
-          unique  value="true">
-      </sonic-checkbox>
-      <sonic-if  data-bind ::condition="$toggleLoader" >
-        <sonic-loader></sonic-loader>
-      </sonic-if>
-    </div>
-  </template>
-</sonic-code>
-
-
-## Loading button
-<sonic-code>
-  <template>
-    <sonic-button loading>A loading button</sonic-button>
-  </template>
-</sonic-code>
-
-## Hide / show programmatically
-
-<sonic-code language="javascript">
-  <template>
-  import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
-  // Show 
-  Loader.show({
-    mode:"fixed" // optional : fixed | inline
-    container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
-  });
-  // Hide 
-  Loader.hide();
-  </template>
-</sonic-code>

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

@@ -1,288 +0,0 @@
-# Menu
-
-## Direction
-<sonic-code>
-  <template>
-    <sonic-menu direction="row" >
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
-        Row
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-        History
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-        Orders
-      </sonic-menu-item>
-      <sonic-menu-item type="danger">
-        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
-        Log out
-      </sonic-menu-item>
-    </sonic-menu>
-    <sonic-menu direction ="column" >
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
-        Column
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    <sonic-menu-item >
-        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-        History
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-        Orders
-      </sonic-menu-item>
-      <sonic-menu-item type="danger">
-        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
-        Log out
-      </sonic-menu-item>
-    </sonic-menu>
-  </template>
-</sonic-code>
-
-## Size
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-menu size="xs" direction="row">
-        <sonic-menu-item>
-          XS
-        </sonic-menu-item>
-        <sonic-menu-item>
-          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-          Profile
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-          History
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-          Orders
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu size="sm" direction="row">
-        <sonic-menu-item>
-          Small
-        </sonic-menu-item>
-        <sonic-menu-item>
-          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-          Profile
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-          History
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-          Orders
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu direction="row">
-        <sonic-menu-item>
-          Medium
-        </sonic-menu-item>
-        <sonic-menu-item>
-          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-          Profile
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-          History
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-          Orders
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu size="lg" direction="row">
-        <sonic-menu-item>
-          Large
-        </sonic-menu-item>
-        <sonic-menu-item>
-          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-          Profile
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-          History
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-          Orders
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu size="xl" direction="row">
-        <sonic-menu-item>
-          XL
-        </sonic-menu-item>
-        <sonic-menu-item>
-          <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-          Profile
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-          History
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-          Orders
-        </sonic-menu-item>
-      </sonic-menu>
-    </div>
-  </template>
-</sonic-code>
-
-## Shadow
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-menu direction="row">
-        <sonic-menu-item>
-          None
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu shadow="sm" direction="row">
-        <sonic-menu-item>
-          Small
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu shadow="md" direction="row">
-        <sonic-menu-item>
-          Medium
-        </sonic-menu-item>
-      </sonic-menu>
-      <sonic-menu shadow="lg" direction="row">
-        <sonic-menu-item>
-          Large
-        </sonic-menu-item>
-      </sonic-menu>
-    </div>
-  </template>
-</sonic-code>
-
-## Align
-<sonic-code>
-  <template>
-    <sonic-menu  align="center">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
-    <sonic-menu  align="left">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
-    <sonic-menu  align="right">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
-  </template>
-</sonic-code>
-
-
-
-## More
-<sonic-code>
-  <template>
-    <sonic-menu direction="row">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-        History
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-        Orders
-      </sonic-menu-item>
-      <sonic-menu slot="more">
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
-          Settings
-        </sonic-menu-item>
-        <sonic-menu-item >
-          <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
-          Messages
-        </sonic-menu-item>
-        <sonic-divider></sonic-divider>
-        <sonic-menu-item type="danger">
-          <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
-          Log out
-        </sonic-menu-item>
-      </sonic-menu>
-    </sonic-menu>
-  </template>
-</sonic-code>
-
-## Scrollable
-<sonic-code>
-  <template>
-    <sonic-menu direction="row" scrollable>
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
-        History
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
-        Orders
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
-        Settings
-      </sonic-menu-item>
-      <sonic-menu-item >
-        <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
-        Messages
-      </sonic-menu-item>
-      <sonic-menu-item type="danger">
-        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
-        Log out
-      </sonic-menu-item>
-    </sonic-menu>
-  </template>
-</sonic-code>
-
-
-        

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

@@ -1,123 +0,0 @@
-## Modal
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="document.getElementById('modalExample').show()">
-      Simple modal
-    </sonic-button>
-    <sonic-modal id="modalExample">
-      <sonic-modal-close></sonic-modal-close>
-      <sonic-modal-title
-        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
-      >
-      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
-      <sonic-modal-content>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
-      </sonic-modal-content>
-      <sonic-modal-actions formDataProvider="ModalMiniForm">
-        <sonic-button FormCheckable  minWidth="8rem" value="true" name="click">
-          Click don't close
-        </sonic-button>
-        <sonic-button minWidth="8rem" type="success" hideModal>Confirm</sonic-button>
-      </sonic-modal-actions>
-    </sonic-modal>
-  </template>
-</sonic-code>
-
-
-## Long text
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
-    <sonic-modal align="left" id="modalText">
-      <sonic-modal-close></sonic-modal-close>
-      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
-      <sonic-modal-content>
-        <div class="prose">
-          <p>
-            <strong>Horaires d’ouverture </strong><br />
-            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
-            + horaires spécifiques pour événements ou festivals&nbsp;
-          </p>
-          <p>
-            <strong> Billetterie&nbsp;<br /></strong>
-            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
-            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
-          </p>
-          <p>
-            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
-            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
-            conseillé de réserver les billets en avance pour s’assurer une place.
-          </p>
-          <p>
-            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
-            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
-          </p>
-          <p>
-            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
-          </p>
-          <br />
-          <p>
-            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
-            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
-          </p>
-          <p>
-            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
-            billetterie@laconditionpublique.com
-          </p>
-        </div>
-      </sonic-modal-content>
-    </sonic-modal>
-  </template>
-</sonic-code>
-
-## Force action
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
-    <sonic-modal forceAction id="force">
-      <sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
-      <sonic-modal-content>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
-      </sonic-modal-content>
-      <sonic-modal-actions >
-        <sonic-button hideModal minWidth="8rem"> Nope </sonic-button>
-        <sonic-button hideModal minWidth="8rem" type="success">Hell yes !</sonic-button>
-      </sonic-modal-actions>
-    </sonic-modal>
-    </sonic-modal>
-  </template>
-</sonic-code>
-
-## Custom dimensions
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
-    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
-      <sonic-modal-close></sonic-modal-close>
-      <sonic-image
-        cover
-        objectPosition="center 20%"
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      ></sonic-image>
-    </sonic-modal>
-  </template>
-</sonic-code>
-
-## Fullscreen
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
-    <sonic-modal fullscreen id="Fullscreen">
-      <sonic-modal-close></sonic-modal-close>
-      <sonic-image
-        cover
-        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
-      ></sonic-image>
-    </sonic-modal>
-  </template>
-</sonic-code>

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

@@ -1,96 +0,0 @@
-# Pop
-
-## Placement
-<sonic-code>
-  <template>
-    <sonic-pop class="inline-block" placement="left">
-      <sonic-button>Left</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" placement="right">
-      <sonic-button>Right</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" placement="top">
-      <sonic-button>Top</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" placement="bottom">
-      <sonic-button>Bottom</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-  </template>
-</sonic-code>
-
-## Shadow
-<sonic-code>
-  <template>
-    <sonic-pop class="inline-block" shadow="none" placement='top' >
-      <sonic-button>None</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
-      <sonic-button>Small</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" shadow="md"  placement='top'>
-      <sonic-button>Medium</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
-      <sonic-button>Large</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-  </template>
-</sonic-code>
-
-## noToggle
-<sonic-code>
-  <template>
-    <sonic-pop class="inline-block"  noToggle>
-      <sonic-button>No toggle on click</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-pop class="inline-block" >
-      <sonic-button>Default toggle on click</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-  </template>
-</sonic-code>
-
-
-## manual
-<sonic-code>
-  <template>
-    <sonic-pop class="inline-block" manual id="manualPop">
-      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
-      <sonic-menu slot="content">
-        <sonic-menu-item>Hourra !</sonic-menu-item>
-      </sonic-menu>
-    </sonic-pop>
-    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5"  variant="outline">
-      <sonic-icon name="sparkles" library="custom"></sonic-icon>
-      Click to open pop
-    </sonic-button>
-  </template>
-</sonic-code>

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

@@ -1,63 +0,0 @@
-# Progress bar
-
-Displays an indicator showing the completion progress of a task.
-
-## Indeterminate
-
-<sonic-code>
-  <template>
-  <sonic-progress></sonic-progress>
-  </template>
-</sonic-code>
-
-
-## Remaining
-
-<sonic-code>
-  <template>
-  <sonic-progress  type="danger" value="80">
-    80% Used <span slot="remaining">20% left</span>
-  </sonic-progress>
-  </template>
-</sonic-code>
-
-## Sizes
-
-<sonic-code>
-  <template>
-<div class="grid gap-3">
-  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
-  <sonic-progress  size="xs" value="25">25%</sonic-progress>
-  <sonic-progress  size="sm" value="25">25%</sonic-progress>
-  <sonic-progress  size="md" value="25">25%</sonic-progress>
-  <sonic-progress  size="lg" value="25">25%</sonic-progress>
-  <sonic-progress  size="xl" value="25">25%</sonic-progress>
-  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
-</div>
-  </template>
-</sonic-code>
-
-## Type
-
-<sonic-code>
-  <template>
-<div class="grid gap-3">
-  <sonic-progress  value="50">50%</sonic-progress>
-  <sonic-progress  type="info" value="50">50%</sonic-progress>
-  <sonic-progress  type="warning" value="50">50%</sonic-progress>
-  <sonic-progress  type="success" value="50">50%</sonic-progress>
-  <sonic-progress  type="danger" value="50">50%</sonic-progress>
-</div>
-   </template>
-</sonic-code>
-
-
-## Invert
-
-<sonic-code>
-  <template>
-<div class="bg-neutral-900 p-4 rounded-md">
-  <sonic-progress  type="invert" value="50">50%</sonic-progress>
-</div>
-  </template>
-</sonic-code>