@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,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.
|