@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,222 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html" data-doc-id="core/components/ui/icon/icon">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Icon — Concorde</title>
|
|
7
|
-
<meta name="description" content="sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/icon/icon">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.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/icon/icon.md/icon" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
|
|
19
|
-
<h1 id="icon">Icon</h1>
|
|
20
|
-
<p><strong><code>sonic-icon</code></strong> renders inline SVG icons from the <strong>bundled core set</strong> or from <strong>CDN libraries</strong>. Set <strong><code>name</code></strong> (and <strong><code>library</code></strong> / <strong><code>prefix</code></strong> when needed); scale with <strong><code>size</code></strong>. Icons inherit <strong><code>currentColor</code></strong> and are <strong><code>aria-hidden</code></strong> by default—keep visible text nearby or label the control that contains them.</p>
|
|
21
|
-
<h2 id="core-library">Core library</h2>
|
|
22
|
-
<p>Omit <strong><code>library</code></strong> to use the bundled set in <code>icons.json</code>. Available <strong><code>name</code></strong> values: <code>cancel</code> · <code>check</code> · <code>check-circled-outline</code> · <code>emoji-puzzled</code> · <code>info-empty</code> · <code>loader</code> · <code>minus-small</code> · <code>more-horiz</code> · <code>more-vert</code> · <code>nav-arrow-down</code> · <code>warning-circled-outline</code>.</p>
|
|
23
|
-
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
24
|
-
<div class="text-center">
|
|
25
|
-
<sonic-icon name="cancel" size="lg"></sonic-icon>
|
|
26
|
-
<div class="text-xs mt-1">cancel</div>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="text-center">
|
|
29
|
-
<sonic-icon name="check" size="lg"></sonic-icon>
|
|
30
|
-
<div class="text-xs mt-1">check</div>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="text-center">
|
|
33
|
-
<sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
|
|
34
|
-
<div class="text-xs mt-1">check-circled-outline</div>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="text-center">
|
|
37
|
-
<sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
|
|
38
|
-
<div class="text-xs mt-1">emoji-puzzled</div>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="text-center">
|
|
41
|
-
<sonic-icon name="info-empty" size="lg"></sonic-icon>
|
|
42
|
-
<div class="text-xs mt-1">info-empty</div>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="text-center">
|
|
45
|
-
<sonic-icon name="loader" size="lg"></sonic-icon>
|
|
46
|
-
<div class="text-xs mt-1">loader</div>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="text-center">
|
|
49
|
-
<sonic-icon name="minus-small" size="lg"></sonic-icon>
|
|
50
|
-
<div class="text-xs mt-1">minus-small</div>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="text-center">
|
|
53
|
-
<sonic-icon name="more-horiz" size="lg"></sonic-icon>
|
|
54
|
-
<div class="text-xs mt-1">more-horiz</div>
|
|
55
|
-
</div>
|
|
56
|
-
<div class="text-center">
|
|
57
|
-
<sonic-icon name="more-vert" size="lg"></sonic-icon>
|
|
58
|
-
<div class="text-xs mt-1">more-vert</div>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="text-center">
|
|
61
|
-
<sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
|
|
62
|
-
<div class="text-xs mt-1">nav-arrow-down</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="text-center">
|
|
65
|
-
<sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
|
|
66
|
-
<div class="text-xs mt-1">warning-circled-outline</div>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</code></pre>
|
|
70
|
-
<h2 id="external-libraries">External libraries</h2>
|
|
71
|
-
<p>Set <strong><code>library</code></strong> to load SVGs from a built-in CDN template. <strong><code>prefix</code></strong> falls back to each library’s default when omitted (<code>outline</code> for <strong><code>heroicons</code></strong>, <strong><code>regular</code></strong> for <strong><code>fontAwesome</code></strong> and <strong><code>material</code></strong>, and so on).</p>
|
|
72
|
-
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
73
|
-
<sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
|
|
74
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
75
|
-
<br />
|
|
76
|
-
<div class="text-xs mt-1">heroicons</div>
|
|
77
|
-
</sonic-link>
|
|
78
|
-
<sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
|
|
79
|
-
<sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
|
|
80
|
-
<br />
|
|
81
|
-
<div class="text-xs mt-1">iconoir</div>
|
|
82
|
-
</sonic-link>
|
|
83
|
-
<sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
|
|
84
|
-
<sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
|
|
85
|
-
<br />
|
|
86
|
-
<div class="text-xs mt-1">material design</div>
|
|
87
|
-
</sonic-link>
|
|
88
|
-
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
|
|
89
|
-
<sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
|
|
90
|
-
<br />
|
|
91
|
-
<div class="text-xs mt-1">fontAwesome regular</div>
|
|
92
|
-
</sonic-link>
|
|
93
|
-
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
|
|
94
|
-
<sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
|
|
95
|
-
<br />
|
|
96
|
-
<div class="text-xs mt-1">fontAwesome solid</div>
|
|
97
|
-
</sonic-link>
|
|
98
|
-
<sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
|
|
99
|
-
<sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
|
|
100
|
-
<br />
|
|
101
|
-
<div class="text-xs mt-1">feathers</div>
|
|
102
|
-
</sonic-link>
|
|
103
|
-
<sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
|
|
104
|
-
<sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
|
|
105
|
-
<br />
|
|
106
|
-
<div class="text-xs mt-1">lucide</div>
|
|
107
|
-
</sonic-link>
|
|
108
|
-
</div>
|
|
109
|
-
</code></pre>
|
|
110
|
-
<h2 id="custom-library">Custom library</h2>
|
|
111
|
-
<p>Use <strong><code>library="custom"</code></strong> with SVG files on your origin. On an ancestor (for example <strong><code>sonic-scope</code></strong> or <strong><code>sonic-code</code></strong>), set <strong><code>customIconLibraryPath</code></strong> to a URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong> placeholders, and optionally <strong><code>customIconDefaultPrefix</code></strong> when <strong><code>prefix</code></strong> is omitted.</p>
|
|
112
|
-
<pre><code><sonic-scope
|
|
113
|
-
customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
114
|
-
customIconDefaultPrefix="regular"
|
|
115
|
-
>
|
|
116
|
-
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
117
|
-
<div class="text-center">
|
|
118
|
-
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
119
|
-
<br />
|
|
120
|
-
<div class="text-xs mt-1">regular</div>
|
|
121
|
-
</div>
|
|
122
|
-
<div class="text-center">
|
|
123
|
-
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
124
|
-
<br />
|
|
125
|
-
<div class="text-xs mt-1">solid</div>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="text-center">
|
|
128
|
-
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
129
|
-
<br />
|
|
130
|
-
<div class="text-xs mt-1">default prefix</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
</sonic-scope>
|
|
134
|
-
</code></pre>
|
|
135
|
-
<h2 id="size">Size</h2>
|
|
136
|
-
<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height). Larger steps use <strong><code>3xl</code></strong>.</p>
|
|
137
|
-
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
138
|
-
<div class="text-center">
|
|
139
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
140
|
-
<br />
|
|
141
|
-
<div class="text-xs mt-1">2xs</div>
|
|
142
|
-
</div>
|
|
143
|
-
<div class="text-center">
|
|
144
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
|
|
145
|
-
<br />
|
|
146
|
-
<div class="text-xs mt-1">xs</div>
|
|
147
|
-
</div>
|
|
148
|
-
<div class="text-center">
|
|
149
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
|
|
150
|
-
<br />
|
|
151
|
-
<div class="text-xs mt-1">sm</div>
|
|
152
|
-
</div>
|
|
153
|
-
<div class="text-center">
|
|
154
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
|
|
155
|
-
<br />
|
|
156
|
-
<div class="text-xs mt-1">default</div>
|
|
157
|
-
</div>
|
|
158
|
-
<div class="text-center">
|
|
159
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
160
|
-
<br />
|
|
161
|
-
<div class="text-xs mt-1">lg</div>
|
|
162
|
-
</div>
|
|
163
|
-
<div class="text-center">
|
|
164
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
|
|
165
|
-
<br />
|
|
166
|
-
<div class="text-xs mt-1">xl</div>
|
|
167
|
-
</div>
|
|
168
|
-
<div class="text-center">
|
|
169
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
|
|
170
|
-
<br />
|
|
171
|
-
<div class="text-xs mt-1">2xl</div>
|
|
172
|
-
</div>
|
|
173
|
-
<div class="text-center">
|
|
174
|
-
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
|
|
175
|
-
<br />
|
|
176
|
-
<div class="text-xs mt-1">3xl</div>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
</code></pre>
|
|
180
|
-
<h2 id="accessibility">Accessibility</h2>
|
|
181
|
-
<p>On connect, the host sets <strong><code>aria-hidden="true"</code></strong>. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on <strong><code>sonic-icon</code></strong> alone for meaning—use visible text or <strong><code>aria-label</code></strong> on the parent button / link.</p>
|
|
182
|
-
<pre><code><sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
|
|
183
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
184
|
-
</sonic-button>
|
|
185
|
-
</code></pre>
|
|
186
|
-
<h2 id="api-reference">API reference</h2>
|
|
187
|
-
<table>
|
|
188
|
-
<thead>
|
|
189
|
-
<tr>
|
|
190
|
-
<th>Attribute</th>
|
|
191
|
-
<th>Values</th>
|
|
192
|
-
<th>Description</th>
|
|
193
|
-
</tr>
|
|
194
|
-
</thead>
|
|
195
|
-
<tbody><tr>
|
|
196
|
-
<td><code>name</code></td>
|
|
197
|
-
<td>string</td>
|
|
198
|
-
<td>Icon id in the core bundle or in the remote library</td>
|
|
199
|
-
</tr>
|
|
200
|
-
<tr>
|
|
201
|
-
<td><code>library</code></td>
|
|
202
|
-
<td><code>heroicons</code> · <code>iconoir</code> · <code>feathers</code> · <code>lucide</code> · <code>material</code> · <code>fontAwesome</code> · <code>custom</code></td>
|
|
203
|
-
<td>CDN or custom template; omit for bundled core icons</td>
|
|
204
|
-
</tr>
|
|
205
|
-
<tr>
|
|
206
|
-
<td><code>prefix</code></td>
|
|
207
|
-
<td>string</td>
|
|
208
|
-
<td>Library-specific variant; defaults per library when empty</td>
|
|
209
|
-
</tr>
|
|
210
|
-
<tr>
|
|
211
|
-
<td><code>size</code></td>
|
|
212
|
-
<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>md</code>)</td>
|
|
213
|
-
<td><code>em</code>-based SVG scale on the host</td>
|
|
214
|
-
</tr>
|
|
215
|
-
</tbody></table>
|
|
216
|
-
<p>Ancestor attributes (for <strong><code>library="custom"</code></strong> only): <strong><code>customIconLibraryPath</code></strong> (URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong>) and <strong><code>customIconDefaultPrefix</code></strong>. May be set on <strong><code>sonic-scope</code></strong>, theme roots, or globally in the document.</p>
|
|
217
|
-
<p>No slots — the component inlines fetched or bundled SVG markup.</p>
|
|
218
|
-
|
|
219
|
-
</article>
|
|
220
|
-
</main>
|
|
221
|
-
</body>
|
|
222
|
-
</html>
|
|
@@ -1,298 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html" data-doc-id="core/components/ui/image/image">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Image — Concorde</title>
|
|
7
|
-
<meta name="description" content="sonic-image wraps a responsive <img> with aspect ratio, object-fit: cover, optional rounded corners, and load transitions. The host shows a placeholder background (--sc-placeholder-bg) until the asset">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading="eager", rounded, --sc-rounded">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/image/image">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.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/image/image.md/image" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Image</strong>. sonic-image wraps a responsive <img> with aspect ratio, object-fit: cover, optional rounded corners, and load transitions. The host shows a placeholder background (--sc-placeholder-bg) until the asset <span>Doc ID: <code>core/components/ui/image/image</code>. Keywords: Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading="eager", rounded, --sc-rounded. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html">https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html</a>.</span></p>
|
|
19
|
-
<h1 id="image">Image</h1>
|
|
20
|
-
<p><strong><code>sonic-image</code></strong> wraps a responsive <strong><code><img></code></strong> with aspect ratio, <code>object-fit: cover</code>, optional rounded corners, and load transitions. The host shows a placeholder background (<code>--sc-placeholder-bg</code>) until the asset loads. Default <strong><code>loading</code></strong> is <code>lazy</code>; use <strong><code>loading="eager"</code></strong> for above-the-fold heroes.</p>
|
|
21
|
-
<h2 id="rounded">Rounded</h2>
|
|
22
|
-
<p>Omit <code>rounded</code> for square corners. Boolean <strong><code>rounded</code></strong> uses the theme token <code>--sc-rounded</code>. Sizes: <strong><code>sm</code></strong>, <strong><code>md</code></strong>, <strong><code>lg</code></strong>, <strong><code>xl</code></strong>, <strong><code>full</code></strong> (circle — pair with <code>ratio="1/1"</code>), <strong><code>none</code></strong> (explicit reset).</p>
|
|
23
|
-
<pre><code><div class="grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs ">
|
|
24
|
-
<div>
|
|
25
|
-
<sonic-image
|
|
26
|
-
ratio="1/1"
|
|
27
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
28
|
-
></sonic-image>
|
|
29
|
-
<p class="mt-2">default</p>
|
|
30
|
-
</div>
|
|
31
|
-
<div>
|
|
32
|
-
<sonic-image
|
|
33
|
-
rounded="sm"
|
|
34
|
-
ratio="1/1"
|
|
35
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
36
|
-
></sonic-image>
|
|
37
|
-
<p class="mt-2">sm</p>
|
|
38
|
-
</div>
|
|
39
|
-
<div>
|
|
40
|
-
<sonic-image
|
|
41
|
-
rounded
|
|
42
|
-
ratio="1/1"
|
|
43
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
44
|
-
></sonic-image>
|
|
45
|
-
<p class="mt-2">rounded</p>
|
|
46
|
-
</div>
|
|
47
|
-
<div>
|
|
48
|
-
<sonic-image
|
|
49
|
-
rounded="md"
|
|
50
|
-
ratio="1/1"
|
|
51
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
52
|
-
></sonic-image>
|
|
53
|
-
<p class="mt-2">md</p>
|
|
54
|
-
</div>
|
|
55
|
-
<div>
|
|
56
|
-
<sonic-image
|
|
57
|
-
rounded="lg"
|
|
58
|
-
ratio="1/1"
|
|
59
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
60
|
-
></sonic-image>
|
|
61
|
-
<p class="mt-2">lg</p>
|
|
62
|
-
</div>
|
|
63
|
-
<div>
|
|
64
|
-
<sonic-image
|
|
65
|
-
rounded="xl"
|
|
66
|
-
ratio="1/1"
|
|
67
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
68
|
-
></sonic-image>
|
|
69
|
-
<p class="mt-2">xl</p>
|
|
70
|
-
</div>
|
|
71
|
-
<div >
|
|
72
|
-
<div >
|
|
73
|
-
<sonic-image
|
|
74
|
-
rounded="full"
|
|
75
|
-
ratio="1/1"
|
|
76
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
77
|
-
></sonic-image>
|
|
78
|
-
<p class="mt-2">full</p>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
</code></pre>
|
|
83
|
-
<h2 id="aspect-ratio">Aspect ratio</h2>
|
|
84
|
-
<p><strong><code>ratio</code></strong> sets CSS <code>aspect-ratio</code> on the image (default <strong><code>auto</code></strong>). The image still fills the host width (<code>width: 100%</code>).</p>
|
|
85
|
-
<pre><code><div class="grid gap-8 grid-cols-2 items-center">
|
|
86
|
-
<sonic-image
|
|
87
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
88
|
-
></sonic-image>
|
|
89
|
-
<sonic-image
|
|
90
|
-
ratio="16/9"
|
|
91
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
92
|
-
></sonic-image>
|
|
93
|
-
<sonic-image
|
|
94
|
-
ratio="1/1"
|
|
95
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
96
|
-
></sonic-image>
|
|
97
|
-
<sonic-image
|
|
98
|
-
ratio="2/3"
|
|
99
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
100
|
-
></sonic-image>
|
|
101
|
-
</div>
|
|
102
|
-
</code></pre>
|
|
103
|
-
<h2 id="object-position">Object position</h2>
|
|
104
|
-
<p><strong><code>objectPosition</code></strong> maps to CSS <code>object-position</code> (default <strong><code>center center</code></strong>). Useful on wide crops when the subject sits off-center.</p>
|
|
105
|
-
<pre><code><div class="grid gap-8 grid-cols-2 items-center">
|
|
106
|
-
<sonic-image
|
|
107
|
-
ratio="11/4"
|
|
108
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
109
|
-
></sonic-image>
|
|
110
|
-
<sonic-image
|
|
111
|
-
objectPosition="center top"
|
|
112
|
-
ratio="11/4"
|
|
113
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
114
|
-
></sonic-image>
|
|
115
|
-
</div>
|
|
116
|
-
</code></pre>
|
|
117
|
-
<h2 id="cover">Cover</h2>
|
|
118
|
-
<p><strong><code>cover</code></strong> stretches the image to fill a <strong>positioned</strong> parent (<code>position: relative</code> + fixed height or inset). Aspect ratio on the host is ignored while <code>cover</code> is set.</p>
|
|
119
|
-
<pre><code><div class="h-96 relative rounded-lg overflow-hidden">
|
|
120
|
-
<sonic-image
|
|
121
|
-
cover
|
|
122
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
123
|
-
></sonic-image>
|
|
124
|
-
</div>
|
|
125
|
-
</code></pre>
|
|
126
|
-
<h2 id="load-transition">Load transition</h2>
|
|
127
|
-
<p>Set <strong><code>transition</code></strong> to <strong><code>fade</code></strong> (default when the attribute is present) or <strong><code>fade-scale-out</code></strong>. The image stays at <code>opacity: 0</code> until the browser fires <strong><code>load</code></strong>, then the <strong><code>loaded</code></strong> class runs the animation. Changing <code>src</code> on an existing element does not replay the effect — mount a new <code>sonic-image</code> when you need another entrance (galleries, infinite scroll).</p>
|
|
128
|
-
<p>Click <strong>Add image</strong> to append small thumbnails and replay the transition. <strong>Clear</strong> resets the row.</p>
|
|
129
|
-
<pre><code><div class="flex flex-wrap gap-2 mb-4">
|
|
130
|
-
<sonic-button
|
|
131
|
-
size="sm"
|
|
132
|
-
onclick="(function () {
|
|
133
|
-
var host = document.getElementById('sonic-image-transition-host');
|
|
134
|
-
var img = document.createElement('sonic-image');
|
|
135
|
-
img.transition = 'fade';
|
|
136
|
-
img.ratio = '1/1';
|
|
137
|
-
img.rounded = 'md';
|
|
138
|
-
img.loading = 'eager';
|
|
139
|
-
img.style.width = '8rem';
|
|
140
|
-
img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
|
|
141
|
-
host.appendChild(img);
|
|
142
|
-
})()"
|
|
143
|
-
>
|
|
144
|
-
Add image (fade)
|
|
145
|
-
</sonic-button>
|
|
146
|
-
<sonic-button
|
|
147
|
-
size="sm"
|
|
148
|
-
variant="outline"
|
|
149
|
-
onclick="(function () {
|
|
150
|
-
var host = document.getElementById('sonic-image-transition-host');
|
|
151
|
-
var img = document.createElement('sonic-image');
|
|
152
|
-
img.transition = 'fade-scale-out';
|
|
153
|
-
img.ratio = '1/1';
|
|
154
|
-
img.rounded = 'md';
|
|
155
|
-
img.loading = 'eager';
|
|
156
|
-
img.style.width = '8rem';
|
|
157
|
-
img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
|
|
158
|
-
host.appendChild(img);
|
|
159
|
-
})()"
|
|
160
|
-
>
|
|
161
|
-
Add image (fade-scale-out)
|
|
162
|
-
</sonic-button>
|
|
163
|
-
<sonic-button
|
|
164
|
-
size="sm"
|
|
165
|
-
variant="ghost"
|
|
166
|
-
onclick="document.getElementById('sonic-image-transition-host').replaceChildren()"
|
|
167
|
-
>
|
|
168
|
-
Clear
|
|
169
|
-
</sonic-button>
|
|
170
|
-
</div>
|
|
171
|
-
<div id="sonic-image-transition-host" class="flex flex-wrap gap-2 min-h-[5rem]"></div>
|
|
172
|
-
</code></pre>
|
|
173
|
-
<h2 id="accessibility-and-parts">Accessibility and parts</h2>
|
|
174
|
-
<p>Always set meaningful <strong><code>alt</code></strong> text (empty string only for decorative images). </p>
|
|
175
|
-
<pre><code><sonic-image
|
|
176
|
-
rounded="md"
|
|
177
|
-
ratio="16/9"
|
|
178
|
-
alt="Concorde aircraft in flight"
|
|
179
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
180
|
-
></sonic-image>
|
|
181
|
-
</code></pre>
|
|
182
|
-
<h2 id="api-reference">API reference</h2>
|
|
183
|
-
<table>
|
|
184
|
-
<thead>
|
|
185
|
-
<tr>
|
|
186
|
-
<th>Attribute</th>
|
|
187
|
-
<th>Values</th>
|
|
188
|
-
<th>Description</th>
|
|
189
|
-
</tr>
|
|
190
|
-
</thead>
|
|
191
|
-
<tbody><tr>
|
|
192
|
-
<td><code>src</code></td>
|
|
193
|
-
<td>URL</td>
|
|
194
|
-
<td>Image URL passed to <code><img src></code></td>
|
|
195
|
-
</tr>
|
|
196
|
-
<tr>
|
|
197
|
-
<td><code>alt</code></td>
|
|
198
|
-
<td>string</td>
|
|
199
|
-
<td>Accessible description; use <code>""</code> only for decorative images</td>
|
|
200
|
-
</tr>
|
|
201
|
-
<tr>
|
|
202
|
-
<td><code>loading</code></td>
|
|
203
|
-
<td><code>lazy</code> (default), <code>eager</code></td>
|
|
204
|
-
<td>Native lazy loading</td>
|
|
205
|
-
</tr>
|
|
206
|
-
<tr>
|
|
207
|
-
<td><code>ratio</code></td>
|
|
208
|
-
<td>CSS ratio, <code>auto</code> (default)</td>
|
|
209
|
-
<td>Host <code>aspect-ratio</code> on the image (ignored when <code>cover</code> is set)</td>
|
|
210
|
-
</tr>
|
|
211
|
-
<tr>
|
|
212
|
-
<td><code>rounded</code></td>
|
|
213
|
-
<td><code>none</code> (default), boolean, <code>base</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>full</code></td>
|
|
214
|
-
<td>Corner radius from theme tokens; <code>full</code> is a circle (often with <code>ratio="1/1"</code>)</td>
|
|
215
|
-
</tr>
|
|
216
|
-
<tr>
|
|
217
|
-
<td><code>objectPosition</code></td>
|
|
218
|
-
<td>CSS position</td>
|
|
219
|
-
<td>Maps to <code>object-position</code> (default <code>center center</code>)</td>
|
|
220
|
-
</tr>
|
|
221
|
-
<tr>
|
|
222
|
-
<td><code>imageRendering</code></td>
|
|
223
|
-
<td>CSS value</td>
|
|
224
|
-
<td>Maps to <code>image-rendering</code> (default <code>auto</code>)</td>
|
|
225
|
-
</tr>
|
|
226
|
-
<tr>
|
|
227
|
-
<td><code>cover</code></td>
|
|
228
|
-
<td>boolean</td>
|
|
229
|
-
<td>Absolutely fills a positioned parent; host aspect ratio is ignored</td>
|
|
230
|
-
</tr>
|
|
231
|
-
<tr>
|
|
232
|
-
<td><code>transition</code></td>
|
|
233
|
-
<td><code>fade</code>, <code>fade-scale-out</code></td>
|
|
234
|
-
<td>Opacity (and scale) animation after <code>load</code>; remount to replay on <code>src</code> change</td>
|
|
235
|
-
</tr>
|
|
236
|
-
</tbody></table>
|
|
237
|
-
<p>No slots — content is driven entirely by attributes on the inner <code><img></code>.</p>
|
|
238
|
-
<h2 id="api-reference-1">API reference</h2>
|
|
239
|
-
<table>
|
|
240
|
-
<thead>
|
|
241
|
-
<tr>
|
|
242
|
-
<th>Attribute</th>
|
|
243
|
-
<th>Values</th>
|
|
244
|
-
<th>Description</th>
|
|
245
|
-
</tr>
|
|
246
|
-
</thead>
|
|
247
|
-
<tbody><tr>
|
|
248
|
-
<td><code>src</code></td>
|
|
249
|
-
<td>URL</td>
|
|
250
|
-
<td>Image URL passed to <code><img src></code></td>
|
|
251
|
-
</tr>
|
|
252
|
-
<tr>
|
|
253
|
-
<td><code>alt</code></td>
|
|
254
|
-
<td>string</td>
|
|
255
|
-
<td>Accessible description; use <code>""</code> only for decorative images</td>
|
|
256
|
-
</tr>
|
|
257
|
-
<tr>
|
|
258
|
-
<td><code>loading</code></td>
|
|
259
|
-
<td><code>lazy</code> (default), <code>eager</code></td>
|
|
260
|
-
<td>Native lazy loading</td>
|
|
261
|
-
</tr>
|
|
262
|
-
<tr>
|
|
263
|
-
<td><code>ratio</code></td>
|
|
264
|
-
<td>CSS ratio, <code>auto</code> (default)</td>
|
|
265
|
-
<td>Host <code>aspect-ratio</code> on the image (ignored when <code>cover</code> is set)</td>
|
|
266
|
-
</tr>
|
|
267
|
-
<tr>
|
|
268
|
-
<td><code>rounded</code></td>
|
|
269
|
-
<td><code>none</code> (default), boolean, <code>base</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>full</code></td>
|
|
270
|
-
<td>Corner radius from theme tokens; <code>full</code> is a circle (often with <code>ratio="1/1"</code>)</td>
|
|
271
|
-
</tr>
|
|
272
|
-
<tr>
|
|
273
|
-
<td><code>objectPosition</code></td>
|
|
274
|
-
<td>CSS position</td>
|
|
275
|
-
<td>Maps to <code>object-position</code> (default <code>center center</code>)</td>
|
|
276
|
-
</tr>
|
|
277
|
-
<tr>
|
|
278
|
-
<td><code>imageRendering</code></td>
|
|
279
|
-
<td>CSS value</td>
|
|
280
|
-
<td>Maps to <code>image-rendering</code> (default <code>auto</code>)</td>
|
|
281
|
-
</tr>
|
|
282
|
-
<tr>
|
|
283
|
-
<td><code>cover</code></td>
|
|
284
|
-
<td>boolean</td>
|
|
285
|
-
<td>Absolutely fills a positioned parent; host aspect ratio is ignored</td>
|
|
286
|
-
</tr>
|
|
287
|
-
<tr>
|
|
288
|
-
<td><code>transition</code></td>
|
|
289
|
-
<td><code>fade</code>, <code>fade-scale-out</code></td>
|
|
290
|
-
<td>Opacity (and scale) animation after <code>load</code>; remount to replay on <code>src</code> change</td>
|
|
291
|
-
</tr>
|
|
292
|
-
</tbody></table>
|
|
293
|
-
<p>No slots — content is driven entirely by attributes on the inner <code><img></code>.</p>
|
|
294
|
-
|
|
295
|
-
</article>
|
|
296
|
-
</main>
|
|
297
|
-
</body>
|
|
298
|
-
</html>
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html" data-doc-id="core/components/ui/link/link">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Link — Concorde</title>
|
|
7
|
-
<meta name="description" content="Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the ">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component, href, pushstate, autoActive, active, target="_blank", rel="noopener noreferrer", partial">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/link/link">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.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/link/link.md/link" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Link</strong>. Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the <span>Doc ID: <code>core/components/ui/link/link</code>. Keywords: Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component, href, pushstate, autoActive, active, target="_blank", rel="noopener noreferrer", partial. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html">https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html</a>.</span></p>
|
|
19
|
-
<h1 id="link">Link</h1>
|
|
20
|
-
<p>Links <strong>navigate</strong> with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair <strong><code>href</code></strong> with <strong><code>pushstate</code></strong>; use <strong><code>autoActive</code></strong> to reflect the current URL on the host (<code>active</code>).</p>
|
|
21
|
-
<h2 id="basic-example">Basic example</h2>
|
|
22
|
-
<pre><code><sonic-link href="/">Basic link with href attribute</sonic-link>
|
|
23
|
-
</code></pre>
|
|
24
|
-
<h2 id="target">Target</h2>
|
|
25
|
-
<p><strong><code>target="_blank"</code></strong> opens a new browsing context and sets <strong><code>rel="noopener noreferrer"</code></strong>.</p>
|
|
26
|
-
<pre><code><sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
|
|
27
|
-
</code></pre>
|
|
28
|
-
<h2 id="pushstate">Pushstate</h2>
|
|
29
|
-
<p>Set <strong><code>pushstate</code></strong> on same-origin <strong><code>href</code></strong> values to intercept clicks and navigate through Concorde’s client router without a full reload.</p>
|
|
30
|
-
<pre><code><sonic-link href="/#core/components" pushstate>Client navigation (pushstate)</sonic-link>
|
|
31
|
-
</code></pre>
|
|
32
|
-
<h2 id="autoactive">AutoActive</h2>
|
|
33
|
-
<p>Default <strong><code>autoActive</code></strong> is <strong><code>partial</code></strong>: the host gets <strong><code>active</code></strong> when the current URL starts with <strong><code>href</code></strong>. Style with <strong><code>[&[active]]:</code></strong> utilities or host selectors.</p>
|
|
34
|
-
<pre><code><sonic-link href="/#core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
|
|
35
|
-
</code></pre>
|
|
36
|
-
<h3 id="autoactive-strict-vs-partial">AutoActive strict vs partial</h3>
|
|
37
|
-
<p><strong><code>strict</code></strong> requires pathname, search, and hash to match. <strong><code>strict-path-only</code></strong> matches pathname and hash but ignores search.</p>
|
|
38
|
-
<pre><code><div class="grid gap-3">
|
|
39
|
-
<sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
|
|
40
|
-
<sonic-link href="/./link.html#link" autoActive="strict" class="[&[active]]:text-success">autoActive strict (long href)</sonic-link>
|
|
41
|
-
<sonic-link href="/#core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
|
|
42
|
-
</div>
|
|
43
|
-
</code></pre>
|
|
44
|
-
<h3 id="autoactive-disabled">AutoActive disabled</h3>
|
|
45
|
-
<pre><code><sonic-link href="/./link.html#link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
|
|
46
|
-
</code></pre>
|
|
47
|
-
<h2 id="accessibility">Accessibility</h2>
|
|
48
|
-
<p>The inner <strong><code><a></code></strong> uses <strong><code>focus-visible</code></strong> outline styling. Set <strong><code>data-aria-label</code></strong> when the slot text is not sufficient on its own.</p>
|
|
49
|
-
<h2 id="api-reference">API reference</h2>
|
|
50
|
-
<table>
|
|
51
|
-
<thead>
|
|
52
|
-
<tr>
|
|
53
|
-
<th>Attribute</th>
|
|
54
|
-
<th>Values</th>
|
|
55
|
-
<th>Description</th>
|
|
56
|
-
</tr>
|
|
57
|
-
</thead>
|
|
58
|
-
<tbody><tr>
|
|
59
|
-
<td><code>href</code></td>
|
|
60
|
-
<td>URL</td>
|
|
61
|
-
<td>Link target; without <strong><code>href</code></strong>, only the slot is rendered (no <strong><code><a></code></strong>)</td>
|
|
62
|
-
</tr>
|
|
63
|
-
<tr>
|
|
64
|
-
<td><code>target</code></td>
|
|
65
|
-
<td>e.g. <code>_blank</code></td>
|
|
66
|
-
<td>Navigation target; <strong><code>_blank</code></strong> adds <strong><code>rel="noopener noreferrer"</code></strong></td>
|
|
67
|
-
</tr>
|
|
68
|
-
<tr>
|
|
69
|
-
<td><code>pushstate</code></td>
|
|
70
|
-
<td>boolean</td>
|
|
71
|
-
<td>Intercepts click for Concorde client navigation without reload</td>
|
|
72
|
-
</tr>
|
|
73
|
-
<tr>
|
|
74
|
-
<td><code>autoActive</code></td>
|
|
75
|
-
<td><code>partial</code> (default) · <code>strict</code> · <code>strict-path-only</code> · <code>disabled</code></td>
|
|
76
|
-
<td>When the host gets the <strong><code>active</code></strong> attribute (same-origin <strong><code>href</code></strong> only)</td>
|
|
77
|
-
</tr>
|
|
78
|
-
<tr>
|
|
79
|
-
<td><code>data-aria-label</code></td>
|
|
80
|
-
<td>string</td>
|
|
81
|
-
<td>Accessible <strong><code>aria-label</code></strong> when the slot text is not enough</td>
|
|
82
|
-
</tr>
|
|
83
|
-
</tbody></table>
|
|
84
|
-
<table>
|
|
85
|
-
<thead>
|
|
86
|
-
<tr>
|
|
87
|
-
<th>Slot</th>
|
|
88
|
-
<th>Description</th>
|
|
89
|
-
</tr>
|
|
90
|
-
</thead>
|
|
91
|
-
<tbody><tr>
|
|
92
|
-
<td><em>(default)</em></td>
|
|
93
|
-
<td>Link content (text, icons)</td>
|
|
94
|
-
</tr>
|
|
95
|
-
</tbody></table>
|
|
96
|
-
|
|
97
|
-
</article>
|
|
98
|
-
</main>
|
|
99
|
-
</body>
|
|
100
|
-
</html>
|