@statistikzh/leu 0.13.1 → 0.14.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 (174) hide show
  1. package/.eslintrc.json +8 -0
  2. package/.github/workflows/ci.yml +78 -0
  3. package/.github/workflows/deploy-github-pages.yaml +2 -1
  4. package/.github/workflows/release-please.yml +2 -1
  5. package/.nvmrc +1 -0
  6. package/.prettierignore +1 -0
  7. package/.storybook/main.js +19 -3
  8. package/CHANGELOG.md +16 -0
  9. package/custom-elements-manifest.config.js +2 -2
  10. package/dist/Accordion.d.ts +1 -1
  11. package/dist/Accordion.d.ts.map +1 -1
  12. package/dist/Accordion.js +2 -4
  13. package/dist/Button.d.ts +2 -2
  14. package/dist/Button.js +2 -2
  15. package/dist/ButtonGroup.d.ts +1 -1
  16. package/dist/ButtonGroup.js +1 -1
  17. package/dist/Checkbox.d.ts +1 -1
  18. package/dist/Checkbox.d.ts.map +1 -1
  19. package/dist/Checkbox.js +2 -3
  20. package/dist/CheckboxGroup.d.ts +1 -1
  21. package/dist/CheckboxGroup.d.ts.map +1 -1
  22. package/dist/CheckboxGroup.js +1 -3
  23. package/dist/Chip.d.ts +1 -1
  24. package/dist/Chip.d.ts.map +1 -1
  25. package/dist/Chip.js +1 -3
  26. package/dist/ChipGroup.d.ts +1 -1
  27. package/dist/ChipGroup.d.ts.map +1 -1
  28. package/dist/ChipGroup.js +2 -2
  29. package/dist/ChipLink.js +1 -1
  30. package/dist/ChipRemovable.js +1 -1
  31. package/dist/ChipSelectable.js +1 -1
  32. package/dist/Dialog.d.ts +1 -1
  33. package/dist/Dialog.d.ts.map +1 -1
  34. package/dist/Dialog.js +3 -5
  35. package/dist/Dropdown.d.ts +1 -1
  36. package/dist/Dropdown.js +3 -3
  37. package/dist/Icon.d.ts +2 -98
  38. package/dist/Icon.d.ts.map +1 -1
  39. package/dist/Icon.js +1 -1
  40. package/dist/Input.d.ts +7 -2
  41. package/dist/Input.d.ts.map +1 -1
  42. package/dist/Input.js +15 -8
  43. package/dist/{LeuElement-b670d77c.d.ts → LeuElement-BjGpKQpe.d.ts} +1 -1
  44. package/dist/LeuElement-BjGpKQpe.d.ts.map +1 -0
  45. package/dist/{LeuElement-b670d77c.js → LeuElement-BjGpKQpe.js} +2 -2
  46. package/dist/Menu.d.ts +2 -2
  47. package/dist/Menu.js +1 -1
  48. package/dist/MenuItem.d.ts +3 -3
  49. package/dist/MenuItem.js +1 -1
  50. package/dist/Pagination.d.ts +1 -1
  51. package/dist/Pagination.js +3 -3
  52. package/dist/Popup.d.ts +2 -2
  53. package/dist/Popup.d.ts.map +1 -1
  54. package/dist/Popup.js +1 -3
  55. package/dist/Radio.d.ts +1 -1
  56. package/dist/Radio.d.ts.map +1 -1
  57. package/dist/Radio.js +1 -3
  58. package/dist/RadioGroup.d.ts +1 -1
  59. package/dist/RadioGroup.d.ts.map +1 -1
  60. package/dist/RadioGroup.js +1 -3
  61. package/dist/Range.d.ts +1 -1
  62. package/dist/Range.d.ts.map +1 -1
  63. package/dist/Range.js +17 -19
  64. package/dist/ScrollTop.d.ts +1 -1
  65. package/dist/ScrollTop.d.ts.map +1 -1
  66. package/dist/ScrollTop.js +27 -3
  67. package/dist/Select.d.ts +3 -3
  68. package/dist/Select.d.ts.map +1 -1
  69. package/dist/Select.js +6 -4
  70. package/dist/Spinner.d.ts +1 -1
  71. package/dist/Spinner.js +1 -1
  72. package/dist/Table.d.ts +1 -1
  73. package/dist/Table.d.ts.map +1 -1
  74. package/dist/Table.js +3 -4
  75. package/dist/VisuallyHidden.d.ts +1 -1
  76. package/dist/VisuallyHidden.d.ts.map +1 -1
  77. package/dist/VisuallyHidden.js +3 -5
  78. package/dist/{hasSlotController-c09741c5.d.ts → hasSlotController-DvFw2NdC.d.ts} +1 -1
  79. package/dist/hasSlotController-DvFw2NdC.d.ts.map +1 -0
  80. package/dist/{hasSlotController-c09741c5.js → hasSlotController-DvFw2NdC.js} +1 -1
  81. package/dist/index.d.ts +1 -2
  82. package/dist/index.js +5 -7
  83. package/dist/leu-accordion.js +1 -1
  84. package/dist/leu-button-group.js +1 -1
  85. package/dist/leu-button.js +2 -2
  86. package/dist/leu-checkbox-group.js +1 -1
  87. package/dist/leu-checkbox.js +1 -1
  88. package/dist/leu-chip-group.js +1 -1
  89. package/dist/leu-chip-link.js +1 -1
  90. package/dist/leu-chip-removable.js +1 -1
  91. package/dist/leu-chip-selectable.js +1 -1
  92. package/dist/leu-dialog.js +2 -2
  93. package/dist/leu-dropdown.js +2 -2
  94. package/dist/leu-icon.js +1 -1
  95. package/dist/leu-input.js +1 -1
  96. package/dist/leu-menu-item.js +1 -1
  97. package/dist/leu-menu.js +1 -1
  98. package/dist/leu-pagination.js +2 -2
  99. package/dist/leu-popup.js +1 -1
  100. package/dist/leu-radio-group.js +1 -1
  101. package/dist/leu-radio.js +1 -1
  102. package/dist/leu-range.js +1 -1
  103. package/dist/leu-scroll-top.js +2 -3
  104. package/dist/leu-select.js +2 -2
  105. package/dist/leu-spinner.js +1 -1
  106. package/dist/leu-table.js +2 -2
  107. package/dist/leu-visually-hidden.js +1 -1
  108. package/dist/theme.css +143 -107
  109. package/dist/vscode.html-custom-data.json +3 -32
  110. package/dist/vue/index.d.ts +11 -77
  111. package/dist/web-types.json +246 -242
  112. package/index.js +0 -1
  113. package/package.json +55 -51
  114. package/rollup.config.js +3 -3
  115. package/scripts/generate-component/generate.js +5 -5
  116. package/src/components/accordion/test/accordion.test.js +24 -20
  117. package/src/components/button/Button.js +1 -1
  118. package/src/components/button/stories/button.stories.js +43 -45
  119. package/src/components/button/test/button.test.js +10 -10
  120. package/src/components/button-group/ButtonGroup.js +1 -1
  121. package/src/components/button-group/stories/button-group.stories.js +2 -2
  122. package/src/components/checkbox/checkbox.css +1 -0
  123. package/src/components/chip/ChipSelectable.js +1 -1
  124. package/src/components/chip/stories/chip-group.stories.js +4 -4
  125. package/src/components/chip/test/chip-group.test.js +25 -33
  126. package/src/components/chip/test/chip-link.test.js +5 -5
  127. package/src/components/chip/test/chip-removable.test.js +6 -8
  128. package/src/components/chip/test/chip-selectable.test.js +9 -11
  129. package/src/components/dialog/test/dialog.test.js +1 -1
  130. package/src/components/dropdown/test/dropdown.test.js +12 -13
  131. package/src/components/input/Input.js +25 -17
  132. package/src/components/input/stories/input.stories.js +0 -2
  133. package/src/components/input/test/input.test.js +26 -0
  134. package/src/components/menu/stories/menu-item.stories.js +2 -0
  135. package/src/components/menu/test/menu-item.test.js +3 -2
  136. package/src/components/menu/test/menu.test.js +24 -22
  137. package/src/components/pagination/Pagination.js +1 -1
  138. package/src/components/pagination/pagination.css +1 -1
  139. package/src/components/pagination/stories/pagination.stories.js +2 -1
  140. package/src/components/pagination/test/pagination.test.js +8 -6
  141. package/src/components/popup/Popup.js +4 -4
  142. package/src/components/popup/test/popup.test.js +6 -8
  143. package/src/components/radio/RadioGroup.js +2 -2
  144. package/src/components/range/Range.js +20 -21
  145. package/src/components/select/Select.js +6 -1
  146. package/src/components/select/stories/select.stories.js +1 -1
  147. package/src/components/select/test/select.test.js +18 -16
  148. package/src/components/table/Table.js +4 -4
  149. package/src/components/table/test/table.test.js +3 -2
  150. package/src/components/visually-hidden/test/visually-hidden.test.js +6 -8
  151. package/src/lib/LeuElement.js +2 -2
  152. package/src/lib/hasSlotController.js +1 -1
  153. package/src/styles/style.stories.js +3 -1
  154. package/tsconfig.build.json +4 -3
  155. package/web-dev-server.config.mjs +1 -0
  156. package/web-test-runner.config.mjs +1 -1
  157. package/.github/workflows/test.yml +0 -38
  158. package/.storybook/preview-head.html +0 -2
  159. package/dist/Breadcrumb.d.ts +0 -69
  160. package/dist/Breadcrumb.d.ts.map +0 -1
  161. package/dist/Breadcrumb.js +0 -391
  162. package/dist/LeuElement-b670d77c.d.ts.map +0 -1
  163. package/dist/hasSlotController-c09741c5.d.ts.map +0 -1
  164. package/dist/leu-breadcrumb.d.ts +0 -3
  165. package/dist/leu-breadcrumb.d.ts.map +0 -1
  166. package/dist/leu-breadcrumb.js +0 -17
  167. package/dist/utils-65469421.d.ts +0 -16
  168. package/dist/utils-65469421.d.ts.map +0 -1
  169. package/dist/utils-65469421.js +0 -35
  170. package/src/components/breadcrumb/Breadcrumb.js +0 -324
  171. package/src/components/breadcrumb/breadcrumb.css +0 -98
  172. package/src/components/breadcrumb/leu-breadcrumb.js +0 -5
  173. package/src/components/breadcrumb/stories/breadcrumb.stories.js +0 -73
  174. package/src/components/breadcrumb/test/breadcrumb.test.js +0 -141
@@ -1,5 +1,5 @@
1
1
  import { LeuCheckboxGroup } from './CheckboxGroup.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { LeuCheckbox } from './Checkbox.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import './Icon.js';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { LeuChipGroup } from './ChipGroup.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/static-html.js';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { LeuChipLink } from './ChipLink.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import './Chip.js';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { LeuChipRemovable } from './ChipRemovable.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import './Chip.js';
5
5
  import './Icon.js';
@@ -1,5 +1,5 @@
1
1
  import { LeuChipSelectable } from './ChipSelectable.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import './Chip.js';
5
5
 
@@ -1,9 +1,9 @@
1
1
  import { LeuDialog } from './Dialog.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/ref.js';
5
5
  import 'lit/directives/class-map.js';
6
- import './hasSlotController-c09741c5.js';
6
+ import './hasSlotController-DvFw2NdC.js';
7
7
  import './Icon.js';
8
8
 
9
9
  LeuDialog.define("leu-dialog");
@@ -1,8 +1,8 @@
1
1
  import { LeuDropdown } from './Dropdown.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/ref.js';
5
- import './hasSlotController-c09741c5.js';
5
+ import './hasSlotController-DvFw2NdC.js';
6
6
  import './Button.js';
7
7
  import 'lit/directives/class-map.js';
8
8
  import 'lit/directives/if-defined.js';
package/dist/leu-icon.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuIcon } from './Icon.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
 
5
5
  LeuIcon.define("leu-icon");
package/dist/leu-input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuInput } from './Input.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
  import 'lit/directives/if-defined.js';
@@ -1,5 +1,5 @@
1
1
  import { LeuMenuItem } from './MenuItem.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/if-defined.js';
5
5
  import './Icon.js';
package/dist/leu-menu.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuMenu } from './Menu.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import './MenuItem.js';
5
5
  import 'lit/directives/if-defined.js';
@@ -1,12 +1,12 @@
1
1
  import { LeuPagination } from './Pagination.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/live.js';
5
5
  import './Button.js';
6
6
  import 'lit/directives/class-map.js';
7
7
  import 'lit/directives/if-defined.js';
8
8
  import './Icon.js';
9
- import './hasSlotController-c09741c5.js';
9
+ import './hasSlotController-DvFw2NdC.js';
10
10
  import './VisuallyHidden.js';
11
11
 
12
12
  LeuPagination.define("leu-pagination");
package/dist/leu-popup.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuPopup } from './Popup.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import '@floating-ui/dom';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { LeuRadioGroup } from './RadioGroup.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
 
package/dist/leu-radio.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuRadio } from './Radio.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
 
5
5
  LeuRadio.define("leu-radio");
package/dist/leu-range.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuRange } from './Range.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
 
5
5
  LeuRange.define("leu-range");
@@ -1,12 +1,11 @@
1
1
  import { LeuScrollTop } from './ScrollTop.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
  import './Button.js';
6
6
  import 'lit/directives/if-defined.js';
7
7
  import './Icon.js';
8
- import './hasSlotController-c09741c5.js';
9
- import './utils-65469421.js';
8
+ import './hasSlotController-DvFw2NdC.js';
10
9
 
11
10
  LeuScrollTop.define("leu-scroll-top");
12
11
 
@@ -1,10 +1,10 @@
1
1
  import { LeuSelect } from './Select.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
  import 'lit/directives/ref.js';
6
6
  import 'lit/directives/if-defined.js';
7
- import './hasSlotController-c09741c5.js';
7
+ import './hasSlotController-DvFw2NdC.js';
8
8
  import './Button.js';
9
9
  import './Icon.js';
10
10
  import './Menu.js';
@@ -1,5 +1,5 @@
1
1
  import { LeuSpinner } from './Spinner.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
 
5
5
  LeuSpinner.define("leu-spinner");
package/dist/leu-table.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LeuTable } from './Table.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
  import 'lit/directives/class-map.js';
5
5
  import 'lit/directives/style-map.js';
@@ -9,7 +9,7 @@ import './Pagination.js';
9
9
  import 'lit/directives/live.js';
10
10
  import './Button.js';
11
11
  import 'lit/directives/if-defined.js';
12
- import './hasSlotController-c09741c5.js';
12
+ import './hasSlotController-DvFw2NdC.js';
13
13
  import './VisuallyHidden.js';
14
14
 
15
15
  LeuTable.define("leu-table");
@@ -1,5 +1,5 @@
1
1
  import { LeuVisuallyHidden } from './VisuallyHidden.js';
2
- import './LeuElement-b670d77c.js';
2
+ import './LeuElement-BjGpKQpe.js';
3
3
  import 'lit';
4
4
 
5
5
  LeuVisuallyHidden.define("leu-visually-hidden");
package/dist/theme.css CHANGED
@@ -55,25 +55,6 @@
55
55
  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
56
56
 
57
57
  --leu-z-index-popup: 100;
58
- --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
59
-
60
- /*
61
- * Grid system
62
- *
63
- * The design system uses a 6 columns system on smaller screens.
64
- * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
65
- *
66
- * The goal is to keep the css footprint small
67
- * by not generating all classes for every cell width for every breakpoint.
68
- * Most components don't need a grid and those who do probably have a very simple configuration.
69
- * If we have enough use cases for a more complex grid system we can add it later.
70
- */
71
- --leu-grid-gap: 1rem;
72
- --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
73
- --leu-grid-max-width: 73rem;
74
-
75
- --leu-grid-columns-full: 1 / -1;
76
- --leu-grid-columns-offset: 1 / -1;
77
58
 
78
59
  --leu-t-tiny-regular-font-size: 0.75rem;
79
60
 
@@ -226,94 +207,6 @@
226
207
  --leu-t-curve-tiny-regular-spacing: var(--leu-t-tiny-regular-spacing);
227
208
 
228
209
  --leu-t-curve-tiny-regular-font: var(--leu-t-tiny-regular-font);
229
-
230
- --leu-t-curve-tiny-black-font-size: var(--leu-t-tiny-black-font-size);
231
-
232
- --leu-t-curve-tiny-black-line-height: var(--leu-t-tiny-black-line-height);
233
-
234
- --leu-t-curve-tiny-black-spacing: var(--leu-t-tiny-black-spacing);
235
-
236
- --leu-t-curve-tiny-black-font: var(--leu-t-tiny-black-font);
237
-
238
- --leu-t-curve-small-regular-font-size: var(--leu-t-small-regular-font-size);
239
-
240
- --leu-t-curve-small-regular-line-height: var(--leu-t-small-regular-line-height);
241
-
242
- --leu-t-curve-small-regular-spacing: var(--leu-t-small-regular-spacing);
243
-
244
- --leu-t-curve-small-regular-font: var(--leu-t-small-regular-font);
245
-
246
- --leu-t-curve-small-black-font-size: var(--leu-t-small-black-font-size);
247
-
248
- --leu-t-curve-small-black-line-height: var(--leu-t-small-black-line-height);
249
-
250
- --leu-t-curve-small-black-spacing: var(--leu-t-small-black-spacing);
251
-
252
- --leu-t-curve-small-black-font: var(--leu-t-small-black-font);
253
-
254
- --leu-t-curve-regular-regular-font-size: var(--leu-t-regular-regular-font-size);
255
-
256
- --leu-t-curve-regular-regular-line-height: var(--leu-t-regular-regular-line-height);
257
-
258
- --leu-t-curve-regular-regular-spacing: var(--leu-t-regular-regular-spacing);
259
-
260
- --leu-t-curve-regular-regular-font: var(--leu-t-regular-regular-font);
261
-
262
- --leu-t-curve-regular-black-font-size: var(--leu-t-regular-black-font-size);
263
-
264
- --leu-t-curve-regular-black-line-height: var(--leu-t-regular-black-line-height);
265
-
266
- --leu-t-curve-regular-black-spacing: var(--leu-t-regular-black-spacing);
267
-
268
- --leu-t-curve-regular-black-font: var(--leu-t-regular-black-font);
269
-
270
- --leu-t-curve-bigger-regular-regular-font-size: var(--leu-t-bigger-regular-regular-font-size);
271
-
272
- --leu-t-curve-bigger-regular-regular-line-height: var(--leu-t-bigger-regular-regular-line-height);
273
-
274
- --leu-t-curve-bigger-regular-regular-spacing: var(--leu-t-bigger-regular-regular-spacing);
275
-
276
- --leu-t-curve-bigger-regular-regular-font: var(--leu-t-bigger-regular-regular-font);
277
-
278
- --leu-t-curve-bigger-regular-black-font-size: var(--leu-t-bigger-regular-black-font-size);
279
-
280
- --leu-t-curve-bigger-regular-black-line-height: var(--leu-t-bigger-regular-black-line-height);
281
-
282
- --leu-t-curve-bigger-regular-black-spacing: var(--leu-t-bigger-regular-black-spacing);
283
-
284
- --leu-t-curve-bigger-regular-black-font: var(--leu-t-bigger-regular-black-font);
285
-
286
- --leu-t-curve-medium-black-font-size: var(--leu-t-bigger-regular-black-font-size);
287
-
288
- --leu-t-curve-medium-black-line-height: var(--leu-t-bigger-regular-black-line-height);
289
-
290
- --leu-t-curve-medium-black-spacing: var(--leu-t-bigger-regular-black-spacing);
291
-
292
- --leu-t-curve-medium-black-font: var(--leu-t-bigger-regular-black-font);
293
-
294
- --leu-t-curve-large-black-font-size: var(--leu-t-bigger-regular-black-font-size);
295
-
296
- --leu-t-curve-large-black-line-height: var(--leu-t-bigger-regular-black-line-height);
297
-
298
- --leu-t-curve-large-black-spacing: var(--leu-t-bigger-regular-black-spacing);
299
-
300
- --leu-t-curve-large-black-font: var(--leu-t-bigger-regular-black-font);
301
-
302
- --leu-t-curve-big-black-font-size: var(--leu-t-large-black-font-size);
303
-
304
- --leu-t-curve-big-black-line-height: var(--leu-t-large-black-line-height);
305
-
306
- --leu-t-curve-big-black-spacing: var(--leu-t-large-black-spacing);
307
-
308
- --leu-t-curve-big-black-font: var(--leu-t-large-black-font);
309
-
310
- --leu-t-curve-huge-black-font-size: var(--leu-t-small-big-black-font-size);
311
-
312
- --leu-t-curve-huge-black-line-height: var(--leu-t-small-big-black-line-height);
313
-
314
- --leu-t-curve-huge-black-spacing: var(--leu-t-small-big-black-spacing);
315
-
316
- --leu-t-curve-huge-black-font: var(--leu-t-small-big-black-font);
317
210
  }
318
211
  @media (min-width: 600px) {
319
212
  :root,
@@ -324,6 +217,17 @@
324
217
  --leu-t-curve-tiny-regular-font: var(--leu-t-small-regular-font);
325
218
  }
326
219
  }
220
+ :root,
221
+ :host {
222
+
223
+ --leu-t-curve-tiny-black-font-size: var(--leu-t-tiny-black-font-size);
224
+
225
+ --leu-t-curve-tiny-black-line-height: var(--leu-t-tiny-black-line-height);
226
+
227
+ --leu-t-curve-tiny-black-spacing: var(--leu-t-tiny-black-spacing);
228
+
229
+ --leu-t-curve-tiny-black-font: var(--leu-t-tiny-black-font);
230
+ }
327
231
  @media (min-width: 600px) {
328
232
  :root,
329
233
  :host {
@@ -333,6 +237,17 @@
333
237
  --leu-t-curve-tiny-black-font: var(--leu-t-small-black-font);
334
238
  }
335
239
  }
240
+ :root,
241
+ :host {
242
+
243
+ --leu-t-curve-small-regular-font-size: var(--leu-t-small-regular-font-size);
244
+
245
+ --leu-t-curve-small-regular-line-height: var(--leu-t-small-regular-line-height);
246
+
247
+ --leu-t-curve-small-regular-spacing: var(--leu-t-small-regular-spacing);
248
+
249
+ --leu-t-curve-small-regular-font: var(--leu-t-small-regular-font);
250
+ }
336
251
  @media (min-width: 600px) {
337
252
  :root,
338
253
  :host {
@@ -351,6 +266,17 @@
351
266
  --leu-t-curve-small-regular-font: var(--leu-t-bigger-regular-regular-font);
352
267
  }
353
268
  }
269
+ :root,
270
+ :host {
271
+
272
+ --leu-t-curve-small-black-font-size: var(--leu-t-small-black-font-size);
273
+
274
+ --leu-t-curve-small-black-line-height: var(--leu-t-small-black-line-height);
275
+
276
+ --leu-t-curve-small-black-spacing: var(--leu-t-small-black-spacing);
277
+
278
+ --leu-t-curve-small-black-font: var(--leu-t-small-black-font);
279
+ }
354
280
  @media (min-width: 600px) {
355
281
  :root,
356
282
  :host {
@@ -369,6 +295,17 @@
369
295
  --leu-t-curve-small-black-font: var(--leu-t-bigger-regular-black-font);
370
296
  }
371
297
  }
298
+ :root,
299
+ :host {
300
+
301
+ --leu-t-curve-regular-regular-font-size: var(--leu-t-regular-regular-font-size);
302
+
303
+ --leu-t-curve-regular-regular-line-height: var(--leu-t-regular-regular-line-height);
304
+
305
+ --leu-t-curve-regular-regular-spacing: var(--leu-t-regular-regular-spacing);
306
+
307
+ --leu-t-curve-regular-regular-font: var(--leu-t-regular-regular-font);
308
+ }
372
309
  @media (min-width: 400px) {
373
310
  :root,
374
311
  :host {
@@ -387,6 +324,17 @@
387
324
  --leu-t-curve-regular-regular-font: var(--leu-t-medium-regular-font);
388
325
  }
389
326
  }
327
+ :root,
328
+ :host {
329
+
330
+ --leu-t-curve-regular-black-font-size: var(--leu-t-regular-black-font-size);
331
+
332
+ --leu-t-curve-regular-black-line-height: var(--leu-t-regular-black-line-height);
333
+
334
+ --leu-t-curve-regular-black-spacing: var(--leu-t-regular-black-spacing);
335
+
336
+ --leu-t-curve-regular-black-font: var(--leu-t-regular-black-font);
337
+ }
390
338
  @media (min-width: 400px) {
391
339
  :root,
392
340
  :host {
@@ -405,6 +353,17 @@
405
353
  --leu-t-curve-regular-black-font: var(--leu-t-medium-black-font);
406
354
  }
407
355
  }
356
+ :root,
357
+ :host {
358
+
359
+ --leu-t-curve-bigger-regular-regular-font-size: var(--leu-t-bigger-regular-regular-font-size);
360
+
361
+ --leu-t-curve-bigger-regular-regular-line-height: var(--leu-t-bigger-regular-regular-line-height);
362
+
363
+ --leu-t-curve-bigger-regular-regular-spacing: var(--leu-t-bigger-regular-regular-spacing);
364
+
365
+ --leu-t-curve-bigger-regular-regular-font: var(--leu-t-bigger-regular-regular-font);
366
+ }
408
367
  @media (min-width: 600px) {
409
368
  :root,
410
369
  :host {
@@ -423,6 +382,17 @@
423
382
  --leu-t-curve-bigger-regular-regular-font: var(--leu-t-large-regular-font);
424
383
  }
425
384
  }
385
+ :root,
386
+ :host {
387
+
388
+ --leu-t-curve-bigger-regular-black-font-size: var(--leu-t-bigger-regular-black-font-size);
389
+
390
+ --leu-t-curve-bigger-regular-black-line-height: var(--leu-t-bigger-regular-black-line-height);
391
+
392
+ --leu-t-curve-bigger-regular-black-spacing: var(--leu-t-bigger-regular-black-spacing);
393
+
394
+ --leu-t-curve-bigger-regular-black-font: var(--leu-t-bigger-regular-black-font);
395
+ }
426
396
  @media (min-width: 600px) {
427
397
  :root,
428
398
  :host {
@@ -441,6 +411,17 @@
441
411
  --leu-t-curve-bigger-regular-black-font: var(--leu-t-large-black-font);
442
412
  }
443
413
  }
414
+ :root,
415
+ :host {
416
+
417
+ --leu-t-curve-medium-black-font-size: var(--leu-t-bigger-regular-black-font-size);
418
+
419
+ --leu-t-curve-medium-black-line-height: var(--leu-t-bigger-regular-black-line-height);
420
+
421
+ --leu-t-curve-medium-black-spacing: var(--leu-t-bigger-regular-black-spacing);
422
+
423
+ --leu-t-curve-medium-black-font: var(--leu-t-bigger-regular-black-font);
424
+ }
444
425
  @media (min-width: 400px) {
445
426
  :root,
446
427
  :host {
@@ -468,6 +449,17 @@
468
449
  --leu-t-curve-medium-black-font: var(--leu-t-small-big-black-font);
469
450
  }
470
451
  }
452
+ :root,
453
+ :host {
454
+
455
+ --leu-t-curve-large-black-font-size: var(--leu-t-bigger-regular-black-font-size);
456
+
457
+ --leu-t-curve-large-black-line-height: var(--leu-t-bigger-regular-black-line-height);
458
+
459
+ --leu-t-curve-large-black-spacing: var(--leu-t-bigger-regular-black-spacing);
460
+
461
+ --leu-t-curve-large-black-font: var(--leu-t-bigger-regular-black-font);
462
+ }
471
463
  @media (min-width: 600px) {
472
464
  :root,
473
465
  :host {
@@ -495,6 +487,17 @@
495
487
  --leu-t-curve-large-black-font: var(--leu-t-big-black-font);
496
488
  }
497
489
  }
490
+ :root,
491
+ :host {
492
+
493
+ --leu-t-curve-big-black-font-size: var(--leu-t-large-black-font-size);
494
+
495
+ --leu-t-curve-big-black-line-height: var(--leu-t-large-black-line-height);
496
+
497
+ --leu-t-curve-big-black-spacing: var(--leu-t-large-black-spacing);
498
+
499
+ --leu-t-curve-big-black-font: var(--leu-t-large-black-font);
500
+ }
498
501
  @media (min-width: 600px) {
499
502
  :root,
500
503
  :host {
@@ -531,6 +534,17 @@
531
534
  --leu-t-curve-big-black-font: var(--leu-t-small-huge-black-font);
532
535
  }
533
536
  }
537
+ :root,
538
+ :host {
539
+
540
+ --leu-t-curve-huge-black-font-size: var(--leu-t-small-big-black-font-size);
541
+
542
+ --leu-t-curve-huge-black-line-height: var(--leu-t-small-big-black-line-height);
543
+
544
+ --leu-t-curve-huge-black-spacing: var(--leu-t-small-big-black-spacing);
545
+
546
+ --leu-t-curve-huge-black-font: var(--leu-t-small-big-black-font);
547
+ }
534
548
  @media (min-width: 400px) {
535
549
  :root,
536
550
  :host {
@@ -576,6 +590,28 @@
576
590
  --leu-t-curve-huge-black-font: var(--leu-t-giant-black-font);
577
591
  }
578
592
  }
593
+ :root,
594
+ :host {
595
+ --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
596
+
597
+ /*
598
+ * Grid system
599
+ *
600
+ * The design system uses a 6 columns system on smaller screens.
601
+ * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
602
+ *
603
+ * The goal is to keep the css footprint small
604
+ * by not generating all classes for every cell width for every breakpoint.
605
+ * Most components don't need a grid and those who do probably have a very simple configuration.
606
+ * If we have enough use cases for a more complex grid system we can add it later.
607
+ */
608
+ --leu-grid-gap: 1rem;
609
+ --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
610
+ --leu-grid-max-width: 73rem;
611
+
612
+ --leu-grid-columns-full: 1 / -1;
613
+ --leu-grid-columns-offset: 1 / -1;
614
+ }
579
615
  @media (min-width: 600px) {
580
616
  :root,
581
617
  :host {
@@ -34,32 +34,6 @@
34
34
  }
35
35
  ]
36
36
  },
37
- {
38
- "name": "leu-breadcrumb",
39
- "description": "A Breadcrumb Navigation.\n\nThe breadcrumbs can be displayed in two different layouts.\nOnly the back link (the last item / parent of the current page)\nis displayed when…\n- … the width of the container is smaller\n than the BACK_ONLY_BREAKPOINT.\n- … less then two breadcrumb items could be displayed\n without overflowing the container.\n\nOtherwise as many items as possible are displayed in an inline list\nwithout overflowing the container. The remaining items are displayed\nin a dropdown menu.\n\nIn order to determine the exact numbers of items that have to be\nhidden inside the dropdown, all of them have to be rendered first.\n1. Render all items\n2. Calculate (measure) the number of items that can be displayed\n without overflowing the container.\n3. Updating the state (_hiddeItems) which will trigger a rerender\n4. Render the items again with the new state.\n\nThis results in multiple updates scheduled one after another. Lit\nwill also print a waring in the console beacause of that.\nIt's no a nice behaviour but the only one that works without\nhaving duplicate and hidden markup to derive the sizes from that.\n---\n\n\n### **Methods:**\n - **renderDropdown(): __** - Render the dropdown menu",
40
- "attributes": [
41
- {
42
- "name": "items",
43
- "description": "Object array with { label, href }",
44
- "values": [{ "name": "Array" }]
45
- },
46
- {
47
- "name": "inverted",
48
- "description": "invert color on dark background",
49
- "values": []
50
- },
51
- { "name": "_hiddenItems", "values": [] },
52
- { "name": "_showBackOnly", "values": [] },
53
- { "name": "_isRecalculating", "values": [] },
54
- { "name": "_isDropdownOpen", "values": [] }
55
- ],
56
- "references": [
57
- {
58
- "name": "Documentation",
59
- "url": "https://statistikzh.github.io/leu/?path=/story/breadcrumb"
60
- }
61
- ]
62
- },
63
37
  {
64
38
  "name": "leu-button",
65
39
  "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -181,7 +155,6 @@
181
155
  "name": "leu-chip-link",
182
156
  "description": "\n---\n\n\n### **Slots:**\n - _default_ - The content of the chip",
183
157
  "attributes": [
184
- { "name": "", "values": [] },
185
158
  {
186
159
  "name": "size",
187
160
  "description": "The size of the chip",
@@ -201,7 +174,6 @@
201
174
  "name": "leu-chip-removable",
202
175
  "description": "\n---\n\n\n### **Events:**\n - **remove** - Dispatched when the user clicks on the chip\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
203
176
  "attributes": [
204
- { "name": "", "values": [] },
205
177
  {
206
178
  "name": "value",
207
179
  "description": "The value of the chip.",
@@ -218,9 +190,8 @@
218
190
  },
219
191
  {
220
192
  "name": "leu-chip-selectable",
221
- "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input** - undefined\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
193
+ "description": "A chip component that can be selected.\n---\n\n\n### **Events:**\n - **input**\n\n### **Methods:**\n - **getValue(): _string_** - Returns the value of the chip. If `value` is not set, it will return the text content\n\n### **Slots:**\n - _default_ - The content of the chip",
222
194
  "attributes": [
223
- { "name": "", "values": [] },
224
195
  {
225
196
  "name": "size",
226
197
  "description": "The size of the chip. Not supported for radio variant.",
@@ -298,7 +269,7 @@
298
269
  },
299
270
  {
300
271
  "name": "leu-input",
301
- "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
272
+ "description": "A text input element.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value of the input element changes.\n- **change** - Dispatched when the value of the input element changes and the input element loses focus.\n\n### **Methods:**\n - **getValidationMessages(): _Object_** - Merge custom and default validation messages.\nA validation message can be a function or a string.\nIf it s a function, the function is called with the corresponding\nattribute value as argument.\ne.g.\n`tooLong(this.maxlength)`\nThis way the framework user can create reasonable validation messages\n- **checkValidity(): _boolean_** - Check input validation\n- **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.",
302
273
  "attributes": [
303
274
  {
304
275
  "name": "disabled",
@@ -475,7 +446,7 @@
475
446
  },
476
447
  {
477
448
  "name": "leu-pagination",
478
- "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange** - undefined",
449
+ "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
479
450
  "attributes": [
480
451
  { "name": "defaultPage", "values": [] },
481
452
  { "name": "itemsPerPage", "values": [{ "name": "Number" }] },