@supersoniks/concorde 5.1.0 → 5.1.2
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/.agents/skills/concorde-docs/SKILL.md +153 -0
- package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
- package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
- package/.agents/skills/concorde-docs/templates/guide.md +25 -0
- 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 +2013 -2013
- package/AUDIT.md +228 -0
- package/PLAN-AMELIORATION.md +220 -0
- package/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +3 -3
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
- package/ai/skills/concorde-theme/SKILL.md +1 -1
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +16 -16
- package/concorde-core.es.js +235 -233
- package/dist/concorde-core.bundle.js +16 -16
- package/dist/concorde-core.es.js +235 -233
- 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/.htaccess +75 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/assets/index-BgG6FFPt.js +11765 -0
- package/docs/assets/index-x89XINSG.css +1 -0
- package/docs/core/components/functional/date/date.html +211 -0
- package/docs/core/components/functional/date/date.md +150 -0
- package/docs/core/components/functional/fetch/fetch.html +180 -0
- package/docs/core/components/functional/fetch/fetch.md +108 -0
- package/docs/core/components/functional/if/if.html +65 -0
- package/docs/core/components/functional/if/if.md +34 -0
- package/docs/core/components/functional/jsonata/jsonata.html +110 -0
- package/docs/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/core/components/functional/list/list.html +198 -0
- package/docs/core/components/functional/list/list.md +121 -0
- package/docs/core/components/functional/mix/mix.html +78 -0
- package/docs/core/components/functional/mix/mix.md +46 -0
- package/docs/core/components/functional/queue/queue.html +155 -0
- package/docs/core/components/functional/queue/queue.md +51 -0
- package/docs/core/components/functional/router/router.html +154 -0
- package/docs/core/components/functional/router/router.md +93 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/core/components/functional/sdui/sdui.html +397 -0
- package/docs/core/components/functional/sdui/sdui.md +307 -0
- package/docs/core/components/functional/states/states.html +141 -0
- package/docs/core/components/functional/states/states.md +112 -0
- package/docs/core/components/functional/submit/submit.html +178 -0
- package/docs/core/components/functional/submit/submit.md +106 -0
- package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
- package/docs/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/core/components/functional/translation/translation.html +60 -0
- package/docs/core/components/functional/translation/translation.md +38 -0
- package/docs/core/components/functional/value/value.html +81 -0
- package/docs/core/components/functional/value/value.md +47 -0
- package/docs/core/components/ui/alert/alert.html +201 -0
- package/docs/core/components/ui/alert/alert.md +186 -0
- package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
- package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/core/components/ui/badge/badge.html +197 -0
- package/docs/core/components/ui/badge/badge.md +181 -0
- package/docs/core/components/ui/button/button.html +309 -0
- package/docs/core/components/ui/button/button.md +216 -0
- package/docs/core/components/ui/captcha/captcha.html +80 -0
- package/docs/core/components/ui/captcha/captcha.md +56 -0
- package/docs/core/components/ui/card/card.html +254 -0
- package/docs/core/components/ui/card/card.md +215 -0
- package/docs/core/components/ui/divider/divider.html +144 -0
- package/docs/core/components/ui/divider/divider.md +126 -0
- package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
- package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
- package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
- package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
- package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/core/components/ui/form/input/input.html +235 -0
- package/docs/core/components/ui/form/input/input.md +142 -0
- package/docs/core/components/ui/form/radio/radio.html +144 -0
- package/docs/core/components/ui/form/radio/radio.md +78 -0
- package/docs/core/components/ui/form/select/select.html +178 -0
- package/docs/core/components/ui/form/select/select.md +86 -0
- package/docs/core/components/ui/form/switch/switch.html +146 -0
- package/docs/core/components/ui/form/switch/switch.md +80 -0
- package/docs/core/components/ui/form/textarea/textarea.html +162 -0
- package/docs/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/core/components/ui/group/group.html +113 -0
- package/docs/core/components/ui/group/group.md +77 -0
- package/docs/core/components/ui/icon/icon.html +223 -0
- package/docs/core/components/ui/icon/icon.md +214 -0
- package/docs/core/components/ui/image/image.html +194 -0
- package/docs/core/components/ui/image/image.md +167 -0
- package/docs/core/components/ui/link/link.html +101 -0
- package/docs/core/components/ui/link/link.md +81 -0
- package/docs/core/components/ui/loader/loader.html +114 -0
- package/docs/core/components/ui/loader/loader.md +87 -0
- package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
- package/docs/core/components/ui/menu/menu.md +370 -0
- package/docs/core/components/ui/modal/modal.html +324 -0
- package/docs/core/components/ui/modal/modal.md +211 -0
- package/docs/core/components/ui/pop/pop.html +250 -0
- package/docs/core/components/ui/pop/pop.md +216 -0
- package/docs/core/components/ui/progress/progress.html +132 -0
- package/docs/core/components/ui/progress/progress.md +109 -0
- package/docs/core/components/ui/table/table.html +333 -0
- package/docs/core/components/ui/table/table.md +267 -0
- package/docs/core/components/ui/theme/theme.html +116 -0
- package/docs/core/components/ui/theme/theme.md +97 -0
- package/docs/core/components/ui/toast/toast.html +185 -0
- package/docs/core/components/ui/toast/toast.md +147 -0
- package/docs/core/components/ui/tooltip/tooltip.html +112 -0
- package/docs/core/components/ui/tooltip/tooltip.md +89 -0
- package/docs/docs/decorators/ancestor-attribute.html +71 -0
- package/docs/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/docs/decorators/auto-subscribe.html +61 -0
- package/docs/docs/decorators/auto-subscribe.md +40 -0
- package/docs/docs/decorators/bind.html +86 -0
- package/docs/docs/decorators/bind.md +77 -0
- package/docs/docs/decorators/get.html +166 -0
- package/docs/docs/decorators/get.md +160 -0
- package/docs/docs/decorators/handle.html +139 -0
- package/docs/docs/decorators/handle.md +119 -0
- package/docs/docs/decorators/on-assign.html +72 -0
- package/docs/docs/decorators/on-assign.md +63 -0
- package/docs/docs/decorators/patch.html +76 -0
- package/docs/docs/decorators/patch.md +44 -0
- package/docs/docs/decorators/post.html +150 -0
- package/docs/docs/decorators/post.md +134 -0
- package/docs/docs/decorators/publish.html +74 -0
- package/docs/docs/decorators/publish.md +56 -0
- package/docs/docs/decorators/put.html +83 -0
- package/docs/docs/decorators/put.md +51 -0
- package/docs/docs/decorators/subscribe.html +91 -0
- package/docs/docs/decorators/subscribe.md +87 -0
- package/docs/docs/decorators/wait-for-ancestors.html +82 -0
- package/docs/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/docs/directives/sub.html +79 -0
- package/docs/docs/directives/sub.md +75 -0
- package/docs/docs/directives/t.html +91 -0
- package/docs/docs/directives/t.md +73 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
- package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/components.md +5 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
- package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
- package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
- package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
- package/docs/docs/getting-started/installation.html +69 -0
- package/docs/docs/getting-started/installation.md +36 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
- package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
- package/docs/docs/getting-started/start.html +47 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
- package/docs/docs/getting-started/theming.html +334 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
- package/docs/docs/index.html +99 -0
- package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
- package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
- package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
- package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
- package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
- package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
- package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
- package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
- package/docs/docs-mock-api-sw.js +60 -223
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/hubs/decorators.html +443 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +371 -0
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +28 -0
- package/docs/img/concorde/plane_01.jpg +0 -0
- package/docs/img/concorde/plane_02.jpg +0 -0
- package/docs/img/concorde/plane_03.jpg +0 -0
- package/docs/img/concorde/plane_04.jpg +0 -0
- package/docs/img/concorde/plane_05.jpg +0 -0
- package/docs/img/concorde/plane_06.jpg +0 -0
- package/docs/img/concorde/plane_07.jpg +0 -0
- package/docs/img/concorde/plane_08.jpg +0 -0
- package/docs/img/concorde/plane_09.jpg +0 -0
- package/docs/img/concorde/plane_10.jpg +0 -0
- package/docs/img/concorde/plane_11.jpg +0 -0
- package/docs/img/concorde/plane_12.jpg +0 -0
- package/docs/img/concorde/plane_13.jpg +0 -0
- package/docs/index.html +96 -67
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +3329 -3295
- package/docs/llms.txt +94 -92
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +78 -78
- package/docs/src/core/components/functional/date/date.md +91 -231
- package/docs/src/core/components/functional/fetch/fetch.md +66 -83
- package/docs/src/core/components/functional/if/if.md +28 -3
- package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/docs/src/core/components/functional/list/list.md +99 -43
- package/docs/src/core/components/functional/mix/mix.md +31 -26
- package/docs/src/core/components/functional/queue/queue.md +40 -61
- package/docs/src/core/components/functional/router/router.md +64 -65
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/docs/src/core/components/functional/sdui/example.json +19 -86
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +196 -245
- package/docs/src/core/components/functional/states/states.md +86 -61
- package/docs/src/core/components/functional/submit/submit.md +64 -72
- package/docs/src/core/components/functional/translation/translation.md +38 -0
- package/docs/src/core/components/functional/value/value.md +34 -22
- package/docs/src/core/components/ui/alert/alert.md +139 -74
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +137 -83
- package/docs/src/core/components/ui/button/button.md +139 -105
- package/docs/src/core/components/ui/captcha/captcha.md +50 -6
- package/docs/src/core/components/ui/card/card.md +183 -65
- package/docs/src/core/components/ui/divider/divider.md +104 -13
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/radio/radio.md +55 -34
- package/docs/src/core/components/ui/form/select/select.md +60 -45
- package/docs/src/core/components/ui/form/switch/switch.md +57 -34
- package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/docs/src/core/components/ui/group/group.md +49 -47
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +132 -72
- package/docs/src/core/components/ui/link/link.md +46 -8
- package/docs/src/core/components/ui/loader/loader.md +55 -23
- package/docs/src/core/components/ui/menu/menu.md +155 -114
- package/docs/src/core/components/ui/modal/modal.md +154 -62
- package/docs/src/core/components/ui/pop/pop.md +185 -65
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +146 -334
- package/docs/src/core/components/ui/theme/theme.md +97 -0
- package/docs/src/core/components/ui/toast/toast.md +80 -99
- package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
- package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/src/docs/decorators/auto-subscribe.md +40 -0
- package/docs/src/docs/decorators/bind.md +77 -0
- package/docs/src/docs/decorators/get.md +160 -0
- package/docs/src/docs/decorators/handle.md +119 -0
- package/docs/src/docs/decorators/on-assign.md +63 -0
- package/docs/src/docs/decorators/patch.md +44 -0
- package/docs/src/docs/decorators/post.md +134 -0
- package/docs/src/docs/decorators/publish.md +56 -0
- package/docs/src/docs/decorators/put.md +51 -0
- package/docs/src/docs/decorators/subscribe.md +87 -0
- package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/src/docs/directives/sub.md +75 -0
- package/docs/src/docs/directives/t.md +73 -0
- package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/getting-started/components.md +5 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
- package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
- package/docs/src/docs/getting-started/installation.md +36 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
- package/docs/src/docs/getting-started/start.md +35 -0
- package/docs/src/docs/getting-started/theming.md +253 -0
- package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
- package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
- package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
- package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
- package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
- package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
- package/docs/src/docs/search/docs-search.json +3729 -2949
- package/docs/src/tsconfig.json +176 -5
- package/index.html +94 -67
- package/package.json +11 -4
- package/public/docs-mock-api-sw.js +58 -223
- package/public/docs-mock-api-sw.js.map +4 -4
- 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/public/img/concorde/plane_01.jpg +0 -0
- package/public/img/concorde/plane_02.jpg +0 -0
- package/public/img/concorde/plane_03.jpg +0 -0
- package/public/img/concorde/plane_04.jpg +0 -0
- package/public/img/concorde/plane_05.jpg +0 -0
- package/public/img/concorde/plane_06.jpg +0 -0
- package/public/img/concorde/plane_07.jpg +0 -0
- package/public/img/concorde/plane_08.jpg +0 -0
- package/public/img/concorde/plane_09.jpg +0 -0
- package/public/img/concorde/plane_10.jpg +0 -0
- package/public/img/concorde/plane_11.jpg +0 -0
- package/public/img/concorde/plane_12.jpg +0 -0
- package/public/img/concorde/plane_13.jpg +0 -0
- package/public/robots.txt +11 -10
- package/scripts/docs-markdown-vite-plugin.ts +37 -0
- package/scripts/docs-public-url.mjs +50 -0
- package/scripts/docs.htaccess +75 -0
- package/scripts/generate-crawl-docs.mjs +207 -116
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/post-build-docs.js +34 -50
- package/scripts/post-build.mjs +0 -0
- package/src/core/components/functional/date/date.md +91 -231
- package/src/core/components/functional/fetch/fetch.md +66 -83
- package/src/core/components/functional/if/if.md +28 -3
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +99 -43
- package/src/core/components/functional/mix/mix.md +31 -26
- package/src/core/components/functional/queue/queue.demo.ts +10 -7
- package/src/core/components/functional/queue/queue.md +40 -61
- package/src/core/components/functional/router/router.demo.ts +16 -16
- package/src/core/components/functional/router/router.md +64 -65
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/src/core/components/functional/sdui/example.json +19 -86
- package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/src/core/components/functional/sdui/sdui.md +187 -358
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.demo.ts +21 -22
- package/src/core/components/functional/states/states.md +86 -61
- package/src/core/components/functional/states/states.ts +1 -1
- package/src/core/components/functional/submit/submit.md +64 -72
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/translation/translation.md +38 -0
- package/src/core/components/functional/value/value.md +34 -22
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/alert/alert.md +48 -58
- package/src/core/components/ui/badge/badge.md +27 -34
- package/src/core/components/ui/button/button.md +139 -106
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +17 -32
- package/src/core/components/ui/card/card.md +6 -6
- package/src/core/components/ui/divider/divider.md +8 -11
- package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
- package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
- package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
- package/src/core/components/ui/form/input/input.md +95 -95
- package/src/core/components/ui/form/radio/radio.md +55 -34
- package/src/core/components/ui/form/select/select.md +60 -45
- package/src/core/components/ui/form/switch/switch.md +57 -34
- package/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/src/core/components/ui/group/group.md +35 -33
- package/src/core/components/ui/icon/icon.md +4 -4
- package/src/core/components/ui/image/image.md +41 -107
- package/src/core/components/ui/link/link.md +6 -6
- package/src/core/components/ui/loader/loader.md +30 -55
- package/src/core/components/ui/menu/menu.md +27 -27
- package/src/core/components/ui/modal/modal.md +72 -96
- package/src/core/components/ui/modal/modal.ts +14 -11
- package/src/core/components/ui/pop/pop.md +80 -158
- package/src/core/components/ui/progress/progress.md +2 -2
- package/src/core/components/ui/table/table.md +91 -255
- package/src/core/components/ui/theme/theme.md +11 -36
- package/src/core/components/ui/toast/toast.md +48 -117
- package/src/core/components/ui/tooltip/tooltip.md +27 -62
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/LocationHandler.spec.ts +80 -0
- package/src/core/utils/LocationHandler.ts +5 -9
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +88 -75
- package/src/docs/components/docs-demo-sources.ts +70 -147
- package/src/docs/components/docs-lit-demo.ts +20 -40
- package/src/docs/components/docs-source-link.ts +0 -82
- package/src/docs/decorators/ancestor-attribute.md +59 -0
- package/src/docs/decorators/auto-subscribe.md +40 -0
- package/src/docs/decorators/bind.md +77 -0
- package/src/docs/decorators/get.md +160 -0
- package/src/docs/decorators/handle.md +119 -0
- package/src/docs/decorators/on-assign.md +63 -0
- package/src/docs/decorators/patch.md +44 -0
- package/src/docs/decorators/post.md +134 -0
- package/src/docs/decorators/publish.md +56 -0
- package/src/docs/decorators/put.md +51 -0
- package/src/docs/decorators/subscribe.md +87 -0
- package/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/src/docs/directives/sub.md +75 -0
- package/src/docs/directives/t.md +73 -0
- package/src/docs/docs-location.spec.ts +46 -0
- package/src/docs/docs-location.ts +123 -32
- package/src/docs/docs.ts +6 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
- package/src/docs/example/decorators-demo-geo.ts +30 -19
- package/src/docs/example/decorators-demo-post.ts +88 -186
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
- package/src/docs/example/decorators-demo.ts +85 -98
- package/src/docs/example/docs-api-config-demos.ts +19 -20
- package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
- package/src/docs/example/docs-flight-demos.ts +147 -0
- package/src/docs/example/docs-jsonata-demos.ts +52 -52
- package/src/docs/example/docs-list-demos.ts +43 -123
- package/src/docs/example/docs-provider-keys.ts +33 -28
- package/src/docs/example/docs-queue-demos.ts +37 -77
- package/src/docs/example/docs-router-demos.ts +20 -25
- package/src/docs/example/docs-submit-demos.ts +48 -48
- package/src/docs/example/docs-toggle-demos.ts +4 -3
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +76 -0
- package/src/docs/getting-started/components.md +5 -0
- package/src/docs/getting-started/create-a-component.md +136 -0
- package/src/docs/getting-started/dataFlow.md +87 -0
- package/src/docs/getting-started/installation.md +36 -0
- package/src/docs/getting-started/my-first-component.md +227 -0
- package/src/docs/getting-started/start.md +35 -0
- package/src/docs/getting-started/theming.md +253 -0
- package/src/docs/header/header.ts +240 -71
- package/src/docs/home/catalog.ts +44 -0
- package/src/docs/home/home.ts +520 -0
- package/src/docs/home/mach-stage.ts +389 -0
- package/src/docs/layout.ts +12 -11
- package/src/docs/misc/api-configuration.md +79 -0
- package/src/docs/misc/dataProviderKey.md +168 -0
- package/src/docs/misc/docs-mock-api.md +62 -0
- package/src/docs/misc/dynamic-path.md +71 -0
- package/src/docs/misc/endpoint.md +45 -0
- package/src/docs/misc/html-integration.md +14 -0
- package/src/docs/mock-api/api-config-mock.ts +5 -0
- package/src/docs/mock-api/fixtures.ts +0 -278
- package/src/docs/mock-api/flights.ts +89 -0
- package/src/docs/mock-api/router.ts +3 -4
- package/src/docs/mock-api/urls.ts +1 -2
- package/src/docs/navigation/components-index.ts +56 -0
- package/src/docs/navigation/navigation.ts +219 -232
- package/src/docs/navigation/pager.ts +67 -0
- package/src/docs/navigation/toc.ts +101 -0
- package/src/docs/search/docs-search.json +2419 -4374
- package/src/docs/search/markdown-renderer.ts +33 -7
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- 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 +23 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +8 -4
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- package/.github/workflows/ci.yml +0 -21
- package/.github-export-ignore +0 -30
- package/CONTRIBUTING.md +0 -59
- package/DEV.md +0 -54
- package/LICENSE +0 -21
- package/OPEN_SOURCE_CHECKPOINT.md +0 -133
- package/concorde-3d.bundle.js +0 -3960
- package/concorde-3d.es.js +0 -33433
- package/concorde-hugging-face-infer.bundle.js +0 -32
- package/concorde-hugging-face-infer.es.js +0 -2952
- package/concorde-interactive.bundle.js +0 -1157
- package/concorde-interactive.es.js +0 -10734
- package/concorde-shader.bundle.js +0 -116
- package/concorde-shader.es.js +0 -8353
- package/concorde-webgpu.bundle.js +0 -307
- package/concorde-webgpu.es.js +0 -8627
- package/docs/assets/index-D8MVWqY6.js +0 -12251
- package/docs/assets/index-DiD0qYvE.css +0 -1
- 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/value/value.html +0 -51
- package/docs/crawl/core/components/ui/alert/alert.html +0 -110
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
- package/docs/crawl/core/components/ui/badge/badge.html +0 -119
- package/docs/crawl/core/components/ui/button/button.html +0 -149
- package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
- package/docs/crawl/core/components/ui/card/card.html +0 -99
- package/docs/crawl/core/components/ui/divider/divider.html +0 -58
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
- 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 -82
- package/docs/crawl/core/components/ui/icon/icon.html +0 -133
- package/docs/crawl/core/components/ui/image/image.html +0 -110
- package/docs/crawl/core/components/ui/link/link.html +0 -42
- package/docs/crawl/core/components/ui/loader/loader.html +0 -50
- package/docs/crawl/core/components/ui/modal/modal.html +0 -117
- package/docs/crawl/core/components/ui/pop/pop.html +0 -102
- package/docs/crawl/core/components/ui/progress/progress.html +0 -58
- package/docs/crawl/core/components/ui/table/table.html +0 -413
- package/docs/crawl/core/components/ui/toast/toast.html +0 -122
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
- 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 -116
- 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/concorde-manual-install.html +0 -100
- package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
- 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 -85
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
- package/docs/crawl/hubs/decorators.html +0 -547
- package/docs/crawl/hubs/form-components.html +0 -359
- package/docs/crawl/hubs/remote-data.html +0 -452
- package/docs/crawl/index.html +0 -101
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- 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 -127
- 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/concorde-manual-install.md +0 -133
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
- 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 -91
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/docs/src/tsconfig.declarations.json +0 -22
- package/docs/src/tsconfig.emit.json +0 -23
- package/gitlab/job_github_mirror.sh +0 -39
- package/scripts/github-export.mjs +0 -150
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/src/css.d.ts +0 -19
- package/src/docs/_core-concept/overview.md +0 -57
- package/src/docs/_core-concept/subscriber.md +0 -75
- package/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/src/docs/_decorators/auto-subscribe.md +0 -202
- package/src/docs/_decorators/bind.md +0 -167
- package/src/docs/_decorators/get.md +0 -162
- package/src/docs/_decorators/handle.md +0 -175
- package/src/docs/_decorators/on-assign.md +0 -390
- package/src/docs/_decorators/patch.md +0 -70
- package/src/docs/_decorators/post.md +0 -146
- package/src/docs/_decorators/publish.md +0 -55
- package/src/docs/_decorators/put.md +0 -70
- package/src/docs/_decorators/subscribe.md +0 -100
- package/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/src/docs/_directives/sub.md +0 -91
- package/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/src/docs/_getting-started/concorde-outside.md +0 -33
- package/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/src/docs/_getting-started/pubsub.md +0 -37
- package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
- package/src/docs/example/docs-joke-demos.ts +0 -297
- package/src/docs/prism/index.ts +0 -6
- package/src/docs/prism/prism.css +0 -158
- package/src/docs/prism/prism.js +0 -1022
- package/src/tsconfig.declarations.json +0 -22
- package/src/tsconfig.emit.json +0 -23
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/image" 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 by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-image wraps a responsive <img> with aspect ratio, object-fit: cover, optional rounded corners and a load transition. The host shows a placeholder background (--sc-placeholder-bg) until the file ">
|
|
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/core/components/ui/image">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/image.md">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<header>
|
|
15
|
+
<p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/image">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
|
|
16
|
+
</header>
|
|
17
|
+
<main>
|
|
18
|
+
<article>
|
|
19
|
+
<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 a load transition. The host shows a placeholder background (--sc-placeholder-bg) until the file <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/core/components/ui/image">https://concorde.supersoniks.org/core/components/ui/image</a>.</span></p>
|
|
20
|
+
<h1 id="image">Image</h1>
|
|
21
|
+
<p><strong><code>sonic-image</code></strong> wraps a responsive <code><img></code> with aspect ratio, <code>object-fit: cover</code>, optional rounded corners and a load transition. The host shows a placeholder background (<code>--sc-placeholder-bg</code>) until the file loads. With no <code>loading</code>, the image is <code>lazy</code>; set <code>loading="eager"</code> for above-the-fold images.</p>
|
|
22
|
+
<h2 id="rounded">Rounded</h2>
|
|
23
|
+
<p>With no <code>rounded</code>, corners are square. Boolean <code>rounded</code> uses the theme token <code>--sc-rounded</code>; <code>full</code> draws a circle when paired with <code>ratio="1/1"</code>.</p>
|
|
24
|
+
<pre><code><div class="grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs">
|
|
25
|
+
<div>
|
|
26
|
+
<sonic-image ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
27
|
+
<p class="mt-2">default</p>
|
|
28
|
+
</div>
|
|
29
|
+
<div>
|
|
30
|
+
<sonic-image rounded="sm" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
31
|
+
<p class="mt-2">sm</p>
|
|
32
|
+
</div>
|
|
33
|
+
<div>
|
|
34
|
+
<sonic-image rounded ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
35
|
+
<p class="mt-2">rounded</p>
|
|
36
|
+
</div>
|
|
37
|
+
<div>
|
|
38
|
+
<sonic-image rounded="md" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
39
|
+
<p class="mt-2">md</p>
|
|
40
|
+
</div>
|
|
41
|
+
<div>
|
|
42
|
+
<sonic-image rounded="lg" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
43
|
+
<p class="mt-2">lg</p>
|
|
44
|
+
</div>
|
|
45
|
+
<div>
|
|
46
|
+
<sonic-image rounded="xl" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
47
|
+
<p class="mt-2">xl</p>
|
|
48
|
+
</div>
|
|
49
|
+
<div>
|
|
50
|
+
<sonic-image rounded="full" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
51
|
+
<p class="mt-2">full</p>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</code></pre>
|
|
55
|
+
<h2 id="aspect-ratio">Aspect ratio</h2>
|
|
56
|
+
<p><code>ratio</code> sets CSS <code>aspect-ratio</code> on the image (default <code>auto</code>). The image always fills the host width.</p>
|
|
57
|
+
<pre><code><div class="grid gap-8 grid-cols-2 items-center">
|
|
58
|
+
<sonic-image src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
59
|
+
<sonic-image ratio="16/9" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
60
|
+
<sonic-image ratio="1/1" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
61
|
+
<sonic-image ratio="2/3" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
62
|
+
</div>
|
|
63
|
+
</code></pre>
|
|
64
|
+
<h2 id="object-position">Object position</h2>
|
|
65
|
+
<p><code>objectPosition</code> maps to CSS <code>object-position</code> (default <code>center center</code>). Use it on wide crops when the subject sits off-center.</p>
|
|
66
|
+
<pre><code><div class="grid gap-8 grid-cols-2 items-center">
|
|
67
|
+
<sonic-image ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
|
|
68
|
+
<sonic-image objectPosition="center top" ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
|
|
69
|
+
</div>
|
|
70
|
+
</code></pre>
|
|
71
|
+
<h2 id="cover">Cover</h2>
|
|
72
|
+
<p><code>cover</code> stretches the image over a <strong>positioned</strong> parent (<code>position: relative</code> with a height). <code>ratio</code> is ignored while <code>cover</code> is set.</p>
|
|
73
|
+
<pre><code><div class="h-96 relative rounded-lg overflow-hidden">
|
|
74
|
+
<sonic-image cover src="img/concorde/plane_10.jpg" alt="Concorde fleet parked in a star"></sonic-image>
|
|
75
|
+
</div>
|
|
76
|
+
</code></pre>
|
|
77
|
+
<h2 id="load-transition">Load transition</h2>
|
|
78
|
+
<p>Set <code>transition</code> to <code>fade</code> or <code>fade-scale-out</code>. The image stays transparent until the browser fires <code>load</code>, then animates in. <strong>Changing <code>src</code> on an existing element does not replay the effect</strong>: mount a new <code>sonic-image</code> instead (galleries, infinite scroll).</p>
|
|
79
|
+
<pre><code><div class="flex flex-wrap gap-2 mb-4">
|
|
80
|
+
<sonic-button
|
|
81
|
+
size="sm"
|
|
82
|
+
onclick="(function () {
|
|
83
|
+
var host = document.getElementById('sonic-image-transition-host');
|
|
84
|
+
var img = document.createElement('sonic-image');
|
|
85
|
+
img.transition = 'fade';
|
|
86
|
+
img.ratio = '1/1';
|
|
87
|
+
img.rounded = 'md';
|
|
88
|
+
img.loading = 'eager';
|
|
89
|
+
img.style.width = '8rem';
|
|
90
|
+
var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
|
|
91
|
+
img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
|
|
92
|
+
host.appendChild(img);
|
|
93
|
+
})()"
|
|
94
|
+
>
|
|
95
|
+
Add image (fade)
|
|
96
|
+
</sonic-button>
|
|
97
|
+
<sonic-button
|
|
98
|
+
size="sm"
|
|
99
|
+
variant="outline"
|
|
100
|
+
onclick="(function () {
|
|
101
|
+
var host = document.getElementById('sonic-image-transition-host');
|
|
102
|
+
var img = document.createElement('sonic-image');
|
|
103
|
+
img.transition = 'fade-scale-out';
|
|
104
|
+
img.ratio = '1/1';
|
|
105
|
+
img.rounded = 'md';
|
|
106
|
+
img.loading = 'eager';
|
|
107
|
+
img.style.width = '8rem';
|
|
108
|
+
var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
|
|
109
|
+
img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
|
|
110
|
+
host.appendChild(img);
|
|
111
|
+
})()"
|
|
112
|
+
>
|
|
113
|
+
Add image (fade-scale-out)
|
|
114
|
+
</sonic-button>
|
|
115
|
+
<sonic-button
|
|
116
|
+
size="sm"
|
|
117
|
+
variant="ghost"
|
|
118
|
+
onclick="document.getElementById('sonic-image-transition-host').replaceChildren()"
|
|
119
|
+
>
|
|
120
|
+
Clear
|
|
121
|
+
</sonic-button>
|
|
122
|
+
</div>
|
|
123
|
+
<div id="sonic-image-transition-host" class="flex flex-wrap gap-2 min-h-[5rem]"></div>
|
|
124
|
+
</code></pre>
|
|
125
|
+
<h2 id="accessibility">Accessibility</h2>
|
|
126
|
+
<p>Always set a meaningful <code>alt</code>. Use <code>alt=""</code> only for decorative images.</p>
|
|
127
|
+
<pre><code><sonic-image
|
|
128
|
+
rounded="md"
|
|
129
|
+
ratio="16/9"
|
|
130
|
+
alt="Crowd gathered around Concorde at night"
|
|
131
|
+
src="img/concorde/plane_07.jpg"
|
|
132
|
+
></sonic-image>
|
|
133
|
+
</code></pre>
|
|
134
|
+
<h2 id="api-reference">API reference</h2>
|
|
135
|
+
<table>
|
|
136
|
+
<thead>
|
|
137
|
+
<tr>
|
|
138
|
+
<th>Attribute</th>
|
|
139
|
+
<th>Values</th>
|
|
140
|
+
<th>Description</th>
|
|
141
|
+
</tr>
|
|
142
|
+
</thead>
|
|
143
|
+
<tbody><tr>
|
|
144
|
+
<td><code>src</code></td>
|
|
145
|
+
<td>URL</td>
|
|
146
|
+
<td>Image URL passed to <code><img src></code></td>
|
|
147
|
+
</tr>
|
|
148
|
+
<tr>
|
|
149
|
+
<td><code>alt</code></td>
|
|
150
|
+
<td>string</td>
|
|
151
|
+
<td>Accessible description; <code>""</code> only for decorative images</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td><code>loading</code></td>
|
|
155
|
+
<td><code>lazy</code> (default) · <code>eager</code></td>
|
|
156
|
+
<td>Native lazy loading</td>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td><code>ratio</code></td>
|
|
160
|
+
<td>CSS ratio (default <code>auto</code>)</td>
|
|
161
|
+
<td><code>aspect-ratio</code> of the image; ignored when <code>cover</code> is set</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>rounded</code></td>
|
|
165
|
+
<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>
|
|
166
|
+
<td>Corner radius from theme tokens</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td><code>objectPosition</code></td>
|
|
170
|
+
<td>CSS position (default <code>center center</code>)</td>
|
|
171
|
+
<td>Maps to <code>object-position</code></td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td><code>imageRendering</code></td>
|
|
175
|
+
<td>CSS value (default <code>auto</code>)</td>
|
|
176
|
+
<td>Maps to <code>image-rendering</code></td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td><code>cover</code></td>
|
|
180
|
+
<td>boolean</td>
|
|
181
|
+
<td>Absolutely fills a positioned parent</td>
|
|
182
|
+
</tr>
|
|
183
|
+
<tr>
|
|
184
|
+
<td><code>transition</code></td>
|
|
185
|
+
<td><code>fade</code> · <code>fade-scale-out</code></td>
|
|
186
|
+
<td>Entrance animation after <code>load</code>; not replayed on <code>src</code> change</td>
|
|
187
|
+
</tr>
|
|
188
|
+
</tbody></table>
|
|
189
|
+
<p>No slots.</p>
|
|
190
|
+
|
|
191
|
+
</article>
|
|
192
|
+
</main>
|
|
193
|
+
</body>
|
|
194
|
+
</html>
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# Image
|
|
2
|
+
|
|
3
|
+
**`sonic-image`** wraps a responsive `<img>` with aspect ratio, `object-fit: cover`, optional rounded corners and a load transition. The host shows a placeholder background (`--sc-placeholder-bg`) until the file loads. With no `loading`, the image is `lazy`; set `loading="eager"` for above-the-fold images.
|
|
4
|
+
|
|
5
|
+
## Rounded
|
|
6
|
+
|
|
7
|
+
With no `rounded`, corners are square. Boolean `rounded` uses the theme token `--sc-rounded`; `full` draws a circle when paired with `ratio="1/1"`.
|
|
8
|
+
|
|
9
|
+
<sonic-code>
|
|
10
|
+
<template>
|
|
11
|
+
<div class="grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs">
|
|
12
|
+
<div>
|
|
13
|
+
<sonic-image ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
14
|
+
<p class="mt-2">default</p>
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<sonic-image rounded="sm" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
18
|
+
<p class="mt-2">sm</p>
|
|
19
|
+
</div>
|
|
20
|
+
<div>
|
|
21
|
+
<sonic-image rounded ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
22
|
+
<p class="mt-2">rounded</p>
|
|
23
|
+
</div>
|
|
24
|
+
<div>
|
|
25
|
+
<sonic-image rounded="md" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
26
|
+
<p class="mt-2">md</p>
|
|
27
|
+
</div>
|
|
28
|
+
<div>
|
|
29
|
+
<sonic-image rounded="lg" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
30
|
+
<p class="mt-2">lg</p>
|
|
31
|
+
</div>
|
|
32
|
+
<div>
|
|
33
|
+
<sonic-image rounded="xl" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
34
|
+
<p class="mt-2">xl</p>
|
|
35
|
+
</div>
|
|
36
|
+
<div>
|
|
37
|
+
<sonic-image rounded="full" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
|
|
38
|
+
<p class="mt-2">full</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</template>
|
|
42
|
+
</sonic-code>
|
|
43
|
+
|
|
44
|
+
## Aspect ratio
|
|
45
|
+
|
|
46
|
+
`ratio` sets CSS `aspect-ratio` on the image (default `auto`). The image always fills the host width.
|
|
47
|
+
|
|
48
|
+
<sonic-code>
|
|
49
|
+
<template>
|
|
50
|
+
<div class="grid gap-8 grid-cols-2 items-center">
|
|
51
|
+
<sonic-image src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
52
|
+
<sonic-image ratio="16/9" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
53
|
+
<sonic-image ratio="1/1" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
54
|
+
<sonic-image ratio="2/3" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
</sonic-code>
|
|
58
|
+
|
|
59
|
+
## Object position
|
|
60
|
+
|
|
61
|
+
`objectPosition` maps to CSS `object-position` (default `center center`). Use it on wide crops when the subject sits off-center.
|
|
62
|
+
|
|
63
|
+
<sonic-code>
|
|
64
|
+
<template>
|
|
65
|
+
<div class="grid gap-8 grid-cols-2 items-center">
|
|
66
|
+
<sonic-image ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
|
|
67
|
+
<sonic-image objectPosition="center top" ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
|
|
68
|
+
</div>
|
|
69
|
+
</template>
|
|
70
|
+
</sonic-code>
|
|
71
|
+
|
|
72
|
+
## Cover
|
|
73
|
+
|
|
74
|
+
`cover` stretches the image over a **positioned** parent (`position: relative` with a height). `ratio` is ignored while `cover` is set.
|
|
75
|
+
|
|
76
|
+
<sonic-code>
|
|
77
|
+
<template>
|
|
78
|
+
<div class="h-96 relative rounded-lg overflow-hidden">
|
|
79
|
+
<sonic-image cover src="img/concorde/plane_10.jpg" alt="Concorde fleet parked in a star"></sonic-image>
|
|
80
|
+
</div>
|
|
81
|
+
</template>
|
|
82
|
+
</sonic-code>
|
|
83
|
+
|
|
84
|
+
## Load transition
|
|
85
|
+
|
|
86
|
+
Set `transition` to `fade` or `fade-scale-out`. The image stays transparent until the browser fires `load`, then animates in. **Changing `src` on an existing element does not replay the effect**: mount a new `sonic-image` instead (galleries, infinite scroll).
|
|
87
|
+
|
|
88
|
+
<sonic-code>
|
|
89
|
+
<template>
|
|
90
|
+
<div class="flex flex-wrap gap-2 mb-4">
|
|
91
|
+
<sonic-button
|
|
92
|
+
size="sm"
|
|
93
|
+
onclick="(function () {
|
|
94
|
+
var host = document.getElementById('sonic-image-transition-host');
|
|
95
|
+
var img = document.createElement('sonic-image');
|
|
96
|
+
img.transition = 'fade';
|
|
97
|
+
img.ratio = '1/1';
|
|
98
|
+
img.rounded = 'md';
|
|
99
|
+
img.loading = 'eager';
|
|
100
|
+
img.style.width = '8rem';
|
|
101
|
+
var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
|
|
102
|
+
img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
|
|
103
|
+
host.appendChild(img);
|
|
104
|
+
})()"
|
|
105
|
+
>
|
|
106
|
+
Add image (fade)
|
|
107
|
+
</sonic-button>
|
|
108
|
+
<sonic-button
|
|
109
|
+
size="sm"
|
|
110
|
+
variant="outline"
|
|
111
|
+
onclick="(function () {
|
|
112
|
+
var host = document.getElementById('sonic-image-transition-host');
|
|
113
|
+
var img = document.createElement('sonic-image');
|
|
114
|
+
img.transition = 'fade-scale-out';
|
|
115
|
+
img.ratio = '1/1';
|
|
116
|
+
img.rounded = 'md';
|
|
117
|
+
img.loading = 'eager';
|
|
118
|
+
img.style.width = '8rem';
|
|
119
|
+
var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
|
|
120
|
+
img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
|
|
121
|
+
host.appendChild(img);
|
|
122
|
+
})()"
|
|
123
|
+
>
|
|
124
|
+
Add image (fade-scale-out)
|
|
125
|
+
</sonic-button>
|
|
126
|
+
<sonic-button
|
|
127
|
+
size="sm"
|
|
128
|
+
variant="ghost"
|
|
129
|
+
onclick="document.getElementById('sonic-image-transition-host').replaceChildren()"
|
|
130
|
+
>
|
|
131
|
+
Clear
|
|
132
|
+
</sonic-button>
|
|
133
|
+
</div>
|
|
134
|
+
<div id="sonic-image-transition-host" class="flex flex-wrap gap-2 min-h-[5rem]"></div>
|
|
135
|
+
</template>
|
|
136
|
+
</sonic-code>
|
|
137
|
+
|
|
138
|
+
## Accessibility
|
|
139
|
+
|
|
140
|
+
Always set a meaningful `alt`. Use `alt=""` only for decorative images.
|
|
141
|
+
|
|
142
|
+
<sonic-code>
|
|
143
|
+
<template>
|
|
144
|
+
<sonic-image
|
|
145
|
+
rounded="md"
|
|
146
|
+
ratio="16/9"
|
|
147
|
+
alt="Crowd gathered around Concorde at night"
|
|
148
|
+
src="img/concorde/plane_07.jpg"
|
|
149
|
+
></sonic-image>
|
|
150
|
+
</template>
|
|
151
|
+
</sonic-code>
|
|
152
|
+
|
|
153
|
+
## API reference
|
|
154
|
+
|
|
155
|
+
| Attribute | Values | Description |
|
|
156
|
+
|----------|---------|-------------|
|
|
157
|
+
| `src` | URL | Image URL passed to `<img src>` |
|
|
158
|
+
| `alt` | string | Accessible description; `""` only for decorative images |
|
|
159
|
+
| `loading` | `lazy` (default) · `eager` | Native lazy loading |
|
|
160
|
+
| `ratio` | CSS ratio (default `auto`) | `aspect-ratio` of the image; ignored when `cover` is set |
|
|
161
|
+
| `rounded` | `none` (default) · boolean · `base` · `sm` · `md` · `lg` · `xl` · `full` | Corner radius from theme tokens |
|
|
162
|
+
| `objectPosition` | CSS position (default `center center`) | Maps to `object-position` |
|
|
163
|
+
| `imageRendering` | CSS value (default `auto`) | Maps to `image-rendering` |
|
|
164
|
+
| `cover` | boolean | Absolutely fills a positioned parent |
|
|
165
|
+
| `transition` | `fade` · `fade-scale-out` | Entrance animation after `load`; not replayed on `src` change |
|
|
166
|
+
|
|
167
|
+
No slots.
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/link" 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 by Supersoniks</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/core/components/ui/link">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/link.md">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<header>
|
|
15
|
+
<p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/link">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
|
|
16
|
+
</header>
|
|
17
|
+
<main>
|
|
18
|
+
<article>
|
|
19
|
+
<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/core/components/ui/link">https://concorde.supersoniks.org/core/components/ui/link</a>.</span></p>
|
|
20
|
+
<h1 id="link">Link</h1>
|
|
21
|
+
<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>
|
|
22
|
+
<h2 id="basic-example">Basic example</h2>
|
|
23
|
+
<pre><code><sonic-link href="/">Basic link with href attribute</sonic-link>
|
|
24
|
+
</code></pre>
|
|
25
|
+
<h2 id="target">Target</h2>
|
|
26
|
+
<p><strong><code>target="_blank"</code></strong> opens a new browsing context and sets <strong><code>rel="noopener noreferrer"</code></strong>.</p>
|
|
27
|
+
<pre><code><sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
|
|
28
|
+
</code></pre>
|
|
29
|
+
<h2 id="pushstate">Pushstate</h2>
|
|
30
|
+
<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>
|
|
31
|
+
<pre><code><sonic-link href="/core/components/ui/link" pushstate>Client navigation (pushstate)</sonic-link>
|
|
32
|
+
</code></pre>
|
|
33
|
+
<h2 id="autoactive">AutoActive</h2>
|
|
34
|
+
<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>
|
|
35
|
+
<pre><code><sonic-link href="/core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
|
|
36
|
+
</code></pre>
|
|
37
|
+
<h3 id="autoactive-strict-vs-partial">AutoActive strict vs partial</h3>
|
|
38
|
+
<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>
|
|
39
|
+
<pre><code><div class="grid gap-3">
|
|
40
|
+
<sonic-link href="/core/components/ui/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
|
|
41
|
+
<sonic-link href="/core/components/ui/button" autoActive="strict" class="[&[active]]:text-success">autoActive strict (other page)</sonic-link>
|
|
42
|
+
<sonic-link href="/core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
|
|
43
|
+
</div>
|
|
44
|
+
</code></pre>
|
|
45
|
+
<h3 id="autoactive-disabled">AutoActive disabled</h3>
|
|
46
|
+
<pre><code><sonic-link href="/core/components/ui/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
|
|
47
|
+
</code></pre>
|
|
48
|
+
<h2 id="accessibility">Accessibility</h2>
|
|
49
|
+
<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>
|
|
50
|
+
<h2 id="api-reference">API reference</h2>
|
|
51
|
+
<table>
|
|
52
|
+
<thead>
|
|
53
|
+
<tr>
|
|
54
|
+
<th>Attribute</th>
|
|
55
|
+
<th>Values</th>
|
|
56
|
+
<th>Description</th>
|
|
57
|
+
</tr>
|
|
58
|
+
</thead>
|
|
59
|
+
<tbody><tr>
|
|
60
|
+
<td><code>href</code></td>
|
|
61
|
+
<td>URL</td>
|
|
62
|
+
<td>Link target; without <strong><code>href</code></strong>, only the slot is rendered (no <strong><code><a></code></strong>)</td>
|
|
63
|
+
</tr>
|
|
64
|
+
<tr>
|
|
65
|
+
<td><code>target</code></td>
|
|
66
|
+
<td>e.g. <code>_blank</code></td>
|
|
67
|
+
<td>Navigation target; <strong><code>_blank</code></strong> adds <strong><code>rel="noopener noreferrer"</code></strong></td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><code>pushstate</code></td>
|
|
71
|
+
<td>boolean</td>
|
|
72
|
+
<td>Intercepts click for Concorde client navigation without reload</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td><code>autoActive</code></td>
|
|
76
|
+
<td><code>partial</code> (default) · <code>strict</code> · <code>strict-path-only</code> · <code>disabled</code></td>
|
|
77
|
+
<td>When the host gets the <strong><code>active</code></strong> attribute (same-origin <strong><code>href</code></strong> only)</td>
|
|
78
|
+
</tr>
|
|
79
|
+
<tr>
|
|
80
|
+
<td><code>data-aria-label</code></td>
|
|
81
|
+
<td>string</td>
|
|
82
|
+
<td>Accessible <strong><code>aria-label</code></strong> when the slot text is not enough</td>
|
|
83
|
+
</tr>
|
|
84
|
+
</tbody></table>
|
|
85
|
+
<table>
|
|
86
|
+
<thead>
|
|
87
|
+
<tr>
|
|
88
|
+
<th>Slot</th>
|
|
89
|
+
<th>Description</th>
|
|
90
|
+
</tr>
|
|
91
|
+
</thead>
|
|
92
|
+
<tbody><tr>
|
|
93
|
+
<td><em>(default)</em></td>
|
|
94
|
+
<td>Link content (text, icons)</td>
|
|
95
|
+
</tr>
|
|
96
|
+
</tbody></table>
|
|
97
|
+
|
|
98
|
+
</article>
|
|
99
|
+
</main>
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# Link
|
|
2
|
+
|
|
3
|
+
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 current URL on the host (`active`).
|
|
4
|
+
|
|
5
|
+
## Basic example
|
|
6
|
+
|
|
7
|
+
<sonic-code>
|
|
8
|
+
<template>
|
|
9
|
+
<sonic-link href="/">Basic link with href attribute</sonic-link>
|
|
10
|
+
</template>
|
|
11
|
+
</sonic-code>
|
|
12
|
+
|
|
13
|
+
## Target
|
|
14
|
+
|
|
15
|
+
**`target="_blank"`** opens a new browsing context and sets **`rel="noopener noreferrer"`**.
|
|
16
|
+
|
|
17
|
+
<sonic-code>
|
|
18
|
+
<template>
|
|
19
|
+
<sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
|
|
20
|
+
</template>
|
|
21
|
+
</sonic-code>
|
|
22
|
+
|
|
23
|
+
## Pushstate
|
|
24
|
+
|
|
25
|
+
Set **`pushstate`** on same-origin **`href`** values to intercept clicks and navigate through Concorde’s client router without a full reload.
|
|
26
|
+
|
|
27
|
+
<sonic-code>
|
|
28
|
+
<template>
|
|
29
|
+
<sonic-link href="/core/components/ui/link" pushstate>Client navigation (pushstate)</sonic-link>
|
|
30
|
+
</template>
|
|
31
|
+
</sonic-code>
|
|
32
|
+
|
|
33
|
+
## AutoActive
|
|
34
|
+
|
|
35
|
+
Default **`autoActive`** is **`partial`**: the host gets **`active`** when the current URL starts with **`href`**. Style with **`[&[active]]:`** utilities or host selectors.
|
|
36
|
+
|
|
37
|
+
<sonic-code>
|
|
38
|
+
<template>
|
|
39
|
+
<sonic-link href="/core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
|
|
40
|
+
</template>
|
|
41
|
+
</sonic-code>
|
|
42
|
+
|
|
43
|
+
### AutoActive strict vs partial
|
|
44
|
+
|
|
45
|
+
**`strict`** requires pathname, search, and hash to match. **`strict-path-only`** matches pathname and hash but ignores search.
|
|
46
|
+
|
|
47
|
+
<sonic-code>
|
|
48
|
+
<template>
|
|
49
|
+
<div class="grid gap-3">
|
|
50
|
+
<sonic-link href="/core/components/ui/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
|
|
51
|
+
<sonic-link href="/core/components/ui/button" autoActive="strict" class="[&[active]]:text-success">autoActive strict (other page)</sonic-link>
|
|
52
|
+
<sonic-link href="/core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
|
|
53
|
+
</div>
|
|
54
|
+
</template>
|
|
55
|
+
</sonic-code>
|
|
56
|
+
|
|
57
|
+
### AutoActive disabled
|
|
58
|
+
|
|
59
|
+
<sonic-code>
|
|
60
|
+
<template>
|
|
61
|
+
<sonic-link href="/core/components/ui/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
|
|
62
|
+
</template>
|
|
63
|
+
</sonic-code>
|
|
64
|
+
|
|
65
|
+
## Accessibility
|
|
66
|
+
|
|
67
|
+
The inner **`<a>`** uses **`focus-visible`** outline styling. Set **`data-aria-label`** when the slot text is not sufficient on its own.
|
|
68
|
+
|
|
69
|
+
## API reference
|
|
70
|
+
|
|
71
|
+
| Attribute | Values | Description |
|
|
72
|
+
|----------|---------|-------------|
|
|
73
|
+
| `href` | URL | Link target; without **`href`**, only the slot is rendered (no **`<a>`**) |
|
|
74
|
+
| `target` | e.g. `_blank` | Navigation target; **`_blank`** adds **`rel="noopener noreferrer"`** |
|
|
75
|
+
| `pushstate` | boolean | Intercepts click for Concorde client navigation without reload |
|
|
76
|
+
| `autoActive` | `partial` (default) · `strict` · `strict-path-only` · `disabled` | When the host gets the **`active`** attribute (same-origin **`href`** only) |
|
|
77
|
+
| `data-aria-label` | string | Accessible **`aria-label`** when the slot text is not enough |
|
|
78
|
+
|
|
79
|
+
| Slot | Description |
|
|
80
|
+
|------|-------------|
|
|
81
|
+
| *(default)* | Link content (text, icons) |
|