@statistikzh/leu 0.9.0 → 0.10.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 (116) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/Accordion.d.ts +1 -1
  3. package/dist/Accordion.js +1 -1
  4. package/dist/Breadcrumb.d.ts +1 -1
  5. package/dist/Breadcrumb.js +1 -1
  6. package/dist/Button.d.ts +45 -1
  7. package/dist/Button.d.ts.map +1 -1
  8. package/dist/Button.js +473 -6
  9. package/dist/ButtonGroup.d.ts +1 -1
  10. package/dist/ButtonGroup.js +1 -1
  11. package/dist/Checkbox.d.ts +1 -1
  12. package/dist/Checkbox.js +1 -1
  13. package/dist/CheckboxGroup.d.ts +1 -1
  14. package/dist/CheckboxGroup.js +1 -1
  15. package/dist/Chip.d.ts +1 -1
  16. package/dist/Chip.js +1 -1
  17. package/dist/ChipGroup.d.ts +1 -1
  18. package/dist/ChipGroup.js +2 -2
  19. package/dist/ChipLink.js +1 -1
  20. package/dist/ChipRemovable.js +1 -1
  21. package/dist/ChipSelectable.js +1 -1
  22. package/dist/Dialog.d.ts +17 -0
  23. package/dist/Dialog.d.ts.map +1 -0
  24. package/dist/Dialog.js +255 -0
  25. package/dist/Dropdown.d.ts +1 -1
  26. package/dist/Dropdown.d.ts.map +1 -1
  27. package/dist/Dropdown.js +3 -2
  28. package/dist/Icon.d.ts +1 -1
  29. package/dist/Icon.js +1 -1
  30. package/dist/Input.d.ts +1 -1
  31. package/dist/Input.d.ts.map +1 -1
  32. package/dist/Input.js +3 -1
  33. package/dist/{LeuElement-7ab5ef5e.d.ts → LeuElement-6fbc0dee.d.ts} +1 -1
  34. package/dist/LeuElement-6fbc0dee.d.ts.map +1 -0
  35. package/dist/{LeuElement-7ab5ef5e.js → LeuElement-6fbc0dee.js} +1 -1
  36. package/dist/Menu.d.ts +1 -1
  37. package/dist/Menu.js +1 -1
  38. package/dist/MenuItem.d.ts +1 -1
  39. package/dist/MenuItem.js +1 -1
  40. package/dist/Pagination.d.ts +1 -1
  41. package/dist/Pagination.d.ts.map +1 -1
  42. package/dist/Pagination.js +3 -2
  43. package/dist/Popup.d.ts +1 -1
  44. package/dist/Popup.js +1 -1
  45. package/dist/Radio.d.ts +1 -1
  46. package/dist/Radio.js +1 -1
  47. package/dist/RadioGroup.d.ts +1 -1
  48. package/dist/RadioGroup.js +1 -1
  49. package/dist/ScrollTop.d.ts +1 -1
  50. package/dist/ScrollTop.d.ts.map +1 -1
  51. package/dist/ScrollTop.js +3 -2
  52. package/dist/Select.d.ts +1 -1
  53. package/dist/Select.d.ts.map +1 -1
  54. package/dist/Select.js +3 -2
  55. package/dist/Spinner.d.ts +1 -1
  56. package/dist/Spinner.js +1 -1
  57. package/dist/Table.d.ts +1 -1
  58. package/dist/Table.d.ts.map +1 -1
  59. package/dist/Table.js +3 -2
  60. package/dist/VisuallyHidden.d.ts +1 -1
  61. package/dist/VisuallyHidden.js +1 -1
  62. package/dist/hasSlotController-04d0dfa2.d.ts +38 -0
  63. package/dist/hasSlotController-04d0dfa2.d.ts.map +1 -0
  64. package/dist/hasSlotController-04d0dfa2.js +75 -0
  65. package/dist/index.d.ts +1 -1
  66. package/dist/index.js +3 -2
  67. package/dist/leu-accordion.js +1 -1
  68. package/dist/leu-breadcrumb.js +1 -1
  69. package/dist/leu-button-group.js +1 -1
  70. package/dist/leu-button.d.ts +1 -1
  71. package/dist/leu-button.d.ts.map +1 -1
  72. package/dist/leu-button.js +3 -2
  73. package/dist/leu-checkbox-group.js +1 -1
  74. package/dist/leu-checkbox.js +1 -1
  75. package/dist/leu-chip-group.js +1 -1
  76. package/dist/leu-chip-link.js +1 -1
  77. package/dist/leu-chip-removable.js +1 -1
  78. package/dist/leu-chip-selectable.js +1 -1
  79. package/dist/leu-dialog.d.ts +3 -0
  80. package/dist/leu-dialog.d.ts.map +1 -0
  81. package/dist/leu-dialog.js +11 -0
  82. package/dist/leu-dropdown.js +3 -2
  83. package/dist/leu-icon.js +1 -1
  84. package/dist/leu-input.js +1 -1
  85. package/dist/leu-menu-item.js +1 -1
  86. package/dist/leu-menu.js +1 -1
  87. package/dist/leu-pagination.js +3 -2
  88. package/dist/leu-popup.js +1 -1
  89. package/dist/leu-radio-group.js +1 -1
  90. package/dist/leu-radio.js +1 -1
  91. package/dist/leu-scroll-top.js +3 -2
  92. package/dist/leu-select.js +3 -2
  93. package/dist/leu-spinner.js +1 -1
  94. package/dist/leu-table.js +3 -2
  95. package/dist/leu-visually-hidden.js +1 -1
  96. package/dist/theme.css +318 -192
  97. package/dist/vscode.html-custom-data.json +15 -0
  98. package/dist/vue/index.d.ts +19 -0
  99. package/dist/web-types.json +29 -1
  100. package/package.json +1 -1
  101. package/rollup.config.js +4 -1
  102. package/scripts/postcss-leu-font-styles.cjs +29 -35
  103. package/src/components/chip/chip-group.css +1 -1
  104. package/src/components/dialog/Dialog.js +100 -0
  105. package/src/components/dialog/dialog.css +162 -0
  106. package/src/components/dialog/leu-dialog.js +5 -0
  107. package/src/components/dialog/stories/dialog.stories.js +144 -0
  108. package/src/components/dialog/test/dialog.test.js +85 -0
  109. package/src/components/input/input.css +2 -0
  110. package/src/styles/custom-properties.css +27 -0
  111. package/src/styles/font-definitions.json +27 -19
  112. package/src/styles/style.stories.js +61 -0
  113. package/dist/Button-5a8009c5.d.ts +0 -83
  114. package/dist/Button-5a8009c5.d.ts.map +0 -1
  115. package/dist/Button-5a8009c5.js +0 -544
  116. package/dist/LeuElement-7ab5ef5e.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.10.0](https://github.com/statistikZH/leu/compare/v0.9.0...v0.10.0) (2024-09-12)
4
+
5
+
6
+ ### Features
7
+
8
+ * add dialog component ([805be86](https://github.com/statistikZH/leu/commit/805be868585a1ee59a45bf1d7facd0886596906c))
9
+ * **layout:** add reusable grid definitions as custom properties ([#233](https://github.com/statistikZH/leu/issues/233)) ([4e7367c](https://github.com/statistikZH/leu/commit/4e7367c6eab1ba93037fed2b7ee6de1b3b7c51c3))
10
+ * **theme:** add font feature settings as a custom property ([#237](https://github.com/statistikZH/leu/issues/237)) ([0fc5c5f](https://github.com/statistikZH/leu/commit/0fc5c5ffca3f90e5b61ec992ad6fa28fa9cfc755))
11
+ * **typography:** add regular curves and use 'official' curve names ([#231](https://github.com/statistikZH/leu/issues/231)) ([0f29fb6](https://github.com/statistikZH/leu/commit/0f29fb61ffa6df0ab21c159398a53534075fe454))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * **input:** define a explicit background for the whole element ([#236](https://github.com/statistikZH/leu/issues/236)) ([ff1c899](https://github.com/statistikZH/leu/commit/ff1c89910c9502d0bd439f087aea3419323f0f8f))
17
+
3
18
  ## [0.9.0](https://github.com/statistikZH/leu/compare/v0.8.0...v0.9.0) (2024-07-24)
4
19
 
5
20
 
@@ -28,5 +28,5 @@ export class LeuAccordion extends LeuElement {
28
28
  _handleToggleClick(): void;
29
29
  render(): import("lit-html").TemplateResult;
30
30
  }
31
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
31
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
32
32
  //# sourceMappingURL=Accordion.d.ts.map
package/dist/Accordion.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css, nothing } from 'lit';
3
3
  import { html, unsafeStatic } from 'lit/static-html.js';
4
4
 
@@ -64,6 +64,6 @@ export class LeuBreadcrumb extends LeuElement {
64
64
  renderDropdown(): import("lit-html").TemplateResult<1> | typeof nothing;
65
65
  render(): import("lit-html").TemplateResult<1> | typeof nothing;
66
66
  }
67
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
67
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
68
68
  import { nothing } from 'lit';
69
69
  //# sourceMappingURL=Breadcrumb.d.ts.map
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css, nothing, html } from 'lit';
3
3
  import { createRef, ref } from 'lit/directives/ref.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
package/dist/Button.d.ts CHANGED
@@ -1,2 +1,46 @@
1
- export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-5a8009c5.js";
1
+ export const BUTTON_EXPANDED_OPTIONS: string[];
2
+ export const BUTTON_SIZES: string[];
3
+ export const BUTTON_TYPES: string[];
4
+ export const BUTTON_VARIANTS: string[];
5
+ /**
6
+ * @tagname leu-button
7
+ * @slot before - The icon to display before the label
8
+ * @slot after - The icon to display after the label
9
+ * @slot - The label of the button or the icon if no label is set
10
+ */
11
+ export class LeuButton extends LeuElement {
12
+ label: any;
13
+ /** @type {string} */
14
+ size: string;
15
+ /** @type {string} */
16
+ variant: string;
17
+ /** @type {"button" | "submit" | "reset"} */
18
+ type: "button" | "submit" | "reset";
19
+ /** @type {string} */
20
+ componentRole: string;
21
+ /** @type {boolean} */
22
+ disabled: boolean;
23
+ /** @type {boolean} - Only taken into account if no Label and an Icon is set */
24
+ round: boolean;
25
+ /** @type {boolean} */
26
+ active: boolean;
27
+ /** @type {boolean} - will be used on dark Background */
28
+ inverted: boolean;
29
+ /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
30
+ fluid: boolean;
31
+ /**
32
+ * Only taken into account if variant is "ghost"
33
+ * @type {("true" | "false" | undefined)}
34
+ */
35
+ expanded: ("true" | "false" | undefined);
36
+ renderExpandingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
37
+ getAriaAttributes(): {
38
+ role: string;
39
+ label: any;
40
+ };
41
+ hasTextContent(): boolean;
42
+ render(): import("lit-html").TemplateResult<1>;
43
+ }
44
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
45
+ import { nothing } from 'lit';
2
46
  //# sourceMappingURL=Button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.js"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.js"],"names":[],"mappings":"AAoTA,+CAAkD;AAJlD,oCAA0C;AAE1C,oCAAmD;AAJnD,uCAA0D;AAS1D;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;gCA7ZqD,0BAA0B;wBAC7C,KAAK"}
package/dist/Button.js CHANGED
@@ -1,6 +1,473 @@
1
- import './LeuElement-7ab5ef5e.js';
2
- import 'lit';
3
- import 'lit/directives/class-map.js';
4
- import 'lit/directives/if-defined.js';
5
- import './Icon.js';
6
- export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-5a8009c5.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
+ import { css, html, nothing } from 'lit';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
+ import { LeuIcon } from './Icon.js';
6
+ import { H as HasSlotController } from './hasSlotController-04d0dfa2.js';
7
+
8
+ /**
9
+ * All roles that are associated with a aria-checked attribute
10
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
11
+ */
12
+ const ARIA_CHECKED_ROLES = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
13
+
14
+ /**
15
+ * All roles that are associated with a aria-selected attribute
16
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
17
+ */
18
+ const ARIA_SELECTED_ROLES = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
19
+
20
+ var css_248z = css`:host {
21
+ display: inline-block;
22
+ }
23
+
24
+ button {
25
+ font-family: var(--leu-font-family-black);
26
+ text-align: center;
27
+ -webkit-appearance: none;
28
+ -moz-appearance: none;
29
+ appearance: none;
30
+ transition: background 0.1s ease;
31
+ cursor: pointer;
32
+ border: none;
33
+ border-radius: 2px;
34
+
35
+ max-width: 100%;
36
+ display: flex;
37
+ align-items: center;
38
+ -moz-column-gap: 8px;
39
+ column-gap: 8px;
40
+ }
41
+
42
+ .content {
43
+ flex: 1 1 0;
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+ white-space: nowrap;
47
+ }
48
+
49
+ button.round {
50
+ border-radius: 50%;
51
+ }
52
+
53
+ button:disabled {
54
+ cursor: not-allowed;
55
+ }
56
+
57
+ button:focus-visible {
58
+ outline: 2px solid var(--leu-color-func-cyan);
59
+ outline-offset: 2px;
60
+ }
61
+
62
+ button.inverted:focus-visible {
63
+ outline: 2px solid var(--leu-color-black-0);
64
+ }
65
+
66
+ :host([fluid]) button {
67
+ width: 100%;
68
+ justify-content: center;
69
+ }
70
+
71
+ /* size - regular */
72
+
73
+ button.regular {
74
+ padding: 12px 24px;
75
+ font-size: 16px;
76
+ line-height: 24px;
77
+ }
78
+
79
+ button.regular.icon-only {
80
+ padding: 12px;
81
+ }
82
+
83
+ /* size - small */
84
+
85
+ button.small {
86
+ padding: 6px 24px;
87
+ font-size: 14px;
88
+ line-height: 20px;
89
+
90
+ --leu-icon-size: 1rem;
91
+ }
92
+
93
+ button.small.icon-only {
94
+ padding: 8px;
95
+ }
96
+
97
+ /* primary */
98
+
99
+ button.primary {
100
+ color: var(--leu-color-black-0);
101
+ background: var(--leu-color-black-100);
102
+ }
103
+
104
+ button.primary:hover {
105
+ color: var(--leu-color-black-0);
106
+ background: var(--leu-color-black-transp-80);
107
+ }
108
+
109
+ button.primary.active {
110
+ color: var(--leu-color-black-0);
111
+ background: var(--leu-color-black-100);
112
+ }
113
+
114
+ button.primary.active:hover {
115
+ background: var(--leu-color-black-transp-80);
116
+ }
117
+
118
+ button.primary:disabled {
119
+ color: var(--leu-color-black-0);
120
+ background: var(--leu-color-black-transp-20);
121
+ }
122
+
123
+ /* secondary */
124
+
125
+ button.secondary {
126
+ color: var(--leu-color-black-transp-60);
127
+ background: var(--leu-color-black-transp-10);
128
+ }
129
+
130
+ button.secondary:hover {
131
+ color: var(--leu-color-black-100);
132
+ background: var(--leu-color-black-transp-20);
133
+ }
134
+
135
+ button.secondary.active {
136
+ color: var(--leu-color-black-0);
137
+ background: var(--leu-color-black-100);
138
+ }
139
+
140
+ button.secondary.active:hover {
141
+ background: var(--leu-color-black-transp-80);
142
+ }
143
+
144
+ button.secondary:disabled {
145
+ color: var(--leu-color-black-transp-20);
146
+ background: var(--leu-color-black-transp-5);
147
+ }
148
+
149
+ /* ghost */
150
+
151
+ button.ghost {
152
+ --leu-icon-size: 1rem;
153
+
154
+ background: transparent;
155
+ padding: 0 0.5rem;
156
+ color: var(--leu-color-black-60);
157
+ font-family: var(--leu-font-family-regular);
158
+ }
159
+
160
+ button.ghost:hover {
161
+ color: var(--leu-color-black-100);
162
+ }
163
+
164
+ button.ghost.active {
165
+ color: var(--leu-color-black-100);
166
+ }
167
+
168
+ button.ghost:disabled {
169
+ color: var(--leu-color-black-20);
170
+ }
171
+
172
+ /* primary + inverted */
173
+
174
+ button.primary.inverted {
175
+ color: var(--leu-color-black-100);
176
+ background: var(--leu-color-black-0);
177
+ }
178
+
179
+ button.primary.inverted:hover {
180
+ color: var(--leu-color-black-100);
181
+ background: var(--leu-color-white-transp-70);
182
+ }
183
+
184
+ button.primary.inverted.active {
185
+ color: var(--leu-color-black-0);
186
+ background: var(--leu-color-black-100);
187
+ }
188
+
189
+ button.primary.inverted:disabled {
190
+ color: var(--leu-color-black-40);
191
+ background: var(--leu-color-white-transp-70);
192
+ }
193
+
194
+ /* secondary + inverted */
195
+
196
+ button.secondary.inverted {
197
+ color: var(--leu-color-black-0);
198
+ background: var(--leu-color-black-transp-20);
199
+ }
200
+
201
+ button.secondary.inverted:hover {
202
+ color: var(--leu-color-black-0);
203
+ background: var(--leu-color-black-transp-40);
204
+ }
205
+
206
+ button.secondary.inverted.active {
207
+ color: var(--leu-color-black-100);
208
+ background: var(--leu-color-black-0);
209
+ }
210
+
211
+ button.secondary.inverted:disabled {
212
+ color: var(--leu-color-white-transp-70);
213
+ background: var(--leu-color-black-transp-10);
214
+ }
215
+
216
+ /* ghost + inverted */
217
+
218
+ button.ghost.inverted {
219
+ color: var(--leu-color-black-0);
220
+ }
221
+
222
+ button.ghost.inverted:hover {
223
+ color: var(--leu-color-white-transp-70);
224
+ }
225
+
226
+ button.ghost.inverted.active {
227
+ color: var(--leu-color-black-0);
228
+ }
229
+
230
+ button.ghost.inverted:disabled {
231
+ color: var(--leu-color-black-20);
232
+ }
233
+
234
+ /* icon-wrapper */
235
+
236
+ .icon-wrapper leu-icon {
237
+ display: block;
238
+ }
239
+
240
+ .ghost.icon-before .icon-wrapper--before,
241
+ .ghost.icon-after .icon-wrapper--after {
242
+ display: block;
243
+ padding: 0.5rem;
244
+ border-radius: 50%;
245
+ background: var(--leu-color-black-transp-10);
246
+ }
247
+
248
+ .ghost.active .icon-wrapper--before, .ghost.active .icon-wrapper--after {
249
+ background: var(--leu-color-black-100);
250
+ color: var(--leu-color-black-0);
251
+ }
252
+
253
+ .ghost:disabled .icon-wrapper--before {
254
+ background: var(--leu-color-black-transp-5);
255
+ }
256
+
257
+ .ghost:disabled .icon-wrapper--after {
258
+ background: var(--leu-color-black-transp-5);
259
+ }
260
+
261
+ /* inverted */
262
+
263
+ .ghost.inverted .icon-wrapper--before, .ghost.inverted .icon-wrapper--after {
264
+ background: var(--leu-color-black-transp-20);
265
+ }
266
+
267
+ .ghost.inverted:hover .icon-wrapper--before, .ghost.inverted:hover .icon-wrapper--after {
268
+ background: var(--leu-color-black-transp-40);
269
+ color: var(--leu-color-black-0);
270
+ }
271
+
272
+ .ghost.inverted:disabled .icon-wrapper--before {
273
+ background: var(--leu-color-black-transp-20);
274
+ color: var(--leu-color-white-transp-70);
275
+ }
276
+
277
+ .ghost.inverted:disabled .icon-wrapper--after {
278
+ background: var(--leu-color-black-transp-20);
279
+ color: var(--leu-color-white-transp-70);
280
+ }
281
+
282
+ .ghost.active.inverted .icon-wrapper--before, .ghost.active.inverted .icon-wrapper--after {
283
+ background: var(--leu-color-black-0);
284
+ color: var(--leu-color-black-100);
285
+ }
286
+
287
+ /* Expanded icon */
288
+
289
+ .icon-wrapper--expanded {
290
+ transition: transform 0.1s ease;
291
+ }
292
+
293
+ :host([expanded="open"]) .icon-wrapper--expanded {
294
+ transform: rotate(180deg);
295
+ }
296
+ `;
297
+
298
+ /*
299
+ Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
300
+ Live Demo: zh.ch
301
+ */
302
+
303
+ const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
304
+ Object.freeze(BUTTON_VARIANTS);
305
+ const BUTTON_SIZES = ["regular", "small"];
306
+ Object.freeze(BUTTON_SIZES);
307
+ const BUTTON_TYPES = ["button", "submit", "reset"];
308
+ Object.freeze(BUTTON_TYPES);
309
+ const BUTTON_EXPANDED_OPTIONS = ["true", "false"];
310
+ Object.freeze(BUTTON_EXPANDED_OPTIONS);
311
+
312
+ /**
313
+ * @tagname leu-button
314
+ * @slot before - The icon to display before the label
315
+ * @slot after - The icon to display after the label
316
+ * @slot - The label of the button or the icon if no label is set
317
+ */
318
+ class LeuButton extends LeuElement {
319
+ constructor() {
320
+ super();
321
+ /** @type {string} */
322
+ /**
323
+ * @internal
324
+ */
325
+ _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after", "[default]"]));
326
+ this.label = null;
327
+ /** @type {string} */
328
+ this.size = "regular";
329
+ /** @type {string} */
330
+ this.variant = "primary";
331
+ /** @type {"button" | "submit" | "reset"} */
332
+ this.type = "button";
333
+
334
+ /** @type {string} */
335
+ this.componentRole = undefined;
336
+
337
+ /** @type {boolean} */
338
+ this.disabled = false;
339
+ /** @type {boolean} - Only taken into account if no Label and an Icon is set */
340
+ this.round = false;
341
+ /** @type {boolean} */
342
+ this.active = false;
343
+ /** @type {boolean} - will be used on dark Background */
344
+ this.inverted = false;
345
+
346
+ /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
347
+ this.fluid = false;
348
+
349
+ /**
350
+ * Only taken into account if variant is "ghost"
351
+ * @type {("true" | "false" | undefined)}
352
+ */
353
+ this.expanded = undefined;
354
+ }
355
+ renderExpandingIcon() {
356
+ if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
357
+ return html`<div class="icon-wrapper icon-wrapper--expanded">
358
+ <leu-icon name="angleDropDown" size="24"></leu-icon>
359
+ </div>`;
360
+ }
361
+ return nothing;
362
+ }
363
+ getAriaAttributes() {
364
+ const attributes = {
365
+ role: this.componentRole,
366
+ label: this.label
367
+ };
368
+ if (this.componentRole) {
369
+ if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
370
+ attributes.checked = this.active ? "true" : "false";
371
+ } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
372
+ attributes.selected = this.active ? "true" : "false";
373
+ }
374
+ }
375
+ return attributes;
376
+ }
377
+ hasTextContent() {
378
+ return Array.from(this.childNodes).some(node => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
379
+ }
380
+ render() {
381
+ const hasTextContent = this.hasTextContent();
382
+ const hasIconDefault = Boolean(this.querySelector("leu-icon"));
383
+ const hasIconBefore = this.hasSlotController.test("before");
384
+ const hasIconAfter = this.hasSlotController.test("after");
385
+ const aria = this.getAriaAttributes();
386
+ const cssClasses = {
387
+ "icon-only": hasIconDefault && !hasTextContent,
388
+ "icon-before": hasIconBefore,
389
+ "icon-after": hasIconAfter,
390
+ round: this.round,
391
+ active: this.active,
392
+ inverted: this.inverted,
393
+ [this.variant]: true,
394
+ [this.size]: true
395
+ };
396
+ return html`
397
+ <button
398
+ aria-label=${ifDefined(aria.label)}
399
+ aria-selected=${ifDefined(aria.selected)}
400
+ aria-checked=${ifDefined(aria.checked)}
401
+ aria-expanded=${ifDefined(this.expanded)}
402
+ role=${ifDefined(aria.role)}
403
+ class=${classMap(cssClasses)}
404
+ ?disabled=${this.disabled}
405
+ type=${this.type}
406
+ >
407
+ <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
408
+ <span class="content"><slot></slot></span>
409
+ <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
410
+ ${this.renderExpandingIcon()}
411
+ </button>
412
+ `;
413
+ }
414
+ }
415
+ _defineProperty(LeuButton, "dependencies", {
416
+ "leu-icon": LeuIcon
417
+ });
418
+ _defineProperty(LeuButton, "styles", css_248z);
419
+ /**
420
+ * @internal
421
+ */
422
+ _defineProperty(LeuButton, "shadowRootOptions", {
423
+ ...LeuElement.shadowRootOptions,
424
+ delegatesFocus: true
425
+ });
426
+ _defineProperty(LeuButton, "properties", {
427
+ label: {
428
+ type: String,
429
+ reflect: true
430
+ },
431
+ size: {
432
+ type: String,
433
+ reflect: true
434
+ },
435
+ variant: {
436
+ type: String,
437
+ reflect: true
438
+ },
439
+ type: {
440
+ type: String,
441
+ reflect: true
442
+ },
443
+ componentRole: {
444
+ type: String,
445
+ reflect: true
446
+ },
447
+ disabled: {
448
+ type: Boolean,
449
+ reflect: true
450
+ },
451
+ round: {
452
+ type: Boolean,
453
+ reflect: true
454
+ },
455
+ active: {
456
+ type: Boolean,
457
+ reflect: true
458
+ },
459
+ inverted: {
460
+ type: Boolean,
461
+ reflect: true
462
+ },
463
+ expanded: {
464
+ type: String,
465
+ reflect: true
466
+ },
467
+ fluid: {
468
+ type: Boolean,
469
+ reflect: true
470
+ }
471
+ });
472
+
473
+ export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };
@@ -20,5 +20,5 @@ export class LeuButtonGroup extends LeuElement {
20
20
  _handleButtonClick(button: any): void;
21
21
  render(): import("lit-html").TemplateResult<1>;
22
22
  }
23
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
23
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
24
24
  //# sourceMappingURL=ButtonGroup.d.ts.map
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css, html } from 'lit';
3
3
 
4
4
  var css_248z = css`:host,
@@ -10,5 +10,5 @@ export class LeuCheckbox extends LeuElement {
10
10
  handleInput(event: any): void;
11
11
  render(): import("lit-html").TemplateResult<1>;
12
12
  }
13
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
13
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
14
14
  //# sourceMappingURL=Checkbox.d.ts.map
package/dist/Checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css, html } from 'lit';
3
3
  import { LeuIcon } from './Icon.js';
4
4
 
@@ -10,5 +10,5 @@ export class LeuCheckboxGroup extends LeuElement {
10
10
  handleItems(): void;
11
11
  render(): import("lit-html").TemplateResult<1>;
12
12
  }
13
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
13
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
14
14
  //# sourceMappingURL=CheckboxGroup.d.ts.map
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css, html } from 'lit';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
 
package/dist/Chip.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export class LeuChipBase extends LeuElement {
2
2
  inverted: boolean;
3
3
  }
4
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
4
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
5
5
  //# sourceMappingURL=Chip.d.ts.map
package/dist/Chip.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { css } from 'lit';
3
3
 
4
4
  var css_248z = css`:host,
@@ -32,5 +32,5 @@ export const SELECTION_MODES: Readonly<{
32
32
  multiple: "multiple";
33
33
  none: "none";
34
34
  }>;
35
- import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
35
+ import { L as LeuElement } from './LeuElement-6fbc0dee.js';
36
36
  //# sourceMappingURL=ChipGroup.d.ts.map
package/dist/ChipGroup.js CHANGED
@@ -1,10 +1,10 @@
1
- import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty, L as LeuElement } from './LeuElement-6fbc0dee.js';
2
2
  import { html, unsafeStatic } from 'lit/static-html.js';
3
3
  import { css } from 'lit';
4
4
 
5
5
  var css_248z = css`.label {
6
6
  margin: 0 0 0.5rem;
7
- font: var(--leu-t-curve-35-black-font);
7
+ font: var(--leu-t-curve-tiny-black-font);
8
8
  color: var(--leu-color-black-100);
9
9
  }
10
10
 
package/dist/ChipLink.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty } from './LeuElement-6fbc0dee.js';
2
2
  import { html } from 'lit';
3
3
  import { LeuChipBase } from './Chip.js';
4
4
 
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty } from './LeuElement-6fbc0dee.js';
2
2
  import { html } from 'lit';
3
3
  import { LeuChipBase } from './Chip.js';
4
4
  import { LeuIcon } from './Icon.js';
@@ -1,4 +1,4 @@
1
- import { _ as _defineProperty } from './LeuElement-7ab5ef5e.js';
1
+ import { _ as _defineProperty } from './LeuElement-6fbc0dee.js';
2
2
  import { html } from 'lit';
3
3
  import { LeuChipBase } from './Chip.js';
4
4