@supersoniks/concorde 3.1.77 → 3.1.78

package/docs/src/core/components/ui/icon/icons.json

@@ -0,0 +1 @@
+{"core":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-puzzled":"<svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" ><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>","minus-small":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\" />\n</svg>\n","more-horiz":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}

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

@@ -0,0 +1,107 @@
+# Image
+
+## Rounded
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8 grid-cols-3 items-center">
+      <sonic-image
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ratio="1/1"
+      >
+      </sonic-image>
+      <sonic-image
+        rounded="sm"
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        rounded
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        rounded="md"
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        rounded="lg"
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        rounded="full"
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Ratio
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8 grid-cols-2 items-center">
+      <sonic-image
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        ratio="16/9"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+      <sonic-image
+        ratio="2/3"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Object position
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8 grid-cols-2 items-center">
+      <sonic-image
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ratio="11/4"
+      >
+      </sonic-image>
+      <sonic-image
+        objectPosition="center top"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ratio="11/4"
+      >
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Cover
+
+<sonic-code>
+  <template>
+    <div class="h-96 relative">
+      <sonic-image
+        cover
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      >
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,43 @@
+# 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

@@ -0,0 +1,67 @@
+# 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

@@ -0,0 +1,288 @@
+# 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

@@ -0,0 +1,123 @@
+## 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>