lapikit 0.7.0 → 0.7.1

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 (13) hide show
  1. package/dist/@types/components.d.ts +7 -0
  2. package/dist/components/app/app.svelte +218 -272
  3. package/dist/directives.d.ts +14 -0
  4. package/dist/directives.js +128 -0
  5. package/dist/escaping.js +4 -1
  6. package/dist/html-mapped.js +5 -65
  7. package/dist/labs/sheet/sheet.svelte +60 -26
  8. package/dist/labs/sheet/sheet.svelte.d.ts +3 -0
  9. package/dist/utils/components.d.ts +35 -7
  10. package/dist/utils/components.js +174 -63
  11. package/dist/utils/directives.d.ts +20 -0
  12. package/dist/utils/directives.js +64 -0
  13. package/package.json +4 -2
package/dist/@types/components.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  import type { ClassNameType, IdElementType, KitClassNameType, KitStylePropertiesType, PropValue, SClassProp, SStyleProp, StylePropertiesType } from './';
3
+ import type { ClassValue } from 'svelte/elements';
3
4
  export interface useClassNameProps {
4
5
  baseClass?: string;
5
6
  className?: string;
@@ -32,3 +33,9 @@ export type ComponentInfo = {
32
33
  ref: string;
33
34
  direct?: boolean;
34
35
  };
36
+ export interface ComponentAttrs {
37
+ /** For the class attribute of the element: Svelte applies clsx (strings, arrays, objects) */
38
+ class: ClassValue;
39
+ style: string;
40
+ rest: Record<string, unknown>;
41
+ }
package/dist/components/app/app.svelte CHANGED
@@ -37,275 +37,221 @@
37
37
  {@render children?.()}
38
38
  </div>
39
39
 
40
- <style>
41
- :global(html) {
42
- --kit-shape-none: 0;
43
- --kit-shape-xs: 4px;
44
- --kit-shape-sm: 6px;
45
- --kit-shape-md: 10px;
46
- --kit-shape-lg: 14px;
47
- --kit-shape-xl: 18px;
48
- --kit-shape-full: 9999px;
49
-
50
- --kit-font-xs: 13px;
51
- --kit-font-sm: 14px;
52
- --kit-font-md: 15px;
53
- --kit-font-lg: 16px;
54
- --kit-font-xl: 17px;
55
-
56
- --kit-space-compact: 2px;
57
- --kit-space-default: 4px;
58
- --kit-space-comfortable: 6px;
59
-
60
- --kit-density-compact: -4px;
61
- --kit-density-default: 0px;
62
- --kit-density-comfortable: 4px;
63
-
64
- --kit-shadow-opacity: 30%;
65
- --kit-shadow-ambient-opacity: 15%;
66
-
67
- --kit-disabled-opacity: 0.55;
68
- --kit-font:
69
- ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
70
- 'Segoe UI Symbol', 'Noto Color Emoji';
71
-
72
- --kit-color-transparent: transparent;
73
- }
74
-
75
- :global(html:not([data-kit-theme])),
76
- :global([data-kit-theme='light']) {
77
- color-scheme: light;
78
- --kit-color-surface: hsl(0 0% 100%);
79
- --kit-color-surface-1: hsl(240 15% 96.5%);
80
- --kit-color-surface-2: hsl(240 10% 93%);
81
- --kit-color-surface-3: hsl(0 0% 100%);
82
-
83
- --kit-color-text: hsl(222 20% 10%);
84
- --kit-color-text-muted: hsl(220 10% 40%);
85
- --kit-color-text-subtle: hsl(220 8% 58%);
86
- --kit-color-text-disabled: hsl(220 5% 76%);
87
-
88
- --kit-color-fill: hsl(240 8% 93%);
89
- --kit-color-fill-hover: hsl(240 4% 91%);
90
- --kit-color-fill-active: hsl(240 4% 88%);
91
-
92
- --kit-color-border: hsl(220 16% 88%);
93
- --kit-color-shadow: hsl(240 3% 11%);
94
-
95
- --kit-color-accent: hsl(220 90% 56%);
96
- --kit-color-on-accent: hsl(0 0% 100%);
97
- --kit-color-success: hsl(145 50% 38%);
98
- --kit-color-on-success: hsl(0 0% 100%);
99
- --kit-color-warning: hsl(35 80% 45%);
100
- --kit-color-on-warning: hsl(222 20% 10%);
101
- --kit-color-error: hsl(5 65% 48%);
102
- --kit-color-on-error: hsl(0 0% 100%);
103
- --kit-color-info: hsl(205 60% 42%);
104
- --kit-color-on-info: hsl(0 0% 100%);
105
- --kit-color-focus: hsl(35 90% 56%);
106
- }
107
-
108
- :global([data-kit-theme='dark']) {
109
- color-scheme: dark;
110
-
111
- --kit-color-surface: hsl(240 3% 11%);
112
- --kit-color-surface-1: hsl(240 2% 17.5%);
113
- --kit-color-surface-2: hsl(240 1.5% 23%);
114
- --kit-color-surface-3: hsl(240 1.5% 28%);
115
-
116
- --kit-color-text: hsl(0 0% 100%);
117
- --kit-color-text-muted: hsl(240 3% 56%);
118
- --kit-color-text-subtle: hsl(240 2.5% 38%);
119
- --kit-color-text-disabled: hsl(240 1.5% 25%);
120
-
121
- --kit-color-fill: hsl(240 2.5% 24%);
122
- --kit-color-fill-hover: hsl(240 2.5% 28%);
123
- --kit-color-fill-active: hsl(240 2.5% 31%);
124
-
125
- --kit-color-border: hsl(240 2% 26%);
126
- --kit-color-shadow: hsl(240 3% 11%);
127
-
128
- --kit-color-accent: hsl(220 85% 65%);
129
- --kit-color-on-accent: hsl(240 3% 11%);
130
- --kit-color-success: hsl(145 50% 50%);
131
- --kit-color-on-success: hsl(240 3% 11%);
132
- --kit-color-warning: hsl(35 85% 58%);
133
- --kit-color-on-warning: hsl(240 3% 11%);
134
- --kit-color-error: hsl(5 70% 60%);
135
- --kit-color-on-error: hsl(240 3% 11%);
136
- --kit-color-info: hsl(205 65% 58%);
137
- --kit-color-on-info: hsl(240 3% 11%);
138
- --kit-color-focus: hsl(35 90% 62%);
139
- }
140
-
141
- @media (prefers-color-scheme: light) {
142
- :global([data-kit-theme='system']) {
143
- color-scheme: light;
144
-
145
- --kit-color-surface: hsl(0 0% 100%);
146
- --kit-color-surface-1: hsl(240 15% 96.5%);
147
- --kit-color-surface-2: hsl(240 10% 93%);
148
- --kit-color-surface-3: hsl(0 0% 100%);
149
-
150
- --kit-color-text: hsl(222 20% 10%);
151
- --kit-color-text-muted: hsl(220 10% 40%);
152
- --kit-color-text-subtle: hsl(220 8% 58%);
153
- --kit-color-text-disabled: hsl(220 5% 76%);
154
-
155
- --kit-color-fill: hsl(240 8% 93%);
156
- --kit-color-fill-hover: hsl(240 4% 91%);
157
- --kit-color-fill-active: hsl(240 4% 88%);
158
-
159
- --kit-color-border: hsl(220 16% 88%);
160
- --kit-color-shadow: hsl(240 3% 11%);
161
-
162
- --kit-color-accent: hsl(220 90% 56%);
163
- --kit-color-on-accent: hsl(0 0% 100%);
164
- --kit-color-success: hsl(145 50% 38%);
165
- --kit-color-on-success: hsl(0 0% 100%);
166
- --kit-color-warning: hsl(35 80% 45%);
167
- --kit-color-on-warning: hsl(222 20% 10%);
168
- --kit-color-error: hsl(5 65% 48%);
169
- --kit-color-on-error: hsl(0 0% 100%);
170
- --kit-color-info: hsl(205 60% 42%);
171
- --kit-color-on-info: hsl(0 0% 100%);
172
- --kit-color-focus: hsl(35 90% 56%);
173
- }
174
- }
175
-
176
- @media (prefers-color-scheme: dark) {
177
- :global([data-kit-theme='system']) {
178
- color-scheme: dark;
179
-
180
- --kit-color-surface: hsl(240 3% 11%);
181
- --kit-color-surface-1: hsl(240 2% 17.5%);
182
- --kit-color-surface-2: hsl(240 1.5% 23%);
183
- --kit-color-surface-3: hsl(240 1.5% 28%);
184
-
185
- --kit-color-text: hsl(0 0% 100%);
186
- --kit-color-text-muted: hsl(240 3% 56%);
187
- --kit-color-text-subtle: hsl(240 2.5% 38%);
188
- --kit-color-text-disabled: hsl(240 1.5% 25%);
189
-
190
- --kit-color-fill: hsl(240 2.5% 24%);
191
- --kit-color-fill-hover: hsl(240 2.5% 28%);
192
- --kit-color-fill-active: hsl(240 2.5% 31%);
193
-
194
- --kit-color-border: hsl(240 2% 26%);
195
- --kit-color-shadow: hsl(240 3% 11%);
196
-
197
- --kit-color-accent: hsl(220 85% 65%);
198
- --kit-color-on-accent: hsl(240 3% 11%);
199
- --kit-color-success: hsl(145 50% 50%);
200
- --kit-color-on-success: hsl(240 3% 11%);
201
- --kit-color-warning: hsl(35 85% 58%);
202
- --kit-color-on-warning: hsl(240 3% 11%);
203
- --kit-color-error: hsl(5 70% 60%);
204
- --kit-color-on-error: hsl(240 3% 11%);
205
- --kit-color-info: hsl(205 65% 58%);
206
- --kit-color-on-info: hsl(240 3% 11%);
207
- --kit-color-focus: hsl(35 90% 62%);
208
- }
209
- }
210
-
211
- :global(.outline) {
212
- position: absolute;
213
- inset: 0;
214
- border: 1px solid var(--outline-color);
215
- border-radius: inherit;
216
- box-sizing: border-box;
217
- z-index: 1;
218
- pointer-events: none;
219
- }
220
-
221
- :global(.kit-ripple) {
222
- background-color: currentColor;
223
- opacity: 0.1;
224
- position: absolute;
225
- border-radius: 50%;
226
- pointer-events: none;
227
- transition: 0.6s;
228
- animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
229
- cubic-bezier(0.4, 0, 0.2, 1);
230
- border-radius: 50%;
231
- }
232
-
233
- :global(.kit-ripple--center) {
234
- top: 50% !important;
235
- left: 50% !important;
236
- translate: -50% -50% !important;
237
- }
238
-
239
- :global(.kit-ripple--effect) {
240
- position: absolute;
241
- left: 0;
242
- right: 0;
243
- top: 0;
244
- bottom: 0;
245
- overflow: hidden;
246
- background: none;
247
- pointer-events: none;
248
- z-index: 999;
249
- border-radius: var(--system-ripple-radius);
250
- }
251
-
252
- :global([data-elevation='0']),
253
- :global([data-elevation-hover='0']:hover),
254
- :global([data-elevation-active='0']):active {
255
- box-shadow: none;
256
- }
257
-
258
- :global([data-elevation='1']),
259
- :global([data-elevation-hover='1']:hover),
260
- :global([data-elevation-active='1']:active) {
261
- box-shadow:
262
- 0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
263
- 0 3px 8px -2px
264
- color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
265
- }
266
-
267
- :global([data-elevation='2']),
268
- :global([data-elevation-hover='2']:hover),
269
- :global([data-elevation-active='2']:active) {
270
- box-shadow:
271
- 0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
272
- 0 5px 12px -3px
273
- color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
274
- }
275
-
276
- :global([data-elevation='3']),
277
- :global([data-elevation-hover='3']:hover),
278
- :global([data-elevation-active='3']:active) {
279
- box-shadow:
280
- 0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
281
- 0 8px 20px -4px
282
- color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
283
- }
284
-
285
- :global([data-elevation='4']),
286
- :global([data-elevation-hover='4']):hover,
287
- :global([data-elevation-active='4']):active {
288
- box-shadow:
289
- 0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
290
- 0 11px 26px -5px
291
- color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
292
- }
293
-
294
- :global([data-elevation='5']),
295
- :global([data-elevation-hover='5']:hover),
296
- :global([data-elevation-active='5']:active) {
297
- box-shadow:
298
- 0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
299
- 0 14px 32px -6px
300
- color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
301
- }
302
- @keyframes -global-animation-l-ripple {
303
- from {
304
- scale: 0;
305
- }
306
-
307
- to {
308
- scale: 1;
309
- }
310
- }
311
- </style>
40
+ <style>:root {
41
+ --kit-shape-none: 0;
42
+ --kit-shape-xs: 0.25rem;
43
+ --kit-shape-sm: 0.375rem;
44
+ --kit-shape-md: 0.625rem;
45
+ --kit-shape-lg: 0.875rem;
46
+ --kit-shape-xl: 1.125rem;
47
+ --kit-shape-full: 9999px;
48
+ }
49
+
50
+ :global html {
51
+ --kit-font-xs: 13px;
52
+ --kit-font-sm: 14px;
53
+ --kit-font-md: 15px;
54
+ --kit-font-lg: 16px;
55
+ --kit-font-xl: 17px;
56
+ --kit-space-compact: 2px;
57
+ --kit-space-default: 4px;
58
+ --kit-space-comfortable: 6px;
59
+ --kit-density-compact: -4px;
60
+ --kit-density-default: 0px;
61
+ --kit-density-comfortable: 4px;
62
+ --kit-shadow-opacity: 30%;
63
+ --kit-shadow-ambient-opacity: 15%;
64
+ --kit-disabled-opacity: 0.55;
65
+ --kit-font:
66
+ ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
67
+ 'Segoe UI Symbol', 'Noto Color Emoji';
68
+ --kit-color-transparent: transparent;
69
+ }
70
+ :global html:not([data-kit-theme]),
71
+ :global [data-kit-theme=light] {
72
+ color-scheme: light;
73
+ --kit-color-surface: hsl(0 0% 100%);
74
+ --kit-color-surface-1: hsl(240 15% 96.5%);
75
+ --kit-color-surface-2: hsl(240 10% 93%);
76
+ --kit-color-surface-3: hsl(0 0% 100%);
77
+ --kit-color-text: hsl(222 20% 10%);
78
+ --kit-color-text-muted: hsl(220 10% 40%);
79
+ --kit-color-text-subtle: hsl(220 8% 58%);
80
+ --kit-color-text-disabled: hsl(220 5% 76%);
81
+ --kit-color-fill: hsl(240 8% 93%);
82
+ --kit-color-fill-hover: hsl(240 4% 91%);
83
+ --kit-color-fill-active: hsl(240 4% 88%);
84
+ --kit-color-border: hsl(220 16% 88%);
85
+ --kit-color-shadow: hsl(240 3% 11%);
86
+ --kit-color-accent: hsl(220 90% 56%);
87
+ --kit-color-on-accent: hsl(0 0% 100%);
88
+ --kit-color-success: hsl(145 50% 38%);
89
+ --kit-color-on-success: hsl(0 0% 100%);
90
+ --kit-color-warning: hsl(35 80% 45%);
91
+ --kit-color-on-warning: hsl(222 20% 10%);
92
+ --kit-color-error: hsl(5 65% 48%);
93
+ --kit-color-on-error: hsl(0 0% 100%);
94
+ --kit-color-info: hsl(205 60% 42%);
95
+ --kit-color-on-info: hsl(0 0% 100%);
96
+ --kit-color-focus: hsl(35 90% 56%);
97
+ }
98
+ :global [data-kit-theme=dark] {
99
+ color-scheme: dark;
100
+ --kit-color-surface: hsl(240 3% 11%);
101
+ --kit-color-surface-1: hsl(240 2% 17.5%);
102
+ --kit-color-surface-2: hsl(240 1.5% 23%);
103
+ --kit-color-surface-3: hsl(240 1.5% 28%);
104
+ --kit-color-text: hsl(0 0% 100%);
105
+ --kit-color-text-muted: hsl(240 3% 56%);
106
+ --kit-color-text-subtle: hsl(240 2.5% 38%);
107
+ --kit-color-text-disabled: hsl(240 1.5% 25%);
108
+ --kit-color-fill: hsl(240 2.5% 24%);
109
+ --kit-color-fill-hover: hsl(240 2.5% 28%);
110
+ --kit-color-fill-active: hsl(240 2.5% 31%);
111
+ --kit-color-border: hsl(240 2% 26%);
112
+ --kit-color-shadow: hsl(240 3% 11%);
113
+ --kit-color-accent: hsl(220 85% 65%);
114
+ --kit-color-on-accent: hsl(240 3% 11%);
115
+ --kit-color-success: hsl(145 50% 50%);
116
+ --kit-color-on-success: hsl(240 3% 11%);
117
+ --kit-color-warning: hsl(35 85% 58%);
118
+ --kit-color-on-warning: hsl(240 3% 11%);
119
+ --kit-color-error: hsl(5 70% 60%);
120
+ --kit-color-on-error: hsl(240 3% 11%);
121
+ --kit-color-info: hsl(205 65% 58%);
122
+ --kit-color-on-info: hsl(240 3% 11%);
123
+ --kit-color-focus: hsl(35 90% 62%);
124
+ }
125
+ @media (prefers-color-scheme: light) {
126
+ :global [data-kit-theme=system] {
127
+ color-scheme: light;
128
+ --kit-color-surface: hsl(0 0% 100%);
129
+ --kit-color-surface-1: hsl(240 15% 96.5%);
130
+ --kit-color-surface-2: hsl(240 10% 93%);
131
+ --kit-color-surface-3: hsl(0 0% 100%);
132
+ --kit-color-text: hsl(222 20% 10%);
133
+ --kit-color-text-muted: hsl(220 10% 40%);
134
+ --kit-color-text-subtle: hsl(220 8% 58%);
135
+ --kit-color-text-disabled: hsl(220 5% 76%);
136
+ --kit-color-fill: hsl(240 8% 93%);
137
+ --kit-color-fill-hover: hsl(240 4% 91%);
138
+ --kit-color-fill-active: hsl(240 4% 88%);
139
+ --kit-color-border: hsl(220 16% 88%);
140
+ --kit-color-shadow: hsl(240 3% 11%);
141
+ --kit-color-accent: hsl(220 90% 56%);
142
+ --kit-color-on-accent: hsl(0 0% 100%);
143
+ --kit-color-success: hsl(145 50% 38%);
144
+ --kit-color-on-success: hsl(0 0% 100%);
145
+ --kit-color-warning: hsl(35 80% 45%);
146
+ --kit-color-on-warning: hsl(222 20% 10%);
147
+ --kit-color-error: hsl(5 65% 48%);
148
+ --kit-color-on-error: hsl(0 0% 100%);
149
+ --kit-color-info: hsl(205 60% 42%);
150
+ --kit-color-on-info: hsl(0 0% 100%);
151
+ --kit-color-focus: hsl(35 90% 56%);
152
+ }
153
+ }
154
+ @media (prefers-color-scheme: dark) {
155
+ :global [data-kit-theme=system] {
156
+ color-scheme: dark;
157
+ --kit-color-surface: hsl(240 3% 11%);
158
+ --kit-color-surface-1: hsl(240 2% 17.5%);
159
+ --kit-color-surface-2: hsl(240 1.5% 23%);
160
+ --kit-color-surface-3: hsl(240 1.5% 28%);
161
+ --kit-color-text: hsl(0 0% 100%);
162
+ --kit-color-text-muted: hsl(240 3% 56%);
163
+ --kit-color-text-subtle: hsl(240 2.5% 38%);
164
+ --kit-color-text-disabled: hsl(240 1.5% 25%);
165
+ --kit-color-fill: hsl(240 2.5% 24%);
166
+ --kit-color-fill-hover: hsl(240 2.5% 28%);
167
+ --kit-color-fill-active: hsl(240 2.5% 31%);
168
+ --kit-color-border: hsl(240 2% 26%);
169
+ --kit-color-shadow: hsl(240 3% 11%);
170
+ --kit-color-accent: hsl(220 85% 65%);
171
+ --kit-color-on-accent: hsl(240 3% 11%);
172
+ --kit-color-success: hsl(145 50% 50%);
173
+ --kit-color-on-success: hsl(240 3% 11%);
174
+ --kit-color-warning: hsl(35 85% 58%);
175
+ --kit-color-on-warning: hsl(240 3% 11%);
176
+ --kit-color-error: hsl(5 70% 60%);
177
+ --kit-color-on-error: hsl(240 3% 11%);
178
+ --kit-color-info: hsl(205 65% 58%);
179
+ --kit-color-on-info: hsl(240 3% 11%);
180
+ --kit-color-focus: hsl(35 90% 62%);
181
+ }
182
+ }
183
+ :global .outline {
184
+ position: absolute;
185
+ inset: 0;
186
+ border: 1px solid var(--outline-color);
187
+ border-radius: inherit;
188
+ box-sizing: border-box;
189
+ z-index: 1;
190
+ pointer-events: none;
191
+ }
192
+ :global .kit-ripple {
193
+ background-color: currentColor;
194
+ opacity: 0.1;
195
+ position: absolute;
196
+ border-radius: 50%;
197
+ pointer-events: none;
198
+ transition: 0.6s;
199
+ animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
200
+ border-radius: 50%;
201
+ }
202
+ :global .kit-ripple--center {
203
+ top: 50% !important;
204
+ left: 50% !important;
205
+ translate: -50% -50% !important;
206
+ }
207
+ :global .kit-ripple--effect {
208
+ position: absolute;
209
+ left: 0;
210
+ right: 0;
211
+ top: 0;
212
+ bottom: 0;
213
+ overflow: hidden;
214
+ background: none;
215
+ pointer-events: none;
216
+ z-index: 999;
217
+ border-radius: var(--system-ripple-radius);
218
+ }
219
+ :global [data-elevation="0"],
220
+ :global [data-elevation-hover="0"]:hover,
221
+ :global [data-elevation-active="0"]:active {
222
+ box-shadow: none;
223
+ }
224
+ :global [data-elevation="1"],
225
+ :global [data-elevation-hover="1"]:hover,
226
+ :global [data-elevation-active="1"]:active {
227
+ box-shadow: 0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 3px 8px -2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
228
+ }
229
+ :global [data-elevation="2"],
230
+ :global [data-elevation-hover="2"]:hover,
231
+ :global [data-elevation-active="2"]:active {
232
+ box-shadow: 0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 5px 12px -3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
233
+ }
234
+ :global [data-elevation="3"],
235
+ :global [data-elevation-hover="3"]:hover,
236
+ :global [data-elevation-active="3"]:active {
237
+ box-shadow: 0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 8px 20px -4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
238
+ }
239
+ :global [data-elevation="4"],
240
+ :global [data-elevation-hover="4"]:hover,
241
+ :global [data-elevation-active="4"]:active {
242
+ box-shadow: 0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 11px 26px -5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
243
+ }
244
+ :global [data-elevation="5"],
245
+ :global [data-elevation-hover="5"]:hover,
246
+ :global [data-elevation-active="5"]:active {
247
+ box-shadow: 0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 14px 32px -6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
248
+ }
249
+
250
+ @keyframes -global-animation-l-ripple {
251
+ from {
252
+ scale: 0;
253
+ }
254
+ to {
255
+ scale: 1;
256
+ }
257
+ }</style>
package/dist/directives.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Svelte refuses the class: and style: directives on a component. On a <kit:...> tag, Lili turns them
3
+ * into the s-class_ / s-style_ props the components already handle:
4
+ * class:active -> s-class_active={active}
5
+ * class:gap={4} -> s-class_gap={4} (the component gives the class gap-4)
6
+ * style:opacity={0} -> s-style_opacity={0}
7
+ * style:color="red" -> s-style_color="red"
8
+ * A directive with a modifier (style:color|important) is left as it is: Svelte reports it.
9
+ */
10
+ /**
11
+ * Rewrites the class: and style: directives of the attributes of a tag (everything after its name).
12
+ * The values of the other attributes are skipped, so a "class:" inside a string or an expression is kept.
13
+ */
14
+ export declare function rewriteDirectives(attributes: string): string;