@supersoniks/concorde 5.1.0 → 5.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +153 -0
- package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
- package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
- package/.agents/skills/concorde-docs/templates/guide.md +25 -0
- package/.claude/launch.json +15 -0
- package/.claude/vite.http.config.mjs +7 -0
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +4103 -0
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +2556 -0
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +510 -0
- package/.taste-skill/notes.md +84 -0
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +1973 -0
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/.tmp-cem/custom-elements.json +2013 -2013
- package/AUDIT.md +228 -0
- package/PLAN-AMELIORATION.md +220 -0
- package/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +3 -3
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
- package/ai/skills/concorde-theme/SKILL.md +1 -1
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +16 -16
- package/concorde-core.es.js +235 -233
- package/dist/concorde-core.bundle.js +16 -16
- package/dist/concorde-core.es.js +235 -233
- package/dist/img/archive/concorde-001-2cv.webp +0 -0
- package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/dist/img/archive/credits.json +28 -0
- package/docs/.htaccess +75 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/assets/index-BgG6FFPt.js +11765 -0
- package/docs/assets/index-x89XINSG.css +1 -0
- package/docs/core/components/functional/date/date.html +211 -0
- package/docs/core/components/functional/date/date.md +150 -0
- package/docs/core/components/functional/fetch/fetch.html +180 -0
- package/docs/core/components/functional/fetch/fetch.md +108 -0
- package/docs/core/components/functional/if/if.html +65 -0
- package/docs/core/components/functional/if/if.md +34 -0
- package/docs/core/components/functional/jsonata/jsonata.html +110 -0
- package/docs/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/core/components/functional/list/list.html +198 -0
- package/docs/core/components/functional/list/list.md +121 -0
- package/docs/core/components/functional/mix/mix.html +78 -0
- package/docs/core/components/functional/mix/mix.md +46 -0
- package/docs/core/components/functional/queue/queue.html +155 -0
- package/docs/core/components/functional/queue/queue.md +51 -0
- package/docs/core/components/functional/router/router.html +154 -0
- package/docs/core/components/functional/router/router.md +93 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/core/components/functional/sdui/sdui.html +397 -0
- package/docs/core/components/functional/sdui/sdui.md +307 -0
- package/docs/core/components/functional/states/states.html +141 -0
- package/docs/core/components/functional/states/states.md +112 -0
- package/docs/core/components/functional/submit/submit.html +178 -0
- package/docs/core/components/functional/submit/submit.md +106 -0
- package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
- package/docs/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/core/components/functional/translation/translation.html +60 -0
- package/docs/core/components/functional/translation/translation.md +38 -0
- package/docs/core/components/functional/value/value.html +81 -0
- package/docs/core/components/functional/value/value.md +47 -0
- package/docs/core/components/ui/alert/alert.html +201 -0
- package/docs/core/components/ui/alert/alert.md +186 -0
- package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
- package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/core/components/ui/badge/badge.html +197 -0
- package/docs/core/components/ui/badge/badge.md +181 -0
- package/docs/core/components/ui/button/button.html +309 -0
- package/docs/core/components/ui/button/button.md +216 -0
- package/docs/core/components/ui/captcha/captcha.html +80 -0
- package/docs/core/components/ui/captcha/captcha.md +56 -0
- package/docs/core/components/ui/card/card.html +254 -0
- package/docs/core/components/ui/card/card.md +215 -0
- package/docs/core/components/ui/divider/divider.html +144 -0
- package/docs/core/components/ui/divider/divider.md +126 -0
- package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
- package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
- package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
- package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
- package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/core/components/ui/form/input/input.html +235 -0
- package/docs/core/components/ui/form/input/input.md +142 -0
- package/docs/core/components/ui/form/radio/radio.html +144 -0
- package/docs/core/components/ui/form/radio/radio.md +78 -0
- package/docs/core/components/ui/form/select/select.html +178 -0
- package/docs/core/components/ui/form/select/select.md +86 -0
- package/docs/core/components/ui/form/switch/switch.html +146 -0
- package/docs/core/components/ui/form/switch/switch.md +80 -0
- package/docs/core/components/ui/form/textarea/textarea.html +162 -0
- package/docs/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/core/components/ui/group/group.html +113 -0
- package/docs/core/components/ui/group/group.md +77 -0
- package/docs/core/components/ui/icon/icon.html +223 -0
- package/docs/core/components/ui/icon/icon.md +214 -0
- package/docs/core/components/ui/image/image.html +194 -0
- package/docs/core/components/ui/image/image.md +167 -0
- package/docs/core/components/ui/link/link.html +101 -0
- package/docs/core/components/ui/link/link.md +81 -0
- package/docs/core/components/ui/loader/loader.html +114 -0
- package/docs/core/components/ui/loader/loader.md +87 -0
- package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
- package/docs/core/components/ui/menu/menu.md +370 -0
- package/docs/core/components/ui/modal/modal.html +324 -0
- package/docs/core/components/ui/modal/modal.md +211 -0
- package/docs/core/components/ui/pop/pop.html +250 -0
- package/docs/core/components/ui/pop/pop.md +216 -0
- package/docs/core/components/ui/progress/progress.html +132 -0
- package/docs/core/components/ui/progress/progress.md +109 -0
- package/docs/core/components/ui/table/table.html +333 -0
- package/docs/core/components/ui/table/table.md +267 -0
- package/docs/core/components/ui/theme/theme.html +116 -0
- package/docs/core/components/ui/theme/theme.md +97 -0
- package/docs/core/components/ui/toast/toast.html +185 -0
- package/docs/core/components/ui/toast/toast.md +147 -0
- package/docs/core/components/ui/tooltip/tooltip.html +112 -0
- package/docs/core/components/ui/tooltip/tooltip.md +89 -0
- package/docs/docs/decorators/ancestor-attribute.html +71 -0
- package/docs/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/docs/decorators/auto-subscribe.html +61 -0
- package/docs/docs/decorators/auto-subscribe.md +40 -0
- package/docs/docs/decorators/bind.html +86 -0
- package/docs/docs/decorators/bind.md +77 -0
- package/docs/docs/decorators/get.html +166 -0
- package/docs/docs/decorators/get.md +160 -0
- package/docs/docs/decorators/handle.html +139 -0
- package/docs/docs/decorators/handle.md +119 -0
- package/docs/docs/decorators/on-assign.html +72 -0
- package/docs/docs/decorators/on-assign.md +63 -0
- package/docs/docs/decorators/patch.html +76 -0
- package/docs/docs/decorators/patch.md +44 -0
- package/docs/docs/decorators/post.html +150 -0
- package/docs/docs/decorators/post.md +134 -0
- package/docs/docs/decorators/publish.html +74 -0
- package/docs/docs/decorators/publish.md +56 -0
- package/docs/docs/decorators/put.html +83 -0
- package/docs/docs/decorators/put.md +51 -0
- package/docs/docs/decorators/subscribe.html +91 -0
- package/docs/docs/decorators/subscribe.md +87 -0
- package/docs/docs/decorators/wait-for-ancestors.html +82 -0
- package/docs/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/docs/directives/sub.html +79 -0
- package/docs/docs/directives/sub.md +75 -0
- package/docs/docs/directives/t.html +91 -0
- package/docs/docs/directives/t.md +73 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
- package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/components.md +5 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
- package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
- package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
- package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
- package/docs/docs/getting-started/installation.html +69 -0
- package/docs/docs/getting-started/installation.md +36 -0
- package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
- package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
- package/docs/docs/getting-started/start.html +47 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
- package/docs/docs/getting-started/theming.html +334 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
- package/docs/docs/index.html +99 -0
- package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
- package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
- package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
- package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
- package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
- package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
- package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
- package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
- package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
- package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
- package/docs/docs-mock-api-sw.js +60 -223
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/hubs/decorators.html +443 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +371 -0
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +28 -0
- package/docs/img/concorde/plane_01.jpg +0 -0
- package/docs/img/concorde/plane_02.jpg +0 -0
- package/docs/img/concorde/plane_03.jpg +0 -0
- package/docs/img/concorde/plane_04.jpg +0 -0
- package/docs/img/concorde/plane_05.jpg +0 -0
- package/docs/img/concorde/plane_06.jpg +0 -0
- package/docs/img/concorde/plane_07.jpg +0 -0
- package/docs/img/concorde/plane_08.jpg +0 -0
- package/docs/img/concorde/plane_09.jpg +0 -0
- package/docs/img/concorde/plane_10.jpg +0 -0
- package/docs/img/concorde/plane_11.jpg +0 -0
- package/docs/img/concorde/plane_12.jpg +0 -0
- package/docs/img/concorde/plane_13.jpg +0 -0
- package/docs/index.html +96 -67
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +3329 -3295
- package/docs/llms.txt +94 -92
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +78 -78
- package/docs/src/core/components/functional/date/date.md +91 -231
- package/docs/src/core/components/functional/fetch/fetch.md +66 -83
- package/docs/src/core/components/functional/if/if.md +28 -3
- package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/docs/src/core/components/functional/list/list.md +99 -43
- package/docs/src/core/components/functional/mix/mix.md +31 -26
- package/docs/src/core/components/functional/queue/queue.md +40 -61
- package/docs/src/core/components/functional/router/router.md +64 -65
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/docs/src/core/components/functional/sdui/example.json +19 -86
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +196 -245
- package/docs/src/core/components/functional/states/states.md +86 -61
- package/docs/src/core/components/functional/submit/submit.md +64 -72
- package/docs/src/core/components/functional/translation/translation.md +38 -0
- package/docs/src/core/components/functional/value/value.md +34 -22
- package/docs/src/core/components/ui/alert/alert.md +139 -74
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +137 -83
- package/docs/src/core/components/ui/button/button.md +139 -105
- package/docs/src/core/components/ui/captcha/captcha.md +50 -6
- package/docs/src/core/components/ui/card/card.md +183 -65
- package/docs/src/core/components/ui/divider/divider.md +104 -13
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/radio/radio.md +55 -34
- package/docs/src/core/components/ui/form/select/select.md +60 -45
- package/docs/src/core/components/ui/form/switch/switch.md +57 -34
- package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/docs/src/core/components/ui/group/group.md +49 -47
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +132 -72
- package/docs/src/core/components/ui/link/link.md +46 -8
- package/docs/src/core/components/ui/loader/loader.md +55 -23
- package/docs/src/core/components/ui/menu/menu.md +155 -114
- package/docs/src/core/components/ui/modal/modal.md +154 -62
- package/docs/src/core/components/ui/pop/pop.md +185 -65
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +146 -334
- package/docs/src/core/components/ui/theme/theme.md +97 -0
- package/docs/src/core/components/ui/toast/toast.md +80 -99
- package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
- package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/src/docs/decorators/auto-subscribe.md +40 -0
- package/docs/src/docs/decorators/bind.md +77 -0
- package/docs/src/docs/decorators/get.md +160 -0
- package/docs/src/docs/decorators/handle.md +119 -0
- package/docs/src/docs/decorators/on-assign.md +63 -0
- package/docs/src/docs/decorators/patch.md +44 -0
- package/docs/src/docs/decorators/post.md +134 -0
- package/docs/src/docs/decorators/publish.md +56 -0
- package/docs/src/docs/decorators/put.md +51 -0
- package/docs/src/docs/decorators/subscribe.md +87 -0
- package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/src/docs/directives/sub.md +75 -0
- package/docs/src/docs/directives/t.md +73 -0
- package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/getting-started/components.md +5 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
- package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
- package/docs/src/docs/getting-started/installation.md +36 -0
- package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
- package/docs/src/docs/getting-started/start.md +35 -0
- package/docs/src/docs/getting-started/theming.md +253 -0
- package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
- package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
- package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
- package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
- package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
- package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
- package/docs/src/docs/search/docs-search.json +3729 -2949
- package/docs/src/tsconfig.json +176 -5
- package/index.html +94 -67
- package/package.json +11 -4
- package/public/docs-mock-api-sw.js +58 -223
- package/public/docs-mock-api-sw.js.map +4 -4
- package/public/img/archive/concorde-001-2cv.webp +0 -0
- package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/public/img/archive/credits.json +28 -0
- package/public/img/concorde/plane_01.jpg +0 -0
- package/public/img/concorde/plane_02.jpg +0 -0
- package/public/img/concorde/plane_03.jpg +0 -0
- package/public/img/concorde/plane_04.jpg +0 -0
- package/public/img/concorde/plane_05.jpg +0 -0
- package/public/img/concorde/plane_06.jpg +0 -0
- package/public/img/concorde/plane_07.jpg +0 -0
- package/public/img/concorde/plane_08.jpg +0 -0
- package/public/img/concorde/plane_09.jpg +0 -0
- package/public/img/concorde/plane_10.jpg +0 -0
- package/public/img/concorde/plane_11.jpg +0 -0
- package/public/img/concorde/plane_12.jpg +0 -0
- package/public/img/concorde/plane_13.jpg +0 -0
- package/public/robots.txt +11 -10
- package/scripts/docs-markdown-vite-plugin.ts +37 -0
- package/scripts/docs-public-url.mjs +50 -0
- package/scripts/docs.htaccess +75 -0
- package/scripts/generate-crawl-docs.mjs +207 -116
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/post-build-docs.js +34 -50
- package/scripts/post-build.mjs +0 -0
- package/src/core/components/functional/date/date.md +91 -231
- package/src/core/components/functional/fetch/fetch.md +66 -83
- package/src/core/components/functional/if/if.md +28 -3
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +99 -43
- package/src/core/components/functional/mix/mix.md +31 -26
- package/src/core/components/functional/queue/queue.demo.ts +10 -7
- package/src/core/components/functional/queue/queue.md +40 -61
- package/src/core/components/functional/router/router.demo.ts +16 -16
- package/src/core/components/functional/router/router.md +64 -65
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/src/core/components/functional/sdui/example.json +19 -86
- package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/src/core/components/functional/sdui/sdui.md +187 -358
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.demo.ts +21 -22
- package/src/core/components/functional/states/states.md +86 -61
- package/src/core/components/functional/states/states.ts +1 -1
- package/src/core/components/functional/submit/submit.md +64 -72
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/translation/translation.md +38 -0
- package/src/core/components/functional/value/value.md +34 -22
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/alert/alert.md +48 -58
- package/src/core/components/ui/badge/badge.md +27 -34
- package/src/core/components/ui/button/button.md +139 -106
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +17 -32
- package/src/core/components/ui/card/card.md +6 -6
- package/src/core/components/ui/divider/divider.md +8 -11
- package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
- package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
- package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
- package/src/core/components/ui/form/input/input.md +95 -95
- package/src/core/components/ui/form/radio/radio.md +55 -34
- package/src/core/components/ui/form/select/select.md +60 -45
- package/src/core/components/ui/form/switch/switch.md +57 -34
- package/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/src/core/components/ui/group/group.md +35 -33
- package/src/core/components/ui/icon/icon.md +4 -4
- package/src/core/components/ui/image/image.md +41 -107
- package/src/core/components/ui/link/link.md +6 -6
- package/src/core/components/ui/loader/loader.md +30 -55
- package/src/core/components/ui/menu/menu.md +27 -27
- package/src/core/components/ui/modal/modal.md +72 -96
- package/src/core/components/ui/modal/modal.ts +14 -11
- package/src/core/components/ui/pop/pop.md +80 -158
- package/src/core/components/ui/progress/progress.md +2 -2
- package/src/core/components/ui/table/table.md +91 -255
- package/src/core/components/ui/theme/theme.md +11 -36
- package/src/core/components/ui/toast/toast.md +48 -117
- package/src/core/components/ui/tooltip/tooltip.md +27 -62
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/LocationHandler.spec.ts +80 -0
- package/src/core/utils/LocationHandler.ts +5 -9
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +88 -75
- package/src/docs/components/docs-demo-sources.ts +70 -147
- package/src/docs/components/docs-lit-demo.ts +20 -40
- package/src/docs/components/docs-source-link.ts +0 -82
- package/src/docs/decorators/ancestor-attribute.md +59 -0
- package/src/docs/decorators/auto-subscribe.md +40 -0
- package/src/docs/decorators/bind.md +77 -0
- package/src/docs/decorators/get.md +160 -0
- package/src/docs/decorators/handle.md +119 -0
- package/src/docs/decorators/on-assign.md +63 -0
- package/src/docs/decorators/patch.md +44 -0
- package/src/docs/decorators/post.md +134 -0
- package/src/docs/decorators/publish.md +56 -0
- package/src/docs/decorators/put.md +51 -0
- package/src/docs/decorators/subscribe.md +87 -0
- package/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/src/docs/directives/sub.md +75 -0
- package/src/docs/directives/t.md +73 -0
- package/src/docs/docs-location.spec.ts +46 -0
- package/src/docs/docs-location.ts +123 -32
- package/src/docs/docs.ts +6 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
- package/src/docs/example/decorators-demo-geo.ts +30 -19
- package/src/docs/example/decorators-demo-post.ts +88 -186
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
- package/src/docs/example/decorators-demo.ts +85 -98
- package/src/docs/example/docs-api-config-demos.ts +19 -20
- package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
- package/src/docs/example/docs-flight-demos.ts +147 -0
- package/src/docs/example/docs-jsonata-demos.ts +52 -52
- package/src/docs/example/docs-list-demos.ts +43 -123
- package/src/docs/example/docs-provider-keys.ts +33 -28
- package/src/docs/example/docs-queue-demos.ts +37 -77
- package/src/docs/example/docs-router-demos.ts +20 -25
- package/src/docs/example/docs-submit-demos.ts +48 -48
- package/src/docs/example/docs-toggle-demos.ts +4 -3
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +76 -0
- package/src/docs/getting-started/components.md +5 -0
- package/src/docs/getting-started/create-a-component.md +136 -0
- package/src/docs/getting-started/dataFlow.md +87 -0
- package/src/docs/getting-started/installation.md +36 -0
- package/src/docs/getting-started/my-first-component.md +227 -0
- package/src/docs/getting-started/start.md +35 -0
- package/src/docs/getting-started/theming.md +253 -0
- package/src/docs/header/header.ts +240 -71
- package/src/docs/home/catalog.ts +44 -0
- package/src/docs/home/home.ts +520 -0
- package/src/docs/home/mach-stage.ts +389 -0
- package/src/docs/layout.ts +12 -11
- package/src/docs/misc/api-configuration.md +79 -0
- package/src/docs/misc/dataProviderKey.md +168 -0
- package/src/docs/misc/docs-mock-api.md +62 -0
- package/src/docs/misc/dynamic-path.md +71 -0
- package/src/docs/misc/endpoint.md +45 -0
- package/src/docs/misc/html-integration.md +14 -0
- package/src/docs/mock-api/api-config-mock.ts +5 -0
- package/src/docs/mock-api/fixtures.ts +0 -278
- package/src/docs/mock-api/flights.ts +89 -0
- package/src/docs/mock-api/router.ts +3 -4
- package/src/docs/mock-api/urls.ts +1 -2
- package/src/docs/navigation/components-index.ts +56 -0
- package/src/docs/navigation/navigation.ts +219 -232
- package/src/docs/navigation/pager.ts +67 -0
- package/src/docs/navigation/toc.ts +101 -0
- package/src/docs/search/docs-search.json +2419 -4374
- package/src/docs/search/markdown-renderer.ts +33 -7
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- package/src/docs/shiki/index.ts +109 -0
- package/src/docs/tailwind/css/base/scrollbar.css +22 -0
- package/src/docs/tailwind/css/base/theme.css +96 -0
- package/src/docs/tailwind/css/base/typography.css +4 -0
- package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
- package/src/docs/tailwind/css/docs/content.css +32 -0
- package/src/docs/tailwind/css/docs/page.css +10 -0
- package/src/docs/tailwind/css/docs.css +9 -0
- package/src/docs/tailwind/css/home/hero.css +210 -0
- package/src/docs/tailwind/css/home/motion.css +84 -0
- package/src/docs/tailwind/css/home/sections.css +416 -0
- package/src/docs/tailwind/css/tailwind.css +7 -185
- package/src/tsconfig.json +23 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +8 -4
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- package/.github/workflows/ci.yml +0 -21
- package/.github-export-ignore +0 -30
- package/CONTRIBUTING.md +0 -59
- package/DEV.md +0 -54
- package/LICENSE +0 -21
- package/OPEN_SOURCE_CHECKPOINT.md +0 -133
- package/concorde-3d.bundle.js +0 -3960
- package/concorde-3d.es.js +0 -33433
- package/concorde-hugging-face-infer.bundle.js +0 -32
- package/concorde-hugging-face-infer.es.js +0 -2952
- package/concorde-interactive.bundle.js +0 -1157
- package/concorde-interactive.es.js +0 -10734
- package/concorde-shader.bundle.js +0 -116
- package/concorde-shader.es.js +0 -8353
- package/concorde-webgpu.bundle.js +0 -307
- package/concorde-webgpu.es.js +0 -8627
- package/docs/assets/index-D8MVWqY6.js +0 -12251
- package/docs/assets/index-DiD0qYvE.css +0 -1
- package/docs/crawl/core/components/functional/date/date.html +0 -190
- package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
- package/docs/crawl/core/components/functional/if/if.html +0 -27
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
- package/docs/crawl/core/components/functional/list/list.html +0 -70
- package/docs/crawl/core/components/functional/mix/mix.html +0 -45
- package/docs/crawl/core/components/functional/queue/queue.html +0 -96
- package/docs/crawl/core/components/functional/router/router.html +0 -106
- package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
- package/docs/crawl/core/components/functional/states/states.html +0 -66
- package/docs/crawl/core/components/functional/submit/submit.html +0 -160
- package/docs/crawl/core/components/functional/value/value.html +0 -51
- package/docs/crawl/core/components/ui/alert/alert.html +0 -110
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
- package/docs/crawl/core/components/ui/badge/badge.html +0 -119
- package/docs/crawl/core/components/ui/button/button.html +0 -149
- package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
- package/docs/crawl/core/components/ui/card/card.html +0 -99
- package/docs/crawl/core/components/ui/divider/divider.html +0 -58
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
- package/docs/crawl/core/components/ui/form/input/input.html +0 -109
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
- package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
- package/docs/crawl/core/components/ui/form/select/select.html +0 -73
- package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
- package/docs/crawl/core/components/ui/group/group.html +0 -82
- package/docs/crawl/core/components/ui/icon/icon.html +0 -133
- package/docs/crawl/core/components/ui/image/image.html +0 -110
- package/docs/crawl/core/components/ui/link/link.html +0 -42
- package/docs/crawl/core/components/ui/loader/loader.html +0 -50
- package/docs/crawl/core/components/ui/modal/modal.html +0 -117
- package/docs/crawl/core/components/ui/pop/pop.html +0 -102
- package/docs/crawl/core/components/ui/progress/progress.html +0 -58
- package/docs/crawl/core/components/ui/table/table.html +0 -413
- package/docs/crawl/core/components/ui/toast/toast.html +0 -122
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
- package/docs/crawl/docs/_core-concept/overview.html +0 -66
- package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
- package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
- package/docs/crawl/docs/_decorators/bind.html +0 -141
- package/docs/crawl/docs/_decorators/get.html +0 -149
- package/docs/crawl/docs/_decorators/handle.html +0 -165
- package/docs/crawl/docs/_decorators/on-assign.html +0 -355
- package/docs/crawl/docs/_decorators/patch.html +0 -78
- package/docs/crawl/docs/_decorators/post.html +0 -139
- package/docs/crawl/docs/_decorators/publish.html +0 -61
- package/docs/crawl/docs/_decorators/put.html +0 -78
- package/docs/crawl/docs/_decorators/subscribe.html +0 -109
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
- package/docs/crawl/docs/_directives/sub.html +0 -93
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
- package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
- package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
- package/docs/crawl/docs/_getting-started/start.html +0 -76
- package/docs/crawl/docs/_getting-started/theming.html +0 -85
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
- package/docs/crawl/hubs/decorators.html +0 -547
- package/docs/crawl/hubs/form-components.html +0 -359
- package/docs/crawl/hubs/remote-data.html +0 -452
- package/docs/crawl/index.html +0 -101
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -75
- package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
- package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
- package/docs/src/docs/_decorators/bind.md +0 -167
- package/docs/src/docs/_decorators/get.md +0 -162
- package/docs/src/docs/_decorators/handle.md +0 -175
- package/docs/src/docs/_decorators/on-assign.md +0 -390
- package/docs/src/docs/_decorators/patch.md +0 -70
- package/docs/src/docs/_decorators/post.md +0 -146
- package/docs/src/docs/_decorators/publish.md +0 -55
- package/docs/src/docs/_decorators/put.md +0 -70
- package/docs/src/docs/_decorators/subscribe.md +0 -100
- package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/docs/src/docs/_directives/sub.md +0 -91
- package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/docs/src/docs/_getting-started/pubsub.md +0 -37
- package/docs/src/docs/_getting-started/start.md +0 -47
- package/docs/src/docs/_getting-started/theming.md +0 -91
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/docs/src/tsconfig.declarations.json +0 -22
- package/docs/src/tsconfig.emit.json +0 -23
- package/gitlab/job_github_mirror.sh +0 -39
- package/scripts/github-export.mjs +0 -150
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/src/css.d.ts +0 -19
- package/src/docs/_core-concept/overview.md +0 -57
- package/src/docs/_core-concept/subscriber.md +0 -75
- package/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/src/docs/_decorators/auto-subscribe.md +0 -202
- package/src/docs/_decorators/bind.md +0 -167
- package/src/docs/_decorators/get.md +0 -162
- package/src/docs/_decorators/handle.md +0 -175
- package/src/docs/_decorators/on-assign.md +0 -390
- package/src/docs/_decorators/patch.md +0 -70
- package/src/docs/_decorators/post.md +0 -146
- package/src/docs/_decorators/publish.md +0 -55
- package/src/docs/_decorators/put.md +0 -70
- package/src/docs/_decorators/subscribe.md +0 -100
- package/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/src/docs/_directives/sub.md +0 -91
- package/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/src/docs/_getting-started/concorde-outside.md +0 -33
- package/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/src/docs/_getting-started/pubsub.md +0 -37
- package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
- package/src/docs/example/docs-joke-demos.ts +0 -297
- package/src/docs/prism/index.ts +0 -6
- package/src/docs/prism/prism.css +0 -158
- package/src/docs/prism/prism.js +0 -1022
- package/src/tsconfig.declarations.json +0 -22
- package/src/tsconfig.emit.json +0 -23
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/divider" data-doc-id="core/components/ui/divider/divider">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Divider — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default ">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/divider/divider">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/divider">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/divider.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/divider">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 — Divider</strong>. sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default <span>Doc ID: <code>core/components/ui/divider/divider</code>. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem. URL: <a href="https://concorde.supersoniks.org/core/components/ui/divider">https://concorde.supersoniks.org/core/components/ui/divider</a>.</span></p>
|
|
20
|
+
<h1 id="divider">Divider</h1>
|
|
21
|
+
<p><strong><code>sonic-divider</code></strong> draws a horizontal or vertical rule with optional <strong>centered label</strong> copy. Use it to separate sections in forms, cards, and <strong><code>sonic-menu</code></strong>. Set <strong><code>label</code></strong> for simple HTML captions or use the <strong>default slot</strong> for richer markup; default <strong><code>align</code></strong> is <strong><code>center</code></strong> and default <strong><code>lineStyle</code></strong> is <strong><code>solid</code></strong>.</p>
|
|
22
|
+
<h2 id="basic-example">Basic example</h2>
|
|
23
|
+
<p>A bare divider is a full-width line with vertical margin. Omit <strong><code>size</code></strong> to use the host default spacing (<code>0.5rem</code> block margin).</p>
|
|
24
|
+
<pre><code><sonic-divider></sonic-divider>
|
|
25
|
+
</code></pre>
|
|
26
|
+
<h2 id="label-and-align">Label and align</h2>
|
|
27
|
+
<p><strong><code>label</code></strong> renders inside the line (as HTML). <strong><code>align</code></strong> controls which side(s) of the line remain visible: <strong><code>left</code></strong> drops the leading segment, <strong><code>right</code></strong> drops the trailing segment, <strong><code>center</code></strong> keeps both.</p>
|
|
28
|
+
<pre><code><div class="grid gap-4">
|
|
29
|
+
<sonic-divider label="Default centered label"></sonic-divider>
|
|
30
|
+
<sonic-divider label="Left" align="left"></sonic-divider>
|
|
31
|
+
<sonic-divider label="Center" align="center"></sonic-divider>
|
|
32
|
+
<sonic-divider label="Right" align="right"></sonic-divider>
|
|
33
|
+
</div>
|
|
34
|
+
</code></pre>
|
|
35
|
+
<h2 id="size">Size</h2>
|
|
36
|
+
<p><strong><code>size</code></strong> adjusts block margin and label font size. Values follow the shared Concorde scale (<code>2xs</code> … <code>2xl</code>).</p>
|
|
37
|
+
<pre><code><div class="grid gap-4">
|
|
38
|
+
<sonic-divider size="2xs" label="2xs"></sonic-divider>
|
|
39
|
+
<sonic-divider size="xs" label="xs"></sonic-divider>
|
|
40
|
+
<sonic-divider size="sm" label="sm"></sonic-divider>
|
|
41
|
+
<sonic-divider size="md" label="md"></sonic-divider>
|
|
42
|
+
<sonic-divider size="lg" label="lg"></sonic-divider>
|
|
43
|
+
<sonic-divider size="xl" label="xl"></sonic-divider>
|
|
44
|
+
<sonic-divider size="2xl" label="2xl"></sonic-divider>
|
|
45
|
+
</div>
|
|
46
|
+
</code></pre>
|
|
47
|
+
<h2 id="line-style">Line style</h2>
|
|
48
|
+
<p><strong><code>lineStyle</code></strong> sets the stroke of the rule (<code>solid</code> · <code>dashed</code> · <code>dotted</code>). In HTML use the reflected attribute <strong><code>linestyle</code></strong> (case-insensitive).</p>
|
|
49
|
+
<pre><code><div class="grid gap-4">
|
|
50
|
+
<sonic-divider label="Solid"></sonic-divider>
|
|
51
|
+
<sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
|
|
52
|
+
<sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
|
|
53
|
+
</div>
|
|
54
|
+
</code></pre>
|
|
55
|
+
<h2 id="vertical-and-margin">Vertical and margin</h2>
|
|
56
|
+
<p>Set <strong><code>vertical</code></strong> for a column rule (for example between toolbar actions). <strong><code>noMargin</code></strong> removes host margin when a parent layout already provides spacing.</p>
|
|
57
|
+
<pre><code><div class="flex items-stretch gap-2" style="min-height: 3rem;">
|
|
58
|
+
<span class="flex items-center px-2">Before</span>
|
|
59
|
+
<sonic-divider vertical noMargin></sonic-divider>
|
|
60
|
+
<span class="flex items-center px-2">After</span>
|
|
61
|
+
</div>
|
|
62
|
+
</code></pre>
|
|
63
|
+
<h2 id="default-slot">Default slot</h2>
|
|
64
|
+
<p>Slotted content replaces or augments <strong><code>label</code></strong>. Useful for badges, icons, or mixed markup in menus.</p>
|
|
65
|
+
<pre><code><sonic-divider>
|
|
66
|
+
<span class="mr-2">Departures</span>
|
|
67
|
+
<sonic-badge type="danger">+25</sonic-badge>
|
|
68
|
+
</sonic-divider>
|
|
69
|
+
</code></pre>
|
|
70
|
+
<h2 id="inside-typed-cards">Inside typed cards</h2>
|
|
71
|
+
<p>On <strong><code>sonic-card</code></strong> with semantic <strong><code>type</code></strong> (<code>primary</code> · <code>warning</code> · <code>danger</code> · <code>info</code> · <code>success</code>), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. <strong><code>label</code></strong> and slotted captions use the same foreground color as surrounding copy.</p>
|
|
72
|
+
<pre><code><div class="grid gap-4 max-w-xl">
|
|
73
|
+
<sonic-card type="danger">
|
|
74
|
+
<div>CN 001 is cancelled.</div>
|
|
75
|
+
<sonic-divider label="Affected passengers"></sonic-divider>
|
|
76
|
+
<ul class="m-0 pl-5 text-sm">
|
|
77
|
+
<li>Ada Lindqvist</li>
|
|
78
|
+
<li>Captain Leo Marchand</li>
|
|
79
|
+
</ul>
|
|
80
|
+
</sonic-card>
|
|
81
|
+
<sonic-card type="info">
|
|
82
|
+
<div>Aircraft maintenance is scheduled for tonight.</div>
|
|
83
|
+
<sonic-divider></sonic-divider>
|
|
84
|
+
<div class="opacity-60">Expected downtime: about 15 minutes.</div>
|
|
85
|
+
</sonic-card>
|
|
86
|
+
</div>
|
|
87
|
+
</code></pre>
|
|
88
|
+
<h2 id="api-reference">API reference</h2>
|
|
89
|
+
<table>
|
|
90
|
+
<thead>
|
|
91
|
+
<tr>
|
|
92
|
+
<th>Attribute</th>
|
|
93
|
+
<th>Values</th>
|
|
94
|
+
<th>Description</th>
|
|
95
|
+
</tr>
|
|
96
|
+
</thead>
|
|
97
|
+
<tbody><tr>
|
|
98
|
+
<td><code>label</code></td>
|
|
99
|
+
<td>string (HTML)</td>
|
|
100
|
+
<td>Caption centered on the rule; combined with default-slot content when both are set</td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td><code>align</code></td>
|
|
104
|
+
<td><code>left</code> · <code>center</code> · <code>right</code> (default <code>center</code>)</td>
|
|
105
|
+
<td>Hides the leading or trailing line segment for left/right alignment</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td><code>size</code></td>
|
|
109
|
+
<td><code>2xs</code> … <code>2xl</code> · <code>inherit</code></td>
|
|
110
|
+
<td>Vertical margin and label <code>font-size</code>; omit for host defaults</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr>
|
|
113
|
+
<td><code>lineStyle</code></td>
|
|
114
|
+
<td><code>solid</code> · <code>dashed</code> · <code>dotted</code> (default <code>solid</code>)</td>
|
|
115
|
+
<td>Stroke style of the rule (HTML attribute <code>linestyle</code>)</td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td><code>vertical</code></td>
|
|
119
|
+
<td>boolean</td>
|
|
120
|
+
<td>Renders a vertical rule; swap block/inline margins</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<tr>
|
|
123
|
+
<td><code>noMargin</code></td>
|
|
124
|
+
<td>boolean</td>
|
|
125
|
+
<td>Sets host margin to <code>0</code></td>
|
|
126
|
+
</tr>
|
|
127
|
+
</tbody></table>
|
|
128
|
+
<table>
|
|
129
|
+
<thead>
|
|
130
|
+
<tr>
|
|
131
|
+
<th>Slot</th>
|
|
132
|
+
<th>Description</th>
|
|
133
|
+
</tr>
|
|
134
|
+
</thead>
|
|
135
|
+
<tbody><tr>
|
|
136
|
+
<td><em>(default)</em></td>
|
|
137
|
+
<td>Label markup when <strong><code>label</code></strong> is insufficient or empty</td>
|
|
138
|
+
</tr>
|
|
139
|
+
</tbody></table>
|
|
140
|
+
|
|
141
|
+
</article>
|
|
142
|
+
</main>
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# Divider
|
|
2
|
+
|
|
3
|
+
**`sonic-divider`** draws a horizontal or vertical rule with optional **centered label** copy. Use it to separate sections in forms, cards, and **`sonic-menu`**. Set **`label`** for simple HTML captions or use the **default slot** for richer markup; default **`align`** is **`center`** and default **`lineStyle`** is **`solid`**.
|
|
4
|
+
|
|
5
|
+
## Basic example
|
|
6
|
+
|
|
7
|
+
A bare divider is a full-width line with vertical margin. Omit **`size`** to use the host default spacing (`0.5rem` block margin).
|
|
8
|
+
|
|
9
|
+
<sonic-code>
|
|
10
|
+
<template>
|
|
11
|
+
<sonic-divider></sonic-divider>
|
|
12
|
+
</template>
|
|
13
|
+
</sonic-code>
|
|
14
|
+
|
|
15
|
+
## Label and align
|
|
16
|
+
|
|
17
|
+
**`label`** renders inside the line (as HTML). **`align`** controls which side(s) of the line remain visible: **`left`** drops the leading segment, **`right`** drops the trailing segment, **`center`** keeps both.
|
|
18
|
+
|
|
19
|
+
<sonic-code>
|
|
20
|
+
<template>
|
|
21
|
+
<div class="grid gap-4">
|
|
22
|
+
<sonic-divider label="Default centered label"></sonic-divider>
|
|
23
|
+
<sonic-divider label="Left" align="left"></sonic-divider>
|
|
24
|
+
<sonic-divider label="Center" align="center"></sonic-divider>
|
|
25
|
+
<sonic-divider label="Right" align="right"></sonic-divider>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
</sonic-code>
|
|
29
|
+
|
|
30
|
+
## Size
|
|
31
|
+
|
|
32
|
+
**`size`** adjusts block margin and label font size. Values follow the shared Concorde scale (`2xs` … `2xl`).
|
|
33
|
+
|
|
34
|
+
<sonic-code>
|
|
35
|
+
<template>
|
|
36
|
+
<div class="grid gap-4">
|
|
37
|
+
<sonic-divider size="2xs" label="2xs"></sonic-divider>
|
|
38
|
+
<sonic-divider size="xs" label="xs"></sonic-divider>
|
|
39
|
+
<sonic-divider size="sm" label="sm"></sonic-divider>
|
|
40
|
+
<sonic-divider size="md" label="md"></sonic-divider>
|
|
41
|
+
<sonic-divider size="lg" label="lg"></sonic-divider>
|
|
42
|
+
<sonic-divider size="xl" label="xl"></sonic-divider>
|
|
43
|
+
<sonic-divider size="2xl" label="2xl"></sonic-divider>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
</sonic-code>
|
|
47
|
+
|
|
48
|
+
## Line style
|
|
49
|
+
|
|
50
|
+
**`lineStyle`** sets the stroke of the rule (`solid` · `dashed` · `dotted`). In HTML use the reflected attribute **`linestyle`** (case-insensitive).
|
|
51
|
+
|
|
52
|
+
<sonic-code>
|
|
53
|
+
<template>
|
|
54
|
+
<div class="grid gap-4">
|
|
55
|
+
<sonic-divider label="Solid"></sonic-divider>
|
|
56
|
+
<sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
|
|
57
|
+
<sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
</sonic-code>
|
|
61
|
+
|
|
62
|
+
## Vertical and margin
|
|
63
|
+
|
|
64
|
+
Set **`vertical`** for a column rule (for example between toolbar actions). **`noMargin`** removes host margin when a parent layout already provides spacing.
|
|
65
|
+
|
|
66
|
+
<sonic-code>
|
|
67
|
+
<template>
|
|
68
|
+
<div class="flex items-stretch gap-2" style="min-height: 3rem;">
|
|
69
|
+
<span class="flex items-center px-2">Before</span>
|
|
70
|
+
<sonic-divider vertical noMargin></sonic-divider>
|
|
71
|
+
<span class="flex items-center px-2">After</span>
|
|
72
|
+
</div>
|
|
73
|
+
</template>
|
|
74
|
+
</sonic-code>
|
|
75
|
+
|
|
76
|
+
## Default slot
|
|
77
|
+
|
|
78
|
+
Slotted content replaces or augments **`label`**. Useful for badges, icons, or mixed markup in menus.
|
|
79
|
+
|
|
80
|
+
<sonic-code>
|
|
81
|
+
<template>
|
|
82
|
+
<sonic-divider>
|
|
83
|
+
<span class="mr-2">Departures</span>
|
|
84
|
+
<sonic-badge type="danger">+25</sonic-badge>
|
|
85
|
+
</sonic-divider>
|
|
86
|
+
</template>
|
|
87
|
+
</sonic-code>
|
|
88
|
+
|
|
89
|
+
## Inside typed cards
|
|
90
|
+
|
|
91
|
+
On **`sonic-card`** with semantic **`type`** (`primary` · `warning` · `danger` · `info` · `success`), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. **`label`** and slotted captions use the same foreground color as surrounding copy.
|
|
92
|
+
|
|
93
|
+
<sonic-code>
|
|
94
|
+
<template>
|
|
95
|
+
<div class="grid gap-4 max-w-xl">
|
|
96
|
+
<sonic-card type="danger">
|
|
97
|
+
<div>CN 001 is cancelled.</div>
|
|
98
|
+
<sonic-divider label="Affected passengers"></sonic-divider>
|
|
99
|
+
<ul class="m-0 pl-5 text-sm">
|
|
100
|
+
<li>Ada Lindqvist</li>
|
|
101
|
+
<li>Captain Leo Marchand</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</sonic-card>
|
|
104
|
+
<sonic-card type="info">
|
|
105
|
+
<div>Aircraft maintenance is scheduled for tonight.</div>
|
|
106
|
+
<sonic-divider></sonic-divider>
|
|
107
|
+
<div class="opacity-60">Expected downtime: about 15 minutes.</div>
|
|
108
|
+
</sonic-card>
|
|
109
|
+
</div>
|
|
110
|
+
</template>
|
|
111
|
+
</sonic-code>
|
|
112
|
+
|
|
113
|
+
## API reference
|
|
114
|
+
|
|
115
|
+
| Attribute | Values | Description |
|
|
116
|
+
|----------|---------|-------------|
|
|
117
|
+
| `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
|
|
118
|
+
| `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
|
|
119
|
+
| `size` | `2xs` … `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
|
|
120
|
+
| `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
|
|
121
|
+
| `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
|
|
122
|
+
| `noMargin` | boolean | Sets host margin to `0` |
|
|
123
|
+
|
|
124
|
+
| Slot | Description |
|
|
125
|
+
|------|-------------|
|
|
126
|
+
| *(default)* | Label markup when **`label`** is insufficient or empty |
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/checkbox" data-doc-id="core/components/ui/form/checkbox/checkbox">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Checkbox — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-checkbox is a styled checkbox that writes its value into form data. Give it a name and a formDataProvider (on the field or an ancestor); checkboxes sharing a name build an array of the checked v">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, value, name, formDataProvider, label, description, size, md, checked">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/checkbox/checkbox">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/checkbox">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/checkbox.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/checkbox">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 — Checkbox</strong>. sonic-checkbox is a styled checkbox that writes its value into form data. Give it a name and a formDataProvider (on the field or an ancestor); checkboxes sharing a name build an array of the checked v <span>Doc ID: <code>core/components/ui/form/checkbox/checkbox</code>. Keywords: Concorde, supersoniks, core/components/ui/form/checkbox/checkbox, checkbox, Checkbox, UI component, form, sonic-checkbox, web component, value, name, formDataProvider, label, description, size, md, checked. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/checkbox">https://concorde.supersoniks.org/core/components/ui/form/checkbox</a>.</span></p>
|
|
20
|
+
<h1 id="checkbox">Checkbox</h1>
|
|
21
|
+
<p><strong><code>sonic-checkbox</code></strong> is a styled checkbox that writes its <code>value</code> into form data. Give it a <code>name</code> and a <code>formDataProvider</code> (on the field or an ancestor); checkboxes sharing a <code>name</code> build an array of the checked values. 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><sonic-checkbox>
|
|
24
|
+
Notify me of gate changes
|
|
25
|
+
<span slot="description">One message per change, no spam.</span>
|
|
26
|
+
</sonic-checkbox>
|
|
27
|
+
</code></pre>
|
|
28
|
+
<h2 id="size">Size</h2>
|
|
29
|
+
<p>With no <code>size</code>, the checkbox follows <code>md</code> (1rem).</p>
|
|
30
|
+
<pre><code><div class="grid gap-2">
|
|
31
|
+
<sonic-checkbox size="2xs">2xs</sonic-checkbox>
|
|
32
|
+
<sonic-checkbox size="xs">xs</sonic-checkbox>
|
|
33
|
+
<sonic-checkbox size="sm">sm</sonic-checkbox>
|
|
34
|
+
<sonic-checkbox>Default</sonic-checkbox>
|
|
35
|
+
<sonic-checkbox size="lg">lg</sonic-checkbox>
|
|
36
|
+
<sonic-checkbox size="xl">xl</sonic-checkbox>
|
|
37
|
+
<sonic-checkbox size="2xl">2xl</sonic-checkbox>
|
|
38
|
+
</div>
|
|
39
|
+
</code></pre>
|
|
40
|
+
<h2 id="checked-and-disabled">Checked and disabled</h2>
|
|
41
|
+
<p><code>checked</code> sets the initial state. <code>disabled</code> blocks interaction and dims the control.</p>
|
|
42
|
+
<pre><code><div class="grid gap-2">
|
|
43
|
+
<sonic-checkbox checked>Checked</sonic-checkbox>
|
|
44
|
+
<sonic-checkbox disabled>Disabled</sonic-checkbox>
|
|
45
|
+
<sonic-checkbox disabled checked>Disabled and checked</sonic-checkbox>
|
|
46
|
+
<sonic-checkbox>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-checkbox>
|
|
47
|
+
</div>
|
|
48
|
+
</code></pre>
|
|
49
|
+
<h2 id="form-binding">Form binding</h2>
|
|
50
|
+
<p>Checkboxes with the same <code>name</code> under one <code>formDataProvider</code> store an array of the checked <code>value</code>s. Initial state is read from that data, so a value already present checks the matching box. See <a href="/docs/getting-started/dataFlow">Data flow</a>.</p>
|
|
51
|
+
<pre><code><div formDataProvider="checkbox-multiple-demo" class="grid gap-2">
|
|
52
|
+
<sonic-checkbox name="extras" value="baggage" checked>Extra baggage</sonic-checkbox>
|
|
53
|
+
<sonic-checkbox name="extras" value="meal">Meal</sonic-checkbox>
|
|
54
|
+
<sonic-checkbox name="extras" value="lounge">Lounge access</sonic-checkbox>
|
|
55
|
+
<div>Selected: <sonic-value dataProvider="checkbox-multiple-demo" key="extras"></sonic-value></div>
|
|
56
|
+
</div>
|
|
57
|
+
</code></pre>
|
|
58
|
+
<h2 id="single-value">Single value</h2>
|
|
59
|
+
<p><code>unique</code> stores a single value instead of an array: checking one box unchecks the others with the same <code>name</code>, and the checked box can be unchecked again (value <code>null</code>). <code>radio</code> does the same but cannot be unchecked by a click.</p>
|
|
60
|
+
<pre><code><div formDataProvider="checkbox-unique-demo" class="grid gap-2">
|
|
61
|
+
<sonic-checkbox unique name="cabin" value="economy">Economy</sonic-checkbox>
|
|
62
|
+
<sonic-checkbox unique name="cabin" value="business">Business</sonic-checkbox>
|
|
63
|
+
<div>Cabin: <sonic-value dataProvider="checkbox-unique-demo" key="cabin"></sonic-value></div>
|
|
64
|
+
</div>
|
|
65
|
+
</code></pre>
|
|
66
|
+
<h2 id="check-all-and-indeterminate">Check all and indeterminate</h2>
|
|
67
|
+
<p>A checkbox with <code>checksAll</code> and the same <code>name</code> toggles every sibling value. It shows the indeterminate icon when only some are checked; its own <code>value</code> is never stored. With <code>unsetOnDisconnect</code>, a checkbox removes its value from the data when it leaves the DOM. <code>showAsIndeterminate</code> forces the indeterminate icon on any checkbox.</p>
|
|
68
|
+
<pre><code><div formDataProvider="checkbox-check-all-demo" class="grid gap-2">
|
|
69
|
+
<sonic-checkbox name="alerts" value="all" checksAll>All alerts</sonic-checkbox>
|
|
70
|
+
<sonic-checkbox name="alerts" value="boarding">Boarding</sonic-checkbox>
|
|
71
|
+
<sonic-checkbox name="alerts" value="gate">Gate change</sonic-checkbox>
|
|
72
|
+
<div id="checkbox-removable" class="flex gap-2 items-center">
|
|
73
|
+
<sonic-checkbox name="alerts" value="delay" unsetOnDisconnect>Delay</sonic-checkbox>
|
|
74
|
+
<sonic-button size="xs" variant="ghost" onclick="document.getElementById('checkbox-removable').remove()">Remove</sonic-button>
|
|
75
|
+
</div>
|
|
76
|
+
<div>Selected: <sonic-value dataProvider="checkbox-check-all-demo" key="alerts"></sonic-value></div>
|
|
77
|
+
</div>
|
|
78
|
+
</code></pre>
|
|
79
|
+
<h2 id="api-reference">API reference</h2>
|
|
80
|
+
<table>
|
|
81
|
+
<thead>
|
|
82
|
+
<tr>
|
|
83
|
+
<th>Attribute</th>
|
|
84
|
+
<th>Values</th>
|
|
85
|
+
<th>Description</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody><tr>
|
|
89
|
+
<td><code>name</code></td>
|
|
90
|
+
<td>string</td>
|
|
91
|
+
<td>Key in the form data (dot notation supported)</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td><code>value</code></td>
|
|
95
|
+
<td>string</td>
|
|
96
|
+
<td>Value stored when checked</td>
|
|
97
|
+
</tr>
|
|
98
|
+
<tr>
|
|
99
|
+
<td><code>formDataProvider</code></td>
|
|
100
|
+
<td>string</td>
|
|
101
|
+
<td>Form data id; inherited from the closest ancestor when omitted</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr>
|
|
104
|
+
<td><code>checked</code></td>
|
|
105
|
+
<td>boolean</td>
|
|
106
|
+
<td>Initial checked state</td>
|
|
107
|
+
</tr>
|
|
108
|
+
<tr>
|
|
109
|
+
<td><code>unique</code></td>
|
|
110
|
+
<td>boolean</td>
|
|
111
|
+
<td>Stores a single value; can be unchecked</td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td><code>radio</code></td>
|
|
115
|
+
<td>boolean</td>
|
|
116
|
+
<td>Stores a single value; cannot be unchecked by a click</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td><code>checksAll</code></td>
|
|
120
|
+
<td>boolean</td>
|
|
121
|
+
<td>Toggles every checkbox with the same <code>name</code></td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td><code>unsetOnDisconnect</code></td>
|
|
125
|
+
<td>boolean</td>
|
|
126
|
+
<td>Removes the value from the data when the element is removed</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td><code>showAsIndeterminate</code></td>
|
|
130
|
+
<td>boolean</td>
|
|
131
|
+
<td>Forces the indeterminate icon</td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td><code>label</code></td>
|
|
135
|
+
<td>string (HTML)</td>
|
|
136
|
+
<td>Label, rendered before the default slot</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td><code>description</code></td>
|
|
140
|
+
<td>string (HTML)</td>
|
|
141
|
+
<td>Helper text, rendered in the <code>description</code> slot</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td><code>size</code></td>
|
|
145
|
+
<td><code>2xs</code> … <code>2xl</code> · <code>inherit</code> (default <code>md</code>)</td>
|
|
146
|
+
<td>Font size and box size</td>
|
|
147
|
+
</tr>
|
|
148
|
+
<tr>
|
|
149
|
+
<td><code>disabled</code></td>
|
|
150
|
+
<td>boolean</td>
|
|
151
|
+
<td>Blocks interaction</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td><code>required</code></td>
|
|
155
|
+
<td>boolean</td>
|
|
156
|
+
<td>Native validation on form submit</td>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td><code>autofocus</code></td>
|
|
160
|
+
<td>boolean</td>
|
|
161
|
+
<td>Focuses the input on load</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>iconName</code></td>
|
|
165
|
+
<td>string (default <code>check</code>)</td>
|
|
166
|
+
<td>Icon shown when checked</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td><code>indeterminateIconName</code></td>
|
|
170
|
+
<td>string (default <code>minus-small</code>)</td>
|
|
171
|
+
<td>Icon shown when indeterminate</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
|
|
175
|
+
<td>string</td>
|
|
176
|
+
<td>Forwarded to the inner input as <code>aria-label</code> / <code>aria-labelledby</code></td>
|
|
177
|
+
</tr>
|
|
178
|
+
</tbody></table>
|
|
179
|
+
<table>
|
|
180
|
+
<thead>
|
|
181
|
+
<tr>
|
|
182
|
+
<th>Slot</th>
|
|
183
|
+
<th>Description</th>
|
|
184
|
+
</tr>
|
|
185
|
+
</thead>
|
|
186
|
+
<tbody><tr>
|
|
187
|
+
<td><em>(default)</em></td>
|
|
188
|
+
<td>Label content (text, links)</td>
|
|
189
|
+
</tr>
|
|
190
|
+
<tr>
|
|
191
|
+
<td><code>description</code></td>
|
|
192
|
+
<td>Helper text under the label</td>
|
|
193
|
+
</tr>
|
|
194
|
+
</tbody></table>
|
|
195
|
+
<p>Fires a <code>change</code> event on each click.</p>
|
|
196
|
+
|
|
197
|
+
</article>
|
|
198
|
+
</main>
|
|
199
|
+
</body>
|
|
200
|
+
</html>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# Checkbox
|
|
2
|
+
|
|
3
|
+
**`sonic-checkbox`** is a styled checkbox that writes its `value` into form data. Give it a `name` and a `formDataProvider` (on the field or an ancestor); checkboxes sharing a `name` build an array of the checked values. 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
|
+
<sonic-checkbox>
|
|
10
|
+
Notify me of gate changes
|
|
11
|
+
<span slot="description">One message per change, no spam.</span>
|
|
12
|
+
</sonic-checkbox>
|
|
13
|
+
</template>
|
|
14
|
+
</sonic-code>
|
|
15
|
+
|
|
16
|
+
## Size
|
|
17
|
+
|
|
18
|
+
With no `size`, the checkbox follows `md` (1rem).
|
|
19
|
+
|
|
20
|
+
<sonic-code>
|
|
21
|
+
<template>
|
|
22
|
+
<div class="grid gap-2">
|
|
23
|
+
<sonic-checkbox size="2xs">2xs</sonic-checkbox>
|
|
24
|
+
<sonic-checkbox size="xs">xs</sonic-checkbox>
|
|
25
|
+
<sonic-checkbox size="sm">sm</sonic-checkbox>
|
|
26
|
+
<sonic-checkbox>Default</sonic-checkbox>
|
|
27
|
+
<sonic-checkbox size="lg">lg</sonic-checkbox>
|
|
28
|
+
<sonic-checkbox size="xl">xl</sonic-checkbox>
|
|
29
|
+
<sonic-checkbox size="2xl">2xl</sonic-checkbox>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
</sonic-code>
|
|
33
|
+
|
|
34
|
+
## Checked and disabled
|
|
35
|
+
|
|
36
|
+
`checked` sets the initial state. `disabled` blocks interaction and dims the control.
|
|
37
|
+
|
|
38
|
+
<sonic-code>
|
|
39
|
+
<template>
|
|
40
|
+
<div class="grid gap-2">
|
|
41
|
+
<sonic-checkbox checked>Checked</sonic-checkbox>
|
|
42
|
+
<sonic-checkbox disabled>Disabled</sonic-checkbox>
|
|
43
|
+
<sonic-checkbox disabled checked>Disabled and checked</sonic-checkbox>
|
|
44
|
+
<sonic-checkbox>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-checkbox>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
47
|
+
</sonic-code>
|
|
48
|
+
|
|
49
|
+
## Form binding
|
|
50
|
+
|
|
51
|
+
Checkboxes with the same `name` under one `formDataProvider` store an array of the checked `value`s. Initial state is read from that data, so a value already present checks the matching box. See [Data flow](/docs/getting-started/dataFlow).
|
|
52
|
+
|
|
53
|
+
<sonic-code>
|
|
54
|
+
<template>
|
|
55
|
+
<div formDataProvider="checkbox-multiple-demo" class="grid gap-2">
|
|
56
|
+
<sonic-checkbox name="extras" value="baggage" checked>Extra baggage</sonic-checkbox>
|
|
57
|
+
<sonic-checkbox name="extras" value="meal">Meal</sonic-checkbox>
|
|
58
|
+
<sonic-checkbox name="extras" value="lounge">Lounge access</sonic-checkbox>
|
|
59
|
+
<div>Selected: <sonic-value dataProvider="checkbox-multiple-demo" key="extras"></sonic-value></div>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
</sonic-code>
|
|
63
|
+
|
|
64
|
+
## Single value
|
|
65
|
+
|
|
66
|
+
`unique` stores a single value instead of an array: checking one box unchecks the others with the same `name`, and the checked box can be unchecked again (value `null`). `radio` does the same but cannot be unchecked by a click.
|
|
67
|
+
|
|
68
|
+
<sonic-code>
|
|
69
|
+
<template>
|
|
70
|
+
<div formDataProvider="checkbox-unique-demo" class="grid gap-2">
|
|
71
|
+
<sonic-checkbox unique name="cabin" value="economy">Economy</sonic-checkbox>
|
|
72
|
+
<sonic-checkbox unique name="cabin" value="business">Business</sonic-checkbox>
|
|
73
|
+
<div>Cabin: <sonic-value dataProvider="checkbox-unique-demo" key="cabin"></sonic-value></div>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
</sonic-code>
|
|
77
|
+
|
|
78
|
+
## Check all and indeterminate
|
|
79
|
+
|
|
80
|
+
A checkbox with `checksAll` and the same `name` toggles every sibling value. It shows the indeterminate icon when only some are checked; its own `value` is never stored. With `unsetOnDisconnect`, a checkbox removes its value from the data when it leaves the DOM. `showAsIndeterminate` forces the indeterminate icon on any checkbox.
|
|
81
|
+
|
|
82
|
+
<sonic-code>
|
|
83
|
+
<template>
|
|
84
|
+
<div formDataProvider="checkbox-check-all-demo" class="grid gap-2">
|
|
85
|
+
<sonic-checkbox name="alerts" value="all" checksAll>All alerts</sonic-checkbox>
|
|
86
|
+
<sonic-checkbox name="alerts" value="boarding">Boarding</sonic-checkbox>
|
|
87
|
+
<sonic-checkbox name="alerts" value="gate">Gate change</sonic-checkbox>
|
|
88
|
+
<div id="checkbox-removable" class="flex gap-2 items-center">
|
|
89
|
+
<sonic-checkbox name="alerts" value="delay" unsetOnDisconnect>Delay</sonic-checkbox>
|
|
90
|
+
<sonic-button size="xs" variant="ghost" onclick="document.getElementById('checkbox-removable').remove()">Remove</sonic-button>
|
|
91
|
+
</div>
|
|
92
|
+
<div>Selected: <sonic-value dataProvider="checkbox-check-all-demo" key="alerts"></sonic-value></div>
|
|
93
|
+
</div>
|
|
94
|
+
</template>
|
|
95
|
+
</sonic-code>
|
|
96
|
+
|
|
97
|
+
## API reference
|
|
98
|
+
|
|
99
|
+
| Attribute | Values | Description |
|
|
100
|
+
|----------|---------|-------------|
|
|
101
|
+
| `name` | string | Key in the form data (dot notation supported) |
|
|
102
|
+
| `value` | string | Value stored when checked |
|
|
103
|
+
| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
|
|
104
|
+
| `checked` | boolean | Initial checked state |
|
|
105
|
+
| `unique` | boolean | Stores a single value; can be unchecked |
|
|
106
|
+
| `radio` | boolean | Stores a single value; cannot be unchecked by a click |
|
|
107
|
+
| `checksAll` | boolean | Toggles every checkbox with the same `name` |
|
|
108
|
+
| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
|
|
109
|
+
| `showAsIndeterminate` | boolean | Forces the indeterminate icon |
|
|
110
|
+
| `label` | string (HTML) | Label, rendered before the default slot |
|
|
111
|
+
| `description` | string (HTML) | Helper text, rendered in the `description` slot |
|
|
112
|
+
| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and box size |
|
|
113
|
+
| `disabled` | boolean | Blocks interaction |
|
|
114
|
+
| `required` | boolean | Native validation on form submit |
|
|
115
|
+
| `autofocus` | boolean | Focuses the input on load |
|
|
116
|
+
| `iconName` | string (default `check`) | Icon shown when checked |
|
|
117
|
+
| `indeterminateIconName` | string (default `minus-small`) | Icon shown when indeterminate |
|
|
118
|
+
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
|
|
119
|
+
|
|
120
|
+
| Slot | Description |
|
|
121
|
+
|------|-------------|
|
|
122
|
+
| *(default)* | Label content (text, links) |
|
|
123
|
+
| `description` | Helper text under the label |
|
|
124
|
+
|
|
125
|
+
Fires a `change` event on each click.
|