@supersoniks/concorde 5.0.5 → 5.1.0

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.
Files changed (168) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/.tmp-cem/custom-elements.json +13705 -0
  4. package/CONTRIBUTING.md +59 -0
  5. package/DEV.md +54 -0
  6. package/LICENSE +21 -0
  7. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  8. package/build-infos.json +1 -1
  9. package/concorde-3d.bundle.js +3960 -0
  10. package/concorde-3d.es.js +33433 -0
  11. package/concorde-core.bundle.js +196 -196
  12. package/concorde-core.es.js +3685 -3405
  13. package/concorde-hugging-face-infer.bundle.js +32 -0
  14. package/concorde-hugging-face-infer.es.js +2952 -0
  15. package/concorde-interactive.bundle.js +1157 -0
  16. package/concorde-interactive.es.js +10734 -0
  17. package/concorde-shader.bundle.js +116 -0
  18. package/concorde-shader.es.js +8353 -0
  19. package/concorde-webgpu.bundle.js +307 -0
  20. package/concorde-webgpu.es.js +8627 -0
  21. package/custom-elements-manifest.config.mjs +14 -0
  22. package/dist/concorde-core.bundle.js +196 -196
  23. package/dist/concorde-core.es.js +3685 -3405
  24. package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
  25. package/docs/assets/index-DiD0qYvE.css +1 -0
  26. package/docs/crawl/core/components/ui/alert/alert.html +71 -172
  27. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
  28. package/docs/crawl/core/components/ui/badge/badge.html +79 -157
  29. package/docs/crawl/core/components/ui/button/button.html +0 -1
  30. package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
  31. package/docs/crawl/core/components/ui/card/card.html +68 -222
  32. package/docs/crawl/core/components/ui/divider/divider.html +31 -117
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
  36. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  37. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  38. package/docs/crawl/core/components/ui/group/group.html +38 -60
  39. package/docs/crawl/core/components/ui/icon/icon.html +47 -136
  40. package/docs/crawl/core/components/ui/image/image.html +56 -244
  41. package/docs/crawl/core/components/ui/link/link.html +9 -67
  42. package/docs/crawl/core/components/ui/loader/loader.html +23 -97
  43. package/docs/crawl/core/components/ui/menu/menu.html +90 -162
  44. package/docs/crawl/core/components/ui/modal/modal.html +50 -275
  45. package/docs/crawl/core/components/ui/pop/pop.html +66 -260
  46. package/docs/crawl/core/components/ui/progress/progress.html +30 -103
  47. package/docs/crawl/core/components/ui/table/table.html +171 -303
  48. package/docs/crawl/core/components/ui/toast/toast.html +59 -170
  49. package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
  50. package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
  51. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  52. package/docs/crawl/docs/_getting-started/start.html +1 -1
  53. package/docs/crawl/docs/_getting-started/theming.html +63 -311
  54. package/docs/crawl/hubs/form-components.html +53 -75
  55. package/docs/crawl/index.html +6 -7
  56. package/docs/docs-mock-api-sw.js +0 -2
  57. package/docs/docs-mock-api-sw.js.map +2 -2
  58. package/docs/index.html +7 -9
  59. package/docs/llms-full.txt +456 -1703
  60. package/docs/llms.txt +32 -25
  61. package/docs/sitemap.xml +0 -3
  62. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  63. package/docs/src/core/components/functional/if/if.md +0 -0
  64. package/docs/src/core/components/functional/list/list.md +0 -0
  65. package/docs/src/core/components/functional/router/router.md +0 -0
  66. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  67. package/docs/src/core/components/functional/states/states.md +0 -0
  68. package/docs/src/core/components/functional/submit/submit.md +0 -0
  69. package/docs/src/core/components/ui/alert/alert.md +72 -147
  70. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  71. package/docs/src/core/components/ui/badge/badge.md +80 -141
  72. package/docs/src/core/components/ui/button/button.md +0 -1
  73. package/docs/src/core/components/ui/captcha/captcha.md +6 -65
  74. package/docs/src/core/components/ui/card/card.md +65 -183
  75. package/docs/src/core/components/ui/divider/divider.md +13 -107
  76. package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
  77. package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
  78. package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
  79. package/docs/src/core/components/ui/form/input/input.md +1 -1
  80. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/docs/src/core/components/ui/form/select/select.md +0 -0
  82. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  84. package/docs/src/core/components/ui/group/group.md +36 -36
  85. package/docs/src/core/components/ui/icon/icon.md +43 -132
  86. package/docs/src/core/components/ui/image/image.md +53 -179
  87. package/docs/src/core/components/ui/link/link.md +7 -45
  88. package/docs/src/core/components/ui/loader/loader.md +22 -79
  89. package/docs/src/core/components/ui/menu/menu.md +92 -133
  90. package/docs/src/core/components/ui/modal/modal.md +47 -163
  91. package/docs/src/core/components/ui/pop/pop.md +64 -262
  92. package/docs/src/core/components/ui/progress/progress.md +30 -76
  93. package/docs/src/core/components/ui/table/table.md +171 -147
  94. package/docs/src/core/components/ui/toast/toast.md +58 -108
  95. package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
  96. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  97. package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
  98. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  99. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  100. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  101. package/docs/src/docs/_getting-started/start.md +1 -1
  102. package/docs/src/docs/_getting-started/theming.md +61 -223
  103. package/docs/src/docs/search/docs-search.json +348 -3083
  104. package/docs/src/tsconfig.declarations.json +22 -0
  105. package/docs/src/tsconfig.emit.json +23 -0
  106. package/docs/src/tsconfig.json +3 -63
  107. package/gitlab/job_github_mirror.sh +39 -0
  108. package/package.json +36 -2
  109. package/scripts/generate-sdui-catalog.mjs +250 -0
  110. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  111. package/scripts/github-export.mjs +150 -0
  112. package/scripts/post-build-docs.js +0 -0
  113. package/scripts/post-build.mjs +0 -0
  114. package/scripts/pre-build.mjs +15 -0
  115. package/src/core/components/functional/fetch/fetch.md +0 -0
  116. package/src/core/components/functional/if/if.md +0 -0
  117. package/src/core/components/functional/if/if.ts +0 -0
  118. package/src/core/components/functional/list/list.demo.ts +0 -0
  119. package/src/core/components/functional/list/list.md +0 -0
  120. package/src/core/components/functional/router/router.md +0 -0
  121. package/src/core/components/functional/router/router.ts +0 -0
  122. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  123. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  124. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  125. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  126. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  127. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  128. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  129. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  130. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  131. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  132. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  133. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  134. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  135. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  136. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  137. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  138. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  139. package/src/core/components/functional/sdui/sdui.md +122 -0
  140. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  141. package/src/core/components/functional/sdui/sdui.ts +442 -34
  142. package/src/core/components/functional/sdui/types.ts +49 -0
  143. package/src/core/components/functional/states/states.md +0 -0
  144. package/src/core/components/functional/submit/submit.md +0 -0
  145. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  146. package/src/core/components/functional/value/value.ts +0 -0
  147. package/src/core/components/ui/_css/size.ts +0 -0
  148. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  149. package/src/core/components/ui/form/radio/radio.md +0 -0
  150. package/src/core/components/ui/form/select/select.md +0 -0
  151. package/src/core/components/ui/form/switch/switch.md +0 -0
  152. package/src/core/mixins/Subscriber.ts +0 -0
  153. package/src/core/utils/DataBindObserver.ts +0 -0
  154. package/src/core/utils/Objects.ts +0 -0
  155. package/src/core/utils/route.ts +0 -0
  156. package/src/css.d.ts +19 -0
  157. package/src/docs/_core-concept/subscriber.md +0 -0
  158. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  159. package/src/docs/_getting-started/pubsub.md +0 -0
  160. package/src/docs/example/users.ts +0 -0
  161. package/src/docs/search/page.ts +0 -0
  162. package/src/tsconfig.declarations.json +22 -0
  163. package/src/tsconfig.emit.json +23 -0
  164. package/src/tsconfig.json +90 -0
  165. package/src/tsconfig.tsbuildinfo +1 -1
  166. package/docs/assets/index-CD4WyL6o.css +0 -1
  167. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  168. package/docs/src/core/components/ui/theme/theme.md +0 -122
package/docs/crawl/docs/_getting-started/theming.html CHANGED
@@ -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>Customization — Concorde</title>
7
- <meta name="description" content="Concorde components ship with default styles (fallback values in each component and in &lt;sonic-theme&gt;).">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/theming, theming, Customization, guide, , :root, theme=&quot;custom&quot;, --sc-*, theme=&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;, auto, prefers-color-scheme">
6
+ <title>Adding styles — Concorde</title>
7
+ <meta name="description" content="No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables.">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents">
9
9
  <meta name="concorde-doc-id" content="docs/_getting-started/theming">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">
11
11
  </head>
@@ -15,317 +15,69 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Customization</strong>. Concorde components ship with default styles (fallback values in each component and in &lt;sonic-theme&gt;). <span>Doc ID: <code>docs/_getting-started/theming</code>. Keywords: Concorde, supersoniks, docs/_getting-started/theming, theming, Customization, guide, , :root, theme=&quot;custom&quot;, --sc-*, theme=&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;, auto, prefers-color-scheme. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html</a>.</span></p>
19
- <h1 id="customization">Customization</h1>
20
- <h2 id="theme-first-customization">Theme-first customization</h2>
21
- <p>Concorde components ship with <strong>default styles</strong> (fallback values in each component and in <code>&lt;sonic-theme&gt;</code>).<br>You do not need to define any CSS variables to get a usable UI.</p>
22
- <p>To align the kit with your brand, override <strong>only the essential theme tokens</strong> on <code>&lt;sonic-theme&gt;</code>, on <code>:root</code>, or in a project stylesheet.<br>Concorde derives radius steps, button/input rounding, shadows, and most per-component layout from these primitives—<strong>do not copy long lists of derived variables</strong> unless you have a specific need.</p>
23
- <pre><code class="language-html">&lt;sonic-theme color font class=&quot;block bg-base min-h-screen&quot;&gt;
24
- &lt;!-- your app --&gt;
25
- &lt;/sonic-theme&gt;
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Adding styles</strong>. No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables. <span>Doc ID: <code>docs/_getting-started/theming</code>. Keywords: Concorde, supersoniks, docs/_getting-started/theming, theming, Adding styles, guide, , size, {reflect: true}, :host(), :host([type='primary']){...}, inline, block, display, contents. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html</a>.</span></p>
19
+ <h1 id="adding-styles">Adding styles</h1>
20
+ <h2 id="normal-behavior">Normal Behavior</h2>
21
+ <p>No style crosses the shadow root of a component, except for inheritable properties (which have the &quot;inherit&quot; property possible) and CSS variables.
22
+ Properties integrated via a &quot;<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/slot">slot</a>&quot; remain stylizable in a conventional way.</p>
23
+ <ul>
24
+ <li><strong>During creation / from the inside:</strong><ul>
25
+ <li>We edit the <a href="https://lit.dev/docs/components/styles/">static &quot;styles&quot; property of the lit component</a>, which can also reference shared and dynamic styles.
26
+ These styles are scoped and do not impact the outside.</li>
27
+ <li>We use CSS variables as the value of properties intended to be customized from the outside.
28
+ For each variable, we define a default value to have a simple but consistent base style.</li>
29
+ <li>We only rewrite inheritable properties with hard values if they are truly specific to the component.</li>
30
+ <li>The <code>&lt;style&gt;</code> tag as a direct child can be used as a last resort, especially if there is a need for particularly dynamic customization. Performance is reduced.</li>
31
+ </ul>
32
+ </li>
33
+ <li><strong>During use / from the outside:</strong>
34
+ We define values for <strong>inheritable CSS properties</strong> (e.g., font-_, color...) using tools like Tailwind.
35
+ We modify the value of <strong>CSS variables</strong> used by the component.</li>
36
+ </ul>
37
+ <h2 id="choosing-style-presets-via-reactive-properties">Choosing Style Presets via Reactive Properties:</h2>
38
+ <p>The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.</p>
39
+ <p>For example, a <code>size</code> property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.</p>
40
+ <p>It is recommended to use the <code>{reflect: true}</code> property for reactive properties that have an associated style on the <code>:host()</code>. For example: <code>:host([type=&#39;primary&#39;]){...}</code></p>
41
+ <p>☢️ <strong>Caution:</strong> Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.</p>
42
+ <h4 id="css-display-property">CSS &quot;display&quot; Property</h4>
43
+ <p>By default, the display property is <code>inline</code>.
44
+ Therefore, be careful to define it according to the needs, as one might mistakenly expect it to be <code>block</code> as with a regular <code>&lt;div&gt;</code>.</p>
45
+ <p>☢️ <strong>Caution:</strong> Defining the <code>display</code> property as <code>contents</code> may seem attractive at first, but:</p>
46
+ <ul>
47
+ <li>It almost always leads to the creation of wrappers to style the content (instead of using <code>:host</code>).</li>
48
+ <li>It is no longer possible to directly add classes to the component or style it from the outside.
49
+ Ultimately, the amount of code to write increases significantly.</li>
50
+ </ul>
51
+ <h2 id="tailwind-functional-classes">TAILWIND Functional Classes</h2>
52
+ <p><a href="https://tailwindcss.com/">tailwind</a> has been integrated into Concorde and is available in scoped components (with Shadow DOM).
53
+ To use it, you need to import the following:</p>
54
+ <pre><code class="language-javascript">import { tailwind } from &quot;@supersoniks/concorde/la-billetterie/ui/theme/theme&quot;;
26
55
  </code></pre>
27
- <pre><code class="language-javascript">import &quot;@supersoniks/concorde/theme&quot;;
56
+ <p>Then include the <code>tailwind</code> style in the static <code>styles</code> property of the component:</p>
57
+ <pre><code class="language-javascript">static styles = [tailwind];
28
58
  </code></pre>
29
- <table>
30
- <thead>
31
- <tr>
32
- <th>Attribute</th>
33
- <th>Effect</th>
34
- </tr>
35
- </thead>
36
- <tbody><tr>
37
- <td><em>(omit)</em> | <code>theme=&quot;custom&quot;</code></td>
38
- <td>Default: core tokens + your <code>--sc-*</code>; no built-in light/dark palette</td>
39
- </tr>
40
- <tr>
41
- <td><code>theme=&quot;light&quot;</code> | <code>&quot;dark&quot;</code> | <code>&quot;auto&quot;</code></td>
42
- <td>Opt-in presets; <code>auto</code> follows <code>prefers-color-scheme</code></td>
43
- </tr>
44
- <tr>
45
- <td><code>class=&quot;bg-base block&quot;</code> (Tailwind)</td>
46
- <td>Page/surface background (<code>--sc-base</code>)</td>
47
- </tr>
48
- <tr>
49
- <td><code>color</code></td>
50
- <td>Text color (<code>--sc-base-content</code>)</td>
51
- </tr>
52
- <tr>
53
- <td><code>font</code></td>
54
- <td>Base font family/weight (<code>--sc-font-family-base</code>, etc.)</td>
55
- </tr>
56
- </tbody></table>
57
- <p>Popovers, modals, and toasts mount under the nearest <code>&lt;sonic-theme&gt;</code>.</p>
58
- <h2 id="customization-example">Customization example</h2>
59
- <p>Example (full brand override on <code>&lt;sonic-theme&gt;</code> or <code>:root</code>). Set every essential token below; derived radii and shadows still come from the theme engine—only <code>--sc-rounded</code> is listed here.</p>
60
- <pre><code class="language-css">sonic-theme {
61
- /* Semantic fills */
62
- --sc-primary: #353429;
63
- --sc-secondary: #f43f5e;
64
- --sc-info: #7c3aed;
65
- --sc-danger: #d71839;
66
- --sc-warning: #f97316;
67
- --sc-success: #10b981;
68
- --sc-contrast: #111;
69
-
70
- /* Text/icons on semantic fills */
71
- --sc-primary-content: #fff;
72
- --sc-secondary-content: #fff;
73
- --sc-info-content: #fff;
74
- --sc-danger-content: #fff;
75
- --sc-warning-content: #fff;
76
- --sc-success-content: #fff;
77
- --sc-contrast-content: #fff;
78
-
79
- /* Neutral fills */
80
- --sc-base: #fff;
81
- --sc-base-50: #f6f6f5;
82
- --sc-base-100: #ededec;
83
- --sc-base-200: #d7d7d4;
84
- --sc-base-300: #c8c7c4;
85
- --sc-base-400: #a8a7a2;
86
- --sc-base-500: #94938c;
87
- --sc-base-600: #76756c;
88
- --sc-base-700: #59584e;
89
- --sc-base-800: #47463b;
90
- --sc-base-900: #353429;
91
-
92
- /* Text/icons on neutral surfaces */
93
- --sc-base-content: var(--sc-base-900);
94
-
95
- /* Typography */
96
- --sc-font-family-base: &quot;Oswald&quot;, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto,
97
- &quot;Helvetica Neue&quot;, Arial, sans-serif;
98
- --sc-headings-font-family: &quot;alternate-gothic-compressed&quot;, system-ui, sans-serif;
99
- --sc-headings-line-height: 1.1;
100
- --sc-headings-font-weight: bold;
101
- --sc-headings-text-transform: none;
102
-
103
- /* Shape (primitive only) */
104
- --sc-rounded: 0;
105
-
106
- /* Forms */
107
- --sc-border-width: 0.2rem;
108
- --sc-form-height: 2em;
109
- --sc-input-bg: var(--sc-base);
110
- --sc-input-color: var(--sc-base-content);
111
- --sc-input-border-color: var(--sc-input-color);
112
- --sc-input-active-bg: var(--sc-primary);
113
- --sc-input-active-color: var(--sc-primary-content);
114
- --sc-input-active-border-color: var(--sc-primary);
115
- }
116
- </code></pre>
117
- <p><sonic-button href="https://delanfranchi.github.io/concordecolors/"> Palette generator: concordecolors</sonic-button></p>
118
- <p><strong>Without these overrides</strong>, components keep Concorde’s per-component fallbacks. Built-in light/dark palettes apply only when you set <code>theme=&quot;light&quot;</code>, <code>theme=&quot;dark&quot;</code>, or <code>theme=&quot;auto&quot;</code>.</p>
119
- <p><strong>What we intentionally avoid:</strong> large public <code>--sc-alert-*</code> / <code>--sc-badge-*</code> APIs or <code>::part()</code> styling hooks on most components. Prefer attributes (<code>type</code>, <code>status</code>, <code>size</code>, …) and the theme tokens above.</p>
120
- <h2 id="only-essential-css-variables-public-theme-api">Only essential CSS variables (public theme API)</h2>
121
- <p>These are the <strong>smallest set</strong> we recommend customizing. Everything else should stay internal to the theme or to components (<code>--sc_*</code> private variables, attributes like <code>type</code>, <code>size</code>, <code>variant</code>).</p>
122
- <h3 id="surfaces-and-foreground">Surfaces and foreground</h3>
123
- <p>Tokens <strong>without</strong> a <code>-content</code> suffix are <strong>fill / background</strong> colors.<br>Tokens <strong>with</strong> <code>-content</code> are <strong>text and icons</strong> on top of the matching fill (solid buttons, badges, alerts, etc.).</p>
124
- <h4 id="neutral-fills">Neutral fills</h4>
125
- <table>
126
- <thead>
127
- <tr>
128
- <th>Variable</th>
129
- <th>Role</th>
130
- </tr>
131
- </thead>
132
- <tbody><tr>
133
- <td><code>--sc-base</code></td>
134
- <td>Main surface / page background</td>
135
- </tr>
136
- <tr>
137
- <td><code>--sc-base-50</code> … <code>--sc-base-900</code></td>
138
- <td>Neutral scale (borders, subtle backgrounds, muted UI)</td>
139
- </tr>
140
- </tbody></table>
141
- <h4 id="neutral-foreground">Neutral foreground</h4>
142
- <table>
143
- <thead>
144
- <tr>
145
- <th>Variable</th>
146
- <th>Role</th>
147
- </tr>
148
- </thead>
149
- <tbody><tr>
150
- <td><code>--sc-base-content</code></td>
151
- <td>Default body text and icons on neutral surfaces</td>
152
- </tr>
153
- </tbody></table>
154
- <h4 id="semantic-fills">Semantic fills</h4>
155
- <table>
156
- <thead>
157
- <tr>
158
- <th>Variable</th>
159
- <th>Role</th>
160
- </tr>
161
- </thead>
162
- <tbody><tr>
163
- <td><code>--sc-primary</code></td>
164
- <td>Primary actions, links, emphasis</td>
165
- </tr>
166
- <tr>
167
- <td><code>--sc-secondary</code></td>
168
- <td>Secondary brand accent (when used)</td>
169
- </tr>
170
- <tr>
171
- <td><code>--sc-info</code>, <code>--sc-success</code>, <code>--sc-warning</code>, <code>--sc-danger</code></td>
172
- <td>Status and feedback</td>
173
- </tr>
174
- <tr>
175
- <td><code>--sc-contrast</code></td>
176
- <td>High-contrast fills (e.g. on media)</td>
177
- </tr>
178
- </tbody></table>
179
- <h4 id="semantic-foreground">Semantic foreground</h4>
180
- <table>
181
- <thead>
182
- <tr>
183
- <th>Variable</th>
184
- <th>Role</th>
185
- </tr>
186
- </thead>
187
- <tbody><tr>
188
- <td><code>--sc-primary-content</code>, <code>--sc-secondary-content</code>, …</td>
189
- <td>Text/icons on the matching semantic <strong>fill</strong> (<code>--sc-primary</code>, etc.)</td>
190
- </tr>
191
- </tbody></table>
192
- <h3 id="shape">Shape</h3>
193
- <table>
194
- <thead>
195
- <tr>
196
- <th>Variable</th>
197
- <th>Role</th>
198
- </tr>
199
- </thead>
200
- <tbody><tr>
201
- <td><code>--sc-rounded</code></td>
202
- <td><strong>Single primitive</strong> corner radius; the theme computes <code>--sc-rounded-sm</code>, <code>--sc-btn-rounded</code>, <code>--sc-input-rounded</code>, etc.</td>
203
- </tr>
204
- </tbody></table>
205
- <h3 id="typography">Typography</h3>
206
- <table>
207
- <thead>
208
- <tr>
209
- <th>Variable</th>
210
- <th>Role</th>
211
- </tr>
212
- </thead>
213
- <tbody><tr>
214
- <td><code>--sc-font-family-base</code></td>
215
- <td>Body UI text</td>
216
- </tr>
217
- <tr>
218
- <td><code>--sc-font-weight-base</code>, <code>--sc-font-style-base</code></td>
219
- <td>Optional</td>
220
- </tr>
221
- <tr>
222
- <td><code>--sc-headings-font-family</code>, <code>--sc-headings-line-height</code>, <code>--sc-headings-font-weight</code>, <code>--sc-headings-text-transform</code></td>
223
- <td>Headings (modal titles, etc.)</td>
224
- </tr>
225
- </tbody></table>
226
- <h3 id="forms-only-if-you-customize-inputs-globally">Forms (only if you customize inputs globally)</h3>
227
- <p>Interactive controls expose a few extra <strong>theme-level</strong> tokens; prefer these over styling individual inputs from outside.</p>
228
- <table>
229
- <thead>
230
- <tr>
231
- <th>Variable</th>
232
- <th>Role</th>
233
- </tr>
234
- </thead>
235
- <tbody><tr>
236
- <td><code>--sc-border-width</code></td>
237
- <td>Default border thickness</td>
238
- </tr>
239
- <tr>
240
- <td><code>--sc-form-height</code></td>
241
- <td>Control height</td>
242
- </tr>
243
- <tr>
244
- <td><code>--sc-input-bg</code>, <code>--sc-input-color</code>, <code>--sc-input-border-color</code></td>
245
- <td>Default field chrome</td>
246
- </tr>
247
- <tr>
248
- <td><code>--sc-input-active-bg</code>, <code>--sc-input-active-color</code>, <code>--sc-input-active-border-color</code></td>
249
- <td>Focus/active state</td>
250
- </tr>
251
- </tbody></table>
252
- <hr>
253
- <h2 id="tailwind-in-new-components-">Tailwind in new components ?</h2>
254
- <p>Set <code>tailwind.config.js</code> to match concorde style token in your custom component.</p>
255
- <pre><code class="language-js">...
256
- theme: {
257
- borderRadius: {
258
- DEFAULT: &quot;var(--sc-rounded)&quot;,
259
- none: &quot;0&quot;,
260
- sm: &quot;var(--sc-rounded-sm)&quot;,
261
- md: &quot;var(--sc-rounded-md)&quot;,
262
- lg: &quot;var(--sc-rounded-lg)&quot;,
263
- xl: &quot;var(--sc-rounded-xl)&quot;,
264
- full: &quot;9999px&quot;,
265
- },
266
- boxShadow: {
267
- DEFAULT: &quot;var(--sc-shadow)&quot;,
268
- none: &quot;none&quot;,
269
- sm: &quot;var(--sc-shadow-sm)&quot;,
270
- md: &quot;var(--sc-shadow-md)&quot;,
271
- lg: &quot;var(--sc-shadow-lg)&quot;,
272
- xl: &quot;var(--sc-shadow-xl)&quot;,
273
- },
274
- colors: {
275
- transparent: &quot;transparent&quot;,
276
- current: &quot;currentColor&quot;,
277
- content: &quot;var(--sc-base-content)&quot;,
278
- base: &quot;var(--sc-base)&quot;,
279
- neutral: {
280
- 0: &quot;var(--sc-base)&quot;,
281
- 50: &quot;var(--sc-base-50)&quot;,
282
- 100: &quot;var(--sc-base-100)&quot;,
283
- 200: &quot;var(--sc-base-200)&quot;,
284
- 300: &quot;var(--sc-base-300)&quot;,
285
- 400: &quot;var(--sc-base-400)&quot;,
286
- 500: &quot;var(--sc-base-500)&quot;,
287
- 600: &quot;var(--sc-base-600)&quot;,
288
- 700: &quot;var(--sc-base-700)&quot;,
289
- 800: &quot;var(--sc-base-800)&quot;,
290
- 900: &quot;var(--sc-base-900)&quot;,
291
- content: &quot;var(--sc-base)&quot;,
292
- },
293
- primary: {
294
- DEFAULT: &quot;var(--sc-primary)&quot;,
295
- content: &quot;var(--sc-primary-content)&quot;,
296
- },
297
- success: {
298
- DEFAULT: &quot;var(--sc-success)&quot;,
299
- content: &quot;var(--sc-success-content)&quot;,
300
- },
301
- danger: {
302
- DEFAULT: &quot;var(--sc-danger)&quot;,
303
- content: &quot;var(--sc-danger-content)&quot;,
304
- },
305
- warning: {
306
- DEFAULT: &quot;var(--sc-warning)&quot;,
307
- content: &quot;var(--sc-warning-content)&quot;,
308
- },
309
- info: {
310
- DEFAULT: &quot;var(--sc-info)&quot;,
311
- content: &quot;var(--sc-info-content)&quot;,
312
- },
313
- contrast: {
314
- DEFAULT: &quot;var(--sc-contrast)&quot;,
315
- content: &quot;var(--sc-contrast-content)&quot;,
316
- },
317
- },
318
- extend: {
319
- borderWidth: {
320
- DEFAULT: &quot;var(--sc-border-width)&quot;,
321
- },
322
- fontFamily: {
323
- headings: [&quot;var(--sc-headings-font-family, var(--sc-font-family-base, sans-serif))&quot;],
324
- body: [&quot;var(--sc-font-family-base)&quot;],
325
- monospace: [&quot;var(--sc-font-family-monospace, monospace)&quot;],
326
- }
327
- }
59
+ <p>Finally, use it in the HTML within the render function:</p>
60
+ <pre><code class="language-html">&lt;p class=&quot;m-2&quot;&gt;A paragraph with margin&lt;/p&gt;
328
61
  </code></pre>
62
+ <p>The colors from Concorde&#39;s theme are referenced in Tailwind&#39;s theme.</p>
63
+ <h2 id="operation-without-shadow-dom">Operation without Shadow DOM</h2>
64
+ <h3 id="usefulness">Usefulness</h3>
65
+ <p>This operation is particularly useful when it comes to <strong>adding behavior to a simple existing element</strong>.
66
+ It may also become necessary to establish <strong>compatibility with a traditional JS library</strong>.</p>
67
+ <p>For example, with a text input:</p>
68
+ <ul>
69
+ <li>Trigger automatic data or filter update when typing text.</li>
70
+ <li>Automatic formatting.</li>
71
+ <li>Constraints that cannot be handled by native methods.</li>
72
+ </ul>
73
+ <h3 id="consequences">Consequences</h3>
74
+ <p>If there is no shadow DOM (see the <strong>noShadowDom</strong> property of <strong>Subscriber</strong>):</p>
75
+ <ul>
76
+ <li>Styling using the static &quot;styles&quot; property of the lit component will not be applied.</li>
77
+ <li>The element and its content can be styled in a traditional manner.</li>
78
+ </ul>
79
+ <p>For example, the components <code>queue</code>, <code>list</code>, and <code>fetch</code> do not have a shadow DOM.</p>
80
+ <p>ℹ️ <strong>Note:</strong> Specifically in this case, it may be useful to set the <code>display</code> property to <code>contents</code>.</p>
329
81
 
330
82
  </article>
331
83
  </main>
package/docs/crawl/hubs/form-components.html CHANGED
@@ -66,111 +66,89 @@ Checked blacklistFlags values are sent to the mock API (?blacklistFlags=racist,s
66
66
  <section id="core-components-ui-form-fieldset-fieldset" data-doc-id="core/components/ui/form/fieldset/fieldset">
67
67
  <h2><a href="../core/components/ui/form/fieldset/fieldset.html">Fieldset</a></h2>
68
68
  <p><strong>Doc ID:</strong> <code>core/components/ui/form/fieldset/fieldset</code> · <a href="../core/components/ui/form/fieldset/fieldset.html">full page</a></p>
69
- <p>sonic-fieldset groups related form controls with a bordered container and an accessible &lt;fieldset&gt; semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label</p>
69
+ <p>Default</p>
70
70
  <pre class="doc-excerpt">Fieldset
71
71
 
72
- sonic-fieldset groups related form controls with a bordered container and an accessible semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label / description / iconName attributes. Default variant is default. Pair the body with sonic-form-layout for responsive columns.
73
-
74
- Basic example
75
-
76
72
  Variant
77
73
 
78
- ghost and shadow use a transparent border; shadow also applies --sc-shadow-lg.
74
+ Default
79
75
 
80
- Tight layout
76
+ Ghost
81
77
 
82
- Set tight to remove horizontal padding and side borders (flat strip inside a parent).
78
+ Shadow
83
79
 
84
80
  Legend
85
81
 
86
- Use sonic-legend for the group title. Set label and description for simple copy, or use the default slot for custom markup. Add secondary text with sonic-legend-description. Place actions in slot=&quot;suffix&quot; on the legend.
82
+ Custom legend via slot
87
83
 
88
- Attribute values on sonic-legend are rendered as HTML—use only trusted content.
84
+ Description via composant : sonic-legend-description
89
85
 
90
- Custom title in the default slot
91
- Description via sonic-legend-description
86
+ Short hand
92
87
 
93
- Shorthand legend on the fieldset
88
+ Example of use
94
89
 
95
- When label is set on sonic-fieldset, the component renders sonic-legend for you. Pass description iconName iconLibrary and iconPrefix the same way. Do not combine shorthand label with a separate slotted sonic-legend—you will g</pre>
96
- </section>
97
- <section id="core-components-ui-form-form-actions-form-actions" data-doc-id="core/components/ui/form/form-actions/form-actions">
98
- <h2><a href="../core/components/ui/form/form-actions/form-actions.html">Form actions</a></h2>
99
- <p><strong>Doc ID:</strong> <code>core/components/ui/form/form-actions/form-actions</code> · <a href="../core/components/ui/form/form-actions/form-actions.html">full page</a></p>
100
- <p>sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should en</p>
101
- <pre class="doc-excerpt">Form actions
90
+ Informations personnelles
91
+ Description du fieldset lorem ipsum dolor
102
92
 
103
- sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should end with actions. Defaults: direction row · justify flex-start · alignItems center.
93
+ Mentions légales
94
+ Conditions générales d'utilisation
104
95
 
105
- Basic example
96
+ - Sélectionner -
97
+ Je préfère ne pas le dire
98
+ Homme
99
+ Femme
106
100
 
107
- With no attributes, actions align to the start of the row (typical for left-to-right forms).
101
+ Coordonnées
108
102
 
109
- Submit
110
- Cancel
103
+ S'inscrire
111
104
 
112
- Justify content
105
+ Continuer sans m'inscrire
113
106
 
114
- justify maps to CSS justify-content. Use flex-end for dialog-style footers or center for balanced toolbars.
115
-
116
- Submit
117
- Cancel
107
+ Submitted informations...</pre>
108
+ </section>
109
+ <section id="core-components-ui-form-form-actions-form-actions" data-doc-id="core/components/ui/form/form-actions/form-actions">
110
+ <h2><a href="../core/components/ui/form/form-actions/form-actions.html">Form-actions</a></h2>
111
+ <p><strong>Doc ID:</strong> <code>core/components/ui/form/form-actions/form-actions</code> · <a href="../core/components/ui/form/form-actions/form-actions.html">full page</a></p>
112
+ <p>Left seats</p>
113
+ <pre class="doc-excerpt">Form-actions
118
114
 
119
- Flex direction
115
+ Left by default
120
116
 
121
- direction maps to flex-direction. row-reverse swaps visual order while keeping DOM order (focus order unchanged).
117
+ Submit
118
+ Cancel
122
119
 
123
- Submit
124
- Cancel
120
+ Justify
125
121
 
126
- Mixed controls
122
+ Submit
123
+ Cancel
127
124
 
128
- Combine sonic-button with sonic-divider vertical or other slotted content. Default alignItems center keeps unlike heights aligned on the cross axis.
125
+ Direction
129
126
 
130
- Left seats
127
+ Submit
128
+ Cancel
131
129
 
132
- Right seats
130
+ Center
133
131
 
134
- API reference
132
+ Left seats
135
133
 
136
- | Attribute | Values | Description |
137
- |----------|---------|-------------|
138
- | direction | row (default) · column · row-reverse · column-reverse | Main-axis layout of slotted contro</pre>
134
+ Right seats</pre>
139
135
  </section>
140
136
  <section id="core-components-ui-form-form-layout-form-layout" data-doc-id="core/components/ui/form/form-layout/form-layout">
141
- <h2><a href="../core/components/ui/form/form-layout/form-layout.html">Form layout</a></h2>
137
+ <h2><a href="../core/components/ui/form/form-layout/form-layout.html">Form-layout</a></h2>
142
138
  <p><strong>Doc ID:</strong> <code>core/components/ui/form/form-layout/form-layout</code> · <a href="../core/components/ui/form/form-layout/form-layout.html">full page</a></p>
143
- <p>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</p>
144
- <pre class="doc-excerpt">Form layout
145
-
146
- 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 host is wider than 440px; textareas, toggles, dividers, and sonic-form-actions span the full width. Wrap a form or sonic-fieldset body—no attributes are required.
147
-
148
- Basic example
149
-
150
- Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.
151
-
152
- — Select —
153
- Prefer not to say
154
- Male
155
- Female
156
-
157
- Enable optional feature
158
- Subscribe to newsletter
159
-
160
- I accept the
161
- terms and conditions
162
-
163
- Submit
164
-
165
- Responsive columns
166
-
167
- When the host offsetWidth is greater than 440px, the grid uses two equal columns with slightly larger gap (1.75rem). Below that breakpoint, fields stack in a single column (1.5rem gap).
139
+ <p>autocomplete=&quot;email&quot;</p>
140
+ <pre class="doc-excerpt">Form-layout
168
141
 
169
- If the slot contains exactly one direct sonic-input, sonic-select, or sonic-input-autocomplete, the layout stays one column even above the breakpoint so a lone field does not sit in half an empty row.
142
+ - Sélectionner -
143
+ Je préfère ne pas le dire
144
+ Homme
145
+ Femme
170
146
 
171
- Narrow host (single column)
147
+ Activer une superbe option
148
+ Inscription à la newsletter
149
+ J'ai lu et accepte les Conditions générales de ventes
172
150
 
173
- Wide</pre>
151
+ Valider</pre>
174
152
  </section>
175
153
  <section id="core-components-ui-form-input-autocomplete-input-autocomplete" data-doc-id="core/components/ui/form/input-autocomplete/input-autocomplete">
176
154
  <h2><a href="../core/components/ui/form/input-autocomplete/input-autocomplete.html">Input-autocomplete</a></h2>
@@ -201,10 +179,10 @@ data-keyboard-nav sur le champ et les items (flèches haut / bas).</pre>
201
179
  <section id="core-components-ui-form-input-input" data-doc-id="core/components/ui/form/input/input">
202
180
  <h2><a href="../core/components/ui/form/input/input.html">Input</a></h2>
203
181
  <p><strong>Doc ID:</strong> <code>core/components/ui/form/input/input</code> · <a href="../core/components/ui/form/input/input.html">full page</a></p>
204
- <p>Native attributes list</p>
182
+ <p>Native attibutes list</p>
205
183
  <pre class="doc-excerpt">Input
206
184
 
207
- Native attributes list
185
+ Native attibutes list
208
186
 
209
187
  Label
210
188
 
@@ -356,10 +334,10 @@ Same mock filter as Checkbox; switches can enable several flags (comma-separated
356
334
  <section id="core-components-ui-form-textarea-textarea" data-doc-id="core/components/ui/form/textarea/textarea">
357
335
  <h2><a href="../core/components/ui/form/textarea/textarea.html">Textarea</a></h2>
358
336
  <p><strong>Doc ID:</strong> <code>core/components/ui/form/textarea/textarea</code> · <a href="../core/components/ui/form/textarea/textarea.html">full page</a></p>
359
- <p>Native attributes list</p>
337
+ <p>Native attibutes list</p>
360
338
  <pre class="doc-excerpt">Textarea
361
339
 
362
- Native attributes list
340
+ Native attibutes list
363
341
 
364
342
  Label
365
343
 
package/docs/crawl/index.html CHANGED
@@ -34,7 +34,7 @@
34
34
  <li><a href="core/components/functional/submit/submit.html">Submit</a> <small>(core/components/functional/submit/submit)</small></li>
35
35
  <li><a href="core/components/functional/subscriber/subscriber.html">Subscriber</a> <small>(core/components/functional/subscriber/subscriber)</small></li>
36
36
  <li><a href="core/components/functional/value/value.html">Value</a> <small>(core/components/functional/value/value)</small></li>
37
- <li><a href="core/components/ui/alert-messages/alert-messages.html">Alert messages</a> <small>(core/components/ui/alert-messages/alert-messages)</small></li>
37
+ <li><a href="core/components/ui/alert-messages/alert-messages.html">Concorde</a> <small>(core/components/ui/alert-messages/alert-messages)</small></li>
38
38
  <li><a href="core/components/ui/alert/alert.html">Alert</a> <small>(core/components/ui/alert/alert)</small></li>
39
39
  <li><a href="core/components/ui/badge/badge.html">Badge</a> <small>(core/components/ui/badge/badge)</small></li>
40
40
  <li><a href="core/components/ui/button/button.html">Button</a> <small>(core/components/ui/button/button)</small></li>
@@ -43,8 +43,8 @@
43
43
  <li><a href="core/components/ui/divider/divider.html">Divider</a> <small>(core/components/ui/divider/divider)</small></li>
44
44
  <li><a href="core/components/ui/form/checkbox/checkbox.html">Checkbox</a> <small>(core/components/ui/form/checkbox/checkbox)</small></li>
45
45
  <li><a href="core/components/ui/form/fieldset/fieldset.html">Fieldset</a> <small>(core/components/ui/form/fieldset/fieldset)</small></li>
46
- <li><a href="core/components/ui/form/form-actions/form-actions.html">Form actions</a> <small>(core/components/ui/form/form-actions/form-actions)</small></li>
47
- <li><a href="core/components/ui/form/form-layout/form-layout.html">Form layout</a> <small>(core/components/ui/form/form-layout/form-layout)</small></li>
46
+ <li><a href="core/components/ui/form/form-actions/form-actions.html">Form-actions</a> <small>(core/components/ui/form/form-actions/form-actions)</small></li>
47
+ <li><a href="core/components/ui/form/form-layout/form-layout.html">Form-layout</a> <small>(core/components/ui/form/form-layout/form-layout)</small></li>
48
48
  <li><a href="core/components/ui/form/input-autocomplete/input-autocomplete.html">Input-autocomplete</a> <small>(core/components/ui/form/input-autocomplete/input-autocomplete)</small></li>
49
49
  <li><a href="core/components/ui/form/input/input.html">Input</a> <small>(core/components/ui/form/input/input)</small></li>
50
50
  <li><a href="core/components/ui/form/radio/radio.html">Radio</a> <small>(core/components/ui/form/radio/radio)</small></li>
@@ -57,11 +57,10 @@
57
57
  <li><a href="core/components/ui/link/link.html">Link</a> <small>(core/components/ui/link/link)</small></li>
58
58
  <li><a href="core/components/ui/loader/loader.html">Loader</a> <small>(core/components/ui/loader/loader)</small></li>
59
59
  <li><a href="core/components/ui/menu/menu.html">Menu</a> <small>(core/components/ui/menu/menu)</small></li>
60
- <li><a href="core/components/ui/modal/modal.html">Modal</a> <small>(core/components/ui/modal/modal)</small></li>
60
+ <li><a href="core/components/ui/modal/modal.html">Concorde</a> <small>(core/components/ui/modal/modal)</small></li>
61
61
  <li><a href="core/components/ui/pop/pop.html">Pop</a> <small>(core/components/ui/pop/pop)</small></li>
62
- <li><a href="core/components/ui/progress/progress.html">Progress</a> <small>(core/components/ui/progress/progress)</small></li>
62
+ <li><a href="core/components/ui/progress/progress.html">Progress bar</a> <small>(core/components/ui/progress/progress)</small></li>
63
63
  <li><a href="core/components/ui/table/table.html">Table</a> <small>(core/components/ui/table/table)</small></li>
64
- <li><a href="core/components/ui/theme/theme.html">Theme</a> <small>(core/components/ui/theme/theme)</small></li>
65
64
  <li><a href="core/components/ui/toast/toast.html">Toast</a> <small>(core/components/ui/toast/toast)</small></li>
66
65
  <li><a href="core/components/ui/tooltip/tooltip.html">Tooltip</a> <small>(core/components/ui/tooltip/tooltip)</small></li>
67
66
  <li><a href="docs/_core-concept/dataFlow.html">Data flow</a> <small>(docs/_core-concept/dataFlow)</small></li>
@@ -88,7 +87,7 @@
88
87
  <li><a href="docs/_getting-started/my-first-subscriber.html">Legacy: My first subscriber component</a> <small>(docs/_getting-started/my-first-subscriber)</small></li>
89
88
  <li><a href="docs/_getting-started/pubsub.html">Legacy: Sharing data</a> <small>(docs/_getting-started/pubsub)</small></li>
90
89
  <li><a href="docs/_getting-started/start.html">Introduction</a> <small>(docs/_getting-started/start)</small></li>
91
- <li><a href="docs/_getting-started/theming.html">Customization</a> <small>(docs/_getting-started/theming)</small></li>
90
+ <li><a href="docs/_getting-started/theming.html">Adding styles</a> <small>(docs/_getting-started/theming)</small></li>
92
91
  <li><a href="docs/_misc/api-configuration.html">API configuration</a> <small>(docs/_misc/api-configuration)</small></li>
93
92
  <li><a href="docs/_misc/dataProviderKey.html">DataProviderKey</a> <small>(docs/_misc/dataProviderKey)</small></li>
94
93
  <li><a href="docs/_misc/docs-mock-api.html">Local API demos (offline)</a> <small>(docs/_misc/docs-mock-api)</small></li>