@supersoniks/concorde 5.0.5 → 5.1.1
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.
- package/.claude/launch.json +15 -0
- package/.claude/vite.http.config.mjs +7 -0
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +4103 -0
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +2556 -0
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +510 -0
- package/.taste-skill/notes.md +84 -0
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +1973 -0
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/.tmp-cem/custom-elements.json +13705 -0
- package/AUDIT.md +228 -0
- package/PLAN-AMELIORATION.md +220 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +196 -196
- package/concorde-core.es.js +3854 -3572
- package/custom-elements-manifest.config.mjs +14 -0
- package/dist/concorde-core.bundle.js +196 -196
- package/dist/concorde-core.es.js +3854 -3572
- package/dist/img/archive/concorde-001-2cv.webp +0 -0
- package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/dist/img/archive/credits.json +28 -0
- package/docs/assets/index-Bb-_LRyY.js +12280 -0
- package/docs/index.html +1 -1
- package/index.html +27 -63
- package/package.json +44 -3
- package/public/img/archive/concorde-001-2cv.webp +0 -0
- package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/public/img/archive/credits.json +28 -0
- package/scripts/generate-sdui-catalog.mjs +250 -0
- package/scripts/generate-sdui-catalog.spec.ts +91 -0
- package/scripts/pre-build.mjs +15 -0
- package/src/core/components/functional/fetch/fetch.md +2 -2
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
- package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
- package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
- package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
- package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
- package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
- package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
- package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
- package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
- package/src/core/components/functional/sdui/sdui.md +122 -0
- package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
- package/src/core/components/functional/sdui/sdui.ts +442 -34
- package/src/core/components/functional/sdui/types.ts +49 -0
- package/src/core/components/ui/modal/modal.ts +14 -11
- package/src/docs/_getting-started/components.md +5 -0
- package/src/docs/_getting-started/theming.md +2 -2
- package/src/docs/code.ts +88 -75
- package/src/docs/components/docs-demo-sources.ts +16 -8
- package/src/docs/components/docs-lit-demo.ts +19 -37
- package/src/docs/docs.ts +5 -0
- package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
- package/src/docs/example/docs-provider-keys.ts +12 -0
- package/src/docs/header/header.ts +233 -69
- package/src/docs/home/catalog.ts +44 -0
- package/src/docs/home/home.ts +513 -0
- package/src/docs/home/mach-stage.ts +389 -0
- package/src/docs/layout.ts +3 -1
- package/src/docs/navigation/components-index.ts +56 -0
- package/src/docs/navigation/navigation.ts +240 -232
- package/src/docs/navigation/pager.ts +67 -0
- package/src/docs/navigation/toc.ts +98 -0
- package/src/docs/search/docs-search.json +330 -20
- package/src/docs/search/markdown-renderer.ts +11 -3
- package/src/docs/shiki/index.ts +109 -0
- package/src/docs/tailwind/css/base/scrollbar.css +22 -0
- package/src/docs/tailwind/css/base/theme.css +96 -0
- package/src/docs/tailwind/css/base/typography.css +4 -0
- package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
- package/src/docs/tailwind/css/docs/content.css +32 -0
- package/src/docs/tailwind/css/docs/page.css +10 -0
- package/src/docs/tailwind/css/docs.css +9 -0
- package/src/docs/tailwind/css/home/hero.css +210 -0
- package/src/docs/tailwind/css/home/motion.css +84 -0
- package/src/docs/tailwind/css/home/sections.css +416 -0
- package/src/docs/tailwind/css/tailwind.css +7 -185
- package/src/tsconfig.json +113 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +8 -4
- package/docs/assets/index-wVZpLVYW.js +0 -12122
- package/docs/crawl/core/components/functional/date/date.html +0 -190
- package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
- package/docs/crawl/core/components/functional/if/if.html +0 -27
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
- package/docs/crawl/core/components/functional/list/list.html +0 -70
- package/docs/crawl/core/components/functional/mix/mix.html +0 -45
- package/docs/crawl/core/components/functional/queue/queue.html +0 -96
- package/docs/crawl/core/components/functional/router/router.html +0 -106
- package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
- package/docs/crawl/core/components/functional/states/states.html +0 -66
- package/docs/crawl/core/components/functional/submit/submit.html +0 -160
- package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
- package/docs/crawl/core/components/functional/value/value.html +0 -51
- package/docs/crawl/core/components/ui/alert/alert.html +0 -211
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
- package/docs/crawl/core/components/ui/badge/badge.html +0 -197
- package/docs/crawl/core/components/ui/button/button.html +0 -150
- package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
- package/docs/crawl/core/components/ui/card/card.html +0 -253
- package/docs/crawl/core/components/ui/divider/divider.html +0 -144
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
- package/docs/crawl/core/components/ui/form/input/input.html +0 -109
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
- package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
- package/docs/crawl/core/components/ui/form/select/select.html +0 -73
- package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
- package/docs/crawl/core/components/ui/group/group.html +0 -104
- package/docs/crawl/core/components/ui/icon/icon.html +0 -222
- package/docs/crawl/core/components/ui/image/image.html +0 -298
- package/docs/crawl/core/components/ui/link/link.html +0 -100
- package/docs/crawl/core/components/ui/loader/loader.html +0 -124
- package/docs/crawl/core/components/ui/menu/menu.html +0 -394
- package/docs/crawl/core/components/ui/modal/modal.html +0 -342
- package/docs/crawl/core/components/ui/pop/pop.html +0 -296
- package/docs/crawl/core/components/ui/progress/progress.html +0 -131
- package/docs/crawl/core/components/ui/table/table.html +0 -545
- package/docs/crawl/core/components/ui/theme/theme.html +0 -131
- package/docs/crawl/core/components/ui/toast/toast.html +0 -233
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
- package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
- package/docs/crawl/docs/_core-concept/overview.html +0 -66
- package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
- package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
- package/docs/crawl/docs/_decorators/bind.html +0 -141
- package/docs/crawl/docs/_decorators/get.html +0 -149
- package/docs/crawl/docs/_decorators/handle.html +0 -165
- package/docs/crawl/docs/_decorators/on-assign.html +0 -355
- package/docs/crawl/docs/_decorators/patch.html +0 -78
- package/docs/crawl/docs/_decorators/post.html +0 -139
- package/docs/crawl/docs/_decorators/publish.html +0 -61
- package/docs/crawl/docs/_decorators/put.html +0 -78
- package/docs/crawl/docs/_decorators/subscribe.html +0 -109
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
- package/docs/crawl/docs/_directives/sub.html +0 -93
- package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
- package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
- package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
- package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
- package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
- package/docs/crawl/docs/_getting-started/start.html +0 -76
- package/docs/crawl/docs/_getting-started/theming.html +0 -333
- package/docs/crawl/docs/_misc/api-configuration.html +0 -149
- package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
- package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
- package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
- package/docs/crawl/docs/_misc/endpoint.html +0 -50
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
- package/docs/crawl/docs/_misc/html-integration.html +0 -48
- package/docs/crawl/hubs/decorators.html +0 -547
- package/docs/crawl/hubs/form-components.html +0 -381
- package/docs/crawl/hubs/remote-data.html +0 -452
- package/docs/crawl/index.html +0 -102
- package/docs/llms-full.txt +0 -7008
- package/docs/llms.txt +0 -97
- package/docs/sitemap.xml +0 -240
- package/docs/src/core/components/functional/date/date.md +0 -290
- package/docs/src/core/components/functional/fetch/fetch.md +0 -125
- package/docs/src/core/components/functional/if/if.md +0 -9
- package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
- package/docs/src/core/components/functional/list/list.md +0 -65
- package/docs/src/core/components/functional/mix/mix.md +0 -41
- package/docs/src/core/components/functional/queue/queue.md +0 -72
- package/docs/src/core/components/functional/router/router.md +0 -94
- package/docs/src/core/components/functional/sdui/default-library.json +0 -108
- package/docs/src/core/components/functional/sdui/example.json +0 -99
- package/docs/src/core/components/functional/sdui/sdui.md +0 -356
- package/docs/src/core/components/functional/states/states.md +0 -87
- package/docs/src/core/components/functional/submit/submit.md +0 -114
- package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/src/core/components/functional/value/value.md +0 -35
- package/docs/src/core/components/ui/alert/alert.md +0 -196
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/src/core/components/ui/badge/badge.md +0 -188
- package/docs/src/core/components/ui/button/button.md +0 -183
- package/docs/src/core/components/ui/captcha/captcha.md +0 -71
- package/docs/src/core/components/ui/card/card.md +0 -215
- package/docs/src/core/components/ui/divider/divider.md +0 -129
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
- package/docs/src/core/components/ui/form/input/input.md +0 -142
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/docs/src/core/components/ui/form/radio/radio.md +0 -57
- package/docs/src/core/components/ui/form/select/select.md +0 -71
- package/docs/src/core/components/ui/form/switch/switch.md +0 -57
- package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
- package/docs/src/core/components/ui/group/group.md +0 -75
- package/docs/src/core/components/ui/icon/icon.md +0 -214
- package/docs/src/core/components/ui/icon/icons.json +0 -1
- package/docs/src/core/components/ui/image/image.md +0 -233
- package/docs/src/core/components/ui/link/link.md +0 -81
- package/docs/src/core/components/ui/loader/loader.md +0 -112
- package/docs/src/core/components/ui/menu/menu.md +0 -370
- package/docs/src/core/components/ui/modal/modal.md +0 -235
- package/docs/src/core/components/ui/pop/pop.md +0 -294
- package/docs/src/core/components/ui/progress/progress.md +0 -109
- package/docs/src/core/components/ui/table/table.md +0 -431
- package/docs/src/core/components/ui/theme/theme.md +0 -122
- package/docs/src/core/components/ui/toast/toast.md +0 -216
- package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
- package/docs/src/docs/_core-concept/dataFlow.md +0 -88
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -75
- package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
- package/docs/src/docs/_decorators/bind.md +0 -167
- package/docs/src/docs/_decorators/get.md +0 -162
- package/docs/src/docs/_decorators/handle.md +0 -175
- package/docs/src/docs/_decorators/on-assign.md +0 -390
- package/docs/src/docs/_decorators/patch.md +0 -70
- package/docs/src/docs/_decorators/post.md +0 -146
- package/docs/src/docs/_decorators/publish.md +0 -55
- package/docs/src/docs/_decorators/put.md +0 -70
- package/docs/src/docs/_decorators/subscribe.md +0 -100
- package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/docs/src/docs/_directives/sub.md +0 -91
- package/docs/src/docs/_getting-started/ai-agents.md +0 -76
- package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
- package/docs/src/docs/_getting-started/create-a-component.md +0 -139
- package/docs/src/docs/_getting-started/my-first-component.md +0 -236
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/docs/src/docs/_getting-started/pubsub.md +0 -37
- package/docs/src/docs/_getting-started/start.md +0 -47
- package/docs/src/docs/_getting-started/theming.md +0 -253
- package/docs/src/docs/_misc/api-configuration.md +0 -81
- package/docs/src/docs/_misc/dataProviderKey.md +0 -168
- package/docs/src/docs/_misc/docs-mock-api.md +0 -63
- package/docs/src/docs/_misc/dynamic-path.md +0 -71
- package/docs/src/docs/_misc/endpoint.md +0 -45
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/docs/src/docs/_misc/html-integration.md +0 -15
- package/docs/src/docs/search/docs-search.json +0 -12242
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -1242
- package/src/docs/prism/index.ts +0 -6
- package/src/docs/prism/prism.css +0 -158
- package/src/docs/prism/prism.js +0 -1022
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html" data-doc-id="core/components/ui/alert-messages/alert-messages">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Alert messages — Concorde</title>
|
|
7
|
-
<meta name="description" content="sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type="public", announce, dataProvider, type">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/alert-messages/alert-messages">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/alert-messages/alert-messages.md/alert-messages" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert messages</strong>. sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type="public", announce, dataProvider, type. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
|
|
19
|
-
<h1 id="alert-messages">Alert messages</h1>
|
|
20
|
-
<p><strong><code>sonic-alert-messages</code></strong> renders a vertical stack of <strong><code>sonic-alert</code></strong> items from a <strong><code>messages</code></strong> array on a linked <strong>data provider</strong> (typical pattern: <strong><code>submitResultDataProvider</code></strong> after a form submit). Only entries with <strong><code>type="public"</code></strong> are shown. Each alert gets <strong><code>announce</code></strong> so screen readers pick up feedback after the request.</p>
|
|
21
|
-
<h2 id="with-submit-result">With submit result</h2>
|
|
22
|
-
<p>Bind <strong><code>dataProvider</code></strong> to the same publisher as <strong><code>submitResultDataProvider</code></strong>. API <strong><code>messages</code></strong> entries need <strong><code>type</code></strong>: <strong><code>public</code></strong>, plus <strong><code>content</code></strong> and optional <strong><code>status</code></strong> (<code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code>).</p>
|
|
23
|
-
<pre><code><sonic-scope
|
|
24
|
-
serviceURL="/docs-mock-api"
|
|
25
|
-
formDataProvider="submit-example"
|
|
26
|
-
submitResultDataProvider="submit-example-result"
|
|
27
|
-
>
|
|
28
|
-
<sonic-alert-messages dataProvider="submit-example-result" background class="mb-4"></sonic-alert-messages>
|
|
29
|
-
<div class="grid gap-4 max-w-md">
|
|
30
|
-
<sonic-input name="email" type="email" label="Email" value=""></sonic-input>
|
|
31
|
-
<sonic-input name="password" type="password" label="Password" value=""></sonic-input>
|
|
32
|
-
<sonic-submit endPoint="api/register" onClick>
|
|
33
|
-
<sonic-button type="primary">Submit (empty fields → error messages)</sonic-button>
|
|
34
|
-
</sonic-submit>
|
|
35
|
-
</div>
|
|
36
|
-
</sonic-scope>
|
|
37
|
-
</code></pre>
|
|
38
|
-
<h2 id="shared-alert-props">Shared alert props</h2>
|
|
39
|
-
<p><strong><code>size</code></strong> · <strong><code>background</code></strong> and <strong><code>noIcon</code></strong> apply to every rendered <strong><code>sonic-alert</code></strong> in the list.</p>
|
|
40
|
-
<pre><code><sonic-button
|
|
41
|
-
size="sm"
|
|
42
|
-
variant="outline"
|
|
43
|
-
class="mb-3"
|
|
44
|
-
onclick="SonicPublisherManager.get('submit-example-result').set({ messages: [{ type: 'public', content: 'Compact inline feedback without icons.', status: 'info' }] })"
|
|
45
|
-
>
|
|
46
|
-
Load sample messages
|
|
47
|
-
</sonic-button>
|
|
48
|
-
<sonic-alert-messages
|
|
49
|
-
dataProvider="submit-example-result"
|
|
50
|
-
size="sm"
|
|
51
|
-
background
|
|
52
|
-
noIcon
|
|
53
|
-
></sonic-alert-messages>
|
|
54
|
-
</code></pre>
|
|
55
|
-
<h2 id="message-shape">Message shape</h2>
|
|
56
|
-
<p>Example JSON on the result publisher (or API response merged into it):</p>
|
|
57
|
-
<pre><code class="language-typescript">{
|
|
58
|
-
"messages": [
|
|
59
|
-
{
|
|
60
|
-
"type": "public",
|
|
61
|
-
"content": "The product has been added to your cart",
|
|
62
|
-
"status": "success"
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
}
|
|
66
|
-
</code></pre>
|
|
67
|
-
<h2 id="api-reference">API reference</h2>
|
|
68
|
-
<table>
|
|
69
|
-
<thead>
|
|
70
|
-
<tr>
|
|
71
|
-
<th>Attribute</th>
|
|
72
|
-
<th>Values</th>
|
|
73
|
-
<th>Description</th>
|
|
74
|
-
</tr>
|
|
75
|
-
</thead>
|
|
76
|
-
<tbody><tr>
|
|
77
|
-
<td><code>dataProvider</code></td>
|
|
78
|
-
<td>publisher id</td>
|
|
79
|
-
<td>Source object; <strong><code>messages</code></strong> array is auto-filled via <strong>Subscriber</strong></td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td><code>size</code></td>
|
|
83
|
-
<td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
|
|
84
|
-
<td>Passed to each <strong><code>sonic-alert</code></strong></td>
|
|
85
|
-
</tr>
|
|
86
|
-
<tr>
|
|
87
|
-
<td><code>background</code></td>
|
|
88
|
-
<td>boolean</td>
|
|
89
|
-
<td>Tinted background on each alert</td>
|
|
90
|
-
</tr>
|
|
91
|
-
<tr>
|
|
92
|
-
<td><code>noIcon</code></td>
|
|
93
|
-
<td>boolean</td>
|
|
94
|
-
<td>Hides icons on each alert</td>
|
|
95
|
-
</tr>
|
|
96
|
-
<tr>
|
|
97
|
-
<td><code>messages</code></td>
|
|
98
|
-
<td><code>Message[]</code></td>
|
|
99
|
-
<td>Usually set by the publisher; each item uses <strong><code>content</code></strong> as alert <strong><code>text</code></strong></td>
|
|
100
|
-
</tr>
|
|
101
|
-
</tbody></table>
|
|
102
|
-
<table>
|
|
103
|
-
<thead>
|
|
104
|
-
<tr>
|
|
105
|
-
<th>Message field</th>
|
|
106
|
-
<th>Values</th>
|
|
107
|
-
<th>Description</th>
|
|
108
|
-
</tr>
|
|
109
|
-
</thead>
|
|
110
|
-
<tbody><tr>
|
|
111
|
-
<td><code>type</code></td>
|
|
112
|
-
<td><code>public</code></td>
|
|
113
|
-
<td>Required for the message to render</td>
|
|
114
|
-
</tr>
|
|
115
|
-
<tr>
|
|
116
|
-
<td><code>content</code></td>
|
|
117
|
-
<td>string</td>
|
|
118
|
-
<td>Alert body (<strong><code>text</code></strong> on <strong><code>sonic-alert</code></strong>)</td>
|
|
119
|
-
</tr>
|
|
120
|
-
<tr>
|
|
121
|
-
<td><code>status</code></td>
|
|
122
|
-
<td><code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code></td>
|
|
123
|
-
<td>Alert <strong><code>status</code></strong>; defaults to <strong><code>default</code></strong> when omitted</td>
|
|
124
|
-
</tr>
|
|
125
|
-
</tbody></table>
|
|
126
|
-
<p>No slots — alerts are generated from <strong><code>messages</code></strong>.</p>
|
|
127
|
-
|
|
128
|
-
</article>
|
|
129
|
-
</main>
|
|
130
|
-
</body>
|
|
131
|
-
</html>
|
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html" data-doc-id="core/components/ui/badge/badge">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Badge — Concorde</title>
|
|
7
|
-
<meta name="description" content="Badges are compact, non-interactive labels for status, counts, or categories. They mirror sonic-button styling (type, variant, size) without focus rings or click handling—use a button when the control">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, default, base-100, neutral, base-content, outline">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/badge/badge">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/badge/badge.md/badge" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Badge</strong>. Badges are compact, non-interactive labels for status, counts, or categories. They mirror sonic-button styling (type, variant, size) without focus rings or click handling—use a button when the control <span>Doc ID: <code>core/components/ui/badge/badge</code>. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, default, base-100, neutral, base-content, outline. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html</a>.</span></p>
|
|
19
|
-
<h1 id="badge">Badge</h1>
|
|
20
|
-
<p>Badges are <strong>compact, non-interactive</strong> labels for status, counts, or categories. They mirror <strong><code>sonic-button</code></strong> styling (<code>type</code>, <code>variant</code>, <code>size</code>) without focus rings or click handling—use a button when the control should be actionable.</p>
|
|
21
|
-
<h2 id="type">Type</h2>
|
|
22
|
-
<p><code>default</code> — subtle background (<code>base-100</code>). <code>neutral</code> — dark fill (<code>base-content</code>) with light text, useful on light backgrounds.</p>
|
|
23
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
24
|
-
<sonic-badge>Default</sonic-badge>
|
|
25
|
-
<sonic-badge type="primary">Primary</sonic-badge>
|
|
26
|
-
<sonic-badge type="neutral">Neutral</sonic-badge>
|
|
27
|
-
<sonic-badge type="warning">Warning</sonic-badge>
|
|
28
|
-
<sonic-badge type="info">Info</sonic-badge>
|
|
29
|
-
<sonic-badge type="success">Success</sonic-badge>
|
|
30
|
-
<sonic-badge type="danger">Danger</sonic-badge>
|
|
31
|
-
</div>
|
|
32
|
-
</code></pre>
|
|
33
|
-
<h2 id="variant">Variant</h2>
|
|
34
|
-
<p>Default <strong><code>variant</code></strong> is filled. <strong><code>outline</code></strong> — border and text in the <code>type</code> color. <strong><code>ghost</code></strong> — text only, no padding (except in forced-colors mode).</p>
|
|
35
|
-
<h3 id="outline">Outline</h3>
|
|
36
|
-
<pre><code><div class="flex items-center flex-wrap gap-3">
|
|
37
|
-
<sonic-badge variant="outline">Default</sonic-badge>
|
|
38
|
-
<sonic-badge variant="outline" type="primary">Primary</sonic-badge>
|
|
39
|
-
<sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
|
|
40
|
-
<sonic-badge variant="outline" type="warning">Warning</sonic-badge>
|
|
41
|
-
<sonic-badge variant="outline" type="info">Info</sonic-badge>
|
|
42
|
-
<sonic-badge variant="outline" type="success">Success</sonic-badge>
|
|
43
|
-
<sonic-badge variant="outline" type="danger">Danger</sonic-badge>
|
|
44
|
-
</div>
|
|
45
|
-
</code></pre>
|
|
46
|
-
<h3 id="ghost">Ghost</h3>
|
|
47
|
-
<pre><code><div class="flex items-center flex-wrap gap-3">
|
|
48
|
-
<sonic-badge variant="ghost">Default</sonic-badge>
|
|
49
|
-
<sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
|
|
50
|
-
<sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
|
|
51
|
-
<sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
|
|
52
|
-
<sonic-badge variant="ghost" type="info">Info</sonic-badge>
|
|
53
|
-
<sonic-badge variant="ghost" type="success">Success</sonic-badge>
|
|
54
|
-
<sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
|
|
55
|
-
</div>
|
|
56
|
-
</code></pre>
|
|
57
|
-
<h2 id="size">Size</h2>
|
|
58
|
-
<p>Default size is <code>md</code> (omit the <code>size</code> attribute). Typography and padding follow <code>sonic-button</code>.</p>
|
|
59
|
-
<pre><code><div class="flex flex-wrap items-center gap-2">
|
|
60
|
-
<sonic-badge size="2xs">2Xs</sonic-badge>
|
|
61
|
-
<sonic-badge size="xs">Xs</sonic-badge>
|
|
62
|
-
<sonic-badge size="sm">Sm</sonic-badge>
|
|
63
|
-
<sonic-badge>Md</sonic-badge>
|
|
64
|
-
<sonic-badge size="lg">Lg</sonic-badge>
|
|
65
|
-
<sonic-badge size="xl">Xl</sonic-badge>
|
|
66
|
-
<sonic-badge size="2xl">2Xl</sonic-badge>
|
|
67
|
-
</div>
|
|
68
|
-
</code></pre>
|
|
69
|
-
<h2 id="prefix-and-suffix-slots">Prefix and suffix slots</h2>
|
|
70
|
-
<p>Icons or short text before / after the main label.</p>
|
|
71
|
-
<pre><code><sonic-badge type="info" size="sm">
|
|
72
|
-
<sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
|
|
73
|
-
Info
|
|
74
|
-
</sonic-badge>
|
|
75
|
-
<sonic-badge type="success">
|
|
76
|
-
Verified
|
|
77
|
-
<sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
|
|
78
|
-
</sonic-badge>
|
|
79
|
-
</code></pre>
|
|
80
|
-
<h2 id="empty-badges">Empty badges</h2>
|
|
81
|
-
<p>Badge with no text (visual dot). <code>min-width</code> / <code>min-height</code> keep a readable shape.</p>
|
|
82
|
-
<pre><code><div class="flex items-center flex-wrap gap-3">
|
|
83
|
-
<sonic-badge type="danger" size="2xs"></sonic-badge>
|
|
84
|
-
<sonic-badge type="danger" size="xs"></sonic-badge>
|
|
85
|
-
<sonic-badge type="danger" size="sm"></sonic-badge>
|
|
86
|
-
<sonic-badge type="danger"></sonic-badge>
|
|
87
|
-
<sonic-badge type="danger" size="lg"></sonic-badge>
|
|
88
|
-
<sonic-badge type="danger" size="xl"></sonic-badge>
|
|
89
|
-
<sonic-badge type="danger" size="2xl"></sonic-badge>
|
|
90
|
-
</div>
|
|
91
|
-
</code></pre>
|
|
92
|
-
<h2 id="ellipsis">Ellipsis</h2>
|
|
93
|
-
<p>With <code>ellipsis</code>, long labels truncate. The parent must constrain width (<code>max-width</code>, grid, etc.).</p>
|
|
94
|
-
<pre><code><div class="grid grid-cols-2 gap-4 max-w-xl">
|
|
95
|
-
<sonic-badge ellipsis size="sm" variant="outline">
|
|
96
|
-
<sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
|
|
97
|
-
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
|
|
98
|
-
</sonic-badge>
|
|
99
|
-
<sonic-badge ellipsis size="sm">
|
|
100
|
-
<sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
|
|
101
|
-
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
|
|
102
|
-
</sonic-badge>
|
|
103
|
-
</div>
|
|
104
|
-
</code></pre>
|
|
105
|
-
<h2 id="badge-in-button">Badge in button</h2>
|
|
106
|
-
<p>Count inside a button (<code>slot="suffix"</code>) or a badge absolutely positioned on a button / icon.</p>
|
|
107
|
-
<pre><code><div class="flex flex-wrap gap-4 items-center">
|
|
108
|
-
<sonic-button type="default">
|
|
109
|
-
Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
|
|
110
|
-
</sonic-button>
|
|
111
|
-
<div class="relative inline-block">
|
|
112
|
-
<sonic-button type="success" class="relative">My account</sonic-button>
|
|
113
|
-
<sonic-badge
|
|
114
|
-
type="danger"
|
|
115
|
-
size="xs"
|
|
116
|
-
class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
|
|
117
|
-
>12</sonic-badge
|
|
118
|
-
>
|
|
119
|
-
</div>
|
|
120
|
-
<div class="relative inline-block">
|
|
121
|
-
<sonic-button type="neutral" shape="circle" variant="outline">
|
|
122
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
123
|
-
</sonic-button>
|
|
124
|
-
<sonic-badge
|
|
125
|
-
type="danger"
|
|
126
|
-
size="xs"
|
|
127
|
-
class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
|
|
128
|
-
>33</sonic-badge
|
|
129
|
-
>
|
|
130
|
-
</div>
|
|
131
|
-
<div class="relative inline-block">
|
|
132
|
-
<sonic-button type="neutral" shape="circle" variant="outline">
|
|
133
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
134
|
-
</sonic-button>
|
|
135
|
-
<sonic-badge
|
|
136
|
-
type="danger"
|
|
137
|
-
size="xs"
|
|
138
|
-
class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
|
|
139
|
-
></sonic-badge>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
</code></pre>
|
|
143
|
-
<h2 id="api-reference">API reference</h2>
|
|
144
|
-
<table>
|
|
145
|
-
<thead>
|
|
146
|
-
<tr>
|
|
147
|
-
<th>Attribute</th>
|
|
148
|
-
<th>Values</th>
|
|
149
|
-
<th>Description</th>
|
|
150
|
-
</tr>
|
|
151
|
-
</thead>
|
|
152
|
-
<tbody><tr>
|
|
153
|
-
<td><code>type</code></td>
|
|
154
|
-
<td><code>default</code> (default) · <code>primary</code> · <code>neutral</code> · <code>warning</code> · <code>info</code> · <code>success</code> · <code>danger</code></td>
|
|
155
|
-
<td>Semantic color (<code>--sc-*</code> tokens)</td>
|
|
156
|
-
</tr>
|
|
157
|
-
<tr>
|
|
158
|
-
<td><code>variant</code></td>
|
|
159
|
-
<td><code>default</code> (default) · <code>outline</code> · <code>ghost</code></td>
|
|
160
|
-
<td>Filled, bordered, or text-only</td>
|
|
161
|
-
</tr>
|
|
162
|
-
<tr>
|
|
163
|
-
<td><code>size</code></td>
|
|
164
|
-
<td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
|
|
165
|
-
<td>Typography and padding (aligned with <strong><code>sonic-button</code></strong>)</td>
|
|
166
|
-
</tr>
|
|
167
|
-
<tr>
|
|
168
|
-
<td><code>ellipsis</code></td>
|
|
169
|
-
<td>boolean</td>
|
|
170
|
-
<td>Single-line truncation; parent must constrain width</td>
|
|
171
|
-
</tr>
|
|
172
|
-
</tbody></table>
|
|
173
|
-
<table>
|
|
174
|
-
<thead>
|
|
175
|
-
<tr>
|
|
176
|
-
<th>Slot</th>
|
|
177
|
-
<th>Description</th>
|
|
178
|
-
</tr>
|
|
179
|
-
</thead>
|
|
180
|
-
<tbody><tr>
|
|
181
|
-
<td><em>(default)</em></td>
|
|
182
|
-
<td>Main label</td>
|
|
183
|
-
</tr>
|
|
184
|
-
<tr>
|
|
185
|
-
<td><code>prefix</code></td>
|
|
186
|
-
<td>Icon or short text before the label</td>
|
|
187
|
-
</tr>
|
|
188
|
-
<tr>
|
|
189
|
-
<td><code>suffix</code></td>
|
|
190
|
-
<td>Icon or short text after the label</td>
|
|
191
|
-
</tr>
|
|
192
|
-
</tbody></table>
|
|
193
|
-
|
|
194
|
-
</article>
|
|
195
|
-
</main>
|
|
196
|
-
</body>
|
|
197
|
-
</html>
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html" data-doc-id="core/components/ui/button/button">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Button — Concorde</title>
|
|
7
|
-
<meta name="description" content="The length of the button depends on the size of its content">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/button/button">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/button/button.md/button" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Button</strong>. The length of the button depends on the size of its content <span>Doc ID: <code>core/components/ui/button/button</code>. Keywords: Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html">https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html</a>.</span></p>
|
|
19
|
-
<h1 id="button">Button</h1>
|
|
20
|
-
<h2 id="type">Type</h2>
|
|
21
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
22
|
-
<sonic-button>Default</sonic-button>
|
|
23
|
-
<sonic-button type="primary">Primary</sonic-button>
|
|
24
|
-
<sonic-button type="neutral">Neutral</sonic-button>
|
|
25
|
-
<sonic-button type="warning">Warning</sonic-button>
|
|
26
|
-
<sonic-button type="info">Info</sonic-button>
|
|
27
|
-
<sonic-button type="success">Success</sonic-button>
|
|
28
|
-
<sonic-button type="danger">Danger</sonic-button>
|
|
29
|
-
<sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
|
|
30
|
-
</div>
|
|
31
|
-
</code></pre>
|
|
32
|
-
<h2 id="outline">Outline</h2>
|
|
33
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
34
|
-
<sonic-button variant="outline">Default</sonic-button>
|
|
35
|
-
<sonic-button variant="outline" type="primary">Primary</sonic-button>
|
|
36
|
-
<sonic-button variant="outline" type="neutral">Neutral</sonic-button>
|
|
37
|
-
<sonic-button variant="outline" type="warning">Warning</sonic-button>
|
|
38
|
-
<sonic-button variant="outline" type="info">Info</sonic-button>
|
|
39
|
-
<sonic-button variant="outline" type="success">Success</sonic-button>
|
|
40
|
-
<sonic-button variant="outline" type="danger">Danger</sonic-button>
|
|
41
|
-
<sonic-button variant="outline" type="custom" style="--sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
|
|
42
|
-
</div>
|
|
43
|
-
</code></pre>
|
|
44
|
-
<h2 id="variant">Variant</h2>
|
|
45
|
-
<pre><code><sonic-button variant="default">Default</sonic-button>
|
|
46
|
-
<sonic-button variant="outline">Outline</sonic-button>
|
|
47
|
-
<sonic-button variant="ghost">Ghost</sonic-button>
|
|
48
|
-
<sonic-button variant="link">Link</sonic-button>
|
|
49
|
-
<sonic-button variant="unstyled">Unstyled</sonic-button>
|
|
50
|
-
</code></pre>
|
|
51
|
-
<h2 id="size">Size</h2>
|
|
52
|
-
<pre><code><sonic-button size="2xs">2Xs button</sonic-button>
|
|
53
|
-
<sonic-button size="xs">Xs button</sonic-button>
|
|
54
|
-
<sonic-button size="sm">Sm button</sonic-button>
|
|
55
|
-
<sonic-button size="md">Md button</sonic-button>
|
|
56
|
-
<sonic-button>Default button</sonic-button>
|
|
57
|
-
<sonic-button size="lg">Lg button</sonic-button>
|
|
58
|
-
<sonic-button size="xl">Xl button</sonic-button>
|
|
59
|
-
<sonic-button size="2xl">2Xl button</sonic-button>
|
|
60
|
-
</code></pre>
|
|
61
|
-
<h2 id="shape">Shape</h2>
|
|
62
|
-
<pre><code><sonic-button shape="circle"> 😂 </sonic-button>
|
|
63
|
-
<sonic-button shape="square"> 🚀 </sonic-button>
|
|
64
|
-
</code></pre>
|
|
65
|
-
<h2 id="loading">Loading</h2>
|
|
66
|
-
<p>The length of the button depends on the size of its content</p>
|
|
67
|
-
<pre><code><sonic-button loading></sonic-button>
|
|
68
|
-
<sonic-button loading>Loading button</sonic-button>
|
|
69
|
-
<sonic-button loading><span slot="prefix">🚀</span>Loading with prefix<span slot="suffix">😂</span></sonic-button>
|
|
70
|
-
</code></pre>
|
|
71
|
-
<h2 id="swap">Swap</h2>
|
|
72
|
-
<pre><code><sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" shape="circle" variant="outline" class="mr-4">
|
|
73
|
-
<sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
|
|
74
|
-
<sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
|
|
75
|
-
</sonic-button>
|
|
76
|
-
<sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" variant="outline">
|
|
77
|
-
<sonic-icon library="iconoir" swap="on" slot="prefix" name="eye-empty"></sonic-icon>
|
|
78
|
-
<sonic-icon library="iconoir" swap="off" slot="prefix" name="eye-off"></sonic-icon>
|
|
79
|
-
Révélez
|
|
80
|
-
<span swap="off">...</span>
|
|
81
|
-
<span swap="on">moi !</span>
|
|
82
|
-
</sonic-button>
|
|
83
|
-
</code></pre>
|
|
84
|
-
<h2 id="reset">Reset</h2>
|
|
85
|
-
<pre><code><div formDataProvider="button-reset-demo" class="mb-2">
|
|
86
|
-
<sonic-checkbox name="aChexbox" value="AValueToSet">Set A value</sonic-checkbox><br>
|
|
87
|
-
<sonic-button reset>Reset current formDataProvider</sonic-button>
|
|
88
|
-
</div>
|
|
89
|
-
<sonic-button reset="button-reset-demo">Reset formDataProvider by name</sonic-button>
|
|
90
|
-
</code></pre>
|
|
91
|
-
<h2 id="goback">GoBack</h2>
|
|
92
|
-
<pre><code><sonic-button goBack type="primary" variant="outline" class="mr-4">
|
|
93
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
|
|
94
|
-
Retour classique
|
|
95
|
-
</sonic-button>
|
|
96
|
-
<sonic-button goBack="http://la-billetterie.net" type="primary" variant="outline" class="mr-4">
|
|
97
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
|
|
98
|
-
Retour url prédéfinie
|
|
99
|
-
</sonic-button>
|
|
100
|
-
</code></pre>
|
|
101
|
-
<h2 id="button-with-icon">Button with icon</h2>
|
|
102
|
-
<pre><code><sonic-button goBack type="primary" variant="outline" class="mr-4">
|
|
103
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-right" ></sonic-icon>
|
|
104
|
-
Button with icon
|
|
105
|
-
</sonic-button>
|
|
106
|
-
</code></pre>
|
|
107
|
-
<h2 id="button-group">Button group</h2>
|
|
108
|
-
<pre><code><sonic-group label="Code promo" class="mr-4">
|
|
109
|
-
<sonic-input placeholder="Entrez votre code ici..."></sonic-input>
|
|
110
|
-
<sonic-button type="primary" shape="square">
|
|
111
|
-
<sonic-icon library="iconoir" library="iconoir" name="gift"></sonic-icon>
|
|
112
|
-
</sonic-button>
|
|
113
|
-
</sonic-group>
|
|
114
|
-
<sonic-divider size="lg"></sonic-divider>
|
|
115
|
-
<div class="text-lg mb-2">Choose a subscription</div>
|
|
116
|
-
<sonic-group formDataProvider="subscriptionData">
|
|
117
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="standard" type="default"
|
|
118
|
-
>😎 Standard</sonic-button
|
|
119
|
-
>
|
|
120
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
|
|
121
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
|
|
122
|
-
</sonic-group>
|
|
123
|
-
</code></pre>
|
|
124
|
-
<h2 id="aria-label">Aria-label</h2>
|
|
125
|
-
<pre><code><sonic-button data-aria-label="Custom aria label" type="primary" >
|
|
126
|
-
Button with aria label
|
|
127
|
-
</sonic-button>
|
|
128
|
-
<sonic-button data-aria-label="Custom aria label" href="https://google.fr" type="primary" >
|
|
129
|
-
Button link with aria label
|
|
130
|
-
</sonic-button>
|
|
131
|
-
</code></pre>
|
|
132
|
-
<h2 id="custom-styles--active-states-with-tailwind">Custom styles & active states with tailwind</h2>
|
|
133
|
-
<pre><code><div formDataProvider="subscriptionData2">
|
|
134
|
-
<sonic-button
|
|
135
|
-
class="bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&[active]]:text-danger-content [&[active]]:min-w-[13rem] [&[active]]:bg-danger [&[active]]:font-black [&[active]]:rounded-full"
|
|
136
|
-
variant="unstyled"
|
|
137
|
-
checkable unique
|
|
138
|
-
name="subscription"
|
|
139
|
-
value="premium"
|
|
140
|
-
type="default">
|
|
141
|
-
<span swap="off" class="inline-block py-2 px-3" >subscribe</span>
|
|
142
|
-
<span swap="on" class="inline-block py-2 px-3" >⭐ Premium</span>
|
|
143
|
-
</sonic-button>
|
|
144
|
-
</div>
|
|
145
|
-
</code></pre>
|
|
146
|
-
|
|
147
|
-
</article>
|
|
148
|
-
</main>
|
|
149
|
-
</body>
|
|
150
|
-
</html>
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html" data-doc-id="core/components/ui/captcha/captcha">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Captcha — Concorde</title>
|
|
7
|
-
<meta name="description" content="sonic-captcha embeds an ALTCHA widget and wires captchaToken / needsCaptchaValidation on the ancestor formDataProvider (or headersDataProvider). sonic-submit waits for a token before sending when vali">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, captchaToken, needsCaptchaValidation, formDataProvider, headersDataProvider, sonic-submit, key, generateEncryptedKey">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/captcha/captcha">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/captcha/captcha.md/captcha" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Captcha</strong>. sonic-captcha embeds an ALTCHA widget and wires captchaToken / needsCaptchaValidation on the ancestor formDataProvider (or headersDataProvider). sonic-submit waits for a token before sending when vali <span>Doc ID: <code>core/components/ui/captcha/captcha</code>. Keywords: Concorde, supersoniks, core/components/ui/captcha/captcha, captcha, Captcha, UI component, sonic-captcha, web component, captchaToken, needsCaptchaValidation, formDataProvider, headersDataProvider, sonic-submit, key, generateEncryptedKey. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html">https://concorde.supersoniks.org/crawl/core/components/ui/captcha/captcha.html</a>.</span></p>
|
|
19
|
-
<h1 id="captcha">Captcha</h1>
|
|
20
|
-
<p><strong><code>sonic-captcha</code></strong> embeds an <strong>ALTCHA</strong> widget and wires <strong><code>captchaToken</code></strong> / <strong><code>needsCaptchaValidation</code></strong> on the ancestor <strong><code>formDataProvider</code></strong> (or <strong><code>headersDataProvider</code></strong>). <strong><code>sonic-submit</code></strong> waits for a token before sending when validation is required. The widget loads only on <strong>HTTPS</strong>; on plain HTTP the host renders nothing.</p>
|
|
21
|
-
<blockquote>
|
|
22
|
-
<p>Live widget calls the Supersoniks challenge service — not part of <a href="../../../../docs/_misc/docs-mock-api.html#docs-mock-api">docs mock API</a>.</p>
|
|
23
|
-
</blockquote>
|
|
24
|
-
<h2 id="basic-example">Basic example</h2>
|
|
25
|
-
<p>Wrap the form scope and place <strong><code>sonic-submit</code></strong> in the default slot so the challenge appears above the action.</p>
|
|
26
|
-
<pre><code><sonic-scope
|
|
27
|
-
serviceURL="/docs-mock-api"
|
|
28
|
-
formDataProvider="captcha-docs-form"
|
|
29
|
-
submitResultDataProvider="captcha-docs-result"
|
|
30
|
-
>
|
|
31
|
-
<sonic-captcha formDataProvider="captcha-docs-form">
|
|
32
|
-
<sonic-input class="mb-3" name="email" type="email" label="Email" value="demo@example.com"></sonic-input>
|
|
33
|
-
<sonic-submit endPoint="api/register" onClick>
|
|
34
|
-
<sonic-button type="primary">Submit with captcha</sonic-button>
|
|
35
|
-
</sonic-submit>
|
|
36
|
-
</sonic-captcha>
|
|
37
|
-
</sonic-scope>
|
|
38
|
-
</code></pre>
|
|
39
|
-
<h2 id="encrypted-site-key">Encrypted site key</h2>
|
|
40
|
-
<p>Optional <strong><code>key</code></strong> skips client-side key generation. When omitted, the component derives an encrypted key on connect (after <strong><code>generateEncryptedKey</code></strong>).</p>
|
|
41
|
-
<pre><code><sonic-captcha formDataProvider="captcha-docs-form" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
|
|
42
|
-
<sonic-button type="outline" disabled>Complete the challenge above to enable submit</sonic-button>
|
|
43
|
-
</sonic-captcha>
|
|
44
|
-
</code></pre>
|
|
45
|
-
<h2 id="form-publisher-fields">Form publisher fields</h2>
|
|
46
|
-
<p>On connect (HTTPS only), <strong><code>needsCaptchaValidation</code></strong> is set to <strong><code>true</code></strong> and <strong><code>captchaToken</code></strong> is cleared. When the ALTCHA widget reaches <strong><code>verified</code></strong>, <strong><code>captchaToken</code></strong> is written on the form publisher and <strong><code>sonic-captcha-validate</code></strong> fires (<code>detail.valid</code> · <strong><code>detail.state</code></strong> · optional <strong><code>detail.token</code></strong> / <strong><code>detail.payload</code></strong>). <strong><code>sonic-submit</code></strong> still listens for <strong><code>request_token</code></strong> to refresh the token immediately before send.</p>
|
|
47
|
-
<pre><code class="language-typescript">{
|
|
48
|
-
needsCaptchaValidation: true,
|
|
49
|
-
captchaKey: "…",
|
|
50
|
-
captchaToken: "…"
|
|
51
|
-
}
|
|
52
|
-
</code></pre>
|
|
53
|
-
<h2 id="api-reference">API reference</h2>
|
|
54
|
-
<table>
|
|
55
|
-
<thead>
|
|
56
|
-
<tr>
|
|
57
|
-
<th>Attribute</th>
|
|
58
|
-
<th>Values</th>
|
|
59
|
-
<th>Description</th>
|
|
60
|
-
</tr>
|
|
61
|
-
</thead>
|
|
62
|
-
<tbody><tr>
|
|
63
|
-
<td><code>formDataProvider</code></td>
|
|
64
|
-
<td>publisher id</td>
|
|
65
|
-
<td>Same as ancestor form scope; reads/writes <strong><code>needsCaptchaValidation</code></strong> · <strong><code>captchaKey</code></strong> · <strong><code>captchaToken</code></strong></td>
|
|
66
|
-
</tr>
|
|
67
|
-
<tr>
|
|
68
|
-
<td><code>key</code></td>
|
|
69
|
-
<td>string</td>
|
|
70
|
-
<td>ALTCHA site key; auto-generated when empty</td>
|
|
71
|
-
</tr>
|
|
72
|
-
<tr>
|
|
73
|
-
<td><code>action</code></td>
|
|
74
|
-
<td>string</td>
|
|
75
|
-
<td>Optional action name forwarded to the widget</td>
|
|
76
|
-
</tr>
|
|
77
|
-
<tr>
|
|
78
|
-
<td><code>zIndex</code></td>
|
|
79
|
-
<td>number (default <code>9999</code>)</td>
|
|
80
|
-
<td>Stacking for the challenge overlay</td>
|
|
81
|
-
</tr>
|
|
82
|
-
</tbody></table>
|
|
83
|
-
<table>
|
|
84
|
-
<thead>
|
|
85
|
-
<tr>
|
|
86
|
-
<th>Slot</th>
|
|
87
|
-
<th>Description</th>
|
|
88
|
-
</tr>
|
|
89
|
-
</thead>
|
|
90
|
-
<tbody><tr>
|
|
91
|
-
<td><em>(default)</em></td>
|
|
92
|
-
<td>Form actions (typically <strong><code>sonic-submit</code></strong> and fields) rendered below the widget</td>
|
|
93
|
-
</tr>
|
|
94
|
-
</tbody></table>
|
|
95
|
-
<table>
|
|
96
|
-
<thead>
|
|
97
|
-
<tr>
|
|
98
|
-
<th>Event</th>
|
|
99
|
-
<th>Description</th>
|
|
100
|
-
</tr>
|
|
101
|
-
</thead>
|
|
102
|
-
<tbody><tr>
|
|
103
|
-
<td><code>sonic-captcha-validate</code></td>
|
|
104
|
-
<td>Fired when <strong><code>state</code></strong> is <strong><code>verified</code></strong> · <strong><code>error</code></strong> or <strong><code>expired</code></strong>; <strong><code>detail.valid</code></strong> is <strong><code>true</code></strong> only for <strong><code>verified</code></strong></td>
|
|
105
|
-
</tr>
|
|
106
|
-
</tbody></table>
|
|
107
|
-
<p>Related: <a href="../../functional/submit/submit.html#submit">Submit</a> — <strong><code>needsCaptchaValidation</code></strong> and deferred send.</p>
|
|
108
|
-
|
|
109
|
-
</article>
|
|
110
|
-
</main>
|
|
111
|
-
</body>
|
|
112
|
-
</html>
|