lapikit 0.0.0-insiders.e877f7f → 0.0.0-insiders.ee9a471

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 (186) hide show
  1. package/bin/configuration.js +304 -0
  2. package/bin/helper.js +23 -0
  3. package/bin/index.js +41 -0
  4. package/bin/lapikit.js +37 -5
  5. package/bin/legacy.js +34 -0
  6. package/bin/modules/adapter.js +3 -3
  7. package/bin/modules/plugin.js +223 -0
  8. package/bin/presets.js +26 -0
  9. package/bin/prompts.js +100 -0
  10. package/dist/actions/index.d.ts +1 -0
  11. package/dist/actions/index.js +1 -0
  12. package/dist/assets/icons/arrow-down.svelte +12 -0
  13. package/dist/assets/icons/arrow-down.svelte.d.ts +18 -0
  14. package/dist/assets/icons/arrow-up.svelte +12 -0
  15. package/dist/assets/icons/arrow-up.svelte.d.ts +18 -0
  16. package/dist/assets/icons/close-fill.svelte +12 -0
  17. package/dist/assets/icons/close-fill.svelte.d.ts +18 -0
  18. package/dist/assets/icons/loading-fill.svelte +2 -0
  19. package/dist/assets/icons/loading-fill.svelte.d.ts +6 -14
  20. package/dist/colors.css +0 -0
  21. package/dist/components/accordion/accordion.css +113 -0
  22. package/dist/components/accordion/accordion.svelte +155 -0
  23. package/dist/components/accordion/accordion.svelte.d.ts +4 -0
  24. package/dist/components/accordion/accordion.svelte.js +24 -0
  25. package/dist/components/accordion/modules/accordion-item.svelte +94 -0
  26. package/dist/components/accordion/modules/accordion-item.svelte.d.ts +4 -0
  27. package/dist/components/accordion/types.d.ts +33 -0
  28. package/dist/components/accordion/types.js +1 -0
  29. package/dist/components/alert/alert.css +137 -0
  30. package/dist/components/alert/alert.svelte +211 -0
  31. package/dist/components/alert/alert.svelte.d.ts +4 -0
  32. package/dist/components/alert/types.d.ts +28 -0
  33. package/dist/components/alert/types.js +1 -0
  34. package/dist/components/app/app.css +16 -0
  35. package/dist/components/app/app.svelte +55 -3
  36. package/dist/components/appbar/appbar.css +48 -0
  37. package/dist/components/appbar/appbar.svelte +85 -0
  38. package/dist/components/appbar/appbar.svelte.d.ts +4 -0
  39. package/dist/components/appbar/types.d.ts +15 -0
  40. package/dist/components/appbar/types.js +1 -0
  41. package/dist/components/aspect-ratio/aspect-ratio.css +19 -0
  42. package/dist/components/aspect-ratio/aspect-ratio.svelte +66 -0
  43. package/dist/components/aspect-ratio/aspect-ratio.svelte.d.ts +4 -0
  44. package/dist/components/aspect-ratio/types.d.ts +5 -0
  45. package/dist/components/aspect-ratio/types.js +1 -0
  46. package/dist/components/avatar/avatar.css +109 -0
  47. package/dist/components/avatar/avatar.svelte +160 -0
  48. package/dist/components/avatar/avatar.svelte.d.ts +4 -0
  49. package/dist/components/avatar/types.d.ts +22 -0
  50. package/dist/components/avatar/types.js +1 -0
  51. package/dist/components/button/button.css +165 -194
  52. package/dist/components/button/button.svelte +269 -31
  53. package/dist/components/button/button.svelte.d.ts +2 -2
  54. package/dist/components/button/types.d.ts +7 -5
  55. package/dist/components/card/card.css +115 -0
  56. package/dist/components/card/card.svelte +171 -0
  57. package/dist/components/card/card.svelte.d.ts +4 -0
  58. package/dist/components/card/types.d.ts +18 -0
  59. package/dist/components/card/types.js +1 -0
  60. package/dist/components/chip/chip.css +231 -0
  61. package/dist/components/chip/chip.svelte +342 -0
  62. package/dist/components/chip/chip.svelte.d.ts +4 -0
  63. package/dist/components/chip/types.d.ts +32 -0
  64. package/dist/components/chip/types.js +1 -0
  65. package/dist/components/dialog/dialog.css +136 -0
  66. package/dist/components/dialog/dialog.svelte +211 -0
  67. package/dist/components/dialog/dialog.svelte.d.ts +4 -0
  68. package/dist/components/dialog/types.d.ts +24 -0
  69. package/dist/components/dialog/types.js +1 -0
  70. package/dist/components/dropdown/dropdown.css +4 -4
  71. package/dist/components/dropdown/dropdown.svelte +24 -0
  72. package/dist/components/icon/icon.css +16 -11
  73. package/dist/components/icon/icon.svelte +89 -0
  74. package/dist/components/index.d.ts +17 -1
  75. package/dist/components/index.js +17 -1
  76. package/dist/components/list/list.css +221 -0
  77. package/dist/components/list/list.svelte +243 -0
  78. package/dist/components/list/list.svelte.d.ts +4 -0
  79. package/dist/components/list/modules/list-item.svelte +275 -0
  80. package/dist/components/list/modules/list-item.svelte.d.ts +4 -0
  81. package/dist/components/list/types.d.ts +33 -0
  82. package/dist/components/list/types.js +1 -0
  83. package/dist/components/modal/modal.css +145 -0
  84. package/dist/components/modal/modal.svelte +248 -0
  85. package/dist/components/modal/modal.svelte.d.ts +4 -0
  86. package/dist/components/modal/types.d.ts +26 -0
  87. package/dist/components/modal/types.js +1 -0
  88. package/dist/components/popover/popover.css +4 -4
  89. package/dist/components/popover/popover.svelte +24 -0
  90. package/dist/components/separator/separator.css +46 -0
  91. package/dist/components/separator/separator.svelte +85 -0
  92. package/dist/components/separator/separator.svelte.d.ts +4 -0
  93. package/dist/components/separator/types.d.ts +11 -0
  94. package/dist/components/separator/types.js +1 -0
  95. package/dist/components/spacer/spacer.css +3 -0
  96. package/dist/components/spacer/spacer.svelte +12 -0
  97. package/dist/components/spacer/spacer.svelte.d.ts +4 -0
  98. package/dist/components/spacer/types.d.ts +4 -0
  99. package/dist/components/spacer/types.js +1 -0
  100. package/dist/components/textfield/textfield.css +305 -0
  101. package/dist/components/textfield/textfield.svelte +463 -0
  102. package/dist/components/textfield/textfield.svelte.d.ts +4 -0
  103. package/dist/components/textfield/types.d.ts +37 -0
  104. package/dist/components/textfield/types.js +1 -0
  105. package/dist/components/toolbar/toolbar.css +129 -0
  106. package/dist/components/toolbar/toolbar.svelte +182 -0
  107. package/dist/components/toolbar/toolbar.svelte.d.ts +4 -0
  108. package/dist/components/toolbar/types.d.ts +27 -0
  109. package/dist/components/toolbar/types.js +1 -0
  110. package/dist/components/tooltip/tooltip.css +4 -4
  111. package/dist/components/tooltip/tooltip.svelte +127 -0
  112. package/dist/index.d.ts +27 -1
  113. package/dist/index.js +27 -3
  114. package/dist/internal/assets.svelte.d.ts +1 -0
  115. package/dist/internal/assets.svelte.js +13 -0
  116. package/dist/internal/config/presets.d.ts +136 -0
  117. package/dist/internal/config/presets.js +121 -0
  118. package/dist/internal/config/variables.d.ts +20 -0
  119. package/dist/internal/config/variables.js +20 -0
  120. package/dist/internal/core/formatter/component.d.ts +5 -0
  121. package/dist/internal/core/formatter/component.js +63 -0
  122. package/dist/internal/core/formatter/index.d.ts +6 -0
  123. package/dist/internal/core/formatter/index.js +30 -0
  124. package/dist/internal/core/formatter/styles.d.ts +4 -0
  125. package/dist/internal/core/formatter/styles.js +15 -0
  126. package/dist/internal/core/formatter/theme.d.ts +5 -0
  127. package/dist/internal/core/formatter/theme.js +28 -0
  128. package/dist/internal/core/formatter/typography.d.ts +5 -0
  129. package/dist/internal/core/formatter/typography.js +12 -0
  130. package/dist/internal/deepMerge.d.ts +44 -0
  131. package/dist/internal/deepMerge.js +80 -0
  132. package/dist/internal/helpers/parser.d.ts +10 -0
  133. package/dist/internal/helpers/parser.js +92 -0
  134. package/dist/internal/index.d.ts +1 -0
  135. package/dist/internal/index.js +1 -0
  136. package/dist/internal/plugins/vite.d.ts +8 -0
  137. package/dist/internal/plugins/vite.js +25 -0
  138. package/dist/internal/ripple.d.ts +12 -0
  139. package/dist/internal/ripple.js +93 -0
  140. package/dist/internal/scroll.d.ts +1 -0
  141. package/dist/internal/scroll.js +6 -0
  142. package/dist/internal/types/configuration.d.ts +40 -0
  143. package/dist/internal/types/configuration.js +1 -0
  144. package/dist/internal/types/index.d.ts +1 -0
  145. package/dist/internal/types/index.js +1 -0
  146. package/dist/internal/unit.d.ts +1 -0
  147. package/dist/internal/unit.js +11 -0
  148. package/dist/labs/index.d.ts +4 -0
  149. package/dist/labs/index.js +5 -0
  150. package/dist/labs/my-component-style-global.svelte +6 -0
  151. package/dist/labs/my-component-style-global.svelte.d.ts +18 -0
  152. package/dist/labs/my-component-style-import.svelte +15 -0
  153. package/dist/labs/my-component-style-import.svelte.d.ts +18 -0
  154. package/dist/labs/my-component-style-mixed.svelte +23 -0
  155. package/dist/labs/my-component-style-mixed.svelte.d.ts +18 -0
  156. package/dist/labs/my-component.svelte +16 -0
  157. package/dist/labs/my-component.svelte.d.ts +18 -0
  158. package/dist/labs/style-mixed.css +7 -0
  159. package/dist/labs/style.css +7 -0
  160. package/dist/labs.css +25 -0
  161. package/dist/plugin/css.d.ts +1 -0
  162. package/dist/plugin/css.js +73 -0
  163. package/dist/plugin/preset-v2.d.ts +108 -0
  164. package/dist/plugin/preset-v2.js +126 -0
  165. package/dist/plugin/vitejs.d.ts +5 -1
  166. package/dist/plugin/vitejs.js +32 -3
  167. package/dist/preset.js +2 -2
  168. package/dist/stores/breakpoints.d.ts +6 -0
  169. package/dist/stores/breakpoints.js +14 -0
  170. package/dist/stores/components.d.ts +8 -0
  171. package/dist/stores/components.js +26 -0
  172. package/dist/stores/devices.d.ts +6 -0
  173. package/dist/stores/devices.js +9 -0
  174. package/dist/stores/index.d.ts +4 -4
  175. package/dist/stores/index.js +4 -23
  176. package/dist/stores/themes.d.ts +8 -0
  177. package/dist/stores/themes.js +34 -0
  178. package/dist/style/animation.css +42 -0
  179. package/dist/style/css.js +3 -0
  180. package/dist/style/normalize.css +2 -0
  181. package/dist/style/parser/color.js +2 -2
  182. package/dist/style/parser/device.js +31 -19
  183. package/dist/style/variable.css +12 -0
  184. package/dist/utils/convert.d.ts +1 -0
  185. package/dist/utils/convert.js +17 -0
  186. package/package.json +21 -5
package/dist/components/list/list.css ADDED
@@ -0,0 +1,221 @@
1
+ /* root */
2
+ .kit-list {
3
+ --list-color: var(--on, var(--kit-on-container));
4
+ --list-background: var(--base, var(--kit-container));
5
+ --list-radius: var(--shape, var(--kit-radius-md));
6
+ }
7
+
8
+ .kit-list {
9
+ position: relative;
10
+ flex-direction: column;
11
+ width: 100%;
12
+ display: flex;
13
+ border: none;
14
+ outline: none;
15
+ }
16
+
17
+ .kit-list-item {
18
+ --list-item-radius: var(--shape, var(--list-radius, var(--kit-radius-md)));
19
+ }
20
+
21
+ .kit-list-item {
22
+ position: relative;
23
+ border: none;
24
+ outline: none;
25
+ padding-top: var(--list-spacing-x);
26
+ padding-bottom: var(--list-spacing-x);
27
+ padding-right: var(--list-spacing-y);
28
+ padding-left: var(--list-spacing-y);
29
+ color: var(--list-item-color);
30
+ border-radius: var(--list-item-radius);
31
+ font-weight: 500;
32
+ text-decoration: none;
33
+ }
34
+
35
+ .kit-list-item:not(div) {
36
+ cursor: pointer;
37
+ }
38
+
39
+ .kit-list-item,
40
+ .kit-list-item .kit-list-item-content--content,
41
+ .kit-list-item .kit-list-item-content--append,
42
+ .kit-list-item .kit-list-item-content--prepend {
43
+ display: inline-flex;
44
+ align-items: center;
45
+ white-space: nowrap;
46
+ gap: calc(var(--prism-spacing) * var(--list-multiplier-gap));
47
+ font-size: calc(var(--prism-spacing) * var(--list-multiplier-font-size));
48
+ }
49
+
50
+ .kit-list-item.kit-list-item--append:not(.kit-list-item--prepend) {
51
+ display: grid;
52
+ grid-template-columns: auto 1fr;
53
+ }
54
+
55
+ .kit-list-item.kit-list-item--prepend:not(.kit-list-item--append) {
56
+ display: grid;
57
+ grid-template-columns: 1fr auto;
58
+ }
59
+
60
+ .kit-list-item.kit-list-item--prepend.kit-list-item--append {
61
+ display: grid;
62
+ grid-template-columns: auto 1fr auto;
63
+ }
64
+
65
+ .kit-list-item::after {
66
+ content: '';
67
+ position: absolute;
68
+ inset: 0;
69
+ background-color: currentColor;
70
+ opacity: 0;
71
+ transition: opacity 150ms ease;
72
+ pointer-events: none;
73
+ border-radius: inherit;
74
+ }
75
+ .kit-list-item:not(div):hover::after {
76
+ opacity: 0.08;
77
+ }
78
+ .kit-list-item:not(div):active::after {
79
+ opacity: 0.12;
80
+ }
81
+ .kit-list-item:not(div):focus-visible::after {
82
+ opacity: 0.12;
83
+ }
84
+
85
+ .kit-list.kit-list--nav {
86
+ padding-top: 8px;
87
+ padding-bottom: 8px;
88
+ padding-inline: 8px;
89
+ }
90
+
91
+ /* size */
92
+ .kit-list[breakpoint]kit-list--size-xs {
93
+ --list-multiplier-x: 16;
94
+ --list-multiplier-y: 4;
95
+ --list-multiplier-gap: 2;
96
+ --list-multiplier-font-size: 6;
97
+ }
98
+ .kit-list[breakpoint]kit-list--size-xs .kit-icon[class*='kit-icon--size-md'] {
99
+ --icon-multiplier-parent-size: 6;
100
+ }
101
+
102
+ .kit-list[breakpoint]kit-list--size-sm {
103
+ --list-multiplier-x: 20;
104
+ --list-multiplier-y: 5;
105
+ --list-multiplier-gap: 4;
106
+ --list-multiplier-font-size: 7;
107
+ }
108
+ .kit-list[breakpoint]kit-list--size-sm .kit-icon[class*='kit-icon--size-md'] {
109
+ --icon-multiplier-parent-size: 7;
110
+ }
111
+
112
+ .kit-list[breakpoint]kit-list--size-md {
113
+ --list-multiplier-x: 24;
114
+ --list-multiplier-y: 6;
115
+ --list-multiplier-gap: 4;
116
+ --list-multiplier-font-size: 8;
117
+ }
118
+ .kit-list[breakpoint]kit-list--size-md .kit-icon[class*='kit-icon--size-md'] {
119
+ --icon-multiplier-parent-size: 8;
120
+ }
121
+
122
+ .kit-list[breakpoint]kit-list--size-lg {
123
+ --list-multiplier-x: 28;
124
+ --list-multiplier-y: 7;
125
+ --list-multiplier-gap: 4;
126
+ --list-multiplier-font-size: 9;
127
+ }
128
+ .kit-list[breakpoint]kit-list--size-lg .kit-icon[class*='kit-icon--size-md'] {
129
+ --icon-multiplier-parent-size: 9;
130
+ }
131
+
132
+ .kit-list[breakpoint]kit-list--size-xl {
133
+ --list-multiplier-x: 32;
134
+ --list-multiplier-y: 8;
135
+ --list-multiplier-gap: 5;
136
+ --list-multiplier-font-size: 10;
137
+ }
138
+ .kit-list[breakpoint]kit-list--size-xl .kit-icon[class*='kit-icon--size-md'] {
139
+ --icon-multiplier-parent-size: 10;
140
+ }
141
+
142
+ /* density */
143
+ .kit-list[breakpoint]kit-list--density-default .kit-list-item {
144
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x));
145
+ --list-spacing-x: 0;
146
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y));
147
+ }
148
+
149
+ .kit-list[breakpoint]kit-list--density-compact .kit-list-item {
150
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x) - 0.25rem);
151
+ --list-spacing-x: 0;
152
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y) - 0.25rem);
153
+ }
154
+
155
+ .kit-list[breakpoint]kit-list--density-comfortable .kit-list-item {
156
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x) + 0.25rem);
157
+ --list-spacing-x: 0;
158
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y) + 0.25rem);
159
+ }
160
+
161
+ /* variant */
162
+ .kit-list[breakpoint]kit-list--variant-filled .kit-list-item {
163
+ --list-item-color: var(--on, var(--list-color, var(--kit-on-container)));
164
+ --list-item-background: var(--base, var(--list-background, var(--kit-container)));
165
+ background-color: var(--list-item-background);
166
+ }
167
+
168
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item {
169
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
170
+ background-color: transparent;
171
+ }
172
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item::before {
173
+ content: '';
174
+ position: absolute;
175
+ inset: 0;
176
+ border: 1px solid currentColor;
177
+ pointer-events: none;
178
+ border-radius: inherit;
179
+ }
180
+
181
+ .kit-list[breakpoint]kit-list--variant-text .kit-list-item {
182
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
183
+ background-color: transparent;
184
+ border-color: transparent;
185
+ }
186
+
187
+ /* events */
188
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--active:not(div),
189
+ .kit-list[class*='list--variant-filled'] .kit-list-item:active:not(div) {
190
+ background-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
191
+ border-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
192
+ }
193
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
194
+ .kit-list-item.kit-list-item--active:not(div),
195
+ .kit-list[class*='list--variant-']:not([class*='variant-filled']) .kit-list-item:active:not(div) {
196
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
197
+ border-color: color-mix(in oklab, currentColor 15%, transparent);
198
+ }
199
+
200
+ /* disabled */
201
+ .kit-list .kit-list-item.kit-list-item--disabled,
202
+ .kit-list .kit-list-item[disabled],
203
+ .kit-list.kit-list--disabled .kit-list-item {
204
+ pointer-events: none;
205
+ user-select: none;
206
+ cursor: default;
207
+ }
208
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled,
209
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled {
210
+ color: color-mix(in oklab, var(--list-item-color) 40%, transparent) !important;
211
+ background-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
212
+ border-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
213
+ }
214
+
215
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
216
+ .kit-list-item.kit-list-item--disabled,
217
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
218
+ .kit-list-item.kit-list-item--disabled
219
+ i:before {
220
+ color: color-mix(in oklab, var(--list-item-background) 40%, transparent) !important;
221
+ }
package/dist/components/list/list.svelte ADDED
@@ -0,0 +1,243 @@
1
+ <script lang="ts">
2
+ import { getAssets } from '../../internal/index.js';
3
+ import type { ListProps } from './types.js';
4
+
5
+ let {
6
+ children,
7
+ ref = $bindable(),
8
+ is = 'div',
9
+ dark,
10
+ light,
11
+ background,
12
+ color,
13
+ rounded,
14
+ size = 'md',
15
+ density = 'default',
16
+ variant = 'filled',
17
+ nav,
18
+ ...rest
19
+ }: ListProps = $props();
20
+
21
+ const assets = getAssets();
22
+ </script>
23
+
24
+ <svelte:element
25
+ this={is}
26
+ bind:this={ref}
27
+ {...rest}
28
+ class={[
29
+ 'kit-list',
30
+ light && 'light',
31
+ dark && 'dark',
32
+ size && assets.className('list', 'size', size),
33
+ variant && assets.className('list', 'variant', variant),
34
+ density && assets.className('list', 'density', density),
35
+ nav && 'kit-list--nav',
36
+ rest.class
37
+ ]}
38
+ role="listbox"
39
+ style:--base={assets.color(background)}
40
+ style:--on={assets.color(color)}
41
+ style:--shape={assets.shape(rounded)}
42
+ >
43
+ {@render children?.()}
44
+ </svelte:element>
45
+
46
+ <style>/* root */
47
+ .kit-list {
48
+ --list-color: var(--on, var(--kit-on-container));
49
+ --list-background: var(--base, var(--kit-container));
50
+ --list-radius: var(--shape, var(--kit-radius-md));
51
+ }
52
+ .kit-list {
53
+ position: relative;
54
+ flex-direction: column;
55
+ width: 100%;
56
+ display: flex;
57
+ border: none;
58
+ outline: none;
59
+ }
60
+ .kit-list-item {
61
+ --list-item-radius: var(--shape, var(--list-radius, var(--kit-radius-md)));
62
+ }
63
+ .kit-list-item {
64
+ position: relative;
65
+ border: none;
66
+ outline: none;
67
+ padding-top: var(--list-spacing-x);
68
+ padding-bottom: var(--list-spacing-x);
69
+ padding-right: var(--list-spacing-y);
70
+ padding-left: var(--list-spacing-y);
71
+ color: var(--list-item-color);
72
+ border-radius: var(--list-item-radius);
73
+ font-weight: 500;
74
+ text-decoration: none;
75
+ }
76
+ .kit-list-item:not(div) {
77
+ cursor: pointer;
78
+ }
79
+ .kit-list-item,
80
+ .kit-list-item .kit-list-item-content--content,
81
+ .kit-list-item .kit-list-item-content--append,
82
+ .kit-list-item .kit-list-item-content--prepend {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ white-space: nowrap;
86
+ gap: calc(var(--prism-spacing) * var(--list-multiplier-gap));
87
+ font-size: calc(var(--prism-spacing) * var(--list-multiplier-font-size));
88
+ }
89
+ .kit-list-item.kit-list-item--append:not(.kit-list-item--prepend) {
90
+ display: grid;
91
+ grid-template-columns: auto 1fr;
92
+ }
93
+ .kit-list-item.kit-list-item--prepend:not(.kit-list-item--append) {
94
+ display: grid;
95
+ grid-template-columns: 1fr auto;
96
+ }
97
+ .kit-list-item.kit-list-item--prepend.kit-list-item--append {
98
+ display: grid;
99
+ grid-template-columns: auto 1fr auto;
100
+ }
101
+ .kit-list-item::after {
102
+ content: '';
103
+ position: absolute;
104
+ inset: 0;
105
+ background-color: currentColor;
106
+ opacity: 0;
107
+ transition: opacity 150ms ease;
108
+ pointer-events: none;
109
+ border-radius: inherit;
110
+ }
111
+ .kit-list-item:not(div):hover::after {
112
+ opacity: 0.08;
113
+ }
114
+ .kit-list-item:not(div):active::after {
115
+ opacity: 0.12;
116
+ }
117
+ .kit-list-item:not(div):focus-visible::after {
118
+ opacity: 0.12;
119
+ }
120
+ .kit-list.kit-list--nav {
121
+ padding-top: 8px;
122
+ padding-bottom: 8px;
123
+ padding-inline: 8px;
124
+ }
125
+ /* size */
126
+ .kit-list[breakpoint]kit-list--size-xs {
127
+ --list-multiplier-x: 16;
128
+ --list-multiplier-y: 4;
129
+ --list-multiplier-gap: 2;
130
+ --list-multiplier-font-size: 6;
131
+ }
132
+ .kit-list[breakpoint]kit-list--size-xs .kit-icon[class*='kit-icon--size-md'] {
133
+ --icon-multiplier-parent-size: 6;
134
+ }
135
+ .kit-list[breakpoint]kit-list--size-sm {
136
+ --list-multiplier-x: 20;
137
+ --list-multiplier-y: 5;
138
+ --list-multiplier-gap: 4;
139
+ --list-multiplier-font-size: 7;
140
+ }
141
+ .kit-list[breakpoint]kit-list--size-sm .kit-icon[class*='kit-icon--size-md'] {
142
+ --icon-multiplier-parent-size: 7;
143
+ }
144
+ .kit-list[breakpoint]kit-list--size-md {
145
+ --list-multiplier-x: 24;
146
+ --list-multiplier-y: 6;
147
+ --list-multiplier-gap: 4;
148
+ --list-multiplier-font-size: 8;
149
+ }
150
+ .kit-list[breakpoint]kit-list--size-md .kit-icon[class*='kit-icon--size-md'] {
151
+ --icon-multiplier-parent-size: 8;
152
+ }
153
+ .kit-list[breakpoint]kit-list--size-lg {
154
+ --list-multiplier-x: 28;
155
+ --list-multiplier-y: 7;
156
+ --list-multiplier-gap: 4;
157
+ --list-multiplier-font-size: 9;
158
+ }
159
+ .kit-list[breakpoint]kit-list--size-lg .kit-icon[class*='kit-icon--size-md'] {
160
+ --icon-multiplier-parent-size: 9;
161
+ }
162
+ .kit-list[breakpoint]kit-list--size-xl {
163
+ --list-multiplier-x: 32;
164
+ --list-multiplier-y: 8;
165
+ --list-multiplier-gap: 5;
166
+ --list-multiplier-font-size: 10;
167
+ }
168
+ .kit-list[breakpoint]kit-list--size-xl .kit-icon[class*='kit-icon--size-md'] {
169
+ --icon-multiplier-parent-size: 10;
170
+ }
171
+ /* density */
172
+ .kit-list[breakpoint]kit-list--density-default .kit-list-item {
173
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x));
174
+ --list-spacing-x: 0;
175
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y));
176
+ }
177
+ .kit-list[breakpoint]kit-list--density-compact .kit-list-item {
178
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x) - 0.25rem);
179
+ --list-spacing-x: 0;
180
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y) - 0.25rem);
181
+ }
182
+ .kit-list[breakpoint]kit-list--density-comfortable .kit-list-item {
183
+ height: calc(var(--prism-spacing) * var(--list-multiplier-x) + 0.25rem);
184
+ --list-spacing-x: 0;
185
+ --list-spacing-y: calc(var(--prism-spacing) * var(--list-multiplier-y) + 0.25rem);
186
+ }
187
+ /* variant */
188
+ .kit-list[breakpoint]kit-list--variant-filled .kit-list-item {
189
+ --list-item-color: var(--on, var(--list-color, var(--kit-on-container)));
190
+ --list-item-background: var(--base, var(--list-background, var(--kit-container)));
191
+ background-color: var(--list-item-background);
192
+ }
193
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item {
194
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
195
+ background-color: transparent;
196
+ }
197
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item::before {
198
+ content: '';
199
+ position: absolute;
200
+ inset: 0;
201
+ border: 1px solid currentColor;
202
+ pointer-events: none;
203
+ border-radius: inherit;
204
+ }
205
+ .kit-list[breakpoint]kit-list--variant-text .kit-list-item {
206
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
207
+ background-color: transparent;
208
+ border-color: transparent;
209
+ }
210
+ /* events */
211
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--active:not(div),
212
+ .kit-list[class*='list--variant-filled'] .kit-list-item:active:not(div) {
213
+ background-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
214
+ border-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
215
+ }
216
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
217
+ .kit-list-item.kit-list-item--active:not(div),
218
+ .kit-list[class*='list--variant-']:not([class*='variant-filled']) .kit-list-item:active:not(div) {
219
+ background-color: color-mix(in oklab, currentColor 15%, transparent);
220
+ border-color: color-mix(in oklab, currentColor 15%, transparent);
221
+ }
222
+ /* disabled */
223
+ .kit-list .kit-list-item.kit-list-item--disabled,
224
+ .kit-list .kit-list-item[disabled],
225
+ .kit-list.kit-list--disabled .kit-list-item {
226
+ pointer-events: none;
227
+ user-select: none;
228
+ cursor: default;
229
+ }
230
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled,
231
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled {
232
+ color: color-mix(in oklab, var(--list-item-color) 40%, transparent) !important;
233
+ background-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
234
+ border-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
235
+ }
236
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
237
+ .kit-list-item.kit-list-item--disabled,
238
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
239
+ .kit-list-item.kit-list-item--disabled
240
+ i:before {
241
+ color: color-mix(in oklab, var(--list-item-background) 40%, transparent) !important;
242
+ }
243
+ </style>
package/dist/components/list/list.svelte.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { ListProps } from './types.js';
2
+ declare const List: import("svelte").Component<ListProps, {}, "ref">;
3
+ type List = ReturnType<typeof List>;
4
+ export default List;