@supersoniks/concorde 5.1.1 → 5.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +153 -0
- package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
- package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
- package/.agents/skills/concorde-docs/templates/guide.md +25 -0
- package/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +4 -4
- package/ai/README.md +29 -41
- package/ai/skills/concorde/SKILL.md +54 -324
- package/ai/skills/concorde/rules/composition.md +32 -0
- package/ai/skills/concorde/rules/data.md +47 -0
- package/ai/skills/concorde/rules/http.md +25 -0
- package/ai/skills/concorde/rules/lists-forms.md +35 -0
- package/ai/skills/concorde/rules/styling.md +46 -0
- package/ai/skills/concorde/rules/troubleshooting.md +45 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +21 -21
- package/concorde-core.es.js +977 -980
- package/custom-elements-manifest.public.config.mjs +8 -0
- package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
- package/dist/concorde-core.bundle.js +21 -21
- package/dist/concorde-core.es.js +977 -980
- package/dist/docs-mock-api-sw.js +58 -223
- package/dist/docs-mock-api-sw.js.map +4 -4
- package/dist/img/concorde/plane_01.jpg +0 -0
- package/dist/img/concorde/plane_02.jpg +0 -0
- package/dist/img/concorde/plane_03.jpg +0 -0
- package/dist/img/concorde/plane_04.jpg +0 -0
- package/dist/img/concorde/plane_05.jpg +0 -0
- package/dist/img/concorde/plane_06.jpg +0 -0
- package/dist/img/concorde/plane_07.jpg +0 -0
- package/dist/img/concorde/plane_08.jpg +0 -0
- package/dist/img/concorde/plane_09.jpg +0 -0
- package/dist/img/concorde/plane_10.jpg +0 -0
- package/dist/img/concorde/plane_11.jpg +0 -0
- package/dist/img/concorde/plane_12.jpg +0 -0
- package/dist/img/concorde/plane_13.jpg +0 -0
- package/dist/img/og-concorde.jpg +0 -0
- package/dist/robots.txt +11 -10
- package/docs/.htaccess +82 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/about.html +111 -0
- package/docs/about.md +22 -0
- package/docs/assets/{index-Bb-_LRyY.js → index-6sS76xWj.js} +2625 -3158
- package/docs/assets/index-DkdPbH0F.css +1 -0
- package/docs/core/components/functional/date/date.html +211 -0
- package/docs/core/components/functional/date/date.md +150 -0
- package/docs/core/components/functional/fetch/fetch.html +180 -0
- package/docs/core/components/functional/fetch/fetch.md +108 -0
- package/docs/core/components/functional/if/if.html +65 -0
- package/docs/core/components/functional/if/if.md +34 -0
- package/docs/core/components/functional/jsonata/jsonata.html +110 -0
- package/docs/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/core/components/functional/list/list.html +200 -0
- package/docs/core/components/functional/list/list.md +125 -0
- package/docs/core/components/functional/mix/mix.html +78 -0
- package/docs/core/components/functional/mix/mix.md +46 -0
- package/docs/core/components/functional/queue/queue.html +155 -0
- package/docs/core/components/functional/queue/queue.md +51 -0
- package/docs/core/components/functional/router/router.html +154 -0
- package/docs/core/components/functional/router/router.md +93 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/core/components/functional/sdui/sdui.html +397 -0
- package/docs/core/components/functional/sdui/sdui.md +307 -0
- package/docs/core/components/functional/states/states.html +141 -0
- package/docs/core/components/functional/states/states.md +112 -0
- package/docs/core/components/functional/submit/submit.html +178 -0
- package/docs/core/components/functional/submit/submit.md +106 -0
- package/docs/core/components/functional/subscriber/subscriber.html +68 -0
- package/docs/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/core/components/functional/translation/translation.html +60 -0
- package/docs/core/components/functional/translation/translation.md +38 -0
- package/docs/core/components/functional/value/value.html +81 -0
- package/docs/core/components/functional/value/value.md +47 -0
- package/docs/core/components/ui/alert/alert.html +201 -0
- package/docs/core/components/ui/alert/alert.md +186 -0
- package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
- package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/core/components/ui/badge/badge.html +197 -0
- package/docs/core/components/ui/badge/badge.md +181 -0
- package/docs/core/components/ui/button/button.html +309 -0
- package/docs/core/components/ui/button/button.md +216 -0
- package/docs/core/components/ui/captcha/captcha.html +80 -0
- package/docs/core/components/ui/captcha/captcha.md +56 -0
- package/docs/core/components/ui/card/card.html +254 -0
- package/docs/core/components/ui/card/card.md +215 -0
- package/docs/core/components/ui/divider/divider.html +144 -0
- package/docs/core/components/ui/divider/divider.md +126 -0
- package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
- package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
- package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
- package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
- package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/core/components/ui/form/input/input.html +235 -0
- package/docs/core/components/ui/form/input/input.md +142 -0
- package/docs/core/components/ui/form/radio/radio.html +144 -0
- package/docs/core/components/ui/form/radio/radio.md +78 -0
- package/docs/core/components/ui/form/select/select.html +178 -0
- package/docs/core/components/ui/form/select/select.md +86 -0
- package/docs/core/components/ui/form/switch/switch.html +146 -0
- package/docs/core/components/ui/form/switch/switch.md +80 -0
- package/docs/core/components/ui/form/textarea/textarea.html +162 -0
- package/docs/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/core/components/ui/group/group.html +113 -0
- package/docs/core/components/ui/group/group.md +77 -0
- package/docs/core/components/ui/icon/icon.html +223 -0
- package/docs/core/components/ui/icon/icon.md +214 -0
- package/docs/core/components/ui/image/image.html +194 -0
- package/docs/core/components/ui/image/image.md +167 -0
- package/docs/core/components/ui/link/link.html +101 -0
- package/docs/core/components/ui/link/link.md +81 -0
- package/docs/core/components/ui/loader/loader.html +114 -0
- package/docs/core/components/ui/loader/loader.md +87 -0
- package/docs/core/components/ui/menu/menu.html +395 -0
- package/docs/core/components/ui/menu/menu.md +370 -0
- package/docs/core/components/ui/modal/modal.html +324 -0
- package/docs/core/components/ui/modal/modal.md +211 -0
- package/docs/core/components/ui/pop/pop.html +250 -0
- package/docs/core/components/ui/pop/pop.md +216 -0
- package/docs/core/components/ui/progress/progress.html +132 -0
- package/docs/core/components/ui/progress/progress.md +109 -0
- package/docs/core/components/ui/table/table.html +333 -0
- package/docs/core/components/ui/table/table.md +267 -0
- package/docs/core/components/ui/theme/theme.html +116 -0
- package/docs/core/components/ui/theme/theme.md +97 -0
- package/docs/core/components/ui/toast/toast.html +185 -0
- package/docs/core/components/ui/toast/toast.md +147 -0
- package/docs/core/components/ui/tooltip/tooltip.html +112 -0
- package/docs/core/components/ui/tooltip/tooltip.md +89 -0
- package/docs/custom-elements.json +16559 -0
- package/docs/docs/decorators/ancestor-attribute.html +71 -0
- package/docs/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/docs/decorators/auto-subscribe.html +61 -0
- package/docs/docs/decorators/auto-subscribe.md +40 -0
- package/docs/docs/decorators/bind.html +87 -0
- package/docs/docs/decorators/bind.md +76 -0
- package/docs/docs/decorators/get.html +166 -0
- package/docs/docs/decorators/get.md +160 -0
- package/docs/docs/decorators/handle.html +139 -0
- package/docs/docs/decorators/handle.md +119 -0
- package/docs/docs/decorators/on-assign.html +72 -0
- package/docs/docs/decorators/on-assign.md +63 -0
- package/docs/docs/decorators/patch.html +76 -0
- package/docs/docs/decorators/patch.md +44 -0
- package/docs/docs/decorators/post.html +150 -0
- package/docs/docs/decorators/post.md +134 -0
- package/docs/docs/decorators/publish.html +74 -0
- package/docs/docs/decorators/publish.md +56 -0
- package/docs/docs/decorators/put.html +83 -0
- package/docs/docs/decorators/put.md +51 -0
- package/docs/docs/decorators/subscribe.html +91 -0
- package/docs/docs/decorators/subscribe.md +87 -0
- package/docs/docs/decorators/wait-for-ancestors.html +82 -0
- package/docs/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/docs/directives/sub.html +79 -0
- package/docs/docs/directives/sub.md +75 -0
- package/docs/docs/directives/t.html +91 -0
- package/docs/docs/directives/t.md +73 -0
- package/docs/docs/getting-started/ai-agents.html +130 -0
- package/docs/docs/getting-started/ai-agents.md +50 -0
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/create-a-component.html +108 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/create-a-component.md +3 -6
- package/docs/docs/getting-started/dataFlow.html +174 -0
- package/{src/docs/_core-concept → docs/docs/getting-started}/dataFlow.md +18 -19
- package/docs/docs/getting-started/installation.html +69 -0
- package/docs/docs/getting-started/installation.md +36 -0
- package/docs/docs/getting-started/my-first-component.html +180 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/my-first-component.md +5 -14
- package/docs/docs/getting-started/start.html +47 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
- package/docs/docs/getting-started/theming.html +334 -0
- package/docs/docs/index.html +99 -0
- package/docs/docs/misc/api-configuration.html +149 -0
- package/{src/docs/_misc → docs/docs/misc}/api-configuration.md +10 -12
- package/docs/docs/misc/dataProviderKey.html +136 -0
- package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
- package/docs/docs/misc/docs-mock-api.html +155 -0
- package/{src/docs/_misc → docs/docs/misc}/docs-mock-api.md +12 -13
- package/docs/docs/misc/dynamic-path.html +181 -0
- package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
- package/docs/docs/misc/endpoint.html +51 -0
- package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
- package/docs/docs/misc/html-integration.html +45 -0
- package/{src/docs/_misc → docs/docs/misc}/html-integration.md +4 -5
- package/docs/docs-mock-api-sw.js +58 -223
- package/docs/docs-mock-api-sw.js.map +4 -4
- package/docs/hubs/decorators.html +438 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +367 -0
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +28 -0
- package/docs/img/concorde/plane_01.jpg +0 -0
- package/docs/img/concorde/plane_02.jpg +0 -0
- package/docs/img/concorde/plane_03.jpg +0 -0
- package/docs/img/concorde/plane_04.jpg +0 -0
- package/docs/img/concorde/plane_05.jpg +0 -0
- package/docs/img/concorde/plane_06.jpg +0 -0
- package/docs/img/concorde/plane_07.jpg +0 -0
- package/docs/img/concorde/plane_08.jpg +0 -0
- package/docs/img/concorde/plane_09.jpg +0 -0
- package/docs/img/concorde/plane_10.jpg +0 -0
- package/docs/img/concorde/plane_11.jpg +0 -0
- package/docs/img/concorde/plane_12.jpg +0 -0
- package/docs/img/concorde/plane_13.jpg +0 -0
- package/docs/img/og-concorde.jpg +0 -0
- package/docs/index.html +184 -68
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +5779 -0
- package/docs/llms.txt +108 -0
- package/docs/privacy.html +122 -0
- package/docs/privacy.md +32 -0
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +243 -0
- package/docs/src/core/components/functional/date/date.md +150 -0
- package/docs/src/core/components/functional/fetch/fetch.md +108 -0
- package/docs/src/core/components/functional/if/if.md +34 -0
- package/docs/src/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/src/core/components/functional/list/list.md +125 -0
- package/docs/src/core/components/functional/mix/mix.md +46 -0
- package/docs/src/core/components/functional/queue/queue.md +51 -0
- package/docs/src/core/components/functional/router/router.md +93 -0
- package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/docs/src/core/components/functional/sdui/default-library.json +108 -0
- package/docs/src/core/components/functional/sdui/example.json +32 -0
- package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/src/core/components/functional/sdui/sdui.md +307 -0
- package/docs/src/core/components/functional/states/states.md +112 -0
- package/docs/src/core/components/functional/submit/submit.md +106 -0
- package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/src/core/components/functional/translation/translation.md +38 -0
- package/docs/src/core/components/functional/value/value.md +47 -0
- package/docs/src/core/components/ui/alert/alert.md +186 -0
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +181 -0
- package/docs/src/core/components/ui/button/button.md +216 -0
- package/docs/src/core/components/ui/captcha/captcha.md +56 -0
- package/docs/src/core/components/ui/card/card.md +215 -0
- package/docs/src/core/components/ui/divider/divider.md +126 -0
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +125 -0
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +161 -0
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +98 -0
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -0
- package/docs/src/core/components/ui/form/input/input.md +142 -0
- package/docs/src/core/components/ui/form/radio/radio.md +78 -0
- package/docs/src/core/components/ui/form/select/select.md +86 -0
- package/docs/src/core/components/ui/form/switch/switch.md +80 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +82 -0
- package/docs/src/core/components/ui/group/group.md +77 -0
- package/docs/src/core/components/ui/icon/icon.md +214 -0
- package/docs/src/core/components/ui/icon/icons.json +1 -0
- package/docs/src/core/components/ui/image/image.md +167 -0
- package/docs/src/core/components/ui/link/link.md +81 -0
- package/docs/src/core/components/ui/loader/loader.md +87 -0
- package/docs/src/core/components/ui/menu/menu.md +370 -0
- package/docs/src/core/components/ui/modal/modal.md +211 -0
- package/docs/src/core/components/ui/pop/pop.md +216 -0
- package/docs/src/core/components/ui/progress/progress.md +109 -0
- package/docs/src/core/components/ui/table/table.md +267 -0
- package/docs/src/core/components/ui/theme/theme.md +97 -0
- package/docs/src/core/components/ui/toast/toast.md +147 -0
- package/docs/src/core/components/ui/tooltip/tooltip.md +89 -0
- package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/src/docs/decorators/auto-subscribe.md +40 -0
- package/docs/src/docs/decorators/bind.md +76 -0
- package/docs/src/docs/decorators/get.md +160 -0
- package/docs/src/docs/decorators/handle.md +119 -0
- package/docs/src/docs/decorators/on-assign.md +63 -0
- package/docs/src/docs/decorators/patch.md +44 -0
- package/docs/src/docs/decorators/post.md +134 -0
- package/docs/src/docs/decorators/publish.md +56 -0
- package/docs/src/docs/decorators/put.md +51 -0
- package/docs/src/docs/decorators/subscribe.md +87 -0
- package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/src/docs/directives/sub.md +75 -0
- package/docs/src/docs/directives/t.md +73 -0
- package/docs/src/docs/getting-started/ai-agents.md +50 -0
- package/docs/src/docs/getting-started/components.md +5 -0
- package/docs/src/docs/getting-started/create-a-component.md +136 -0
- package/docs/src/docs/getting-started/dataFlow.md +87 -0
- package/docs/src/docs/getting-started/installation.md +36 -0
- package/docs/src/docs/getting-started/my-first-component.md +227 -0
- package/docs/src/docs/getting-started/start.md +35 -0
- package/docs/src/docs/getting-started/theming.md +253 -0
- package/docs/src/docs/misc/api-configuration.md +79 -0
- package/docs/src/docs/misc/dataProviderKey.md +168 -0
- package/docs/src/docs/misc/docs-mock-api.md +62 -0
- package/docs/src/docs/misc/dynamic-path.md +71 -0
- package/docs/src/docs/misc/endpoint.md +45 -0
- package/docs/src/docs/misc/html-integration.md +14 -0
- package/docs/src/docs/search/docs-search.json +10332 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.json +1359 -0
- package/index.html +157 -5
- package/package.json +8 -4
- package/public/docs-mock-api-sw.js +58 -223
- package/public/docs-mock-api-sw.js.map +4 -4
- package/public/img/concorde/plane_01.jpg +0 -0
- package/public/img/concorde/plane_02.jpg +0 -0
- package/public/img/concorde/plane_03.jpg +0 -0
- package/public/img/concorde/plane_04.jpg +0 -0
- package/public/img/concorde/plane_05.jpg +0 -0
- package/public/img/concorde/plane_06.jpg +0 -0
- package/public/img/concorde/plane_07.jpg +0 -0
- package/public/img/concorde/plane_08.jpg +0 -0
- package/public/img/concorde/plane_09.jpg +0 -0
- package/public/img/concorde/plane_10.jpg +0 -0
- package/public/img/concorde/plane_11.jpg +0 -0
- package/public/img/concorde/plane_12.jpg +0 -0
- package/public/img/concorde/plane_13.jpg +0 -0
- package/public/img/og-concorde.jpg +0 -0
- package/public/robots.txt +11 -10
- package/scripts/ai-init.mjs +104 -379
- package/scripts/ai-init.test.mjs +81 -239
- package/scripts/docs-markdown-vite-plugin.ts +43 -0
- package/scripts/docs-public-url.mjs +56 -0
- package/scripts/docs.htaccess +82 -0
- package/scripts/generate-cem.mjs +244 -0
- package/scripts/generate-cem.test.mjs +122 -0
- package/scripts/generate-crawl-docs.mjs +233 -118
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/generate-sdui-catalog.mjs +11 -10
- package/scripts/post-build-docs.js +37 -50
- package/scripts/pre-publish.mjs +2 -1
- package/scripts/site-pages.mjs +212 -0
- package/scripts/site-pages.test.mjs +116 -0
- package/site-pages/about.md +22 -0
- package/site-pages/privacy.md +32 -0
- package/src/core/components/functional/date/date.md +91 -231
- package/src/core/components/functional/fetch/fetch.md +66 -83
- package/src/core/components/functional/if/if.md +28 -3
- package/src/core/components/functional/jsonata/jsonata.md +42 -37
- package/src/core/components/functional/list/list.md +103 -43
- package/src/core/components/functional/mix/mix.md +31 -26
- package/src/core/components/functional/queue/queue.demo.ts +10 -7
- package/src/core/components/functional/queue/queue.md +40 -61
- package/src/core/components/functional/router/router.demo.ts +16 -16
- package/src/core/components/functional/router/router.md +64 -65
- package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
- package/src/core/components/functional/sdui/component-catalog.json +1 -1
- package/src/core/components/functional/sdui/example.json +19 -86
- package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
- package/src/core/components/functional/sdui/sdui.md +187 -358
- package/src/core/components/functional/states/states.demo.ts +21 -22
- package/src/core/components/functional/states/states.md +86 -61
- package/src/core/components/functional/states/states.ts +1 -1
- package/src/core/components/functional/submit/submit.md +64 -72
- package/src/core/components/functional/translation/translation.md +38 -0
- package/src/core/components/functional/value/value.md +34 -22
- package/src/core/components/ui/alert/alert.md +48 -58
- package/src/core/components/ui/badge/badge.md +27 -34
- package/src/core/components/ui/button/button.md +139 -106
- package/src/core/components/ui/captcha/captcha.md +17 -32
- package/src/core/components/ui/card/card.md +6 -6
- package/src/core/components/ui/divider/divider.md +8 -11
- package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
- package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
- package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
- package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
- package/src/core/components/ui/form/input/input.md +95 -95
- package/src/core/components/ui/form/radio/radio.md +55 -34
- package/src/core/components/ui/form/select/select.md +60 -45
- package/src/core/components/ui/form/switch/switch.md +57 -34
- package/src/core/components/ui/form/textarea/textarea.md +55 -38
- package/src/core/components/ui/group/group.md +35 -33
- package/src/core/components/ui/icon/icon.md +4 -4
- package/src/core/components/ui/image/image.md +41 -107
- package/src/core/components/ui/link/link.md +6 -6
- package/src/core/components/ui/loader/loader.md +30 -55
- package/src/core/components/ui/menu/menu.md +27 -27
- package/src/core/components/ui/modal/modal.md +72 -96
- package/src/core/components/ui/pop/pop.md +80 -158
- package/src/core/components/ui/progress/progress.md +2 -2
- package/src/core/components/ui/table/table.md +91 -255
- package/src/core/components/ui/theme/theme.md +11 -36
- package/src/core/components/ui/toast/toast.md +48 -117
- package/src/core/components/ui/tooltip/tooltip.md +27 -62
- package/src/core/decorators/subscriber/bind.ts +9 -14
- package/src/core/utils/LocationHandler.spec.ts +80 -0
- package/src/core/utils/LocationHandler.ts +5 -9
- package/src/docs/components/docs-demo-sources.ts +55 -140
- package/src/docs/components/docs-lit-demo.ts +1 -3
- package/src/docs/components/docs-source-link.ts +0 -82
- package/src/docs/decorators/ancestor-attribute.md +59 -0
- package/src/docs/decorators/auto-subscribe.md +40 -0
- package/src/docs/decorators/bind.md +76 -0
- package/src/docs/decorators/get.md +160 -0
- package/src/docs/decorators/handle.md +119 -0
- package/src/docs/decorators/on-assign.md +63 -0
- package/src/docs/decorators/patch.md +44 -0
- package/src/docs/decorators/post.md +134 -0
- package/src/docs/decorators/publish.md +56 -0
- package/src/docs/decorators/put.md +51 -0
- package/src/docs/decorators/subscribe.md +87 -0
- package/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/src/docs/directives/sub.md +75 -0
- package/src/docs/directives/t.md +73 -0
- package/src/docs/docs-location.spec.ts +56 -0
- package/src/docs/docs-location.ts +133 -32
- package/src/docs/docs.ts +1 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +83 -135
- package/src/docs/example/decorators-demo-geo.ts +30 -19
- package/src/docs/example/decorators-demo-post.ts +88 -186
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
- package/src/docs/example/decorators-demo.ts +85 -98
- package/src/docs/example/docs-api-config-demos.ts +19 -20
- package/src/docs/example/docs-flight-demos.ts +147 -0
- package/src/docs/example/docs-jsonata-demos.ts +52 -52
- package/src/docs/example/docs-list-demos.ts +43 -123
- package/src/docs/example/docs-provider-keys.ts +21 -28
- package/src/docs/example/docs-queue-demos.ts +37 -77
- package/src/docs/example/docs-router-demos.ts +20 -25
- package/src/docs/example/docs-submit-demos.ts +48 -48
- package/src/docs/example/docs-toggle-demos.ts +4 -3
- package/src/docs/getting-started/ai-agents.md +50 -0
- package/src/docs/getting-started/components.md +5 -0
- package/src/docs/getting-started/create-a-component.md +136 -0
- package/src/docs/getting-started/dataFlow.md +87 -0
- package/src/docs/getting-started/installation.md +36 -0
- package/src/docs/getting-started/my-first-component.md +227 -0
- package/src/docs/getting-started/start.md +35 -0
- package/src/docs/getting-started/theming.md +253 -0
- package/src/docs/header/header.ts +11 -6
- package/src/docs/home/catalog.ts +1 -1
- package/src/docs/home/home.ts +20 -11
- package/src/docs/layout.ts +12 -13
- package/src/docs/misc/api-configuration.md +79 -0
- package/src/docs/misc/dataProviderKey.md +168 -0
- package/src/docs/misc/docs-mock-api.md +62 -0
- package/src/docs/misc/dynamic-path.md +71 -0
- package/src/docs/misc/endpoint.md +45 -0
- package/src/docs/misc/html-integration.md +14 -0
- package/src/docs/mock-api/api-config-mock.ts +5 -0
- package/src/docs/mock-api/fixtures.ts +0 -278
- package/src/docs/mock-api/flights.ts +89 -0
- package/src/docs/mock-api/router.ts +3 -4
- package/src/docs/mock-api/urls.ts +1 -2
- package/src/docs/navigation/navigation.ts +82 -103
- package/src/docs/navigation/toc.ts +7 -4
- package/src/docs/search/docs-search.json +2804 -5024
- package/src/docs/search/markdown-renderer.ts +31 -8
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- package/src/docs/tailwind/css/docs/content.css +4 -5
- package/src/tsconfig.json +11 -5
- package/src/tsconfig.tsbuildinfo +1 -1
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- package/ai/AGENTS.md +0 -56
- package/ai/cursor/rules/concorde-menu.mdc +0 -15
- package/ai/cursor/rules/concorde-scope.mdc +0 -14
- package/ai/cursor/rules/concorde-theme.mdc +0 -13
- package/ai/cursor/rules/concorde.mdc +0 -66
- package/ai/jetbrains/rules/concorde.md +0 -53
- package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
- package/ai/skills/concorde-imports/SKILL.md +0 -78
- package/ai/skills/concorde-menu/SKILL.md +0 -74
- package/ai/skills/concorde-scope/SKILL.md +0 -70
- package/ai/skills/concorde-theme/SKILL.md +0 -57
- package/docs/assets/index-CD4WyL6o.css +0 -1
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/src/docs/_core-concept/overview.md +0 -57
- package/src/docs/_core-concept/subscriber.md +0 -75
- package/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/src/docs/_decorators/auto-subscribe.md +0 -202
- package/src/docs/_decorators/bind.md +0 -167
- package/src/docs/_decorators/get.md +0 -162
- package/src/docs/_decorators/handle.md +0 -175
- package/src/docs/_decorators/on-assign.md +0 -390
- package/src/docs/_decorators/patch.md +0 -70
- package/src/docs/_decorators/post.md +0 -146
- package/src/docs/_decorators/publish.md +0 -55
- package/src/docs/_decorators/put.md +0 -70
- package/src/docs/_decorators/subscribe.md +0 -100
- package/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/src/docs/_directives/sub.md +0 -91
- package/src/docs/_getting-started/ai-agents.md +0 -76
- package/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/src/docs/_getting-started/concorde-outside.md +0 -33
- package/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/src/docs/_getting-started/pubsub.md +0 -37
- package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
- package/src/docs/example/docs-joke-demos.ts +0 -297
- /package/{src/docs/_getting-started → docs/docs/getting-started}/components.md +0 -0
- /package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +0 -0
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/toast" data-doc-id="core/components/ui/toast/toast">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Toast — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call SonicToast.add() (also window.SonicToast); the sonic-toast host is created on first use. Use label for a heading">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), window.SonicToast, label, preserve, status, text, title">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/toast/toast">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/toast">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/toast.md">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<header>
|
|
15
|
+
<p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/toast">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
|
|
16
|
+
</header>
|
|
17
|
+
<main>
|
|
18
|
+
<article>
|
|
19
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call SonicToast.add() (also window.SonicToast); the sonic-toast host is created on first use. Use label for a heading <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), window.SonicToast, label, preserve, status, text, title. URL: <a href="https://concorde.supersoniks.org/core/components/ui/toast">https://concorde.supersoniks.org/core/components/ui/toast</a>.</span></p>
|
|
20
|
+
<h1 id="toast">Toast</h1>
|
|
21
|
+
<p>Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call <strong><code>SonicToast.add()</code></strong> (also <code>window.SonicToast</code>); the <strong><code>sonic-toast</code></strong> host is created on first use. Use <strong><code>label</code></strong> for a heading and <strong><code>preserve</code></strong> when the user must read or act before the toast goes away.</p>
|
|
22
|
+
<h2 id="basic-example">Basic example</h2>
|
|
23
|
+
<pre><code><sonic-button onclick="SonicToast.add({ text: 'Flight CN 001 is now boarding' })">
|
|
24
|
+
Show toast
|
|
25
|
+
</sonic-button>
|
|
26
|
+
</code></pre>
|
|
27
|
+
<h2 id="status">Status</h2>
|
|
28
|
+
<p><strong><code>status</code></strong> sets the color, the icon and the live-region role. With no <code>status</code>, the toast is neutral.</p>
|
|
29
|
+
<pre><code><div class="flex flex-wrap gap-2">
|
|
30
|
+
<sonic-button onclick="SonicToast.add({ text: 'Default message' })">Default</sonic-button>
|
|
31
|
+
<sonic-button onclick="SonicToast.add({ text: 'Operation succeeded', status: 'success' })">Success</sonic-button>
|
|
32
|
+
<sonic-button onclick="SonicToast.add({ text: 'Something went wrong', status: 'error' })">Error</sonic-button>
|
|
33
|
+
<sonic-button onclick="SonicToast.add({ text: 'Check this detail', status: 'warning' })">Warning</sonic-button>
|
|
34
|
+
<sonic-button onclick="SonicToast.add({ text: 'Helpful context', status: 'info' })">Info</sonic-button>
|
|
35
|
+
</div>
|
|
36
|
+
</code></pre>
|
|
37
|
+
<h2 id="label">Label</h2>
|
|
38
|
+
<p><strong><code>label</code></strong> adds a bold heading above <strong><code>text</code></strong>. <code>title</code> is a deprecated alias.</p>
|
|
39
|
+
<pre><code><sonic-button
|
|
40
|
+
onclick="SonicToast.add({ label: 'Gate change', text: 'Flight CN 001 now departs from gate B12.', status: 'warning' })"
|
|
41
|
+
>
|
|
42
|
+
Toast with label
|
|
43
|
+
</sonic-button>
|
|
44
|
+
</code></pre>
|
|
45
|
+
<h2 id="html-in-text">HTML in text</h2>
|
|
46
|
+
<p><strong><code>text</code></strong> and <strong><code>label</code></strong> accept HTML strings. A link or form control in <strong><code>text</code></strong> turns on <strong><code>preserve</code></strong> automatically.</p>
|
|
47
|
+
<pre><code><sonic-button
|
|
48
|
+
onclick="SonicToast.add({ text: 'Message with <strong>HTML</strong> and an <a href=&quot;#&quot;>action link</a>', status: 'info' })"
|
|
49
|
+
>
|
|
50
|
+
Toast with HTML
|
|
51
|
+
</sonic-button>
|
|
52
|
+
</code></pre>
|
|
53
|
+
<h2 id="preserve">Preserve</h2>
|
|
54
|
+
<p>Toasts hide after 6 seconds; the timer pauses on hover and focus. <strong><code>preserve</code></strong> keeps the toast until the user closes it.</p>
|
|
55
|
+
<pre><code><sonic-button
|
|
56
|
+
onclick="SonicToast.add({ text: 'Turbulence ahead: please fasten your seat belt', status: 'info', preserve: true })"
|
|
57
|
+
>
|
|
58
|
+
Persistent toast
|
|
59
|
+
</sonic-button>
|
|
60
|
+
</code></pre>
|
|
61
|
+
<h2 id="dismiss-forever">Dismiss forever</h2>
|
|
62
|
+
<p>With <strong><code>dismissForever</code></strong> and a stable <strong><code>id</code></strong>, closing the toast is stored in <code>localStorage</code> and later <code>add()</code> calls with that <code>id</code> are ignored. A toast identical to one already shown (ignoring <code>id</code>) is never added twice.</p>
|
|
63
|
+
<pre><code><sonic-button
|
|
64
|
+
onclick="SonicToast.add({ id: 'welcome-toast', label: 'Welcome', text: 'Close me and I will not come back after a reload.', status: 'info', dismissForever: true })"
|
|
65
|
+
>
|
|
66
|
+
Dismiss forever
|
|
67
|
+
</sonic-button>
|
|
68
|
+
</code></pre>
|
|
69
|
+
<h2 id="ghost">Ghost</h2>
|
|
70
|
+
<p><strong><code>ghost</code></strong> renders a semi-transparent, non-interactive toast, for example for a background task.</p>
|
|
71
|
+
<pre><code><sonic-button
|
|
72
|
+
onclick="SonicToast.add({ text: 'Syncing in the background', status: 'info', ghost: true })"
|
|
73
|
+
>
|
|
74
|
+
Ghost toast
|
|
75
|
+
</sonic-button>
|
|
76
|
+
</code></pre>
|
|
77
|
+
<h2 id="removing-toasts">Removing toasts</h2>
|
|
78
|
+
<p>Static helpers clear the stack from script, for example after navigation. <strong><code>removeAll()</code></strong> keeps ghost toasts; <strong><code>removeTemporaryItems()</code></strong> keeps preserved ones.</p>
|
|
79
|
+
<pre><code><div class="flex flex-wrap gap-2">
|
|
80
|
+
<sonic-button onclick="SonicToast.add({ text: 'Temporary success', status: 'success' })">Add success</sonic-button>
|
|
81
|
+
<sonic-button onclick="SonicToast.add({ text: 'Temporary error', status: 'error' })">Add error</sonic-button>
|
|
82
|
+
<sonic-button onclick="SonicToast.add({ text: 'Persistent info', status: 'info', preserve: true })">Add persistent</sonic-button>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="flex flex-wrap gap-2 mt-3">
|
|
85
|
+
<sonic-button variant="outline" onclick="SonicToast.removeItemsByStatus('success')">Remove success</sonic-button>
|
|
86
|
+
<sonic-button variant="outline" onclick="SonicToast.removeTemporaryItems()">Remove temporary</sonic-button>
|
|
87
|
+
<sonic-button variant="outline" onclick="SonicToast.removeAll()">Remove all</sonic-button>
|
|
88
|
+
</div>
|
|
89
|
+
</code></pre>
|
|
90
|
+
<p>Inside an iframe, toasts are forwarded to the parent window's stack when the parent also loads Concorde.</p>
|
|
91
|
+
<h2 id="api-reference">API reference</h2>
|
|
92
|
+
<p>Options of <strong><code>SonicToast.add(options)</code></strong>:</p>
|
|
93
|
+
<table>
|
|
94
|
+
<thead>
|
|
95
|
+
<tr>
|
|
96
|
+
<th>Option</th>
|
|
97
|
+
<th>Values</th>
|
|
98
|
+
<th>Description</th>
|
|
99
|
+
</tr>
|
|
100
|
+
</thead>
|
|
101
|
+
<tbody><tr>
|
|
102
|
+
<td><code>text</code></td>
|
|
103
|
+
<td>string · Lit template</td>
|
|
104
|
+
<td>Body, required; HTML strings allowed</td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td><code>label</code></td>
|
|
108
|
+
<td>string · Lit template</td>
|
|
109
|
+
<td>Heading above <code>text</code></td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td><code>title</code></td>
|
|
113
|
+
<td>string · Lit template</td>
|
|
114
|
+
<td>Deprecated alias of <code>label</code></td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td><code>status</code></td>
|
|
118
|
+
<td><code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> (default neutral)</td>
|
|
119
|
+
<td>Color and icon; <code>error</code> gets <code>role="alert"</code>, others <code>role="status"</code></td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td><code>id</code></td>
|
|
123
|
+
<td>string · number (default timestamp)</td>
|
|
124
|
+
<td>Identifier for <code>removeItemById</code> and <code>dismissForever</code></td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr>
|
|
127
|
+
<td><code>preserve</code></td>
|
|
128
|
+
<td>boolean</td>
|
|
129
|
+
<td>No auto-hide; forced when <code>text</code> contains a link or control</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td><code>ghost</code></td>
|
|
133
|
+
<td>boolean</td>
|
|
134
|
+
<td>Semi-transparent and non-interactive; kept by <code>removeAll</code></td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td><code>dismissForever</code></td>
|
|
138
|
+
<td>boolean</td>
|
|
139
|
+
<td>Remember the dismissal in <code>localStorage</code>; needs a stable <code>id</code></td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td><code>styleSheet</code></td>
|
|
143
|
+
<td><code>CSSResult</code> · <code>CSSStyleSheet</code> · array</td>
|
|
144
|
+
<td>Extra styles adopted by the toast</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td><code>useSlot</code></td>
|
|
148
|
+
<td>boolean</td>
|
|
149
|
+
<td>Legacy: render <code>text</code> in the light DOM</td>
|
|
150
|
+
</tr>
|
|
151
|
+
</tbody></table>
|
|
152
|
+
<table>
|
|
153
|
+
<thead>
|
|
154
|
+
<tr>
|
|
155
|
+
<th>Method</th>
|
|
156
|
+
<th>Description</th>
|
|
157
|
+
</tr>
|
|
158
|
+
</thead>
|
|
159
|
+
<tbody><tr>
|
|
160
|
+
<td><code>SonicToast.add(options)</code></td>
|
|
161
|
+
<td>Show a toast; returns the stored config, or <code>null</code> when skipped</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>SonicToast.removeAll()</code></td>
|
|
165
|
+
<td>Remove every toast except ghosts</td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr>
|
|
168
|
+
<td><code>SonicToast.removeItemsByStatus(status)</code></td>
|
|
169
|
+
<td>Remove toasts with this <code>status</code></td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td><code>SonicToast.removeItemById(id)</code></td>
|
|
173
|
+
<td>Remove one toast</td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td><code>SonicToast.removeTemporaryItems()</code></td>
|
|
177
|
+
<td>Remove toasts without <code>preserve</code></td>
|
|
178
|
+
</tr>
|
|
179
|
+
</tbody></table>
|
|
180
|
+
<p><code>sonic-toast</code> and <code>sonic-toast-item</code> are created by <code>add()</code>; do not write them in markup. <code>sonic-toast-message-subscriber</code> shows a toast for each <code>{ type: "public", content, status }</code> entry of its <code>messages</code> property.</p>
|
|
181
|
+
|
|
182
|
+
</article>
|
|
183
|
+
</main>
|
|
184
|
+
</body>
|
|
185
|
+
</html>
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Toast
|
|
2
|
+
|
|
3
|
+
Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call **`SonicToast.add()`** (also `window.SonicToast`); the **`sonic-toast`** host is created on first use. Use **`label`** for a heading and **`preserve`** when the user must read or act before the toast goes away.
|
|
4
|
+
|
|
5
|
+
## Basic example
|
|
6
|
+
|
|
7
|
+
<sonic-code>
|
|
8
|
+
<template>
|
|
9
|
+
<sonic-button onclick="SonicToast.add({ text: 'Flight CN 001 is now boarding' })">
|
|
10
|
+
Show toast
|
|
11
|
+
</sonic-button>
|
|
12
|
+
</template>
|
|
13
|
+
</sonic-code>
|
|
14
|
+
|
|
15
|
+
## Status
|
|
16
|
+
|
|
17
|
+
**`status`** sets the color, the icon and the live-region role. With no `status`, the toast is neutral.
|
|
18
|
+
|
|
19
|
+
<sonic-code>
|
|
20
|
+
<template>
|
|
21
|
+
<div class="flex flex-wrap gap-2">
|
|
22
|
+
<sonic-button onclick="SonicToast.add({ text: 'Default message' })">Default</sonic-button>
|
|
23
|
+
<sonic-button onclick="SonicToast.add({ text: 'Operation succeeded', status: 'success' })">Success</sonic-button>
|
|
24
|
+
<sonic-button onclick="SonicToast.add({ text: 'Something went wrong', status: 'error' })">Error</sonic-button>
|
|
25
|
+
<sonic-button onclick="SonicToast.add({ text: 'Check this detail', status: 'warning' })">Warning</sonic-button>
|
|
26
|
+
<sonic-button onclick="SonicToast.add({ text: 'Helpful context', status: 'info' })">Info</sonic-button>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
</sonic-code>
|
|
30
|
+
|
|
31
|
+
## Label
|
|
32
|
+
|
|
33
|
+
**`label`** adds a bold heading above **`text`**. `title` is a deprecated alias.
|
|
34
|
+
|
|
35
|
+
<sonic-code>
|
|
36
|
+
<template>
|
|
37
|
+
<sonic-button
|
|
38
|
+
onclick="SonicToast.add({ label: 'Gate change', text: 'Flight CN 001 now departs from gate B12.', status: 'warning' })"
|
|
39
|
+
>
|
|
40
|
+
Toast with label
|
|
41
|
+
</sonic-button>
|
|
42
|
+
</template>
|
|
43
|
+
</sonic-code>
|
|
44
|
+
|
|
45
|
+
## HTML in text
|
|
46
|
+
|
|
47
|
+
**`text`** and **`label`** accept HTML strings. A link or form control in **`text`** turns on **`preserve`** automatically.
|
|
48
|
+
|
|
49
|
+
<sonic-code>
|
|
50
|
+
<template>
|
|
51
|
+
<sonic-button
|
|
52
|
+
onclick="SonicToast.add({ text: 'Message with <strong>HTML</strong> and an <a href="#">action link</a>', status: 'info' })"
|
|
53
|
+
>
|
|
54
|
+
Toast with HTML
|
|
55
|
+
</sonic-button>
|
|
56
|
+
</template>
|
|
57
|
+
</sonic-code>
|
|
58
|
+
|
|
59
|
+
## Preserve
|
|
60
|
+
|
|
61
|
+
Toasts hide after 6 seconds; the timer pauses on hover and focus. **`preserve`** keeps the toast until the user closes it.
|
|
62
|
+
|
|
63
|
+
<sonic-code>
|
|
64
|
+
<template>
|
|
65
|
+
<sonic-button
|
|
66
|
+
onclick="SonicToast.add({ text: 'Turbulence ahead: please fasten your seat belt', status: 'info', preserve: true })"
|
|
67
|
+
>
|
|
68
|
+
Persistent toast
|
|
69
|
+
</sonic-button>
|
|
70
|
+
</template>
|
|
71
|
+
</sonic-code>
|
|
72
|
+
|
|
73
|
+
## Dismiss forever
|
|
74
|
+
|
|
75
|
+
With **`dismissForever`** and a stable **`id`**, closing the toast is stored in `localStorage` and later `add()` calls with that `id` are ignored. A toast identical to one already shown (ignoring `id`) is never added twice.
|
|
76
|
+
|
|
77
|
+
<sonic-code>
|
|
78
|
+
<template>
|
|
79
|
+
<sonic-button
|
|
80
|
+
onclick="SonicToast.add({ id: 'welcome-toast', label: 'Welcome', text: 'Close me and I will not come back after a reload.', status: 'info', dismissForever: true })"
|
|
81
|
+
>
|
|
82
|
+
Dismiss forever
|
|
83
|
+
</sonic-button>
|
|
84
|
+
</template>
|
|
85
|
+
</sonic-code>
|
|
86
|
+
|
|
87
|
+
## Ghost
|
|
88
|
+
|
|
89
|
+
**`ghost`** renders a semi-transparent, non-interactive toast, for example for a background task.
|
|
90
|
+
|
|
91
|
+
<sonic-code>
|
|
92
|
+
<template>
|
|
93
|
+
<sonic-button
|
|
94
|
+
onclick="SonicToast.add({ text: 'Syncing in the background', status: 'info', ghost: true })"
|
|
95
|
+
>
|
|
96
|
+
Ghost toast
|
|
97
|
+
</sonic-button>
|
|
98
|
+
</template>
|
|
99
|
+
</sonic-code>
|
|
100
|
+
|
|
101
|
+
## Removing toasts
|
|
102
|
+
|
|
103
|
+
Static helpers clear the stack from script, for example after navigation. **`removeAll()`** keeps ghost toasts; **`removeTemporaryItems()`** keeps preserved ones.
|
|
104
|
+
|
|
105
|
+
<sonic-code>
|
|
106
|
+
<template>
|
|
107
|
+
<div class="flex flex-wrap gap-2">
|
|
108
|
+
<sonic-button onclick="SonicToast.add({ text: 'Temporary success', status: 'success' })">Add success</sonic-button>
|
|
109
|
+
<sonic-button onclick="SonicToast.add({ text: 'Temporary error', status: 'error' })">Add error</sonic-button>
|
|
110
|
+
<sonic-button onclick="SonicToast.add({ text: 'Persistent info', status: 'info', preserve: true })">Add persistent</sonic-button>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="flex flex-wrap gap-2 mt-3">
|
|
113
|
+
<sonic-button variant="outline" onclick="SonicToast.removeItemsByStatus('success')">Remove success</sonic-button>
|
|
114
|
+
<sonic-button variant="outline" onclick="SonicToast.removeTemporaryItems()">Remove temporary</sonic-button>
|
|
115
|
+
<sonic-button variant="outline" onclick="SonicToast.removeAll()">Remove all</sonic-button>
|
|
116
|
+
</div>
|
|
117
|
+
</template>
|
|
118
|
+
</sonic-code>
|
|
119
|
+
|
|
120
|
+
Inside an iframe, toasts are forwarded to the parent window's stack when the parent also loads Concorde.
|
|
121
|
+
|
|
122
|
+
## API reference
|
|
123
|
+
|
|
124
|
+
Options of **`SonicToast.add(options)`**:
|
|
125
|
+
|
|
126
|
+
| Option | Values | Description |
|
|
127
|
+
|----------|---------|-------------|
|
|
128
|
+
| `text` | string · Lit template | Body, required; HTML strings allowed |
|
|
129
|
+
| `label` | string · Lit template | Heading above `text` |
|
|
130
|
+
| `title` | string · Lit template | Deprecated alias of `label` |
|
|
131
|
+
| `status` | `success` · `error` · `warning` · `info` (default neutral) | Color and icon; `error` gets `role="alert"`, others `role="status"` |
|
|
132
|
+
| `id` | string · number (default timestamp) | Identifier for `removeItemById` and `dismissForever` |
|
|
133
|
+
| `preserve` | boolean | No auto-hide; forced when `text` contains a link or control |
|
|
134
|
+
| `ghost` | boolean | Semi-transparent and non-interactive; kept by `removeAll` |
|
|
135
|
+
| `dismissForever` | boolean | Remember the dismissal in `localStorage`; needs a stable `id` |
|
|
136
|
+
| `styleSheet` | `CSSResult` · `CSSStyleSheet` · array | Extra styles adopted by the toast |
|
|
137
|
+
| `useSlot` | boolean | Legacy: render `text` in the light DOM |
|
|
138
|
+
|
|
139
|
+
| Method | Description |
|
|
140
|
+
|--------|-------------|
|
|
141
|
+
| `SonicToast.add(options)` | Show a toast; returns the stored config, or `null` when skipped |
|
|
142
|
+
| `SonicToast.removeAll()` | Remove every toast except ghosts |
|
|
143
|
+
| `SonicToast.removeItemsByStatus(status)` | Remove toasts with this `status` |
|
|
144
|
+
| `SonicToast.removeItemById(id)` | Remove one toast |
|
|
145
|
+
| `SonicToast.removeTemporaryItems()` | Remove toasts without `preserve` |
|
|
146
|
+
|
|
147
|
+
`sonic-toast` and `sonic-toast-item` are created by `add()`; do not write them in markup. `sonic-toast-message-subscriber` shows a toast for each `{ type: "public", content, status }` entry of its `messages` property.
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/tooltip" data-doc-id="core/components/ui/tooltip/tooltip">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Tooltip — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, l">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/tooltip/tooltip">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/tooltip">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/tooltip.md">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<header>
|
|
15
|
+
<p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/tooltip">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
|
|
16
|
+
</header>
|
|
17
|
+
<main>
|
|
18
|
+
<article>
|
|
19
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Tooltip</strong>. sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, l <span>Doc ID: <code>core/components/ui/tooltip/tooltip</code>. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right. URL: <a href="https://concorde.supersoniks.org/core/components/ui/tooltip">https://concorde.supersoniks.org/core/components/ui/tooltip</a>.</span></p>
|
|
20
|
+
<h1 id="tooltip">Tooltip</h1>
|
|
21
|
+
<p><strong><code>sonic-tooltip</code></strong> shows a short <code>label</code> in a bubble when the trigger in the default slot is hovered or receives focus. With no <code>placement</code>, the bubble sits on <code>top</code>, centered. An empty <code>label</code> hides the bubble, like <code>disabled</code>.</p>
|
|
22
|
+
<h2 id="basic-example">Basic example</h2>
|
|
23
|
+
<pre><code><sonic-tooltip label="Cruising at Mach 2.04">
|
|
24
|
+
<sonic-button variant="outline">Hover me</sonic-button>
|
|
25
|
+
</sonic-tooltip>
|
|
26
|
+
</code></pre>
|
|
27
|
+
<h2 id="placement">Placement</h2>
|
|
28
|
+
<p><code>top</code> · <code>bottom</code> · <code>left</code> · <code>right</code> set the side. Add <code>-start</code> or <code>-end</code> to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.</p>
|
|
29
|
+
<pre><code><div class="flex flex-wrap gap-3">
|
|
30
|
+
<sonic-tooltip placement="top" label="top"><sonic-button minWidth="9rem">top</sonic-button></sonic-tooltip>
|
|
31
|
+
<sonic-tooltip placement="top-start" label="top-start"><sonic-button minWidth="9rem">top-start</sonic-button></sonic-tooltip>
|
|
32
|
+
<sonic-tooltip placement="top-end" label="top-end"><sonic-button minWidth="9rem">top-end</sonic-button></sonic-tooltip>
|
|
33
|
+
<sonic-tooltip placement="bottom" label="bottom"><sonic-button minWidth="9rem">bottom</sonic-button></sonic-tooltip>
|
|
34
|
+
<sonic-tooltip placement="bottom-start" label="bottom-start"><sonic-button minWidth="9rem">bottom-start</sonic-button></sonic-tooltip>
|
|
35
|
+
<sonic-tooltip placement="bottom-end" label="bottom-end"><sonic-button minWidth="9rem">bottom-end</sonic-button></sonic-tooltip>
|
|
36
|
+
<sonic-tooltip placement="left" label="left"><sonic-button minWidth="9rem">left</sonic-button></sonic-tooltip>
|
|
37
|
+
<sonic-tooltip placement="left-start" label="left-start"><sonic-button minWidth="9rem">left-start</sonic-button></sonic-tooltip>
|
|
38
|
+
<sonic-tooltip placement="left-end" label="left-end"><sonic-button minWidth="9rem">left-end</sonic-button></sonic-tooltip>
|
|
39
|
+
<sonic-tooltip placement="right" label="right"><sonic-button minWidth="9rem">right</sonic-button></sonic-tooltip>
|
|
40
|
+
<sonic-tooltip placement="right-start" label="right-start"><sonic-button minWidth="9rem">right-start</sonic-button></sonic-tooltip>
|
|
41
|
+
<sonic-tooltip placement="right-end" label="right-end"><sonic-button minWidth="9rem">right-end</sonic-button></sonic-tooltip>
|
|
42
|
+
</div>
|
|
43
|
+
</code></pre>
|
|
44
|
+
<h2 id="multiline-label">Multiline label</h2>
|
|
45
|
+
<p>Line breaks in <code>label</code> (a real newline or <code>&#10;</code>) are kept. Each line is trimmed and the bubble wraps at <code>18rem</code>.</p>
|
|
46
|
+
<pre><code><sonic-tooltip label="Gate B12&#10;Boarding at 08:15">
|
|
47
|
+
<sonic-button variant="outline">Multiline label</sonic-button>
|
|
48
|
+
</sonic-tooltip>
|
|
49
|
+
</code></pre>
|
|
50
|
+
<h2 id="focusable">Focusable</h2>
|
|
51
|
+
<p>Set <code>focusable</code> when the trigger is not focusable itself (text, icon): the host gets <code>tabindex="0"</code> so keyboard users can open the tooltip. The bubble uses <code>popover="hint"</code>; without Popover API support, the label falls back to a native <code>title</code> on one line.</p>
|
|
52
|
+
<pre><code><sonic-tooltip
|
|
53
|
+
focusable
|
|
54
|
+
label="The Concorde made its first transatlantic crossing on September 26, 1973"
|
|
55
|
+
>
|
|
56
|
+
<sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon>
|
|
57
|
+
Focus or hover this text
|
|
58
|
+
</sonic-tooltip>
|
|
59
|
+
</code></pre>
|
|
60
|
+
<h2 id="disabled">Disabled</h2>
|
|
61
|
+
<p><code>disabled</code> never shows the bubble and sets <code>tabindex="-1"</code> on the host.</p>
|
|
62
|
+
<pre><code><sonic-tooltip disabled label="Not shown">
|
|
63
|
+
<sonic-button>Tooltip disabled</sonic-button>
|
|
64
|
+
</sonic-tooltip>
|
|
65
|
+
</code></pre>
|
|
66
|
+
<h2 id="api-reference">API reference</h2>
|
|
67
|
+
<table>
|
|
68
|
+
<thead>
|
|
69
|
+
<tr>
|
|
70
|
+
<th>Attribute</th>
|
|
71
|
+
<th>Values</th>
|
|
72
|
+
<th>Description</th>
|
|
73
|
+
</tr>
|
|
74
|
+
</thead>
|
|
75
|
+
<tbody><tr>
|
|
76
|
+
<td><code>label</code></td>
|
|
77
|
+
<td>string</td>
|
|
78
|
+
<td>Tooltip text; empty or whitespace-only hides the bubble</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr>
|
|
81
|
+
<td><code>placement</code></td>
|
|
82
|
+
<td><code>top</code> (default) · <code>bottom</code> · <code>left</code> · <code>right</code>, each with optional <code>-start</code> · <code>-end</code></td>
|
|
83
|
+
<td>Side and alignment relative to the trigger</td>
|
|
84
|
+
</tr>
|
|
85
|
+
<tr>
|
|
86
|
+
<td><code>disabled</code></td>
|
|
87
|
+
<td>boolean</td>
|
|
88
|
+
<td>Never show the bubble; sets <code>tabindex="-1"</code> on the host</td>
|
|
89
|
+
</tr>
|
|
90
|
+
<tr>
|
|
91
|
+
<td><code>focusable</code></td>
|
|
92
|
+
<td>boolean</td>
|
|
93
|
+
<td>Sets <code>tabindex="0"</code> on the host so the tooltip opens on keyboard focus</td>
|
|
94
|
+
</tr>
|
|
95
|
+
</tbody></table>
|
|
96
|
+
<table>
|
|
97
|
+
<thead>
|
|
98
|
+
<tr>
|
|
99
|
+
<th>Slot</th>
|
|
100
|
+
<th>Description</th>
|
|
101
|
+
</tr>
|
|
102
|
+
</thead>
|
|
103
|
+
<tbody><tr>
|
|
104
|
+
<td><em>(default)</em></td>
|
|
105
|
+
<td>Trigger content</td>
|
|
106
|
+
</tr>
|
|
107
|
+
</tbody></table>
|
|
108
|
+
|
|
109
|
+
</article>
|
|
110
|
+
</main>
|
|
111
|
+
</body>
|
|
112
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Tooltip
|
|
2
|
+
|
|
3
|
+
**`sonic-tooltip`** shows a short `label` in a bubble when the trigger in the default slot is hovered or receives focus. With no `placement`, the bubble sits on `top`, centered. An empty `label` hides the bubble, like `disabled`.
|
|
4
|
+
|
|
5
|
+
## Basic example
|
|
6
|
+
|
|
7
|
+
<sonic-code>
|
|
8
|
+
<template>
|
|
9
|
+
<sonic-tooltip label="Cruising at Mach 2.04">
|
|
10
|
+
<sonic-button variant="outline">Hover me</sonic-button>
|
|
11
|
+
</sonic-tooltip>
|
|
12
|
+
</template>
|
|
13
|
+
</sonic-code>
|
|
14
|
+
|
|
15
|
+
## Placement
|
|
16
|
+
|
|
17
|
+
`top` · `bottom` · `left` · `right` set the side. Add `-start` or `-end` to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.
|
|
18
|
+
|
|
19
|
+
<sonic-code>
|
|
20
|
+
<template>
|
|
21
|
+
<div class="flex flex-wrap gap-3">
|
|
22
|
+
<sonic-tooltip placement="top" label="top"><sonic-button minWidth="9rem">top</sonic-button></sonic-tooltip>
|
|
23
|
+
<sonic-tooltip placement="top-start" label="top-start"><sonic-button minWidth="9rem">top-start</sonic-button></sonic-tooltip>
|
|
24
|
+
<sonic-tooltip placement="top-end" label="top-end"><sonic-button minWidth="9rem">top-end</sonic-button></sonic-tooltip>
|
|
25
|
+
<sonic-tooltip placement="bottom" label="bottom"><sonic-button minWidth="9rem">bottom</sonic-button></sonic-tooltip>
|
|
26
|
+
<sonic-tooltip placement="bottom-start" label="bottom-start"><sonic-button minWidth="9rem">bottom-start</sonic-button></sonic-tooltip>
|
|
27
|
+
<sonic-tooltip placement="bottom-end" label="bottom-end"><sonic-button minWidth="9rem">bottom-end</sonic-button></sonic-tooltip>
|
|
28
|
+
<sonic-tooltip placement="left" label="left"><sonic-button minWidth="9rem">left</sonic-button></sonic-tooltip>
|
|
29
|
+
<sonic-tooltip placement="left-start" label="left-start"><sonic-button minWidth="9rem">left-start</sonic-button></sonic-tooltip>
|
|
30
|
+
<sonic-tooltip placement="left-end" label="left-end"><sonic-button minWidth="9rem">left-end</sonic-button></sonic-tooltip>
|
|
31
|
+
<sonic-tooltip placement="right" label="right"><sonic-button minWidth="9rem">right</sonic-button></sonic-tooltip>
|
|
32
|
+
<sonic-tooltip placement="right-start" label="right-start"><sonic-button minWidth="9rem">right-start</sonic-button></sonic-tooltip>
|
|
33
|
+
<sonic-tooltip placement="right-end" label="right-end"><sonic-button minWidth="9rem">right-end</sonic-button></sonic-tooltip>
|
|
34
|
+
</div>
|
|
35
|
+
</template>
|
|
36
|
+
</sonic-code>
|
|
37
|
+
|
|
38
|
+
## Multiline label
|
|
39
|
+
|
|
40
|
+
Line breaks in `label` (a real newline or ` `) are kept. Each line is trimmed and the bubble wraps at `18rem`.
|
|
41
|
+
|
|
42
|
+
<sonic-code>
|
|
43
|
+
<template>
|
|
44
|
+
<sonic-tooltip label="Gate B12 Boarding at 08:15">
|
|
45
|
+
<sonic-button variant="outline">Multiline label</sonic-button>
|
|
46
|
+
</sonic-tooltip>
|
|
47
|
+
</template>
|
|
48
|
+
</sonic-code>
|
|
49
|
+
|
|
50
|
+
## Focusable
|
|
51
|
+
|
|
52
|
+
Set `focusable` when the trigger is not focusable itself (text, icon): the host gets `tabindex="0"` so keyboard users can open the tooltip. The bubble uses `popover="hint"`; without Popover API support, the label falls back to a native `title` on one line.
|
|
53
|
+
|
|
54
|
+
<sonic-code>
|
|
55
|
+
<template>
|
|
56
|
+
<sonic-tooltip
|
|
57
|
+
focusable
|
|
58
|
+
label="The Concorde made its first transatlantic crossing on September 26, 1973"
|
|
59
|
+
>
|
|
60
|
+
<sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon>
|
|
61
|
+
Focus or hover this text
|
|
62
|
+
</sonic-tooltip>
|
|
63
|
+
</template>
|
|
64
|
+
</sonic-code>
|
|
65
|
+
|
|
66
|
+
## Disabled
|
|
67
|
+
|
|
68
|
+
`disabled` never shows the bubble and sets `tabindex="-1"` on the host.
|
|
69
|
+
|
|
70
|
+
<sonic-code>
|
|
71
|
+
<template>
|
|
72
|
+
<sonic-tooltip disabled label="Not shown">
|
|
73
|
+
<sonic-button>Tooltip disabled</sonic-button>
|
|
74
|
+
</sonic-tooltip>
|
|
75
|
+
</template>
|
|
76
|
+
</sonic-code>
|
|
77
|
+
|
|
78
|
+
## API reference
|
|
79
|
+
|
|
80
|
+
| Attribute | Values | Description |
|
|
81
|
+
|----------|---------|-------------|
|
|
82
|
+
| `label` | string | Tooltip text; empty or whitespace-only hides the bubble |
|
|
83
|
+
| `placement` | `top` (default) · `bottom` · `left` · `right`, each with optional `-start` · `-end` | Side and alignment relative to the trigger |
|
|
84
|
+
| `disabled` | boolean | Never show the bubble; sets `tabindex="-1"` on the host |
|
|
85
|
+
| `focusable` | boolean | Sets `tabindex="0"` on the host so the tooltip opens on keyboard focus |
|
|
86
|
+
|
|
87
|
+
| Slot | Description |
|
|
88
|
+
|------|-------------|
|
|
89
|
+
| *(default)* | Trigger content |
|