@supersoniks/concorde 3.1.48 → 3.1.49

package/docs/src/core/components/functional/submit/submit.md

@@ -0,0 +1,83 @@
+# Submit
+
+## The submit element is used to send data to a rest service
+ * The api is set up like a [fetcher](#core/components/functional/fetch/fetch.md/fetch).
+ * The *formDataProvider* attribute points to the adress where the data is held by a publisher.
+ * This attribute is also used by form elements such as *sonic-input*, or *sonic-select*, which fill this publisher with their *value* attribute according to their *name* attribute
+ * The *method* attribute allows you to choose the sending method: *put/delete/post*, *post* being the default method.
+ * If the *onClick* attribute is present, the data is sent when the content is clicked on
+ * If the *onEnterKey* attribute is present, data is sent when the enter key of an element contained in the *sonic-submit* with focus is pressed
+ * During sending, *sonic-submit* elements with the same *dataProvider* attribute have the *disabled="disabled "* property, which has the effect of disabling their content
+ * The *clearedDataOnSuccess* attribute can be used to clear the data from the corresponding dataProvider when the call to the api has provided a result.
+
+## Form example
+<sonic-code>
+  <template>
+  <sonic-scope
+        serviceURL="https://reqres.in" dataProvider="api/register"
+        formDataProvider="submit-example" submitResultDataProvider="submit-example-result"
+        method="post"
+        class="max-w-lg block"
+      >
+        <sonic-submit onEnterKey>
+          <div class="grid grid-cols-2 gap-4 mb-4 ">
+            <sonic-input required name="email" type="email" value="eve.holt@reqres.in"></sonic-input>
+            <sonic-input required type="password" name="password" value="pistol"></sonic-input>
+          </div>
+        </sonic-submit>
+        <sonic-submit onClick>
+          <sonic-button type="success" class="w-full">Submit</sonic-button>
+        </sonic-submit>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+
+
+
+
+## Result handling example
+
+Result will show when something has been submit because the **dataprovider** used in this example is the same as the **submitResultDataProvider** used in the previous form.
+<sonic-code>
+  <template>
+      <div dataProvider="submit-example-result">
+        <div>Id : <span data-bind ::inner-html="$id"></span></div>
+        <div>Token : <span data-bind ::inner-html="$token"></span></div>
+        <div data-bind ::inner-html="$error"></div>
+      </div>
+  </template>
+</sonic-code>
+
+
+## dot notation
+
+You can write the folowing code where the name attribute is written in dot notation.
+
+<sonic-code>
+  <template>
+  <sonic-scope formDataProvider="submit-example-dot-notation">
+     <div class="grid grid-cols-2 gap-4 mb-4 ">
+        <sonic-input required name="email.value" type="email" value="eve.holt@reqres.in"></sonic-input>
+        <sonic-input required type="password" name="details.password.value" value="pistol"></sonic-input>
+      </div>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+The data will be stored in the following format:
+
+ <sonic-code language="typescript">
+  <template>
+  {
+    email: {
+      value: "eve.holt@reqres.in",
+    },
+    details: {
+      password: {
+        value: "pistol",
+      },
+    },
+  }
+  </template>
+</sonic-code>

package/docs/src/core/components/functional/subscriber/subscriber.md

@@ -0,0 +1,91 @@
+# Subscriber
+
+La mixin Subscriber permet lier un composant à un publisher.
+La liaison à un publisher se fait via l'attribut *dataProvider* du composant qui représente ce que l'on obtient en appellant PublisherManager.get(dataProvider).
+
+Les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.
+
+Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.
+
+## DataProvider
+
+**Id** of the dataProvider that the component will **subscribe** to
+
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="id_that_the_subsriber_will_subscribe_to" debug>
+      <sonic-button> custom dataProvider id</sonic-button>
+    </sonic-subscriber>
+    <sonic-subscriber debug>
+      <sonic-button> default id : pageHTML</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+## Props
+
+Data object (json) that will be passed to the dataProvider
+
+<sonic-code>
+  <template>
+    <sonic-subscriber props='{"data":"Hello world"}' debug>
+      <sonic-button> Hover to see the data</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## Debug
+
+**Helper**, display the data held by the dataProvider in a floating div
+
+<sonic-code>
+  <template>
+    <sonic-subscriber debug>
+      <sonic-button> see the dataProvider'data </sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## NoAutofill
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## PropertyMap
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+Permet de mapper un nom de propriété de donnée source vers une propriété du subscriber à la volée
+
+## BindPublisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.
+
+## instanceCounter
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Publisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Args
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+ 
+## NoShadowDom
+
+Par défaut on crée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.  
+Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
+
+
+## Other attributes gathered from subscriber.stories.ts
+
+styles ??  
+title ??  
+_props ??  
+onAssign ??  
+defferedDebug ??

package/docs/src/core/components/functional/value/value.md

@@ -0,0 +1,35 @@
+# Value
+
+Simply shows a value from a data provider.
+You can target sub data value using dot syntax.
+The value reacts to changes.
+
+* Below is a form that helps you to set a value for the field "preference" in the data target with id "value-example"
+<sonic-code>
+  <template>
+    <div formDataProvider="value-example">
+      which one do you prefer  ?
+      <sonic-radio name="preference" checked value="dogs"> Dogs</sonic-radio>
+      <sonic-radio name="preference" value="cats"> Cats</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+* Then you can see live value of the preference using this code :
+<sonic-code>
+  <template>
+  I prefer <sonic-value dataProvider="value-example" key="preference"></sonic-value> 
+  </template>
+</sonic-code>
+* If you have more complex data like this
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="value-example-2" props='{"my":{"complex":[{"data":"👋 Hi There"}]}}'></sonic-subscriber> 
+  </template>
+</sonic-code>
+* You can target it with the dot syntax
+<sonic-code>
+  <template>
+  <sonic-value dataProvider="value-example-2" key="my.complex.0.data"></sonic-value> 
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,121 @@
+# Alert
+
+<sonic-code>
+  <template>
+    <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
+  </template>
+</sonic-code>
+
+## Status
+
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
+  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
+  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
+  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
+  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
+  </div>
+  </template>
+</sonic-code>
+
+## Sizes
+
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+  <sonic-alert status="error" label="Email error" size="2xs">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error" size="xs">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error" size="sm">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error" size="lg">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error" size="xl">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  <sonic-alert status="error" label="Email error" size="2xl">
+    This address is already in use. Lorem ipsum dolor sit amet.
+  </sonic-alert>
+  </div>
+  </template>
+</sonic-code>
+
+## Alert with link
+
+<sonic-code>
+  <template>
+  <sonic-alert status="info" label="New messages !">
+    You have 2 unread messages<br />
+    <div class="flex gap-2 mt-1">
+      <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
+      <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
+    </div>
+  </sonic-alert>
+  </template>
+</sonic-code>
+
+## Background
+
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+  <sonic-alert background label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="success" background label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="error" background label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="warning" background label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="info" background label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  </div>
+  </template>
+</sonic-code>
+
+## Dismissible
+
+<sonic-code>
+  <template>
+  <sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
+    This address is already in use.
+  </sonic-alert>
+  </template>
+</sonic-code>
+
+## Dismiss forever
+
+<sonic-code>
+  <template>
+  <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
+    This address is already in use.
+  </sonic-alert>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,127 @@
+# Badge
+
+## Type
+<sonic-code>
+  <template>
+  <sonic-badge>Default</sonic-badge>
+  <sonic-badge type="primary">Primary</sonic-badge>
+  <sonic-badge type="neutral">Neutral</sonic-badge>
+  <sonic-badge type="warning">Warning</sonic-badge>
+  <sonic-badge type="info">Info</sonic-badge>
+  <sonic-badge type="success">Success</sonic-badge>
+  <sonic-badge type="danger">Danger</sonic-badge>
+  <sonic-badge type="contrast">Contrast</sonic-badge>
+  </template>
+</sonic-code>
+
+
+## Outline
+<sonic-code>
+  <template>
+  <div class="flex items-center flex-wrap gap-3">
+    <sonic-badge variant="outline">Default</sonic-badge>
+    <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
+    <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
+    <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
+    <sonic-badge variant="outline" type="info">Info</sonic-badge>
+    <sonic-badge variant="outline" type="success">Success</sonic-badge>
+    <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
+    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
+  </div>
+  </template>
+</sonic-code>
+
+## Ghost
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+    <sonic-badge variant="ghost">Default</sonic-badge>
+    <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
+    <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
+    <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
+    <sonic-badge variant="ghost" type="info">Info</sonic-badge>
+    <sonic-badge variant="ghost" type="success">Success</sonic-badge>
+    <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
+    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
+  </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <sonic-badge size="2xs">2Xs badge</sonic-badge>
+  <sonic-badge size="xs">Xs badge</sonic-badge>
+  <sonic-badge size="sm">Sm badge</sonic-badge>
+  <sonic-badge>Md badge</sonic-badge>
+  <sonic-badge size="lg">Lg badge</sonic-badge>
+  <sonic-badge size="xl">Xl badge</sonic-badge>
+  <sonic-badge size="2xl">2Xl badge</sonic-badge>
+  </template>
+</sonic-code>
+
+
+## Empty badges
+<sonic-code>
+  <template>
+  <div class="flex items-center flex-wrap gap-3">
+    <sonic-badge type="danger" size="2xs"></sonic-badge>
+    <sonic-badge type="danger" size="xs"></sonic-badge>
+    <sonic-badge type="danger" size="sm"></sonic-badge>
+    <sonic-badge type="danger"></sonic-badge>
+    <sonic-badge type="danger" size="lg"></sonic-badge>
+    <sonic-badge type="danger" size="xl"></sonic-badge>
+    <sonic-badge type="danger" size="2xl"></sonic-badge>
+  </div>
+  </template>
+</sonic-code>
+
+
+## Ellipsis
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-4" >
+        <sonic-badge ellipsis size="sm" variant="outline"  >
+        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
+        <sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
+    </div>
+  </template>
+</sonic-code>
+
+## Badge in button
+<sonic-code>
+  <template>
+  <div class="flex flex-wrap gap-4 items-center">
+    <sonic-button type="default">
+      Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
+    </sonic-button>
+    <div class="relative inline-block">
+      <sonic-button type="success" class="relative"> Mon compte </sonic-button>
+      <sonic-badge type="danger" size="xs" class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
+        >12</sonic-badge
+      >
+    </div>
+    <div class="relative inline-block">
+      <sonic-button type="neutral" shape="circle" variant="outline"
+        ><sonic-icon library="iconoir" name="user"></sonic-icon>
+      </sonic-button>
+      <sonic-badge
+        type="danger"
+        size="xs"
+        class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
+        >33</sonic-badge
+      >
+    </div>
+    <div class="relative inline-block">
+      <sonic-button type="neutral" shape="circle" variant="outline"
+        ><sonic-icon library="iconoir" name="user"></sonic-icon>
+      </sonic-button>
+      <sonic-badge
+        type="danger"
+        size="xs"
+        class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
+      ></sonic-badge>
+    </div>
+  </div>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,184 @@
+# Button
+
+
+
+## Type
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button>Default</sonic-button>
+      <sonic-button type="primary">Primary</sonic-button>
+      <sonic-button type="neutral">Neutral</sonic-button>
+      <sonic-button type="warning">Warning</sonic-button>
+      <sonic-button type="info">Info</sonic-button>
+      <sonic-button type="success">Success</sonic-button>
+      <sonic-button type="danger">Danger</sonic-button>
+      <sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Outline
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button variant="outline">Default</sonic-button>
+      <sonic-button variant="outline" type="primary">Primary</sonic-button>
+      <sonic-button variant="outline" type="neutral">Neutral</sonic-button>
+      <sonic-button variant="outline" type="warning">Warning</sonic-button>
+      <sonic-button variant="outline" type="info">Info</sonic-button>
+      <sonic-button variant="outline" type="success">Success</sonic-button>
+      <sonic-button variant="outline" type="danger">Danger</sonic-button>
+      <sonic-button variant="outline" type="custom" style="--sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Variant
+<sonic-code>
+  <template>
+    <sonic-button variant="default">Default</sonic-button>
+    <sonic-button variant="outline">Outline</sonic-button>
+    <sonic-button variant="ghost">Ghost</sonic-button>
+    <sonic-button variant="link">Link</sonic-button>
+    <sonic-button variant="unstyled">Unstyled</sonic-button>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <sonic-button size="2xs">2Xs button</sonic-button>
+    <sonic-button size="xs">Xs button</sonic-button>
+    <sonic-button size="sm">Sm button</sonic-button>
+    <sonic-button size="md">Md button</sonic-button>
+    <sonic-button>Default button</sonic-button>
+    <sonic-button size="lg">Lg button</sonic-button>
+    <sonic-button size="xl">Xl button</sonic-button>
+    <sonic-button size="2xl">2Xl button</sonic-button>
+  </template>
+</sonic-code>
+
+## Shape
+<sonic-code>
+  <template>
+    <sonic-button shape="circle"> 😂 </sonic-button>
+    <sonic-button shape="square"> 🚀 </sonic-button>
+  </template>
+</sonic-code>
+
+## Loading
+The length of the button depends on the size of its content
+<sonic-code>
+  <template>
+    <sonic-button loading></sonic-button>
+    <sonic-button loading>Loading button</sonic-button>
+  </template>
+</sonic-code>
+
+## Swap
+<sonic-code>
+  <template>
+    <sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" shape="circle" variant="outline" class="mr-4">
+      <sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
+      <sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
+    </sonic-button>
+    <sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" variant="outline">
+      <sonic-icon library="iconoir" swap="on" slot="prefix" name="eye-empty"></sonic-icon>
+      <sonic-icon library="iconoir" swap="off" slot="prefix" name="eye-off"></sonic-icon>
+      Révélez
+      <span swap="off">...</span>
+      <span swap="on">moi !</span>
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Reset
+<sonic-code>
+  <template>
+    <div formDataProvider="button-reset-demo" class="mb-2">
+      <sonic-checkbox name="aChexbox" value="AValueToSet">Set A value</sonic-checkbox><br>
+      <sonic-button reset>Reset current formDataProvider</sonic-button>
+    </div>
+      <sonic-button reset="button-reset-demo">Reset formDataProvider by name</sonic-button>
+  </template>
+</sonic-code>
+
+
+## GoBack
+<sonic-code>
+  <template>
+    <sonic-button goBack type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
+      Retour classique
+    </sonic-button>
+    <sonic-button goBack="http://la-billetterie.net" type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
+      Retour url prédéfinie
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Button with icon
+<sonic-code>
+  <template>
+    <sonic-button goBack type="primary" variant="outline"  class="mr-4">
+      <sonic-icon library="iconoir" slot="prefix" name="arrow-right" ></sonic-icon>
+      Button with icon
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Button group
+<sonic-code>
+  <template>
+    <sonic-group label="Code promo" class="mr-4">
+      <sonic-input placeholder="Entrez votre code ici..."></sonic-input>
+      <sonic-button type="primary" shape="square">
+        <sonic-icon library="iconoir" library="iconoir" name="gift"></sonic-icon>
+      </sonic-button>
+    </sonic-group>
+    <sonic-divider size="lg"></sonic-divider>
+    <div class="text-lg mb-2">Choose a subscription</div>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio minWidth="10rem" name="subscription" value="standard" type="default"
+        >😎 Standard</sonic-button
+      >
+      <sonic-button radio minWidth="10rem" name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio minWidth="10rem" name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+
+## Aria-label
+<sonic-code>
+  <template>
+      <sonic-button data-aria-label="Custom aria label" type="primary" >
+        Button with aria label
+      </sonic-button>
+       <sonic-button data-aria-label="Custom aria label" href="https://google.fr" type="primary" >
+        Button link with aria label
+      </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Custom styles & active states with tailwind
+<sonic-code>
+  <template>
+    <div formDataProvider="subscriptionData2">
+      <sonic-button
+        class="bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&[active]]:text-danger-content [&[active]]:min-w-[13rem] [&[active]]:bg-danger [&[active]]:font-black [&[active]]:rounded-full"
+        variant="unstyled"
+        checkable unique 
+        name="subscription"
+        value="premium"
+        type="default">
+          <span swap="off" class="inline-block py-2 px-3" >subscribe</span>
+          <span swap="on" class="inline-block py-2 px-3" >⭐ Premium</span>
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,12 @@
+# Captcha
+
+<sonic-code>
+  <template>
+  <sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
+    <sonic-submit serviceURL="https://reqres.in" endPoint="api/unknown" onclick>
+      <sonic-button>Submit with captcha</sonic-button>
+    </sonic-submit>
+  </sonic-captcha>
+  </template>
+</sonic-code>
+