@supersoniks/concorde 5.1.1 → 5.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/concorde-docs/SKILL.md +153 -0
- package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
- package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
- package/.agents/skills/concorde-docs/templates/guide.md +25 -0
- package/.tmp-cem/custom-elements.json +503 -503
- package/PLAN-DOCS-AGENTS.md +80 -0
- package/README.md +3 -3
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
- package/ai/skills/concorde-theme/SKILL.md +1 -1
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +1 -1
- package/concorde-core.es.js +1 -1
- package/dist/concorde-core.bundle.js +1 -1
- package/dist/concorde-core.es.js +1 -1
- package/docs/.htaccess +75 -0
- package/docs/404.html +15 -0
- package/docs/404.md +5 -0
- package/docs/assets/{index-Bb-_LRyY.js → index-BgG6FFPt.js} +2582 -3097
- package/docs/assets/index-x89XINSG.css +1 -0
- package/docs/core/components/functional/date/date.html +211 -0
- package/docs/core/components/functional/date/date.md +150 -0
- package/docs/core/components/functional/fetch/fetch.html +180 -0
- package/docs/core/components/functional/fetch/fetch.md +108 -0
- package/docs/core/components/functional/if/if.html +65 -0
- package/docs/core/components/functional/if/if.md +34 -0
- package/docs/core/components/functional/jsonata/jsonata.html +110 -0
- package/docs/core/components/functional/jsonata/jsonata.md +61 -0
- package/docs/core/components/functional/list/list.html +198 -0
- package/docs/core/components/functional/list/list.md +121 -0
- package/docs/core/components/functional/mix/mix.html +78 -0
- package/docs/core/components/functional/mix/mix.md +46 -0
- package/docs/core/components/functional/queue/queue.html +155 -0
- package/docs/core/components/functional/queue/queue.md +51 -0
- package/docs/core/components/functional/router/router.html +154 -0
- package/docs/core/components/functional/router/router.md +93 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
- package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/docs/core/components/functional/sdui/sdui.html +397 -0
- package/docs/core/components/functional/sdui/sdui.md +307 -0
- package/docs/core/components/functional/states/states.html +141 -0
- package/docs/core/components/functional/states/states.md +112 -0
- package/docs/core/components/functional/submit/submit.html +178 -0
- package/docs/core/components/functional/submit/submit.md +106 -0
- package/docs/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/docs/decorators/ancestor-attribute.html +71 -0
- package/docs/docs/decorators/ancestor-attribute.md +59 -0
- package/docs/docs/decorators/auto-subscribe.html +61 -0
- package/docs/docs/decorators/auto-subscribe.md +40 -0
- package/docs/docs/decorators/bind.html +86 -0
- package/docs/docs/decorators/bind.md +77 -0
- package/docs/docs/decorators/get.html +166 -0
- package/docs/docs/decorators/get.md +160 -0
- package/docs/docs/decorators/handle.html +139 -0
- package/docs/docs/decorators/handle.md +119 -0
- package/docs/docs/decorators/on-assign.html +72 -0
- package/docs/docs/decorators/on-assign.md +63 -0
- package/docs/docs/decorators/patch.html +76 -0
- package/docs/docs/decorators/patch.md +44 -0
- package/docs/docs/decorators/post.html +150 -0
- package/docs/docs/decorators/post.md +134 -0
- package/docs/docs/decorators/publish.html +74 -0
- package/docs/docs/decorators/publish.md +56 -0
- package/docs/docs/decorators/put.html +83 -0
- package/docs/docs/decorators/put.md +51 -0
- package/docs/docs/decorators/subscribe.html +91 -0
- package/docs/docs/decorators/subscribe.md +87 -0
- package/docs/docs/decorators/wait-for-ancestors.html +82 -0
- package/docs/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/docs/directives/sub.html +79 -0
- package/docs/docs/directives/sub.md +75 -0
- package/docs/docs/directives/t.html +91 -0
- package/docs/docs/directives/t.md +73 -0
- package/docs/docs/getting-started/ai-agents.html +174 -0
- package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
- package/docs/docs/getting-started/components.html +27 -0
- package/docs/docs/getting-started/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 +17 -18
- 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 +443 -0
- package/docs/hubs/form-components.html +404 -0
- package/docs/hubs/remote-data.html +371 -0
- package/docs/img/archive/concorde-001-2cv.webp +0 -0
- package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/docs/img/archive/credits.json +28 -0
- package/docs/img/concorde/plane_01.jpg +0 -0
- package/docs/img/concorde/plane_02.jpg +0 -0
- package/docs/img/concorde/plane_03.jpg +0 -0
- package/docs/img/concorde/plane_04.jpg +0 -0
- package/docs/img/concorde/plane_05.jpg +0 -0
- package/docs/img/concorde/plane_06.jpg +0 -0
- package/docs/img/concorde/plane_07.jpg +0 -0
- package/docs/img/concorde/plane_08.jpg +0 -0
- package/docs/img/concorde/plane_09.jpg +0 -0
- package/docs/img/concorde/plane_10.jpg +0 -0
- package/docs/img/concorde/plane_11.jpg +0 -0
- package/docs/img/concorde/plane_12.jpg +0 -0
- package/docs/img/concorde/plane_13.jpg +0 -0
- package/docs/index.html +95 -68
- package/docs/index.md +22 -0
- package/docs/llms-full.txt +5795 -0
- package/docs/llms.txt +106 -0
- package/docs/robots.txt +11 -10
- package/docs/sitemap.xml +237 -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 +121 -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 +77 -0
- package/docs/src/docs/decorators/get.md +160 -0
- package/docs/src/docs/decorators/handle.md +119 -0
- package/docs/src/docs/decorators/on-assign.md +63 -0
- package/docs/src/docs/decorators/patch.md +44 -0
- package/docs/src/docs/decorators/post.md +134 -0
- package/docs/src/docs/decorators/publish.md +56 -0
- package/docs/src/docs/decorators/put.md +51 -0
- package/docs/src/docs/decorators/subscribe.md +87 -0
- package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/docs/src/docs/directives/sub.md +75 -0
- package/docs/src/docs/directives/t.md +73 -0
- package/docs/src/docs/getting-started/ai-agents.md +76 -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 +10287 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.json +1353 -0
- package/index.html +68 -5
- package/package.json +1 -1
- 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/robots.txt +11 -10
- package/scripts/docs-markdown-vite-plugin.ts +37 -0
- package/scripts/docs-public-url.mjs +50 -0
- package/scripts/docs.htaccess +75 -0
- package/scripts/generate-crawl-docs.mjs +207 -116
- package/scripts/generate-crawl-docs.test.mjs +124 -0
- package/scripts/post-build-docs.js +34 -50
- package/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 +99 -43
- package/src/core/components/functional/mix/mix.md +31 -26
- package/src/core/components/functional/queue/queue.demo.ts +10 -7
- package/src/core/components/functional/queue/queue.md +40 -61
- package/src/core/components/functional/router/router.demo.ts +16 -16
- package/src/core/components/functional/router/router.md +64 -65
- package/src/core/components/functional/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/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 +77 -0
- package/src/docs/decorators/get.md +160 -0
- package/src/docs/decorators/handle.md +119 -0
- package/src/docs/decorators/on-assign.md +63 -0
- package/src/docs/decorators/patch.md +44 -0
- package/src/docs/decorators/post.md +134 -0
- package/src/docs/decorators/publish.md +56 -0
- package/src/docs/decorators/put.md +51 -0
- package/src/docs/decorators/subscribe.md +87 -0
- package/src/docs/decorators/wait-for-ancestors.md +76 -0
- package/src/docs/directives/sub.md +75 -0
- package/src/docs/directives/t.md +73 -0
- package/src/docs/docs-location.spec.ts +46 -0
- package/src/docs/docs-location.ts +123 -32
- package/src/docs/docs.ts +1 -2
- package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
- package/src/docs/example/decorators-demo-geo.ts +30 -19
- package/src/docs/example/decorators-demo-post.ts +88 -186
- package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
- package/src/docs/example/decorators-demo.ts +85 -98
- package/src/docs/example/docs-api-config-demos.ts +19 -20
- package/src/docs/example/docs-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 +76 -0
- package/src/docs/getting-started/components.md +5 -0
- package/src/docs/getting-started/create-a-component.md +136 -0
- package/src/docs/getting-started/dataFlow.md +87 -0
- package/src/docs/getting-started/installation.md +36 -0
- package/src/docs/getting-started/my-first-component.md +227 -0
- package/src/docs/getting-started/start.md +35 -0
- package/src/docs/getting-started/theming.md +253 -0
- package/src/docs/header/header.ts +11 -6
- package/src/docs/home/catalog.ts +1 -1
- package/src/docs/home/home.ts +17 -10
- 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 +2845 -5110
- package/src/docs/search/markdown-renderer.ts +25 -7
- package/src/docs/search/page.ts +9 -6
- package/src/docs/search/search.ts +154 -122
- package/vite.config.mts +11 -2
- package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
- 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/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,223 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/icon" data-doc-id="core/components/ui/icon/icon">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Icon — Concorde by Supersoniks</title>
|
|
7
|
+
<meta name="description" content="sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json">
|
|
9
|
+
<meta name="concorde-doc-id" content="core/components/ui/icon/icon">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/icon">
|
|
11
|
+
<link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/icon.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/icon">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 — Icon</strong>. sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by def <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json. URL: <a href="https://concorde.supersoniks.org/core/components/ui/icon">https://concorde.supersoniks.org/core/components/ui/icon</a>.</span></p>
|
|
20
|
+
<h1 id="icon">Icon</h1>
|
|
21
|
+
<p><strong><code>sonic-icon</code></strong> renders inline SVG icons from the <strong>bundled core set</strong> or from <strong>CDN libraries</strong>. Set <strong><code>name</code></strong> (and <strong><code>library</code></strong> / <strong><code>prefix</code></strong> when needed); scale with <strong><code>size</code></strong>. Icons inherit <strong><code>currentColor</code></strong> and are <strong><code>aria-hidden</code></strong> by default—keep visible text nearby or label the control that contains them.</p>
|
|
22
|
+
<h2 id="core-library">Core library</h2>
|
|
23
|
+
<p>Omit <strong><code>library</code></strong> to use the bundled set in <code>icons.json</code>. Available <strong><code>name</code></strong> values: <code>cancel</code> · <code>check</code> · <code>check-circled-outline</code> · <code>emoji-puzzled</code> · <code>info-empty</code> · <code>loader</code> · <code>minus-small</code> · <code>more-horiz</code> · <code>more-vert</code> · <code>nav-arrow-down</code> · <code>warning-circled-outline</code>.</p>
|
|
24
|
+
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
25
|
+
<div class="text-center">
|
|
26
|
+
<sonic-icon name="cancel" size="lg"></sonic-icon>
|
|
27
|
+
<div class="text-xs mt-1">cancel</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="text-center">
|
|
30
|
+
<sonic-icon name="check" size="lg"></sonic-icon>
|
|
31
|
+
<div class="text-xs mt-1">check</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="text-center">
|
|
34
|
+
<sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
|
|
35
|
+
<div class="text-xs mt-1">check-circled-outline</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="text-center">
|
|
38
|
+
<sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
|
|
39
|
+
<div class="text-xs mt-1">emoji-puzzled</div>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="text-center">
|
|
42
|
+
<sonic-icon name="info-empty" size="lg"></sonic-icon>
|
|
43
|
+
<div class="text-xs mt-1">info-empty</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="text-center">
|
|
46
|
+
<sonic-icon name="loader" size="lg"></sonic-icon>
|
|
47
|
+
<div class="text-xs mt-1">loader</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="text-center">
|
|
50
|
+
<sonic-icon name="minus-small" size="lg"></sonic-icon>
|
|
51
|
+
<div class="text-xs mt-1">minus-small</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="text-center">
|
|
54
|
+
<sonic-icon name="more-horiz" size="lg"></sonic-icon>
|
|
55
|
+
<div class="text-xs mt-1">more-horiz</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="text-center">
|
|
58
|
+
<sonic-icon name="more-vert" size="lg"></sonic-icon>
|
|
59
|
+
<div class="text-xs mt-1">more-vert</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="text-center">
|
|
62
|
+
<sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
|
|
63
|
+
<div class="text-xs mt-1">nav-arrow-down</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="text-center">
|
|
66
|
+
<sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
|
|
67
|
+
<div class="text-xs mt-1">warning-circled-outline</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</code></pre>
|
|
71
|
+
<h2 id="external-libraries">External libraries</h2>
|
|
72
|
+
<p>Set <strong><code>library</code></strong> to load SVGs from a built-in CDN template. <strong><code>prefix</code></strong> falls back to each library’s default when omitted (<code>outline</code> for <strong><code>heroicons</code></strong>, <strong><code>regular</code></strong> for <strong><code>fontAwesome</code></strong> and <strong><code>material</code></strong>, and so on).</p>
|
|
73
|
+
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
74
|
+
<sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
|
|
75
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
76
|
+
<br />
|
|
77
|
+
<div class="text-xs mt-1">heroicons</div>
|
|
78
|
+
</sonic-link>
|
|
79
|
+
<sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
|
|
80
|
+
<sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
|
|
81
|
+
<br />
|
|
82
|
+
<div class="text-xs mt-1">iconoir</div>
|
|
83
|
+
</sonic-link>
|
|
84
|
+
<sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
|
|
85
|
+
<sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
|
|
86
|
+
<br />
|
|
87
|
+
<div class="text-xs mt-1">material design</div>
|
|
88
|
+
</sonic-link>
|
|
89
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
|
|
90
|
+
<sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
|
|
91
|
+
<br />
|
|
92
|
+
<div class="text-xs mt-1">fontAwesome regular</div>
|
|
93
|
+
</sonic-link>
|
|
94
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
|
|
95
|
+
<sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
|
|
96
|
+
<br />
|
|
97
|
+
<div class="text-xs mt-1">fontAwesome solid</div>
|
|
98
|
+
</sonic-link>
|
|
99
|
+
<sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
|
|
100
|
+
<sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
|
|
101
|
+
<br />
|
|
102
|
+
<div class="text-xs mt-1">feathers</div>
|
|
103
|
+
</sonic-link>
|
|
104
|
+
<sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
|
|
105
|
+
<sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
|
|
106
|
+
<br />
|
|
107
|
+
<div class="text-xs mt-1">lucide</div>
|
|
108
|
+
</sonic-link>
|
|
109
|
+
</div>
|
|
110
|
+
</code></pre>
|
|
111
|
+
<h2 id="custom-library">Custom library</h2>
|
|
112
|
+
<p>Use <strong><code>library="custom"</code></strong> with SVG files on your origin. On an ancestor (for example <strong><code>sonic-scope</code></strong> or <strong><code>sonic-code</code></strong>), set <strong><code>customIconLibraryPath</code></strong> to a URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong> placeholders, and optionally <strong><code>customIconDefaultPrefix</code></strong> when <strong><code>prefix</code></strong> is omitted.</p>
|
|
113
|
+
<pre><code><sonic-scope
|
|
114
|
+
customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
115
|
+
customIconDefaultPrefix="regular"
|
|
116
|
+
>
|
|
117
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
118
|
+
<div class="text-center">
|
|
119
|
+
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
120
|
+
<br />
|
|
121
|
+
<div class="text-xs mt-1">regular</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="text-center">
|
|
124
|
+
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
125
|
+
<br />
|
|
126
|
+
<div class="text-xs mt-1">solid</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="text-center">
|
|
129
|
+
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
130
|
+
<br />
|
|
131
|
+
<div class="text-xs mt-1">default prefix</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</sonic-scope>
|
|
135
|
+
</code></pre>
|
|
136
|
+
<h2 id="size">Size</h2>
|
|
137
|
+
<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height, inherited from the font size). Steps go from <code>2xs</code> to <code>3xl</code>.</p>
|
|
138
|
+
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
139
|
+
<div class="text-center">
|
|
140
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
141
|
+
<br />
|
|
142
|
+
<div class="text-xs mt-1">2xs</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="text-center">
|
|
145
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
|
|
146
|
+
<br />
|
|
147
|
+
<div class="text-xs mt-1">xs</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="text-center">
|
|
150
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
|
|
151
|
+
<br />
|
|
152
|
+
<div class="text-xs mt-1">sm</div>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="text-center">
|
|
155
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
|
|
156
|
+
<br />
|
|
157
|
+
<div class="text-xs mt-1">default</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="text-center">
|
|
160
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
161
|
+
<br />
|
|
162
|
+
<div class="text-xs mt-1">lg</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="text-center">
|
|
165
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
|
|
166
|
+
<br />
|
|
167
|
+
<div class="text-xs mt-1">xl</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="text-center">
|
|
170
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
|
|
171
|
+
<br />
|
|
172
|
+
<div class="text-xs mt-1">2xl</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="text-center">
|
|
175
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
|
|
176
|
+
<br />
|
|
177
|
+
<div class="text-xs mt-1">3xl</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</code></pre>
|
|
181
|
+
<h2 id="accessibility">Accessibility</h2>
|
|
182
|
+
<p>On connect, the host sets <strong><code>aria-hidden="true"</code></strong>. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on <strong><code>sonic-icon</code></strong> alone for meaning—use visible text or <strong><code>aria-label</code></strong> on the parent button / link.</p>
|
|
183
|
+
<pre><code><sonic-button type="neutral" variant="outline" shape="circle" aria-label="Flight details">
|
|
184
|
+
<sonic-icon library="iconoir" name="airplane"></sonic-icon>
|
|
185
|
+
</sonic-button>
|
|
186
|
+
</code></pre>
|
|
187
|
+
<h2 id="api-reference">API reference</h2>
|
|
188
|
+
<table>
|
|
189
|
+
<thead>
|
|
190
|
+
<tr>
|
|
191
|
+
<th>Attribute</th>
|
|
192
|
+
<th>Values</th>
|
|
193
|
+
<th>Description</th>
|
|
194
|
+
</tr>
|
|
195
|
+
</thead>
|
|
196
|
+
<tbody><tr>
|
|
197
|
+
<td><code>name</code></td>
|
|
198
|
+
<td>string</td>
|
|
199
|
+
<td>Icon id in the core bundle or in the remote library</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td><code>library</code></td>
|
|
203
|
+
<td><code>heroicons</code> · <code>iconoir</code> · <code>feathers</code> · <code>lucide</code> · <code>material</code> · <code>fontAwesome</code> · <code>custom</code></td>
|
|
204
|
+
<td>CDN or custom template; omit for bundled core icons</td>
|
|
205
|
+
</tr>
|
|
206
|
+
<tr>
|
|
207
|
+
<td><code>prefix</code></td>
|
|
208
|
+
<td>string</td>
|
|
209
|
+
<td>Library-specific variant; defaults per library when empty</td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td><code>size</code></td>
|
|
213
|
+
<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>1em</code>, no attribute)</td>
|
|
214
|
+
<td><code>em</code>-based SVG scale on the host</td>
|
|
215
|
+
</tr>
|
|
216
|
+
</tbody></table>
|
|
217
|
+
<p>Ancestor attributes (for <strong><code>library="custom"</code></strong> only): <strong><code>customIconLibraryPath</code></strong> (URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong>) and <strong><code>customIconDefaultPrefix</code></strong>. May be set on <strong><code>sonic-scope</code></strong>, theme roots, or globally in the document.</p>
|
|
218
|
+
<p>No slots — the component inlines fetched or bundled SVG markup.</p>
|
|
219
|
+
|
|
220
|
+
</article>
|
|
221
|
+
</main>
|
|
222
|
+
</body>
|
|
223
|
+
</html>
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
# Icon
|
|
2
|
+
|
|
3
|
+
**`sonic-icon`** renders inline SVG icons from the **bundled core set** or from **CDN libraries**. Set **`name`** (and **`library`** / **`prefix`** when needed); scale with **`size`**. Icons inherit **`currentColor`** and are **`aria-hidden`** by default—keep visible text nearby or label the control that contains them.
|
|
4
|
+
|
|
5
|
+
## Core library
|
|
6
|
+
|
|
7
|
+
Omit **`library`** to use the bundled set in `icons.json`. Available **`name`** values: `cancel` · `check` · `check-circled-outline` · `emoji-puzzled` · `info-empty` · `loader` · `minus-small` · `more-horiz` · `more-vert` · `nav-arrow-down` · `warning-circled-outline`.
|
|
8
|
+
|
|
9
|
+
<sonic-code>
|
|
10
|
+
<template>
|
|
11
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
12
|
+
<div class="text-center">
|
|
13
|
+
<sonic-icon name="cancel" size="lg"></sonic-icon>
|
|
14
|
+
<div class="text-xs mt-1">cancel</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="text-center">
|
|
17
|
+
<sonic-icon name="check" size="lg"></sonic-icon>
|
|
18
|
+
<div class="text-xs mt-1">check</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="text-center">
|
|
21
|
+
<sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
|
|
22
|
+
<div class="text-xs mt-1">check-circled-outline</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="text-center">
|
|
25
|
+
<sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
|
|
26
|
+
<div class="text-xs mt-1">emoji-puzzled</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="text-center">
|
|
29
|
+
<sonic-icon name="info-empty" size="lg"></sonic-icon>
|
|
30
|
+
<div class="text-xs mt-1">info-empty</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="text-center">
|
|
33
|
+
<sonic-icon name="loader" size="lg"></sonic-icon>
|
|
34
|
+
<div class="text-xs mt-1">loader</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="text-center">
|
|
37
|
+
<sonic-icon name="minus-small" size="lg"></sonic-icon>
|
|
38
|
+
<div class="text-xs mt-1">minus-small</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="text-center">
|
|
41
|
+
<sonic-icon name="more-horiz" size="lg"></sonic-icon>
|
|
42
|
+
<div class="text-xs mt-1">more-horiz</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="text-center">
|
|
45
|
+
<sonic-icon name="more-vert" size="lg"></sonic-icon>
|
|
46
|
+
<div class="text-xs mt-1">more-vert</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="text-center">
|
|
49
|
+
<sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
|
|
50
|
+
<div class="text-xs mt-1">nav-arrow-down</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="text-center">
|
|
53
|
+
<sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
|
|
54
|
+
<div class="text-xs mt-1">warning-circled-outline</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</template>
|
|
58
|
+
</sonic-code>
|
|
59
|
+
|
|
60
|
+
## External libraries
|
|
61
|
+
|
|
62
|
+
Set **`library`** to load SVGs from a built-in CDN template. **`prefix`** falls back to each library’s default when omitted (`outline` for **`heroicons`**, **`regular`** for **`fontAwesome`** and **`material`**, and so on).
|
|
63
|
+
|
|
64
|
+
<sonic-code>
|
|
65
|
+
<template>
|
|
66
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
67
|
+
<sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
|
|
68
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
69
|
+
<br />
|
|
70
|
+
<div class="text-xs mt-1">heroicons</div>
|
|
71
|
+
</sonic-link>
|
|
72
|
+
<sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
|
|
73
|
+
<sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
|
|
74
|
+
<br />
|
|
75
|
+
<div class="text-xs mt-1">iconoir</div>
|
|
76
|
+
</sonic-link>
|
|
77
|
+
<sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
|
|
78
|
+
<sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
|
|
79
|
+
<br />
|
|
80
|
+
<div class="text-xs mt-1">material design</div>
|
|
81
|
+
</sonic-link>
|
|
82
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
|
|
83
|
+
<sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
|
|
84
|
+
<br />
|
|
85
|
+
<div class="text-xs mt-1">fontAwesome regular</div>
|
|
86
|
+
</sonic-link>
|
|
87
|
+
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
|
|
88
|
+
<sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
|
|
89
|
+
<br />
|
|
90
|
+
<div class="text-xs mt-1">fontAwesome solid</div>
|
|
91
|
+
</sonic-link>
|
|
92
|
+
<sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
|
|
93
|
+
<sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
|
|
94
|
+
<br />
|
|
95
|
+
<div class="text-xs mt-1">feathers</div>
|
|
96
|
+
</sonic-link>
|
|
97
|
+
<sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
|
|
98
|
+
<sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
|
|
99
|
+
<br />
|
|
100
|
+
<div class="text-xs mt-1">lucide</div>
|
|
101
|
+
</sonic-link>
|
|
102
|
+
</div>
|
|
103
|
+
</template>
|
|
104
|
+
</sonic-code>
|
|
105
|
+
|
|
106
|
+
## Custom library
|
|
107
|
+
|
|
108
|
+
Use **`library="custom"`** with SVG files on your origin. On an ancestor (for example **`sonic-scope`** or **`sonic-code`**), set **`customIconLibraryPath`** to a URL template with **`$prefix`** and **`$name`** placeholders, and optionally **`customIconDefaultPrefix`** when **`prefix`** is omitted.
|
|
109
|
+
|
|
110
|
+
<sonic-code
|
|
111
|
+
customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
112
|
+
customIconDefaultPrefix="regular"
|
|
113
|
+
>
|
|
114
|
+
<template>
|
|
115
|
+
<sonic-scope
|
|
116
|
+
customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
117
|
+
customIconDefaultPrefix="regular"
|
|
118
|
+
>
|
|
119
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
120
|
+
<div class="text-center">
|
|
121
|
+
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
122
|
+
<br />
|
|
123
|
+
<div class="text-xs mt-1">regular</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="text-center">
|
|
126
|
+
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
127
|
+
<br />
|
|
128
|
+
<div class="text-xs mt-1">solid</div>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="text-center">
|
|
131
|
+
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
132
|
+
<br />
|
|
133
|
+
<div class="text-xs mt-1">default prefix</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</sonic-scope>
|
|
137
|
+
</template>
|
|
138
|
+
</sonic-code>
|
|
139
|
+
|
|
140
|
+
## Size
|
|
141
|
+
|
|
142
|
+
Omit **`size`** for the default scale (`1em` height, inherited from the font size). Steps go from `2xs` to `3xl`.
|
|
143
|
+
|
|
144
|
+
<sonic-code>
|
|
145
|
+
<template>
|
|
146
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
147
|
+
<div class="text-center">
|
|
148
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
149
|
+
<br />
|
|
150
|
+
<div class="text-xs mt-1">2xs</div>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="text-center">
|
|
153
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
|
|
154
|
+
<br />
|
|
155
|
+
<div class="text-xs mt-1">xs</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="text-center">
|
|
158
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
|
|
159
|
+
<br />
|
|
160
|
+
<div class="text-xs mt-1">sm</div>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="text-center">
|
|
163
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
|
|
164
|
+
<br />
|
|
165
|
+
<div class="text-xs mt-1">default</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="text-center">
|
|
168
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
169
|
+
<br />
|
|
170
|
+
<div class="text-xs mt-1">lg</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="text-center">
|
|
173
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
|
|
174
|
+
<br />
|
|
175
|
+
<div class="text-xs mt-1">xl</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="text-center">
|
|
178
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
|
|
179
|
+
<br />
|
|
180
|
+
<div class="text-xs mt-1">2xl</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="text-center">
|
|
183
|
+
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
|
|
184
|
+
<br />
|
|
185
|
+
<div class="text-xs mt-1">3xl</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</template>
|
|
189
|
+
</sonic-code>
|
|
190
|
+
|
|
191
|
+
## Accessibility
|
|
192
|
+
|
|
193
|
+
On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on **`sonic-icon`** alone for meaning—use visible text or **`aria-label`** on the parent button / link.
|
|
194
|
+
|
|
195
|
+
<sonic-code>
|
|
196
|
+
<template>
|
|
197
|
+
<sonic-button type="neutral" variant="outline" shape="circle" aria-label="Flight details">
|
|
198
|
+
<sonic-icon library="iconoir" name="airplane"></sonic-icon>
|
|
199
|
+
</sonic-button>
|
|
200
|
+
</template>
|
|
201
|
+
</sonic-code>
|
|
202
|
+
|
|
203
|
+
## API reference
|
|
204
|
+
|
|
205
|
+
| Attribute | Values | Description |
|
|
206
|
+
|----------|---------|-------------|
|
|
207
|
+
| `name` | string | Icon id in the core bundle or in the remote library |
|
|
208
|
+
| `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
|
|
209
|
+
| `prefix` | string | Library-specific variant; defaults per library when empty |
|
|
210
|
+
| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `1em`, no attribute) | `em`-based SVG scale on the host |
|
|
211
|
+
|
|
212
|
+
Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.
|
|
213
|
+
|
|
214
|
+
No slots — the component inlines fetched or bundled SVG markup.
|