@supersoniks/concorde 3.1.72 → 3.1.73

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 (217) hide show
  1. package/build-infos.json +1 -1
  2. package/concorde-core.bundle.js +204 -204
  3. package/concorde-core.es.js +521 -522
  4. package/dist/concorde-core.bundle.js +204 -204
  5. package/dist/concorde-core.es.js +521 -522
  6. package/docs/assets/index-D9bBwsCn.js +4537 -0
  7. package/docs/assets/index-DCRPZO3x.css +1 -0
  8. package/docs/css/docs.css +0 -0
  9. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  10. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  11. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  12. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  13. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  14. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  15. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  16. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  17. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  18. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  19. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  20. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  21. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  22. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  23. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  24. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  25. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  26. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  27. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  28. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  29. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  30. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  31. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  32. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  33. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  34. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  35. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  36. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  37. package/docs/img/concorde-icon.svg +5 -0
  38. package/docs/img/concorde-logo.svg +1 -0
  39. package/docs/img/concorde.png +0 -0
  40. package/docs/img/concorde_def.png +0 -0
  41. package/docs/img/concorde_seuil.png.webp +0 -0
  42. package/docs/img/concorde_seuil_invert.png +0 -0
  43. package/docs/img/paul_metrand.jpg +0 -0
  44. package/docs/img/paul_metrand_xs.jpg +0 -0
  45. package/docs/index.html +93 -0
  46. package/docs/src/core/components/functional/date/date.md +290 -0
  47. package/docs/src/core/components/functional/fetch/fetch.md +117 -0
  48. package/docs/src/core/components/functional/if/if.md +16 -0
  49. package/docs/src/core/components/functional/list/list.md +199 -0
  50. package/docs/src/core/components/functional/mix/mix.md +41 -0
  51. package/docs/src/core/components/functional/queue/queue.md +87 -0
  52. package/docs/src/core/components/functional/router/router.md +108 -0
  53. package/docs/src/core/components/functional/sdui/default-library.json +108 -0
  54. package/docs/src/core/components/functional/sdui/example.json +99 -0
  55. package/docs/src/core/components/functional/sdui/sdui.md +356 -0
  56. package/docs/src/core/components/functional/states/states.md +87 -0
  57. package/docs/src/core/components/functional/submit/submit.md +83 -0
  58. package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
  59. package/docs/src/core/components/functional/value/value.md +35 -0
  60. package/docs/src/core/components/ui/alert/alert.md +121 -0
  61. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  62. package/docs/src/core/components/ui/badge/badge.md +127 -0
  63. package/docs/src/core/components/ui/button/button.md +182 -0
  64. package/docs/src/core/components/ui/captcha/captcha.md +12 -0
  65. package/docs/src/core/components/ui/card/card.md +97 -0
  66. package/docs/src/core/components/ui/divider/divider.md +35 -0
  67. package/docs/src/core/components/ui/form/checkbox/checkbox.md +94 -0
  68. package/docs/src/core/components/ui/form/fieldset/fieldset.md +129 -0
  69. package/docs/src/core/components/ui/form/form-actions/form-actions.md +77 -0
  70. package/docs/src/core/components/ui/form/form-layout/form-layout.md +44 -0
  71. package/docs/src/core/components/ui/form/input/input.md +167 -0
  72. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +130 -0
  73. package/docs/src/core/components/ui/form/radio/radio.md +84 -0
  74. package/docs/src/core/components/ui/form/select/select.md +97 -0
  75. package/docs/src/core/components/ui/form/switch/switch.md +84 -0
  76. package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
  77. package/docs/src/core/components/ui/group/group.md +75 -0
  78. package/docs/src/core/components/ui/icon/icon.md +125 -0
  79. package/docs/src/core/components/ui/icon/icons.json +1 -0
  80. package/docs/src/core/components/ui/image/image.md +107 -0
  81. package/docs/src/core/components/ui/link/link.md +43 -0
  82. package/docs/src/core/components/ui/loader/loader.md +67 -0
  83. package/docs/src/core/components/ui/menu/menu.md +288 -0
  84. package/docs/src/core/components/ui/modal/modal.md +123 -0
  85. package/docs/src/core/components/ui/pop/pop.md +79 -0
  86. package/docs/src/core/components/ui/progress/progress.md +63 -0
  87. package/docs/src/core/components/ui/table/table.md +455 -0
  88. package/docs/src/core/components/ui/tooltip/tooltip.md +82 -0
  89. package/docs/src/docs/_core-concept/overview.md +57 -0
  90. package/docs/src/docs/_core-concept/subscriber.md +76 -0
  91. package/docs/src/docs/_getting-started/concorde-outside.md +143 -0
  92. package/docs/src/docs/_getting-started/create-a-component.md +137 -0
  93. package/docs/src/docs/_getting-started/my-first-subscriber.md +174 -0
  94. package/docs/src/docs/_getting-started/pubsub.md +150 -0
  95. package/docs/src/docs/_getting-started/start.md +39 -0
  96. package/docs/src/docs/_getting-started/theming.md +91 -0
  97. package/docs/src/docs/search/docs-search.json +3902 -0
  98. package/docs/src/tag-list.json +1 -0
  99. package/docs/src/tsconfig-model.json +23 -0
  100. package/docs/src/tsconfig.json +835 -0
  101. package/docs/svg/regular/plane.svg +1 -0
  102. package/docs/svg/solid/plane.svg +1 -0
  103. package/index.html +0 -0
  104. package/package.json +2 -2
  105. package/php/get-challenge.php +34 -0
  106. package/php/some-service.php +42 -0
  107. package/scripts/create-search.js +0 -0
  108. package/scripts/generate-routes.js +0 -0
  109. package/src/core/_types/types.ts +0 -0
  110. package/src/core/components/functional/date/date.ts +0 -0
  111. package/src/core/components/functional/functional.ts +0 -0
  112. package/src/core/components/functional/if/if.md +0 -0
  113. package/src/core/components/functional/if/if.test.ts +0 -0
  114. package/src/core/components/functional/list/list.demo.ts +0 -0
  115. package/src/core/components/functional/list/list.spec.ts +0 -0
  116. package/src/core/components/functional/queue/queue.demo.ts +0 -0
  117. package/src/core/components/functional/router/router.demo.ts +0 -0
  118. package/src/core/components/functional/router/router.md +0 -0
  119. package/src/core/components/functional/router/router.spec.ts +0 -0
  120. package/src/core/components/functional/router/router.ts +0 -0
  121. package/src/core/components/functional/sonic-scope/sonic-scope.ts +0 -0
  122. package/src/core/components/functional/states/states.demo.ts +0 -0
  123. package/src/core/components/functional/states/states.md +0 -0
  124. package/src/core/components/functional/states/states.spec.ts +0 -0
  125. package/src/core/components/functional/states/states.ts +0 -0
  126. package/src/core/components/functional/translation/translation.ts +0 -0
  127. package/src/core/components/ui/_css/scroll.ts +0 -0
  128. package/src/core/components/ui/_css/shadow.ts +0 -0
  129. package/src/core/components/ui/_css/size.ts +0 -0
  130. package/src/core/components/ui/_css/type.ts +0 -0
  131. package/src/core/components/ui/alert/alert.md +0 -0
  132. package/src/core/components/ui/alert/alert.ts +0 -0
  133. package/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  134. package/src/core/components/ui/badge/badge.md +0 -0
  135. package/src/core/components/ui/badge/badge.ts +0 -0
  136. package/src/core/components/ui/button/button.md +0 -0
  137. package/src/core/components/ui/button/button.ts +0 -0
  138. package/src/core/components/ui/captcha/captcha.md +0 -0
  139. package/src/core/components/ui/card/card-footer.ts +0 -0
  140. package/src/core/components/ui/card/card-header-descripton.ts +0 -0
  141. package/src/core/components/ui/card/card-header.ts +0 -0
  142. package/src/core/components/ui/card/card-main.ts +0 -0
  143. package/src/core/components/ui/card/card.md +0 -0
  144. package/src/core/components/ui/card/card.ts +0 -0
  145. package/src/core/components/ui/divider/divider.ts +0 -0
  146. package/src/core/components/ui/form/css/form-control.ts +0 -0
  147. package/src/core/components/ui/form/fieldset/fieldset.ts +0 -0
  148. package/src/core/components/ui/form/fieldset/legend-description.ts +0 -0
  149. package/src/core/components/ui/form/fieldset/legend.ts +0 -0
  150. package/src/core/components/ui/form/form-layout/form-layout.md +0 -0
  151. package/src/core/components/ui/form/input/input.md +0 -0
  152. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts +0 -0
  153. package/src/core/components/ui/form/radio/radio.md +0 -0
  154. package/src/core/components/ui/form/radio/radio.ts +0 -0
  155. package/src/core/components/ui/form/select/select.md +0 -0
  156. package/src/core/components/ui/form/switch/switch.md +0 -0
  157. package/src/core/components/ui/form/switch/switch.ts +0 -0
  158. package/src/core/components/ui/icon/icon.ts +0 -0
  159. package/src/core/components/ui/icon/icons.ts +0 -0
  160. package/src/core/components/ui/image/image.md +0 -0
  161. package/src/core/components/ui/image/image.ts +0 -0
  162. package/src/core/components/ui/loader/loader.md +0 -0
  163. package/src/core/components/ui/loader/loader.ts +0 -0
  164. package/src/core/components/ui/loader/styles/fixed.ts +0 -0
  165. package/src/core/components/ui/loader/styles/inline.ts +0 -0
  166. package/src/core/components/ui/menu/menu.ts +0 -0
  167. package/src/core/components/ui/modal/modal-actions.ts +0 -0
  168. package/src/core/components/ui/modal/modal-subtitle.ts +0 -0
  169. package/src/core/components/ui/modal/modal-title.ts +0 -0
  170. package/src/core/components/ui/modal/modal.md +0 -0
  171. package/src/core/components/ui/modal/modal.ts +0 -0
  172. package/src/core/components/ui/pop/pop.ts +6 -1
  173. package/src/core/components/ui/progress/progress.ts +0 -0
  174. package/src/core/components/ui/table/table-tbody.ts +0 -0
  175. package/src/core/components/ui/table/table-th.ts +0 -0
  176. package/src/core/components/ui/table/table.ts +0 -0
  177. package/src/core/components/ui/theme/theme-collection/core-variables.ts +0 -0
  178. package/src/core/components/ui/theme/theme-collection/dark.ts +0 -0
  179. package/src/core/components/ui/theme/theme-collection/light.ts +0 -0
  180. package/src/core/components/ui/theme/theme.ts +0 -0
  181. package/src/core/components/ui/toast/toast-item.ts +0 -0
  182. package/src/core/components/ui/toast/toast.ts +0 -0
  183. package/src/core/components/ui/tooltip/tooltip.ts +0 -0
  184. package/src/core/components/ui/ui.ts +0 -0
  185. package/src/core/directives/DataProvider.ts +0 -0
  186. package/src/core/directives/Wording.ts +0 -0
  187. package/src/core/mixins/Fetcher.ts +0 -0
  188. package/src/core/mixins/Subscriber.ts +0 -0
  189. package/src/core/mixins/TemplatesContainer.ts +0 -0
  190. package/src/core/utils/HTML.ts +12 -11
  191. package/src/core/utils/LocationHandler.ts +0 -0
  192. package/src/core/utils/Objects.ts +0 -0
  193. package/src/core/utils/Utils.ts +0 -0
  194. package/src/core/utils/aesCrypto.ts +0 -0
  195. package/src/core/utils/api.ts +0 -0
  196. package/src/core/utils/route.spec.ts +0 -0
  197. package/src/core/utils/route.ts +0 -0
  198. package/src/docs/code.ts +0 -0
  199. package/src/docs/docs.ts +0 -0
  200. package/src/docs/header/header.ts +0 -0
  201. package/src/docs/layout.ts +0 -0
  202. package/src/docs/navigation/navigation.ts +0 -0
  203. package/src/docs/search/docs-search.json +0 -0
  204. package/src/docs/search/markdown-renderer.ts +0 -0
  205. package/src/docs/search/page.ts +0 -0
  206. package/src/docs/search/search.ts +0 -0
  207. package/src/docs/tailwind/css/tailwind.css +0 -0
  208. package/src/docs/tailwind/css.d.ts +0 -0
  209. package/src/index.ts +0 -0
  210. package/src/test-utils/TestUtils.ts +0 -0
  211. package/src/tsconfig-model.json +0 -0
  212. package/src/tsconfig.json +0 -0
  213. package/src/tsconfig.tsbuildinfo +0 -0
  214. package/tailwind.config.js +0 -0
  215. package/templates-test.html +0 -0
  216. package/vite/config.js +0 -0
  217. package/vite.config.mts +0 -0
package/docs/src/core/components/ui/pop/pop.md ADDED
@@ -0,0 +1,79 @@
1
+ # Pop
2
+
3
+ ## Placement
4
+ <sonic-code>
5
+ <template>
6
+ <sonic-pop class="inline-block" placement="left">
7
+ <sonic-button>Left</sonic-button>
8
+ <sonic-menu slot="content">
9
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
10
+ </sonic-menu>
11
+ </sonic-pop>
12
+ <sonic-pop class="inline-block" placement="right">
13
+ <sonic-button>Right</sonic-button>
14
+ <sonic-menu slot="content">
15
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
16
+ </sonic-menu>
17
+ </sonic-pop>
18
+ <sonic-pop class="inline-block" placement="top">
19
+ <sonic-button>Top</sonic-button>
20
+ <sonic-menu slot="content">
21
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
22
+ </sonic-menu>
23
+ </sonic-pop>
24
+ <sonic-pop class="inline-block" placement="bottom">
25
+ <sonic-button>Bottom</sonic-button>
26
+ <sonic-menu slot="content">
27
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
28
+ </sonic-menu>
29
+ </sonic-pop>
30
+ </template>
31
+ </sonic-code>
32
+
33
+ ## Shadow
34
+ <sonic-code>
35
+ <template>
36
+ <sonic-pop class="inline-block" shadow="none" placement='top' >
37
+ <sonic-button>None</sonic-button>
38
+ <sonic-menu slot="content">
39
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
40
+ </sonic-menu>
41
+ </sonic-pop>
42
+ <sonic-pop class="inline-block" shadow="sm" placement='top'>
43
+ <sonic-button>Small</sonic-button>
44
+ <sonic-menu slot="content">
45
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
46
+ </sonic-menu>
47
+ </sonic-pop>
48
+ <sonic-pop class="inline-block" shadow="md" placement='top'>
49
+ <sonic-button>Medium</sonic-button>
50
+ <sonic-menu slot="content">
51
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
52
+ </sonic-menu>
53
+ </sonic-pop>
54
+ <sonic-pop class="inline-block" shadow="lg" placement='top'>
55
+ <sonic-button>Large</sonic-button>
56
+ <sonic-menu slot="content">
57
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
58
+ </sonic-menu>
59
+ </sonic-pop>
60
+ </template>
61
+ </sonic-code>
62
+
63
+ ## noToggle
64
+ <sonic-code>
65
+ <template>
66
+ <sonic-pop class="inline-block" noToggle>
67
+ <sonic-button>No toggle on click</sonic-button>
68
+ <sonic-menu slot="content">
69
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
70
+ </sonic-menu>
71
+ </sonic-pop>
72
+ <sonic-pop class="inline-block" >
73
+ <sonic-button>Default toggle on click</sonic-button>
74
+ <sonic-menu slot="content">
75
+ <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
76
+ </sonic-menu>
77
+ </sonic-pop>
78
+ </template>
79
+ </sonic-code>
package/docs/src/core/components/ui/progress/progress.md ADDED
@@ -0,0 +1,63 @@
1
+ # Progress bar
2
+
3
+ Displays an indicator showing the completion progress of a task.
4
+
5
+ ## Indeterminate
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-progress></sonic-progress>
10
+ </template>
11
+ </sonic-code>
12
+
13
+
14
+ ## Remaining
15
+
16
+ <sonic-code>
17
+ <template>
18
+ <sonic-progress type="danger" value="80">
19
+ 80% Used <span slot="remaining">20% left</span>
20
+ </sonic-progress>
21
+ </template>
22
+ </sonic-code>
23
+
24
+ ## Sizes
25
+
26
+ <sonic-code>
27
+ <template>
28
+ <div class="grid gap-3">
29
+ <sonic-progress size="2xs" value="25">25%</sonic-progress>
30
+ <sonic-progress size="xs" value="25">25%</sonic-progress>
31
+ <sonic-progress size="sm" value="25">25%</sonic-progress>
32
+ <sonic-progress size="md" value="25">25%</sonic-progress>
33
+ <sonic-progress size="lg" value="25">25%</sonic-progress>
34
+ <sonic-progress size="xl" value="25">25%</sonic-progress>
35
+ <sonic-progress size="2xl" value="25">25%</sonic-progress>
36
+ </div>
37
+ </template>
38
+ </sonic-code>
39
+
40
+ ## Type
41
+
42
+ <sonic-code>
43
+ <template>
44
+ <div class="grid gap-3">
45
+ <sonic-progress value="50">50%</sonic-progress>
46
+ <sonic-progress type="info" value="50">50%</sonic-progress>
47
+ <sonic-progress type="warning" value="50">50%</sonic-progress>
48
+ <sonic-progress type="success" value="50">50%</sonic-progress>
49
+ <sonic-progress type="danger" value="50">50%</sonic-progress>
50
+ </div>
51
+ </template>
52
+ </sonic-code>
53
+
54
+
55
+ ## Invert
56
+
57
+ <sonic-code>
58
+ <template>
59
+ <div class="bg-neutral-900 p-4 rounded-md">
60
+ <sonic-progress type="invert" value="50">50%</sonic-progress>
61
+ </div>
62
+ </template>
63
+ </sonic-code>
package/docs/src/core/components/ui/table/table.md ADDED
@@ -0,0 +1,455 @@
1
+ # Table
2
+
3
+ ## Basic usage
4
+
5
+ <sonic-code>
6
+ <template>
7
+ <sonic-table>
8
+ <sonic-tr>
9
+ <sonic-th>Id</sonic-th>
10
+ <sonic-th>Name</sonic-th>
11
+ <sonic-th>Email</sonic-th>
12
+ </sonic-tr>
13
+ <sonic-tr>
14
+ <sonic-td>1</sonic-td>
15
+ <sonic-td>George Bluth</sonic-td>
16
+ <sonic-td>george.bluth@reqres.in</sonic-td>
17
+ </sonic-tr>
18
+ <sonic-tr>
19
+ <sonic-td>2</sonic-td>
20
+ <sonic-td>Janet Weaver</sonic-td>
21
+ <sonic-td>janet.weaver@reqres.in</sonic-td>
22
+ </sonic-tr>
23
+ <sonic-tr>
24
+ <sonic-td>3</sonic-td>
25
+ <sonic-td>Emma Wong</sonic-td>
26
+ <sonic-td>emma.wong@reqres.in</sonic-td>
27
+ </sonic-tr>
28
+ </sonic-table>
29
+ </template>
30
+ </sonic-code>
31
+
32
+ ## List / fetch
33
+
34
+ <sonic-code>
35
+ <template>
36
+ <sonic-table>
37
+ <sonic-thead>
38
+ <sonic-tr>
39
+ <sonic-th>Id</sonic-th>
40
+ <sonic-th>Name</sonic-th>
41
+ <sonic-th>Email</sonic-th>
42
+ </sonic-tr>
43
+ </sonic-thead>
44
+ <sonic-tbody>
45
+ <sonic-list debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
46
+ <template>
47
+ <sonic-tr>
48
+ <sonic-td data-bind ::inner-html="$id"></sonic-td>
49
+ <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
50
+ <sonic-td data-bind ::inner-html="$email"></sonic-td>
51
+ </sonic-tr>
52
+ </template>
53
+ <sonic-list>
54
+ </sonic-tbody>
55
+ </sonic-table>
56
+ </template>
57
+ </sonic-code>
58
+
59
+ ## Size
60
+
61
+ <sonic-code>
62
+ <template>
63
+ <div class="grid grid-cols-4 gap-3">
64
+ <sonic-table size="2xs" bordered>
65
+ <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
66
+ </sonic-table>
67
+ <sonic-table size="xs" bordered>
68
+ <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
69
+ </sonic-table>
70
+ <sonic-table size="sm" bordered>
71
+ <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
72
+ </sonic-table>
73
+ <sonic-table size="md" bordered>
74
+ <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
75
+ </sonic-table>
76
+ <sonic-table bordered>
77
+ <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
78
+ </sonic-table>
79
+ <sonic-table size="lg" bordered>
80
+ <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
81
+ </sonic-table>
82
+ <sonic-table size="xl" bordered>
83
+ <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
84
+ </sonic-table>
85
+ <sonic-table size="2xl" bordered>
86
+ <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
87
+ </sonic-table>
88
+ </div>
89
+ </template>
90
+ </sonic-code>
91
+
92
+ ## Bordered
93
+
94
+ <sonic-code>
95
+ <template>
96
+ <sonic-table bordered>
97
+ <sonic-thead>
98
+ <sonic-tr>
99
+ <sonic-th>Id</sonic-th>
100
+ <sonic-th>Name</sonic-th>
101
+ <sonic-th>Email</sonic-th>
102
+ </sonic-tr>
103
+ </sonic-thead>
104
+ <sonic-tbody>
105
+ <sonic-tr>
106
+ <sonic-td>1</sonic-td>
107
+ <sonic-td>George Bluth</sonic-td>
108
+ <sonic-td>george.bluth@reqres.in</sonic-td>
109
+ </sonic-tr>
110
+ <sonic-tr>
111
+ <sonic-td>2</sonic-td>
112
+ <sonic-td>Janet Weaver</sonic-td>
113
+ <sonic-td>janet.weaver@reqres.in</sonic-td>
114
+ </sonic-tr>
115
+ <sonic-tr>
116
+ <sonic-td>3</sonic-td>
117
+ <sonic-td>Emma Wong</sonic-td>
118
+ <sonic-td>emma.wong@reqres.in</sonic-td>
119
+ </sonic-tr>
120
+ </sonic-tbody>
121
+ </sonic-table>
122
+ </template>
123
+ </sonic-code>
124
+
125
+ ## MaxHeight
126
+
127
+ <sonic-code>
128
+ <template>
129
+ <sonic-table maxHeight="8rem">
130
+ <sonic-thead>
131
+ <sonic-tr>
132
+ <sonic-th>Id</sonic-th>
133
+ <sonic-th>Name</sonic-th>
134
+ <sonic-th>Email</sonic-th>
135
+ </sonic-tr>
136
+ </sonic-thead>
137
+ <sonic-tbody>
138
+ <sonic-list fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
139
+ <template>
140
+ <sonic-tr>
141
+ <sonic-td data-bind ::inner-html="$id"></sonic-td>
142
+ <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
143
+ <sonic-td data-bind ::inner-html="$email"></sonic-td>
144
+ </sonic-tr>
145
+ </template>
146
+ <sonic-list>
147
+ </sonic-tbody>
148
+ </sonic-table>
149
+ </template>
150
+ </sonic-code>
151
+
152
+ ## Type
153
+
154
+ Values available : primary, info, success, warning, danger
155
+
156
+ <sonic-code>
157
+ <template>
158
+ <sonic-table bordered>
159
+ <sonic-tr>
160
+ <sonic-th type="info">Attribute type set on</sonic-th>
161
+ <sonic-th type="info">sonic-th</sonic-th>
162
+ </sonic-tr>
163
+ <sonic-tr>
164
+ <sonic-td type="danger">Attribute type set on</sonic-td>
165
+ <sonic-td type="danger">sonic-td</sonic-td>
166
+ </sonic-tr>
167
+ <sonic-tr type="success">
168
+ <sonic-td>Attribute type set on</sonic-td>
169
+ <sonic-td>sonic-tr</sonic-td>
170
+ </sonic-tr>
171
+ </sonic-tbody>
172
+ </sonic-table>
173
+ </template>
174
+ </sonic-code>
175
+
176
+ ## Colspan / rowspan
177
+
178
+ <sonic-code>
179
+ <template>
180
+ <sonic-table >
181
+ <sonic-tbody>
182
+ <sonic-tr>
183
+ <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
184
+ <sonic-td>cell</sonic-td>
185
+ </sonic-tr>
186
+ <sonic-tr>
187
+ <sonic-td>cell</sonic-td>
188
+ <sonic-td>cell</sonic-td>
189
+ <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
190
+ </sonic-tr>
191
+ <sonic-tr>
192
+ <sonic-td>cell</sonic-td>
193
+ <sonic-td>cell</sonic-td>
194
+ </sonic-tr>
195
+ </sonic-tbody>
196
+ </sonic-table>
197
+ </template>
198
+ </sonic-code>
199
+
200
+ ## Cell style attributes
201
+
202
+ The following attributes will be used to set the style of the component :
203
+ - align
204
+ - minWidth
205
+ - maxWidth
206
+ - width
207
+
208
+ <sonic-code>
209
+ <template>
210
+ <sonic-table bordered>
211
+ <sonic-thead>
212
+ <sonic-tr>
213
+ <sonic-th width="7rem">align</sonic-th>
214
+ <sonic-th minWidth="20rem">minWidth</sonic-th>
215
+ <sonic-th>maxWidth</sonic-th>
216
+ <sonic-th>width</sonic-th>
217
+ </sonic-tr>
218
+ </sonic-thead>
219
+ <sonic-tbody>
220
+ <sonic-tr>
221
+ <sonic-td align="left">Left</sonic-td>
222
+ <sonic-td>20rem</sonic-td>
223
+ <sonic-td>5rem</sonic-td>
224
+ <sonic-td>15rem</sonic-td>
225
+ </sonic-tr>
226
+ <sonic-tr>
227
+ <sonic-td align="center">center</sonic-td>
228
+ <sonic-td>20rem</sonic-td>
229
+ <sonic-td maxWidth="5rem">5rem</sonic-td>
230
+ <sonic-td>15rem</sonic-td>
231
+ </sonic-tr>
232
+ <sonic-tr>
233
+ <sonic-td align="right">right</sonic-td>
234
+ <sonic-td>20rem</sonic-td>
235
+ <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
236
+ <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
237
+ </sonic-tr>
238
+ </sonic-table>
239
+ </template>
240
+ </sonic-code>
241
+
242
+
243
+ ## Responsive
244
+
245
+ Every table is responsive by default
246
+
247
+ <sonic-code>
248
+ <template>
249
+ <sonic-table bordered>
250
+ <sonic-thead>
251
+ <sonic-tr>
252
+ <sonic-th>Id</sonic-th>
253
+ <sonic-th>Name</sonic-th>
254
+ <sonic-th>Email</sonic-th>
255
+ <sonic-th>Comment</sonic-th>
256
+ </sonic-tr>
257
+ </sonic-thead>
258
+ <sonic-tbody>
259
+ <sonic-list fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
260
+ <template>
261
+ <sonic-tr>
262
+ <sonic-td data-bind ::inner-html="$id"></sonic-td>
263
+ <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
264
+ <sonic-td data-bind ::inner-html="$email"></sonic-td>
265
+ <sonic-td minWidth="40rem">
266
+ hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna.
267
+ </sonic-td>
268
+ </sonic-tr>
269
+ </template>
270
+ <sonic-list>
271
+ </sonic-tbody>
272
+ </sonic-table>
273
+ </template>
274
+ </sonic-code>
275
+
276
+
277
+ ## Sticky header
278
+
279
+ <sonic-code>
280
+ <template>
281
+ <sonic-table bordered noCustomScroll>
282
+ <sonic-thead class="sticky top-16">
283
+ <sonic-tr>
284
+ <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
285
+ <sonic-th type="success">Contact</sonic-th>
286
+ <sonic-th>Country</sonic-th>
287
+ <sonic-th align="center">Quantity</sonic-th>
288
+ <sonic-th align="right">Price</sonic-th>
289
+ <sonic-th></sonic-th>
290
+ </sonic-tr>
291
+ </sonic-thead>
292
+ <sonic-tbody>
293
+ <sonic-tr>
294
+ <sonic-td>Alfreds Futterkiste</sonic-td>
295
+ <sonic-td>Maria Anders</sonic-td>
296
+ <sonic-td>Germany</sonic-td>
297
+ <sonic-td align="center">2</sonic-td>
298
+ <sonic-td align="right">40€</sonic-td>
299
+ <sonic-td td align="right"
300
+ ><sonic-button shape="circle" variant="outline" size="sm">
301
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
302
+ ></sonic-button>
303
+ </sonic-td>
304
+ </sonic-tr>
305
+ <sonic-tr>
306
+ <sonic-td>Centro comercial Moctezuma</sonic-td>
307
+ <sonic-td
308
+ colspan="2"
309
+ align="center"
310
+ class="
311
+ text-center
312
+ text-neutral-400
313
+ "
314
+ >no information yet</sonic-td
315
+ >
316
+ <sonic-td align="center">3</sonic-td>
317
+ <sonic-td align="right">40€</sonic-td>
318
+ <sonic-td td align="right"
319
+ ><sonic-button shape="circle" variant="outline" size="sm">
320
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
321
+ ></sonic-button>
322
+ </sonic-td>
323
+ </sonic-tr>
324
+ <sonic-tr>
325
+ <sonic-td>Ernst Handel</sonic-td>
326
+ <sonic-td>Roland Mendel</sonic-td>
327
+ <sonic-td>Austria</sonic-td>
328
+ <sonic-td align="center">4</sonic-td>
329
+ <sonic-td align="right">40€</sonic-td>
330
+ <sonic-td td align="right"
331
+ ><sonic-button shape="circle" variant="outline" size="sm">
332
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
333
+ ></sonic-button>
334
+ </sonic-td>
335
+ </sonic-tr>
336
+ <sonic-tr>
337
+ <sonic-td>Island Trading</sonic-td>
338
+ <sonic-td>Helen Bennett</sonic-td>
339
+ <sonic-td>UK</sonic-td>
340
+ <sonic-td align="center">1</sonic-td>
341
+ <sonic-td align="right">40€</sonic-td>
342
+ <sonic-td td align="right"
343
+ ><sonic-button shape="circle" variant="outline" size="sm">
344
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
345
+ ></sonic-button>
346
+ </sonic-td>
347
+ </sonic-tr>
348
+ <sonic-tr type="warning">
349
+ <sonic-td>Laughing Bacchus Winecellars</sonic-td>
350
+ <sonic-td>Yoshi Tannamuri</sonic-td>
351
+ <sonic-td>Canada</sonic-td>
352
+ <sonic-td align="center">0</sonic-td>
353
+ <sonic-td align="right">40€</sonic-td>
354
+ <sonic-td td align="right"
355
+ ><sonic-button shape="circle" variant="outline" size="sm">
356
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
357
+ ></sonic-button>
358
+ </sonic-td>
359
+ </sonic-tr>
360
+ <sonic-tr>
361
+ <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
362
+ <sonic-td>Giovanni Rovelli</sonic-td>
363
+ <sonic-td type="danger">Italy</sonic-td>
364
+ <sonic-td align="center">20</sonic-td>
365
+ <sonic-td align="right">40€</sonic-td>
366
+ <sonic-td td align="right"
367
+ ><sonic-button shape="circle" variant="outline" size="sm">
368
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
369
+ ></sonic-button>
370
+ </sonic-td>
371
+ </sonic-tr>
372
+ <sonic-tr>
373
+ <sonic-td>Alfreds Futterkiste</sonic-td>
374
+ <sonic-td>Maria Anders</sonic-td>
375
+ <sonic-td>Germany</sonic-td>
376
+ <sonic-td align="center">2</sonic-td>
377
+ <sonic-td align="right">40€</sonic-td>
378
+ <sonic-td td align="right"
379
+ ><sonic-button shape="circle" variant="outline" size="sm">
380
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
381
+ ></sonic-button>
382
+ </sonic-td>
383
+ </sonic-tr>
384
+ <sonic-tr>
385
+ <sonic-td>Centro comercial Moctezuma</sonic-td>
386
+ <sonic-td
387
+ colspan="2"
388
+ align="center"
389
+ class="
390
+ text-center
391
+ text-neutral-400
392
+ "
393
+ >no information yet</sonic-td
394
+ >
395
+ <sonic-td align="center">3</sonic-td>
396
+ <sonic-td align="right">40€</sonic-td>
397
+ <sonic-td td align="right"
398
+ ><sonic-button shape="circle" variant="outline" size="sm">
399
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
400
+ ></sonic-button>
401
+ </sonic-td>
402
+ </sonic-tr>
403
+ <sonic-tr>
404
+ <sonic-td>Ernst Handel</sonic-td>
405
+ <sonic-td>Roland Mendel</sonic-td>
406
+ <sonic-td>Austria</sonic-td>
407
+ <sonic-td align="center">4</sonic-td>
408
+ <sonic-td align="right">40€</sonic-td>
409
+ <sonic-td td align="right"
410
+ ><sonic-button shape="circle" variant="outline" size="sm">
411
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
412
+ ></sonic-button>
413
+ </sonic-td>
414
+ </sonic-tr>
415
+ <sonic-tr>
416
+ <sonic-td>Island Trading</sonic-td>
417
+ <sonic-td>Helen Bennett</sonic-td>
418
+ <sonic-td>UK</sonic-td>
419
+ <sonic-td align="center">1</sonic-td>
420
+ <sonic-td align="right">40€</sonic-td>
421
+ <sonic-td td align="right"
422
+ ><sonic-button shape="circle" variant="outline" size="sm">
423
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
424
+ ></sonic-button>
425
+ </sonic-td>
426
+ </sonic-tr>
427
+ <sonic-tr type="warning">
428
+ <sonic-td>Laughing Bacchus Winecellars</sonic-td>
429
+ <sonic-td>Yoshi Tannamuri</sonic-td>
430
+ <sonic-td>Canada</sonic-td>
431
+ <sonic-td align="center">0</sonic-td>
432
+ <sonic-td align="right">40€</sonic-td>
433
+ <sonic-td td align="right"
434
+ ><sonic-button shape="circle" variant="outline" size="sm">
435
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
436
+ ></sonic-button>
437
+ </sonic-td>
438
+ </sonic-tr>
439
+ <sonic-tr>
440
+ <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
441
+ <sonic-td>Giovanni Rovelli</sonic-td>
442
+ <sonic-td>Italy</sonic-td>
443
+ <sonic-td align="center">20</sonic-td>
444
+ <sonic-td align="right">40€</sonic-td>
445
+ <sonic-td td align="right"
446
+ ><sonic-button shape="circle" variant="outline" size="sm">
447
+ <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
448
+ ></sonic-button>
449
+ </sonic-td>
450
+ </sonic-tr>
451
+ </sonic-tbody>
452
+ <sonic-caption>table caption</sonic-caption>
453
+ </sonic-table>
454
+ </template>
455
+ </sonic-code>
package/docs/src/core/components/ui/tooltip/tooltip.md ADDED
@@ -0,0 +1,82 @@
1
+ # Tooltip
2
+
3
+ <sonic-code>
4
+ <template>
5
+ <sonic-tooltip label="Tada : Text appears">hover me</sonic-tooltip>
6
+ </template>
7
+ </sonic-code>
8
+
9
+ ## Placement
10
+
11
+ By default, tooltip is centered next to its content
12
+
13
+ <sonic-code>
14
+ <template>
15
+ <sonic-tooltip placement="top" label="Top text">
16
+ <sonic-button>Top</sonic-button>
17
+ </sonic-tooltip>
18
+ <sonic-tooltip placement="bottom" label="Bottom text">
19
+ <sonic-button>Bottom</sonic-button>
20
+ </sonic-tooltip>
21
+ <sonic-tooltip placement="right" label="Right text">
22
+ <sonic-button>Right</sonic-button>
23
+ </sonic-tooltip>
24
+ <sonic-tooltip placement="left" label="Left text">
25
+ <sonic-button>Left</sonic-button>
26
+ </sonic-tooltip>
27
+ </template>
28
+ </sonic-code>
29
+
30
+ ## More placement
31
+ <sonic-code>
32
+ <template>
33
+ <div class="flex gap-3 flex-wrap">
34
+ <sonic-tooltip placement="top-start" label="My tooltip">
35
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top start</sonic-button>
36
+ </sonic-tooltip>
37
+ <sonic-tooltip placement="top-end" label="My tooltip">
38
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top end</sonic-button>
39
+ </sonic-tooltip>
40
+ <sonic-tooltip placement="bottom-start" label="My tooltip">
41
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom start</sonic-button>
42
+ </sonic-tooltip>
43
+ <sonic-tooltip placement="bottom-end" label="My tooltip">
44
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom end</sonic-button>
45
+ </sonic-tooltip>
46
+ <sonic-tooltip placement="right-start" label="My tooltip">
47
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right start</sonic-button>
48
+ </sonic-tooltip>
49
+ <sonic-tooltip placement="right-end" label="My tooltip">
50
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right end</sonic-button>
51
+ </sonic-tooltip>
52
+ <sonic-tooltip placement="left-start" label="My tooltip">
53
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left start</sonic-button>
54
+ </sonic-tooltip>
55
+ <sonic-tooltip placement="left-end" label="My tooltip">
56
+ <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left end</sonic-button>
57
+ </sonic-tooltip>
58
+ </div>
59
+ </template>
60
+ </sonic-code>
61
+
62
+
63
+ ## Focusable
64
+
65
+ <sonic-code>
66
+ <template>
67
+ <sonic-tooltip focusable label="The Concorde made its first transatlantic crossing on September 26, 1973">
68
+ <sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon> Focus or hover non interactive element
69
+ </sonic-tooltip>
70
+ </template>
71
+ </sonic-code>
72
+
73
+ ## Disabled
74
+
75
+ <sonic-code>
76
+ <template>
77
+ <sonic-tooltip disabled label="Disabled text">
78
+ <sonic-button>Tooltip disabled</sonic-button>
79
+ </sonic-tooltip>
80
+ </template>
81
+ </sonic-code>
82
+