@supersoniks/concorde 5.1.1 → 5.1.3
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/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +4 -4
- 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 +21 -21
- package/concorde-core.es.js +977 -980
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
- package/dist/concorde-core.bundle.js +21 -21
- package/dist/concorde-core.es.js +977 -980
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/concorde/plane_01.jpg +0 -0
- package/dist/img/concorde/plane_02.jpg +0 -0
- package/dist/img/concorde/plane_03.jpg +0 -0
- package/dist/img/concorde/plane_04.jpg +0 -0
- package/dist/img/concorde/plane_05.jpg +0 -0
- package/dist/img/concorde/plane_06.jpg +0 -0
- package/dist/img/concorde/plane_07.jpg +0 -0
- package/dist/img/concorde/plane_08.jpg +0 -0
- package/dist/img/concorde/plane_09.jpg +0 -0
- package/dist/img/concorde/plane_10.jpg +0 -0
- package/dist/img/concorde/plane_11.jpg +0 -0
- package/dist/img/concorde/plane_12.jpg +0 -0
- package/dist/img/concorde/plane_13.jpg +0 -0
- package/dist/img/og-concorde.jpg +0 -0
- package/dist/robots.txt +11 -10
- package/docs/.htaccess +82 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/about.html +111 -0
- package/docs/about.md +22 -0
- package/docs/assets/{index-Bb-_LRyY.js → index-6sS76xWj.js} +2625 -3158
- package/docs/assets/index-DkdPbH0F.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 +200 -0
- package/docs/core/components/functional/list/list.md +125 -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/core/components/functional/subscriber/subscriber.html +68 -0
- 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/core/components/ui/menu/menu.html +395 -0
- 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/custom-elements.json +16559 -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 +87 -0
- package/docs/docs/decorators/bind.md +76 -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/docs/getting-started/ai-agents.html +130 -0
- package/docs/docs/getting-started/ai-agents.md +50 -0
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/create-a-component.html +108 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/create-a-component.md +3 -6
- package/docs/docs/getting-started/dataFlow.html +174 -0
- package/{src/docs/_core-concept → docs/docs/getting-started}/dataFlow.md +18 -19
- package/docs/docs/getting-started/installation.html +69 -0
- package/docs/docs/getting-started/installation.md +36 -0
- package/docs/docs/getting-started/my-first-component.html +180 -0
- package/{src/docs/_getting-started → docs/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/docs/docs/index.html +99 -0
- package/docs/docs/misc/api-configuration.html +149 -0
- package/{src/docs/_misc → docs/docs/misc}/api-configuration.md +10 -12
- package/docs/docs/misc/dataProviderKey.html +136 -0
- package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
- package/docs/docs/misc/docs-mock-api.html +155 -0
- package/{src/docs/_misc → docs/docs/misc}/docs-mock-api.md +12 -13
- package/docs/docs/misc/dynamic-path.html +181 -0
- package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
- package/docs/docs/misc/endpoint.html +51 -0
- package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
- package/docs/docs/misc/html-integration.html +45 -0
- package/{src/docs/_misc → docs/docs/misc}/html-integration.md +4 -5
- package/docs/docs-mock-api-sw.js +58 -223
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/hubs/decorators.html +438 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +367 -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/img/og-concorde.jpg +0 -0
- package/docs/index.html +184 -68
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +5779 -0
- package/docs/llms.txt +108 -0
- package/docs/privacy.html +122 -0
- package/docs/privacy.md +32 -0
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +243 -0
- package/docs/src/core/components/functional/date/date.md +150 -0
- package/docs/src/core/components/functional/fetch/fetch.md +108 -0
- package/docs/src/core/components/functional/if/if.md +34 -0
- package/docs/src/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/src/core/components/functional/list/list.md +125 -0
- package/docs/src/core/components/functional/mix/mix.md +46 -0
- package/docs/src/core/components/functional/queue/queue.md +51 -0
- package/docs/src/core/components/functional/router/router.md +93 -0
- 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/default-library.json +108 -0
- package/docs/src/core/components/functional/sdui/example.json +32 -0
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +307 -0
- package/docs/src/core/components/functional/states/states.md +112 -0
- package/docs/src/core/components/functional/submit/submit.md +106 -0
- package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/src/core/components/functional/translation/translation.md +38 -0
- package/docs/src/core/components/functional/value/value.md +47 -0
- package/docs/src/core/components/ui/alert/alert.md +186 -0
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +181 -0
- package/docs/src/core/components/ui/button/button.md +216 -0
- package/docs/src/core/components/ui/captcha/captcha.md +56 -0
- package/docs/src/core/components/ui/card/card.md +215 -0
- package/docs/src/core/components/ui/divider/divider.md +126 -0
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/src/core/components/ui/form/input/input.md +142 -0
- package/docs/src/core/components/ui/form/radio/radio.md +78 -0
- package/docs/src/core/components/ui/form/select/select.md +86 -0
- package/docs/src/core/components/ui/form/switch/switch.md +80 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/src/core/components/ui/group/group.md +77 -0
- package/docs/src/core/components/ui/icon/icon.md +214 -0
- package/docs/src/core/components/ui/icon/icons.json +1 -0
- package/docs/src/core/components/ui/image/image.md +167 -0
- package/docs/src/core/components/ui/link/link.md +81 -0
- package/docs/src/core/components/ui/loader/loader.md +87 -0
- package/docs/src/core/components/ui/menu/menu.md +370 -0
- package/docs/src/core/components/ui/modal/modal.md +211 -0
- package/docs/src/core/components/ui/pop/pop.md +216 -0
- package/docs/src/core/components/ui/progress/progress.md +109 -0
- package/docs/src/core/components/ui/table/table.md +267 -0
- package/docs/src/core/components/ui/theme/theme.md +97 -0
- package/docs/src/core/components/ui/toast/toast.md +147 -0
- package/docs/src/core/components/ui/tooltip/tooltip.md +89 -0
- 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 +76 -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/ai-agents.md +50 -0
- package/docs/src/docs/getting-started/components.md +5 -0
- package/docs/src/docs/getting-started/create-a-component.md +136 -0
- package/docs/src/docs/getting-started/dataFlow.md +87 -0
- package/docs/src/docs/getting-started/installation.md +36 -0
- package/docs/src/docs/getting-started/my-first-component.md +227 -0
- package/docs/src/docs/getting-started/start.md +35 -0
- package/docs/src/docs/getting-started/theming.md +253 -0
- package/docs/src/docs/misc/api-configuration.md +79 -0
- package/docs/src/docs/misc/dataProviderKey.md +168 -0
- package/docs/src/docs/misc/docs-mock-api.md +62 -0
- package/docs/src/docs/misc/dynamic-path.md +71 -0
- package/docs/src/docs/misc/endpoint.md +45 -0
- package/docs/src/docs/misc/html-integration.md +14 -0
- package/docs/src/docs/search/docs-search.json +10332 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.json +1359 -0
- package/index.html +157 -5
- package/package.json +8 -4
- package/public/docs-mock-api-sw.js +58 -223
- package/public/docs-mock-api-sw.js.map +4 -4
- 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/img/og-concorde.jpg +0 -0
- package/public/robots.txt +11 -10
- package/scripts/ai-init.mjs +104 -379
- package/scripts/ai-init.test.mjs +81 -239
- package/scripts/docs-markdown-vite-plugin.ts +43 -0
- package/scripts/docs-public-url.mjs +56 -0
- package/scripts/docs.htaccess +82 -0
- package/scripts/generate-cem.mjs +244 -0
- package/scripts/generate-cem.test.mjs +122 -0
- package/scripts/generate-crawl-docs.mjs +233 -118
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/generate-sdui-catalog.mjs +11 -10
- package/scripts/post-build-docs.js +37 -50
- 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 +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/jsonata/jsonata.md +42 -37
- package/src/core/components/functional/list/list.md +103 -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/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/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/translation/translation.md +38 -0
- package/src/core/components/functional/value/value.md +34 -22
- 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/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/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/decorators/subscriber/bind.ts +9 -14
- package/src/core/utils/LocationHandler.spec.ts +80 -0
- package/src/core/utils/LocationHandler.ts +5 -9
- package/src/docs/components/docs-demo-sources.ts +55 -140
- package/src/docs/components/docs-lit-demo.ts +1 -3
- 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 +76 -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 +56 -0
- package/src/docs/docs-location.ts +133 -32
- package/src/docs/docs.ts +1 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +83 -135
- 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-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 +21 -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/getting-started/ai-agents.md +50 -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 +11 -6
- package/src/docs/home/catalog.ts +1 -1
- package/src/docs/home/home.ts +20 -11
- package/src/docs/layout.ts +12 -13
- 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/navigation.ts +82 -103
- package/src/docs/navigation/toc.ts +7 -4
- package/src/docs/search/docs-search.json +2804 -5024
- package/src/docs/search/markdown-renderer.ts +31 -8
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- package/src/docs/tailwind/css/docs/content.css +4 -5
- package/src/tsconfig.json +11 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- 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/assets/index-CD4WyL6o.css +0 -1
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- 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/ai-agents.md +0 -76
- 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/_getting-started → docs/docs/getting-started}/components.md +0 -0
- /package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +0 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# Switch
|
|
2
|
+
|
|
3
|
+
**`sonic-switch`** is a toggle-styled [Checkbox](/core/components/ui/form/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, so give independent switches distinct names. 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="switch-basic-demo" class="grid gap-2">
|
|
10
|
+
<sonic-switch name="notifications" value="on" checked>
|
|
11
|
+
Notifications
|
|
12
|
+
<span slot="description">Get an alert when your gate changes.</span>
|
|
13
|
+
</sonic-switch>
|
|
14
|
+
<div>Value: <sonic-value dataProvider="switch-basic-demo" key="notifications"></sonic-value></div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
</sonic-code>
|
|
18
|
+
|
|
19
|
+
## Size
|
|
20
|
+
|
|
21
|
+
With no `size`, the switch follows `md` (1rem).
|
|
22
|
+
|
|
23
|
+
<sonic-code>
|
|
24
|
+
<template>
|
|
25
|
+
<div class="grid gap-2">
|
|
26
|
+
<sonic-switch size="2xs">2xs</sonic-switch>
|
|
27
|
+
<sonic-switch size="xs">xs</sonic-switch>
|
|
28
|
+
<sonic-switch size="sm">sm</sonic-switch>
|
|
29
|
+
<sonic-switch>Default</sonic-switch>
|
|
30
|
+
<sonic-switch size="lg">lg</sonic-switch>
|
|
31
|
+
<sonic-switch size="xl">xl</sonic-switch>
|
|
32
|
+
<sonic-switch size="2xl">2xl</sonic-switch>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
</sonic-code>
|
|
36
|
+
|
|
37
|
+
## Checked and disabled
|
|
38
|
+
|
|
39
|
+
`checked` sets the initial state. `disabled` blocks interaction and dims the control.
|
|
40
|
+
|
|
41
|
+
<sonic-code>
|
|
42
|
+
<template>
|
|
43
|
+
<div class="grid gap-2">
|
|
44
|
+
<sonic-switch checked>Checked</sonic-switch>
|
|
45
|
+
<sonic-switch disabled>Disabled</sonic-switch>
|
|
46
|
+
<sonic-switch disabled checked>Disabled and checked</sonic-switch>
|
|
47
|
+
<sonic-switch>I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-switch>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
</sonic-code>
|
|
51
|
+
|
|
52
|
+
## Filtering a list
|
|
53
|
+
|
|
54
|
+
On, the switch writes `status=delayed` to the store used as `dataFilterProvider` by a `sonic-queue`; off, it writes `null` and the filter is dropped.
|
|
55
|
+
|
|
56
|
+
<docs-lit-demo for="docs-flight-delayed-switch-demo"></docs-lit-demo>
|
|
57
|
+
|
|
58
|
+
## API reference
|
|
59
|
+
|
|
60
|
+
| Attribute | Values | Description |
|
|
61
|
+
|----------|---------|-------------|
|
|
62
|
+
| `name` | string | Key in the form data (dot notation supported) |
|
|
63
|
+
| `value` | string | Value stored when on |
|
|
64
|
+
| `formDataProvider` | string | Form data id; inherited from the closest ancestor when omitted |
|
|
65
|
+
| `checked` | boolean | Initial state |
|
|
66
|
+
| `unsetOnDisconnect` | boolean | Removes the value from the data when the element is removed |
|
|
67
|
+
| `label` | string (HTML) | Label, rendered before the default slot |
|
|
68
|
+
| `description` | string (HTML) | Helper text, rendered in the `description` slot |
|
|
69
|
+
| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size and track size |
|
|
70
|
+
| `disabled` | boolean | Blocks interaction |
|
|
71
|
+
| `required` | boolean | Native validation on form submit |
|
|
72
|
+
| `autofocus` | boolean | Focuses the input on load |
|
|
73
|
+
| `data-aria-label` · `data-aria-labelledby` | string | Forwarded to the inner input as `aria-label` / `aria-labelledby` |
|
|
74
|
+
|
|
75
|
+
| Slot | Description |
|
|
76
|
+
|------|-------------|
|
|
77
|
+
| *(default)* | Label content (text, links) |
|
|
78
|
+
| `description` | Helper text under the label |
|
|
79
|
+
|
|
80
|
+
Fires a `change` event on each click.
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/form/textarea" data-doc-id="core/components/ui/form/textarea/textarea">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Textarea — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-textarea wraps a native <textarea> with a label, a description and Concorde sizes. Native attributes (rows, cols, maxlength, wrap, …) are passed through. Bind the value to a store with formDataP">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component, , rows, cols, maxlength, wrap, formDataProvider, name, resize">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/textarea/textarea">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/form/textarea">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/form/textarea.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/textarea">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 — Textarea</strong>. sonic-textarea wraps a native <textarea> with a label, a description and Concorde sizes. Native attributes (rows, cols, maxlength, wrap, …) are passed through. Bind the value to a store with formDataP <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component, , rows, cols, maxlength, wrap, formDataProvider, name, resize. URL: <a href="https://concorde.supersoniks.org/core/components/ui/form/textarea">https://concorde.supersoniks.org/core/components/ui/form/textarea</a>.</span></p>
|
|
20
|
+
<h1 id="textarea">Textarea</h1>
|
|
21
|
+
<p><strong><code>sonic-textarea</code></strong> wraps a native <code><textarea></code> with a label, a description and Concorde sizes. Native attributes (<code>rows</code>, <code>cols</code>, <code>maxlength</code>, <code>wrap</code>, …) are passed through. 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-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
|
|
24
|
+
</code></pre>
|
|
25
|
+
<h2 id="rows-and-resize">Rows and resize</h2>
|
|
26
|
+
<p><code>rows</code> sets the visible height. With no <code>resize</code>, the user can resize vertically only.</p>
|
|
27
|
+
<pre><code><div class="grid gap-3">
|
|
28
|
+
<sonic-textarea rows="6" label="Six rows"></sonic-textarea>
|
|
29
|
+
<sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
|
|
30
|
+
</div>
|
|
31
|
+
</code></pre>
|
|
32
|
+
<h2 id="size-and-status">Size and status</h2>
|
|
33
|
+
<p>With no <code>size</code>, the textarea uses <code>md</code>. <code>status</code> colors the field; it defaults to <code>default</code>.</p>
|
|
34
|
+
<pre><code><div class="grid gap-3">
|
|
35
|
+
<sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
|
|
36
|
+
<sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
|
|
37
|
+
<sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
|
|
38
|
+
<sonic-textarea rows="1" value="default"></sonic-textarea>
|
|
39
|
+
<sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
|
|
40
|
+
<sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
|
|
41
|
+
<sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
|
|
42
|
+
<sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
|
|
43
|
+
<sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
|
|
44
|
+
<sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
|
|
45
|
+
<sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
|
|
46
|
+
</div>
|
|
47
|
+
</code></pre>
|
|
48
|
+
<h2 id="validation">Validation</h2>
|
|
49
|
+
<p><code>required</code>, <code>minlength</code> and <code>maxlength</code> are checked by the browser. Feedback styles apply once the field is <code>touched</code> (after blur).</p>
|
|
50
|
+
<pre><code><sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>
|
|
51
|
+
</code></pre>
|
|
52
|
+
<h2 id="api-reference">API reference</h2>
|
|
53
|
+
<table>
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
<th>Attribute</th>
|
|
57
|
+
<th>Values</th>
|
|
58
|
+
<th>Description</th>
|
|
59
|
+
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody><tr>
|
|
62
|
+
<td><code>name</code></td>
|
|
63
|
+
<td>string</td>
|
|
64
|
+
<td>Key in the form store (dot notation allowed)</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td><code>value</code></td>
|
|
68
|
+
<td>string</td>
|
|
69
|
+
<td>Initial value</td>
|
|
70
|
+
</tr>
|
|
71
|
+
<tr>
|
|
72
|
+
<td><code>formDataProvider</code></td>
|
|
73
|
+
<td>string</td>
|
|
74
|
+
<td>Store id; inherited from the closest ancestor</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<td><code>label</code></td>
|
|
78
|
+
<td>string (HTML)</td>
|
|
79
|
+
<td>Label; or use the <code>label</code> slot</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td><code>description</code></td>
|
|
83
|
+
<td>string (HTML)</td>
|
|
84
|
+
<td>Help text under the field; or use the <code>description</code> slot</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td><code>placeholder</code></td>
|
|
88
|
+
<td>string</td>
|
|
89
|
+
<td>Native placeholder</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td><code>size</code></td>
|
|
93
|
+
<td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
|
|
94
|
+
<td>Typography and padding</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td><code>status</code></td>
|
|
98
|
+
<td><code>default</code> · <code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code></td>
|
|
99
|
+
<td>Field color</td>
|
|
100
|
+
</tr>
|
|
101
|
+
<tr>
|
|
102
|
+
<td><code>rows</code> · <code>cols</code></td>
|
|
103
|
+
<td>number</td>
|
|
104
|
+
<td>Native dimensions</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td><code>minlength</code> · <code>maxlength</code></td>
|
|
108
|
+
<td>number</td>
|
|
109
|
+
<td>Native length constraints</td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td><code>wrap</code></td>
|
|
113
|
+
<td><code>soft</code> · <code>hard</code></td>
|
|
114
|
+
<td>Native wrapping</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td><code>resize</code></td>
|
|
118
|
+
<td><code>vertical</code> · <code>horizontal</code> · <code>both</code> · <code>none</code> · <code>block</code> · <code>inline</code> (default <code>vertical</code>)</td>
|
|
119
|
+
<td>CSS resize handle</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td><code>required</code> · <code>disabled</code> · <code>readonly</code> · <code>autofocus</code></td>
|
|
123
|
+
<td>boolean</td>
|
|
124
|
+
<td>Native flags</td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr>
|
|
127
|
+
<td><code>autocomplete</code> · <code>tabindex</code></td>
|
|
128
|
+
<td>native</td>
|
|
129
|
+
<td>Passed to the inner <code><textarea></code></td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td><code>data-aria-label</code> · <code>data-aria-labelledby</code></td>
|
|
133
|
+
<td>string</td>
|
|
134
|
+
<td>Forwarded as <code>aria-label</code> and <code>aria-labelledby</code></td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td><code>unsetOnDisconnect</code></td>
|
|
138
|
+
<td>boolean</td>
|
|
139
|
+
<td>Clears the store value when the element is removed</td>
|
|
140
|
+
</tr>
|
|
141
|
+
</tbody></table>
|
|
142
|
+
<table>
|
|
143
|
+
<thead>
|
|
144
|
+
<tr>
|
|
145
|
+
<th>Slot</th>
|
|
146
|
+
<th>Description</th>
|
|
147
|
+
</tr>
|
|
148
|
+
</thead>
|
|
149
|
+
<tbody><tr>
|
|
150
|
+
<td><code>label</code></td>
|
|
151
|
+
<td>Rich label content</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td><code>description</code></td>
|
|
155
|
+
<td>Rich help text</td>
|
|
156
|
+
</tr>
|
|
157
|
+
</tbody></table>
|
|
158
|
+
|
|
159
|
+
</article>
|
|
160
|
+
</main>
|
|
161
|
+
</body>
|
|
162
|
+
</html>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# Textarea
|
|
2
|
+
|
|
3
|
+
**`sonic-textarea`** wraps a native `<textarea>` with a label, a description and Concorde sizes. Native attributes (`rows`, `cols`, `maxlength`, `wrap`, …) are passed through. 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-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>
|
|
10
|
+
</template>
|
|
11
|
+
</sonic-code>
|
|
12
|
+
|
|
13
|
+
## Rows and resize
|
|
14
|
+
|
|
15
|
+
`rows` sets the visible height. With no `resize`, the user can resize vertically only.
|
|
16
|
+
|
|
17
|
+
<sonic-code>
|
|
18
|
+
<template>
|
|
19
|
+
<div class="grid gap-3">
|
|
20
|
+
<sonic-textarea rows="6" label="Six rows"></sonic-textarea>
|
|
21
|
+
<sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
</sonic-code>
|
|
25
|
+
|
|
26
|
+
## Size and status
|
|
27
|
+
|
|
28
|
+
With no `size`, the textarea uses `md`. `status` colors the field; it defaults to `default`.
|
|
29
|
+
|
|
30
|
+
<sonic-code>
|
|
31
|
+
<template>
|
|
32
|
+
<div class="grid gap-3">
|
|
33
|
+
<sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
|
|
34
|
+
<sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
|
|
35
|
+
<sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
|
|
36
|
+
<sonic-textarea rows="1" value="default"></sonic-textarea>
|
|
37
|
+
<sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
|
|
38
|
+
<sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
|
|
39
|
+
<sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
|
|
40
|
+
<sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
|
|
41
|
+
<sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
|
|
42
|
+
<sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
|
|
43
|
+
<sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
</sonic-code>
|
|
47
|
+
|
|
48
|
+
## Validation
|
|
49
|
+
|
|
50
|
+
`required`, `minlength` and `maxlength` are checked by the browser. Feedback styles apply once the field is `touched` (after blur).
|
|
51
|
+
|
|
52
|
+
<sonic-code>
|
|
53
|
+
<template>
|
|
54
|
+
<sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>
|
|
55
|
+
</template>
|
|
56
|
+
</sonic-code>
|
|
57
|
+
|
|
58
|
+
## API reference
|
|
59
|
+
|
|
60
|
+
| Attribute | Values | Description |
|
|
61
|
+
|----------|---------|-------------|
|
|
62
|
+
| `name` | string | Key in the form store (dot notation allowed) |
|
|
63
|
+
| `value` | string | Initial value |
|
|
64
|
+
| `formDataProvider` | string | Store id; inherited from the closest ancestor |
|
|
65
|
+
| `label` | string (HTML) | Label; or use the `label` slot |
|
|
66
|
+
| `description` | string (HTML) | Help text under the field; or use the `description` slot |
|
|
67
|
+
| `placeholder` | string | Native placeholder |
|
|
68
|
+
| `size` | `2xs` … `2xl` (default `md`) | Typography and padding |
|
|
69
|
+
| `status` | `default` · `success` · `error` · `warning` · `info` | Field color |
|
|
70
|
+
| `rows` · `cols` | number | Native dimensions |
|
|
71
|
+
| `minlength` · `maxlength` | number | Native length constraints |
|
|
72
|
+
| `wrap` | `soft` · `hard` | Native wrapping |
|
|
73
|
+
| `resize` | `vertical` · `horizontal` · `both` · `none` · `block` · `inline` (default `vertical`) | CSS resize handle |
|
|
74
|
+
| `required` · `disabled` · `readonly` · `autofocus` | boolean | Native flags |
|
|
75
|
+
| `autocomplete` · `tabindex` | native | Passed to the inner `<textarea>` |
|
|
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
|
+
|
|
79
|
+
| Slot | Description |
|
|
80
|
+
|------|-------------|
|
|
81
|
+
| `label` | Rich label content |
|
|
82
|
+
| `description` | Rich help text |
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/group" data-doc-id="core/components/ui/group/group">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Group — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-group lays out sonic-button · sonic-input and sonic-select controls in one row with a shared corner radius: only the outer corners of the first and last items stay rounded. Use it for button gro">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, value">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/group/group">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/group">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/group.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/group">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 — Group</strong>. sonic-group lays out sonic-button · sonic-input and sonic-select controls in one row with a shared corner radius: only the outer corners of the first and last items stay rounded. Use it for button gro <span>Doc ID: <code>core/components/ui/group/group</code>. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, value. URL: <a href="https://concorde.supersoniks.org/core/components/ui/group">https://concorde.supersoniks.org/core/components/ui/group</a>.</span></p>
|
|
20
|
+
<h1 id="group">Group</h1>
|
|
21
|
+
<p><strong><code>sonic-group</code></strong> lays out <code>sonic-button</code> · <code>sonic-input</code> and <code>sonic-select</code> controls in one row with a <strong>shared corner radius</strong>: only the outer corners of the first and last items stay rounded. Use it for button groups, radio rows or a field with an attached action. Optional <code>label</code> and <code>description</code> follow form field styling.</p>
|
|
22
|
+
<h2 id="radio-group">Radio group</h2>
|
|
23
|
+
<p>Give each <code>sonic-button</code> the <code>radio</code> attribute and a shared <code>name</code>. The selected <code>value</code> is written to the <code>formDataProvider</code> set on the group (inherited by the buttons).</p>
|
|
24
|
+
<pre><code><sonic-group formDataProvider="groupPlanDemo">
|
|
25
|
+
<sonic-button radio name="plan" value="free" type="default">Free</sonic-button>
|
|
26
|
+
<sonic-button radio checked name="plan" value="pro" type="default">Pro</sonic-button>
|
|
27
|
+
<sonic-button radio name="plan" value="team" type="default">Team</sonic-button>
|
|
28
|
+
</sonic-group>
|
|
29
|
+
</code></pre>
|
|
30
|
+
<h2 id="button-group">Button group</h2>
|
|
31
|
+
<p>Adjacent action buttons that stay independent controls.</p>
|
|
32
|
+
<pre><code><sonic-group>
|
|
33
|
+
<sonic-button type="default">
|
|
34
|
+
<sonic-icon library="iconoir" name="align-left"></sonic-icon>
|
|
35
|
+
</sonic-button>
|
|
36
|
+
<sonic-button type="default">
|
|
37
|
+
<sonic-icon library="iconoir" name="align-center"></sonic-icon>
|
|
38
|
+
</sonic-button>
|
|
39
|
+
<sonic-button type="default">
|
|
40
|
+
<sonic-icon library="iconoir" name="align-right"></sonic-icon>
|
|
41
|
+
</sonic-button>
|
|
42
|
+
</sonic-group>
|
|
43
|
+
</code></pre>
|
|
44
|
+
<h2 id="field-with-action">Field with action</h2>
|
|
45
|
+
<p>Put the action before or after the field. <code>label</code> and <code>description</code> annotate the whole row.</p>
|
|
46
|
+
<pre><code><div class="grid gap-4 max-w-md">
|
|
47
|
+
<sonic-group label="Search" description="Type a flight number, then confirm.">
|
|
48
|
+
<sonic-input placeholder="CN 001"></sonic-input>
|
|
49
|
+
<sonic-button type="primary" shape="square">
|
|
50
|
+
<sonic-icon library="iconoir" name="search"></sonic-icon>
|
|
51
|
+
</sonic-button>
|
|
52
|
+
</sonic-group>
|
|
53
|
+
<sonic-group label="Extra baggage">
|
|
54
|
+
<sonic-button type="default" shape="square">
|
|
55
|
+
<sonic-icon library="iconoir" name="minus"></sonic-icon>
|
|
56
|
+
</sonic-button>
|
|
57
|
+
<sonic-input type="number" value="1"></sonic-input>
|
|
58
|
+
<sonic-button type="default" shape="square">
|
|
59
|
+
<sonic-icon library="iconoir" name="plus"></sonic-icon>
|
|
60
|
+
</sonic-button>
|
|
61
|
+
</sonic-group>
|
|
62
|
+
</div>
|
|
63
|
+
</code></pre>
|
|
64
|
+
<h2 id="api-reference">API reference</h2>
|
|
65
|
+
<table>
|
|
66
|
+
<thead>
|
|
67
|
+
<tr>
|
|
68
|
+
<th>Attribute</th>
|
|
69
|
+
<th>Values</th>
|
|
70
|
+
<th>Description</th>
|
|
71
|
+
</tr>
|
|
72
|
+
</thead>
|
|
73
|
+
<tbody><tr>
|
|
74
|
+
<td><code>label</code></td>
|
|
75
|
+
<td>string (HTML)</td>
|
|
76
|
+
<td>Label above the row; content of <code>slot="label"</code> is appended</td>
|
|
77
|
+
</tr>
|
|
78
|
+
<tr>
|
|
79
|
+
<td><code>description</code></td>
|
|
80
|
+
<td>string (HTML)</td>
|
|
81
|
+
<td>Help text below the row; content of <code>slot="description"</code> replaces it</td>
|
|
82
|
+
</tr>
|
|
83
|
+
<tr>
|
|
84
|
+
<td><code>alignItems</code></td>
|
|
85
|
+
<td>CSS <code>align-items</code> value (default <code>center</code>)</td>
|
|
86
|
+
<td>Cross-axis alignment of the row</td>
|
|
87
|
+
</tr>
|
|
88
|
+
</tbody></table>
|
|
89
|
+
<table>
|
|
90
|
+
<thead>
|
|
91
|
+
<tr>
|
|
92
|
+
<th>Slot</th>
|
|
93
|
+
<th>Description</th>
|
|
94
|
+
</tr>
|
|
95
|
+
</thead>
|
|
96
|
+
<tbody><tr>
|
|
97
|
+
<td><em>(default)</em></td>
|
|
98
|
+
<td><code>sonic-button</code> · <code>sonic-input</code> · <code>sonic-select</code> in visual order</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td><code>label</code></td>
|
|
102
|
+
<td>Custom label markup</td>
|
|
103
|
+
</tr>
|
|
104
|
+
<tr>
|
|
105
|
+
<td><code>description</code></td>
|
|
106
|
+
<td>Custom description markup</td>
|
|
107
|
+
</tr>
|
|
108
|
+
</tbody></table>
|
|
109
|
+
|
|
110
|
+
</article>
|
|
111
|
+
</main>
|
|
112
|
+
</body>
|
|
113
|
+
</html>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Group
|
|
2
|
+
|
|
3
|
+
**`sonic-group`** lays out `sonic-button` · `sonic-input` and `sonic-select` controls in one row with a **shared corner radius**: only the outer corners of the first and last items stay rounded. Use it for button groups, radio rows or a field with an attached action. Optional `label` and `description` follow form field styling.
|
|
4
|
+
|
|
5
|
+
## Radio group
|
|
6
|
+
|
|
7
|
+
Give each `sonic-button` the `radio` attribute and a shared `name`. The selected `value` is written to the `formDataProvider` set on the group (inherited by the buttons).
|
|
8
|
+
|
|
9
|
+
<sonic-code>
|
|
10
|
+
<template>
|
|
11
|
+
<sonic-group formDataProvider="groupPlanDemo">
|
|
12
|
+
<sonic-button radio name="plan" value="free" type="default">Free</sonic-button>
|
|
13
|
+
<sonic-button radio checked name="plan" value="pro" type="default">Pro</sonic-button>
|
|
14
|
+
<sonic-button radio name="plan" value="team" type="default">Team</sonic-button>
|
|
15
|
+
</sonic-group>
|
|
16
|
+
</template>
|
|
17
|
+
</sonic-code>
|
|
18
|
+
|
|
19
|
+
## Button group
|
|
20
|
+
|
|
21
|
+
Adjacent action buttons that stay independent controls.
|
|
22
|
+
|
|
23
|
+
<sonic-code>
|
|
24
|
+
<template>
|
|
25
|
+
<sonic-group>
|
|
26
|
+
<sonic-button type="default">
|
|
27
|
+
<sonic-icon library="iconoir" name="align-left"></sonic-icon>
|
|
28
|
+
</sonic-button>
|
|
29
|
+
<sonic-button type="default">
|
|
30
|
+
<sonic-icon library="iconoir" name="align-center"></sonic-icon>
|
|
31
|
+
</sonic-button>
|
|
32
|
+
<sonic-button type="default">
|
|
33
|
+
<sonic-icon library="iconoir" name="align-right"></sonic-icon>
|
|
34
|
+
</sonic-button>
|
|
35
|
+
</sonic-group>
|
|
36
|
+
</template>
|
|
37
|
+
</sonic-code>
|
|
38
|
+
|
|
39
|
+
## Field with action
|
|
40
|
+
|
|
41
|
+
Put the action before or after the field. `label` and `description` annotate the whole row.
|
|
42
|
+
|
|
43
|
+
<sonic-code>
|
|
44
|
+
<template>
|
|
45
|
+
<div class="grid gap-4 max-w-md">
|
|
46
|
+
<sonic-group label="Search" description="Type a flight number, then confirm.">
|
|
47
|
+
<sonic-input placeholder="CN 001"></sonic-input>
|
|
48
|
+
<sonic-button type="primary" shape="square">
|
|
49
|
+
<sonic-icon library="iconoir" name="search"></sonic-icon>
|
|
50
|
+
</sonic-button>
|
|
51
|
+
</sonic-group>
|
|
52
|
+
<sonic-group label="Extra baggage">
|
|
53
|
+
<sonic-button type="default" shape="square">
|
|
54
|
+
<sonic-icon library="iconoir" name="minus"></sonic-icon>
|
|
55
|
+
</sonic-button>
|
|
56
|
+
<sonic-input type="number" value="1"></sonic-input>
|
|
57
|
+
<sonic-button type="default" shape="square">
|
|
58
|
+
<sonic-icon library="iconoir" name="plus"></sonic-icon>
|
|
59
|
+
</sonic-button>
|
|
60
|
+
</sonic-group>
|
|
61
|
+
</div>
|
|
62
|
+
</template>
|
|
63
|
+
</sonic-code>
|
|
64
|
+
|
|
65
|
+
## API reference
|
|
66
|
+
|
|
67
|
+
| Attribute | Values | Description |
|
|
68
|
+
|----------|---------|-------------|
|
|
69
|
+
| `label` | string (HTML) | Label above the row; content of `slot="label"` is appended |
|
|
70
|
+
| `description` | string (HTML) | Help text below the row; content of `slot="description"` replaces it |
|
|
71
|
+
| `alignItems` | CSS `align-items` value (default `center`) | Cross-axis alignment of the row |
|
|
72
|
+
|
|
73
|
+
| Slot | Description |
|
|
74
|
+
|------|-------------|
|
|
75
|
+
| *(default)* | `sonic-button` · `sonic-input` · `sonic-select` in visual order |
|
|
76
|
+
| `label` | Custom label markup |
|
|
77
|
+
| `description` | Custom description markup |
|