@supersoniks/concorde 5.1.2 → 5.1.3-immutable.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/.agents/skills/concorde-docs/SKILL.md +1 -1
- package/.claude/skills +1 -0
- package/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/README.md +1 -1
- package/ai/README.md +29 -41
- package/ai/skills/concorde/SKILL.md +54 -324
- package/ai/skills/concorde/rules/composition.md +32 -0
- package/ai/skills/concorde/rules/data.md +47 -0
- package/ai/skills/concorde/rules/http.md +25 -0
- package/ai/skills/concorde/rules/lists-forms.md +35 -0
- package/ai/skills/concorde/rules/styling.md +46 -0
- package/ai/skills/concorde/rules/troubleshooting.md +45 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +177 -177
- package/concorde-core.es.js +4993 -4833
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
- package/dist/concorde-core.bundle.js +177 -177
- package/dist/concorde-core.es.js +4993 -4833
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/og-concorde.jpg +0 -0
- package/dist/robots.txt +11 -10
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/index-D_alEsng.js +12122 -0
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
- package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
- package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
- package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
- package/docs/crawl/core/components/ui/button/button.html +150 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
- package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
- package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
- package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +104 -0
- package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
- package/docs/crawl/core/components/ui/image/image.html +298 -0
- package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
- package/docs/crawl/core/components/ui/loader/loader.html +124 -0
- package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
- package/docs/crawl/core/components/ui/modal/modal.html +342 -0
- package/docs/crawl/core/components/ui/pop/pop.html +296 -0
- package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
- package/docs/crawl/core/components/ui/table/table.html +545 -0
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +233 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
- package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +149 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
- package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
- package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
- package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
- package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
- package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
- package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +381 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +103 -0
- package/docs/docs-mock-api-sw.js +223 -58
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/index.html +68 -95
- package/docs/llms-full.txt +3610 -2231
- package/docs/llms.txt +86 -94
- package/docs/robots.txt +10 -11
- package/docs/sitemap.xml +84 -78
- package/docs/src/core/components/functional/date/date.md +231 -91
- package/docs/src/core/components/functional/fetch/fetch.md +83 -66
- package/docs/src/core/components/functional/if/if.md +3 -28
- package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
- package/docs/src/core/components/functional/list/list.md +43 -99
- package/docs/src/core/components/functional/mix/mix.md +26 -31
- package/docs/src/core/components/functional/queue/queue.md +61 -40
- package/docs/src/core/components/functional/router/router.md +65 -64
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/docs/src/core/components/functional/sdui/example.json +86 -19
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/docs/src/core/components/functional/sdui/sdui.md +358 -187
- package/docs/src/core/components/functional/states/states.md +61 -86
- package/docs/src/core/components/functional/submit/submit.md +72 -64
- package/docs/src/core/components/functional/value/value.md +22 -34
- package/docs/src/core/components/ui/alert/alert.md +58 -48
- package/docs/src/core/components/ui/badge/badge.md +34 -27
- package/docs/src/core/components/ui/button/button.md +106 -139
- package/docs/src/core/components/ui/captcha/captcha.md +32 -17
- package/docs/src/core/components/ui/card/card.md +6 -6
- package/docs/src/core/components/ui/divider/divider.md +11 -8
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
- package/docs/src/core/components/ui/form/radio/radio.md +34 -55
- package/docs/src/core/components/ui/form/select/select.md +45 -60
- package/docs/src/core/components/ui/form/switch/switch.md +34 -57
- package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
- package/docs/src/core/components/ui/group/group.md +33 -35
- package/docs/src/core/components/ui/icon/icon.md +4 -4
- package/docs/src/core/components/ui/image/image.md +107 -41
- package/docs/src/core/components/ui/link/link.md +6 -6
- package/docs/src/core/components/ui/loader/loader.md +55 -30
- package/docs/src/core/components/ui/menu/menu.md +27 -27
- package/docs/src/core/components/ui/modal/modal.md +96 -72
- package/docs/src/core/components/ui/pop/pop.md +158 -80
- package/docs/src/core/components/ui/progress/progress.md +2 -2
- package/docs/src/core/components/ui/table/table.md +255 -91
- package/docs/src/core/components/ui/theme/theme.md +36 -11
- package/docs/src/core/components/ui/toast/toast.md +117 -48
- package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
- package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
- package/docs/src/docs/_core-concept/overview.md +57 -0
- package/docs/src/docs/_core-concept/subscriber.md +75 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
- package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
- package/docs/src/docs/_decorators/bind.md +167 -0
- package/docs/src/docs/_decorators/get.md +162 -0
- package/docs/src/docs/_decorators/handle.md +175 -0
- package/docs/src/docs/_decorators/on-assign.md +390 -0
- package/docs/src/docs/_decorators/patch.md +70 -0
- package/docs/src/docs/_decorators/post.md +146 -0
- package/docs/src/docs/_decorators/publish.md +55 -0
- package/docs/src/docs/_decorators/put.md +70 -0
- package/docs/src/docs/_decorators/subscribe.md +100 -0
- package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
- package/docs/src/docs/_directives/sub.md +91 -0
- package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
- package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
- package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
- package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
- package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
- package/docs/src/docs/_getting-started/pubsub.md +37 -0
- package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
- package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
- package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
- package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
- package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
- package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
- package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
- package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
- package/docs/src/docs/search/docs-search.json +4375 -2420
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +2 -23
- package/gitlab/job_github_mirror.sh +39 -0
- package/index.html +89 -0
- package/package.json +22 -4
- package/public/img/og-concorde.jpg +0 -0
- package/scripts/ai-init.mjs +104 -379
- package/scripts/ai-init.test.mjs +81 -239
- package/scripts/docs-markdown-vite-plugin.ts +11 -5
- package/scripts/docs-public-url.mjs +6 -0
- package/scripts/docs.htaccess +7 -0
- package/scripts/generate-cem.mjs +244 -0
- package/scripts/generate-cem.test.mjs +122 -0
- package/scripts/generate-crawl-docs.mjs +29 -5
- package/scripts/generate-sdui-catalog.mjs +11 -10
- package/scripts/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +3 -0
- package/scripts/post-build.mjs +0 -0
- package/scripts/pre-publish.mjs +2 -1
- package/scripts/site-pages.mjs +212 -0
- package/scripts/site-pages.test.mjs +116 -0
- package/site-pages/about.md +22 -0
- package/site-pages/privacy.md +32 -0
- package/src/core/components/functional/date/date.md +1 -1
- package/src/core/components/functional/example/example.ts +3 -1
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +6 -2
- package/src/core/components/functional/list/list.ts +17 -4
- package/src/core/components/functional/mix/mix.md +0 -0
- package/src/core/components/functional/router/router.demo.ts +0 -0
- 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 +2 -2
- package/src/core/components/functional/sdui/example.json +0 -0
- package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
- package/src/core/components/functional/sdui/sdui.ts +33 -8
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.ts +0 -0
- package/src/core/components/functional/submit/submit.spec.ts +60 -0
- package/src/core/components/functional/submit/submit.ts +6 -3
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/value/value.md +0 -0
- 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/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/card/card.md +1 -1
- package/src/core/components/ui/form/input/input.md +19 -1
- package/src/core/components/ui/form/input/input.ts +8 -2
- package/src/core/components/ui/form/radio/radio.md +14 -0
- package/src/core/components/ui/image/image.md +17 -17
- package/src/core/components/ui/modal/modal.md +2 -2
- package/src/core/decorators/subscriber/bind.ts +9 -14
- package/src/core/decorators/subscriber/subscribe.ts +15 -9
- package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/PublisherProxy.ts +166 -125
- package/src/core/utils/deepReadonly.spec.ts +66 -0
- package/src/core/utils/deepReadonly.ts +71 -0
- package/src/core/utils/immutableValue.spec.ts +54 -0
- package/src/core/utils/immutableValue.ts +102 -0
- package/src/core/utils/nestedDotForm.spec.ts +88 -0
- package/src/core/utils/publisherImmutable.spec.ts +76 -0
- package/src/core/utils/route.ts +0 -0
- package/src/core/utils/strictGet.spec.ts +61 -0
- package/src/core/utils/strictGet.ts +102 -0
- package/src/css.d.ts +19 -0
- package/src/docs/components/docs-demo-sources.ts +3 -3
- package/src/docs/decorators/bind.md +23 -24
- package/src/docs/docs-location.spec.ts +10 -0
- package/src/docs/docs-location.ts +10 -0
- package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
- package/src/docs/example/docs-toggle-demos.ts +1 -1
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +29 -55
- package/src/docs/getting-started/dataFlow.md +2 -2
- package/src/docs/home/home.ts +3 -1
- package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
- package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
- package/src/docs/misc/publisher-get-immutability-study.md +229 -0
- package/src/docs/navigation/navigation.ts +5 -1
- package/src/docs/search/docs-search.json +358 -58
- package/src/docs/search/markdown-renderer.ts +6 -1
- package/src/docs/tailwind/css/docs/content.css +4 -5
- package/src/tsconfig.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.json +53 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- 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 +0 -4103
- 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 +0 -2556
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +0 -510
- package/.taste-skill/notes.md +0 -84
- 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 +0 -1973
- 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/AUDIT.md +0 -228
- package/PLAN-AMELIORATION.md +0 -220
- package/PLAN-DOCS-AGENTS.md +0 -80
- package/ai/AGENTS.md +0 -56
- package/ai/cursor/rules/concorde-menu.mdc +0 -15
- package/ai/cursor/rules/concorde-scope.mdc +0 -14
- package/ai/cursor/rules/concorde-theme.mdc +0 -13
- package/ai/cursor/rules/concorde.mdc +0 -66
- package/ai/jetbrains/rules/concorde.md +0 -53
- package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
- package/ai/skills/concorde-imports/SKILL.md +0 -78
- package/ai/skills/concorde-menu/SKILL.md +0 -74
- package/ai/skills/concorde-scope/SKILL.md +0 -70
- package/ai/skills/concorde-theme/SKILL.md +0 -57
- package/docs/.htaccess +0 -75
- package/docs/404.html +0 -15
- package/docs/404.md +0 -5
- package/docs/assets/index-BgG6FFPt.js +0 -11765
- package/docs/assets/index-x89XINSG.css +0 -1
- package/docs/core/components/functional/date/date.html +0 -211
- package/docs/core/components/functional/date/date.md +0 -150
- package/docs/core/components/functional/fetch/fetch.html +0 -180
- package/docs/core/components/functional/fetch/fetch.md +0 -108
- package/docs/core/components/functional/if/if.html +0 -65
- package/docs/core/components/functional/if/if.md +0 -34
- package/docs/core/components/functional/jsonata/jsonata.html +0 -110
- package/docs/core/components/functional/jsonata/jsonata.md +0 -61
- package/docs/core/components/functional/list/list.html +0 -198
- package/docs/core/components/functional/list/list.md +0 -121
- package/docs/core/components/functional/mix/mix.html +0 -78
- package/docs/core/components/functional/mix/mix.md +0 -46
- package/docs/core/components/functional/queue/queue.html +0 -155
- package/docs/core/components/functional/queue/queue.md +0 -51
- package/docs/core/components/functional/router/router.html +0 -154
- package/docs/core/components/functional/router/router.md +0 -93
- package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
- package/docs/core/components/functional/sdui/sdui.html +0 -397
- package/docs/core/components/functional/sdui/sdui.md +0 -307
- package/docs/core/components/functional/states/states.html +0 -141
- package/docs/core/components/functional/states/states.md +0 -112
- package/docs/core/components/functional/submit/submit.html +0 -178
- package/docs/core/components/functional/submit/submit.md +0 -106
- package/docs/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/core/components/functional/translation/translation.html +0 -60
- package/docs/core/components/functional/translation/translation.md +0 -38
- package/docs/core/components/functional/value/value.html +0 -81
- package/docs/core/components/functional/value/value.md +0 -47
- package/docs/core/components/ui/alert/alert.md +0 -186
- package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/core/components/ui/badge/badge.md +0 -181
- package/docs/core/components/ui/button/button.html +0 -309
- package/docs/core/components/ui/button/button.md +0 -216
- package/docs/core/components/ui/captcha/captcha.html +0 -80
- package/docs/core/components/ui/captcha/captcha.md +0 -56
- package/docs/core/components/ui/card/card.md +0 -215
- package/docs/core/components/ui/divider/divider.md +0 -126
- package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
- package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
- package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
- package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
- package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
- package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
- package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
- package/docs/core/components/ui/form/input/input.html +0 -235
- package/docs/core/components/ui/form/input/input.md +0 -142
- package/docs/core/components/ui/form/radio/radio.html +0 -144
- package/docs/core/components/ui/form/radio/radio.md +0 -78
- package/docs/core/components/ui/form/select/select.html +0 -178
- package/docs/core/components/ui/form/select/select.md +0 -86
- package/docs/core/components/ui/form/switch/switch.html +0 -146
- package/docs/core/components/ui/form/switch/switch.md +0 -80
- package/docs/core/components/ui/form/textarea/textarea.html +0 -162
- package/docs/core/components/ui/form/textarea/textarea.md +0 -82
- package/docs/core/components/ui/group/group.html +0 -113
- package/docs/core/components/ui/group/group.md +0 -77
- package/docs/core/components/ui/icon/icon.md +0 -214
- package/docs/core/components/ui/image/image.html +0 -194
- package/docs/core/components/ui/image/image.md +0 -167
- package/docs/core/components/ui/link/link.md +0 -81
- package/docs/core/components/ui/loader/loader.html +0 -114
- package/docs/core/components/ui/loader/loader.md +0 -87
- package/docs/core/components/ui/menu/menu.md +0 -370
- package/docs/core/components/ui/modal/modal.html +0 -324
- package/docs/core/components/ui/modal/modal.md +0 -211
- package/docs/core/components/ui/pop/pop.html +0 -250
- package/docs/core/components/ui/pop/pop.md +0 -216
- package/docs/core/components/ui/progress/progress.md +0 -109
- package/docs/core/components/ui/table/table.html +0 -333
- package/docs/core/components/ui/table/table.md +0 -267
- package/docs/core/components/ui/theme/theme.html +0 -116
- package/docs/core/components/ui/theme/theme.md +0 -97
- package/docs/core/components/ui/toast/toast.html +0 -185
- package/docs/core/components/ui/toast/toast.md +0 -147
- package/docs/core/components/ui/tooltip/tooltip.html +0 -112
- package/docs/core/components/ui/tooltip/tooltip.md +0 -89
- package/docs/docs/decorators/ancestor-attribute.html +0 -71
- package/docs/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/docs/decorators/auto-subscribe.html +0 -61
- package/docs/docs/decorators/auto-subscribe.md +0 -40
- package/docs/docs/decorators/bind.html +0 -86
- package/docs/docs/decorators/bind.md +0 -77
- package/docs/docs/decorators/get.html +0 -166
- package/docs/docs/decorators/get.md +0 -160
- package/docs/docs/decorators/handle.html +0 -139
- package/docs/docs/decorators/handle.md +0 -119
- package/docs/docs/decorators/on-assign.html +0 -72
- package/docs/docs/decorators/on-assign.md +0 -63
- package/docs/docs/decorators/patch.html +0 -76
- package/docs/docs/decorators/patch.md +0 -44
- package/docs/docs/decorators/post.html +0 -150
- package/docs/docs/decorators/post.md +0 -134
- package/docs/docs/decorators/publish.html +0 -74
- package/docs/docs/decorators/publish.md +0 -56
- package/docs/docs/decorators/put.html +0 -83
- package/docs/docs/decorators/put.md +0 -51
- package/docs/docs/decorators/subscribe.html +0 -91
- package/docs/docs/decorators/subscribe.md +0 -87
- package/docs/docs/decorators/wait-for-ancestors.html +0 -82
- package/docs/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/docs/directives/sub.html +0 -79
- package/docs/docs/directives/sub.md +0 -75
- package/docs/docs/directives/t.html +0 -91
- package/docs/docs/directives/t.md +0 -73
- package/docs/docs/getting-started/ai-agents.md +0 -76
- package/docs/docs/getting-started/components.html +0 -27
- package/docs/docs/getting-started/components.md +0 -5
- package/docs/docs/getting-started/installation.html +0 -69
- package/docs/docs/getting-started/installation.md +0 -36
- package/docs/docs/getting-started/my-first-component.md +0 -227
- package/docs/docs/getting-started/start.html +0 -47
- package/docs/docs/getting-started/start.md +0 -35
- package/docs/docs/getting-started/theming.md +0 -253
- package/docs/docs/index.html +0 -99
- package/docs/docs/misc/api-configuration.md +0 -79
- package/docs/docs/misc/dataProviderKey.md +0 -168
- package/docs/hubs/decorators.html +0 -443
- package/docs/hubs/form-components.html +0 -404
- package/docs/hubs/remote-data.html +0 -371
- 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 +0 -28
- package/docs/index.md +0 -22
- package/docs/src/core/components/functional/translation/translation.md +0 -38
- package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/src/docs/decorators/auto-subscribe.md +0 -40
- package/docs/src/docs/decorators/bind.md +0 -77
- package/docs/src/docs/decorators/get.md +0 -160
- package/docs/src/docs/decorators/handle.md +0 -119
- package/docs/src/docs/decorators/on-assign.md +0 -63
- package/docs/src/docs/decorators/patch.md +0 -44
- package/docs/src/docs/decorators/post.md +0 -134
- package/docs/src/docs/decorators/publish.md +0 -56
- package/docs/src/docs/decorators/put.md +0 -51
- package/docs/src/docs/decorators/subscribe.md +0 -87
- package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/src/docs/directives/sub.md +0 -75
- package/docs/src/docs/directives/t.md +0 -73
- package/docs/src/docs/getting-started/components.md +0 -5
- package/docs/src/docs/getting-started/create-a-component.md +0 -136
- package/docs/src/docs/getting-started/dataFlow.md +0 -87
- package/docs/src/docs/getting-started/installation.md +0 -36
- package/docs/src/docs/misc/docs-mock-api.md +0 -62
- package/docs/src/docs/misc/dynamic-path.md +0 -71
- package/docs/src/docs/misc/endpoint.md +0 -45
- package/docs/src/docs/misc/html-integration.md +0 -14
- /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html" data-doc-id="core/components/ui/form/input/input">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Input — Concorde</title>
|
|
7
|
+
<meta name="description" content="Native attributes list">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/input/input">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.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/form/input/input.md/input" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
|
|
19
|
+
<h1 id="input">Input</h1>
|
|
20
|
+
<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
|
|
21
|
+
<sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
|
|
22
|
+
Native attributes list
|
|
23
|
+
</sonic-button>
|
|
24
|
+
|
|
25
|
+
<h2 id="label">Label</h2>
|
|
26
|
+
<pre><code><sonic-input label="Label"></sonic-input>
|
|
27
|
+
</code></pre>
|
|
28
|
+
<h2 id="placeholder">Placeholder</h2>
|
|
29
|
+
<pre><code><sonic-input placeholder="placeholder"></sonic-input>
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="value">Value</h2>
|
|
32
|
+
<pre><code><sonic-input value="value"></sonic-input>
|
|
33
|
+
</code></pre>
|
|
34
|
+
<h2 id="required">Required</h2>
|
|
35
|
+
<pre><code><sonic-input required type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
|
|
36
|
+
</code></pre>
|
|
37
|
+
<h2 id="description">Description</h2>
|
|
38
|
+
<pre><code><sonic-input description="Description goes here" ></sonic-input>
|
|
39
|
+
</code></pre>
|
|
40
|
+
<h2 id="type">Type</h2>
|
|
41
|
+
<p><sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button></p>
|
|
42
|
+
<pre><code><div class="grid gap-3">
|
|
43
|
+
<sonic-input type="text" label="Text">Text</sonic-input>
|
|
44
|
+
<sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
|
|
45
|
+
<sonic-input type="password" label="Password"></sonic-input>
|
|
46
|
+
<sonic-input type="date" label="Date"></sonic-input>
|
|
47
|
+
<sonic-input type="number" label="Number"></sonic-input>
|
|
48
|
+
<sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
|
|
49
|
+
</div>
|
|
50
|
+
</code></pre>
|
|
51
|
+
<h2 id="size">Size</h2>
|
|
52
|
+
<pre><code><div class="grid gap-3">
|
|
53
|
+
<sonic-input size="2xs" value="2xs"></sonic-input>
|
|
54
|
+
<sonic-input size="xs" value="xs"></sonic-input>
|
|
55
|
+
<sonic-input size="sm" value="sm"></sonic-input>
|
|
56
|
+
<sonic-input size="md" value="md"></sonic-input>
|
|
57
|
+
<sonic-input value="default"></sonic-input>
|
|
58
|
+
<sonic-input size="lg" value="lg"></sonic-input>
|
|
59
|
+
<sonic-input size="xl" value="xl"></sonic-input>
|
|
60
|
+
<sonic-input size="2xl" value="2xl"></sonic-input>
|
|
61
|
+
</div>
|
|
62
|
+
</code></pre>
|
|
63
|
+
<h2 id="list">List</h2>
|
|
64
|
+
<p><sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert></p>
|
|
65
|
+
<pre><code><sonic-input list="browsers"></sonic-input>
|
|
66
|
+
<datalist id="browsers">
|
|
67
|
+
<option value="Internet Explorer">
|
|
68
|
+
<option value="Firefox">
|
|
69
|
+
<option value="Google Chrome">
|
|
70
|
+
<option value="Opera">
|
|
71
|
+
<option value="Safari">
|
|
72
|
+
</datalist>
|
|
73
|
+
</code></pre>
|
|
74
|
+
<h2 id="prefix--suffix">Prefix & suffix</h2>
|
|
75
|
+
<pre><code><div class="grid grid-cols-2 gap-3">
|
|
76
|
+
<sonic-input type="search" label="Search" placeholder="Search plane">
|
|
77
|
+
<sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
|
|
78
|
+
</sonic-input>
|
|
79
|
+
<sonic-input type="number" label="Amount" placeholder="0">
|
|
80
|
+
<sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
|
|
81
|
+
</sonic-input>
|
|
82
|
+
</div>
|
|
83
|
+
</code></pre>
|
|
84
|
+
<h2 id="inlinecontent">InlineContent</h2>
|
|
85
|
+
<pre><code><div class="grid grid-cols-2 gap-3">
|
|
86
|
+
<sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
|
|
87
|
+
<sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
|
|
88
|
+
</sonic-input>
|
|
89
|
+
<sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
|
|
90
|
+
<div slot="suffix" class="flex gap-2 items-center">
|
|
91
|
+
<sonic-badge type="danger" size="sm">4 max</sonic-badge>
|
|
92
|
+
<sonic-icon library="iconoir" name="euro" ></sonic-icon>
|
|
93
|
+
</div>
|
|
94
|
+
</sonic-input>
|
|
95
|
+
</div>
|
|
96
|
+
</code></pre>
|
|
97
|
+
<h2 id="example-of-use--search--queue">Example of use — search + queue</h2>
|
|
98
|
+
<p>Filter with <strong><code>formDataProvider</code></strong> + <strong><code>name="contains"</code></strong> (mock API: substring on joke text). Caption and rows via Lit (<code>@subscribe</code>, <code>.items</code> on <code>sonic-queue</code>):</p>
|
|
99
|
+
<p><docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo></p>
|
|
100
|
+
<pre><code><sonic-input type="search" placeholder="Search plane" class="inline-block">
|
|
101
|
+
</sonic-input>
|
|
102
|
+
<sonic-button type="danger" label="Amount" placeholder="0">azdazd
|
|
103
|
+
</sonic-button>
|
|
104
|
+
</code></pre>
|
|
105
|
+
<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->
|
|
106
|
+
</article>
|
|
107
|
+
</main>
|
|
108
|
+
</body>
|
|
109
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html" data-doc-id="core/components/ui/form/input-autocomplete/input-autocomplete">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Input-autocomplete — Concorde</title>
|
|
7
|
+
<meta name="description" content="Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, formDataProvider, name, .items, serviceURL="/docs-mock-api/geo/", nom, code, value, data-keyboard-nav">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/input-autocomplete/input-autocomplete">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.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/form/input-autocomplete/input-autocomplete.md/input-autocomplete" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input-autocomplete</strong>. Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne). <span>Doc ID: <code>core/components/ui/form/input-autocomplete/input-autocomplete</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, formDataProvider, name, .items, serviceURL="/docs-mock-api/geo/", nom, code, value, data-keyboard-nav. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html</a>.</span></p>
|
|
19
|
+
<h1 id="input-autocomplete">Input-autocomplete</h1>
|
|
20
|
+
<p>Champ formulaire + suggestions via <a href="../../../functional/queue/queue.html#queue">queue</a>. Valeur via <code>formDataProvider</code> + <code>name</code> ; la recherche filtre la queue (store interne).</p>
|
|
21
|
+
<p>Rendu des lignes : propriété <strong><code>.items</code></strong> (callback Lit) — voir les démos ci-dessous. Mock : <code>serviceURL="/docs-mock-api/geo/"</code>.</p>
|
|
22
|
+
<h2 id="simple">Simple</h2>
|
|
23
|
+
<p><code>name</code> = paramètre de recherche = valeur formulaire.</p>
|
|
24
|
+
<p><docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo></p>
|
|
25
|
+
<h2 id="valeur--paramètre-de-recherche">Valeur ≠ paramètre de recherche</h2>
|
|
26
|
+
<p>Recherche sur <code>nom</code>, valeur formulaire = <code>code</code>. Préremplissage via <code>value</code>.</p>
|
|
27
|
+
<p><docs-lit-demo for="docs-input-autocomplete-code-demo"></docs-lit-demo></p>
|
|
28
|
+
<h2 id="mode-select">Mode select</h2>
|
|
29
|
+
<p>À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.</p>
|
|
30
|
+
<p><docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo></p>
|
|
31
|
+
<h2 id="navigation-clavier">Navigation clavier</h2>
|
|
32
|
+
<p><code>data-keyboard-nav</code> sur le champ et les items (flèches haut / bas).</p>
|
|
33
|
+
<p><docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo></p>
|
|
34
|
+
|
|
35
|
+
</article>
|
|
36
|
+
</main>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html" data-doc-id="core/components/ui/form/radio/radio">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Radio — Concorde</title>
|
|
7
|
+
<meta name="description" content=">Already checked radio">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, blacklistFlags">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/radio/radio">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.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/form/radio/radio.md/radio" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Radio</strong>. >Already checked radio <span>Doc ID: <code>core/components/ui/form/radio/radio</code>. Keywords: Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, blacklistFlags. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/radio/radio.html</a>.</span></p>
|
|
19
|
+
<h1 id="radio">Radio</h1>
|
|
20
|
+
<h2 id="size">Size</h2>
|
|
21
|
+
<pre><code><div class="grid gap-2" formDataProvider="radioSizeExemple">
|
|
22
|
+
<sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
|
|
23
|
+
<sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
|
|
24
|
+
<sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
|
|
25
|
+
<sonic-radio name="size" value="default" >default radio</sonic-radio>
|
|
26
|
+
<sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
|
|
27
|
+
<sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
|
|
28
|
+
<sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
|
|
29
|
+
</div>
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="checked">Checked</h2>
|
|
32
|
+
<pre><code><sonic-radio checked
|
|
33
|
+
>Already checked radio
|
|
34
|
+
</sonic-radio>
|
|
35
|
+
</code></pre>
|
|
36
|
+
<h2 id="disabled">Disabled</h2>
|
|
37
|
+
<pre><code><sonic-radio disabled
|
|
38
|
+
>Disabled radio
|
|
39
|
+
</sonic-radio>
|
|
40
|
+
</code></pre>
|
|
41
|
+
<h2 id="disabled-and-checked">Disabled and checked</h2>
|
|
42
|
+
<pre><code><sonic-radio disabled checked
|
|
43
|
+
>Disabled but already checked radio
|
|
44
|
+
</sonic-radio>
|
|
45
|
+
</code></pre>
|
|
46
|
+
<h2 id="radio-with-link">radio with link</h2>
|
|
47
|
+
<pre><code><sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
|
|
48
|
+
</code></pre>
|
|
49
|
+
<h2 id="example-of-use--blacklist--queue">Example of use — blacklist + queue</h2>
|
|
50
|
+
<p>Same mock filter as <a href="../checkbox/checkbox.html#checkbox">Checkbox</a> (<code>blacklistFlags</code> query param). Radio sends <strong>one</strong> flag at a time.</p>
|
|
51
|
+
<p><docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo></p>
|
|
52
|
+
|
|
53
|
+
</article>
|
|
54
|
+
</main>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html" data-doc-id="core/components/ui/form/select/select">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Select — Concorde</title>
|
|
7
|
+
<meta name="description" content="{"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, name="lang", ?lang=fr|en, filterDocsJokes, contains">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/select/select">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.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/form/select/select.md/select" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Select</strong>. {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"} <span>Doc ID: <code>core/components/ui/form/select/select</code>. Keywords: Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, name="lang", ?lang=fr|en, filterDocsJokes, contains. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/select/select.html</a>.</span></p>
|
|
19
|
+
<h1 id="select">Select</h1>
|
|
20
|
+
<h2 id="options">Options</h2>
|
|
21
|
+
<pre><code><div class="grid gap-3">
|
|
22
|
+
<sonic-select>
|
|
23
|
+
<option value="">No Selection</option>
|
|
24
|
+
<option value="1">One</option>
|
|
25
|
+
<option value="2" selected>Two (set by "tag")</option>
|
|
26
|
+
<option value="3">Three</option>
|
|
27
|
+
</sonic-select>
|
|
28
|
+
<sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
|
|
29
|
+
{"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
|
|
30
|
+
]'>
|
|
31
|
+
</sonic-select>
|
|
32
|
+
</div>
|
|
33
|
+
</code></pre>
|
|
34
|
+
<h2 id="size">Size</h2>
|
|
35
|
+
<pre><code><div class="grid gap-3">
|
|
36
|
+
<sonic-select size="2xs"><option>2xs</option></sonic-select>
|
|
37
|
+
<sonic-select size="xs"><option>xs</option></sonic-select>
|
|
38
|
+
<sonic-select size="sm"><option>sm</option></sonic-select>
|
|
39
|
+
<sonic-select size="md"><option>md</option></sonic-select>
|
|
40
|
+
<sonic-select size="default"><option>default</option></sonic-select>
|
|
41
|
+
<sonic-select size="lg"><option>lg</option></sonic-select>
|
|
42
|
+
<sonic-select size="xl"><option>xl</option></sonic-select>
|
|
43
|
+
<sonic-select size="2xl"><option>2xl</option></sonic-select>
|
|
44
|
+
</div>
|
|
45
|
+
</code></pre>
|
|
46
|
+
<h2 id="multiple">Multiple</h2>
|
|
47
|
+
<pre><code><div class="grid gap-3">
|
|
48
|
+
<sonic-select multiple>
|
|
49
|
+
<option value="">Choose a number</option>
|
|
50
|
+
<option value="1">One</option>
|
|
51
|
+
<option value="2">Two</option>
|
|
52
|
+
<option value="3">Three</option>
|
|
53
|
+
</sonic-select>
|
|
54
|
+
</div>
|
|
55
|
+
</code></pre>
|
|
56
|
+
<h2 id="disabled">Disabled</h2>
|
|
57
|
+
<pre><code><div class="grid gap-3">
|
|
58
|
+
<sonic-select disabled>
|
|
59
|
+
<option value="">Choose a number</option>
|
|
60
|
+
<option value="1">One</option>
|
|
61
|
+
<option value="2">Two</option>
|
|
62
|
+
<option value="3">Three</option>
|
|
63
|
+
</sonic-select>
|
|
64
|
+
</div>
|
|
65
|
+
</code></pre>
|
|
66
|
+
<h2 id="example-of-use--language-filter--queue">Example of use — language filter + queue</h2>
|
|
67
|
+
<p><strong><code>name="lang"</code></strong> is sent as <code>?lang=fr|en</code> to the <a href="../../../../../docs/_misc/docs-mock-api.html#docs-mock-api">doc mock API</a> (<code>filterDocsJokes</code>). Same pattern as <a href="../input/input.html#input">Input</a> (<code>contains</code>):</p>
|
|
68
|
+
<p><docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo></p>
|
|
69
|
+
|
|
70
|
+
</article>
|
|
71
|
+
</main>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html" data-doc-id="core/components/ui/form/switch/switch">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Switch — Concorde</title>
|
|
7
|
+
<meta name="description" content=">Already checked switch">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/switch/switch, switch, Switch, UI component, form, sonic-switch, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/switch/switch">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.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/form/switch/switch.md/switch" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Switch</strong>. >Already checked switch <span>Doc ID: <code>core/components/ui/form/switch/switch</code>. Keywords: Concorde, supersoniks, core/components/ui/form/switch/switch, switch, Switch, UI component, form, sonic-switch, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/switch/switch.html</a>.</span></p>
|
|
19
|
+
<h1 id="switch">Switch</h1>
|
|
20
|
+
<h2 id="size">Size</h2>
|
|
21
|
+
<pre><code><div class="grid gap-2" formDataProvider="switchSizeExemple">
|
|
22
|
+
<sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
|
|
23
|
+
<sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
|
|
24
|
+
<sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
|
|
25
|
+
<sonic-switch name="size" value="default" >default switch</sonic-switch>
|
|
26
|
+
<sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
|
|
27
|
+
<sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
|
|
28
|
+
<sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
|
|
29
|
+
</div>
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="checked">Checked</h2>
|
|
32
|
+
<pre><code><sonic-switch checked
|
|
33
|
+
>Already checked switch
|
|
34
|
+
</sonic-switch>
|
|
35
|
+
</code></pre>
|
|
36
|
+
<h2 id="disabled">Disabled</h2>
|
|
37
|
+
<pre><code><sonic-switch disabled
|
|
38
|
+
>Disabled switch
|
|
39
|
+
</sonic-switch>
|
|
40
|
+
</code></pre>
|
|
41
|
+
<h2 id="disabled-and-checked">Disabled and checked</h2>
|
|
42
|
+
<pre><code><sonic-switch disabled checked
|
|
43
|
+
>Disabled but already checked switch
|
|
44
|
+
</sonic-switch>
|
|
45
|
+
</code></pre>
|
|
46
|
+
<h2 id="switch-with-link">switch with link</h2>
|
|
47
|
+
<pre><code><sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
|
|
48
|
+
</code></pre>
|
|
49
|
+
<h2 id="example-of-use--blacklist--queue">Example of use — blacklist + queue</h2>
|
|
50
|
+
<p>Same mock filter as <a href="../checkbox/checkbox.html#checkbox">Checkbox</a>; switches can enable several flags (comma-separated in the query).</p>
|
|
51
|
+
<p><docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo></p>
|
|
52
|
+
|
|
53
|
+
</article>
|
|
54
|
+
</main>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html" data-doc-id="core/components/ui/form/textarea/textarea">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Textarea — Concorde</title>
|
|
7
|
+
<meta name="description" content="Native attributes list">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/textarea/textarea">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.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/form/textarea/textarea.md/textarea" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Textarea</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html</a>.</span></p>
|
|
19
|
+
<h1 id="textarea">Textarea</h1>
|
|
20
|
+
<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
|
|
21
|
+
<sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
|
|
22
|
+
Native attributes list
|
|
23
|
+
</sonic-button>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
<h2 id="label">Label</h2>
|
|
27
|
+
<pre><code><sonic-textarea label="Label"></sonic-textarea>
|
|
28
|
+
</code></pre>
|
|
29
|
+
<h2 id="placeholder">Placeholder</h2>
|
|
30
|
+
<pre><code><sonic-textarea placeholder="placeholder"></sonic-textarea>
|
|
31
|
+
</code></pre>
|
|
32
|
+
<h2 id="value">Value</h2>
|
|
33
|
+
<pre><code><sonic-textarea value="value"></sonic-textarea>
|
|
34
|
+
</code></pre>
|
|
35
|
+
<h2 id="required">Required</h2>
|
|
36
|
+
<pre><code><sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
|
|
37
|
+
</code></pre>
|
|
38
|
+
<h2 id="rows">Rows</h2>
|
|
39
|
+
<pre><code><sonic-textarea rows="8"></sonic-textarea>
|
|
40
|
+
</code></pre>
|
|
41
|
+
<h2 id="description">Description</h2>
|
|
42
|
+
<pre><code><sonic-textarea description="Description goes here" ></sonic-textarea>
|
|
43
|
+
</code></pre>
|
|
44
|
+
<h2 id="size">Size</h2>
|
|
45
|
+
<pre><code><div class="grid gap-4">
|
|
46
|
+
<sonic-textarea size="2xs" value="2xs"></sonic-textarea>
|
|
47
|
+
<sonic-textarea size="xs" value="xs"></sonic-textarea>
|
|
48
|
+
<sonic-textarea size="sm" value="sm"></sonic-textarea>
|
|
49
|
+
<sonic-textarea value="md / default"></sonic-textarea>
|
|
50
|
+
<sonic-textarea size="lg" value="lg"></sonic-textarea>
|
|
51
|
+
<sonic-textarea size="xl" value="xl"></sonic-textarea>
|
|
52
|
+
<sonic-textarea size="2xl" value="2xl"></sonic-textarea>
|
|
53
|
+
</div>
|
|
54
|
+
</code></pre>
|
|
55
|
+
|
|
56
|
+
</article>
|
|
57
|
+
</main>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html" data-doc-id="core/components/ui/group/group">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Group — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/group/group">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.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/group/group.md/group" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Group</strong>. sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol <span>Doc ID: <code>core/components/ui/group/group</code>. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html">https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html</a>.</span></p>
|
|
19
|
+
<h1 id="group">Group</h1>
|
|
20
|
+
<p><strong><code>sonic-group</code></strong> lays out slotted <strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> and <strong><code>sonic-select</code></strong> controls in a single horizontal row with <strong>shared corner radius</strong> (first / middle / last items). Optional <strong><code>label</code></strong> and <strong><code>description</code></strong> follow form field styling. Use it for <strong>button groups</strong>, <strong>radio rows</strong>, or <strong>input + action</strong> toolbars.</p>
|
|
21
|
+
<h2 id="radio-group">Radio group</h2>
|
|
22
|
+
<p>Pair with <strong><code>sonic-button</code></strong> <strong><code>radio</code></strong> and a shared <strong><code>name</code></strong>; ancestor <strong><code>formDataProvider</code></strong> stores the selected <strong><code>value</code></strong>.</p>
|
|
23
|
+
<pre><code><sonic-group formDataProvider="subscriptionData">
|
|
24
|
+
<sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
|
|
25
|
+
<sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
|
|
26
|
+
<sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
|
|
27
|
+
</sonic-group>
|
|
28
|
+
</code></pre>
|
|
29
|
+
<h2 id="button-group">Button group</h2>
|
|
30
|
+
<p>Adjacent link or action buttons without merging into one control.</p>
|
|
31
|
+
<pre><code><sonic-group>
|
|
32
|
+
<sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼 Air France</sonic-button>
|
|
33
|
+
<sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
|
|
34
|
+
<sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
|
|
35
|
+
</sonic-group>
|
|
36
|
+
</code></pre>
|
|
37
|
+
<h2 id="input-actions-prefix">Input actions prefix</h2>
|
|
38
|
+
<p>Action control before the field. <strong><code>label</code></strong> or <strong><code>description</code></strong> on <strong><code>sonic-group</code></strong> annotate the row.</p>
|
|
39
|
+
<pre><code><sonic-group label="Label" description="Description">
|
|
40
|
+
<sonic-button type="info" shape="square">
|
|
41
|
+
<sonic-icon library="iconoir" name="info-empty"></sonic-icon>
|
|
42
|
+
</sonic-button>
|
|
43
|
+
<sonic-input></sonic-input>
|
|
44
|
+
</sonic-group>
|
|
45
|
+
</code></pre>
|
|
46
|
+
<h2 id="input-actions-suffix">Input actions suffix</h2>
|
|
47
|
+
<p>Field first, action after (submit, validate, etc.).</p>
|
|
48
|
+
<pre><code><sonic-group label="Label" description="Description">
|
|
49
|
+
<sonic-input></sonic-input>
|
|
50
|
+
<sonic-button type="primary" shape="square">
|
|
51
|
+
<sonic-icon library="iconoir" name="check"></sonic-icon>
|
|
52
|
+
</sonic-button>
|
|
53
|
+
</sonic-group>
|
|
54
|
+
</code></pre>
|
|
55
|
+
<h2 id="api-reference">API reference</h2>
|
|
56
|
+
<table>
|
|
57
|
+
<thead>
|
|
58
|
+
<tr>
|
|
59
|
+
<th>Attribute</th>
|
|
60
|
+
<th>Values</th>
|
|
61
|
+
<th>Description</th>
|
|
62
|
+
</tr>
|
|
63
|
+
</thead>
|
|
64
|
+
<tbody><tr>
|
|
65
|
+
<td><code>label</code></td>
|
|
66
|
+
<td>string (HTML)</td>
|
|
67
|
+
<td>Label above the row; <strong><code>slot="label"</code></strong> overrides / extends</td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><code>description</code></td>
|
|
71
|
+
<td>string (HTML)</td>
|
|
72
|
+
<td>Help text below the row; <strong><code>slot="description"</code></strong> overrides / extends</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td><code>alignItems</code></td>
|
|
76
|
+
<td>CSS align-items (default <code>center</code>)</td>
|
|
77
|
+
<td>Cross-axis alignment of the main flex row</td>
|
|
78
|
+
</tr>
|
|
79
|
+
</tbody></table>
|
|
80
|
+
<table>
|
|
81
|
+
<thead>
|
|
82
|
+
<tr>
|
|
83
|
+
<th>Slot</th>
|
|
84
|
+
<th>Description</th>
|
|
85
|
+
</tr>
|
|
86
|
+
</thead>
|
|
87
|
+
<tbody><tr>
|
|
88
|
+
<td><em>(default)</em></td>
|
|
89
|
+
<td><strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> in visual order</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td><code>label</code></td>
|
|
93
|
+
<td>Custom label markup</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td><code>description</code></td>
|
|
97
|
+
<td>Custom description markup</td>
|
|
98
|
+
</tr>
|
|
99
|
+
</tbody></table>
|
|
100
|
+
|
|
101
|
+
</article>
|
|
102
|
+
</main>
|
|
103
|
+
</body>
|
|
104
|
+
</html>
|
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
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
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Icon — Concorde
|
|
6
|
+
<title>Icon — Concorde</title>
|
|
7
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
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
9
|
<meta name="concorde-doc-id" content="core/components/ui/icon/icon">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/icon">
|
|
11
|
-
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/icon.md">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">
|
|
12
11
|
</head>
|
|
13
12
|
<body>
|
|
14
13
|
<header>
|
|
15
|
-
<p><a href="
|
|
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>
|
|
16
15
|
</header>
|
|
17
16
|
<main>
|
|
18
17
|
<article>
|
|
19
|
-
<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/core/components/ui/icon">https://concorde.supersoniks.org/core/components/ui/icon</a>.</span></p>
|
|
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>
|
|
20
19
|
<h1 id="icon">Icon</h1>
|
|
21
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>
|
|
22
21
|
<h2 id="core-library">Core library</h2>
|
|
@@ -134,7 +133,7 @@
|
|
|
134
133
|
</sonic-scope>
|
|
135
134
|
</code></pre>
|
|
136
135
|
<h2 id="size">Size</h2>
|
|
137
|
-
<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height
|
|
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>
|
|
138
137
|
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
139
138
|
<div class="text-center">
|
|
140
139
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
@@ -180,8 +179,8 @@
|
|
|
180
179
|
</code></pre>
|
|
181
180
|
<h2 id="accessibility">Accessibility</h2>
|
|
182
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>
|
|
183
|
-
<pre><code><sonic-button type="neutral" variant="outline" shape="circle" aria-label="
|
|
184
|
-
<sonic-icon library="iconoir" name="
|
|
182
|
+
<pre><code><sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
|
|
183
|
+
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
185
184
|
</sonic-button>
|
|
186
185
|
</code></pre>
|
|
187
186
|
<h2 id="api-reference">API reference</h2>
|
|
@@ -210,7 +209,7 @@
|
|
|
210
209
|
</tr>
|
|
211
210
|
<tr>
|
|
212
211
|
<td><code>size</code></td>
|
|
213
|
-
<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>
|
|
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>
|
|
214
213
|
<td><code>em</code>-based SVG scale on the host</td>
|
|
215
214
|
</tr>
|
|
216
215
|
</tbody></table>
|