@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
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/radio" 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 by Supersoniks</title>
|
|
7
|
-
<meta name="description" content="sonic-radio is a round Checkbox in radio mode: radios sharing a name under one formDataProvider store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, name, formDataProvider, label, description, size, md, checked, disabled, status">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/form/radio/radio">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/radio">
|
|
11
|
-
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/radio.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/form/radio">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 — Radio</strong>. sonic-radio is a round Checkbox in radio mode: radios sharing a name under one formDataProvider store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot <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, name, formDataProvider, label, description, size, md, checked, disabled, status. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/radio">https://concorde.supersoniks.org/core/components/ui/form/radio</a>.</span></p>
|
|
20
|
-
<h1 id="radio">Radio</h1>
|
|
21
|
-
<p><strong><code>sonic-radio</code></strong> is a round <a href="/core/components/ui/form/checkbox">Checkbox</a> in radio mode: radios sharing a <code>name</code> under one <strong><code>formDataProvider</code></strong> store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot or <code>label</code>, helper text in the <code>description</code> slot.</p>
|
|
22
|
-
<h2 id="basic-example">Basic example</h2>
|
|
23
|
-
<pre><code><div formDataProvider="radio-basic-demo" class="grid gap-2">
|
|
24
|
-
<sonic-radio name="seat" value="window" checked>Window</sonic-radio>
|
|
25
|
-
<sonic-radio name="seat" value="aisle">Aisle</sonic-radio>
|
|
26
|
-
<div>Seat: <sonic-value dataProvider="radio-basic-demo" key="seat"></sonic-value></div>
|
|
27
|
-
</div>
|
|
28
|
-
</code></pre>
|
|
29
|
-
<h2 id="size">Size</h2>
|
|
30
|
-
<p>With no <code>size</code>, the radio follows <code>md</code> (1rem).</p>
|
|
31
|
-
<pre><code><div class="grid gap-2" formDataProvider="radio-size-demo">
|
|
32
|
-
<sonic-radio name="size" value="2xs" size="2xs">2xs</sonic-radio>
|
|
33
|
-
<sonic-radio name="size" value="xs" size="xs">xs</sonic-radio>
|
|
34
|
-
<sonic-radio name="size" value="sm" size="sm">sm</sonic-radio>
|
|
35
|
-
<sonic-radio name="size" value="md">Default</sonic-radio>
|
|
36
|
-
<sonic-radio name="size" value="lg" size="lg">lg</sonic-radio>
|
|
37
|
-
<sonic-radio name="size" value="xl" size="xl">xl</sonic-radio>
|
|
38
|
-
<sonic-radio name="size" value="2xl" size="2xl">2xl</sonic-radio>
|
|
39
|
-
</div>
|
|
40
|
-
</code></pre>
|
|
41
|
-
<h2 id="checked-and-disabled">Checked and disabled</h2>
|
|
42
|
-
<p><code>checked</code> sets the initial state. <code>disabled</code> blocks interaction and dims the control.</p>
|
|
43
|
-
<pre><code><div class="grid gap-2">
|
|
44
|
-
<sonic-radio name="state-checked" value="a" checked>Checked</sonic-radio>
|
|
45
|
-
<sonic-radio name="state-disabled" value="b" disabled>Disabled</sonic-radio>
|
|
46
|
-
<sonic-radio name="state-both" value="c" disabled checked>Disabled and checked</sonic-radio>
|
|
47
|
-
<sonic-radio name="state-link" value="d">I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-radio>
|
|
48
|
-
</div>
|
|
49
|
-
</code></pre>
|
|
50
|
-
<h2 id="filtering-a-list">Filtering a list</h2>
|
|
51
|
-
<p>The radio group writes one <code>status</code> value to the store used as <code>dataFilterProvider</code> by a <code>sonic-queue</code>. See <a href="/core/components/ui/form/checkbox">Checkbox</a> for the multi-value version.</p>
|
|
52
|
-
<p><docs-lit-demo for="docs-flight-status-radio-demo"></docs-lit-demo></p>
|
|
53
|
-
<h2 id="api-reference">API reference</h2>
|
|
54
|
-
<table>
|
|
55
|
-
<thead>
|
|
56
|
-
<tr>
|
|
57
|
-
<th>Attribute</th>
|
|
58
|
-
<th>Values</th>
|
|
59
|
-
<th>Description</th>
|
|
60
|
-
</tr>
|
|
61
|
-
</thead>
|
|
62
|
-
<tbody><tr>
|
|
63
|
-
<td><code>name</code></td>
|
|
64
|
-
<td>string</td>
|
|
65
|
-
<td>Key in the form data (dot notation supported)</td>
|
|
66
|
-
</tr>
|
|
67
|
-
<tr>
|
|
68
|
-
<td><code>value</code></td>
|
|
69
|
-
<td>string</td>
|
|
70
|
-
<td>Value stored when checked</td>
|
|
71
|
-
</tr>
|
|
72
|
-
<tr>
|
|
73
|
-
<td><code>formDataProvider</code></td>
|
|
74
|
-
<td>string</td>
|
|
75
|
-
<td>Form data id; inherited from the closest ancestor when omitted</td>
|
|
76
|
-
</tr>
|
|
77
|
-
<tr>
|
|
78
|
-
<td><code>checked</code></td>
|
|
79
|
-
<td>boolean</td>
|
|
80
|
-
<td>Initial checked state</td>
|
|
81
|
-
</tr>
|
|
82
|
-
<tr>
|
|
83
|
-
<td><code>unsetOnDisconnect</code></td>
|
|
84
|
-
<td>boolean</td>
|
|
85
|
-
<td>Removes the value from the data when the element is removed</td>
|
|
86
|
-
</tr>
|
|
87
|
-
<tr>
|
|
88
|
-
<td><code>label</code></td>
|
|
89
|
-
<td>string (HTML)</td>
|
|
90
|
-
<td>Label, rendered before the default slot</td>
|
|
91
|
-
</tr>
|
|
92
|
-
<tr>
|
|
93
|
-
<td><code>description</code></td>
|
|
94
|
-
<td>string (HTML)</td>
|
|
95
|
-
<td>Helper text, rendered in the <code>description</code> slot</td>
|
|
96
|
-
</tr>
|
|
97
|
-
<tr>
|
|
98
|
-
<td><code>size</code></td>
|
|
99
|
-
<td><code>2xs</code> … <code>2xl</code> · <code>inherit</code> (default <code>md</code>)</td>
|
|
100
|
-
<td>Font size and control size</td>
|
|
101
|
-
</tr>
|
|
102
|
-
<tr>
|
|
103
|
-
<td><code>disabled</code></td>
|
|
104
|
-
<td>boolean</td>
|
|
105
|
-
<td>Blocks interaction</td>
|
|
106
|
-
</tr>
|
|
107
|
-
<tr>
|
|
108
|
-
<td><code>required</code></td>
|
|
109
|
-
<td>boolean</td>
|
|
110
|
-
<td>Native validation on form submit</td>
|
|
111
|
-
</tr>
|
|
112
|
-
<tr>
|
|
113
|
-
<td><code>autofocus</code></td>
|
|
114
|
-
<td>boolean</td>
|
|
115
|
-
<td>Focuses the input on load</td>
|
|
116
|
-
</tr>
|
|
117
|
-
<tr>
|
|
118
|
-
<td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
|
|
119
|
-
<td>string</td>
|
|
120
|
-
<td>Forwarded to the inner input as <code>aria-label</code> / <code>aria-labelledby</code></td>
|
|
121
|
-
</tr>
|
|
122
|
-
</tbody></table>
|
|
123
|
-
<table>
|
|
124
|
-
<thead>
|
|
125
|
-
<tr>
|
|
126
|
-
<th>Slot</th>
|
|
127
|
-
<th>Description</th>
|
|
128
|
-
</tr>
|
|
129
|
-
</thead>
|
|
130
|
-
<tbody><tr>
|
|
131
|
-
<td><em>(default)</em></td>
|
|
132
|
-
<td>Label content (text, links)</td>
|
|
133
|
-
</tr>
|
|
134
|
-
<tr>
|
|
135
|
-
<td><code>description</code></td>
|
|
136
|
-
<td>Helper text under the label</td>
|
|
137
|
-
</tr>
|
|
138
|
-
</tbody></table>
|
|
139
|
-
<p>Fires a <code>change</code> event on each click.</p>
|
|
140
|
-
|
|
141
|
-
</article>
|
|
142
|
-
</main>
|
|
143
|
-
</body>
|
|
144
|
-
</html>
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# Radio
|
|
2
|
-
|
|
3
|
-
**`sonic-radio`** is a round [Checkbox](/core/components/ui/form/checkbox) in radio mode: radios sharing a `name` under one **`formDataProvider`** store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot or `label`, helper text in the `description` slot.
|
|
4
|
-
|
|
5
|
-
## Basic example
|
|
6
|
-
|
|
7
|
-
<sonic-code>
|
|
8
|
-
<template>
|
|
9
|
-
<div formDataProvider="radio-basic-demo" class="grid gap-2">
|
|
10
|
-
<sonic-radio name="seat" value="window" checked>Window</sonic-radio>
|
|
11
|
-
<sonic-radio name="seat" value="aisle">Aisle</sonic-radio>
|
|
12
|
-
<div>Seat: <sonic-value dataProvider="radio-basic-demo" key="seat"></sonic-value></div>
|
|
13
|
-
</div>
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
## Size
|
|
18
|
-
|
|
19
|
-
With no `size`, the radio follows `md` (1rem).
|
|
20
|
-
|
|
21
|
-
<sonic-code>
|
|
22
|
-
<template>
|
|
23
|
-
<div class="grid gap-2" formDataProvider="radio-size-demo">
|
|
24
|
-
<sonic-radio name="size" value="2xs" size="2xs">2xs</sonic-radio>
|
|
25
|
-
<sonic-radio name="size" value="xs" size="xs">xs</sonic-radio>
|
|
26
|
-
<sonic-radio name="size" value="sm" size="sm">sm</sonic-radio>
|
|
27
|
-
<sonic-radio name="size" value="md">Default</sonic-radio>
|
|
28
|
-
<sonic-radio name="size" value="lg" size="lg">lg</sonic-radio>
|
|
29
|
-
<sonic-radio name="size" value="xl" size="xl">xl</sonic-radio>
|
|
30
|
-
<sonic-radio name="size" value="2xl" size="2xl">2xl</sonic-radio>
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
</sonic-code>
|
|
34
|
-
|
|
35
|
-
## Checked and disabled
|
|
36
|
-
|
|
37
|
-
`checked` sets the initial state. `disabled` blocks interaction and dims the control.
|
|
38
|
-
|
|
39
|
-
<sonic-code>
|
|
40
|
-
<template>
|
|
41
|
-
<div class="grid gap-2">
|
|
42
|
-
<sonic-radio name="state-checked" value="a" checked>Checked</sonic-radio>
|
|
43
|
-
<sonic-radio name="state-disabled" value="b" disabled>Disabled</sonic-radio>
|
|
44
|
-
<sonic-radio name="state-both" value="c" disabled checked>Disabled and checked</sonic-radio>
|
|
45
|
-
<sonic-radio name="state-link" value="d">I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-radio>
|
|
46
|
-
</div>
|
|
47
|
-
</template>
|
|
48
|
-
</sonic-code>
|
|
49
|
-
|
|
50
|
-
## Filtering a list
|
|
51
|
-
|
|
52
|
-
The radio group writes one `status` value to the store used as `dataFilterProvider` by a `sonic-queue`. See [Checkbox](/core/components/ui/form/checkbox) for the multi-value version.
|
|
53
|
-
|
|
54
|
-
<docs-lit-demo for="docs-flight-status-radio-demo"></docs-lit-demo>
|
|
55
|
-
|
|
56
|
-
## API reference
|
|
57
|
-
|
|
58
|
-
| Attribute | Values | Description |
|
|
59
|
-
|----------|---------|-------------|
|
|
60
|
-
| `name` | string | Key in the form data (dot notation supported) |
|
|
61
|
-
| `value` | string | Value stored when checked |
|
|
62
|
-
| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
|
|
63
|
-
| `checked` | boolean | Initial checked state |
|
|
64
|
-
| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
|
|
65
|
-
| `label` | string (HTML) | Label, rendered before the default slot |
|
|
66
|
-
| `description` | string (HTML) | Helper text, rendered in the `description` slot |
|
|
67
|
-
| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and control size |
|
|
68
|
-
| `disabled` | boolean | Blocks interaction |
|
|
69
|
-
| `required` | boolean | Native validation on form submit |
|
|
70
|
-
| `autofocus` | boolean | Focuses the input on load |
|
|
71
|
-
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
|
|
72
|
-
|
|
73
|
-
| Slot | Description |
|
|
74
|
-
|------|-------------|
|
|
75
|
-
| *(default)* | Label content (text, links) |
|
|
76
|
-
| `description` | Helper text under the label |
|
|
77
|
-
|
|
78
|
-
Fires a `change` event on each click.
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/select" 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 by Supersoniks</title>
|
|
7
|
-
<meta name="description" content="sonic-select wraps a native <select> with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child <option> tags or from the options attribute (JSON). Bind the value">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/select/select, select, Select, UI component, form, sonic-select, web component, , options, formDataProvider, name, valueKey, value, wordingKey">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/form/select/select">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/select">
|
|
11
|
-
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/select.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/form/select">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 — Select</strong>. sonic-select wraps a native <select> with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child <option> tags or from the options attribute (JSON). Bind the value <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, , options, formDataProvider, name, valueKey, value, wordingKey. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/select">https://concorde.supersoniks.org/core/components/ui/form/select</a>.</span></p>
|
|
20
|
-
<h1 id="select">Select</h1>
|
|
21
|
-
<p><strong><code>sonic-select</code></strong> wraps a native <code><select></code> with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child <code><option></code> tags or from the <code>options</code> attribute (JSON). Bind the value to a store with <strong><code>formDataProvider</code></strong> and <strong><code>name</code></strong>, set on the field or on an ancestor.</p>
|
|
22
|
-
<h2 id="basic-example">Basic example</h2>
|
|
23
|
-
<pre><code><sonic-select label="Cabin class" description="Pick one.">
|
|
24
|
-
<option value="">No selection</option>
|
|
25
|
-
<option value="economy">Economy</option>
|
|
26
|
-
<option value="premium" selected>Premium</option>
|
|
27
|
-
<option value="business">Business</option>
|
|
28
|
-
<option value="first">First</option>
|
|
29
|
-
</sonic-select>
|
|
30
|
-
</code></pre>
|
|
31
|
-
<h2 id="options">Options</h2>
|
|
32
|
-
<p><code>options</code> takes an array of objects; <code>valueKey</code> (default <code>value</code>) and <code>wordingKey</code> (default <code>wording</code>) name the keys to read. An option with <code>selected</code> sets the initial value; with no <code>value</code> and nothing selected, the first option is used.</p>
|
|
33
|
-
<pre><code><sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
|
|
34
|
-
</code></pre>
|
|
35
|
-
<h2 id="size-and-status">Size and status</h2>
|
|
36
|
-
<p>With no <code>size</code>, the select uses the base scale. <code>status</code> colors the field; it defaults to <code>default</code>.</p>
|
|
37
|
-
<pre><code><div class="grid gap-3">
|
|
38
|
-
<sonic-select size="2xs"><option>2xs</option></sonic-select>
|
|
39
|
-
<sonic-select size="xs"><option>xs</option></sonic-select>
|
|
40
|
-
<sonic-select size="sm"><option>sm</option></sonic-select>
|
|
41
|
-
<sonic-select><option>default</option></sonic-select>
|
|
42
|
-
<sonic-select size="lg"><option>lg</option></sonic-select>
|
|
43
|
-
<sonic-select size="xl"><option>xl</option></sonic-select>
|
|
44
|
-
<sonic-select size="2xl"><option>2xl</option></sonic-select>
|
|
45
|
-
<sonic-select status="success"><option>success</option></sonic-select>
|
|
46
|
-
<sonic-select status="error"><option>error</option></sonic-select>
|
|
47
|
-
<sonic-select status="warning"><option>warning</option></sonic-select>
|
|
48
|
-
<sonic-select status="info"><option>info</option></sonic-select>
|
|
49
|
-
<sonic-select status="primary"><option>primary</option></sonic-select>
|
|
50
|
-
<sonic-select disabled><option>disabled</option></sonic-select>
|
|
51
|
-
</div>
|
|
52
|
-
</code></pre>
|
|
53
|
-
<h2 id="filtering-a-list">Filtering a list</h2>
|
|
54
|
-
<p><code>name="direction"</code> writes to the store used as <code>dataFilterProvider</code> by a <code>sonic-queue</code>, which sends it as <code>?direction=</code> to the <a href="/docs/misc/docs-mock-api">mock API</a>: switch between departures and arrivals.</p>
|
|
55
|
-
<p><docs-lit-demo for="docs-flight-direction-demo"></docs-lit-demo></p>
|
|
56
|
-
<h2 id="api-reference">API reference</h2>
|
|
57
|
-
<table>
|
|
58
|
-
<thead>
|
|
59
|
-
<tr>
|
|
60
|
-
<th>Attribute</th>
|
|
61
|
-
<th>Values</th>
|
|
62
|
-
<th>Description</th>
|
|
63
|
-
</tr>
|
|
64
|
-
</thead>
|
|
65
|
-
<tbody><tr>
|
|
66
|
-
<td><code>name</code></td>
|
|
67
|
-
<td>string</td>
|
|
68
|
-
<td>Key in the form store (dot notation allowed)</td>
|
|
69
|
-
</tr>
|
|
70
|
-
<tr>
|
|
71
|
-
<td><code>value</code></td>
|
|
72
|
-
<td>string</td>
|
|
73
|
-
<td>Initial value</td>
|
|
74
|
-
</tr>
|
|
75
|
-
<tr>
|
|
76
|
-
<td><code>formDataProvider</code></td>
|
|
77
|
-
<td>string</td>
|
|
78
|
-
<td>Store id; inherited from the closest ancestor</td>
|
|
79
|
-
</tr>
|
|
80
|
-
<tr>
|
|
81
|
-
<td><code>options</code></td>
|
|
82
|
-
<td>JSON array</td>
|
|
83
|
-
<td>Options as objects; alternative to child <code><option></code> tags</td>
|
|
84
|
-
</tr>
|
|
85
|
-
<tr>
|
|
86
|
-
<td><code>valueKey</code></td>
|
|
87
|
-
<td>string (default <code>value</code>)</td>
|
|
88
|
-
<td>Option key used as value</td>
|
|
89
|
-
</tr>
|
|
90
|
-
<tr>
|
|
91
|
-
<td><code>wordingKey</code></td>
|
|
92
|
-
<td>string (default <code>wording</code>)</td>
|
|
93
|
-
<td>Option key used as text</td>
|
|
94
|
-
</tr>
|
|
95
|
-
<tr>
|
|
96
|
-
<td><code>size</code></td>
|
|
97
|
-
<td><code>2xs</code> … <code>2xl</code> (default: base scale)</td>
|
|
98
|
-
<td>Typography and padding</td>
|
|
99
|
-
</tr>
|
|
100
|
-
<tr>
|
|
101
|
-
<td><code>status</code></td>
|
|
102
|
-
<td><code>default</code> · <code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> · <code>primary</code></td>
|
|
103
|
-
<td>Field color</td>
|
|
104
|
-
</tr>
|
|
105
|
-
<tr>
|
|
106
|
-
<td><code>label</code></td>
|
|
107
|
-
<td>string (HTML)</td>
|
|
108
|
-
<td>Label; or use the <code>label</code> slot</td>
|
|
109
|
-
</tr>
|
|
110
|
-
<tr>
|
|
111
|
-
<td><code>description</code></td>
|
|
112
|
-
<td>string (HTML)</td>
|
|
113
|
-
<td>Help text under the field; or use the <code>description</code> slot</td>
|
|
114
|
-
</tr>
|
|
115
|
-
<tr>
|
|
116
|
-
<td><code>required</code> · <code>disabled</code> · <code>autofocus</code></td>
|
|
117
|
-
<td>boolean</td>
|
|
118
|
-
<td>Native flags</td>
|
|
119
|
-
</tr>
|
|
120
|
-
<tr>
|
|
121
|
-
<td><code>multiple</code></td>
|
|
122
|
-
<td>boolean</td>
|
|
123
|
-
<td>Native multiple selection; only one value is stored</td>
|
|
124
|
-
</tr>
|
|
125
|
-
<tr>
|
|
126
|
-
<td><code>selectSize</code></td>
|
|
127
|
-
<td>number</td>
|
|
128
|
-
<td>Native <code>size</code> (visible rows)</td>
|
|
129
|
-
</tr>
|
|
130
|
-
<tr>
|
|
131
|
-
<td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
|
|
132
|
-
<td>string</td>
|
|
133
|
-
<td>Forwarded as <code>aria-label</code> and <code>aria-labelledby</code></td>
|
|
134
|
-
</tr>
|
|
135
|
-
<tr>
|
|
136
|
-
<td><code>unsetOnDisconnect</code></td>
|
|
137
|
-
<td>boolean</td>
|
|
138
|
-
<td>Clears the store value when the element is removed</td>
|
|
139
|
-
</tr>
|
|
140
|
-
<tr>
|
|
141
|
-
<td><code>forceAutoFill</code></td>
|
|
142
|
-
<td>boolean</td>
|
|
143
|
-
<td>Lets properties override <code>label</code> / <code>description</code> / <code>name</code> attributes</td>
|
|
144
|
-
</tr>
|
|
145
|
-
</tbody></table>
|
|
146
|
-
<table>
|
|
147
|
-
<thead>
|
|
148
|
-
<tr>
|
|
149
|
-
<th>Slot</th>
|
|
150
|
-
<th>Description</th>
|
|
151
|
-
</tr>
|
|
152
|
-
</thead>
|
|
153
|
-
<tbody><tr>
|
|
154
|
-
<td><em>(default)</em></td>
|
|
155
|
-
<td><code><option></code> elements</td>
|
|
156
|
-
</tr>
|
|
157
|
-
<tr>
|
|
158
|
-
<td><code>label</code></td>
|
|
159
|
-
<td>Rich label content</td>
|
|
160
|
-
</tr>
|
|
161
|
-
<tr>
|
|
162
|
-
<td><code>description</code></td>
|
|
163
|
-
<td>Rich help text</td>
|
|
164
|
-
</tr>
|
|
165
|
-
<tr>
|
|
166
|
-
<td><code>prefix</code></td>
|
|
167
|
-
<td>Content before the select</td>
|
|
168
|
-
</tr>
|
|
169
|
-
<tr>
|
|
170
|
-
<td><code>suffix</code></td>
|
|
171
|
-
<td>Content after the select</td>
|
|
172
|
-
</tr>
|
|
173
|
-
</tbody></table>
|
|
174
|
-
|
|
175
|
-
</article>
|
|
176
|
-
</main>
|
|
177
|
-
</body>
|
|
178
|
-
</html>
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
# Select
|
|
2
|
-
|
|
3
|
-
**`sonic-select`** wraps a native `<select>` with a label, a description, prefix and suffix slots and Concorde sizes. Options come from child `<option>` tags or from the `options` attribute (JSON). Bind the value to a store with **`formDataProvider`** and **`name`**, set on the field or on an ancestor.
|
|
4
|
-
|
|
5
|
-
## Basic example
|
|
6
|
-
|
|
7
|
-
<sonic-code>
|
|
8
|
-
<template>
|
|
9
|
-
<sonic-select label="Cabin class" description="Pick one.">
|
|
10
|
-
<option value="">No selection</option>
|
|
11
|
-
<option value="economy">Economy</option>
|
|
12
|
-
<option value="premium" selected>Premium</option>
|
|
13
|
-
<option value="business">Business</option>
|
|
14
|
-
<option value="first">First</option>
|
|
15
|
-
</sonic-select>
|
|
16
|
-
</template>
|
|
17
|
-
</sonic-code>
|
|
18
|
-
|
|
19
|
-
## Options
|
|
20
|
-
|
|
21
|
-
`options` takes an array of objects; `valueKey` (default `value`) and `wordingKey` (default `wording`) name the keys to read. An option with `selected` sets the initial value; with no `value` and nothing selected, the first option is used.
|
|
22
|
-
|
|
23
|
-
<sonic-code>
|
|
24
|
-
<template>
|
|
25
|
-
<sonic-select label="Meal" wordingKey="label" options='[{"value":"standard","label":"Standard"},{"value":"vegetarian","label":"Vegetarian","selected":true},{"value":"none","label":"No meal"}]'></sonic-select>
|
|
26
|
-
</template>
|
|
27
|
-
</sonic-code>
|
|
28
|
-
|
|
29
|
-
## Size and status
|
|
30
|
-
|
|
31
|
-
With no `size`, the select uses the base scale. `status` colors the field; it defaults to `default`.
|
|
32
|
-
|
|
33
|
-
<sonic-code>
|
|
34
|
-
<template>
|
|
35
|
-
<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><option>default</option></sonic-select>
|
|
40
|
-
<sonic-select size="lg"><option>lg</option></sonic-select>
|
|
41
|
-
<sonic-select size="xl"><option>xl</option></sonic-select>
|
|
42
|
-
<sonic-select size="2xl"><option>2xl</option></sonic-select>
|
|
43
|
-
<sonic-select status="success"><option>success</option></sonic-select>
|
|
44
|
-
<sonic-select status="error"><option>error</option></sonic-select>
|
|
45
|
-
<sonic-select status="warning"><option>warning</option></sonic-select>
|
|
46
|
-
<sonic-select status="info"><option>info</option></sonic-select>
|
|
47
|
-
<sonic-select status="primary"><option>primary</option></sonic-select>
|
|
48
|
-
<sonic-select disabled><option>disabled</option></sonic-select>
|
|
49
|
-
</div>
|
|
50
|
-
</template>
|
|
51
|
-
</sonic-code>
|
|
52
|
-
|
|
53
|
-
## Filtering a list
|
|
54
|
-
|
|
55
|
-
`name="direction"` writes to the store used as `dataFilterProvider` by a `sonic-queue`, which sends it as `?direction=` to the [mock API](/docs/misc/docs-mock-api): switch between departures and arrivals.
|
|
56
|
-
|
|
57
|
-
<docs-lit-demo for="docs-flight-direction-demo"></docs-lit-demo>
|
|
58
|
-
|
|
59
|
-
## API reference
|
|
60
|
-
|
|
61
|
-
| Attribute | Values | Description |
|
|
62
|
-
|----------|---------|-------------|
|
|
63
|
-
| `name` | string | Key in the form store (dot notation allowed) |
|
|
64
|
-
| `value` | string | Initial value |
|
|
65
|
-
| `formDataProvider` | string | Store id; inherited from the closest ancestor |
|
|
66
|
-
| `options` | JSON array | Options as objects; alternative to child `<option>` tags |
|
|
67
|
-
| `valueKey` | string (default `value`) | Option key used as value |
|
|
68
|
-
| `wordingKey` | string (default `wording`) | Option key used as text |
|
|
69
|
-
| `size` | `2xs` … `2xl` (default: base scale) | Typography and padding |
|
|
70
|
-
| `status` | `default` · `success` · `error` · `warning` · `info` · `primary` | Field color |
|
|
71
|
-
| `label` | string (HTML) | Label; or use the `label` slot |
|
|
72
|
-
| `description` | string (HTML) | Help text under the field; or use the `description` slot |
|
|
73
|
-
| `required` · `disabled` · `autofocus` | boolean | Native flags |
|
|
74
|
-
| `multiple` | boolean | Native multiple selection; only one value is stored |
|
|
75
|
-
| `selectSize` | number | Native `size` (visible rows) |
|
|
76
|
-
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded as `aria-label` and `aria-labelledby` |
|
|
77
|
-
| `unsetOnDisconnect` | boolean | Clears the store value when the element is removed |
|
|
78
|
-
| `forceAutoFill` | boolean | Lets properties override `label` / `description` / `name` attributes |
|
|
79
|
-
|
|
80
|
-
| Slot | Description |
|
|
81
|
-
|------|-------------|
|
|
82
|
-
| *(default)* | `<option>` elements |
|
|
83
|
-
| `label` | Rich label content |
|
|
84
|
-
| `description` | Rich help text |
|
|
85
|
-
| `prefix` | Content before the select |
|
|
86
|
-
| `suffix` | Content after the select |
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/switch" 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 by Supersoniks</title>
|
|
7
|
-
<meta name="description" content="sonic-switch is a toggle-styled Checkbox in unique mode: when on, it stores its value under name in the formDataProvider data; when off, it stores null. Switches sharing a name behave as one choice, s">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/switch/switch, switch, Switch, UI component, form, sonic-switch, web component, unique, value, name, formDataProvider, null, label, description, size">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/form/switch/switch">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/switch">
|
|
11
|
-
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/switch.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/form/switch">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 — Switch</strong>. sonic-switch is a toggle-styled Checkbox in unique mode: when on, it stores its value under name in the formDataProvider data; when off, it stores null. Switches sharing a name behave as one choice, s <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, unique, value, name, formDataProvider, null, label, description, size. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/switch">https://concorde.supersoniks.org/core/components/ui/form/switch</a>.</span></p>
|
|
20
|
-
<h1 id="switch">Switch</h1>
|
|
21
|
-
<p><strong><code>sonic-switch</code></strong> is a toggle-styled <a href="/core/components/ui/form/checkbox">Checkbox</a> in <code>unique</code> mode: when on, it stores its <code>value</code> under <code>name</code> in the <strong><code>formDataProvider</code></strong> data; when off, it stores <code>null</code>. Switches sharing a <code>name</code> behave as one choice, so give independent switches distinct names. Label goes in the default slot or <code>label</code>, helper text in the <code>description</code> slot.</p>
|
|
22
|
-
<h2 id="basic-example">Basic example</h2>
|
|
23
|
-
<pre><code><div formDataProvider="switch-basic-demo" class="grid gap-2">
|
|
24
|
-
<sonic-switch name="notifications" value="on" checked>
|
|
25
|
-
Notifications
|
|
26
|
-
<span slot="description">Get an alert when your gate changes.</span>
|
|
27
|
-
</sonic-switch>
|
|
28
|
-
<div>Value: <sonic-value dataProvider="switch-basic-demo" key="notifications"></sonic-value></div>
|
|
29
|
-
</div>
|
|
30
|
-
</code></pre>
|
|
31
|
-
<h2 id="size">Size</h2>
|
|
32
|
-
<p>With no <code>size</code>, the switch follows <code>md</code> (1rem).</p>
|
|
33
|
-
<pre><code><div class="grid gap-2">
|
|
34
|
-
<sonic-switch size="2xs">2xs</sonic-switch>
|
|
35
|
-
<sonic-switch size="xs">xs</sonic-switch>
|
|
36
|
-
<sonic-switch size="sm">sm</sonic-switch>
|
|
37
|
-
<sonic-switch>Default</sonic-switch>
|
|
38
|
-
<sonic-switch size="lg">lg</sonic-switch>
|
|
39
|
-
<sonic-switch size="xl">xl</sonic-switch>
|
|
40
|
-
<sonic-switch size="2xl">2xl</sonic-switch>
|
|
41
|
-
</div>
|
|
42
|
-
</code></pre>
|
|
43
|
-
<h2 id="checked-and-disabled">Checked and disabled</h2>
|
|
44
|
-
<p><code>checked</code> sets the initial state. <code>disabled</code> blocks interaction and dims the control.</p>
|
|
45
|
-
<pre><code><div class="grid gap-2">
|
|
46
|
-
<sonic-switch checked>Checked</sonic-switch>
|
|
47
|
-
<sonic-switch disabled>Disabled</sonic-switch>
|
|
48
|
-
<sonic-switch disabled checked>Disabled and checked</sonic-switch>
|
|
49
|
-
<sonic-switch>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-switch>
|
|
50
|
-
</div>
|
|
51
|
-
</code></pre>
|
|
52
|
-
<h2 id="filtering-a-list">Filtering a list</h2>
|
|
53
|
-
<p>On, the switch writes <code>status=delayed</code> to the store used as <code>dataFilterProvider</code> by a <code>sonic-queue</code>; off, it writes <code>null</code> and the filter is dropped.</p>
|
|
54
|
-
<p><docs-lit-demo for="docs-flight-delayed-switch-demo"></docs-lit-demo></p>
|
|
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>name</code></td>
|
|
66
|
-
<td>string</td>
|
|
67
|
-
<td>Key in the form data (dot notation supported)</td>
|
|
68
|
-
</tr>
|
|
69
|
-
<tr>
|
|
70
|
-
<td><code>value</code></td>
|
|
71
|
-
<td>string</td>
|
|
72
|
-
<td>Value stored when on</td>
|
|
73
|
-
</tr>
|
|
74
|
-
<tr>
|
|
75
|
-
<td><code>formDataProvider</code></td>
|
|
76
|
-
<td>string</td>
|
|
77
|
-
<td>Form data id; inherited from the closest ancestor when omitted</td>
|
|
78
|
-
</tr>
|
|
79
|
-
<tr>
|
|
80
|
-
<td><code>checked</code></td>
|
|
81
|
-
<td>boolean</td>
|
|
82
|
-
<td>Initial state</td>
|
|
83
|
-
</tr>
|
|
84
|
-
<tr>
|
|
85
|
-
<td><code>unsetOnDisconnect</code></td>
|
|
86
|
-
<td>boolean</td>
|
|
87
|
-
<td>Removes the value from the data when the element is removed</td>
|
|
88
|
-
</tr>
|
|
89
|
-
<tr>
|
|
90
|
-
<td><code>label</code></td>
|
|
91
|
-
<td>string (HTML)</td>
|
|
92
|
-
<td>Label, rendered before the default slot</td>
|
|
93
|
-
</tr>
|
|
94
|
-
<tr>
|
|
95
|
-
<td><code>description</code></td>
|
|
96
|
-
<td>string (HTML)</td>
|
|
97
|
-
<td>Helper text, rendered in the <code>description</code> slot</td>
|
|
98
|
-
</tr>
|
|
99
|
-
<tr>
|
|
100
|
-
<td><code>size</code></td>
|
|
101
|
-
<td><code>2xs</code> … <code>2xl</code> · <code>inherit</code> (default <code>md</code>)</td>
|
|
102
|
-
<td>Font size and track size</td>
|
|
103
|
-
</tr>
|
|
104
|
-
<tr>
|
|
105
|
-
<td><code>disabled</code></td>
|
|
106
|
-
<td>boolean</td>
|
|
107
|
-
<td>Blocks interaction</td>
|
|
108
|
-
</tr>
|
|
109
|
-
<tr>
|
|
110
|
-
<td><code>required</code></td>
|
|
111
|
-
<td>boolean</td>
|
|
112
|
-
<td>Native validation on form submit</td>
|
|
113
|
-
</tr>
|
|
114
|
-
<tr>
|
|
115
|
-
<td><code>autofocus</code></td>
|
|
116
|
-
<td>boolean</td>
|
|
117
|
-
<td>Focuses the input on load</td>
|
|
118
|
-
</tr>
|
|
119
|
-
<tr>
|
|
120
|
-
<td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
|
|
121
|
-
<td>string</td>
|
|
122
|
-
<td>Forwarded to the inner input as <code>aria-label</code> / <code>aria-labelledby</code></td>
|
|
123
|
-
</tr>
|
|
124
|
-
</tbody></table>
|
|
125
|
-
<table>
|
|
126
|
-
<thead>
|
|
127
|
-
<tr>
|
|
128
|
-
<th>Slot</th>
|
|
129
|
-
<th>Description</th>
|
|
130
|
-
</tr>
|
|
131
|
-
</thead>
|
|
132
|
-
<tbody><tr>
|
|
133
|
-
<td><em>(default)</em></td>
|
|
134
|
-
<td>Label content (text, links)</td>
|
|
135
|
-
</tr>
|
|
136
|
-
<tr>
|
|
137
|
-
<td><code>description</code></td>
|
|
138
|
-
<td>Helper text under the label</td>
|
|
139
|
-
</tr>
|
|
140
|
-
</tbody></table>
|
|
141
|
-
<p>Fires a <code>change</code> event on each click.</p>
|
|
142
|
-
|
|
143
|
-
</article>
|
|
144
|
-
</main>
|
|
145
|
-
</body>
|
|
146
|
-
</html>
|