@limetech/lime-elements 35.0.0-next.14 → 35.0.0-next.15

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 (118) hide show
  1. package/dist/cjs/{component-f7ef9087.js → component-66df95e7.js} +190 -132
  2. package/dist/cjs/{component-f532119f.js → component-67144c1c.js} +47 -3
  3. package/dist/cjs/{component-ed21410d.js → component-ae3bfacf.js} +367 -235
  4. package/dist/cjs/{component-2faaa141.js → component-cf490570.js} +213 -143
  5. package/dist/cjs/{component-10dbdd60.js → component-dd795ff0.js} +7 -5
  6. package/dist/cjs/limel-button-group.cjs.entry.js +1 -1
  7. package/dist/cjs/limel-button.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-checkbox.cjs.entry.js +129 -84
  9. package/dist/cjs/limel-chip-set.cjs.entry.js +233 -189
  10. package/dist/cjs/limel-circular-progress.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-date-picker.cjs.entry.js +4 -4
  12. package/dist/cjs/limel-dialog.cjs.entry.js +7 -8
  13. package/dist/cjs/limel-file.cjs.entry.js +4 -4
  14. package/dist/cjs/limel-form.cjs.entry.js +1 -1
  15. package/dist/cjs/limel-icon-button.cjs.entry.js +4 -4
  16. package/dist/cjs/limel-input-field.cjs.entry.js +5 -5
  17. package/dist/cjs/limel-linear-progress.cjs.entry.js +2 -2
  18. package/dist/cjs/limel-list_3.cjs.entry.js +5 -5
  19. package/dist/cjs/limel-menu-list.cjs.entry.js +84 -68
  20. package/dist/cjs/limel-select.cjs.entry.js +3 -3
  21. package/dist/cjs/limel-slider.cjs.entry.js +32 -5
  22. package/dist/cjs/limel-snackbar.cjs.entry.js +77 -71
  23. package/dist/cjs/limel-switch.cjs.entry.js +496 -200
  24. package/dist/cjs/limel-tab-bar.cjs.entry.js +261 -184
  25. package/dist/cjs/limel-table.cjs.entry.js +1 -1
  26. package/dist/collection/components/button/button.css +333 -145
  27. package/dist/collection/components/button-group/button-group.css +30 -5
  28. package/dist/collection/components/checkbox/checkbox.css +45 -13
  29. package/dist/collection/components/chip-set/chip-set.css +366 -33
  30. package/dist/collection/components/circular-progress/circular-progress.css +2 -2
  31. package/dist/collection/components/dialog/dialog.css +153 -109
  32. package/dist/collection/components/form/form.css +3 -1
  33. package/dist/collection/components/icon-button/icon-button.css +116 -59
  34. package/dist/collection/components/icon-button/icon-button.js +1 -0
  35. package/dist/collection/components/input-field/input-field.css +337 -29
  36. package/dist/collection/components/linear-progress/linear-progress.css +14 -2
  37. package/dist/collection/components/list/list.css +902 -86
  38. package/dist/collection/components/menu-list/menu-list.css +902 -86
  39. package/dist/collection/components/menu-surface/menu-surface.css +31 -7
  40. package/dist/collection/components/select/select.css +424 -17
  41. package/dist/collection/components/slider/slider.css +49 -2
  42. package/dist/collection/components/snackbar/snackbar.css +588 -301
  43. package/dist/collection/components/switch/switch.css +592 -222
  44. package/dist/collection/components/switch/switch.js +18 -12
  45. package/dist/collection/components/tab-bar/tab-bar.css +63 -36
  46. package/dist/collection/components/table/table.css +10 -4
  47. package/dist/collection/style/functions.scss +3 -1
  48. package/dist/esm/{component-89e0ce26.js → component-19eb6e2b.js} +7 -5
  49. package/dist/esm/{component-2630c3d7.js → component-288691f3.js} +367 -235
  50. package/dist/esm/{component-d682c974.js → component-410aad5a.js} +44 -4
  51. package/dist/esm/{component-429e92ee.js → component-5b4ac85a.js} +213 -143
  52. package/dist/esm/{component-834d85a1.js → component-fffa3419.js} +190 -132
  53. package/dist/esm/limel-button-group.entry.js +1 -1
  54. package/dist/esm/limel-button.entry.js +1 -1
  55. package/dist/esm/limel-checkbox.entry.js +129 -84
  56. package/dist/esm/limel-chip-set.entry.js +233 -189
  57. package/dist/esm/limel-circular-progress.entry.js +1 -1
  58. package/dist/esm/limel-date-picker.entry.js +4 -4
  59. package/dist/esm/limel-dialog.entry.js +7 -8
  60. package/dist/esm/limel-file.entry.js +4 -4
  61. package/dist/esm/limel-form.entry.js +1 -1
  62. package/dist/esm/limel-icon-button.entry.js +4 -4
  63. package/dist/esm/limel-input-field.entry.js +5 -5
  64. package/dist/esm/limel-linear-progress.entry.js +2 -2
  65. package/dist/esm/limel-list_3.entry.js +5 -5
  66. package/dist/esm/limel-menu-list.entry.js +84 -68
  67. package/dist/esm/limel-select.entry.js +3 -3
  68. package/dist/esm/limel-slider.entry.js +32 -5
  69. package/dist/esm/limel-snackbar.entry.js +77 -71
  70. package/dist/esm/limel-switch.entry.js +496 -200
  71. package/dist/esm/limel-tab-bar.entry.js +261 -184
  72. package/dist/esm/limel-table.entry.js +1 -1
  73. package/dist/lime-elements/lime-elements.esm.js +1 -1
  74. package/dist/lime-elements/p-09593e7a.entry.js +1 -0
  75. package/dist/lime-elements/p-0f5cbdea.entry.js +1 -0
  76. package/dist/lime-elements/p-1c284626.js +73 -0
  77. package/dist/lime-elements/{p-8ad5e143.entry.js → p-22f5ab58.entry.js} +1 -1
  78. package/dist/lime-elements/p-3084b02c.entry.js +73 -0
  79. package/dist/lime-elements/p-3e87bb28.entry.js +82 -0
  80. package/dist/lime-elements/p-433f8f64.entry.js +82 -0
  81. package/dist/lime-elements/{p-076bd4dc.js → p-48d4ef20.js} +3 -3
  82. package/dist/lime-elements/p-4e486308.entry.js +82 -0
  83. package/dist/lime-elements/p-4f1528ab.entry.js +59 -0
  84. package/dist/lime-elements/{p-e275f502.entry.js → p-57892079.entry.js} +3 -3
  85. package/dist/lime-elements/{p-041ae00c.entry.js → p-783e6e99.entry.js} +1 -1
  86. package/dist/lime-elements/p-82758b66.entry.js +1 -0
  87. package/dist/lime-elements/p-96697356.entry.js +126 -0
  88. package/dist/lime-elements/{p-8590a1b7.entry.js → p-b4a7d61f.entry.js} +1 -1
  89. package/dist/lime-elements/{p-268cf1fa.entry.js → p-bf4ee462.entry.js} +1 -1
  90. package/dist/lime-elements/p-c15adec9.entry.js +37 -0
  91. package/dist/lime-elements/p-cbc43682.js +81 -0
  92. package/dist/lime-elements/{p-ace9affc.js → p-d0a7de87.js} +2 -2
  93. package/dist/lime-elements/p-dfba92de.js +126 -0
  94. package/dist/lime-elements/p-e587e8f6.entry.js +1 -0
  95. package/dist/lime-elements/p-e632aab7.entry.js +1 -0
  96. package/dist/lime-elements/p-ec5e5f63.entry.js +131 -0
  97. package/dist/lime-elements/{p-34c7872e.entry.js → p-f15ab9f4.entry.js} +1 -1
  98. package/dist/lime-elements/p-ff5b1f0f.entry.js +59 -0
  99. package/dist/lime-elements/style/functions.scss +3 -1
  100. package/dist/types/components/switch/switch.d.ts +2 -2
  101. package/package.json +3 -3
  102. package/dist/lime-elements/p-0fd208f3.entry.js +0 -82
  103. package/dist/lime-elements/p-143705b1.entry.js +0 -1
  104. package/dist/lime-elements/p-169fd2eb.entry.js +0 -131
  105. package/dist/lime-elements/p-24d97176.entry.js +0 -1
  106. package/dist/lime-elements/p-510bb5a4.entry.js +0 -1
  107. package/dist/lime-elements/p-51aa6433.entry.js +0 -126
  108. package/dist/lime-elements/p-668795a7.js +0 -73
  109. package/dist/lime-elements/p-67a10143.entry.js +0 -37
  110. package/dist/lime-elements/p-84689828.entry.js +0 -73
  111. package/dist/lime-elements/p-902347b9.js +0 -81
  112. package/dist/lime-elements/p-90c6fa15.js +0 -126
  113. package/dist/lime-elements/p-90f3e17c.entry.js +0 -37
  114. package/dist/lime-elements/p-c35874db.entry.js +0 -1
  115. package/dist/lime-elements/p-c8c8a946.entry.js +0 -59
  116. package/dist/lime-elements/p-ca664c9f.entry.js +0 -1
  117. package/dist/lime-elements/p-d8167c28.entry.js +0 -82
  118. package/dist/lime-elements/p-df8faeb4.entry.js +0 -59
package/dist/collection/components/icon-button/icon-button.css CHANGED
@@ -4,41 +4,42 @@
4
4
  * Nothing in this file may output any CSS
5
5
  * without being explicitly called by outside code.
6
6
  */
7
- @media (pointer: coarse) {
8
- .mdc-icon-button:hover::before {
9
- opacity: 0;
10
- }
11
- }
12
- /**
13
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
14
- */
15
- :host {
16
- display: inline-flex;
17
- align-items: center;
18
- justify-content: center;
19
- }
20
-
21
- :host([hidden]) {
22
- display: none;
7
+ .mdc-icon-button {
8
+ font-size: 24px;
9
+ width: 48px;
10
+ height: 48px;
11
+ padding: 12px;
23
12
  }
24
-
25
- :host([disabled]) {
26
- pointer-events: none;
13
+ .mdc-icon-button.mdc-icon-button--reduced-size {
14
+ width: 40px;
15
+ height: 40px;
16
+ padding: 8px;
27
17
  }
28
-
29
- :host([elevated]) .mdc-icon-button {
30
- padding: 0.5625rem;
18
+ .mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch {
19
+ margin-top: 4px;
20
+ margin-bottom: 4px;
21
+ margin-right: 4px;
22
+ margin-left: 4px;
31
23
  }
32
- :host([elevated]) limel-icon {
33
- transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
34
- box-shadow: var(--button-shadow-normal);
24
+ .mdc-icon-button .mdc-icon-button__touch {
25
+ position: absolute;
26
+ top: 50%;
27
+ height: 48px;
28
+ /* @noflip */
29
+ /*rtl:ignore*/
30
+ left: 50%;
31
+ width: 48px;
32
+ transform: translate(-50%, -50%);
35
33
  }
36
- :host([elevated]) limel-icon:hover {
37
- box-shadow: var(--button-shadow-hovered);
34
+ .mdc-icon-button:disabled {
35
+ color: rgba(0, 0, 0, 0.38);
36
+ /* @alternate */
37
+ color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
38
38
  }
39
- :host([elevated]) limel-icon:active {
40
- box-shadow: var(--button-shadow-pressed);
41
- transform: translate3d(0, 0.08rem, 0);
39
+ .mdc-icon-button svg,
40
+ .mdc-icon-button img {
41
+ width: 24px;
42
+ height: 24px;
42
43
  }
43
44
 
44
45
  .mdc-icon-button {
@@ -50,29 +51,32 @@
50
51
  background-color: transparent;
51
52
  fill: currentColor;
52
53
  color: inherit;
53
- font-size: 24px;
54
54
  text-decoration: none;
55
55
  cursor: pointer;
56
56
  user-select: none;
57
- width: 48px;
58
- height: 48px;
59
- padding: 12px;
60
- }
61
- .mdc-icon-button svg,
62
- .mdc-icon-button img {
63
- width: 24px;
64
- height: 24px;
57
+ overflow: visible;
65
58
  }
66
- .mdc-icon-button:disabled {
67
- color: rgba(0, 0, 0, 0.38);
68
- /* @alternate */
69
- color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
59
+ .mdc-icon-button .mdc-icon-button__touch {
60
+ position: absolute;
61
+ top: 50%;
62
+ height: 48px;
63
+ /* @noflip */
64
+ /*rtl:ignore*/
65
+ left: 50%;
66
+ width: 48px;
67
+ transform: translate(-50%, -50%);
70
68
  }
71
69
  .mdc-icon-button:disabled {
72
70
  cursor: default;
73
71
  pointer-events: none;
74
72
  }
75
73
 
74
+ .mdc-icon-button--display-flex {
75
+ align-items: center;
76
+ display: inline-flex;
77
+ justify-content: center;
78
+ }
79
+
76
80
  .mdc-icon-button__icon {
77
81
  display: inline-block;
78
82
  }
@@ -80,6 +84,11 @@
80
84
  display: none;
81
85
  }
82
86
 
87
+ .mdc-icon-button--touch {
88
+ margin-top: 0px;
89
+ margin-bottom: 0px;
90
+ }
91
+
83
92
  .mdc-icon-button--on .mdc-icon-button__icon {
84
93
  display: none;
85
94
  }
@@ -124,84 +133,91 @@
124
133
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
125
134
  will-change: transform, opacity;
126
135
  }
127
- .mdc-icon-button::before, .mdc-icon-button::after {
136
+ .mdc-icon-button .mdc-icon-button__ripple::before,
137
+ .mdc-icon-button .mdc-icon-button__ripple::after {
128
138
  position: absolute;
129
139
  border-radius: 50%;
130
140
  opacity: 0;
131
141
  pointer-events: none;
132
142
  content: "";
133
143
  }
134
- .mdc-icon-button::before {
144
+ .mdc-icon-button .mdc-icon-button__ripple::before {
135
145
  transition: opacity 15ms linear, background-color 15ms linear;
136
146
  z-index: 1;
137
147
  /* @alternate */
138
148
  z-index: var(--mdc-ripple-z-index, 1);
139
149
  }
140
- .mdc-icon-button::after {
150
+ .mdc-icon-button .mdc-icon-button__ripple::after {
141
151
  z-index: 0;
142
152
  /* @alternate */
143
153
  z-index: var(--mdc-ripple-z-index, 0);
144
154
  }
145
- .mdc-icon-button.mdc-ripple-upgraded::before {
155
+ .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before {
146
156
  transform: scale(var(--mdc-ripple-fg-scale, 1));
147
157
  }
148
- .mdc-icon-button.mdc-ripple-upgraded::after {
158
+ .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
149
159
  top: 0;
150
160
  /* @noflip */
161
+ /*rtl:ignore*/
151
162
  left: 0;
152
163
  transform: scale(0);
153
164
  transform-origin: center center;
154
165
  }
155
- .mdc-icon-button.mdc-ripple-upgraded--unbounded::after {
166
+ .mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
156
167
  top: var(--mdc-ripple-top, 0);
157
168
  /* @noflip */
169
+ /*rtl:ignore*/
158
170
  left: var(--mdc-ripple-left, 0);
159
171
  }
160
- .mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after {
172
+ .mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
161
173
  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
162
174
  }
163
- .mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after {
175
+ .mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after {
164
176
  animation: mdc-ripple-fg-opacity-out 150ms;
165
177
  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
166
178
  }
167
- .mdc-icon-button::before, .mdc-icon-button::after {
179
+ .mdc-icon-button .mdc-icon-button__ripple::before,
180
+ .mdc-icon-button .mdc-icon-button__ripple::after {
168
181
  top: calc(50% - 50%);
169
182
  /* @noflip */
183
+ /*rtl:ignore*/
170
184
  left: calc(50% - 50%);
171
185
  width: 100%;
172
186
  height: 100%;
173
187
  }
174
- .mdc-icon-button.mdc-ripple-upgraded::before, .mdc-icon-button.mdc-ripple-upgraded::after {
188
+ .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
189
+ .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
175
190
  top: var(--mdc-ripple-top, calc(50% - 50%));
176
191
  /* @noflip */
192
+ /*rtl:ignore*/
177
193
  left: var(--mdc-ripple-left, calc(50% - 50%));
178
194
  width: var(--mdc-ripple-fg-size, 100%);
179
195
  height: var(--mdc-ripple-fg-size, 100%);
180
196
  }
181
- .mdc-icon-button.mdc-ripple-upgraded::after {
197
+ .mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
182
198
  width: var(--mdc-ripple-fg-size, 100%);
183
199
  height: var(--mdc-ripple-fg-size, 100%);
184
200
  }
185
- .mdc-icon-button::before, .mdc-icon-button::after {
201
+ .mdc-icon-button .mdc-icon-button__ripple::before, .mdc-icon-button .mdc-icon-button__ripple::after {
186
202
  background-color: #000;
187
203
  /* @alternate */
188
204
  background-color: var(--mdc-ripple-color, #000);
189
205
  }
190
- .mdc-icon-button:hover::before, .mdc-icon-button.mdc-ripple-surface--hover::before {
206
+ .mdc-icon-button:hover .mdc-icon-button__ripple::before, .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
191
207
  opacity: 0.04;
192
208
  /* @alternate */
193
209
  opacity: var(--mdc-ripple-hover-opacity, 0.04);
194
210
  }
195
- .mdc-icon-button.mdc-ripple-upgraded--background-focused::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus::before {
211
+ .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
196
212
  transition-duration: 75ms;
197
213
  opacity: 0.12;
198
214
  /* @alternate */
199
215
  opacity: var(--mdc-ripple-focus-opacity, 0.12);
200
216
  }
201
- .mdc-icon-button:not(.mdc-ripple-upgraded)::after {
217
+ .mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
202
218
  transition: opacity 150ms linear;
203
219
  }
204
- .mdc-icon-button:not(.mdc-ripple-upgraded):active::after {
220
+ .mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
205
221
  transition-duration: 75ms;
206
222
  opacity: 0.12;
207
223
  /* @alternate */
@@ -210,6 +226,47 @@
210
226
  .mdc-icon-button.mdc-ripple-upgraded {
211
227
  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
212
228
  }
229
+ .mdc-icon-button .mdc-icon-button__ripple {
230
+ pointer-events: none;
231
+ z-index: 1;
232
+ }
233
+
234
+ @media (pointer: coarse) {
235
+ .mdc-icon-button:hover::before {
236
+ opacity: 0;
237
+ }
238
+ }
239
+ /**
240
+ * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
241
+ */
242
+ :host {
243
+ display: inline-flex;
244
+ align-items: center;
245
+ justify-content: center;
246
+ }
247
+
248
+ :host([hidden]) {
249
+ display: none;
250
+ }
251
+
252
+ :host([disabled]) {
253
+ pointer-events: none;
254
+ }
255
+
256
+ :host([elevated]) .mdc-icon-button {
257
+ padding: 0.5625rem;
258
+ }
259
+ :host([elevated]) limel-icon {
260
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
261
+ box-shadow: var(--button-shadow-normal);
262
+ }
263
+ :host([elevated]) limel-icon:hover {
264
+ box-shadow: var(--button-shadow-hovered);
265
+ }
266
+ :host([elevated]) limel-icon:active {
267
+ box-shadow: var(--button-shadow-pressed);
268
+ transform: translate3d(0, 0.08rem, 0);
269
+ }
213
270
 
214
271
  .mdc-icon-button:disabled {
215
272
  color: var(--mdc-theme-text-disabled-on-background);
package/dist/collection/components/icon-button/icon-button.js CHANGED
@@ -67,6 +67,7 @@ export class IconButton {
67
67
  iconAttributes.size = 'small';
68
68
  }
69
69
  return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
70
+ h("div", { class: "mdc-icon-button__ripple" }),
70
71
  h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
71
72
  }
72
73
  static get is() { return "limel-icon-button"; }