@lion/ui 0.15.0 → 0.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (265) hide show
  1. package/README.md +38 -12
  2. package/components/combobox/test/lion-combobox.test.js +50 -2
  3. package/components/core/src/SlotMixin.js +52 -0
  4. package/components/core/test/SlotMixin.test.js +85 -0
  5. package/components/dialog/test/lion-dialog.integration.test.js +170 -0
  6. package/components/input-amount-dropdown/src/localizeNamespaceLoader.js +53 -0
  7. package/components/input-amount-dropdown/translations/bg.js +5 -0
  8. package/components/input-amount-dropdown/translations/cs.js +5 -0
  9. package/components/input-amount-dropdown/translations/de.js +5 -0
  10. package/components/input-amount-dropdown/translations/es.js +5 -0
  11. package/components/input-amount-dropdown/translations/fr.js +5 -0
  12. package/components/input-amount-dropdown/translations/hu.js +5 -0
  13. package/components/input-amount-dropdown/translations/id.js +5 -0
  14. package/components/input-amount-dropdown/translations/it.js +5 -0
  15. package/components/input-amount-dropdown/translations/nl.js +5 -0
  16. package/components/input-amount-dropdown/translations/pl.js +5 -0
  17. package/components/input-amount-dropdown/translations/ro.js +5 -0
  18. package/components/input-amount-dropdown/translations/ru.js +5 -0
  19. package/components/input-amount-dropdown/translations/sk.js +5 -0
  20. package/components/input-amount-dropdown/translations/uk.js +5 -0
  21. package/components/input-amount-dropdown/translations/zh.js +5 -0
  22. package/components/listbox/src/ListboxMixin.js +3 -35
  23. package/components/overlays/src/ArrowMixin.js +10 -4
  24. package/components/overlays/src/OverlayController.js +34 -7
  25. package/components/overlays/test/OverlayController.test.js +4 -1
  26. package/components/overlays/test/OverlayMixin.test.js +2 -2
  27. package/components/overlays/test-suites/OverlayMixin.suite.js +57 -0
  28. package/custom-elements.json +2969 -207
  29. package/dist-types/components/core/src/ScopedElementsMixin.d.ts.map +1 -1
  30. package/dist-types/components/core/src/SlotMixin.d.ts +35 -0
  31. package/dist-types/components/core/src/SlotMixin.d.ts.map +1 -1
  32. package/dist-types/components/core/test/SlotMixin.test.d.ts.map +1 -1
  33. package/dist-types/components/dialog/test/lion-dialog.integration.test.d.ts +3 -0
  34. package/dist-types/components/dialog/test/lion-dialog.integration.test.d.ts.map +1 -0
  35. package/dist-types/components/input-amount-dropdown/src/localizeNamespaceLoader.d.ts +1 -1
  36. package/dist-types/components/input-amount-dropdown/src/localizeNamespaceLoader.d.ts.map +1 -1
  37. package/dist-types/components/input-amount-dropdown/translations/bg.d.ts +7 -0
  38. package/dist-types/components/input-amount-dropdown/translations/bg.d.ts.map +1 -0
  39. package/dist-types/components/input-amount-dropdown/translations/cs.d.ts +7 -0
  40. package/dist-types/components/input-amount-dropdown/translations/cs.d.ts.map +1 -0
  41. package/dist-types/components/input-amount-dropdown/translations/de.d.ts +7 -0
  42. package/dist-types/components/input-amount-dropdown/translations/de.d.ts.map +1 -0
  43. package/dist-types/components/input-amount-dropdown/translations/es.d.ts +7 -0
  44. package/dist-types/components/input-amount-dropdown/translations/es.d.ts.map +1 -0
  45. package/dist-types/components/input-amount-dropdown/translations/fr.d.ts +7 -0
  46. package/dist-types/components/input-amount-dropdown/translations/fr.d.ts.map +1 -0
  47. package/dist-types/components/input-amount-dropdown/translations/hu.d.ts +7 -0
  48. package/dist-types/components/input-amount-dropdown/translations/hu.d.ts.map +1 -0
  49. package/dist-types/components/input-amount-dropdown/translations/id.d.ts +7 -0
  50. package/dist-types/components/input-amount-dropdown/translations/id.d.ts.map +1 -0
  51. package/dist-types/components/input-amount-dropdown/translations/it.d.ts +7 -0
  52. package/dist-types/components/input-amount-dropdown/translations/it.d.ts.map +1 -0
  53. package/dist-types/components/input-amount-dropdown/translations/nl.d.ts +7 -0
  54. package/dist-types/components/input-amount-dropdown/translations/nl.d.ts.map +1 -0
  55. package/dist-types/components/input-amount-dropdown/translations/pl.d.ts +7 -0
  56. package/dist-types/components/input-amount-dropdown/translations/pl.d.ts.map +1 -0
  57. package/dist-types/components/input-amount-dropdown/translations/ro.d.ts +7 -0
  58. package/dist-types/components/input-amount-dropdown/translations/ro.d.ts.map +1 -0
  59. package/dist-types/components/input-amount-dropdown/translations/ru.d.ts +7 -0
  60. package/dist-types/components/input-amount-dropdown/translations/ru.d.ts.map +1 -0
  61. package/dist-types/components/input-amount-dropdown/translations/sk.d.ts +7 -0
  62. package/dist-types/components/input-amount-dropdown/translations/sk.d.ts.map +1 -0
  63. package/dist-types/components/input-amount-dropdown/translations/uk.d.ts +7 -0
  64. package/dist-types/components/input-amount-dropdown/translations/uk.d.ts.map +1 -0
  65. package/dist-types/components/input-amount-dropdown/translations/zh.d.ts +7 -0
  66. package/dist-types/components/input-amount-dropdown/translations/zh.d.ts.map +1 -0
  67. package/dist-types/components/listbox/src/ListboxMixin.d.ts.map +1 -1
  68. package/dist-types/components/overlays/src/ArrowMixin.d.ts.map +1 -1
  69. package/dist-types/components/overlays/src/OverlayController.d.ts +13 -4
  70. package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
  71. package/dist-types/components/overlays/test-suites/OverlayMixin.suite.d.ts.map +1 -1
  72. package/dist-types/tsconfig.tsbuildinfo +1 -1
  73. package/docs/components/accordion/index.md +1 -1
  74. package/docs/components/accordion/overview.md +1 -1
  75. package/docs/components/accordion/reference.md +1 -1
  76. package/docs/components/accordion/use-cases.md +1 -1
  77. package/docs/components/button/{extensions/bootstrap-button.mjs → assets/bootstrap-button.js} +10 -5
  78. package/docs/components/button/examples.md +1 -1
  79. package/docs/components/button/extensions.md +2 -2
  80. package/docs/components/button/index.md +2 -2
  81. package/docs/components/button/overview.md +4 -4
  82. package/docs/components/button/use-cases.md +6 -6
  83. package/docs/components/calendar/index.md +1 -1
  84. package/docs/components/calendar/overview.md +1 -1
  85. package/docs/components/calendar/use-cases.md +2 -2
  86. package/docs/components/checkbox-group/index.md +1 -1
  87. package/docs/components/checkbox-group/overview.md +3 -3
  88. package/docs/components/checkbox-group/use-cases.md +1 -1
  89. package/docs/components/collapsible/examples.md +1 -1
  90. package/docs/components/collapsible/index.md +1 -1
  91. package/docs/components/collapsible/overview.md +2 -2
  92. package/docs/components/collapsible/use-cases.md +1 -1
  93. package/docs/components/combobox/extensions.md +2 -1
  94. package/docs/components/combobox/index.md +1 -1
  95. package/docs/components/combobox/overview.md +2 -2
  96. package/docs/components/combobox/use-cases.md +2 -2
  97. package/docs/components/dialog/index.md +1 -1
  98. package/docs/components/dialog/overview.md +2 -2
  99. package/docs/components/dialog/use-cases.md +3 -3
  100. package/docs/components/drawer/index.md +1 -1
  101. package/docs/components/drawer/overview.md +1 -1
  102. package/docs/components/drawer/use-cases.md +1 -1
  103. package/docs/components/fieldset/index.md +1 -1
  104. package/docs/components/fieldset/overview.md +6 -6
  105. package/docs/components/fieldset/use-cases.md +1 -1
  106. package/docs/components/form/index.md +1 -1
  107. package/docs/components/form/overview.md +4 -4
  108. package/docs/components/form/use-cases.md +3 -3
  109. package/docs/components/icon/index.md +1 -1
  110. package/docs/components/icon/overview.md +1 -1
  111. package/docs/components/icon/use-cases.md +2 -15
  112. package/docs/components/index.md +1 -1
  113. package/docs/components/input/index.md +1 -1
  114. package/docs/components/input/overview.md +2 -2
  115. package/docs/components/input/use-cases.md +1 -1
  116. package/docs/components/input-amount/index.md +1 -1
  117. package/docs/components/input-amount/overview.md +4 -4
  118. package/docs/components/input-amount/use-cases.md +1 -1
  119. package/docs/components/input-amount-dropdown/index.md +1 -1
  120. package/docs/components/input-amount-dropdown/use-cases.md +1 -1
  121. package/docs/components/input-date/index.md +1 -1
  122. package/docs/components/input-date/overview.md +4 -4
  123. package/docs/components/input-date/use-cases.md +1 -1
  124. package/docs/components/input-datepicker/index.md +1 -1
  125. package/docs/components/input-datepicker/overview.md +6 -6
  126. package/docs/components/input-datepicker/use-cases.md +1 -1
  127. package/docs/components/input-email/index.md +1 -1
  128. package/docs/components/input-email/overview.md +3 -3
  129. package/docs/components/input-email/use-cases.md +1 -1
  130. package/docs/components/input-file/index.md +1 -1
  131. package/docs/components/input-file/overview.md +2 -2
  132. package/docs/components/input-file/use-cases.md +1 -1
  133. package/docs/components/input-iban/index.md +1 -1
  134. package/docs/components/input-iban/overview.md +3 -3
  135. package/docs/components/input-iban/use-cases.md +1 -1
  136. package/docs/components/input-range/index.md +1 -1
  137. package/docs/components/input-range/overview.md +3 -3
  138. package/docs/components/input-range/use-cases.md +1 -1
  139. package/docs/components/input-stepper/index.md +1 -1
  140. package/docs/components/input-stepper/overview.md +2 -2
  141. package/docs/components/input-stepper/use-cases.md +1 -1
  142. package/docs/components/input-tel/index.md +1 -1
  143. package/docs/components/input-tel/overview.md +2 -2
  144. package/docs/components/input-tel/use-cases.md +7 -7
  145. package/docs/components/input-tel-dropdown/extensions.md +1 -1
  146. package/docs/components/input-tel-dropdown/index.md +1 -1
  147. package/docs/components/input-tel-dropdown/overview.md +2 -2
  148. package/docs/components/input-tel-dropdown/use-cases.md +1 -1
  149. package/docs/components/listbox/index.md +1 -1
  150. package/docs/components/listbox/overview.md +1 -1
  151. package/docs/components/listbox/use-cases.md +2 -2
  152. package/docs/components/pagination/index.md +1 -1
  153. package/docs/components/pagination/overview.md +1 -1
  154. package/docs/components/pagination/use-cases.md +1 -1
  155. package/docs/components/progress-indicator/examples.md +1 -1
  156. package/docs/components/progress-indicator/index.md +1 -1
  157. package/docs/components/progress-indicator/overview.md +1 -1
  158. package/docs/components/radio-group/index.md +1 -1
  159. package/docs/components/radio-group/overview.md +4 -4
  160. package/docs/components/radio-group/use-cases.md +1 -1
  161. package/docs/components/select/index.md +1 -1
  162. package/docs/components/select/overview.md +1 -1
  163. package/docs/components/select/use-cases.md +2 -2
  164. package/docs/components/select-rich/examples.md +1 -1
  165. package/docs/components/select-rich/index.md +1 -1
  166. package/docs/components/select-rich/overview.md +1 -1
  167. package/docs/components/select-rich/use-cases.md +3 -3
  168. package/docs/components/steps/index.md +1 -1
  169. package/docs/components/steps/overview.md +1 -1
  170. package/docs/components/steps/use-cases.md +1 -1
  171. package/docs/components/switch/index.md +1 -1
  172. package/docs/components/switch/overview.md +1 -1
  173. package/docs/components/switch/reference.md +1 -1
  174. package/docs/components/switch/use-cases.md +1 -1
  175. package/docs/components/tabs/examples.md +2 -2
  176. package/docs/components/tabs/index.md +1 -1
  177. package/docs/components/tabs/overview.md +1 -1
  178. package/docs/components/tabs/use-cases.md +1 -1
  179. package/docs/components/textarea/index.md +1 -1
  180. package/docs/components/textarea/overview.md +1 -1
  181. package/docs/components/textarea/use-cases.md +1 -1
  182. package/docs/components/tooltip/examples.md +1 -1
  183. package/docs/components/tooltip/index.md +1 -1
  184. package/docs/components/tooltip/overview.md +1 -1
  185. package/docs/components/tooltip/use-cases.md +1 -1
  186. package/docs/fundamentals/index.md +4 -4
  187. package/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md +1 -1
  188. package/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md +1 -1
  189. package/docs/fundamentals/node-tools/index.md +1 -1
  190. package/docs/fundamentals/node-tools/providence-analytics/index.md +1 -1
  191. package/docs/fundamentals/node-tools/providence-analytics/overview.md +1 -1
  192. package/docs/fundamentals/node-tools/publish-docs/index.md +1 -1
  193. package/docs/fundamentals/node-tools/publish-docs/overview.md +4 -4
  194. package/docs/fundamentals/node-tools/remark-extend/index.md +1 -1
  195. package/docs/fundamentals/node-tools/remark-extend/overview.md +1 -1
  196. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md +1 -1
  197. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +3 -3
  198. package/docs/fundamentals/rationales/TypeScript.md +1 -1
  199. package/docs/fundamentals/rationales/accessibility.md +2 -2
  200. package/docs/fundamentals/rationales/index.md +1 -1
  201. package/docs/fundamentals/rationales/side-effects.md +1 -1
  202. package/docs/fundamentals/rationales/versioning.md +1 -1
  203. package/docs/fundamentals/systems/core/SlotMixin.md +2 -2
  204. package/docs/fundamentals/systems/core/index.md +1 -1
  205. package/docs/fundamentals/systems/core/overview.md +2 -2
  206. package/docs/fundamentals/systems/form/formatting-and-parsing.md +5 -5
  207. package/docs/fundamentals/systems/form/index.md +1 -1
  208. package/docs/fundamentals/systems/form/interaction-states.md +1 -1
  209. package/docs/fundamentals/systems/form/model-value.md +2 -2
  210. package/docs/fundamentals/systems/form/overview.md +29 -29
  211. package/docs/fundamentals/systems/form/styling.md +1 -1
  212. package/docs/fundamentals/systems/form/use-cases.md +1 -1
  213. package/docs/fundamentals/systems/form/validate.md +3 -3
  214. package/docs/fundamentals/systems/icon/index.md +1 -1
  215. package/docs/fundamentals/systems/icon/overview.md +1 -1
  216. package/docs/fundamentals/systems/index.md +1 -1
  217. package/docs/fundamentals/systems/localize/api-table.md +3 -0
  218. package/docs/fundamentals/systems/localize/dates.md +1 -1
  219. package/docs/fundamentals/systems/localize/index.md +1 -1
  220. package/docs/fundamentals/systems/localize/numbers.md +1 -1
  221. package/docs/fundamentals/systems/localize/overview.md +5 -5
  222. package/docs/fundamentals/systems/localize/rationale.md +1 -1
  223. package/docs/fundamentals/systems/localize/text.md +5 -4
  224. package/docs/fundamentals/systems/localize/use-cases.md +1 -1
  225. package/docs/fundamentals/systems/overlays/_configuration-positioning.md +3 -3
  226. package/docs/fundamentals/systems/overlays/_edge-cases.md +3 -3
  227. package/docs/fundamentals/systems/overlays/api-table.md +3 -0
  228. package/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs +1 -1
  229. package/docs/fundamentals/systems/overlays/configuration.md +5 -5
  230. package/docs/fundamentals/systems/overlays/index.md +1 -1
  231. package/docs/fundamentals/systems/overlays/overview.md +6 -6
  232. package/docs/fundamentals/systems/overlays/rationale.md +1 -1
  233. package/docs/fundamentals/systems/overlays/use-cases.md +6 -6
  234. package/docs/fundamentals/tools/ajax/index.md +1 -1
  235. package/docs/fundamentals/tools/ajax/overview.md +2 -2
  236. package/docs/fundamentals/tools/ajax/use-cases.md +3 -3
  237. package/docs/fundamentals/tools/helpers/action-logger.md +1 -1
  238. package/docs/fundamentals/tools/helpers/index.md +2 -2
  239. package/docs/fundamentals/tools/helpers/overview.md +2 -2
  240. package/docs/fundamentals/tools/index.md +1 -1
  241. package/docs/fundamentals/tools/singleton-manager/example-complex/index.md +1 -1
  242. package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +4 -4
  243. package/docs/fundamentals/tools/singleton-manager/example-fail/index.md +2 -2
  244. package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-a/page-a.js → page-c/page-c.js} +2 -2
  245. package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b/page-b.js → page-d/page-d.js} +2 -2
  246. package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +4 -4
  247. package/docs/fundamentals/tools/singleton-manager/example-success/index.md +2 -2
  248. package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-a/page-a.js → page-e/page-e.js} +2 -3
  249. package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b/page-b.js → page-f/page-f.js} +2 -2
  250. package/docs/fundamentals/tools/singleton-manager/index.md +2 -2
  251. package/docs/fundamentals/tools/singleton-manager/overview.md +5 -5
  252. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  253. package/docs/guides/how-to/create-a-form.md +4 -4
  254. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  255. package/docs/guides/index.md +8 -8
  256. package/docs/guides/principles/index.md +5 -5
  257. package/docs/guides/principles/styling.md +1 -1
  258. package/package.json +1 -1
  259. /package/docs/fundamentals/systems/overlays/assets/{applyDemoOverlayStyles.mjs → applyDemoOverlayStyles.js} +0 -0
  260. /package/docs/fundamentals/systems/overlays/assets/{demo-el-using-overlaymixin.mjs → demo-el-using-overlaymixin.js} +0 -0
  261. /package/docs/fundamentals/systems/overlays/assets/{demo-overlay-backdrop.mjs → demo-overlay-backdrop.js} +0 -0
  262. /package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b → page-d}/node_modules/overlays/index.js +0 -0
  263. /package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b → page-d}/node_modules/overlays/instance.js +0 -0
  264. /package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b → page-f}/node_modules/overlays/index.js +0 -0
  265. /package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b → page-f}/node_modules/overlays/instance.js +0 -0
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Progress Indicator: Overview'
2
3
  parts:
3
4
  - Progress Indicator
4
5
  - Overview
5
- title: 'Progress Indicator: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Progress Indicator: Overview'
8
8
  order: 10
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Radio Group
2
3
  parts:
3
4
  - Radio Group
4
- title: Radio Group
5
5
  eleventyNavigation:
6
6
  key: Radio Group
7
7
  order: 30
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Radio Group: Overview'
2
3
  parts:
3
4
  - Radio Group
4
5
  - Overview
5
- title: 'Radio Group: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Radio Group: Overview'
8
8
  order: 10
@@ -32,12 +32,12 @@ export const main = () => html`
32
32
  `;
33
33
  ```
34
34
 
35
- - Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/form/overview.md)'s serialization result.
36
- - If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/select/overview.md) instead.
35
+ - Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/form/overview.md)'s serialization result.
36
+ - If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/select/overview.md) instead.
37
37
 
38
38
  ## Features
39
39
 
40
- Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/fieldset/overview.md), it has all the features a fieldset has.
40
+ Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/fieldset/overview.md), it has all the features a fieldset has.
41
41
 
42
42
  - Get or set the checked value of the group:
43
43
  - modelValue (default) - `checkedValue()`
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Radio Group: Use Cases'
2
3
  parts:
3
4
  - Radio Group
4
5
  - Use Cases
5
- title: 'Radio Group: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Radio Group: Use Cases'
8
8
  order: 20
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Select
2
3
  parts:
3
4
  - Select
4
- title: Select
5
5
  eleventyNavigation:
6
6
  key: Select
7
7
  order: 40
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Select: Overview'
2
3
  parts:
3
4
  - Select
4
5
  - Overview
5
- title: 'Select: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Select: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Select: Use Cases'
2
3
  parts:
3
4
  - Select
4
5
  - Use Cases
5
- title: 'Select: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Select: Use Cases'
8
8
  order: 20
@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
65
65
 
66
66
  ## Validation
67
67
 
68
- A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/form/validate.md).
68
+ A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md).
69
69
 
70
70
  ## Rendering and updating select options
71
71
 
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Select Rich: Examples'
2
3
  parts:
3
4
  - Select Rich
4
5
  - Examples
5
- title: 'Select Rich: Examples'
6
6
  eleventyNavigation:
7
7
  key: 'Select Rich: Examples'
8
8
  order: 30
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Select Rich
2
3
  parts:
3
4
  - Select Rich
4
- title: Select Rich
5
5
  eleventyNavigation:
6
6
  key: Select Rich
7
7
  order: 40
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Select Rich: Overview'
2
3
  parts:
3
4
  - Select Rich
4
5
  - Overview
5
- title: 'Select Rich: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Select Rich: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Select Rich: Use Cases'
2
3
  parts:
3
4
  - Select Rich
4
5
  - Use Cases
5
- title: 'Select Rich: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Select Rich: Use Cases'
8
8
  order: 20
@@ -29,7 +29,7 @@ You can set the full `modelValue` for each option, which includes the checked pr
29
29
  ```
30
30
 
31
31
  Note, when rendering with the help of the `cache` function imported from `lit/directives/cache.js`, setting model by
32
- the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
32
+ the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
33
33
 
34
34
  ### Setting model by the `choiceValue` property
35
35
 
@@ -328,7 +328,7 @@ LionSelectRich will give it acces to:
328
328
  - LionSelectRich itself, via `.hostElement`
329
329
 
330
330
  Code of an advanced custom invoker is shown below (this is the code for the
331
- invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/select-rich/examples.md)).
331
+ invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/select-rich/examples.md)).
332
332
  The invoker is usually added in the invoker slot of the LionSelectRich subclass.
333
333
  However, it would also be possible for an application developer to provide the invoker
334
334
  by putting it in light dom:
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Steps
2
3
  parts:
3
4
  - Steps
4
- title: Steps
5
5
  eleventyNavigation:
6
6
  key: Steps
7
7
  order: 50
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Steps: Overview'
2
3
  parts:
3
4
  - Steps
4
5
  - Overview
5
- title: 'Steps: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Steps: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Steps: Use Cases'
2
3
  parts:
3
4
  - Steps
4
5
  - Use Cases
5
- title: 'Steps: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Steps: Use Cases'
8
8
  order: 20
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Switch
2
3
  parts:
3
4
  - Switch
4
- title: Switch
5
5
  eleventyNavigation:
6
6
  key: Switch
7
7
  order: 50
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Switch: Overview'
2
3
  parts:
3
4
  - Switch
4
5
  - Overview
5
- title: 'Switch: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Switch: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Switch: Reference'
2
3
  parts:
3
4
  - Switch
4
5
  - Reference
5
- title: 'Switch: Reference'
6
6
  eleventyNavigation:
7
7
  key: 'Switch: Reference'
8
8
  order: 30
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Switch: Use Cases'
2
3
  parts:
3
4
  - Switch
4
5
  - Use Cases
5
- title: 'Switch: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Switch: Use Cases'
8
8
  order: 20
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tabs: Examples'
2
3
  parts:
3
4
  - Tabs
4
5
  - Examples
5
- title: 'Tabs: Examples'
6
6
  eleventyNavigation:
7
7
  key: 'Tabs: Examples'
8
8
  order: 30
@@ -21,7 +21,7 @@ import './src/lea-tab-panel.js';
21
21
 
22
22
  ## Lea Tabs
23
23
 
24
- Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/blog/ing-open-sources-lion.md).
24
+ Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/blog/ing-open-sources-lion.md).
25
25
 
26
26
  ```js preview-story
27
27
  export const main = () => html`
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Tabs
2
3
  parts:
3
4
  - Tabs
4
- title: Tabs
5
5
  eleventyNavigation:
6
6
  key: Tabs
7
7
  order: 50
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tabs: Overview'
2
3
  parts:
3
4
  - Tabs
4
5
  - Overview
5
- title: 'Tabs: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Tabs: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tabs: Use Cases'
2
3
  parts:
3
4
  - Tabs
4
5
  - Use Cases
5
- title: 'Tabs: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Tabs: Use Cases'
8
8
  order: 20
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Textarea
2
3
  parts:
3
4
  - Textarea
4
- title: Textarea
5
5
  eleventyNavigation:
6
6
  key: Textarea
7
7
  order: 50
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Textarea: Overview'
2
3
  parts:
3
4
  - Textarea
4
5
  - Overview
5
- title: 'Textarea: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Textarea: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Textarea: Use Cases'
2
3
  parts:
3
4
  - Textarea
4
5
  - Use Cases
5
- title: 'Textarea: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Textarea: Use Cases'
8
8
  order: 20
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tooltip: Examples'
2
3
  parts:
3
4
  - Tooltip
4
5
  - Examples
5
- title: 'Tooltip: Examples'
6
6
  eleventyNavigation:
7
7
  key: 'Tooltip: Examples'
8
8
  order: 30
@@ -1,7 +1,7 @@
1
1
  ---
2
+ title: Tooltip
2
3
  parts:
3
4
  - Tooltip
4
- title: Tooltip
5
5
  eleventyNavigation:
6
6
  key: Tooltip
7
7
  order: 60
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tooltip: Overview'
2
3
  parts:
3
4
  - Tooltip
4
5
  - Overview
5
- title: 'Tooltip: Overview'
6
6
  eleventyNavigation:
7
7
  key: 'Tooltip: Overview'
8
8
  order: 10
@@ -1,8 +1,8 @@
1
1
  ---
2
+ title: 'Tooltip: Use Cases'
2
3
  parts:
3
4
  - Tooltip
4
5
  - Use Cases
5
- title: 'Tooltip: Use Cases'
6
6
  eleventyNavigation:
7
7
  key: 'Tooltip: Use Cases'
8
8
  order: 20
@@ -9,11 +9,11 @@ Here you find more details about what we offer.
9
9
 
10
10
  Let's see what each section describes.
11
11
 
12
- 1. [Systems](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/core/overview.md) <br>
12
+ 1. [Systems](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/core/overview.md) <br>
13
13
  These are the fundamental systems that power all of our components.
14
- 2. [Tools](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/tools/helpers/overview.md) <br>
14
+ 2. [Tools](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/tools/helpers/overview.md) <br>
15
15
  Frontend Tools useful for web development but are not visual and therefore are not components.
16
- 3. [Node Tools](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
16
+ 3. [Node Tools](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
17
17
  Node tools to analyse the code and for extending the documentation.
18
- 4. [Rationales](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/rationales/side-effects.md) <br>
18
+ 4. [Rationales](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/rationales/side-effects.md) <br>
19
19
  The reasoning behind some of our decisions.
@@ -10,4 +10,4 @@ eleventyNavigation:
10
10
  parent: Node Tools
11
11
  ---
12
12
 
13
- # Node Tools >> Babel Extend Docs ||10
13
+ # Node Tools: Babel Extend Docs
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Node Tools >> Babel Extend Docs
12
12
  ---
13
13
 
14
- # Node Tools >> Babel Extend Docs >> Overview ||10
14
+ # Babel Extend Docs: Overview
15
15
 
16
16
  A plugin which rewrites imports and templates according to a configuration.
17
17
  This enables the reuse of existing documentation from source packages while still using your extensions code.
@@ -8,4 +8,4 @@ eleventyNavigation:
8
8
  order: 30
9
9
  ---
10
10
 
11
- # Node Tools ||30
11
+ # Node Tools
@@ -10,4 +10,4 @@ eleventyNavigation:
10
10
  parent: Node Tools
11
11
  ---
12
12
 
13
- # Node Tools >> Providence Analytics ||20
13
+ # Node Tools: Providence Analytics
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Node Tools >> Providence Analytics
12
12
  ---
13
13
 
14
- # Node Tools >> Providence Analytics >> Overview ||10
14
+ # Providence Analytics: Overview
15
15
 
16
16
  ```js script
17
17
  import { html } from '@mdjs/mdjs-preview';
@@ -10,4 +10,4 @@ eleventyNavigation:
10
10
  parent: Node Tools
11
11
  ---
12
12
 
13
- # Node Tools >> Publish Docs ||10
13
+ # Node Tools: Publish Docs
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Node Tools >> Publish Docs
12
12
  ---
13
13
 
14
- # Node Tools >> Publish Docs >> Overview ||10
14
+ # Publish Docs: Overview
15
15
 
16
16
  A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
17
17
 
@@ -44,7 +44,7 @@ For a Mono Repository
44
44
  ```md
45
45
  # My Pkg
46
46
 
47
- [=> See Source <=](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/docs/deep/dir/overview.md)
47
+ [=> See Source <=](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/docs/deep/dir/overview.md)
48
48
  ```
49
49
 
50
50
  ## CLI flags
@@ -74,7 +74,7 @@ Bring the `overview.md` in a docs folder along.
74
74
  👉 `packages/[my-package]/docs/overview.md`
75
75
 
76
76
  ```md
77
- [=> See Source <=](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/docs/deep/dir/overview.md)
77
+ [=> See Source <=](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/docs/deep/dir/overview.md)
78
78
  ```
79
79
 
80
80
  Add a `use-cases.md`
@@ -82,7 +82,7 @@ Add a `use-cases.md`
82
82
  👉 `packages/[my-package]/docs/use-cases.md`
83
83
 
84
84
  ```md
85
- [=> See Source <=](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/docs/deep/dir/use-cases.md)
85
+ [=> See Source <=](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/docs/deep/dir/use-cases.md)
86
86
  ```
87
87
 
88
88
  So you will end up with something like this in your package.
@@ -10,4 +10,4 @@ eleventyNavigation:
10
10
  parent: Node Tools
11
11
  ---
12
12
 
13
- # Node Tools >> Remark Extend ||30
13
+ # Node Tools: Remark Extend
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Node Tools >> Remark Extend
12
12
  ---
13
13
 
14
- # Node Tools >> Remark Extend >> Overview ||10
14
+ # Remark Extend: Overview
15
15
 
16
16
  A plugin for remark to extend markdown by importing from source files.
17
17
 
@@ -10,4 +10,4 @@ eleventyNavigation:
10
10
  parent: Node Tools
11
11
  ---
12
12
 
13
- # Node Tools >> Extend Docs ||5
13
+ # Node Tools: Extend Docs
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Node Tools >> Extend Docs
12
12
  ---
13
13
 
14
- # Node Tools >> Extend Docs >> Overview ||10
14
+ # Extend Docs: Overview
15
15
 
16
16
  When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
17
17
  Copying and rewriting imports/tags the markdown files works but also means that whenever something change you need copy and rewrite again.
@@ -20,7 +20,7 @@ To do this automatically you can use this preset for [rocket](https://rocket.mod
20
20
 
21
21
  ## Features
22
22
 
23
- - Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/node-tools/remark-extend/overview.md)
23
+ - Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/node-tools/remark-extend/overview.md)
24
24
  - Renames named imports and all it's usage
25
25
  - Adjusts import paths
26
26
  - Replace tags in template literals
@@ -51,7 +51,7 @@ export default {
51
51
 
52
52
  ## Reusing documentation
53
53
 
54
- To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/node-tools/remark-extend/overview.md).
54
+ To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/node-tools/remark-extend/overview.md).
55
55
 
56
56
  As an example you can create `docs/components/tabs/overview.md`.
57
57
 
@@ -10,7 +10,7 @@ eleventyNavigation:
10
10
  parent: Rationales
11
11
  ---
12
12
 
13
- # Rationales >> TypeScript ||30
13
+ # Rationales: TypeScript
14
14
 
15
15
  [TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
16
16
 
@@ -10,7 +10,7 @@ eleventyNavigation:
10
10
  parent: Rationales
11
11
  ---
12
12
 
13
- # Rationales >> Accessibility ||5
13
+ # Rationales: Accessibility
14
14
 
15
15
  In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
16
16
 
@@ -37,4 +37,4 @@ Internally, we delegate all intricacies involved in managing light dom to SlotMi
37
37
  SlotMixin automatically mediates between light dom provided by the user ('public slots') and light dom provided by the component author ('private slots').
38
38
  Also, SlotMixin allows to hook into the reactive update loop of LitElement (automatically rerendering on property changes) and it automatically respects
39
39
  the scoped registry belonging to the shadow root.
40
- More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/core/SlotMixin.md)
40
+ More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/core/SlotMixin.md)
@@ -8,4 +8,4 @@ eleventyNavigation:
8
8
  order: 50
9
9
  ---
10
10
 
11
- # Rationales ||50
11
+ # Rationales
@@ -10,7 +10,7 @@ eleventyNavigation:
10
10
  parent: Rationales
11
11
  ---
12
12
 
13
- # Rationales >> Side Effects ||10
13
+ # Rationales: Side Effects
14
14
 
15
15
  All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
16
16
  Everything else can be tree shaken by [rollup](https://rollupjs.org).
@@ -10,7 +10,7 @@ eleventyNavigation:
10
10
  parent: Rationales
11
11
  ---
12
12
 
13
- # Rationales >> Versioning Lion ||20
13
+ # Rationales: Versioning Lion
14
14
 
15
15
  Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
16
16
 
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Systems >> Core
12
12
  ---
13
13
 
14
- # Systems >> Core >> SlotMixin ||20
14
+ # Core: SlotMixin
15
15
 
16
16
  The SlotMixin is made for solving accessibility challenges that inherently come with the usage of shadow dom.
17
17
  Until [AOM](https://wicg.github.io/aom/explainer.html) is in place, it is not possible to create relations between different shadow doms.
@@ -165,4 +165,4 @@ This will make sure that the slot provided by the user always takes precedence a
165
165
 
166
166
  ### Default slot
167
167
 
168
- As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot
168
+ As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot
@@ -10,6 +10,6 @@ eleventyNavigation:
10
10
  parent: Systems
11
11
  ---
12
12
 
13
- # Systems >> Core ||10
13
+ # Systems: Core
14
14
 
15
15
  -> go to Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
11
11
  parent: Systems >> Core
12
12
  ---
13
13
 
14
- # Systems >> Core >> Overview ||10
14
+ # Core: Overview
15
15
 
16
16
  The core package is mostly for in-depth usage.
17
17
  It handles the version of `lit-element` and `lit-html`.
@@ -28,7 +28,7 @@ import { LitElement, html, render } from 'lit-element';
28
28
 
29
29
  ## Features
30
30
 
31
- - [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/core/#deduping-of-mixins)
31
+ - [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/core/#deduping-of-mixins)
32
32
  - Mixin to handle disabled (DisabledMixin)
33
33
  - Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
34
34
  - Mixin to manage auto-generated needed slot elements in light dom (SlotMixin)