lapikit 0.0.0-insiders.cee8a41 → 0.0.0-insiders.d715369

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 (81) hide show
  1. package/dist/actions/index.d.ts +1 -0
  2. package/dist/actions/index.js +1 -0
  3. package/dist/assets/icons/arrow-down.svelte +12 -0
  4. package/dist/assets/icons/arrow-down.svelte.d.ts +18 -0
  5. package/dist/assets/icons/arrow-up.svelte +12 -0
  6. package/dist/assets/icons/arrow-up.svelte.d.ts +18 -0
  7. package/dist/assets/icons/close-fill.svelte +12 -0
  8. package/dist/assets/icons/close-fill.svelte.d.ts +18 -0
  9. package/dist/assets/icons/loading-fill.svelte +2 -0
  10. package/dist/assets/icons/loading-fill.svelte.d.ts +6 -14
  11. package/dist/components/accordion/accordion.css +113 -0
  12. package/dist/components/accordion/accordion.svelte +37 -0
  13. package/dist/components/accordion/accordion.svelte.d.ts +4 -0
  14. package/dist/components/accordion/accordion.svelte.js +24 -0
  15. package/dist/components/accordion/modules/accordion-item.svelte +94 -0
  16. package/dist/components/accordion/modules/accordion-item.svelte.d.ts +4 -0
  17. package/dist/components/accordion/types.d.ts +33 -0
  18. package/dist/components/accordion/types.js +1 -0
  19. package/dist/components/alert/alert.css +127 -0
  20. package/dist/components/alert/alert.svelte +89 -0
  21. package/dist/components/alert/alert.svelte.d.ts +4 -0
  22. package/dist/components/alert/types.d.ts +28 -0
  23. package/dist/components/alert/types.js +1 -0
  24. package/dist/components/app/app.svelte +22 -4
  25. package/dist/components/appbar/appbar.css +48 -0
  26. package/dist/components/appbar/appbar.svelte +41 -0
  27. package/dist/components/appbar/appbar.svelte.d.ts +4 -0
  28. package/dist/components/appbar/types.d.ts +15 -0
  29. package/dist/components/appbar/types.js +1 -0
  30. package/dist/components/aspect-ratio/aspect-ratio.css +19 -0
  31. package/dist/components/aspect-ratio/aspect-ratio.svelte +48 -0
  32. package/dist/components/aspect-ratio/aspect-ratio.svelte.d.ts +4 -0
  33. package/dist/components/aspect-ratio/types.d.ts +5 -0
  34. package/dist/components/aspect-ratio/types.js +1 -0
  35. package/dist/components/avatar/avatar.css +109 -0
  36. package/dist/components/avatar/avatar.svelte +46 -0
  37. package/dist/components/avatar/avatar.svelte.d.ts +4 -0
  38. package/dist/components/avatar/types.d.ts +22 -0
  39. package/dist/components/avatar/types.js +1 -0
  40. package/dist/components/button/button.css +163 -193
  41. package/dist/components/button/button.svelte +38 -31
  42. package/dist/components/button/button.svelte.d.ts +2 -2
  43. package/dist/components/button/types.d.ts +7 -5
  44. package/dist/components/card/card.css +109 -0
  45. package/dist/components/card/card.svelte +50 -0
  46. package/dist/components/card/card.svelte.d.ts +4 -0
  47. package/dist/components/card/types.d.ts +18 -0
  48. package/dist/components/card/types.js +1 -0
  49. package/dist/components/chip/chip.css +229 -0
  50. package/dist/components/chip/chip.svelte +128 -0
  51. package/dist/components/chip/chip.svelte.d.ts +4 -0
  52. package/dist/components/chip/types.d.ts +31 -0
  53. package/dist/components/chip/types.js +1 -0
  54. package/dist/components/icon/icon.css +13 -10
  55. package/dist/components/index.d.ts +11 -1
  56. package/dist/components/index.js +11 -1
  57. package/dist/components/list/list.css +144 -117
  58. package/dist/components/list/list.svelte +1 -3
  59. package/dist/components/list/modules/list-item.svelte +7 -0
  60. package/dist/components/list/types.d.ts +2 -5
  61. package/dist/components/modal/modal.css +1 -1
  62. package/dist/components/spacer/spacer.css +3 -0
  63. package/dist/components/spacer/spacer.svelte +7 -0
  64. package/dist/components/spacer/spacer.svelte.d.ts +4 -0
  65. package/dist/components/spacer/types.d.ts +4 -0
  66. package/dist/components/spacer/types.js +1 -0
  67. package/dist/components/toolbar/toolbar.css +129 -0
  68. package/dist/components/toolbar/toolbar.svelte +47 -0
  69. package/dist/components/toolbar/toolbar.svelte.d.ts +4 -0
  70. package/dist/components/toolbar/types.d.ts +27 -0
  71. package/dist/components/toolbar/types.js +1 -0
  72. package/dist/internal/ripple.d.ts +11 -0
  73. package/dist/internal/ripple.js +90 -0
  74. package/dist/internal/unit.d.ts +1 -0
  75. package/dist/internal/unit.js +11 -0
  76. package/dist/preset.js +2 -2
  77. package/dist/stores/index.d.ts +4 -3
  78. package/dist/stores/index.js +9 -4
  79. package/dist/style/animation.css +40 -0
  80. package/dist/style/parser/device.js +31 -19
  81. package/package.json +4 -1
@@ -1,128 +1,201 @@
1
+ /* root */
1
2
  .kit-list {
2
- --list-color: var(--on, var(--kit-on-neutral));
3
- --list-background: var(--base, var(--kit-neutral));
3
+ --list-color: var(--on, var(--kit-on-container));
4
+ --list-background: var(--base, var(--kit-container));
4
5
  --list-radius: var(--shape, var(--kit-radius-md));
6
+ }
5
7
 
6
- display: flex;
8
+ .kit-list {
9
+ position: relative;
10
+ flex-direction: column;
7
11
  width: 100%;
12
+ display: flex;
13
+ border: none;
14
+ outline: none;
8
15
  }
9
16
 
10
- .kit-list--nav {
11
- padding: 8px;
17
+ .kit-list-item {
18
+ --list-item-radius: var(--shape, var(--list-radius, var(--kit-radius-md)));
12
19
  }
13
20
 
14
- /* orientation */
15
- .kit-list[breakpoint]kit-list--orientation-vertical {
16
- flex-direction: column;
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;
17
32
  }
18
- .kit-list[breakpoint]kit-list--orientation-horizontal {
19
- flex-direction: row;
33
+
34
+ .kit-list-item:not(div) {
35
+ cursor: pointer;
20
36
  }
21
- .kit-list[breakpoint]kit-list--orientation-horizontal .kit-list-item {
22
- justify-content: center;
37
+
38
+ .kit-list-item,
39
+ .kit-list-item .kit-list-item-content--content,
40
+ .kit-list-item .kit-list-item-content--append,
41
+ .kit-list-item .kit-list-item-content--prepend {
42
+ display: inline-flex;
43
+ align-items: center;
44
+ white-space: nowrap;
45
+ gap: calc(var(--kit-spacing) * var(--list-multiplier-gap));
46
+ font-size: calc(var(--kit-spacing) * var(--list-multiplier-font-size));
47
+ }
48
+
49
+ .kit-list-item.kit-list-item--append:not(.kit-list-item--prepend) {
50
+ display: grid;
51
+ grid-template-columns: auto 1fr;
52
+ }
53
+
54
+ .kit-list-item.kit-list-item--prepend:not(.kit-list-item--append) {
55
+ display: grid;
56
+ grid-template-columns: 1fr auto;
57
+ }
58
+
59
+ .kit-list-item.kit-list-item--prepend.kit-list-item--append {
60
+ display: grid;
61
+ grid-template-columns: auto 1fr auto;
62
+ }
63
+
64
+ .kit-list-item::after {
65
+ content: '';
66
+ position: absolute;
67
+ inset: 0;
68
+ background-color: currentColor;
69
+ opacity: 0;
70
+ transition: opacity 150ms ease;
71
+ pointer-events: none;
72
+ border-radius: inherit;
73
+ }
74
+ .kit-list-item:not(div):hover::after {
75
+ opacity: 0.08;
76
+ }
77
+ .kit-list-item:not(div):active::after {
78
+ opacity: 0.12;
79
+ }
80
+ .kit-list-item:not(div):focus-visible::after {
81
+ opacity: 0.12;
82
+ }
83
+
84
+ .kit-list.kit-list--nav {
85
+ padding-top: 8px;
86
+ padding-bottom: 8px;
87
+ padding-inline: 8px;
23
88
  }
24
89
 
25
90
  /* size */
26
91
  .kit-list[breakpoint]kit-list--size-xs {
27
- --list-height: 1.75rem;
28
- --list-multiplier-y: 2;
29
- --list-gap: 0.25rem;
30
- font-size: 0.75rem;
92
+ --list-multiplier-x: 16;
93
+ --list-multiplier-y: 4;
94
+ --list-multiplier-gap: 2;
95
+ --list-multiplier-font-size: 6;
96
+ }
97
+ .kit-list[breakpoint]kit-list--size-xs .kit-icon[class*='kit-icon--size-md'] {
98
+ --icon-multiplier-parent-size: 6;
31
99
  }
32
100
 
33
101
  .kit-list[breakpoint]kit-list--size-sm {
34
- --list-height: 2rem;
35
- --list-multiplier-y: 3;
36
- --list-gap: 0.5rem;
37
- font-size: 0.875rem;
102
+ --list-multiplier-x: 20;
103
+ --list-multiplier-y: 5;
104
+ --list-multiplier-gap: 4;
105
+ --list-multiplier-font-size: 7;
106
+ }
107
+ .kit-list[breakpoint]kit-list--size-sm .kit-icon[class*='kit-icon--size-md'] {
108
+ --icon-multiplier-parent-size: 7;
38
109
  }
39
110
 
40
111
  .kit-list[breakpoint]kit-list--size-md {
41
- --list-height: 2.25rem;
42
- --list-multiplier-y: 4;
43
- --list-gap: 0.5rem;
44
- font-size: 0.875rem;
112
+ --list-multiplier-x: 24;
113
+ --list-multiplier-y: 6;
114
+ --list-multiplier-gap: 4;
115
+ --list-multiplier-font-size: 8;
116
+ }
117
+ .kit-list[breakpoint]kit-list--size-md .kit-icon[class*='kit-icon--size-md'] {
118
+ --icon-multiplier-parent-size: 8;
45
119
  }
46
120
 
47
121
  .kit-list[breakpoint]kit-list--size-lg {
48
- --list-height: 2.5rem;
49
- --list-multiplier-y: 5;
50
- --list-gap: 0.5rem;
51
- font-size: 1rem;
122
+ --list-multiplier-x: 28;
123
+ --list-multiplier-y: 7;
124
+ --list-multiplier-gap: 4;
125
+ --list-multiplier-font-size: 9;
126
+ }
127
+ .kit-list[breakpoint]kit-list--size-lg .kit-icon[class*='kit-icon--size-md'] {
128
+ --icon-multiplier-parent-size: 9;
52
129
  }
53
130
 
54
131
  .kit-list[breakpoint]kit-list--size-xl {
55
- --list-height: 2.75rem;
56
- --list-multiplier-y: 6;
57
- --list-gap: 0.675rem;
58
- font-size: 1.125rem;
132
+ --list-multiplier-x: 32;
133
+ --list-multiplier-y: 8;
134
+ --list-multiplier-gap: 5;
135
+ --list-multiplier-font-size: 10;
136
+ }
137
+ .kit-list[breakpoint]kit-list--size-xl .kit-icon[class*='kit-icon--size-md'] {
138
+ --icon-multiplier-parent-size: 10;
59
139
  }
60
140
 
61
141
  /* density */
62
142
  .kit-list[breakpoint]kit-list--density-default .kit-list-item {
63
- height: calc(var(--list-height));
64
- min-width: calc(var(--list-height));
143
+ height: calc(var(--kit-spacing) * var(--list-multiplier-x));
65
144
  --list-spacing-x: 0;
66
145
  --list-spacing-y: calc(var(--kit-spacing) * var(--list-multiplier-y));
67
146
  }
68
147
 
69
148
  .kit-list[breakpoint]kit-list--density-compact .kit-list-item {
70
- height: calc(var(--list-height) - 0.25rem);
71
- min-width: calc(var(--list-height - 0.25rem));
149
+ height: calc(var(--kit-spacing) * var(--list-multiplier-x) - 0.25rem);
72
150
  --list-spacing-x: 0;
73
- --list-spacing-y: calc(var(--list-spacing) * var(--list-multiplier-y) - 0.25rem);
151
+ --list-spacing-y: calc(var(--kit-spacing) * var(--list-multiplier-y) - 0.25rem);
74
152
  }
75
153
 
76
154
  .kit-list[breakpoint]kit-list--density-comfortable .kit-list-item {
77
- height: calc(var(--list-height) + 0.25rem);
78
- min-width: calc(var(--list-height + 0.25rem));
155
+ height: calc(var(--kit-spacing) * var(--list-multiplier-x) + 0.25rem);
79
156
  --list-spacing-x: 0;
80
157
  --list-spacing-y: calc(var(--kit-spacing) * var(--list-multiplier-y) + 0.25rem);
81
158
  }
82
159
 
83
160
  /* variant */
84
- .kit-list[breakpoint]kit-list--variant-outline .kit-list-item {
85
- --list-item-color: var(--base, var(--list-background, var(--kit-neutral)));
86
- background-color: transparent;
87
- border: 1px solid currentColor;
161
+ .kit-list[breakpoint]kit-list--variant-filled .kit-list-item {
162
+ --list-item-color: var(--on, var(--list-color, var(--kit-on-container)));
163
+ --list-item-background: var(--base, var(--list-background, var(--kit-container)));
164
+ background-color: var(--list-item-background);
88
165
  }
89
166
 
90
- .kit-list[breakpoint]kit-list--variant-text .kit-list-item {
91
- --list-item-color: var(--base, var(--list-background, var(--kit-neutral)));
167
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item {
168
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
92
169
  background-color: transparent;
93
- border-color: transparent;
94
170
  }
95
-
96
- .kit-list[breakpoint]kit-list--variant-dash .kit-list-item {
97
- --list-item-color: var(--base, var(--list-background, var(--kit-neutral)));
98
- background-color: transparent;
99
- border: 1px dashed currentColor;
171
+ .kit-list[breakpoint]kit-list--variant-outline .kit-list-item::before {
172
+ content: '';
173
+ position: absolute;
174
+ inset: 0;
175
+ border: 1px solid currentColor;
176
+ pointer-events: none;
177
+ border-radius: inherit;
100
178
  }
101
179
 
102
- .kit-list[breakpoint]kit-list--variant-link .kit-list-item {
103
- --list-item-color: var(--base, var(--list-background, var(--kit-neutral)));
180
+ .kit-list[breakpoint]kit-list--variant-text .kit-list-item {
181
+ --list-item-color: var(--base, var(--list-color, var(--kit-on-container)));
104
182
  background-color: transparent;
105
183
  border-color: transparent;
106
184
  }
107
185
 
108
186
  /* events */
109
- .kit-list:not([class*='list--variant-']) .kit-list-item.kit-list-item--active {
187
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--active:not(div),
188
+ .kit-list[class*='list--variant-filled'] .kit-list-item:active:not(div) {
110
189
  background-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
111
190
  border-color: color-mix(in oklab, var(--list-item-background) 90%, var(--kit-scrim));
112
191
  }
113
- .kit-list[class*='list--variant-'] .kit-list-item.kit-list-item--active {
192
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
193
+ .kit-list-item.kit-list-item--active:not(div),
194
+ .kit-list[class*='list--variant-']:not([class*='variant-filled']) .kit-list-item:active:not(div) {
114
195
  background-color: color-mix(in oklab, currentColor 15%, transparent);
115
196
  border-color: color-mix(in oklab, currentColor 15%, transparent);
116
197
  }
117
198
 
118
- .kit-list:not([class*='list--variant-']) .kit-list-item:not(div):hover {
119
- background-color: color-mix(in oklab, var(--list-item-background) 85%, var(--kit-scrim));
120
- border-color: color-mix(in oklab, var(--list-item-background) 85%, var(--kit-scrim));
121
- }
122
- .kit-list[class*='list--variant-'] .kit-list-item:not(div):hover {
123
- background-color: color-mix(in oklab, currentColor 25%, transparent);
124
- }
125
-
126
199
  /* disabled */
127
200
  .kit-list .kit-list-item.kit-list-item--disabled,
128
201
  .kit-list .kit-list-item[disabled],
@@ -131,63 +204,17 @@
131
204
  user-select: none;
132
205
  cursor: default;
133
206
  }
134
- .kit-list:not([class*='list--variant-']) .kit-list-item.kit-list-item--disabled {
207
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled,
208
+ .kit-list[class*='list--variant-filled'] .kit-list-item.kit-list-item--disabled {
135
209
  color: color-mix(in oklab, var(--list-item-color) 40%, transparent) !important;
136
210
  background-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
137
211
  border-color: color-mix(in oklab, var(--list-item-background) 70%, transparent) !important;
138
212
  }
139
- .kit-list:not([class*='list--variant-']) .kit-list-item.kit-list-item--disabled i:before {
140
- color: color-mix(in oklab, var(--list-item-color) 40%, transparent) !important;
141
- }
142
- .kit-list[class*='list--variant-'] .kit-list-item.kit-list-item--disabled,
143
- .kit-list[class*='list--variant-'] .kit-list-item.kit-list-item--disabled i:before {
144
- color: color-mix(in oklab, var(--list-item-background) 40%, transparent) !important;
145
- }
146
-
147
- /* list item */
148
- .kit-list .kit-list-item {
149
- --list-item-color: var(--on, var(--list-color, var(--kit-on-neutral)));
150
- --list-item-background: var(--base, var(--list-background, var(--kit-neutral)));
151
- --list-item-radius: var(--shape, var(--list-radius, var(--kit-radius-md)));
152
213
 
153
- display: inline-flex;
154
- padding-top: var(--list-spacing-x);
155
- padding-bottom: var(--list-spacing-x);
156
- padding-right: var(--list-spacing-y);
157
- padding-left: var(--list-spacing-y);
158
- align-items: center;
159
- white-space: nowrap;
160
- gap: var(--list-gap);
161
-
162
- border-width: 1px;
163
- border-style: solid;
164
- border-radius: var(--list-item-radius);
165
-
166
- /* theme */
167
- color: var(--list-item-color);
168
- background-color: var(--list-item-background);
169
- border-color: var(--list-item-background);
170
- }
171
-
172
- .kit-list .kit-list-item:not(div) {
173
- cursor: pointer;
174
- }
175
-
176
- .kit-list .kit-list-item > .kit-list-item-content {
177
- display: flex;
178
- }
179
-
180
- .kit-list .kit-list-item.kit-list-item--append:not(.kit-list-item--prepend) {
181
- display: grid;
182
- grid-template-columns: auto 1fr;
183
- }
184
-
185
- .kit-list .kit-list-item.kit-list-item--prepend:not(.kit-list-item--append) {
186
- display: grid;
187
- grid-template-columns: 1fr auto;
188
- }
189
-
190
- .kit-list .kit-list-item.kit-list-item--prepend.kit-list-item--append {
191
- display: grid;
192
- grid-template-columns: auto 1fr auto;
214
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
215
+ .kit-list-item.kit-list-item--disabled,
216
+ .kit-list[class*='list--variant-']:not([class*='variant-filled'])
217
+ .kit-list-item.kit-list-item--disabled
218
+ i:before {
219
+ color: color-mix(in oklab, var(--list-item-background) 40%, transparent) !important;
193
220
  }
@@ -8,13 +8,12 @@
8
8
  is = 'div',
9
9
  dark,
10
10
  light,
11
- orientation = 'vertical',
12
11
  background,
13
12
  color,
14
13
  rounded,
15
14
  size = 'md',
16
15
  density = 'default',
17
- variant,
16
+ variant = 'filled',
18
17
  nav,
19
18
  ...rest
20
19
  }: ListProps = $props();
@@ -30,7 +29,6 @@
30
29
  'kit-list',
31
30
  light && 'light',
32
31
  dark && 'dark',
33
- orientation && assets.className('list', 'orientation', orientation),
34
32
  size && assets.className('list', 'size', size),
35
33
  variant && assets.className('list', 'variant', variant),
36
34
  density && assets.className('list', 'density', density),
@@ -2,6 +2,9 @@
2
2
  import { getAssets } from '../../../internal/index.js';
3
3
  import type { ListItemProps } from '../types.js';
4
4
 
5
+ // external
6
+ import { ripple } from '../../../internal/ripple.js';
7
+
5
8
  let {
6
9
  children,
7
10
  append,
@@ -16,6 +19,7 @@
16
19
  disabled,
17
20
  active,
18
21
  href,
22
+ noRipple,
19
23
  ...rest
20
24
  }: ListItemProps = $props();
21
25
 
@@ -42,6 +46,9 @@
42
46
  disabled && 'kit-list-item--disabled',
43
47
  rest.class
44
48
  ]}
49
+ use:ripple={{
50
+ disabled: noRipple || disabled || is === 'div'
51
+ }}
45
52
  role={is === 'button' ? 'listitem' : undefined}
46
53
  tabindex={href && disabled ? -2 : 0}
47
54
  aria-disabled={href ? disabled : undefined}
@@ -1,6 +1,5 @@
1
1
  import type { Component } from '../../internal/types.js';
2
2
  import type { Snippet } from 'svelte';
3
- type ListOrientation = 'vertical' | 'horizontal';
4
3
  type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
5
4
  type ListDensity = 'compact' | 'comfortable' | 'default';
6
5
  export interface ListProps extends Component {
@@ -11,14 +10,11 @@ export interface ListProps extends Component {
11
10
  size?: ListSize | {
12
11
  [key: string]: ListSize;
13
12
  };
14
- variant?: 'outline' | 'text' | 'dash' | 'link';
13
+ variant?: 'outline' | 'text' | 'filled';
15
14
  density?: ListDensity | {
16
15
  [key: string]: ListDensity;
17
16
  };
18
17
  nav?: boolean;
19
- orientation?: ListOrientation | {
20
- [key: string]: ListOrientation;
21
- };
22
18
  }
23
19
  export interface ListItemProps extends Component {
24
20
  ref?: HTMLElement | null;
@@ -32,5 +28,6 @@ export interface ListItemProps extends Component {
32
28
  background?: string;
33
29
  active?: boolean;
34
30
  disabled?: boolean;
31
+ noRipple?: boolean;
35
32
  }
36
33
  export {};
@@ -11,7 +11,7 @@
11
11
  --modal-translate-y: -50%;
12
12
 
13
13
  position: fixed;
14
-
14
+ overflow-y: auto;
15
15
  z-index: 9100;
16
16
  width: 100%;
17
17
  height: 100%;
@@ -0,0 +1,3 @@
1
+ .kit-spacer {
2
+ flex-grow: 1;
3
+ }
@@ -0,0 +1,7 @@
1
+ <script lang="ts">
2
+ import type { SpacerProps } from './types.js';
3
+
4
+ let { is = 'div', ...rest }: SpacerProps = $props();
5
+ </script>
6
+
7
+ <svelte:element this={is} {...rest} class={['kit-spacer', rest.class]}> </svelte:element>
@@ -0,0 +1,4 @@
1
+ import type { SpacerProps } from './types.js';
2
+ declare const Spacer: import("svelte").Component<SpacerProps, {}, "">;
3
+ type Spacer = ReturnType<typeof Spacer>;
4
+ export default Spacer;
@@ -0,0 +1,4 @@
1
+ import type { Base } from '../../internal/types.js';
2
+ export interface SpacerProps extends Base {
3
+ is?: 'div';
4
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,129 @@
1
+ .kit-toolbar {
2
+ --toolbar-color: var(--on, var(--kit-on-neutral));
3
+ --toolbar-background: var(--base, var(--kit-neutral));
4
+ --toolbar-radius: var(--shape, var(--kit-radius-md));
5
+
6
+ display: flex;
7
+ align-items: center;
8
+ min-width: max-content;
9
+ border-style: solid;
10
+ transition:
11
+ color 0.5s,
12
+ border-color 0.5s,
13
+ background-color 0.5s;
14
+
15
+ border-width: 1px;
16
+ border-style: solid;
17
+ border-radius: var(--toolbar-radius);
18
+
19
+ /* theme */
20
+ color: var(--toolbar-color);
21
+ background-color: var(--toolbar-background);
22
+ border-color: var(--toolbar-background);
23
+ }
24
+
25
+ /* density */
26
+ .kit-toolbar[breakpoint]kit-toolbar--density-default {
27
+ border-radius: calc(var(--kit-spacing) * 2.25);
28
+ }
29
+ .kit-toolbar[breakpoint]kit-toolbar--density-default:not([class*='toolbar--orientation-vertical']) {
30
+ height: 3rem;
31
+ padding-inline: calc(var(--kit-spacing) * 1.5);
32
+ }
33
+
34
+ .kit-toolbar[breakpoint]kit-toolbar--density-default[class*='toolbar--orientation-vertical'] {
35
+ width: 3rem;
36
+ padding: calc(var(--kit-spacing) * 1.5) 0;
37
+ }
38
+
39
+ .kit-toolbar[breakpoint]kit-toolbar--density-compact {
40
+ border-radius: calc(var(--kit-spacing) * 1.75);
41
+ }
42
+
43
+ .kit-toolbar[breakpoint]kit-toolbar--density-compact:not([class*='toolbar--orientation-vertical']) {
44
+ height: 2.625rem;
45
+ padding-inline: calc(var(--kit-spacing) * 0.75);
46
+ }
47
+
48
+ .kit-toolbar[breakpoint]kit-toolbar--density-compact[class*='toolbar--orientation-vertical'] {
49
+ width: 2.625rem;
50
+ padding: calc(var(--kit-spacing) * 0.75) 0;
51
+ }
52
+
53
+ .kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
54
+ border-radius: calc(var(--kit-spacing) * 3.5);
55
+ }
56
+
57
+ .kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
58
+ [class*='toolbar--orientation-vertical']
59
+ ) {
60
+ height: 3.5rem;
61
+ padding-inline: calc(var(--kit-spacing) * 2.25);
62
+ }
63
+
64
+ .kit-toolbar[breakpoint]kit-toolbar--density-comfortable[class*='toolbar--orientation-vertical'] {
65
+ width: 3.5rem;
66
+ padding: calc(var(--kit-spacing) * 2.25) 0;
67
+ }
68
+
69
+ .kit-toolbar[breakpoint]kit-toolbar--variant-text,
70
+ .kit-toolbar[breakpoint]kit-toolbar--variant-outline,
71
+ .kit-toolbar[breakpoint]kit-toolbar--variant-dash {
72
+ --toolbar-color: var(--base, var(--kit-neutral));
73
+ background-color: transparent;
74
+ }
75
+
76
+ .kit-toolbar[breakpoint]kit-toolbar--variant-outline {
77
+ border-color: currentColor;
78
+ }
79
+
80
+ .kit-toolbar[breakpoint]kit-toolbar--variant-dash {
81
+ border-style: dashed;
82
+ border-color: currentColor;
83
+ }
84
+
85
+ .kit-toolbar[breakpoint]kit-toolbar--orientation-horizontal {
86
+ flex-direction: row;
87
+ width: 100%;
88
+ }
89
+
90
+ .kit-toolbar[breakpoint]kit-toolbar--orientation-vertical {
91
+ flex-direction: column;
92
+ min-height: fit-content;
93
+ width: fit-content;
94
+ }
95
+
96
+ /* wrapper */
97
+ .kit-toolbar .kit-toolbar--wrapper {
98
+ display: flex;
99
+ align-items: center;
100
+ /* margin-left: auto;
101
+ margin-right: auto; */
102
+ flex-direction: row;
103
+ height: auto;
104
+ width: 100%;
105
+ }
106
+
107
+ .kit-toolbar[breakpoint]kit-toolbar--orientation-vertical .kit-toolbar--wrapper {
108
+ flex-direction: column;
109
+ height: 100%;
110
+ }
111
+
112
+ /* location */
113
+ .kit-toolbar[breakpoint]kit-toolbar--location-top {
114
+ top: 0px;
115
+ z-index: 1004;
116
+ transform: translateY(0px);
117
+ position: fixed;
118
+ left: 0px;
119
+ width: calc(100% + 0px);
120
+ }
121
+
122
+ .kit-toolbar[breakpoint]kit-toolbar--location-bottom {
123
+ z-index: 1004;
124
+ transform: translateY(0px);
125
+ position: fixed;
126
+ left: 0px;
127
+ width: calc(100% + 0px);
128
+ bottom: 0px;
129
+ }
@@ -0,0 +1,47 @@
1
+ <script lang="ts">
2
+ import { getAssets } from '../../internal/index.js';
3
+ import type { ToolbarProps } from './types.js';
4
+
5
+ let {
6
+ children,
7
+ ref = $bindable(),
8
+ is = 'div',
9
+ classContent,
10
+ light,
11
+ dark,
12
+ variant,
13
+ rounded,
14
+ background,
15
+ color,
16
+ density = 'default',
17
+ orientation = 'horizontal',
18
+ location,
19
+ ...rest
20
+ }: ToolbarProps = $props();
21
+
22
+ const assets = getAssets();
23
+ </script>
24
+
25
+ <svelte:element
26
+ this={is}
27
+ bind:this={ref}
28
+ {...rest}
29
+ role="toolbar"
30
+ class={[
31
+ 'kit-toolbar',
32
+ light && 'light',
33
+ dark && 'dark',
34
+ variant && assets.className('toolbar', 'variant', variant),
35
+ density && assets.className('toolbar', 'density', density),
36
+ orientation && assets.className('toolbar', 'orientation', orientation),
37
+ location && assets.className('toolbar', 'location', location),
38
+ rest.class
39
+ ]}
40
+ style:--base={assets.color(background)}
41
+ style:--on={assets.color(color)}
42
+ style:--shape={assets.shape(rounded)}
43
+ >
44
+ <div class={['kit-toolbar--wrapper', classContent]}>
45
+ {@render children?.()}
46
+ </div>
47
+ </svelte:element>
@@ -0,0 +1,4 @@
1
+ import type { ToolbarProps } from './types.js';
2
+ declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "ref">;
3
+ type Toolbar = ReturnType<typeof Toolbar>;
4
+ export default Toolbar;
@@ -0,0 +1,27 @@
1
+ import type { Component } from '../../internal/types.js';
2
+ type Variant = 'outline' | 'text' | 'dash';
3
+ type Density = 'compact' | 'comfortable' | 'default';
4
+ type Orientation = 'horizontal' | 'vertical';
5
+ type Location = 'top' | 'bottom';
6
+ export interface ToolbarProps extends Component {
7
+ is?: 'div' | 'header' | 'nav';
8
+ variant?: Variant | {
9
+ [key: string]: Variant;
10
+ };
11
+ rounded?: string;
12
+ density?: Density | {
13
+ [key: string]: Density;
14
+ };
15
+ dark?: boolean;
16
+ light?: boolean;
17
+ color?: string;
18
+ orientation?: Orientation | {
19
+ [key: string]: Orientation;
20
+ };
21
+ background?: string;
22
+ location?: Location | {
23
+ [key: string]: Location;
24
+ };
25
+ classContent?: string | string[] | undefined;
26
+ }
27
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,11 @@
1
+ interface RippleOptions {
2
+ center?: boolean;
3
+ color?: string;
4
+ duration?: number;
5
+ disabled?: boolean;
6
+ }
7
+ export declare function ripple(el: HTMLElement, options?: RippleOptions): {
8
+ destroy(): void;
9
+ update(newOptions: RippleOptions): void;
10
+ };
11
+ export {};