@supersoniks/concorde 5.0.3 → 5.0.5
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-component-docs/SKILL.md +194 -0
- package/.agents/skills/concorde-component-docs/template.md +45 -0
- package/ai/cursor/rules/concorde-theme.mdc +1 -1
- package/ai/cursor/rules/concorde.mdc +1 -1
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-theme/SKILL.md +21 -10
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +515 -521
- package/concorde-core.es.js +5151 -5056
- package/dist/concorde-core.bundle.js +515 -521
- package/dist/concorde-core.es.js +5151 -5056
- package/dist/docs-mock-api-sw.js +2 -0
- package/dist/docs-mock-api-sw.js.map +2 -2
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/{index-BnK6OS7w.js → index-wVZpLVYW.js} +815 -808
- package/docs/crawl/core/components/ui/alert/alert.html +76 -5
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
- package/docs/crawl/core/components/ui/badge/badge.html +57 -8
- package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
- package/docs/crawl/core/components/ui/card/card.html +122 -12
- package/docs/crawl/core/components/ui/divider/divider.html +117 -31
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
- package/docs/crawl/core/components/ui/group/group.html +60 -38
- package/docs/crawl/core/components/ui/icon/icon.html +136 -47
- package/docs/crawl/core/components/ui/image/image.html +118 -6
- package/docs/crawl/core/components/ui/link/link.html +65 -7
- package/docs/crawl/core/components/ui/loader/loader.html +97 -23
- package/docs/crawl/core/components/ui/menu/menu.html +162 -90
- package/docs/crawl/core/components/ui/modal/modal.html +275 -50
- package/docs/crawl/core/components/ui/pop/pop.html +242 -124
- package/docs/crawl/core/components/ui/progress/progress.html +103 -30
- package/docs/crawl/core/components/ui/table/table.html +303 -171
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +170 -59
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
- package/docs/crawl/docs/_getting-started/start.html +1 -1
- package/docs/crawl/docs/_getting-started/theming.html +311 -63
- package/docs/crawl/hubs/form-components.html +71 -49
- package/docs/crawl/index.html +7 -6
- package/docs/docs-mock-api-sw.js +2 -0
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +6 -4
- package/docs/llms-full.txt +1468 -405
- package/docs/llms.txt +23 -30
- package/docs/sitemap.xml +3 -0
- package/docs/src/core/components/ui/alert/alert.md +21 -2
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +19 -6
- package/docs/src/core/components/ui/captcha/captcha.md +65 -6
- package/docs/src/core/components/ui/card/card.md +73 -10
- package/docs/src/core/components/ui/divider/divider.md +107 -13
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/docs/src/core/components/ui/group/group.md +36 -36
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +35 -3
- package/docs/src/core/components/ui/link/link.md +43 -5
- package/docs/src/core/components/ui/loader/loader.md +79 -22
- package/docs/src/core/components/ui/menu/menu.md +133 -92
- package/docs/src/core/components/ui/modal/modal.md +163 -47
- package/docs/src/core/components/ui/pop/pop.md +217 -123
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +147 -171
- package/docs/src/core/components/ui/theme/theme.md +122 -0
- package/docs/src/core/components/ui/toast/toast.md +108 -58
- package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/docs/src/docs/_getting-started/start.md +1 -1
- package/docs/src/docs/_getting-started/theming.md +223 -61
- package/docs/src/docs/search/docs-search.json +2504 -399
- package/docs/src/tsconfig.json +18 -0
- package/index.html +4 -2
- package/package.json +7 -1
- package/public/docs-mock-api-sw.js +2 -0
- package/public/docs-mock-api-sw.js.map +2 -2
- package/src/core/components/ui/_css/align.ts +1 -0
- package/src/core/components/ui/_css/type.ts +86 -8
- package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
- package/src/core/components/ui/alert/alert.md +21 -2
- package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/src/core/components/ui/badge/badge.md +19 -6
- package/src/core/components/ui/badge/badge.ts +8 -9
- package/src/core/components/ui/button/button.ts +5 -15
- package/src/core/components/ui/captcha/captcha.md +65 -6
- package/src/core/components/ui/card/card.md +73 -10
- package/src/core/components/ui/card/card.ts +24 -22
- package/src/core/components/ui/divider/divider.md +107 -13
- package/src/core/components/ui/divider/divider.ts +40 -33
- package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
- package/src/core/components/ui/form/fieldset/legend.ts +13 -13
- package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
- package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
- package/src/core/components/ui/form/textarea/textarea.ts +4 -3
- package/src/core/components/ui/group/group.md +36 -36
- package/src/core/components/ui/group/group.ts +5 -10
- package/src/core/components/ui/icon/icon.md +132 -43
- package/src/core/components/ui/image/image.md +35 -3
- package/src/core/components/ui/link/link.md +43 -5
- package/src/core/components/ui/loader/loader.md +79 -22
- package/src/core/components/ui/loader/loader.ts +67 -27
- package/src/core/components/ui/loader/styles/fixed.ts +6 -11
- package/src/core/components/ui/menu/menu.md +133 -92
- package/src/core/components/ui/menu/menu.ts +53 -58
- package/src/core/components/ui/modal/modal.md +163 -47
- package/src/core/components/ui/modal/modal.ts +2 -4
- package/src/core/components/ui/pop/pop.md +217 -123
- package/src/core/components/ui/pop/pop.ts +0 -1
- package/src/core/components/ui/progress/progress.md +76 -30
- package/src/core/components/ui/progress/progress.ts +25 -56
- package/src/core/components/ui/table/table-caption.ts +2 -2
- package/src/core/components/ui/table/table-tbody.ts +3 -3
- package/src/core/components/ui/table/table-td.ts +23 -18
- package/src/core/components/ui/table/table-th.ts +8 -8
- package/src/core/components/ui/table/table-tr.ts +4 -4
- package/src/core/components/ui/table/table.md +147 -171
- package/src/core/components/ui/table/table.ts +20 -19
- package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
- package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
- package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
- package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
- package/src/core/components/ui/theme/theme.md +122 -0
- package/src/core/components/ui/theme/theme.ts +30 -7
- package/src/core/components/ui/toast/toast-item.ts +6 -9
- package/src/core/components/ui/toast/toast.md +108 -58
- package/src/core/components/ui/toast/types.ts +1 -1
- package/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
- package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
- package/src/core/utils/AncestorAttributeObserver.ts +183 -70
- package/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/src/docs/_getting-started/start.md +1 -1
- package/src/docs/_getting-started/theming.md +223 -61
- package/src/docs/code.ts +125 -58
- package/src/docs/header/header.ts +62 -54
- package/src/docs/mock-api/router.ts +2 -0
- package/src/docs/navigation/navigation.ts +6 -3
- package/src/docs/search/docs-search.json +2504 -399
- package/src/docs/search/markdown-renderer.ts +6 -6
- package/src/docs/search/search.ts +4 -4
- package/src/docs/tailwind/css/tailwind.css +6 -5
- package/src/tsconfig.json +18 -0
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +19 -0
- package/docs/assets/index--GpD7R7a.css +0 -1
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Form
|
|
7
|
-
<meta name="description" content="autocomplete
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form
|
|
6
|
+
<title>Form layout — Concorde</title>
|
|
7
|
+
<meta name="description" content="sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth">
|
|
9
9
|
<meta name="concorde-doc-id" content="core/components/ui/form/form-layout/form-layout">
|
|
10
10
|
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">
|
|
11
11
|
</head>
|
|
@@ -15,46 +15,105 @@
|
|
|
15
15
|
</header>
|
|
16
16
|
<main>
|
|
17
17
|
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form
|
|
19
|
-
<h1 id="form-layout">Form
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Form layout</strong>. sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the ho <span>Doc ID: <code>core/components/ui/form/form-layout/form-layout</code>. Keywords: Concorde, supersoniks, core/components/ui/form/form-layout/form-layout, form-layout, Form layout, UI component, form, sonic-form-layout, web component, sonic-input, sonic-select, sonic-input-autocomplete, sonic-form-actions, sonic-fieldset, offsetWidth. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/form-layout/form-layout.html</a>.</span></p>
|
|
19
|
+
<h1 id="form-layout">Form layout</h1>
|
|
20
|
+
<p><strong><code>sonic-form-layout</code></strong> arranges slotted form controls in a <strong>responsive CSS grid</strong> with consistent vertical spacing. Pair <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> and <strong><code>sonic-input-autocomplete</code></strong> fields side by side when the host is wider than <strong>440px</strong>; <strong>textareas</strong>, <strong>toggles</strong>, <strong>dividers</strong>, and <strong><code>sonic-form-actions</code></strong> span the full width. Wrap a <strong><code>form</code></strong> or <strong><code>sonic-fieldset</code></strong> body—no attributes are required.</p>
|
|
21
|
+
<h2 id="basic-example">Basic example</h2>
|
|
22
|
+
<p>Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.</p>
|
|
20
23
|
<pre><code><form>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
24
|
+
<sonic-form-layout>
|
|
25
|
+
<sonic-input autocomplete="family-name" label="Last name" name="last_name"></sonic-input>
|
|
26
|
+
<sonic-input autocomplete="given-name" label="First name" name="first_name"></sonic-input>
|
|
27
|
+
<sonic-select autocomplete="sex" label="Gender" name="gender">
|
|
28
|
+
<option value="" selected="selected">— Select —</option>
|
|
29
|
+
<option value="prefer-not">Prefer not to say</option>
|
|
30
|
+
<option value="male">Male</option>
|
|
31
|
+
<option value="female">Female</option>
|
|
32
|
+
</sonic-select>
|
|
33
|
+
<sonic-input autocomplete="bday" label="Date of birth" name="birth_date" type="date"></sonic-input>
|
|
34
|
+
<sonic-divider></sonic-divider>
|
|
35
|
+
<sonic-input autocomplete="email" label="Email" name="email" type="email"></sonic-input>
|
|
36
|
+
<sonic-input
|
|
37
|
+
autocomplete="email"
|
|
38
|
+
label="Confirm email"
|
|
39
|
+
name="email_confirmation"
|
|
40
|
+
type="email"
|
|
41
|
+
></sonic-input>
|
|
42
|
+
<sonic-input autocomplete="new-password" label="Password" name="password" type="password"></sonic-input>
|
|
43
|
+
<sonic-input
|
|
44
|
+
autocomplete="new-password"
|
|
45
|
+
label="Confirm password"
|
|
46
|
+
name="password_confirmation"
|
|
47
|
+
type="password"
|
|
48
|
+
></sonic-input>
|
|
49
|
+
<sonic-divider></sonic-divider>
|
|
50
|
+
<sonic-textarea label="Message" rows="5"></sonic-textarea>
|
|
51
|
+
<sonic-switch>Enable optional feature</sonic-switch>
|
|
52
|
+
<sonic-checkbox>Subscribe to newsletter</sonic-checkbox>
|
|
53
|
+
<sonic-checkbox>
|
|
54
|
+
I accept the
|
|
55
|
+
<sonic-link href="#" class="underline">terms and conditions</sonic-link>
|
|
56
|
+
</sonic-checkbox>
|
|
57
|
+
<sonic-form-actions>
|
|
58
|
+
<sonic-button type="success">Submit</sonic-button>
|
|
59
|
+
</sonic-form-actions>
|
|
60
|
+
</sonic-form-layout>
|
|
61
|
+
</form>
|
|
62
|
+
</code></pre>
|
|
63
|
+
<h2 id="responsive-columns">Responsive columns</h2>
|
|
64
|
+
<p>When the host <strong><code>offsetWidth</code></strong> is <strong>greater than 440px</strong>, the grid uses <strong>two equal columns</strong> with slightly larger gap (<strong>1.75rem</strong>). Below that breakpoint, fields stack in a <strong>single column</strong> (<strong>1.5rem</strong> gap).</p>
|
|
65
|
+
<p>If the slot contains <strong>exactly one</strong> direct <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, or <strong><code>sonic-input-autocomplete</code></strong>, the layout stays <strong>one column</strong> even above the breakpoint so a lone field does not sit in half an empty row.</p>
|
|
66
|
+
<pre><code><div class="grid gap-8 md:grid-cols-2 mb-6">
|
|
67
|
+
<div>
|
|
68
|
+
<sonic-form-layout style="max-width: 20rem">
|
|
69
|
+
<sonic-divider align="left">Narrow host (single column)</sonic-divider>
|
|
70
|
+
<sonic-input label="Email" name="email_narrow" type="email"></sonic-input>
|
|
71
|
+
<sonic-input label="Confirm email" name="email_confirm_narrow" type="email"></sonic-input>
|
|
72
|
+
</sonic-form-layout>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<sonic-form-layout>
|
|
77
|
+
<sonic-divider align="left">Wide host (two columns for inputs)</sonic-divider>
|
|
78
|
+
<sonic-input label="Email" name="email_wide" type="email"></sonic-input>
|
|
79
|
+
<sonic-input label="Confirm email" name="email_confirm_wide" type="email"></sonic-input>
|
|
80
|
+
</sonic-form-layout>
|
|
81
|
+
</div>
|
|
82
|
+
</code></pre>
|
|
83
|
+
<h2 id="full-width-slotted-blocks">Full-width slotted blocks</h2>
|
|
84
|
+
<p>Everything except <strong><code>sonic-input</code></strong>, <strong><code>sonic-select</code></strong>, <strong><code>sonic-input-autocomplete</code></strong>, and slotted elements with class <strong><code>form-item-container</code></strong> is assigned <strong><code>grid-column: 1 / -1</code></strong>. Use this for <strong><code>sonic-textarea</code></strong>, <strong><code>sonic-checkbox</code></strong>, <strong><code>sonic-switch</code></strong>, <strong><code>sonic-form-actions</code></strong>, <strong><code>sonic-divider</code></strong>, and similar blocks.</p>
|
|
85
|
+
<p>Slotted <strong><code>sonic-divider</code></strong> sets <strong><code>--sc-divider-my: 0</code></strong> so divider spacing matches the grid rhythm. Slotted <strong><code>sonic-submit</code></strong> uses <strong><code>display: contents</code></strong> so submit controls participate in the grid without an extra wrapper box.</p>
|
|
86
|
+
<pre><code><sonic-form-layout>
|
|
87
|
+
<sonic-input label="Subject" name="subject"></sonic-input>
|
|
88
|
+
<sonic-textarea label="Details" rows="4"></sonic-textarea>
|
|
52
89
|
<sonic-form-actions>
|
|
53
|
-
<sonic-button type="
|
|
90
|
+
<sonic-button type="primary">Send</sonic-button>
|
|
54
91
|
</sonic-form-actions>
|
|
55
92
|
</sonic-form-layout>
|
|
56
|
-
</form >
|
|
57
93
|
</code></pre>
|
|
94
|
+
<h2 id="custom-column-wrapper">Custom column wrapper</h2>
|
|
95
|
+
<p>Add class <strong><code>form-item-container</code></strong> on a slotted wrapper (for example a <strong><code>div</code></strong>) when a field is not a direct <strong><code>sonic-input</code></strong> / <strong><code>sonic-select</code></strong> / <strong><code>sonic-input-autocomplete</code></strong> but should still share the two-column flow with short inputs.</p>
|
|
96
|
+
<pre><code><sonic-form-layout>
|
|
97
|
+
<sonic-input label="City" name="city"></sonic-input>
|
|
98
|
+
<div class="form-item-container">
|
|
99
|
+
<sonic-input label="Postal code" name="postal_code"></sonic-input>
|
|
100
|
+
</div>
|
|
101
|
+
</sonic-form-layout>
|
|
102
|
+
</code></pre>
|
|
103
|
+
<h2 id="api-reference">API reference</h2>
|
|
104
|
+
<p>No public attributes — layout follows slotted children and host width.</p>
|
|
105
|
+
<table>
|
|
106
|
+
<thead>
|
|
107
|
+
<tr>
|
|
108
|
+
<th>Slot</th>
|
|
109
|
+
<th>Description</th>
|
|
110
|
+
</tr>
|
|
111
|
+
</thead>
|
|
112
|
+
<tbody><tr>
|
|
113
|
+
<td><em>(default)</em></td>
|
|
114
|
+
<td>Form fields and blocks in visual order; column vs full-width rules apply per slotted tag or <strong><code>form-item-container</code></strong> class</td>
|
|
115
|
+
</tr>
|
|
116
|
+
</tbody></table>
|
|
58
117
|
|
|
59
118
|
</article>
|
|
60
119
|
</main>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Group — Concorde</title>
|
|
7
|
-
<meta name="description" content="
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component">
|
|
7
|
+
<meta name="description" content="sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider">
|
|
9
9
|
<meta name="concorde-doc-id" content="core/components/ui/group/group">
|
|
10
10
|
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html">
|
|
11
11
|
</head>
|
|
@@ -15,9 +15,11 @@
|
|
|
15
15
|
</header>
|
|
16
16
|
<main>
|
|
17
17
|
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Group</strong>.
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Group</strong>. sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description fol <span>Doc ID: <code>core/components/ui/group/group</code>. Keywords: Concorde, supersoniks, core/components/ui/group/group, group, Group, UI component, sonic-group, web component, sonic-button, sonic-input, sonic-select, label, description, radio, name, formDataProvider. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html">https://concorde.supersoniks.org/crawl/core/components/ui/group/group.html</a>.</span></p>
|
|
19
19
|
<h1 id="group">Group</h1>
|
|
20
|
+
<p><strong><code>sonic-group</code></strong> lays out slotted <strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> and <strong><code>sonic-select</code></strong> controls in a single horizontal row with <strong>shared corner radius</strong> (first / middle / last items). Optional <strong><code>label</code></strong> and <strong><code>description</code></strong> follow form field styling. Use it for <strong>button groups</strong>, <strong>radio rows</strong>, or <strong>input + action</strong> toolbars.</p>
|
|
20
21
|
<h2 id="radio-group">Radio group</h2>
|
|
22
|
+
<p>Pair with <strong><code>sonic-button</code></strong> <strong><code>radio</code></strong> and a shared <strong><code>name</code></strong>; ancestor <strong><code>formDataProvider</code></strong> stores the selected <strong><code>value</code></strong>.</p>
|
|
21
23
|
<pre><code><sonic-group formDataProvider="subscriptionData">
|
|
22
24
|
<sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
|
|
23
25
|
<sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
|
|
@@ -25,56 +27,76 @@
|
|
|
25
27
|
</sonic-group>
|
|
26
28
|
</code></pre>
|
|
27
29
|
<h2 id="button-group">Button group</h2>
|
|
30
|
+
<p>Adjacent link or action buttons without merging into one control.</p>
|
|
28
31
|
<pre><code><sonic-group>
|
|
29
|
-
<sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
|
|
32
|
+
<sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼 Air France</sonic-button>
|
|
30
33
|
<sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
|
|
31
34
|
<sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
|
|
32
35
|
</sonic-group>
|
|
33
36
|
</code></pre>
|
|
34
37
|
<h2 id="input-actions-prefix">Input actions prefix</h2>
|
|
35
|
-
<
|
|
36
|
-
|
|
38
|
+
<p>Action control before the field. <strong><code>label</code></strong> or <strong><code>description</code></strong> on <strong><code>sonic-group</code></strong> annotate the row.</p>
|
|
39
|
+
<pre><code><sonic-group label="Label" description="Description">
|
|
37
40
|
<sonic-button type="info" shape="square">
|
|
38
|
-
<sonic-icon library="iconoir"
|
|
41
|
+
<sonic-icon library="iconoir" name="info-empty"></sonic-icon>
|
|
39
42
|
</sonic-button>
|
|
40
|
-
<sonic-input
|
|
43
|
+
<sonic-input></sonic-input>
|
|
41
44
|
</sonic-group>
|
|
42
|
-
<sonic-group label="Label">
|
|
43
|
-
<sonic-button type="info" shape="square">
|
|
44
|
-
<sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
|
|
45
|
-
</sonic-button>
|
|
46
|
-
<sonic-input ></sonic-input>
|
|
47
|
-
</sonic-group>
|
|
48
|
-
<sonic-group description="Description">
|
|
49
|
-
<sonic-button type="info" shape="square">
|
|
50
|
-
<sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
|
|
51
|
-
</sonic-button>
|
|
52
|
-
<sonic-input ></sonic-input>
|
|
53
|
-
</sonic-group>
|
|
54
|
-
</div>
|
|
55
45
|
</code></pre>
|
|
56
46
|
<h2 id="input-actions-suffix">Input actions suffix</h2>
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
<sonic-input
|
|
60
|
-
<sonic-button type="primary" shape="square">
|
|
61
|
-
<sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
|
|
62
|
-
</sonic-button>
|
|
63
|
-
</sonic-group>
|
|
64
|
-
<sonic-group label="Label">
|
|
65
|
-
<sonic-input ></sonic-input>
|
|
66
|
-
<sonic-button type="primary" shape="square">
|
|
67
|
-
<sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
|
|
68
|
-
</sonic-button>
|
|
69
|
-
</sonic-group>
|
|
70
|
-
<sonic-group description="Description">
|
|
71
|
-
<sonic-input ></sonic-input>
|
|
47
|
+
<p>Field first, action after (submit, validate, etc.).</p>
|
|
48
|
+
<pre><code><sonic-group label="Label" description="Description">
|
|
49
|
+
<sonic-input></sonic-input>
|
|
72
50
|
<sonic-button type="primary" shape="square">
|
|
73
|
-
<sonic-icon library="iconoir"
|
|
51
|
+
<sonic-icon library="iconoir" name="check"></sonic-icon>
|
|
74
52
|
</sonic-button>
|
|
75
53
|
</sonic-group>
|
|
76
|
-
</div>
|
|
77
54
|
</code></pre>
|
|
55
|
+
<h2 id="api-reference">API reference</h2>
|
|
56
|
+
<table>
|
|
57
|
+
<thead>
|
|
58
|
+
<tr>
|
|
59
|
+
<th>Attribute</th>
|
|
60
|
+
<th>Values</th>
|
|
61
|
+
<th>Description</th>
|
|
62
|
+
</tr>
|
|
63
|
+
</thead>
|
|
64
|
+
<tbody><tr>
|
|
65
|
+
<td><code>label</code></td>
|
|
66
|
+
<td>string (HTML)</td>
|
|
67
|
+
<td>Label above the row; <strong><code>slot="label"</code></strong> overrides / extends</td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><code>description</code></td>
|
|
71
|
+
<td>string (HTML)</td>
|
|
72
|
+
<td>Help text below the row; <strong><code>slot="description"</code></strong> overrides / extends</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td><code>alignItems</code></td>
|
|
76
|
+
<td>CSS align-items (default <code>center</code>)</td>
|
|
77
|
+
<td>Cross-axis alignment of the main flex row</td>
|
|
78
|
+
</tr>
|
|
79
|
+
</tbody></table>
|
|
80
|
+
<table>
|
|
81
|
+
<thead>
|
|
82
|
+
<tr>
|
|
83
|
+
<th>Slot</th>
|
|
84
|
+
<th>Description</th>
|
|
85
|
+
</tr>
|
|
86
|
+
</thead>
|
|
87
|
+
<tbody><tr>
|
|
88
|
+
<td><em>(default)</em></td>
|
|
89
|
+
<td><strong><code>sonic-button</code></strong> · <strong><code>sonic-input</code></strong> · <strong><code>sonic-select</code></strong> in visual order</td>
|
|
90
|
+
</tr>
|
|
91
|
+
<tr>
|
|
92
|
+
<td><code>label</code></td>
|
|
93
|
+
<td>Custom label markup</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td><code>description</code></td>
|
|
97
|
+
<td>Custom description markup</td>
|
|
98
|
+
</tr>
|
|
99
|
+
</tbody></table>
|
|
78
100
|
|
|
79
101
|
</article>
|
|
80
102
|
</main>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Icon — Concorde</title>
|
|
7
|
-
<meta name="description" content="
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component">
|
|
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
9
|
<meta name="concorde-doc-id" content="core/components/ui/icon/icon">
|
|
10
10
|
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">
|
|
11
11
|
</head>
|
|
@@ -15,117 +15,206 @@
|
|
|
15
15
|
</header>
|
|
16
16
|
<main>
|
|
17
17
|
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>.
|
|
18
|
+
<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/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
|
|
19
19
|
<h1 id="icon">Icon</h1>
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
28
|
-
<div class="text-center">
|
|
29
|
-
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
30
|
-
<br>
|
|
31
|
-
<div class="text-xs mt-1">regular</div>
|
|
32
|
-
</div>
|
|
33
|
-
<div class="text-center">
|
|
34
|
-
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
35
|
-
<br>
|
|
36
|
-
<div class="text-xs mt-1">solid</div>
|
|
37
|
-
</div>
|
|
38
|
-
<div class="text-center">
|
|
39
|
-
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
40
|
-
<br>
|
|
41
|
-
<div class="text-xs mt-1">default prefix</div>
|
|
42
|
-
</div>
|
|
20
|
+
<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>
|
|
21
|
+
<h2 id="core-library">Core library</h2>
|
|
22
|
+
<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>
|
|
23
|
+
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
24
|
+
<div class="text-center">
|
|
25
|
+
<sonic-icon name="cancel" size="lg"></sonic-icon>
|
|
26
|
+
<div class="text-xs mt-1">cancel</div>
|
|
43
27
|
</div>
|
|
44
|
-
|
|
28
|
+
<div class="text-center">
|
|
29
|
+
<sonic-icon name="check" size="lg"></sonic-icon>
|
|
30
|
+
<div class="text-xs mt-1">check</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="text-center">
|
|
33
|
+
<sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
|
|
34
|
+
<div class="text-xs mt-1">check-circled-outline</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="text-center">
|
|
37
|
+
<sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
|
|
38
|
+
<div class="text-xs mt-1">emoji-puzzled</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="text-center">
|
|
41
|
+
<sonic-icon name="info-empty" size="lg"></sonic-icon>
|
|
42
|
+
<div class="text-xs mt-1">info-empty</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="text-center">
|
|
45
|
+
<sonic-icon name="loader" size="lg"></sonic-icon>
|
|
46
|
+
<div class="text-xs mt-1">loader</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="text-center">
|
|
49
|
+
<sonic-icon name="minus-small" size="lg"></sonic-icon>
|
|
50
|
+
<div class="text-xs mt-1">minus-small</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="text-center">
|
|
53
|
+
<sonic-icon name="more-horiz" size="lg"></sonic-icon>
|
|
54
|
+
<div class="text-xs mt-1">more-horiz</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="text-center">
|
|
57
|
+
<sonic-icon name="more-vert" size="lg"></sonic-icon>
|
|
58
|
+
<div class="text-xs mt-1">more-vert</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="text-center">
|
|
61
|
+
<sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
|
|
62
|
+
<div class="text-xs mt-1">nav-arrow-down</div>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="text-center">
|
|
65
|
+
<sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
|
|
66
|
+
<div class="text-xs mt-1">warning-circled-outline</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
45
69
|
</code></pre>
|
|
46
|
-
<h2 id="external">External</h2>
|
|
70
|
+
<h2 id="external-libraries">External libraries</h2>
|
|
71
|
+
<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>
|
|
47
72
|
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
48
73
|
<sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
|
|
49
74
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
50
|
-
<br
|
|
75
|
+
<br />
|
|
51
76
|
<div class="text-xs mt-1">heroicons</div>
|
|
52
77
|
</sonic-link>
|
|
53
78
|
<sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
|
|
54
|
-
<sonic-icon library="iconoir" name="2x2-cell"
|
|
55
|
-
<br
|
|
79
|
+
<sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
|
|
80
|
+
<br />
|
|
56
81
|
<div class="text-xs mt-1">iconoir</div>
|
|
57
82
|
</sonic-link>
|
|
58
83
|
<sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
|
|
59
84
|
<sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
|
|
60
|
-
<br
|
|
85
|
+
<br />
|
|
61
86
|
<div class="text-xs mt-1">material design</div>
|
|
62
87
|
</sonic-link>
|
|
63
88
|
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
|
|
64
89
|
<sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
|
|
65
|
-
<br
|
|
90
|
+
<br />
|
|
66
91
|
<div class="text-xs mt-1">fontAwesome regular</div>
|
|
67
92
|
</sonic-link>
|
|
68
93
|
<sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
|
|
69
94
|
<sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
|
|
70
|
-
<br
|
|
95
|
+
<br />
|
|
71
96
|
<div class="text-xs mt-1">fontAwesome solid</div>
|
|
72
97
|
</sonic-link>
|
|
73
98
|
<sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
|
|
74
|
-
<sonic-icon library="feathers" name="activity"
|
|
75
|
-
<br
|
|
99
|
+
<sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
|
|
100
|
+
<br />
|
|
76
101
|
<div class="text-xs mt-1">feathers</div>
|
|
77
102
|
</sonic-link>
|
|
78
103
|
<sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
|
|
79
|
-
<sonic-icon library="lucide" name="album"
|
|
80
|
-
<br
|
|
104
|
+
<sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
|
|
105
|
+
<br />
|
|
81
106
|
<div class="text-xs mt-1">lucide</div>
|
|
82
107
|
</sonic-link>
|
|
83
108
|
</div>
|
|
84
109
|
</code></pre>
|
|
110
|
+
<h2 id="custom-library">Custom library</h2>
|
|
111
|
+
<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>
|
|
112
|
+
<pre><code><sonic-scope
|
|
113
|
+
customIconLibraryPath="/svg/$prefix/$name.svg"
|
|
114
|
+
customIconDefaultPrefix="regular"
|
|
115
|
+
>
|
|
116
|
+
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
117
|
+
<div class="text-center">
|
|
118
|
+
<sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
|
|
119
|
+
<br />
|
|
120
|
+
<div class="text-xs mt-1">regular</div>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="text-center">
|
|
123
|
+
<sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
|
|
124
|
+
<br />
|
|
125
|
+
<div class="text-xs mt-1">solid</div>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="text-center">
|
|
128
|
+
<sonic-icon library="custom" name="plane"></sonic-icon>
|
|
129
|
+
<br />
|
|
130
|
+
<div class="text-xs mt-1">default prefix</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</sonic-scope>
|
|
134
|
+
</code></pre>
|
|
85
135
|
<h2 id="size">Size</h2>
|
|
86
|
-
<
|
|
136
|
+
<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height). Larger steps use <strong><code>3xl</code></strong>.</p>
|
|
137
|
+
<pre><code><div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
87
138
|
<div class="text-center">
|
|
88
139
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
|
|
89
|
-
<br
|
|
140
|
+
<br />
|
|
90
141
|
<div class="text-xs mt-1">2xs</div>
|
|
91
142
|
</div>
|
|
92
143
|
<div class="text-center">
|
|
93
144
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
|
|
94
|
-
<br
|
|
145
|
+
<br />
|
|
95
146
|
<div class="text-xs mt-1">xs</div>
|
|
96
147
|
</div>
|
|
97
148
|
<div class="text-center">
|
|
98
149
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
|
|
99
|
-
<br
|
|
150
|
+
<br />
|
|
100
151
|
<div class="text-xs mt-1">sm</div>
|
|
101
152
|
</div>
|
|
102
153
|
<div class="text-center">
|
|
103
154
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
|
|
104
|
-
<br
|
|
155
|
+
<br />
|
|
105
156
|
<div class="text-xs mt-1">default</div>
|
|
106
157
|
</div>
|
|
107
158
|
<div class="text-center">
|
|
108
159
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
|
|
109
|
-
<br
|
|
160
|
+
<br />
|
|
110
161
|
<div class="text-xs mt-1">lg</div>
|
|
111
162
|
</div>
|
|
112
163
|
<div class="text-center">
|
|
113
164
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
|
|
114
|
-
<br
|
|
165
|
+
<br />
|
|
115
166
|
<div class="text-xs mt-1">xl</div>
|
|
116
167
|
</div>
|
|
117
168
|
<div class="text-center">
|
|
118
169
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
|
|
119
|
-
<br
|
|
170
|
+
<br />
|
|
120
171
|
<div class="text-xs mt-1">2xl</div>
|
|
121
172
|
</div>
|
|
122
173
|
<div class="text-center">
|
|
123
174
|
<sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
|
|
124
|
-
<br
|
|
175
|
+
<br />
|
|
125
176
|
<div class="text-xs mt-1">3xl</div>
|
|
126
177
|
</div>
|
|
127
178
|
</div>
|
|
128
179
|
</code></pre>
|
|
180
|
+
<h2 id="accessibility">Accessibility</h2>
|
|
181
|
+
<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>
|
|
182
|
+
<pre><code><sonic-button type="neutral" variant="outline" shape="circle" aria-label="User profile">
|
|
183
|
+
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
184
|
+
</sonic-button>
|
|
185
|
+
</code></pre>
|
|
186
|
+
<h2 id="api-reference">API reference</h2>
|
|
187
|
+
<table>
|
|
188
|
+
<thead>
|
|
189
|
+
<tr>
|
|
190
|
+
<th>Attribute</th>
|
|
191
|
+
<th>Values</th>
|
|
192
|
+
<th>Description</th>
|
|
193
|
+
</tr>
|
|
194
|
+
</thead>
|
|
195
|
+
<tbody><tr>
|
|
196
|
+
<td><code>name</code></td>
|
|
197
|
+
<td>string</td>
|
|
198
|
+
<td>Icon id in the core bundle or in the remote library</td>
|
|
199
|
+
</tr>
|
|
200
|
+
<tr>
|
|
201
|
+
<td><code>library</code></td>
|
|
202
|
+
<td><code>heroicons</code> · <code>iconoir</code> · <code>feathers</code> · <code>lucide</code> · <code>material</code> · <code>fontAwesome</code> · <code>custom</code></td>
|
|
203
|
+
<td>CDN or custom template; omit for bundled core icons</td>
|
|
204
|
+
</tr>
|
|
205
|
+
<tr>
|
|
206
|
+
<td><code>prefix</code></td>
|
|
207
|
+
<td>string</td>
|
|
208
|
+
<td>Library-specific variant; defaults per library when empty</td>
|
|
209
|
+
</tr>
|
|
210
|
+
<tr>
|
|
211
|
+
<td><code>size</code></td>
|
|
212
|
+
<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>md</code>)</td>
|
|
213
|
+
<td><code>em</code>-based SVG scale on the host</td>
|
|
214
|
+
</tr>
|
|
215
|
+
</tbody></table>
|
|
216
|
+
<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>
|
|
217
|
+
<p>No slots — the component inlines fetched or bundled SVG markup.</p>
|
|
129
218
|
|
|
130
219
|
</article>
|
|
131
220
|
</main>
|