@supersoniks/concorde 5.0.3 → 5.0.4

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 (106) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/CONTRIBUTING.md +59 -0
  4. package/DEV.md +54 -0
  5. package/LICENSE +21 -0
  6. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +66 -66
  9. package/concorde-core.es.js +1368 -1318
  10. package/dist/concorde-core.bundle.js +66 -66
  11. package/dist/concorde-core.es.js +1368 -1318
  12. package/docs/assets/{index-BnK6OS7w.js → index-D8MVWqY6.js} +1144 -1008
  13. package/docs/assets/index-DiD0qYvE.css +1 -0
  14. package/docs/crawl/core/components/ui/alert/alert.html +71 -101
  15. package/docs/crawl/core/components/ui/badge/badge.html +77 -106
  16. package/docs/crawl/core/components/ui/button/button.html +0 -1
  17. package/docs/crawl/core/components/ui/card/card.html +68 -112
  18. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  19. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  20. package/docs/crawl/core/components/ui/image/image.html +56 -132
  21. package/docs/crawl/core/components/ui/link/link.html +4 -4
  22. package/docs/crawl/core/components/ui/pop/pop.html +3 -79
  23. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  24. package/docs/crawl/hubs/form-components.html +4 -4
  25. package/docs/index.html +5 -5
  26. package/docs/llms-full.txt +97 -281
  27. package/docs/llms.txt +8 -8
  28. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  29. package/docs/src/core/components/functional/if/if.md +0 -0
  30. package/docs/src/core/components/functional/list/list.md +0 -0
  31. package/docs/src/core/components/functional/router/router.md +0 -0
  32. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  33. package/docs/src/core/components/functional/states/states.md +0 -0
  34. package/docs/src/core/components/functional/submit/submit.md +0 -0
  35. package/docs/src/core/components/ui/alert/alert.md +72 -128
  36. package/docs/src/core/components/ui/badge/badge.md +78 -126
  37. package/docs/src/core/components/ui/button/button.md +0 -1
  38. package/docs/src/core/components/ui/captcha/captcha.md +0 -0
  39. package/docs/src/core/components/ui/card/card.md +65 -120
  40. package/docs/src/core/components/ui/form/input/input.md +1 -1
  41. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  42. package/docs/src/core/components/ui/form/select/select.md +0 -0
  43. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  44. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  45. package/docs/src/core/components/ui/image/image.md +53 -147
  46. package/docs/src/core/components/ui/link/link.md +2 -2
  47. package/docs/src/core/components/ui/loader/loader.md +0 -0
  48. package/docs/src/core/components/ui/menu/menu.md +0 -0
  49. package/docs/src/core/components/ui/modal/modal.md +0 -0
  50. package/docs/src/core/components/ui/pop/pop.md +1 -105
  51. package/docs/src/core/components/ui/table/table.md +0 -0
  52. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  53. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  54. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  55. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  56. package/docs/src/docs/_getting-started/start.md +0 -0
  57. package/docs/src/docs/search/docs-search.json +25 -655
  58. package/docs/src/tsconfig.declarations.json +22 -0
  59. package/docs/src/tsconfig.emit.json +23 -0
  60. package/docs/src/tsconfig.json +3 -45
  61. package/gitlab/job_github_mirror.sh +39 -0
  62. package/gitlab/job_tests.sh +0 -0
  63. package/package.json +1 -1
  64. package/scripts/github-export.mjs +150 -0
  65. package/scripts/post-build-docs.js +0 -0
  66. package/scripts/post-build.mjs +0 -0
  67. package/src/core/components/functional/fetch/fetch.md +0 -0
  68. package/src/core/components/functional/if/if.md +0 -0
  69. package/src/core/components/functional/list/list.demo.ts +0 -0
  70. package/src/core/components/functional/list/list.md +0 -0
  71. package/src/core/components/functional/router/router.md +0 -0
  72. package/src/core/components/functional/router/router.ts +0 -0
  73. package/src/core/components/functional/sdui/sdui.md +0 -0
  74. package/src/core/components/functional/states/states.md +0 -0
  75. package/src/core/components/functional/submit/submit.md +0 -0
  76. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  77. package/src/core/components/ui/_css/size.ts +0 -0
  78. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  79. package/src/core/components/ui/captcha/captcha.md +0 -0
  80. package/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/src/core/components/ui/form/select/select.md +0 -0
  82. package/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/src/core/components/ui/loader/loader.md +0 -0
  84. package/src/core/components/ui/menu/menu.md +0 -0
  85. package/src/core/components/ui/modal/modal.md +0 -0
  86. package/src/core/components/ui/table/table-caption.ts +0 -0
  87. package/src/core/components/ui/table/table.md +0 -0
  88. package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
  89. package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
  90. package/src/core/mixins/Subscriber.ts +0 -0
  91. package/src/core/utils/AncestorAttributeObserver.ts +183 -70
  92. package/src/core/utils/DataBindObserver.ts +0 -0
  93. package/src/core/utils/Objects.ts +0 -0
  94. package/src/core/utils/route.ts +0 -0
  95. package/src/css.d.ts +19 -0
  96. package/src/docs/_core-concept/subscriber.md +0 -0
  97. package/src/docs/_decorators/ancestor-attribute.md +3 -2
  98. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  99. package/src/docs/_getting-started/pubsub.md +0 -0
  100. package/src/docs/_getting-started/start.md +0 -0
  101. package/src/docs/example/users.ts +0 -0
  102. package/src/docs/search/page.ts +0 -0
  103. package/src/tsconfig.declarations.json +22 -0
  104. package/src/tsconfig.emit.json +23 -0
  105. package/src/tsconfig.tsbuildinfo +1 -1
  106. package/docs/assets/index--GpD7R7a.css +0 -1
package/docs/src/core/components/ui/alert/alert.md CHANGED
@@ -1,9 +1,5 @@
1
1
  # Alert
2
2
 
3
- Inline message in the page: title (`label`), body (`text` or default slot), icon from `status`. For HTML or actions, use the slot instead of `label` / `text` (plain text only).
4
-
5
- Use **`status`**: `default`, `info`, `success`, `warning`, `error`.
6
-
7
3
  <sonic-code>
8
4
  <template>
9
5
  <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
@@ -12,52 +8,15 @@ Use **`status`**: `default`, `info`, `success`, `warning`, `error`.
12
8
 
13
9
  ## Status
14
10
 
15
- Color and icon follow `status`. With no `status`, behavior is `default`.
16
-
17
11
  <sonic-code>
18
12
  <template>
19
- <div class="grid gap-4">
20
- <sonic-alert label="Default">This address is already in use.</sonic-alert>
21
- <sonic-alert status="success" label="Success">This address is already in use.</sonic-alert>
22
- <sonic-alert status="error" label="Error">This address is already in use.</sonic-alert>
23
- <sonic-alert status="warning" label="Warning">This address is already in use.</sonic-alert>
24
- <sonic-alert status="info" label="Info">This address is already in use.</sonic-alert>
25
- </div>
26
- </template>
27
- </sonic-code>
28
-
29
- ## Accessibility (`announce`)
30
-
31
- By default, an alert already in the DOM is **not** announced (no `role` / `aria-live`). Set **`announce`** when the message appears **after** user action (API response, validation, etc.): screen readers get `role="alert"` for `error`, otherwise `role="status"` and `aria-live="polite"`.
32
-
33
- `sonic-alert-messages` sets `announce` on every rendered alert.
34
-
35
- <sonic-code>
36
- <template>
37
- <sonic-alert announce status="success" label="Saved" text="Your changes were saved."></sonic-alert>
38
- </template>
39
- </sonic-code>
40
-
41
- ## Content and icon
42
-
43
- `label` and `text` accept plain text only. The default slot is rendered after `text`. Use the **`icon`** slot to replace the default `sonic-icon`. **`noIcon`** hides the icon.
44
-
45
- <sonic-code>
46
- <template>
47
- <sonic-alert status="info" noIcon label="No icon" text="Informational message."></sonic-alert>
48
- </template>
49
- </sonic-code>
50
-
51
- ## Custom icon slot
52
-
53
- Project any markup into **`slot="icon"`** (emoji, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
54
-
55
- <sonic-code>
56
- <template>
57
- <sonic-alert status="success" label="Achievement unlocked" background>
58
- <span slot="icon" aria-hidden="true" class="text-lg leading-none">🎉</span>
59
- You unlocked a new badge.
60
- </sonic-alert>
13
+ <div class="grid gap-4">
14
+ <sonic-alert label="Default"> This address is already in use. </sonic-alert>
15
+ <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
16
+ <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
17
+ <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
18
+ <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
19
+ </div>
61
20
  </template>
62
21
  </sonic-code>
63
22
 
@@ -65,113 +24,98 @@ Project any markup into **`slot="icon"`** (emoji, image, custom component). Keep
65
24
 
66
25
  <sonic-code>
67
26
  <template>
68
- <div class="grid gap-4">
69
- <sonic-alert status="error" label="Email error" size="2xs">
70
- This address is already in use. Lorem ipsum dolor sit amet.
71
- </sonic-alert>
72
- <sonic-alert status="error" label="Email error" size="xs">
73
- This address is already in use. Lorem ipsum dolor sit amet.
74
- </sonic-alert>
75
- <sonic-alert status="error" label="Email error" size="sm">
76
- This address is already in use. Lorem ipsum dolor sit amet.
77
- </sonic-alert>
78
- <sonic-alert status="error" label="Email error">
79
- This address is already in use. Lorem ipsum dolor sit amet.
80
- </sonic-alert>
81
- <sonic-alert status="error" label="Email error" size="lg">
82
- This address is already in use. Lorem ipsum dolor sit amet.
83
- </sonic-alert>
84
- <sonic-alert status="error" label="Email error" size="xl">
85
- This address is already in use. Lorem ipsum dolor sit amet.
86
- </sonic-alert>
87
- <sonic-alert status="error" label="Email error" size="2xl">
88
- This address is already in use. Lorem ipsum dolor sit amet.
89
- </sonic-alert>
90
- </div>
27
+ <div class="grid gap-4">
28
+ <sonic-alert status="error" label="Email error" size="2xs">
29
+ This address is already in use. Lorem ipsum dolor sit amet.
30
+ </sonic-alert>
31
+ <sonic-alert status="error" label="Email error" size="xs">
32
+ This address is already in use. Lorem ipsum dolor sit amet.
33
+ </sonic-alert>
34
+ <sonic-alert status="error" label="Email error" size="sm">
35
+ This address is already in use. Lorem ipsum dolor sit amet.
36
+ </sonic-alert>
37
+ <sonic-alert status="error" label="Email error">
38
+ This address is already in use. Lorem ipsum dolor sit amet.
39
+ </sonic-alert>
40
+ <sonic-alert status="error" label="Email error" size="lg">
41
+ This address is already in use. Lorem ipsum dolor sit amet.
42
+ </sonic-alert>
43
+ <sonic-alert status="error" label="Email error" size="xl">
44
+ This address is already in use. Lorem ipsum dolor sit amet.
45
+ </sonic-alert>
46
+ <sonic-alert status="error" label="Email error" size="2xl">
47
+ This address is already in use. Lorem ipsum dolor sit amet.
48
+ </sonic-alert>
49
+ </div>
91
50
  </template>
92
51
  </sonic-code>
93
52
 
94
53
  ## Alert with link
95
54
 
96
- Rich content in the slot (buttons, links).
97
-
98
55
  <sonic-code>
99
56
  <template>
100
- <sonic-alert status="info" label="New messages !">
101
- You have 2 unread messages<br />
102
- <div class="flex gap-2 mt-1">
103
- <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
104
- <sonic-button variant="ghost" type="info" size="xs">Dismiss</sonic-button>
105
- </div>
106
- </sonic-alert>
57
+ <sonic-alert status="info" label="New messages !">
58
+ You have 2 unread messages<br />
59
+ <div class="flex gap-2 mt-1">
60
+ <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
61
+ <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
62
+ </div>
63
+ </sonic-alert>
107
64
  </template>
108
65
  </sonic-code>
109
66
 
110
67
  ## Background
111
68
 
112
- Tinted background from the `status` color (`color-mix` on `currentColor`).
113
-
114
69
  <sonic-code>
115
70
  <template>
116
- <div class="grid gap-4">
117
- <sonic-alert background label="Lorem ipsum dolor">This address is already in use.</sonic-alert>
118
- <sonic-alert status="success" background label="Lorem ipsum dolor">
119
- This address is already in use.
120
- </sonic-alert>
121
- <sonic-alert status="error" background label="Lorem ipsum dolor">
122
- This address is already in use.
123
- </sonic-alert>
124
- <sonic-alert status="warning" background label="Lorem ipsum dolor">
125
- This address is already in use.
126
- </sonic-alert>
127
- <sonic-alert status="info" background label="Lorem ipsum dolor">
128
- This address is already in use.
129
- </sonic-alert>
130
- </div>
71
+ <div class="grid gap-4">
72
+ <sonic-alert background label="Lorem ipsum dolor">
73
+ This address is already in use.
74
+ </sonic-alert>
75
+ <sonic-alert status="success" background label="Lorem ipsum dolor">
76
+ This address is already in use.
77
+ </sonic-alert>
78
+ <sonic-alert status="error" background label="Lorem ipsum dolor">
79
+ This address is already in use.
80
+ </sonic-alert>
81
+ <sonic-alert status="warning" background label="Lorem ipsum dolor">
82
+ This address is already in use.
83
+ </sonic-alert>
84
+ <sonic-alert status="info" background label="Lorem ipsum dolor">
85
+ This address is already in use.
86
+ </sonic-alert>
87
+ </div>
131
88
  </template>
132
89
  </sonic-code>
133
90
 
134
91
  ## Dismissible
135
92
 
136
- `dismissible` removes the alert from the DOM when the close control is clicked (i18n aria label). **`dismissible`** and **`background`** are independent: without `background`, close sits at the end of the row; with `background`, top-right.
137
-
138
93
  <sonic-code>
139
94
  <template>
140
- <sonic-alert status="info" class="mb-3" dismissible label="This address is already in use.">
141
- </sonic-alert>
142
- <sonic-alert class="mb-3" dismissible background label="Lorem ipsum dolor">
143
- This address is already in use.
144
- </sonic-alert>
145
- <sonic-alert status="success" class="mb-3" dismissible background label="Lorem ipsum dolor">
146
- This address is already in use.
147
- </sonic-alert>
148
- <sonic-alert status="error" class="mb-3" dismissible background label="Lorem ipsum dolor">
149
- This address is already in use.
150
- </sonic-alert>
151
- <sonic-alert status="warning" class="mb-3" dismissible background label="Lorem ipsum dolor">
152
- This address is already in use.
153
- </sonic-alert>
154
- <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
155
- This address is already in use.
156
- </sonic-alert>
95
+ <sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
96
+ This address is already in use.
97
+ </sonic-alert>
98
+ <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
99
+ This address is already in use.
100
+ </sonic-alert>
101
+ <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
102
+ This address is already in use.
103
+ </sonic-alert>
104
+ <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
105
+ This address is already in use.
106
+ </sonic-alert>
107
+ <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
108
+ This address is already in use.
109
+ </sonic-alert>
157
110
  </template>
158
111
  </sonic-code>
159
112
 
160
113
  ## Dismiss forever
161
114
 
162
- With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-alert-dismissed`). A stable **`id`** on the element is **required**; without `id`, a warning is logged and nothing is persisted.
163
-
164
115
  <sonic-code>
165
116
  <template>
166
- <sonic-alert
167
- class="mb-3"
168
- dismissible
169
- background
170
- dismissForever
171
- label="Lorem ipsum dolor"
172
- id="addressUniqueId"
173
- >
174
- This address is already in use.
175
- </sonic-alert>
117
+ <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
118
+ This address is already in use.
119
+ </sonic-alert>
176
120
  </template>
177
121
  </sonic-code>
package/docs/src/core/components/ui/badge/badge.md CHANGED
@@ -1,175 +1,127 @@
1
1
  # Badge
2
2
 
3
- A **non-interactive** pill for labels, counts, or highlights (counter, status, category). The API mirrors `sonic-button` (`type`, `variant`, `size`) without focus or click states.
4
-
5
- Colors come from theme tokens (`--sc-primary`, `--sc-danger`, …) or the semantic `type` values below.
6
-
7
3
  ## Type
8
-
9
- `default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.
10
-
11
4
  <sonic-code>
12
5
  <template>
13
- <div class="flex flex-wrap gap-2">
14
- <sonic-badge>Default</sonic-badge>
15
- <sonic-badge type="primary">Primary</sonic-badge>
16
- <sonic-badge type="neutral">Neutral</sonic-badge>
17
- <sonic-badge type="warning">Warning</sonic-badge>
18
- <sonic-badge type="info">Info</sonic-badge>
19
- <sonic-badge type="success">Success</sonic-badge>
20
- <sonic-badge type="danger">Danger</sonic-badge>
21
- </div>
6
+ <sonic-badge>Default</sonic-badge>
7
+ <sonic-badge type="primary">Primary</sonic-badge>
8
+ <sonic-badge type="neutral">Neutral</sonic-badge>
9
+ <sonic-badge type="warning">Warning</sonic-badge>
10
+ <sonic-badge type="info">Info</sonic-badge>
11
+ <sonic-badge type="success">Success</sonic-badge>
12
+ <sonic-badge type="danger">Danger</sonic-badge>
13
+ <sonic-badge type="contrast">Contrast</sonic-badge>
22
14
  </template>
23
15
  </sonic-code>
24
16
 
25
- ## Variant
26
-
27
- `outline` — border and text in the `type` color. `ghost` — text only, no padding (except in forced-colors mode).
28
17
 
29
18
  ## Outline
30
-
31
19
  <sonic-code>
32
20
  <template>
33
- <div class="flex items-center flex-wrap gap-3">
34
- <sonic-badge variant="outline">Default</sonic-badge>
35
- <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
36
- <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
37
- <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
38
- <sonic-badge variant="outline" type="info">Info</sonic-badge>
39
- <sonic-badge variant="outline" type="success">Success</sonic-badge>
40
- <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
41
- </div>
21
+ <div class="flex items-center flex-wrap gap-3">
22
+ <sonic-badge variant="outline">Default</sonic-badge>
23
+ <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
24
+ <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
25
+ <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
26
+ <sonic-badge variant="outline" type="info">Info</sonic-badge>
27
+ <sonic-badge variant="outline" type="success">Success</sonic-badge>
28
+ <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
29
+ <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
30
+ </div>
42
31
  </template>
43
32
  </sonic-code>
44
33
 
45
34
  ## Ghost
46
-
47
35
  <sonic-code>
48
36
  <template>
49
37
  <div class="flex items-center flex-wrap gap-3">
50
- <sonic-badge variant="ghost">Default</sonic-badge>
51
- <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
52
- <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
53
- <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
54
- <sonic-badge variant="ghost" type="info">Info</sonic-badge>
55
- <sonic-badge variant="ghost" type="success">Success</sonic-badge>
56
- <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
57
- </div>
38
+ <sonic-badge variant="ghost">Default</sonic-badge>
39
+ <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
40
+ <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
41
+ <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
42
+ <sonic-badge variant="ghost" type="info">Info</sonic-badge>
43
+ <sonic-badge variant="ghost" type="success">Success</sonic-badge>
44
+ <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
45
+ <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
46
+ </div>
58
47
  </template>
59
48
  </sonic-code>
60
49
 
61
50
  ## Size
62
-
63
- Default size is `md` (omit the `size` attribute). Typography and padding follow `sonic-button`.
64
-
65
51
  <sonic-code>
66
52
  <template>
67
- <div class="flex flex-wrap items-center gap-2">
68
- <sonic-badge size="2xs">2Xs</sonic-badge>
69
- <sonic-badge size="xs">Xs</sonic-badge>
70
- <sonic-badge size="sm">Sm</sonic-badge>
71
- <sonic-badge>Md</sonic-badge>
72
- <sonic-badge size="lg">Lg</sonic-badge>
73
- <sonic-badge size="xl">Xl</sonic-badge>
74
- <sonic-badge size="2xl">2Xl</sonic-badge>
75
- </div>
53
+ <sonic-badge size="2xs">2Xs badge</sonic-badge>
54
+ <sonic-badge size="xs">Xs badge</sonic-badge>
55
+ <sonic-badge size="sm">Sm badge</sonic-badge>
56
+ <sonic-badge>Md badge</sonic-badge>
57
+ <sonic-badge size="lg">Lg badge</sonic-badge>
58
+ <sonic-badge size="xl">Xl badge</sonic-badge>
59
+ <sonic-badge size="2xl">2Xl badge</sonic-badge>
76
60
  </template>
77
61
  </sonic-code>
78
62
 
79
- ## Prefix and suffix slots
80
-
81
- Icons or short text before / after the main label.
82
-
83
- <sonic-code>
84
- <template>
85
- <sonic-badge type="info" size="sm">
86
- <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
87
- Info
88
- </sonic-badge>
89
- <sonic-badge type="success">
90
- Verified
91
- <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
92
- </sonic-badge>
93
- </template>
94
- </sonic-code>
95
63
 
96
64
  ## Empty badges
97
-
98
- Badge with no text (visual dot). `min-width` / `min-height` keep a readable shape.
99
-
100
65
  <sonic-code>
101
66
  <template>
102
- <div class="flex items-center flex-wrap gap-3">
103
- <sonic-badge type="danger" size="2xs"></sonic-badge>
104
- <sonic-badge type="danger" size="xs"></sonic-badge>
105
- <sonic-badge type="danger" size="sm"></sonic-badge>
106
- <sonic-badge type="danger"></sonic-badge>
107
- <sonic-badge type="danger" size="lg"></sonic-badge>
108
- <sonic-badge type="danger" size="xl"></sonic-badge>
109
- <sonic-badge type="danger" size="2xl"></sonic-badge>
110
- </div>
67
+ <div class="flex items-center flex-wrap gap-3">
68
+ <sonic-badge type="danger" size="2xs"></sonic-badge>
69
+ <sonic-badge type="danger" size="xs"></sonic-badge>
70
+ <sonic-badge type="danger" size="sm"></sonic-badge>
71
+ <sonic-badge type="danger"></sonic-badge>
72
+ <sonic-badge type="danger" size="lg"></sonic-badge>
73
+ <sonic-badge type="danger" size="xl"></sonic-badge>
74
+ <sonic-badge type="danger" size="2xl"></sonic-badge>
75
+ </div>
111
76
  </template>
112
77
  </sonic-code>
113
78
 
114
- ## Ellipsis
115
-
116
- With `ellipsis`, long labels truncate. The parent must constrain width (`max-width`, grid, etc.).
117
79
 
80
+ ## Ellipsis
118
81
  <sonic-code>
119
82
  <template>
120
- <div class="grid grid-cols-2 gap-4 max-w-xl">
121
- <sonic-badge ellipsis size="sm" variant="outline">
122
- <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
123
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
124
- </sonic-badge>
125
- <sonic-badge ellipsis size="sm">
126
- <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
127
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
128
- </sonic-badge>
83
+ <div class="grid grid-cols-3 gap-4" >
84
+ <sonic-badge ellipsis size="sm" variant="outline" >
85
+ <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>
86
+ <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>
129
87
  </div>
130
88
  </template>
131
89
  </sonic-code>
132
90
 
133
91
  ## Badge in button
134
-
135
- Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a button / icon.
136
-
137
92
  <sonic-code>
138
93
  <template>
139
- <div class="flex flex-wrap gap-4 items-center">
140
- <sonic-button type="default">
141
- Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
94
+ <div class="flex flex-wrap gap-4 items-center">
95
+ <sonic-button type="default">
96
+ Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
97
+ </sonic-button>
98
+ <div class="relative inline-block">
99
+ <sonic-button type="success" class="relative"> Mon compte </sonic-button>
100
+ <sonic-badge type="danger" size="xs" class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
101
+ >12</sonic-badge
102
+ >
103
+ </div>
104
+ <div class="relative inline-block">
105
+ <sonic-button type="neutral" shape="circle" variant="outline"
106
+ ><sonic-icon library="iconoir" name="user"></sonic-icon>
107
+ </sonic-button>
108
+ <sonic-badge
109
+ type="danger"
110
+ size="xs"
111
+ class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
112
+ >33</sonic-badge
113
+ >
114
+ </div>
115
+ <div class="relative inline-block">
116
+ <sonic-button type="neutral" shape="circle" variant="outline"
117
+ ><sonic-icon library="iconoir" name="user"></sonic-icon>
142
118
  </sonic-button>
143
- <div class="relative inline-block">
144
- <sonic-button type="success" class="relative">My account</sonic-button>
145
- <sonic-badge
146
- type="danger"
147
- size="xs"
148
- class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
149
- >12</sonic-badge
150
- >
151
- </div>
152
- <div class="relative inline-block">
153
- <sonic-button type="neutral" shape="circle" variant="outline">
154
- <sonic-icon library="iconoir" name="user"></sonic-icon>
155
- </sonic-button>
156
- <sonic-badge
157
- type="danger"
158
- size="xs"
159
- class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
160
- >33</sonic-badge
161
- >
162
- </div>
163
- <div class="relative inline-block">
164
- <sonic-button type="neutral" shape="circle" variant="outline">
165
- <sonic-icon library="iconoir" name="user"></sonic-icon>
166
- </sonic-button>
167
- <sonic-badge
168
- type="danger"
169
- size="xs"
170
- class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
171
- ></sonic-badge>
172
- </div>
119
+ <sonic-badge
120
+ type="danger"
121
+ size="xs"
122
+ class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
123
+ ></sonic-badge>
173
124
  </div>
125
+ </div>
174
126
  </template>
175
127
  </sonic-code>
package/docs/src/core/components/ui/button/button.md CHANGED
@@ -71,7 +71,6 @@ The length of the button depends on the size of its content
71
71
  <template>
72
72
  <sonic-button loading></sonic-button>
73
73
  <sonic-button loading>Loading button</sonic-button>
74
- <sonic-button loading><span slot="prefix">🚀</span>Loading with prefix<span slot="suffix">😂</span></sonic-button>
75
74
  </template>
76
75
  </sonic-code>
77
76
 
package/docs/src/core/components/ui/captcha/captcha.md CHANGED
File without changes