@supersoniks/concorde 5.0.5 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/.tmp-cem/custom-elements.json +13705 -0
  4. package/CONTRIBUTING.md +59 -0
  5. package/DEV.md +54 -0
  6. package/LICENSE +21 -0
  7. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  8. package/build-infos.json +1 -1
  9. package/concorde-3d.bundle.js +3960 -0
  10. package/concorde-3d.es.js +33433 -0
  11. package/concorde-core.bundle.js +196 -196
  12. package/concorde-core.es.js +3685 -3405
  13. package/concorde-hugging-face-infer.bundle.js +32 -0
  14. package/concorde-hugging-face-infer.es.js +2952 -0
  15. package/concorde-interactive.bundle.js +1157 -0
  16. package/concorde-interactive.es.js +10734 -0
  17. package/concorde-shader.bundle.js +116 -0
  18. package/concorde-shader.es.js +8353 -0
  19. package/concorde-webgpu.bundle.js +307 -0
  20. package/concorde-webgpu.es.js +8627 -0
  21. package/custom-elements-manifest.config.mjs +14 -0
  22. package/dist/concorde-core.bundle.js +196 -196
  23. package/dist/concorde-core.es.js +3685 -3405
  24. package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
  25. package/docs/assets/index-DiD0qYvE.css +1 -0
  26. package/docs/crawl/core/components/ui/alert/alert.html +71 -172
  27. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
  28. package/docs/crawl/core/components/ui/badge/badge.html +79 -157
  29. package/docs/crawl/core/components/ui/button/button.html +0 -1
  30. package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
  31. package/docs/crawl/core/components/ui/card/card.html +68 -222
  32. package/docs/crawl/core/components/ui/divider/divider.html +31 -117
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
  36. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  37. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  38. package/docs/crawl/core/components/ui/group/group.html +38 -60
  39. package/docs/crawl/core/components/ui/icon/icon.html +47 -136
  40. package/docs/crawl/core/components/ui/image/image.html +56 -244
  41. package/docs/crawl/core/components/ui/link/link.html +9 -67
  42. package/docs/crawl/core/components/ui/loader/loader.html +23 -97
  43. package/docs/crawl/core/components/ui/menu/menu.html +90 -162
  44. package/docs/crawl/core/components/ui/modal/modal.html +50 -275
  45. package/docs/crawl/core/components/ui/pop/pop.html +66 -260
  46. package/docs/crawl/core/components/ui/progress/progress.html +30 -103
  47. package/docs/crawl/core/components/ui/table/table.html +171 -303
  48. package/docs/crawl/core/components/ui/toast/toast.html +59 -170
  49. package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
  50. package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
  51. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  52. package/docs/crawl/docs/_getting-started/start.html +1 -1
  53. package/docs/crawl/docs/_getting-started/theming.html +63 -311
  54. package/docs/crawl/hubs/form-components.html +53 -75
  55. package/docs/crawl/index.html +6 -7
  56. package/docs/docs-mock-api-sw.js +0 -2
  57. package/docs/docs-mock-api-sw.js.map +2 -2
  58. package/docs/index.html +7 -9
  59. package/docs/llms-full.txt +456 -1703
  60. package/docs/llms.txt +32 -25
  61. package/docs/sitemap.xml +0 -3
  62. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  63. package/docs/src/core/components/functional/if/if.md +0 -0
  64. package/docs/src/core/components/functional/list/list.md +0 -0
  65. package/docs/src/core/components/functional/router/router.md +0 -0
  66. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  67. package/docs/src/core/components/functional/states/states.md +0 -0
  68. package/docs/src/core/components/functional/submit/submit.md +0 -0
  69. package/docs/src/core/components/ui/alert/alert.md +72 -147
  70. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  71. package/docs/src/core/components/ui/badge/badge.md +80 -141
  72. package/docs/src/core/components/ui/button/button.md +0 -1
  73. package/docs/src/core/components/ui/captcha/captcha.md +6 -65
  74. package/docs/src/core/components/ui/card/card.md +65 -183
  75. package/docs/src/core/components/ui/divider/divider.md +13 -107
  76. package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
  77. package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
  78. package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
  79. package/docs/src/core/components/ui/form/input/input.md +1 -1
  80. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/docs/src/core/components/ui/form/select/select.md +0 -0
  82. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  84. package/docs/src/core/components/ui/group/group.md +36 -36
  85. package/docs/src/core/components/ui/icon/icon.md +43 -132
  86. package/docs/src/core/components/ui/image/image.md +53 -179
  87. package/docs/src/core/components/ui/link/link.md +7 -45
  88. package/docs/src/core/components/ui/loader/loader.md +22 -79
  89. package/docs/src/core/components/ui/menu/menu.md +92 -133
  90. package/docs/src/core/components/ui/modal/modal.md +47 -163
  91. package/docs/src/core/components/ui/pop/pop.md +64 -262
  92. package/docs/src/core/components/ui/progress/progress.md +30 -76
  93. package/docs/src/core/components/ui/table/table.md +171 -147
  94. package/docs/src/core/components/ui/toast/toast.md +58 -108
  95. package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
  96. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  97. package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
  98. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  99. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  100. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  101. package/docs/src/docs/_getting-started/start.md +1 -1
  102. package/docs/src/docs/_getting-started/theming.md +61 -223
  103. package/docs/src/docs/search/docs-search.json +348 -3083
  104. package/docs/src/tsconfig.declarations.json +22 -0
  105. package/docs/src/tsconfig.emit.json +23 -0
  106. package/docs/src/tsconfig.json +3 -63
  107. package/gitlab/job_github_mirror.sh +39 -0
  108. package/package.json +36 -2
  109. package/scripts/generate-sdui-catalog.mjs +250 -0
  110. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  111. package/scripts/github-export.mjs +150 -0
  112. package/scripts/post-build-docs.js +0 -0
  113. package/scripts/post-build.mjs +0 -0
  114. package/scripts/pre-build.mjs +15 -0
  115. package/src/core/components/functional/fetch/fetch.md +0 -0
  116. package/src/core/components/functional/if/if.md +0 -0
  117. package/src/core/components/functional/if/if.ts +0 -0
  118. package/src/core/components/functional/list/list.demo.ts +0 -0
  119. package/src/core/components/functional/list/list.md +0 -0
  120. package/src/core/components/functional/router/router.md +0 -0
  121. package/src/core/components/functional/router/router.ts +0 -0
  122. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  123. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  124. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  125. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  126. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  127. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  128. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  129. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  130. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  131. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  132. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  133. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  134. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  135. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  136. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  137. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  138. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  139. package/src/core/components/functional/sdui/sdui.md +122 -0
  140. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  141. package/src/core/components/functional/sdui/sdui.ts +442 -34
  142. package/src/core/components/functional/sdui/types.ts +49 -0
  143. package/src/core/components/functional/states/states.md +0 -0
  144. package/src/core/components/functional/submit/submit.md +0 -0
  145. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  146. package/src/core/components/functional/value/value.ts +0 -0
  147. package/src/core/components/ui/_css/size.ts +0 -0
  148. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  149. package/src/core/components/ui/form/radio/radio.md +0 -0
  150. package/src/core/components/ui/form/select/select.md +0 -0
  151. package/src/core/components/ui/form/switch/switch.md +0 -0
  152. package/src/core/mixins/Subscriber.ts +0 -0
  153. package/src/core/utils/DataBindObserver.ts +0 -0
  154. package/src/core/utils/Objects.ts +0 -0
  155. package/src/core/utils/route.ts +0 -0
  156. package/src/css.d.ts +19 -0
  157. package/src/docs/_core-concept/subscriber.md +0 -0
  158. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  159. package/src/docs/_getting-started/pubsub.md +0 -0
  160. package/src/docs/example/users.ts +0 -0
  161. package/src/docs/search/page.ts +0 -0
  162. package/src/tsconfig.declarations.json +22 -0
  163. package/src/tsconfig.emit.json +23 -0
  164. package/src/tsconfig.json +90 -0
  165. package/src/tsconfig.tsbuildinfo +1 -1
  166. package/docs/assets/index-CD4WyL6o.css +0 -1
  167. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  168. package/docs/src/core/components/ui/theme/theme.md +0 -122
package/docs/crawl/core/components/ui/modal/modal.html CHANGED
@@ -3,9 +3,9 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Modal — Concorde</title>
7
- <meta name="description" content="sonic-modal presents focused content in a &lt;dialog&gt; overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction">
6
+ <title>Concorde — Concorde</title>
7
+ <meta name="description" content="Concorde: Simple modal Lorem ipsum dolor sit amet +33 Donec sed vestibulum augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus. Click don't close Confir">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, UI component, sonic-modal, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/modal/modal">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">
11
11
  </head>
@@ -15,326 +15,101 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. sonic-modal presents focused content in a &lt;dialog&gt; overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
19
- <h1 id="modal">Modal</h1>
20
- <p><strong><code>sonic-modal</code></strong> presents focused content in a <code>&lt;dialog&gt;</code> overlay with backdrop, enter/exit animation, and a built-in close control. Compose <strong><code>sonic-modal-title</code></strong> / <strong><code>sonic-modal-subtitle</code></strong> / <strong><code>sonic-modal-content</code></strong> / <strong><code>sonic-modal-actions</code></strong>, or use the default slot. Call <strong><code>show()</code></strong> on the element to open; use <strong><code>hideModal</code></strong> on action buttons or <strong><code>hide()</code></strong> from script. Set <strong><code>forceAction</code></strong> when dismissal must go through explicit actions only. Imperative dialogs: <strong><code>Modal.create()</code></strong> (also <strong><code>window.SonicModal</code></strong>).</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <p>Click the trigger to open. <strong><code>sonic-modal-actions</code></strong> lays out footer buttons; <strong><code>hideModal</code></strong> closes the modal on click. Scope form state with <strong><code>formDataProvider</code></strong> on <strong><code>sonic-modal-actions</code></strong> so child <strong><code>sonic-button</code></strong> elements share one publisher.</p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Concorde</strong>. Concorde: Simple modal Lorem ipsum dolor sit amet +33 Donec sed vestibulum augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus. Click don't close Confir <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, UI component, sonic-modal, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
19
+ <h2 id="modal">Modal</h2>
23
20
  <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalExample&#39;).show()&quot;&gt;
24
- Open modal
21
+ Simple modal
25
22
  &lt;/sonic-button&gt;
26
23
  &lt;sonic-modal id=&quot;modalExample&quot;&gt;
27
- &lt;sonic-modal-title&gt;
28
- Export ready
29
- &lt;sonic-badge type=&quot;success&quot; size=&quot;sm&quot;&gt;New&lt;/sonic-badge&gt;
30
- &lt;/sonic-modal-title&gt;
31
- &lt;sonic-modal-subtitle&gt;Your report finished processing.&lt;/sonic-modal-subtitle&gt;
24
+ &lt;sonic-modal-title
25
+ &gt;Lorem ipsum dolor sit amet &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;+33&lt;/sonic-badge&gt;&lt;/sonic-modal-title
26
+ &gt;
27
+ &lt;sonic-modal-subtitle&gt;Donec sed vestibulum augue.&lt;/sonic-modal-subtitle&gt;
32
28
  &lt;sonic-modal-content&gt;
33
- Download the CSV now or review the summary in your dashboard before sharing.
29
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
34
30
  &lt;/sonic-modal-content&gt;
35
31
  &lt;sonic-modal-actions formDataProvider=&quot;ModalMiniForm&quot;&gt;
36
- &lt;sonic-button minWidth=&quot;8rem&quot; value=&quot;true&quot; name=&quot;click&quot;&gt;
37
- Save draft
32
+ &lt;sonic-button FormCheckable minWidth=&quot;8rem&quot; value=&quot;true&quot; name=&quot;click&quot;&gt;
33
+ Click don&#39;t close
38
34
  &lt;/sonic-button&gt;
39
- &lt;sonic-button minWidth=&quot;8rem&quot; type=&quot;success&quot; hideModal&gt;Download&lt;/sonic-button&gt;
35
+ &lt;sonic-button minWidth=&quot;8rem&quot; type=&quot;success&quot; hideModal&gt;Confirm&lt;/sonic-button&gt;
40
36
  &lt;/sonic-modal-actions&gt;
41
37
  &lt;/sonic-modal&gt;
42
38
  </code></pre>
43
- <h2 id="scrollable-content">Scrollable content</h2>
44
- <p>Long copy scrolls inside the dialog. Default <strong><code>maxHeight</code></strong> is <code>90vh</code>. Default <strong><code>align</code></strong> is <code>left</code>.</p>
45
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalText&#39;).show()&quot;&gt;Venue details&lt;/sonic-button&gt;
39
+ <h2 id="long-text">Long text</h2>
40
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalText&#39;).show()&quot;&gt; Long text &lt;/sonic-button&gt;
46
41
  &lt;sonic-modal align=&quot;left&quot; id=&quot;modalText&quot;&gt;
47
- &lt;sonic-modal-title&gt;Hours and tickets&lt;/sonic-modal-title&gt;
42
+ &lt;sonic-modal-title&gt;Infos et tarifs &lt;/sonic-modal-title&gt;
48
43
  &lt;sonic-modal-content&gt;
49
44
  &lt;div class=&quot;prose&quot;&gt;
50
45
  &lt;p&gt;
51
- &lt;strong&gt;Opening hours&lt;/strong&gt;&lt;br /&gt;
52
- Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
46
+ &lt;strong&gt;Horaires d’ouverture &lt;/strong&gt;&lt;br /&gt;
47
+ Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h&lt;br /&gt;
48
+ + horaires spécifiques pour événements ou festivals&amp;nbsp;
53
49
  &lt;/p&gt;
54
50
  &lt;p&gt;
55
- &lt;strong&gt;Ticketing&lt;/strong&gt;&lt;br /&gt;
56
- Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
51
+ &lt;strong&gt; Billetterie&amp;nbsp;&lt;br /&gt;&lt;/strong&gt;
52
+ La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
53
+ réservations disponibles en ligne ou au guichet.&amp;nbsp;&amp;nbsp;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;
57
54
  &lt;/p&gt;
58
55
  &lt;p&gt;
59
- &lt;strong&gt;Contact&lt;/strong&gt;&lt;br /&gt;
60
- tickets@example.com · +33 3 28 33 48 33
56
+ Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
57
+ varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
58
+ conseillé de réserver les billets en avance pour s’assurer une place.
61
59
  &lt;/p&gt;
62
60
  &lt;p&gt;
63
- &lt;strong&gt;Access&lt;/strong&gt;&lt;br /&gt;
64
- 14 Place Faidherbe, 59100 Roubaix&lt;br /&gt;
65
- Metro line 2, Eurotéléport stop
61
+ L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
62
+ nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
63
+ &lt;/p&gt;
64
+ &lt;p&gt;
65
+ &lt;strong&gt;+ d’infos &lt;br /&gt;&lt;/strong&gt;billetterie@laconditionpublique.com &lt;br /&gt;+33 (0)328334833&amp;nbsp;
66
+ &lt;/p&gt;
67
+ &lt;br /&gt;
68
+ &lt;p&gt;
69
+ &lt;strong&gt;Accès &lt;br /&gt;&lt;/strong&gt;14, place Faidherbe &lt;br /&gt;59100 Roubaix &lt;br /&gt;Métro / Tram : Arrêt
70
+ Eurotéléport, Ligne 2 &lt;br /&gt;Bus / V’Lille : Arrêt Condition Publique&amp;nbsp;
71
+ &lt;/p&gt;
72
+ &lt;p&gt;
73
+ Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
74
+ billetterie@laconditionpublique.com
66
75
  &lt;/p&gt;
67
76
  &lt;/div&gt;
68
77
  &lt;/sonic-modal-content&gt;
69
78
  &lt;/sonic-modal&gt;
70
79
  </code></pre>
71
80
  <h2 id="force-action">Force action</h2>
72
- <p>With <strong><code>forceAction</code></strong>, backdrop click, Escape, and the default close button are disabled. Provide <strong><code>sonic-modal-actions</code></strong> (or <strong><code>sonic-modal-close</code></strong>) so users can finish the flow.</p>
73
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;force&#39;).show()&quot;&gt;Cookie consent&lt;/sonic-button&gt;
81
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;force&#39;).show()&quot;&gt; Force action to close&lt;/sonic-button&gt;
74
82
  &lt;sonic-modal forceAction id=&quot;force&quot;&gt;
75
- &lt;sonic-modal-title&gt;Allow analytics cookies?&lt;/sonic-modal-title&gt;
83
+ &lt;sonic-modal-title&gt;Do you want some cookies ? &lt;/sonic-modal-title&gt;
76
84
  &lt;sonic-modal-content&gt;
77
- We use cookies to measure traffic and improve the product. You can change this later in settings.
85
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
78
86
  &lt;/sonic-modal-content&gt;
79
- &lt;sonic-modal-actions&gt;
80
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt;Decline&lt;/sonic-button&gt;
81
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;success&quot;&gt;Accept&lt;/sonic-button&gt;
87
+ &lt;sonic-modal-actions &gt;
88
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt; Nope &lt;/sonic-button&gt;
89
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;success&quot;&gt;Hell yes !&lt;/sonic-button&gt;
82
90
  &lt;/sonic-modal-actions&gt;
83
91
  &lt;/sonic-modal&gt;
92
+ &lt;/sonic-modal&gt;
84
93
  </code></pre>
85
94
  <h2 id="custom-dimensions">Custom dimensions</h2>
86
- <p>Set <strong><code>width</code></strong> / <strong><code>height</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>maxHeight</code></strong> (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use <strong><code>rounded=&quot;none&quot;</code></strong> for edge-to-edge media.</p>
87
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;CustomWidth&#39;).show()&quot;&gt;Image preview&lt;/sonic-button&gt;
88
- &lt;sonic-modal
89
- rounded=&quot;none&quot;
90
- maxHeight=&quot;50vh&quot;
91
- maxWidth=&quot;90vw&quot;
92
- width=&quot;100%&quot;
93
- height=&quot;100%&quot;
94
- id=&quot;CustomWidth&quot;
95
- &gt;
95
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;CustomWidth&#39;).show()&quot;&gt; Custom width &lt;/sonic-button&gt;
96
+ &lt;sonic-modal maxHeight=&quot;50vh&quot; maxWidth=&quot;90vw&quot; width=&quot;100%&quot; height=&quot;100%&quot; id=&quot;CustomWidth&quot;&gt;
96
97
  &lt;sonic-image
97
98
  cover
98
99
  objectPosition=&quot;center 20%&quot;
99
100
  src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
100
- alt=&quot;View from an airplane window&quot;
101
101
  &gt;&lt;/sonic-image&gt;
102
102
  &lt;/sonic-modal&gt;
103
103
  </code></pre>
104
104
  <h2 id="fullscreen">Fullscreen</h2>
105
- <p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
106
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;Fullscreen&#39;).show()&quot;&gt;Fullscreen&lt;/sonic-button&gt;
105
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;Fullscreen&#39;).show()&quot;&gt; Fullscreen &lt;/sonic-button&gt;
107
106
  &lt;sonic-modal fullscreen id=&quot;Fullscreen&quot;&gt;
108
107
  &lt;sonic-image
109
108
  cover
110
109
  src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
111
- alt=&quot;View from an airplane window&quot;
112
110
  &gt;&lt;/sonic-image&gt;
113
111
  &lt;/sonic-modal&gt;
114
112
  </code></pre>
115
- <h2 id="programmatic-creation">Programmatic creation</h2>
116
- <p>Use <strong><code>Modal.create(options)</code></strong> when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest <strong><code>sonic-theme</code></strong> pop container (same as declarative modals), opened automatically, and returns the <strong><code>sonic-modal</code></strong> instance. Set <strong><code>removeOnHide: true</code></strong> to detach it from the DOM after close. In the browser, <strong><code>window.SonicModal</code></strong> is the same class after the module loads.</p>
117
- <p>Pass <strong><code>title</code></strong> / <strong><code>subtitle</code></strong> / <strong><code>content</code></strong> / <strong><code>actions</code></strong> as HTML strings (or Lit template results from application code). Put <strong><code>hideModal</code></strong> on action buttons in the <strong><code>actions</code></strong> string so clicks close the dialog.</p>
118
- <pre><code>&lt;sonic-button
119
- onclick=&quot;window.SonicModal.create({
120
- title: &#39;Send invite?&#39;,
121
- subtitle: &#39;The recipient can join immediately.&#39;,
122
- content: &#39;We will email an invitation to alex@example.com.&#39;,
123
- actions: &#39;&amp;lt;sonic-button hideModal minWidth=\&#39;8rem\&#39;&amp;gt;Cancel&amp;lt;/sonic-button&amp;gt;&amp;lt;sonic-button hideModal minWidth=\&#39;8rem\&#39; type=\&#39;success\&#39;&amp;gt;Send&amp;lt;/sonic-button&amp;gt;&#39;,
124
- removeOnHide: true
125
- })&quot;
126
- &gt;
127
- Open programmatic modal
128
- &lt;/sonic-button&gt;
129
- </code></pre>
130
- <pre><code class="language-javascript">import { Modal } from &quot;@supersoniks/concorde/core/components/ui/modal/modal&quot;;
131
-
132
- const modal = Modal.create({
133
- title: &quot;Delete project?&quot;,
134
- subtitle: &quot;This cannot be undone.&quot;,
135
- content: &quot;&lt;p&gt;All files in &lt;strong&gt;Acme HQ&lt;/strong&gt; will be removed.&lt;/p&gt;&quot;,
136
- actions: `
137
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt;Cancel&lt;/sonic-button&gt;
138
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;danger&quot;&gt;Delete&lt;/sonic-button&gt;
139
- `,
140
- removeOnHide: true,
141
- forceAction: false,
142
- maxWidth: &quot;min(100vw, 28rem)&quot;,
143
- });
144
-
145
- modal.addEventListener(&quot;hidden&quot;, () =&gt; {
146
- console.log(&quot;Modal removed from the DOM&quot;);
147
- });
148
-
149
- // Or close from script: await modal.hide(); await modal.dispose();
150
- </code></pre>
151
- <h2 id="api-reference">API reference</h2>
152
- <h3 id="sonic-modal"><code>sonic-modal</code></h3>
153
- <table>
154
- <thead>
155
- <tr>
156
- <th>Attribute</th>
157
- <th>Values</th>
158
- <th>Description</th>
159
- </tr>
160
- </thead>
161
- <tbody><tr>
162
- <td><code>align</code></td>
163
- <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
164
- <td>Align title and slotted content</td>
165
- </tr>
166
- <tr>
167
- <td><code>maxWidth</code></td>
168
- <td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
169
- <td>Dialog max width</td>
170
- </tr>
171
- <tr>
172
- <td><code>maxHeight</code></td>
173
- <td>CSS length (default <code>90vh</code>)</td>
174
- <td>Scrollable body max height</td>
175
- </tr>
176
- <tr>
177
- <td><code>width</code></td>
178
- <td>CSS length (default <code>100%</code>)</td>
179
- <td>Dialog width</td>
180
- </tr>
181
- <tr>
182
- <td><code>height</code></td>
183
- <td>CSS length (default <code>fit-content</code>)</td>
184
- <td>Dialog height</td>
185
- </tr>
186
- <tr>
187
- <td><code>paddingX</code> · <code>paddingY</code></td>
188
- <td>CSS length</td>
189
- <td>Override content padding (<code>--sc-modal-px</code> / <code>--sc-modal-py</code>)</td>
190
- </tr>
191
- <tr>
192
- <td><code>zIndex</code></td>
193
- <td>CSS number</td>
194
- <td>Stacking order (default <code>990</code>)</td>
195
- </tr>
196
- <tr>
197
- <td><code>effect</code></td>
198
- <td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
199
- <td>Open/close animation</td>
200
- </tr>
201
- <tr>
202
- <td><code>fullscreen</code></td>
203
- <td>boolean</td>
204
- <td>Full viewport; no backdrop</td>
205
- </tr>
206
- <tr>
207
- <td><code>forceAction</code></td>
208
- <td>boolean</td>
209
- <td>Disable overlay, Escape, and default close button</td>
210
- </tr>
211
- <tr>
212
- <td><code>noCloseButton</code></td>
213
- <td>boolean</td>
214
- <td>Hide built-in close when not <strong><code>forceAction</code></strong></td>
215
- </tr>
216
- <tr>
217
- <td><code>closeButtonType</code></td>
218
- <td><strong><code>sonic-button</code></strong> <code>type</code></td>
219
- <td>Style of built-in close</td>
220
- </tr>
221
- <tr>
222
- <td><code>visible</code></td>
223
- <td>boolean</td>
224
- <td>When toggled, opens or closes the dialog</td>
225
- </tr>
226
- <tr>
227
- <td><code>removeOnHide</code></td>
228
- <td>boolean</td>
229
- <td>Remove element from DOM after close</td>
230
- </tr>
231
- <tr>
232
- <td><code>removeHashOnHide</code></td>
233
- <td>boolean</td>
234
- <td>Clear URL hash on close</td>
235
- </tr>
236
- <tr>
237
- <td><code>closeOnLocationChange</code></td>
238
- <td>boolean</td>
239
- <td>Close when app location changes</td>
240
- </tr>
241
- <tr>
242
- <td><code>resetDataProviderOnHide</code></td>
243
- <td>string</td>
244
- <td>Reset named <strong><code>formDataProvider</code></strong> on close</td>
245
- </tr>
246
- <tr>
247
- <td><code>rounded</code></td>
248
- <td><code>none</code></td>
249
- <td>Square dialog corners (useful for full-bleed media)</td>
250
- </tr>
251
- </tbody></table>
252
- <table>
253
- <thead>
254
- <tr>
255
- <th>Slot</th>
256
- <th>Description</th>
257
- </tr>
258
- </thead>
259
- <tbody><tr>
260
- <td><em>(default)</em></td>
261
- <td>Additional markup alongside structured children</td>
262
- </tr>
263
- </tbody></table>
264
- <table>
265
- <thead>
266
- <tr>
267
- <th>Event</th>
268
- <th>Description</th>
269
- </tr>
270
- </thead>
271
- <tbody><tr>
272
- <td><code>show</code></td>
273
- <td>Fired when open animation completes</td>
274
- </tr>
275
- <tr>
276
- <td><code>hide</code></td>
277
- <td>Fired when close starts</td>
278
- </tr>
279
- <tr>
280
- <td><code>hidden</code></td>
281
- <td>Fired when close finishes</td>
282
- </tr>
283
- </tbody></table>
284
- <p>Methods: <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> · <strong><code>dispose()</code></strong> (hide and remove). Static <strong><code>Modal.create(options)</code></strong> appends a modal to the theme pop container and opens it. <strong><code>options</code></strong> / <strong><code>styleSheet</code></strong> are JavaScript-only.</p>
285
- <h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code></h3>
286
- <table>
287
- <thead>
288
- <tr>
289
- <th>Slot</th>
290
- <th>Description</th>
291
- </tr>
292
- </thead>
293
- <tbody><tr>
294
- <td><em>(default)</em></td>
295
- <td>Title, subtitle, or main body content</td>
296
- </tr>
297
- </tbody></table>
298
- <h3 id="sonic-modal-actions"><code>sonic-modal-actions</code></h3>
299
- <table>
300
- <thead>
301
- <tr>
302
- <th>Slot</th>
303
- <th>Description</th>
304
- </tr>
305
- </thead>
306
- <tbody><tr>
307
- <td><em>(default)</em></td>
308
- <td>Footer actions (typically <strong><code>sonic-button</code></strong>)</td>
309
- </tr>
310
- </tbody></table>
311
- <p>Put <strong><code>hideModal</code></strong> on a <strong><code>sonic-button</code></strong> to close the parent modal on click. Ancestor <strong><code>formDataProvider</code></strong> on this element is inherited by child form controls.</p>
312
- <h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
313
- <p>Rendered automatically unless <strong><code>forceAction</code></strong> or <strong><code>noCloseButton</code></strong> is set. Calls <strong><code>hide()</code></strong> on the parent modal.</p>
314
- <table>
315
- <thead>
316
- <tr>
317
- <th>Attribute</th>
318
- <th>Values</th>
319
- <th>Description</th>
320
- </tr>
321
- </thead>
322
- <tbody><tr>
323
- <td><code>type</code></td>
324
- <td><strong><code>sonic-button</code></strong> <code>type</code></td>
325
- <td>Close button color</td>
326
- </tr>
327
- <tr>
328
- <td><code>reset</code></td>
329
- <td>string</td>
330
- <td>Passed to inner <strong><code>sonic-button</code></strong> <strong><code>reset</code></strong></td>
331
- </tr>
332
- <tr>
333
- <td><code>translation</code></td>
334
- <td>UI label object</td>
335
- <td>Overrides default close <strong><code>aria-label</code></strong></td>
336
- </tr>
337
- </tbody></table>
338
113
 
339
114
  </article>
340
115
  </main>