@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +1 -1
- package/.claude/skills +1 -0
- package/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/README.md +1 -1
- package/ai/README.md +29 -41
- package/ai/skills/concorde/SKILL.md +54 -324
- package/ai/skills/concorde/rules/composition.md +32 -0
- package/ai/skills/concorde/rules/data.md +47 -0
- package/ai/skills/concorde/rules/http.md +25 -0
- package/ai/skills/concorde/rules/lists-forms.md +35 -0
- package/ai/skills/concorde/rules/styling.md +46 -0
- package/ai/skills/concorde/rules/troubleshooting.md +45 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +177 -177
- package/concorde-core.es.js +4993 -4833
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
- package/dist/concorde-core.bundle.js +177 -177
- package/dist/concorde-core.es.js +4993 -4833
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/og-concorde.jpg +0 -0
- package/dist/robots.txt +11 -10
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/index-D_alEsng.js +12122 -0
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
- package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
- package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
- package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
- package/docs/crawl/core/components/ui/button/button.html +150 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
- package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
- package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
- package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +104 -0
- package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
- package/docs/crawl/core/components/ui/image/image.html +298 -0
- package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
- package/docs/crawl/core/components/ui/loader/loader.html +124 -0
- package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
- package/docs/crawl/core/components/ui/modal/modal.html +342 -0
- package/docs/crawl/core/components/ui/pop/pop.html +296 -0
- package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
- package/docs/crawl/core/components/ui/table/table.html +545 -0
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +233 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
- package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +149 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
- package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
- package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
- package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
- package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
- package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
- package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +381 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +103 -0
- package/docs/docs-mock-api-sw.js +223 -58
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/index.html +68 -95
- package/docs/llms-full.txt +3610 -2231
- package/docs/llms.txt +86 -94
- package/docs/robots.txt +10 -11
- package/docs/sitemap.xml +84 -78
- package/docs/src/core/components/functional/date/date.md +231 -91
- package/docs/src/core/components/functional/fetch/fetch.md +83 -66
- package/docs/src/core/components/functional/if/if.md +3 -28
- package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
- package/docs/src/core/components/functional/list/list.md +43 -99
- package/docs/src/core/components/functional/mix/mix.md +26 -31
- package/docs/src/core/components/functional/queue/queue.md +61 -40
- package/docs/src/core/components/functional/router/router.md +65 -64
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/docs/src/core/components/functional/sdui/example.json +86 -19
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/docs/src/core/components/functional/sdui/sdui.md +358 -187
- package/docs/src/core/components/functional/states/states.md +61 -86
- package/docs/src/core/components/functional/submit/submit.md +72 -64
- package/docs/src/core/components/functional/value/value.md +22 -34
- package/docs/src/core/components/ui/alert/alert.md +58 -48
- package/docs/src/core/components/ui/badge/badge.md +34 -27
- package/docs/src/core/components/ui/button/button.md +106 -139
- package/docs/src/core/components/ui/captcha/captcha.md +32 -17
- package/docs/src/core/components/ui/card/card.md +6 -6
- package/docs/src/core/components/ui/divider/divider.md +11 -8
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
- package/docs/src/core/components/ui/form/input/input.md +95 -95
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
- package/docs/src/core/components/ui/form/radio/radio.md +34 -55
- package/docs/src/core/components/ui/form/select/select.md +45 -60
- package/docs/src/core/components/ui/form/switch/switch.md +34 -57
- package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
- package/docs/src/core/components/ui/group/group.md +33 -35
- package/docs/src/core/components/ui/icon/icon.md +4 -4
- package/docs/src/core/components/ui/image/image.md +107 -41
- package/docs/src/core/components/ui/link/link.md +6 -6
- package/docs/src/core/components/ui/loader/loader.md +55 -30
- package/docs/src/core/components/ui/menu/menu.md +27 -27
- package/docs/src/core/components/ui/modal/modal.md +96 -72
- package/docs/src/core/components/ui/pop/pop.md +158 -80
- package/docs/src/core/components/ui/progress/progress.md +2 -2
- package/docs/src/core/components/ui/table/table.md +255 -91
- package/docs/src/core/components/ui/theme/theme.md +36 -11
- package/docs/src/core/components/ui/toast/toast.md +117 -48
- package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
- package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
- package/docs/src/docs/_core-concept/overview.md +57 -0
- package/docs/src/docs/_core-concept/subscriber.md +75 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
- package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
- package/docs/src/docs/_decorators/bind.md +167 -0
- package/docs/src/docs/_decorators/get.md +162 -0
- package/docs/src/docs/_decorators/handle.md +175 -0
- package/docs/src/docs/_decorators/on-assign.md +390 -0
- package/docs/src/docs/_decorators/patch.md +70 -0
- package/docs/src/docs/_decorators/post.md +146 -0
- package/docs/src/docs/_decorators/publish.md +55 -0
- package/docs/src/docs/_decorators/put.md +70 -0
- package/docs/src/docs/_decorators/subscribe.md +100 -0
- package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
- package/docs/src/docs/_directives/sub.md +91 -0
- package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
- package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
- package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
- package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
- package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
- package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
- package/docs/src/docs/_getting-started/pubsub.md +37 -0
- package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
- package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
- package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
- package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
- package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
- package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
- package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
- package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
- package/docs/src/docs/search/docs-search.json +4375 -2420
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +2 -23
- package/gitlab/job_github_mirror.sh +39 -0
- package/index.html +89 -0
- package/package.json +22 -4
- package/public/img/og-concorde.jpg +0 -0
- package/scripts/ai-init.mjs +104 -379
- package/scripts/ai-init.test.mjs +81 -239
- package/scripts/docs-markdown-vite-plugin.ts +11 -5
- package/scripts/docs-public-url.mjs +6 -0
- package/scripts/docs.htaccess +7 -0
- package/scripts/generate-cem.mjs +244 -0
- package/scripts/generate-cem.test.mjs +122 -0
- package/scripts/generate-crawl-docs.mjs +29 -5
- package/scripts/generate-sdui-catalog.mjs +11 -10
- package/scripts/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +3 -0
- package/scripts/post-build.mjs +0 -0
- package/scripts/pre-publish.mjs +2 -1
- package/scripts/site-pages.mjs +212 -0
- package/scripts/site-pages.test.mjs +116 -0
- package/site-pages/about.md +22 -0
- package/site-pages/privacy.md +32 -0
- package/src/core/components/functional/date/date.md +1 -1
- package/src/core/components/functional/example/example.ts +3 -1
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +6 -2
- package/src/core/components/functional/list/list.ts +17 -4
- package/src/core/components/functional/mix/mix.md +0 -0
- package/src/core/components/functional/router/router.demo.ts +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +2 -2
- package/src/core/components/functional/sdui/example.json +0 -0
- package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
- package/src/core/components/functional/sdui/sdui.ts +33 -8
- package/src/core/components/functional/sdui/types.ts +0 -0
- package/src/core/components/functional/states/states.ts +0 -0
- package/src/core/components/functional/submit/submit.spec.ts +60 -0
- package/src/core/components/functional/submit/submit.ts +6 -3
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/value/value.md +0 -0
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/card/card.md +1 -1
- package/src/core/components/ui/form/input/input.md +19 -1
- package/src/core/components/ui/form/input/input.ts +8 -2
- package/src/core/components/ui/form/radio/radio.md +14 -0
- package/src/core/components/ui/image/image.md +17 -17
- package/src/core/components/ui/modal/modal.md +2 -2
- package/src/core/decorators/subscriber/bind.ts +9 -14
- package/src/core/decorators/subscriber/subscribe.ts +15 -9
- package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/PublisherProxy.ts +166 -125
- package/src/core/utils/deepReadonly.spec.ts +66 -0
- package/src/core/utils/deepReadonly.ts +71 -0
- package/src/core/utils/immutableValue.spec.ts +54 -0
- package/src/core/utils/immutableValue.ts +102 -0
- package/src/core/utils/nestedDotForm.spec.ts +88 -0
- package/src/core/utils/publisherImmutable.spec.ts +76 -0
- package/src/core/utils/route.ts +0 -0
- package/src/core/utils/strictGet.spec.ts +61 -0
- package/src/core/utils/strictGet.ts +102 -0
- package/src/css.d.ts +19 -0
- package/src/docs/components/docs-demo-sources.ts +3 -3
- package/src/docs/decorators/bind.md +23 -24
- package/src/docs/docs-location.spec.ts +10 -0
- package/src/docs/docs-location.ts +10 -0
- package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
- package/src/docs/example/docs-toggle-demos.ts +1 -1
- package/src/docs/example/users.ts +0 -0
- package/src/docs/getting-started/ai-agents.md +29 -55
- package/src/docs/getting-started/dataFlow.md +2 -2
- package/src/docs/home/home.ts +3 -1
- package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
- package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
- package/src/docs/misc/publisher-get-immutability-study.md +229 -0
- package/src/docs/navigation/navigation.ts +5 -1
- package/src/docs/search/docs-search.json +358 -58
- package/src/docs/search/markdown-renderer.ts +6 -1
- package/src/docs/tailwind/css/docs/content.css +4 -5
- package/src/tsconfig.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.json +53 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +0 -4103
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +0 -2556
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +0 -510
- package/.taste-skill/notes.md +0 -84
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +0 -1973
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/AUDIT.md +0 -228
- package/PLAN-AMELIORATION.md +0 -220
- package/PLAN-DOCS-AGENTS.md +0 -80
- package/ai/AGENTS.md +0 -56
- package/ai/cursor/rules/concorde-menu.mdc +0 -15
- package/ai/cursor/rules/concorde-scope.mdc +0 -14
- package/ai/cursor/rules/concorde-theme.mdc +0 -13
- package/ai/cursor/rules/concorde.mdc +0 -66
- package/ai/jetbrains/rules/concorde.md +0 -53
- package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
- package/ai/skills/concorde-imports/SKILL.md +0 -78
- package/ai/skills/concorde-menu/SKILL.md +0 -74
- package/ai/skills/concorde-scope/SKILL.md +0 -70
- package/ai/skills/concorde-theme/SKILL.md +0 -57
- package/docs/.htaccess +0 -75
- package/docs/404.html +0 -15
- package/docs/404.md +0 -5
- package/docs/assets/index-BgG6FFPt.js +0 -11765
- package/docs/assets/index-x89XINSG.css +0 -1
- package/docs/core/components/functional/date/date.html +0 -211
- package/docs/core/components/functional/date/date.md +0 -150
- package/docs/core/components/functional/fetch/fetch.html +0 -180
- package/docs/core/components/functional/fetch/fetch.md +0 -108
- package/docs/core/components/functional/if/if.html +0 -65
- package/docs/core/components/functional/if/if.md +0 -34
- package/docs/core/components/functional/jsonata/jsonata.html +0 -110
- package/docs/core/components/functional/jsonata/jsonata.md +0 -61
- package/docs/core/components/functional/list/list.html +0 -198
- package/docs/core/components/functional/list/list.md +0 -121
- package/docs/core/components/functional/mix/mix.html +0 -78
- package/docs/core/components/functional/mix/mix.md +0 -46
- package/docs/core/components/functional/queue/queue.html +0 -155
- package/docs/core/components/functional/queue/queue.md +0 -51
- package/docs/core/components/functional/router/router.html +0 -154
- package/docs/core/components/functional/router/router.md +0 -93
- package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
- package/docs/core/components/functional/sdui/sdui.html +0 -397
- package/docs/core/components/functional/sdui/sdui.md +0 -307
- package/docs/core/components/functional/states/states.html +0 -141
- package/docs/core/components/functional/states/states.md +0 -112
- package/docs/core/components/functional/submit/submit.html +0 -178
- package/docs/core/components/functional/submit/submit.md +0 -106
- package/docs/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/core/components/functional/translation/translation.html +0 -60
- package/docs/core/components/functional/translation/translation.md +0 -38
- package/docs/core/components/functional/value/value.html +0 -81
- package/docs/core/components/functional/value/value.md +0 -47
- package/docs/core/components/ui/alert/alert.md +0 -186
- package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/core/components/ui/badge/badge.md +0 -181
- package/docs/core/components/ui/button/button.html +0 -309
- package/docs/core/components/ui/button/button.md +0 -216
- package/docs/core/components/ui/captcha/captcha.html +0 -80
- package/docs/core/components/ui/captcha/captcha.md +0 -56
- package/docs/core/components/ui/card/card.md +0 -215
- package/docs/core/components/ui/divider/divider.md +0 -126
- package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
- package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
- package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
- package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
- package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
- package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
- package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
- package/docs/core/components/ui/form/input/input.html +0 -235
- package/docs/core/components/ui/form/input/input.md +0 -142
- package/docs/core/components/ui/form/radio/radio.html +0 -144
- package/docs/core/components/ui/form/radio/radio.md +0 -78
- package/docs/core/components/ui/form/select/select.html +0 -178
- package/docs/core/components/ui/form/select/select.md +0 -86
- package/docs/core/components/ui/form/switch/switch.html +0 -146
- package/docs/core/components/ui/form/switch/switch.md +0 -80
- package/docs/core/components/ui/form/textarea/textarea.html +0 -162
- package/docs/core/components/ui/form/textarea/textarea.md +0 -82
- package/docs/core/components/ui/group/group.html +0 -113
- package/docs/core/components/ui/group/group.md +0 -77
- package/docs/core/components/ui/icon/icon.md +0 -214
- package/docs/core/components/ui/image/image.html +0 -194
- package/docs/core/components/ui/image/image.md +0 -167
- package/docs/core/components/ui/link/link.md +0 -81
- package/docs/core/components/ui/loader/loader.html +0 -114
- package/docs/core/components/ui/loader/loader.md +0 -87
- package/docs/core/components/ui/menu/menu.md +0 -370
- package/docs/core/components/ui/modal/modal.html +0 -324
- package/docs/core/components/ui/modal/modal.md +0 -211
- package/docs/core/components/ui/pop/pop.html +0 -250
- package/docs/core/components/ui/pop/pop.md +0 -216
- package/docs/core/components/ui/progress/progress.md +0 -109
- package/docs/core/components/ui/table/table.html +0 -333
- package/docs/core/components/ui/table/table.md +0 -267
- package/docs/core/components/ui/theme/theme.html +0 -116
- package/docs/core/components/ui/theme/theme.md +0 -97
- package/docs/core/components/ui/toast/toast.html +0 -185
- package/docs/core/components/ui/toast/toast.md +0 -147
- package/docs/core/components/ui/tooltip/tooltip.html +0 -112
- package/docs/core/components/ui/tooltip/tooltip.md +0 -89
- package/docs/docs/decorators/ancestor-attribute.html +0 -71
- package/docs/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/docs/decorators/auto-subscribe.html +0 -61
- package/docs/docs/decorators/auto-subscribe.md +0 -40
- package/docs/docs/decorators/bind.html +0 -86
- package/docs/docs/decorators/bind.md +0 -77
- package/docs/docs/decorators/get.html +0 -166
- package/docs/docs/decorators/get.md +0 -160
- package/docs/docs/decorators/handle.html +0 -139
- package/docs/docs/decorators/handle.md +0 -119
- package/docs/docs/decorators/on-assign.html +0 -72
- package/docs/docs/decorators/on-assign.md +0 -63
- package/docs/docs/decorators/patch.html +0 -76
- package/docs/docs/decorators/patch.md +0 -44
- package/docs/docs/decorators/post.html +0 -150
- package/docs/docs/decorators/post.md +0 -134
- package/docs/docs/decorators/publish.html +0 -74
- package/docs/docs/decorators/publish.md +0 -56
- package/docs/docs/decorators/put.html +0 -83
- package/docs/docs/decorators/put.md +0 -51
- package/docs/docs/decorators/subscribe.html +0 -91
- package/docs/docs/decorators/subscribe.md +0 -87
- package/docs/docs/decorators/wait-for-ancestors.html +0 -82
- package/docs/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/docs/directives/sub.html +0 -79
- package/docs/docs/directives/sub.md +0 -75
- package/docs/docs/directives/t.html +0 -91
- package/docs/docs/directives/t.md +0 -73
- package/docs/docs/getting-started/ai-agents.md +0 -76
- package/docs/docs/getting-started/components.html +0 -27
- package/docs/docs/getting-started/components.md +0 -5
- package/docs/docs/getting-started/installation.html +0 -69
- package/docs/docs/getting-started/installation.md +0 -36
- package/docs/docs/getting-started/my-first-component.md +0 -227
- package/docs/docs/getting-started/start.html +0 -47
- package/docs/docs/getting-started/start.md +0 -35
- package/docs/docs/getting-started/theming.md +0 -253
- package/docs/docs/index.html +0 -99
- package/docs/docs/misc/api-configuration.md +0 -79
- package/docs/docs/misc/dataProviderKey.md +0 -168
- package/docs/hubs/decorators.html +0 -443
- package/docs/hubs/form-components.html +0 -404
- package/docs/hubs/remote-data.html +0 -371
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +0 -28
- package/docs/index.md +0 -22
- package/docs/src/core/components/functional/translation/translation.md +0 -38
- package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
- package/docs/src/docs/decorators/auto-subscribe.md +0 -40
- package/docs/src/docs/decorators/bind.md +0 -77
- package/docs/src/docs/decorators/get.md +0 -160
- package/docs/src/docs/decorators/handle.md +0 -119
- package/docs/src/docs/decorators/on-assign.md +0 -63
- package/docs/src/docs/decorators/patch.md +0 -44
- package/docs/src/docs/decorators/post.md +0 -134
- package/docs/src/docs/decorators/publish.md +0 -56
- package/docs/src/docs/decorators/put.md +0 -51
- package/docs/src/docs/decorators/subscribe.md +0 -87
- package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
- package/docs/src/docs/directives/sub.md +0 -75
- package/docs/src/docs/directives/t.md +0 -73
- package/docs/src/docs/getting-started/components.md +0 -5
- package/docs/src/docs/getting-started/create-a-component.md +0 -136
- package/docs/src/docs/getting-started/dataFlow.md +0 -87
- package/docs/src/docs/getting-started/installation.md +0 -36
- package/docs/src/docs/misc/docs-mock-api.md +0 -62
- package/docs/src/docs/misc/dynamic-path.md +0 -71
- package/docs/src/docs/misc/endpoint.md +0 -45
- package/docs/src/docs/misc/html-integration.md +0 -14
- /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
- /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html" data-doc-id="core/components/ui/menu/menu">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Menu — Concorde
|
|
6
|
+
<title>Menu — Concorde</title>
|
|
7
7
|
<meta name="description" content="sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in">
|
|
8
8
|
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive">
|
|
9
9
|
<meta name="concorde-doc-id" content="core/components/ui/menu/menu">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/menu">
|
|
11
|
-
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/menu.md">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">
|
|
12
11
|
</head>
|
|
13
12
|
<body>
|
|
14
13
|
<header>
|
|
15
|
-
<p><a href="
|
|
14
|
+
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/menu/menu.md/menu" rel="nofollow">interactive version</a></p>
|
|
16
15
|
</header>
|
|
17
16
|
<main>
|
|
18
17
|
<article>
|
|
19
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in <span>Doc ID: <code>core/components/ui/menu/menu</code>. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive. URL: <a href="https://concorde.supersoniks.org/core/components/ui/menu">https://concorde.supersoniks.org/core/components/ui/menu</a>.</span></p>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in <span>Doc ID: <code>core/components/ui/menu/menu</code>. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html</a>.</span></p>
|
|
20
19
|
<h1 id="menu">Menu</h1>
|
|
21
|
-
<p><strong><code>sonic-menu</code></strong> lays out navigation or actions as a <strong><code>direction</code></strong> row or column of <strong><code>sonic-menu-item</code></strong> entries (ghost <strong><code>variant</code></strong> and block <strong><code>shape</code></strong> by default), optional <strong><code>sonic-divider</code></strong> separators, and overflow content in the <strong><code>more</code></strong> slot (popover “…” trigger). Set <code>href</code> / <code>pushstate</code> / <code>autoActive</code> on each <code>sonic-menu-item</code
|
|
20
|
+
<p><strong><code>sonic-menu</code></strong> lays out navigation or actions as a <strong><code>direction</code></strong> row or column of <strong><code>sonic-menu-item</code></strong> entries (ghost <strong><code>variant</code></strong> and block <strong><code>shape</code></strong> by default), optional <strong><code>sonic-divider</code></strong> separators, and overflow content in the <strong><code>more</code></strong> slot (popover “…” trigger). Set <strong><code>href</code></strong> / <strong><code>pushstate</code></strong> / <strong><code>autoActive</code></strong> on each <strong><code>sonic-menu-item</code></strong>—same API as <strong><code>sonic-button</code></strong>—not on the menu host.</p>
|
|
22
21
|
<h2 id="basic-example">Basic example</h2>
|
|
23
22
|
<pre><code><sonic-menu direction="row">
|
|
24
23
|
<sonic-menu-item variant="ghost">
|
|
@@ -48,11 +47,11 @@
|
|
|
48
47
|
</sonic-menu-item>
|
|
49
48
|
<sonic-menu-item>
|
|
50
49
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
51
|
-
|
|
50
|
+
History
|
|
52
51
|
</sonic-menu-item>
|
|
53
52
|
<sonic-menu-item>
|
|
54
53
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
55
|
-
|
|
54
|
+
Orders
|
|
56
55
|
</sonic-menu-item>
|
|
57
56
|
<sonic-menu-item type="danger">
|
|
58
57
|
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
@@ -70,11 +69,11 @@
|
|
|
70
69
|
</sonic-menu-item>
|
|
71
70
|
<sonic-menu-item>
|
|
72
71
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
73
|
-
|
|
72
|
+
History
|
|
74
73
|
</sonic-menu-item>
|
|
75
74
|
<sonic-menu-item>
|
|
76
75
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
77
|
-
|
|
76
|
+
Orders
|
|
78
77
|
</sonic-menu-item>
|
|
79
78
|
<sonic-menu-item type="danger">
|
|
80
79
|
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
@@ -93,11 +92,11 @@
|
|
|
93
92
|
</sonic-menu-item>
|
|
94
93
|
<sonic-menu-item>
|
|
95
94
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
96
|
-
|
|
95
|
+
History
|
|
97
96
|
</sonic-menu-item>
|
|
98
97
|
<sonic-menu-item>
|
|
99
98
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
100
|
-
|
|
99
|
+
Orders
|
|
101
100
|
</sonic-menu-item>
|
|
102
101
|
</sonic-menu>
|
|
103
102
|
<sonic-menu size="sm" direction="row">
|
|
@@ -108,11 +107,11 @@
|
|
|
108
107
|
</sonic-menu-item>
|
|
109
108
|
<sonic-menu-item>
|
|
110
109
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
111
|
-
|
|
110
|
+
History
|
|
112
111
|
</sonic-menu-item>
|
|
113
112
|
<sonic-menu-item>
|
|
114
113
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
115
|
-
|
|
114
|
+
Orders
|
|
116
115
|
</sonic-menu-item>
|
|
117
116
|
</sonic-menu>
|
|
118
117
|
<sonic-menu direction="row">
|
|
@@ -123,11 +122,11 @@
|
|
|
123
122
|
</sonic-menu-item>
|
|
124
123
|
<sonic-menu-item>
|
|
125
124
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
126
|
-
|
|
125
|
+
History
|
|
127
126
|
</sonic-menu-item>
|
|
128
127
|
<sonic-menu-item>
|
|
129
128
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
130
|
-
|
|
129
|
+
Orders
|
|
131
130
|
</sonic-menu-item>
|
|
132
131
|
</sonic-menu>
|
|
133
132
|
<sonic-menu size="lg" direction="row">
|
|
@@ -138,11 +137,11 @@
|
|
|
138
137
|
</sonic-menu-item>
|
|
139
138
|
<sonic-menu-item>
|
|
140
139
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
141
|
-
|
|
140
|
+
History
|
|
142
141
|
</sonic-menu-item>
|
|
143
142
|
<sonic-menu-item>
|
|
144
143
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
145
|
-
|
|
144
|
+
Orders
|
|
146
145
|
</sonic-menu-item>
|
|
147
146
|
</sonic-menu>
|
|
148
147
|
<sonic-menu size="xl" direction="row">
|
|
@@ -153,11 +152,11 @@
|
|
|
153
152
|
</sonic-menu-item>
|
|
154
153
|
<sonic-menu-item>
|
|
155
154
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
156
|
-
|
|
155
|
+
History
|
|
157
156
|
</sonic-menu-item>
|
|
158
157
|
<sonic-menu-item>
|
|
159
158
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
160
|
-
|
|
159
|
+
Orders
|
|
161
160
|
</sonic-menu-item>
|
|
162
161
|
</sonic-menu>
|
|
163
162
|
</div>
|
|
@@ -227,11 +226,11 @@
|
|
|
227
226
|
</sonic-menu-item>
|
|
228
227
|
<sonic-menu-item>
|
|
229
228
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
230
|
-
|
|
229
|
+
History
|
|
231
230
|
</sonic-menu-item>
|
|
232
231
|
<sonic-menu-item>
|
|
233
232
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
234
|
-
|
|
233
|
+
Orders
|
|
235
234
|
</sonic-menu-item>
|
|
236
235
|
<sonic-menu slot="more">
|
|
237
236
|
<sonic-menu-item>
|
|
@@ -263,11 +262,11 @@
|
|
|
263
262
|
</sonic-menu-item>
|
|
264
263
|
<sonic-menu-item>
|
|
265
264
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
266
|
-
|
|
265
|
+
History
|
|
267
266
|
</sonic-menu-item>
|
|
268
267
|
<sonic-menu-item>
|
|
269
268
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
270
|
-
|
|
269
|
+
Orders
|
|
271
270
|
</sonic-menu-item>
|
|
272
271
|
<sonic-menu-item variant="ghost">
|
|
273
272
|
<sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
|
|
@@ -279,11 +278,11 @@
|
|
|
279
278
|
</sonic-menu-item>
|
|
280
279
|
<sonic-menu-item>
|
|
281
280
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
282
|
-
|
|
281
|
+
History
|
|
283
282
|
</sonic-menu-item>
|
|
284
283
|
<sonic-menu-item>
|
|
285
284
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
286
|
-
|
|
285
|
+
Orders
|
|
287
286
|
</sonic-menu-item>
|
|
288
287
|
<sonic-menu-item variant="ghost">
|
|
289
288
|
<sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
|
|
@@ -295,11 +294,11 @@
|
|
|
295
294
|
</sonic-menu-item>
|
|
296
295
|
<sonic-menu-item>
|
|
297
296
|
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
298
|
-
|
|
297
|
+
History
|
|
299
298
|
</sonic-menu-item>
|
|
300
299
|
<sonic-menu-item>
|
|
301
300
|
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
302
|
-
|
|
301
|
+
Orders
|
|
303
302
|
</sonic-menu-item>
|
|
304
303
|
<sonic-menu-item>
|
|
305
304
|
<sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
|
|
@@ -347,13 +346,13 @@
|
|
|
347
346
|
</tr>
|
|
348
347
|
<tr>
|
|
349
348
|
<td><code>size</code></td>
|
|
350
|
-
<td><code>
|
|
349
|
+
<td><code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code></td>
|
|
351
350
|
<td>Propagated to items and the <strong><code>more</code></strong> trigger when unset on the item</td>
|
|
352
351
|
</tr>
|
|
353
352
|
<tr>
|
|
354
353
|
<td><code>shadow</code></td>
|
|
355
|
-
<td><code>
|
|
356
|
-
<td>Shadow around the menu;
|
|
354
|
+
<td><code>sm</code> · <code>md</code> · <code>lg</code></td>
|
|
355
|
+
<td>Shadow around the menu; omitted for none</td>
|
|
357
356
|
</tr>
|
|
358
357
|
<tr>
|
|
359
358
|
<td><code>minWidth</code></td>
|
|
@@ -380,14 +379,14 @@
|
|
|
380
379
|
</thead>
|
|
381
380
|
<tbody><tr>
|
|
382
381
|
<td><em>(default)</em></td>
|
|
383
|
-
<td>Visible items: <code>sonic-menu-item</code
|
|
382
|
+
<td>Visible items: <strong><code>sonic-menu-item</code></strong>, <strong><code>sonic-divider</code></strong>, nested <strong><code>sonic-menu</code></strong></td>
|
|
384
383
|
</tr>
|
|
385
384
|
<tr>
|
|
386
385
|
<td><code>more</code></td>
|
|
387
386
|
<td>Popover content for the “…” control; shown only when the slot has assigned nodes</td>
|
|
388
387
|
</tr>
|
|
389
388
|
</tbody></table>
|
|
390
|
-
<p><strong><code>sonic-menu-item</code></strong> extends <strong><code>sonic-button</code></strong> (defaults <code>variant="ghost"</code
|
|
389
|
+
<p><strong><code>sonic-menu-item</code></strong> extends <strong><code>sonic-button</code></strong> (defaults: <strong><code>variant="ghost"</code></strong>, <strong><code>shape="block"</code></strong>). Use the button docs for <strong><code>type</code></strong>, <strong><code>variant</code></strong>, <strong><code>href</code></strong>, <strong><code>pushstate</code></strong>, <strong><code>autoActive</code></strong>, and item slots.</p>
|
|
391
390
|
|
|
392
391
|
</article>
|
|
393
392
|
</main>
|
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html" data-doc-id="core/components/ui/modal/modal">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Modal — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-modal presents focused content in a <dialog> overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/modal/modal">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.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/modal/modal.md/modal" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. sonic-modal presents focused content in a <dialog> overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
|
|
19
|
+
<h1 id="modal">Modal</h1>
|
|
20
|
+
<p><strong><code>sonic-modal</code></strong> presents focused content in a <code><dialog></code> overlay with backdrop, enter/exit animation, and a built-in close control. Compose <strong><code>sonic-modal-title</code></strong> / <strong><code>sonic-modal-subtitle</code></strong> / <strong><code>sonic-modal-content</code></strong> / <strong><code>sonic-modal-actions</code></strong>, or use the default slot. Call <strong><code>show()</code></strong> on the element to open; use <strong><code>hideModal</code></strong> on action buttons or <strong><code>hide()</code></strong> from script. Set <strong><code>forceAction</code></strong> when dismissal must go through explicit actions only. Imperative dialogs: <strong><code>Modal.create()</code></strong> (also <strong><code>window.SonicModal</code></strong>).</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<p>Click the trigger to open. <strong><code>sonic-modal-actions</code></strong> lays out footer buttons; <strong><code>hideModal</code></strong> closes the modal on click. Scope form state with <strong><code>formDataProvider</code></strong> on <strong><code>sonic-modal-actions</code></strong> so child <strong><code>sonic-button</code></strong> elements share one publisher.</p>
|
|
23
|
+
<pre><code><sonic-button onclick="document.getElementById('modalExample').show()">
|
|
24
|
+
Open modal
|
|
25
|
+
</sonic-button>
|
|
26
|
+
<sonic-modal id="modalExample">
|
|
27
|
+
<sonic-modal-title>
|
|
28
|
+
Export ready
|
|
29
|
+
<sonic-badge type="success" size="sm">New</sonic-badge>
|
|
30
|
+
</sonic-modal-title>
|
|
31
|
+
<sonic-modal-subtitle>Your report finished processing.</sonic-modal-subtitle>
|
|
32
|
+
<sonic-modal-content>
|
|
33
|
+
Download the CSV now or review the summary in your dashboard before sharing.
|
|
34
|
+
</sonic-modal-content>
|
|
35
|
+
<sonic-modal-actions formDataProvider="ModalMiniForm">
|
|
36
|
+
<sonic-button minWidth="8rem" value="true" name="click">
|
|
37
|
+
Save draft
|
|
38
|
+
</sonic-button>
|
|
39
|
+
<sonic-button minWidth="8rem" type="success" hideModal>Download</sonic-button>
|
|
40
|
+
</sonic-modal-actions>
|
|
41
|
+
</sonic-modal>
|
|
42
|
+
</code></pre>
|
|
43
|
+
<h2 id="scrollable-content">Scrollable content</h2>
|
|
44
|
+
<p>Long copy scrolls inside the dialog. Default <strong><code>maxHeight</code></strong> is <code>90vh</code>. Default <strong><code>align</code></strong> is <code>left</code>.</p>
|
|
45
|
+
<pre><code><sonic-button onclick="document.getElementById('modalText').show()">Venue details</sonic-button>
|
|
46
|
+
<sonic-modal align="left" id="modalText">
|
|
47
|
+
<sonic-modal-title>Hours and tickets</sonic-modal-title>
|
|
48
|
+
<sonic-modal-content>
|
|
49
|
+
<div class="prose">
|
|
50
|
+
<p>
|
|
51
|
+
<strong>Opening hours</strong><br />
|
|
52
|
+
Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
|
|
53
|
+
</p>
|
|
54
|
+
<p>
|
|
55
|
+
<strong>Ticketing</strong><br />
|
|
56
|
+
Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
|
|
57
|
+
</p>
|
|
58
|
+
<p>
|
|
59
|
+
<strong>Contact</strong><br />
|
|
60
|
+
tickets@example.com · +33 3 28 33 48 33
|
|
61
|
+
</p>
|
|
62
|
+
<p>
|
|
63
|
+
<strong>Access</strong><br />
|
|
64
|
+
14 Place Faidherbe, 59100 Roubaix<br />
|
|
65
|
+
Metro line 2, Eurotéléport stop
|
|
66
|
+
</p>
|
|
67
|
+
</div>
|
|
68
|
+
</sonic-modal-content>
|
|
69
|
+
</sonic-modal>
|
|
70
|
+
</code></pre>
|
|
71
|
+
<h2 id="force-action">Force action</h2>
|
|
72
|
+
<p>With <strong><code>forceAction</code></strong>, backdrop click, Escape, and the default close button are disabled. Provide <strong><code>sonic-modal-actions</code></strong> (or <strong><code>sonic-modal-close</code></strong>) so users can finish the flow.</p>
|
|
73
|
+
<pre><code><sonic-button onclick="document.getElementById('force').show()">Cookie consent</sonic-button>
|
|
74
|
+
<sonic-modal forceAction id="force">
|
|
75
|
+
<sonic-modal-title>Allow analytics cookies?</sonic-modal-title>
|
|
76
|
+
<sonic-modal-content>
|
|
77
|
+
We use cookies to measure traffic and improve the product. You can change this later in settings.
|
|
78
|
+
</sonic-modal-content>
|
|
79
|
+
<sonic-modal-actions>
|
|
80
|
+
<sonic-button hideModal minWidth="8rem">Decline</sonic-button>
|
|
81
|
+
<sonic-button hideModal minWidth="8rem" type="success">Accept</sonic-button>
|
|
82
|
+
</sonic-modal-actions>
|
|
83
|
+
</sonic-modal>
|
|
84
|
+
</code></pre>
|
|
85
|
+
<h2 id="custom-dimensions">Custom dimensions</h2>
|
|
86
|
+
<p>Set <strong><code>width</code></strong> / <strong><code>height</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>maxHeight</code></strong> (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use <strong><code>rounded="none"</code></strong> for edge-to-edge media.</p>
|
|
87
|
+
<pre><code><sonic-button onclick="document.getElementById('CustomWidth').show()">Image preview</sonic-button>
|
|
88
|
+
<sonic-modal
|
|
89
|
+
rounded="none"
|
|
90
|
+
maxHeight="50vh"
|
|
91
|
+
maxWidth="90vw"
|
|
92
|
+
width="100%"
|
|
93
|
+
height="100%"
|
|
94
|
+
id="CustomWidth"
|
|
95
|
+
>
|
|
96
|
+
<sonic-image
|
|
97
|
+
cover
|
|
98
|
+
objectPosition="center 20%"
|
|
99
|
+
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
100
|
+
alt="View from an airplane window"
|
|
101
|
+
></sonic-image>
|
|
102
|
+
</sonic-modal>
|
|
103
|
+
</code></pre>
|
|
104
|
+
<h2 id="fullscreen">Fullscreen</h2>
|
|
105
|
+
<p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
|
|
106
|
+
<pre><code><sonic-button onclick="document.getElementById('Fullscreen').show()">Fullscreen</sonic-button>
|
|
107
|
+
<sonic-modal fullscreen id="Fullscreen">
|
|
108
|
+
<sonic-image
|
|
109
|
+
cover
|
|
110
|
+
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
111
|
+
alt="View from an airplane window"
|
|
112
|
+
></sonic-image>
|
|
113
|
+
</sonic-modal>
|
|
114
|
+
</code></pre>
|
|
115
|
+
<h2 id="programmatic-creation">Programmatic creation</h2>
|
|
116
|
+
<p>Use <strong><code>Modal.create(options)</code></strong> when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest <strong><code>sonic-theme</code></strong> pop container (same as declarative modals), opened automatically, and returns the <strong><code>sonic-modal</code></strong> instance. Set <strong><code>removeOnHide: true</code></strong> to detach it from the DOM after close. In the browser, <strong><code>window.SonicModal</code></strong> is the same class after the module loads.</p>
|
|
117
|
+
<p>Pass <strong><code>title</code></strong> / <strong><code>subtitle</code></strong> / <strong><code>content</code></strong> / <strong><code>actions</code></strong> as HTML strings (or Lit template results from application code). Put <strong><code>hideModal</code></strong> on action buttons in the <strong><code>actions</code></strong> string so clicks close the dialog.</p>
|
|
118
|
+
<pre><code><sonic-button
|
|
119
|
+
onclick="window.SonicModal.create({
|
|
120
|
+
title: 'Send invite?',
|
|
121
|
+
subtitle: 'The recipient can join immediately.',
|
|
122
|
+
content: 'We will email an invitation to alex@example.com.',
|
|
123
|
+
actions: '&lt;sonic-button hideModal minWidth=\'8rem\'&gt;Cancel&lt;/sonic-button&gt;&lt;sonic-button hideModal minWidth=\'8rem\' type=\'success\'&gt;Send&lt;/sonic-button&gt;',
|
|
124
|
+
removeOnHide: true
|
|
125
|
+
})"
|
|
126
|
+
>
|
|
127
|
+
Open programmatic modal
|
|
128
|
+
</sonic-button>
|
|
129
|
+
</code></pre>
|
|
130
|
+
<pre><code class="language-javascript">import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
|
|
131
|
+
|
|
132
|
+
const modal = Modal.create({
|
|
133
|
+
title: "Delete project?",
|
|
134
|
+
subtitle: "This cannot be undone.",
|
|
135
|
+
content: "<p>All files in <strong>Acme HQ</strong> will be removed.</p>",
|
|
136
|
+
actions: `
|
|
137
|
+
<sonic-button hideModal minWidth="8rem">Cancel</sonic-button>
|
|
138
|
+
<sonic-button hideModal minWidth="8rem" type="danger">Delete</sonic-button>
|
|
139
|
+
`,
|
|
140
|
+
removeOnHide: true,
|
|
141
|
+
forceAction: false,
|
|
142
|
+
maxWidth: "min(100vw, 28rem)",
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
modal.addEventListener("hidden", () => {
|
|
146
|
+
console.log("Modal removed from the DOM");
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// Or close from script: await modal.hide(); await modal.dispose();
|
|
150
|
+
</code></pre>
|
|
151
|
+
<h2 id="api-reference">API reference</h2>
|
|
152
|
+
<h3 id="sonic-modal"><code>sonic-modal</code></h3>
|
|
153
|
+
<table>
|
|
154
|
+
<thead>
|
|
155
|
+
<tr>
|
|
156
|
+
<th>Attribute</th>
|
|
157
|
+
<th>Values</th>
|
|
158
|
+
<th>Description</th>
|
|
159
|
+
</tr>
|
|
160
|
+
</thead>
|
|
161
|
+
<tbody><tr>
|
|
162
|
+
<td><code>align</code></td>
|
|
163
|
+
<td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
|
|
164
|
+
<td>Align title and slotted content</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td><code>maxWidth</code></td>
|
|
168
|
+
<td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
|
|
169
|
+
<td>Dialog max width</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td><code>maxHeight</code></td>
|
|
173
|
+
<td>CSS length (default <code>90vh</code>)</td>
|
|
174
|
+
<td>Scrollable body max height</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td><code>width</code></td>
|
|
178
|
+
<td>CSS length (default <code>100%</code>)</td>
|
|
179
|
+
<td>Dialog width</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code>height</code></td>
|
|
183
|
+
<td>CSS length (default <code>fit-content</code>)</td>
|
|
184
|
+
<td>Dialog height</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td><code>paddingX</code> · <code>paddingY</code></td>
|
|
188
|
+
<td>CSS length</td>
|
|
189
|
+
<td>Override content padding (<code>--sc-modal-px</code> / <code>--sc-modal-py</code>)</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td><code>zIndex</code></td>
|
|
193
|
+
<td>CSS number</td>
|
|
194
|
+
<td>Stacking order (default <code>990</code>)</td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td><code>effect</code></td>
|
|
198
|
+
<td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
|
|
199
|
+
<td>Open/close animation</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td><code>fullscreen</code></td>
|
|
203
|
+
<td>boolean</td>
|
|
204
|
+
<td>Full viewport; no backdrop</td>
|
|
205
|
+
</tr>
|
|
206
|
+
<tr>
|
|
207
|
+
<td><code>forceAction</code></td>
|
|
208
|
+
<td>boolean</td>
|
|
209
|
+
<td>Disable overlay, Escape, and default close button</td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td><code>noCloseButton</code></td>
|
|
213
|
+
<td>boolean</td>
|
|
214
|
+
<td>Hide built-in close when not <strong><code>forceAction</code></strong></td>
|
|
215
|
+
</tr>
|
|
216
|
+
<tr>
|
|
217
|
+
<td><code>closeButtonType</code></td>
|
|
218
|
+
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
219
|
+
<td>Style of built-in close</td>
|
|
220
|
+
</tr>
|
|
221
|
+
<tr>
|
|
222
|
+
<td><code>visible</code></td>
|
|
223
|
+
<td>boolean</td>
|
|
224
|
+
<td>When toggled, opens or closes the dialog</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr>
|
|
227
|
+
<td><code>removeOnHide</code></td>
|
|
228
|
+
<td>boolean</td>
|
|
229
|
+
<td>Remove element from DOM after close</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr>
|
|
232
|
+
<td><code>removeHashOnHide</code></td>
|
|
233
|
+
<td>boolean</td>
|
|
234
|
+
<td>Clear URL hash on close</td>
|
|
235
|
+
</tr>
|
|
236
|
+
<tr>
|
|
237
|
+
<td><code>closeOnLocationChange</code></td>
|
|
238
|
+
<td>boolean</td>
|
|
239
|
+
<td>Close when app location changes</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td><code>resetDataProviderOnHide</code></td>
|
|
243
|
+
<td>string</td>
|
|
244
|
+
<td>Reset named <strong><code>formDataProvider</code></strong> on close</td>
|
|
245
|
+
</tr>
|
|
246
|
+
<tr>
|
|
247
|
+
<td><code>rounded</code></td>
|
|
248
|
+
<td><code>none</code></td>
|
|
249
|
+
<td>Square dialog corners (useful for full-bleed media)</td>
|
|
250
|
+
</tr>
|
|
251
|
+
</tbody></table>
|
|
252
|
+
<table>
|
|
253
|
+
<thead>
|
|
254
|
+
<tr>
|
|
255
|
+
<th>Slot</th>
|
|
256
|
+
<th>Description</th>
|
|
257
|
+
</tr>
|
|
258
|
+
</thead>
|
|
259
|
+
<tbody><tr>
|
|
260
|
+
<td><em>(default)</em></td>
|
|
261
|
+
<td>Additional markup alongside structured children</td>
|
|
262
|
+
</tr>
|
|
263
|
+
</tbody></table>
|
|
264
|
+
<table>
|
|
265
|
+
<thead>
|
|
266
|
+
<tr>
|
|
267
|
+
<th>Event</th>
|
|
268
|
+
<th>Description</th>
|
|
269
|
+
</tr>
|
|
270
|
+
</thead>
|
|
271
|
+
<tbody><tr>
|
|
272
|
+
<td><code>show</code></td>
|
|
273
|
+
<td>Fired when open animation completes</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td><code>hide</code></td>
|
|
277
|
+
<td>Fired when close starts</td>
|
|
278
|
+
</tr>
|
|
279
|
+
<tr>
|
|
280
|
+
<td><code>hidden</code></td>
|
|
281
|
+
<td>Fired when close finishes</td>
|
|
282
|
+
</tr>
|
|
283
|
+
</tbody></table>
|
|
284
|
+
<p>Methods: <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> · <strong><code>dispose()</code></strong> (hide and remove). Static <strong><code>Modal.create(options)</code></strong> appends a modal to the theme pop container and opens it. <strong><code>options</code></strong> / <strong><code>styleSheet</code></strong> are JavaScript-only.</p>
|
|
285
|
+
<h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code></h3>
|
|
286
|
+
<table>
|
|
287
|
+
<thead>
|
|
288
|
+
<tr>
|
|
289
|
+
<th>Slot</th>
|
|
290
|
+
<th>Description</th>
|
|
291
|
+
</tr>
|
|
292
|
+
</thead>
|
|
293
|
+
<tbody><tr>
|
|
294
|
+
<td><em>(default)</em></td>
|
|
295
|
+
<td>Title, subtitle, or main body content</td>
|
|
296
|
+
</tr>
|
|
297
|
+
</tbody></table>
|
|
298
|
+
<h3 id="sonic-modal-actions"><code>sonic-modal-actions</code></h3>
|
|
299
|
+
<table>
|
|
300
|
+
<thead>
|
|
301
|
+
<tr>
|
|
302
|
+
<th>Slot</th>
|
|
303
|
+
<th>Description</th>
|
|
304
|
+
</tr>
|
|
305
|
+
</thead>
|
|
306
|
+
<tbody><tr>
|
|
307
|
+
<td><em>(default)</em></td>
|
|
308
|
+
<td>Footer actions (typically <strong><code>sonic-button</code></strong>)</td>
|
|
309
|
+
</tr>
|
|
310
|
+
</tbody></table>
|
|
311
|
+
<p>Put <strong><code>hideModal</code></strong> on a <strong><code>sonic-button</code></strong> to close the parent modal on click. Ancestor <strong><code>formDataProvider</code></strong> on this element is inherited by child form controls.</p>
|
|
312
|
+
<h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
|
|
313
|
+
<p>Rendered automatically unless <strong><code>forceAction</code></strong> or <strong><code>noCloseButton</code></strong> is set. Calls <strong><code>hide()</code></strong> on the parent modal.</p>
|
|
314
|
+
<table>
|
|
315
|
+
<thead>
|
|
316
|
+
<tr>
|
|
317
|
+
<th>Attribute</th>
|
|
318
|
+
<th>Values</th>
|
|
319
|
+
<th>Description</th>
|
|
320
|
+
</tr>
|
|
321
|
+
</thead>
|
|
322
|
+
<tbody><tr>
|
|
323
|
+
<td><code>type</code></td>
|
|
324
|
+
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
325
|
+
<td>Close button color</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr>
|
|
328
|
+
<td><code>reset</code></td>
|
|
329
|
+
<td>string</td>
|
|
330
|
+
<td>Passed to inner <strong><code>sonic-button</code></strong> <strong><code>reset</code></strong></td>
|
|
331
|
+
</tr>
|
|
332
|
+
<tr>
|
|
333
|
+
<td><code>translation</code></td>
|
|
334
|
+
<td>UI label object</td>
|
|
335
|
+
<td>Overrides default close <strong><code>aria-label</code></strong></td>
|
|
336
|
+
</tr>
|
|
337
|
+
</tbody></table>
|
|
338
|
+
|
|
339
|
+
</article>
|
|
340
|
+
</main>
|
|
341
|
+
</body>
|
|
342
|
+
</html>
|