@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +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/skills +1 -0
- package/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/README.md +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 +177 -177
- package/concorde-core.es.js +4993 -4833
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
- package/dist/concorde-core.bundle.js +177 -177
- package/dist/concorde-core.es.js +4993 -4833
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/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/assets/index-D_alEsng.js +12122 -0
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/crawl/core/components/functional/sdui/sdui-extension-points.html +126 -0
- package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/crawl/core/components/ui/alert/alert.html +211 -0
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +131 -0
- package/docs/crawl/core/components/ui/badge/badge.html +197 -0
- package/docs/crawl/core/components/ui/button/button.html +150 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
- package/docs/crawl/core/components/ui/card/card.html +253 -0
- package/docs/crawl/core/components/ui/divider/divider.html +144 -0
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +122 -0
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +104 -0
- package/docs/crawl/core/components/ui/icon/icon.html +222 -0
- package/docs/crawl/core/components/ui/image/image.html +298 -0
- package/docs/crawl/core/components/ui/link/link.html +100 -0
- package/docs/crawl/core/components/ui/loader/loader.html +124 -0
- package/docs/crawl/core/components/ui/menu/menu.html +394 -0
- package/docs/crawl/core/components/ui/modal/modal.html +342 -0
- package/docs/crawl/core/components/ui/pop/pop.html +296 -0
- package/docs/crawl/core/components/ui/progress/progress.html +131 -0
- package/docs/crawl/core/components/ui/table/table.html +545 -0
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +233 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
- package/docs/crawl/docs/_core-concept/dataFlow.html +177 -0
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +149 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/crawl/docs/_getting-started/ai-agents.html +173 -0
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
- package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/crawl/docs/_getting-started/theming.html +333 -0
- package/docs/crawl/docs/_misc/api-configuration.html +149 -0
- package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
- package/docs/crawl/docs/_misc/docs-mock-api.html +158 -0
- package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
- package/docs/crawl/docs/_misc/endpoint.html +50 -0
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
- package/docs/crawl/docs/_misc/html-integration.html +48 -0
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +381 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +103 -0
- package/docs/index.html +1 -1
- package/docs/llms-full.txt +7174 -0
- package/docs/llms.txt +98 -0
- package/docs/sitemap.xml +243 -0
- package/docs/src/core/components/functional/date/date.md +290 -0
- package/docs/src/core/components/functional/fetch/fetch.md +125 -0
- package/docs/src/core/components/functional/if/if.md +9 -0
- package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
- package/docs/src/core/components/functional/list/list.md +65 -0
- package/docs/src/core/components/functional/mix/mix.md +41 -0
- package/docs/src/core/components/functional/queue/queue.md +72 -0
- package/docs/src/core/components/functional/router/router.md +94 -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 +99 -0
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +478 -0
- package/docs/src/core/components/functional/states/states.md +87 -0
- package/docs/src/core/components/functional/submit/submit.md +114 -0
- package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/src/core/components/functional/value/value.md +35 -0
- package/docs/src/core/components/ui/alert/alert.md +196 -0
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +188 -0
- package/docs/src/core/components/ui/button/button.md +183 -0
- package/docs/src/core/components/ui/captcha/captcha.md +71 -0
- package/docs/src/core/components/ui/card/card.md +215 -0
- package/docs/src/core/components/ui/divider/divider.md +129 -0
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +205 -0
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +100 -0
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +119 -0
- package/docs/src/core/components/ui/form/input/input.md +142 -0
- package/docs/src/core/components/ui/form/radio/radio.md +57 -0
- package/docs/src/core/components/ui/form/select/select.md +71 -0
- package/docs/src/core/components/ui/form/switch/switch.md +57 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
- package/docs/src/core/components/ui/group/group.md +75 -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 +233 -0
- package/docs/src/core/components/ui/link/link.md +81 -0
- package/docs/src/core/components/ui/loader/loader.md +112 -0
- package/docs/src/core/components/ui/menu/menu.md +370 -0
- package/docs/src/core/components/ui/modal/modal.md +235 -0
- package/docs/src/core/components/ui/pop/pop.md +294 -0
- package/docs/src/core/components/ui/progress/progress.md +109 -0
- package/docs/src/core/components/ui/table/table.md +431 -0
- package/docs/src/core/components/ui/theme/theme.md +122 -0
- package/docs/src/core/components/ui/toast/toast.md +216 -0
- package/docs/src/core/components/ui/tooltip/tooltip.md +124 -0
- package/{src → docs/src}/docs/_core-concept/subscriber.md +0 -0
- package/{src → docs/src}/docs/_getting-started/my-first-subscriber.md +0 -0
- package/{src → docs/src}/docs/_getting-started/pubsub.md +0 -0
- package/docs/src/docs/_getting-started/theming.md +253 -0
- package/docs/src/docs/search/docs-search.json +12242 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +1332 -0
- package/gitlab/job_github_mirror.sh +39 -0
- package/index.html +157 -5
- package/package.json +22 -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/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +37 -50
- package/scripts/post-build.mjs +0 -0
- package/scripts/pre-publish.mjs +2 -1
- package/scripts/site-pages.mjs +212 -0
- package/scripts/site-pages.test.mjs +116 -0
- package/site-pages/about.md +22 -0
- package/site-pages/privacy.md +32 -0
- package/src/core/components/functional/date/date.md +91 -231
- package/src/core/components/functional/example/example.ts +3 -1
- 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 +103 -43
- package/src/core/components/functional/list/list.ts +17 -4
- 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 +2 -2
- 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-immutable.spec.ts +74 -0
- package/src/core/components/functional/sdui/sdui.md +187 -358
- package/src/core/components/functional/sdui/sdui.ts +33 -8
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.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/submit/submit.spec.ts +60 -0
- package/src/core/components/functional/submit/submit.ts +6 -3
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/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 +108 -90
- package/src/core/components/ui/form/input/input.ts +8 -2
- package/src/core/components/ui/form/radio/radio.md +65 -30
- 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/decorators/subscriber/subscribe.ts +15 -9
- package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/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/PublisherProxy.ts +166 -125
- package/src/core/utils/deepReadonly.spec.ts +66 -0
- package/src/core/utils/deepReadonly.ts +71 -0
- package/src/core/utils/immutableValue.spec.ts +54 -0
- package/src/core/utils/immutableValue.ts +102 -0
- package/src/core/utils/nestedDotForm.spec.ts +88 -0
- package/src/core/utils/publisherImmutable.spec.ts +76 -0
- package/src/core/utils/route.ts +0 -0
- package/src/core/utils/strictGet.spec.ts +61 -0
- package/src/core/utils/strictGet.ts +102 -0
- package/src/css.d.ts +19 -0
- package/src/docs/components/docs-demo-sources.ts +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/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +50 -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/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/misc/publisher-get-immutability-docs-crawl.json +902 -0
- package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
- package/src/docs/misc/publisher-get-immutability-study.md +229 -0
- package/src/docs/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 +84 -101
- package/src/docs/navigation/toc.ts +7 -4
- package/src/docs/search/docs-search.json +3188 -5153
- 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.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.json +53 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +0 -4103
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +0 -2556
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +0 -510
- package/.taste-skill/notes.md +0 -84
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +0 -1973
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/AUDIT.md +0 -228
- package/PLAN-AMELIORATION.md +0 -220
- package/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-Bb-_LRyY.js +0 -12280
- package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
- package/src/docs/example/docs-joke-demos.ts +0 -297
- /package/{src → docs/src}/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
- /package/{src → docs/src}/docs/_core-concept/dataFlow.md +0 -0
- /package/{src → docs/src}/docs/_core-concept/overview.md +0 -0
- /package/{src → docs/src}/docs/_decorators/ancestor-attribute.md +0 -0
- /package/{src → docs/src}/docs/_decorators/auto-subscribe.md +0 -0
- /package/{src → docs/src}/docs/_decorators/bind.md +0 -0
- /package/{src → docs/src}/docs/_decorators/get.md +0 -0
- /package/{src → docs/src}/docs/_decorators/handle.md +0 -0
- /package/{src → docs/src}/docs/_decorators/on-assign.md +0 -0
- /package/{src → docs/src}/docs/_decorators/patch.md +0 -0
- /package/{src → docs/src}/docs/_decorators/post.md +0 -0
- /package/{src → docs/src}/docs/_decorators/publish.md +0 -0
- /package/{src → docs/src}/docs/_decorators/put.md +0 -0
- /package/{src → docs/src}/docs/_decorators/subscribe.md +0 -0
- /package/{src → docs/src}/docs/_decorators/wait-for-ancestors.md +0 -0
- /package/{src → docs/src}/docs/_directives/sub.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/ai-agents.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/concorde-manual-install.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/concorde-outside.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/create-a-component.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/my-first-component.md +0 -0
- /package/{src → docs/src}/docs/_getting-started/start.md +0 -0
- /package/{src → docs/src}/docs/_misc/api-configuration.md +0 -0
- /package/{src → docs/src}/docs/_misc/dataProviderKey.md +0 -0
- /package/{src → docs/src}/docs/_misc/docs-mock-api.md +0 -0
- /package/{src → docs/src}/docs/_misc/dynamic-path.md +0 -0
- /package/{src → docs/src}/docs/_misc/endpoint.md +0 -0
- /package/{src → docs/src}/docs/_misc/formelement-subscriber-removal.md +0 -0
- /package/{src → docs/src}/docs/_misc/html-integration.md +0 -0
- /package/src/docs/{_getting-started → getting-started}/components.md +0 -0
- /package/src/docs/{_getting-started → getting-started}/theming.md +0 -0
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html" data-doc-id="core/components/ui/form/fieldset/fieldset">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Fieldset — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-fieldset groups related form controls with a bordered container and an accessible <fieldset> semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/fieldset/fieldset">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/fieldset/fieldset.md/fieldset" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Fieldset</strong>. sonic-fieldset groups related form controls with a bordered container and an accessible <fieldset> semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label <span>Doc ID: <code>core/components/ui/form/fieldset/fieldset</code>. Keywords: Concorde, supersoniks, core/components/ui/form/fieldset/fieldset, fieldset, Fieldset, UI component, form, sonic-fieldset, web component, , sonic-legend, label, description, iconName, variant, default, sonic-form-layout, ghost. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/fieldset/fieldset.html</a>.</span></p>
|
|
19
|
+
<h1 id="fieldset">Fieldset</h1>
|
|
20
|
+
<p><strong><code>sonic-fieldset</code></strong> groups related form controls with a bordered container and an accessible <strong><code><fieldset></code></strong> semantics layer. Put fields in the <strong>default slot</strong>; add a title with <strong><code>sonic-legend</code></strong> or the shorthand <strong><code>label</code></strong> / <strong><code>description</code></strong> / <strong><code>iconName</code></strong> attributes. Default <strong><code>variant</code></strong> is <code>default</code>. Pair the body with <strong><code>sonic-form-layout</code></strong> for responsive columns.</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<pre><code><sonic-fieldset>
|
|
23
|
+
<sonic-legend label="Contact details"></sonic-legend>
|
|
24
|
+
<sonic-form-layout>
|
|
25
|
+
<sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
|
|
26
|
+
<sonic-input autocomplete="tel" label="Phone" name="phone" type="tel"></sonic-input>
|
|
27
|
+
</sonic-form-layout>
|
|
28
|
+
</sonic-fieldset>
|
|
29
|
+
</code></pre>
|
|
30
|
+
<h2 id="variant">Variant</h2>
|
|
31
|
+
<p><strong><code>ghost</code></strong> and <strong><code>shadow</code></strong> use a transparent border; <strong><code>shadow</code></strong> also applies <strong><code>--sc-shadow-lg</code></strong>.</p>
|
|
32
|
+
<pre><code><div class="grid gap-4">
|
|
33
|
+
<sonic-fieldset variant="default">
|
|
34
|
+
<sonic-legend label="Default"></sonic-legend>
|
|
35
|
+
<sonic-input label="Field" name="a"></sonic-input>
|
|
36
|
+
</sonic-fieldset>
|
|
37
|
+
<sonic-fieldset variant="ghost">
|
|
38
|
+
<sonic-legend label="Ghost"></sonic-legend>
|
|
39
|
+
<sonic-input label="Field" name="b"></sonic-input>
|
|
40
|
+
</sonic-fieldset>
|
|
41
|
+
<sonic-fieldset variant="shadow">
|
|
42
|
+
<sonic-legend label="Shadow"></sonic-legend>
|
|
43
|
+
<sonic-input label="Field" name="c"></sonic-input>
|
|
44
|
+
</sonic-fieldset>
|
|
45
|
+
</div>
|
|
46
|
+
</code></pre>
|
|
47
|
+
<h2 id="tight-layout">Tight layout</h2>
|
|
48
|
+
<p>Set <strong><code>tight</code></strong> to remove horizontal padding and side borders (flat strip inside a parent).</p>
|
|
49
|
+
<pre><code><sonic-fieldset tight variant="ghost">
|
|
50
|
+
<sonic-legend label="Tight fieldset"></sonic-legend>
|
|
51
|
+
<sonic-input label="Field" name="tight"></sonic-input>
|
|
52
|
+
</sonic-fieldset>
|
|
53
|
+
</code></pre>
|
|
54
|
+
<h2 id="legend">Legend</h2>
|
|
55
|
+
<p>Use <strong><code>sonic-legend</code></strong> for the group title. Set <strong><code>label</code></strong> and <strong><code>description</code></strong> for simple copy, or use the <strong>default slot</strong> for custom markup. Add secondary text with <strong><code>sonic-legend-description</code></strong>. Place actions in <strong><code>slot="suffix"</code></strong> on the legend.</p>
|
|
56
|
+
<p>Attribute values on <strong><code>sonic-legend</code></strong> are rendered as HTML—use only trusted content.</p>
|
|
57
|
+
<pre><code><div class="grid gap-4">
|
|
58
|
+
<sonic-fieldset>
|
|
59
|
+
<sonic-legend label="Attributes" description="Short description via attributes"></sonic-legend>
|
|
60
|
+
<sonic-input label="Field" name="attr"></sonic-input>
|
|
61
|
+
</sonic-fieldset>
|
|
62
|
+
<sonic-fieldset>
|
|
63
|
+
<sonic-legend iconLibrary="iconoir" iconName="pin-alt">
|
|
64
|
+
Custom title in the default slot
|
|
65
|
+
<sonic-legend-description>Description via sonic-legend-description</sonic-legend-description>
|
|
66
|
+
</sonic-legend>
|
|
67
|
+
<sonic-input label="Field" name="slot"></sonic-input>
|
|
68
|
+
</sonic-fieldset>
|
|
69
|
+
</div>
|
|
70
|
+
</code></pre>
|
|
71
|
+
<h2 id="shorthand-legend-on-the-fieldset">Shorthand legend on the fieldset</h2>
|
|
72
|
+
<p>When <strong><code>label</code></strong> is set on <strong><code>sonic-fieldset</code></strong>, the component renders <strong><code>sonic-legend</code></strong> for you. Pass <strong><code>description</code></strong> <strong><code>iconName</code></strong> <strong><code>iconLibrary</code></strong> and <strong><code>iconPrefix</code></strong> the same way. Do not combine shorthand <strong><code>label</code></strong> with a separate slotted <strong><code>sonic-legend</code></strong>—you will get two legends.</p>
|
|
73
|
+
<pre><code><sonic-fieldset
|
|
74
|
+
label="Account"
|
|
75
|
+
description="Basic profile fields"
|
|
76
|
+
iconLibrary="iconoir"
|
|
77
|
+
iconName="user"
|
|
78
|
+
>
|
|
79
|
+
<sonic-input label="Display name" name="display_name"></sonic-input>
|
|
80
|
+
</sonic-fieldset>
|
|
81
|
+
</code></pre>
|
|
82
|
+
<h2 id="legend-actions">Legend actions</h2>
|
|
83
|
+
<p>Use <strong><code>slot="suffix"</code></strong> on <strong><code>sonic-legend</code></strong> for menus or icon buttons aligned to the end of the legend row.</p>
|
|
84
|
+
<pre><code><sonic-fieldset>
|
|
85
|
+
<sonic-legend label="Personal information">
|
|
86
|
+
<sonic-pop class="inline-block" slot="suffix">
|
|
87
|
+
<sonic-button shape="circle" variant="ghost">
|
|
88
|
+
<sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon>
|
|
89
|
+
</sonic-button>
|
|
90
|
+
<sonic-menu slot="content" minWidth="12rem">
|
|
91
|
+
<sonic-menu-item>Legal notice</sonic-menu-item>
|
|
92
|
+
<sonic-menu-item>Terms of use</sonic-menu-item>
|
|
93
|
+
</sonic-menu>
|
|
94
|
+
</sonic-pop>
|
|
95
|
+
</sonic-legend>
|
|
96
|
+
<sonic-form-layout>
|
|
97
|
+
<sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
|
|
98
|
+
<sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
|
|
99
|
+
</sonic-form-layout>
|
|
100
|
+
</sonic-fieldset>
|
|
101
|
+
</code></pre>
|
|
102
|
+
<h2 id="form-association-and-disabled-state">Form association and disabled state</h2>
|
|
103
|
+
<h3 id="associating-a-distant-form">Associating a distant <code>form</code></h3>
|
|
104
|
+
<p>Set <strong><code>form</code></strong> on <strong><code>sonic-fieldset</code></strong> to the <strong><code>id</code></strong> of a <strong><code><form></code></strong> elsewhere in the page (same as the native <strong><code>form</code></strong> attribute on <strong><code><fieldset></code></strong>). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar <strong><code>form</code></strong> and a field group rendered lower on the layout.</p>
|
|
105
|
+
<pre><code><div class="grid gap-4">
|
|
106
|
+
<form id="billing-form" class="flex flex-wrap items-center gap-2">
|
|
107
|
+
<sonic-button submit type="primary">Save billing</sonic-button>
|
|
108
|
+
</form>
|
|
109
|
+
<sonic-fieldset form="billing-form" label="Billing address">
|
|
110
|
+
<sonic-form-layout>
|
|
111
|
+
<sonic-input label="Street" name="street" autocomplete="street-address"></sonic-input>
|
|
112
|
+
<sonic-input label="Postal code" required name="postal_code" autocomplete="postal-code"></sonic-input>
|
|
113
|
+
<sonic-input label="City" name="city" autocomplete="address-level2"></sonic-input>
|
|
114
|
+
</sonic-form-layout>
|
|
115
|
+
</sonic-fieldset>
|
|
116
|
+
</div>
|
|
117
|
+
</code></pre>
|
|
118
|
+
<h3 id="disabling-a-group">Disabling a group</h3>
|
|
119
|
+
<p>Set <strong><code>disabled</code></strong> on <strong><code>sonic-fieldset</code></strong> to disable the inner <strong><code><fieldset></code></strong> and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.</p>
|
|
120
|
+
<pre><code><div class="grid gap-4">
|
|
121
|
+
<sonic-fieldset label="Editable">
|
|
122
|
+
<sonic-input label="Display name" name="display_name"></sonic-input>
|
|
123
|
+
</sonic-fieldset>
|
|
124
|
+
<sonic-fieldset label="Locked" disabled>
|
|
125
|
+
<sonic-input label="Account ID" name="account_id" value="acct_42"></sonic-input>
|
|
126
|
+
</sonic-fieldset>
|
|
127
|
+
</div>
|
|
128
|
+
</code></pre>
|
|
129
|
+
<h2 id="accessibility">Accessibility</h2>
|
|
130
|
+
<p>The inner <strong><code><fieldset></code></strong> carries grouping semantics. <strong><code>disabled</code></strong> is applied on that element so nested controls are disabled in the usual way. <strong><code>sonic-legend</code></strong> renders a native <strong><code><legend></code></strong> for the group label.</p>
|
|
131
|
+
<h2 id="api-reference">API reference</h2>
|
|
132
|
+
<h3 id="sonic-fieldset"><code>sonic-fieldset</code></h3>
|
|
133
|
+
<table>
|
|
134
|
+
<thead>
|
|
135
|
+
<tr>
|
|
136
|
+
<th>Attribute</th>
|
|
137
|
+
<th>Values</th>
|
|
138
|
+
<th>Description</th>
|
|
139
|
+
</tr>
|
|
140
|
+
</thead>
|
|
141
|
+
<tbody><tr>
|
|
142
|
+
<td><code>variant</code></td>
|
|
143
|
+
<td><code>default</code> · <code>ghost</code> · <code>shadow</code> (default <code>default</code>)</td>
|
|
144
|
+
<td>Border and shadow treatment</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td><code>tight</code></td>
|
|
148
|
+
<td>boolean</td>
|
|
149
|
+
<td>Removes horizontal padding and side borders</td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td><code>label</code></td>
|
|
153
|
+
<td>string</td>
|
|
154
|
+
<td>Shorthand legend title; renders <strong><code>sonic-legend</code></strong> when set</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td><code>description</code></td>
|
|
158
|
+
<td>string</td>
|
|
159
|
+
<td>Shorthand legend description (HTML)</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td><code>iconName</code></td>
|
|
163
|
+
<td>string</td>
|
|
164
|
+
<td>Shorthand legend icon <strong><code>name</code></strong></td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td><code>iconLibrary</code></td>
|
|
168
|
+
<td>string</td>
|
|
169
|
+
<td>Shorthand legend icon <strong><code>library</code></strong></td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td><code>iconPrefix</code></td>
|
|
173
|
+
<td>string</td>
|
|
174
|
+
<td>Shorthand legend icon <strong><code>prefix</code></strong></td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td><code>disabled</code></td>
|
|
178
|
+
<td>boolean</td>
|
|
179
|
+
<td>Disables the native <strong><code><fieldset></code></strong> and its controls</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code>form</code></td>
|
|
183
|
+
<td>string</td>
|
|
184
|
+
<td><strong><code>id</code></strong> of an associated <strong><code>form</code></strong></td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td><code>dataProvider</code></td>
|
|
188
|
+
<td>string</td>
|
|
189
|
+
<td>Subscriber key; can autofill properties that match publisher fields (e.g. <strong><code>label</code></strong>)</td>
|
|
190
|
+
</tr>
|
|
191
|
+
</tbody></table>
|
|
192
|
+
<table>
|
|
193
|
+
<thead>
|
|
194
|
+
<tr>
|
|
195
|
+
<th>Slot</th>
|
|
196
|
+
<th>Description</th>
|
|
197
|
+
</tr>
|
|
198
|
+
</thead>
|
|
199
|
+
<tbody><tr>
|
|
200
|
+
<td><em>(default)</em></td>
|
|
201
|
+
<td>Legend (optional) and field group content in visual order</td>
|
|
202
|
+
</tr>
|
|
203
|
+
</tbody></table>
|
|
204
|
+
<h3 id="sonic-legend"><code>sonic-legend</code></h3>
|
|
205
|
+
<table>
|
|
206
|
+
<thead>
|
|
207
|
+
<tr>
|
|
208
|
+
<th>Attribute</th>
|
|
209
|
+
<th>Values</th>
|
|
210
|
+
<th>Description</th>
|
|
211
|
+
</tr>
|
|
212
|
+
</thead>
|
|
213
|
+
<tbody><tr>
|
|
214
|
+
<td><code>label</code></td>
|
|
215
|
+
<td>string</td>
|
|
216
|
+
<td>Title HTML when not using the default slot</td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<td><code>description</code></td>
|
|
220
|
+
<td>string</td>
|
|
221
|
+
<td>Description HTML (wrapped in <strong><code>sonic-legend-description</code></strong>)</td>
|
|
222
|
+
</tr>
|
|
223
|
+
<tr>
|
|
224
|
+
<td><code>iconName</code></td>
|
|
225
|
+
<td>string</td>
|
|
226
|
+
<td>Leading <strong><code>sonic-icon</code></strong> <strong><code>name</code></strong></td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr>
|
|
229
|
+
<td><code>iconLibrary</code></td>
|
|
230
|
+
<td>string</td>
|
|
231
|
+
<td>Icon <strong><code>library</code></strong></td>
|
|
232
|
+
</tr>
|
|
233
|
+
<tr>
|
|
234
|
+
<td><code>iconPrefix</code></td>
|
|
235
|
+
<td>string</td>
|
|
236
|
+
<td>Icon <strong><code>prefix</code></strong></td>
|
|
237
|
+
</tr>
|
|
238
|
+
<tr>
|
|
239
|
+
<td><code>forceAutoFill</code></td>
|
|
240
|
+
<td>boolean</td>
|
|
241
|
+
<td>Allows Subscriber autofill to override attribute-backed <strong><code>label</code></strong> / <strong><code>description</code></strong></td>
|
|
242
|
+
</tr>
|
|
243
|
+
</tbody></table>
|
|
244
|
+
<table>
|
|
245
|
+
<thead>
|
|
246
|
+
<tr>
|
|
247
|
+
<th>Slot</th>
|
|
248
|
+
<th>Description</th>
|
|
249
|
+
</tr>
|
|
250
|
+
</thead>
|
|
251
|
+
<tbody><tr>
|
|
252
|
+
<td><em>(default)</em></td>
|
|
253
|
+
<td>Legend title and description components</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<td><code>suffix</code></td>
|
|
257
|
+
<td>Trailing actions (menus, icon buttons)</td>
|
|
258
|
+
</tr>
|
|
259
|
+
</tbody></table>
|
|
260
|
+
<h3 id="sonic-legend-description"><code>sonic-legend-description</code></h3>
|
|
261
|
+
<p>Muted description line below the legend title. No attributes—project content through the <strong>default slot</strong>.</p>
|
|
262
|
+
|
|
263
|
+
</article>
|
|
264
|
+
</main>
|
|
265
|
+
</body>
|
|
266
|
+
</html>
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html" data-doc-id="core/components/ui/form/form-actions/form-actions">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Form actions — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/form-actions/form-actions">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-actions/form-actions.md/form-actions" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form actions</strong>. sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en <span>Doc ID: <code>core/components/ui/form/form-actions/form-actions</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form actions, UI component, form, sonic-form-actions, web component, sonic-form-layout, direction, row, justify, flex-start, alignItems, center, justify-content. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html</a>.</span></p>
|
|
19
|
+
<h1 id="form-actions">Form actions</h1>
|
|
20
|
+
<p><strong><code>sonic-form-actions</code></strong> lays out submit / cancel and other <strong>form footer controls</strong> in a <strong>wrapping flex row</strong> with a small fixed gap. Place it inside <strong><code>sonic-form-layout</code></strong> (full-width row) or any block that should end with actions. Defaults: <strong><code>direction</code></strong> <code>row</code> · <strong><code>justify</code></strong> <code>flex-start</code> · <strong><code>alignItems</code></strong> <code>center</code>.</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<p>With no attributes, actions align to the <strong>start</strong> of the row (typical for left-to-right forms).</p>
|
|
23
|
+
<pre><code><form>
|
|
24
|
+
<sonic-form-layout>
|
|
25
|
+
<sonic-input label="First name"></sonic-input>
|
|
26
|
+
<sonic-input label="Last name"></sonic-input>
|
|
27
|
+
<sonic-form-actions>
|
|
28
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
29
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
30
|
+
</sonic-form-actions>
|
|
31
|
+
</sonic-form-layout>
|
|
32
|
+
</form>
|
|
33
|
+
</code></pre>
|
|
34
|
+
<h2 id="justify-content">Justify content</h2>
|
|
35
|
+
<p><strong><code>justify</code></strong> maps to CSS <strong><code>justify-content</code></strong>. Use <strong><code>flex-end</code></strong> for dialog-style footers or <strong><code>center</code></strong> for balanced toolbars.</p>
|
|
36
|
+
<pre><code><form>
|
|
37
|
+
<sonic-form-layout>
|
|
38
|
+
<sonic-input label="First name"></sonic-input>
|
|
39
|
+
<sonic-input label="Last name"></sonic-input>
|
|
40
|
+
<sonic-form-actions justify="flex-end">
|
|
41
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
42
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
43
|
+
</sonic-form-actions>
|
|
44
|
+
</sonic-form-layout>
|
|
45
|
+
</form>
|
|
46
|
+
</code></pre>
|
|
47
|
+
<h2 id="flex-direction">Flex direction</h2>
|
|
48
|
+
<p><strong><code>direction</code></strong> maps to <strong><code>flex-direction</code></strong>. <strong><code>row-reverse</code></strong> swaps visual order while keeping DOM order (focus order unchanged).</p>
|
|
49
|
+
<pre><code><form>
|
|
50
|
+
<sonic-form-layout>
|
|
51
|
+
<sonic-input label="First name"></sonic-input>
|
|
52
|
+
<sonic-input label="Last name"></sonic-input>
|
|
53
|
+
<sonic-form-actions direction="row-reverse">
|
|
54
|
+
<sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
|
|
55
|
+
<sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
|
|
56
|
+
</sonic-form-actions>
|
|
57
|
+
</sonic-form-layout>
|
|
58
|
+
</form>
|
|
59
|
+
</code></pre>
|
|
60
|
+
<h2 id="mixed-controls">Mixed controls</h2>
|
|
61
|
+
<p>Combine <strong><code>sonic-button</code></strong> with <strong><code>sonic-divider vertical</code></strong> or other slotted content. Default <strong><code>alignItems</code></strong> <code>center</code> keeps unlike heights aligned on the cross axis.</p>
|
|
62
|
+
<pre><code><form>
|
|
63
|
+
<sonic-form-layout>
|
|
64
|
+
<sonic-input label="First name"></sonic-input>
|
|
65
|
+
<sonic-input label="Last name"></sonic-input>
|
|
66
|
+
<sonic-form-actions justify="center">
|
|
67
|
+
<sonic-button type="info" minWidth="12rem">
|
|
68
|
+
<sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
|
|
69
|
+
Left seats
|
|
70
|
+
</sonic-button>
|
|
71
|
+
<sonic-divider vertical></sonic-divider>
|
|
72
|
+
<sonic-button type="info" minWidth="12rem">
|
|
73
|
+
<sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
|
|
74
|
+
Right seats
|
|
75
|
+
</sonic-button>
|
|
76
|
+
</sonic-form-actions>
|
|
77
|
+
</sonic-form-layout>
|
|
78
|
+
</form>
|
|
79
|
+
</code></pre>
|
|
80
|
+
<h2 id="api-reference">API reference</h2>
|
|
81
|
+
<table>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th>Attribute</th>
|
|
85
|
+
<th>Values</th>
|
|
86
|
+
<th>Description</th>
|
|
87
|
+
</tr>
|
|
88
|
+
</thead>
|
|
89
|
+
<tbody><tr>
|
|
90
|
+
<td><code>direction</code></td>
|
|
91
|
+
<td><code>row</code> (default) · <code>column</code> · <code>row-reverse</code> · <code>column-reverse</code></td>
|
|
92
|
+
<td>Main-axis layout of slotted controls</td>
|
|
93
|
+
</tr>
|
|
94
|
+
<tr>
|
|
95
|
+
<td><code>justify</code></td>
|
|
96
|
+
<td>CSS justify-content (default <code>flex-start</code>)</td>
|
|
97
|
+
<td>Distribution along the main axis</td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr>
|
|
100
|
+
<td><code>alignItems</code></td>
|
|
101
|
+
<td>CSS align-items (default <code>center</code>)</td>
|
|
102
|
+
<td>Cross-axis alignment when items differ in height</td>
|
|
103
|
+
</tr>
|
|
104
|
+
</tbody></table>
|
|
105
|
+
<p>The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex <strong><code>gap</code></strong> (<code>0.3rem</code>) and <strong><code>flex-wrap</code></strong>.</p>
|
|
106
|
+
<table>
|
|
107
|
+
<thead>
|
|
108
|
+
<tr>
|
|
109
|
+
<th>Slot</th>
|
|
110
|
+
<th>Description</th>
|
|
111
|
+
</tr>
|
|
112
|
+
</thead>
|
|
113
|
+
<tbody><tr>
|
|
114
|
+
<td><em>(default)</em></td>
|
|
115
|
+
<td>Footer actions (<strong><code>sonic-button</code></strong> and related controls)</td>
|
|
116
|
+
</tr>
|
|
117
|
+
</tbody></table>
|
|
118
|
+
|
|
119
|
+
</article>
|
|
120
|
+
</main>
|
|
121
|
+
</body>
|
|
122
|
+
</html>
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html" data-doc-id="core/components/ui/form/form-layout/form-layout">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Form layout — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/form/form-layout/form-layout.md/form-layout" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form layout</strong>. sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
|
|
19
|
+
<h1 id="form-layout">Form layout</h1>
|
|
20
|
+
<p><strong><code>sonic-form-layout</code></strong> arranges slotted form controls in a <strong>responsive CSS grid</strong> with consistent vertical spacing. Pair <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> and <strong><code>sonic-input-autocomplete</code></strong> fields side by side when the host is wider than <strong>440px</strong>; <strong>textareas</strong>, <strong>toggles</strong>, <strong>dividers</strong>, and <strong><code>sonic-form-actions</code></strong> span the full width. Wrap a <strong><code>form</code></strong> or <strong><code>sonic-fieldset</code></strong> body—no attributes are required.</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<p>Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.</p>
|
|
23
|
+
<pre><code><form>
|
|
24
|
+
<sonic-form-layout>
|
|
25
|
+
<sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
|
|
26
|
+
<sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
|
|
27
|
+
<sonic-select autocomplete="sex" label="Gender" name="gender">
|
|
28
|
+
<option value="" selected="selected">— Select —</option>
|
|
29
|
+
<option value="prefer-not">Prefer not to say</option>
|
|
30
|
+
<option value="male">Male</option>
|
|
31
|
+
<option value="female">Female</option>
|
|
32
|
+
</sonic-select>
|
|
33
|
+
<sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
|
|
34
|
+
<sonic-divider></sonic-divider>
|
|
35
|
+
<sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
|
|
36
|
+
<sonic-input
|
|
37
|
+
autocomplete="email"
|
|
38
|
+
label="Confirm email"
|
|
39
|
+
name="email_confirmation"
|
|
40
|
+
type="email"
|
|
41
|
+
></sonic-input>
|
|
42
|
+
<sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
|
|
43
|
+
<sonic-input
|
|
44
|
+
autocomplete="new-password"
|
|
45
|
+
label="Confirm password"
|
|
46
|
+
name="password_confirmation"
|
|
47
|
+
type="password"
|
|
48
|
+
></sonic-input>
|
|
49
|
+
<sonic-divider></sonic-divider>
|
|
50
|
+
<sonic-textarea label="Message" rows="5"></sonic-textarea>
|
|
51
|
+
<sonic-switch>Enable optional feature</sonic-switch>
|
|
52
|
+
<sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
|
|
53
|
+
<sonic-checkbox>
|
|
54
|
+
I accept the
|
|
55
|
+
<sonic-link href="#" class="underline">terms and conditions</sonic-link>
|
|
56
|
+
</sonic-checkbox>
|
|
57
|
+
<sonic-form-actions>
|
|
58
|
+
<sonic-button type="success">Submit</sonic-button>
|
|
59
|
+
</sonic-form-actions>
|
|
60
|
+
</sonic-form-layout>
|
|
61
|
+
</form>
|
|
62
|
+
</code></pre>
|
|
63
|
+
<h2 id="responsive-columns">Responsive columns</h2>
|
|
64
|
+
<p>When the host <strong><code>offsetWidth</code></strong> is <strong>greater than 440px</strong>, the grid uses <strong>two equal columns</strong> with slightly larger gap (<strong>1.75rem</strong>). Below that breakpoint, fields stack in a <strong>single column</strong> (<strong>1.5rem</strong> gap).</p>
|
|
65
|
+
<p>If the slot contains <strong>exactly one</strong> direct <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, or <strong><code>sonic-input-autocomplete</code></strong>, the layout stays <strong>one column</strong> even above the breakpoint so a lone field does not sit in half an empty row.</p>
|
|
66
|
+
<pre><code><div class="grid gap-8 md:grid-cols-2 mb-6">
|
|
67
|
+
<div>
|
|
68
|
+
<sonic-form-layout style="max-width: 20rem">
|
|
69
|
+
<sonic-divider align="left">Narrow host (single column)</sonic-divider>
|
|
70
|
+
<sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
|
|
71
|
+
<sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
|
|
72
|
+
</sonic-form-layout>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<sonic-form-layout>
|
|
77
|
+
<sonic-divider align="left">Wide host (two columns for inputs)</sonic-divider>
|
|
78
|
+
<sonic-input label="Email" name="email_wide" type="email"></sonic-input>
|
|
79
|
+
<sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
|
|
80
|
+
</sonic-form-layout>
|
|
81
|
+
</div>
|
|
82
|
+
</code></pre>
|
|
83
|
+
<h2 id="full-width-slotted-blocks">Full-width slotted blocks</h2>
|
|
84
|
+
<p>Everything except <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, <strong><code>sonic-input-autocomplete</code></strong>, and slotted elements with class <strong><code>form-item-container</code></strong> is assigned <strong><code>grid-column: 1 / -1</code></strong>. Use this for <strong><code>sonic-textarea</code></strong>, <strong><code>sonic-checkbox</code></strong>, <strong><code>sonic-switch</code></strong>, <strong><code>sonic-form-actions</code></strong>, <strong><code>sonic-divider</code></strong>, and similar blocks.</p>
|
|
85
|
+
<p>Slotted <strong><code>sonic-divider</code></strong> sets <strong><code>--sc-divider-my: 0</code></strong> so divider spacing matches the grid rhythm. Slotted <strong><code>sonic-submit</code></strong> uses <strong><code>display: contents</code></strong> so submit controls participate in the grid without an extra wrapper box.</p>
|
|
86
|
+
<pre><code><sonic-form-layout>
|
|
87
|
+
<sonic-input label="Subject" name="subject"></sonic-input>
|
|
88
|
+
<sonic-textarea label="Details" rows="4"></sonic-textarea>
|
|
89
|
+
<sonic-form-actions>
|
|
90
|
+
<sonic-button type="primary">Send</sonic-button>
|
|
91
|
+
</sonic-form-actions>
|
|
92
|
+
</sonic-form-layout>
|
|
93
|
+
</code></pre>
|
|
94
|
+
<h2 id="custom-column-wrapper">Custom column wrapper</h2>
|
|
95
|
+
<p>Add class <strong><code>form-item-container</code></strong> on a slotted wrapper (for example a <strong><code>div</code></strong>) when a field is not a direct <strong><code>sonic-input</code></strong> / <strong><code>sonic-select</code></strong> / <strong><code>sonic-input-autocomplete</code></strong> but should still share the two-column flow with short inputs.</p>
|
|
96
|
+
<pre><code><sonic-form-layout>
|
|
97
|
+
<sonic-input label="City" name="city"></sonic-input>
|
|
98
|
+
<div class="form-item-container">
|
|
99
|
+
<sonic-input label="Postal code" name="postal_code"></sonic-input>
|
|
100
|
+
</div>
|
|
101
|
+
</sonic-form-layout>
|
|
102
|
+
</code></pre>
|
|
103
|
+
<h2 id="api-reference">API reference</h2>
|
|
104
|
+
<p>No public attributes — layout follows slotted children and host width.</p>
|
|
105
|
+
<table>
|
|
106
|
+
<thead>
|
|
107
|
+
<tr>
|
|
108
|
+
<th>Slot</th>
|
|
109
|
+
<th>Description</th>
|
|
110
|
+
</tr>
|
|
111
|
+
</thead>
|
|
112
|
+
<tbody><tr>
|
|
113
|
+
<td><em>(default)</em></td>
|
|
114
|
+
<td>Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or <strong><code>form-item-container</code></strong> class</td>
|
|
115
|
+
</tr>
|
|
116
|
+
</tbody></table>
|
|
117
|
+
|
|
118
|
+
</article>
|
|
119
|
+
</main>
|
|
120
|
+
</body>
|
|
121
|
+
</html>
|