lapikit 0.6.2 → 0.6.3

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 (6) hide show
  1. package/dist/components/app/app.svelte +34 -25
  2. package/dist/components/card/card.svelte +9 -10
  3. package/dist/components/list/list.svelte +126 -93
  4. package/dist/components/list/list.types.d.ts +4 -5
  5. package/dist/components/list/modules/list-item.svelte +104 -66
  6. package/package.json +1 -1
package/dist/components/app/app.svelte CHANGED
@@ -45,6 +45,7 @@
45
45
  --kit-shape-md: 10px;
46
46
  --kit-shape-lg: 14px;
47
47
  --kit-shape-xl: 18px;
48
+ --kit-shape-full: 9999px;
48
49
 
49
50
  --kit-space-compact: 6px;
50
51
  --kit-space-default: 10px;
@@ -57,58 +58,66 @@
57
58
  .kit-application,
58
59
  :global([data-kit-theme='light']) {
59
60
  color-scheme: light;
60
- --kit-color-bg: hsl(0 0% 100%);
61
- --kit-color-bg-secondary: hsl(240 15% 96.5%);
62
- --kit-color-bg-tertiary: hsl(240 10% 93%);
63
61
  --kit-color-surface: hsl(0 0% 100%);
64
- --kit-color-surface-raised: hsl(0 0% 100%);
62
+ --kit-color-surface-1: hsl(240 15% 96.5%);
63
+ --kit-color-surface-2: hsl(240 10% 93%);
64
+ --kit-color-surface-3: hsl(0 0% 100%);
65
65
 
66
- --kit-color-label: hsl(222 20% 10%);
67
- --kit-color-label-secondary: hsl(220 10% 40%);
68
- --kit-color-label-tertiary: hsl(220 8% 58%);
69
- --kit-color-label-quaternary: hsl(220 5% 76%);
66
+ --kit-color-text: hsl(222 20% 10%);
67
+ --kit-color-text-muted: hsl(220 10% 40%);
68
+ --kit-color-text-subtle: hsl(220 8% 58%);
69
+ --kit-color-text-disabled: hsl(220 5% 76%);
70
70
 
71
- --kit-color-fill: hsl(240 4% 91%);
72
- --kit-color-fill-secondary: hsl(240 8% 93%);
73
- --kit-color-fill-tertiary: hsl(240 11% 95%);
71
+ --kit-color-fill: hsl(240 8% 93%);
72
+ --kit-color-fill-hover: hsl(240 4% 91%);
73
+ --kit-color-fill-active: hsl(240 4% 88%);
74
74
 
75
- --kit-color-separator: hsl(220 16% 88%);
75
+ --kit-color-border: hsl(220 16% 88%);
76
76
  --kit-color-shadow: hsl(240 3% 11%);
77
77
 
78
78
  --kit-color-accent: hsl(220 90% 56%);
79
+ --kit-color-on-accent: hsl(0 0% 100%);
79
80
  --kit-color-success: hsl(145 50% 38%);
81
+ --kit-color-on-success: hsl(0 0% 100%);
80
82
  --kit-color-warning: hsl(35 80% 45%);
83
+ --kit-color-on-warning: hsl(222 20% 10%);
81
84
  --kit-color-danger: hsl(5 65% 48%);
85
+ --kit-color-on-danger: hsl(0 0% 100%);
82
86
  --kit-color-info: hsl(205 60% 42%);
87
+ --kit-color-on-info: hsl(0 0% 100%);
83
88
  --kit-color-focus: hsl(35 90% 56%);
84
89
  }
85
90
 
86
91
  :global([data-kit-theme='dark']) {
87
92
  color-scheme: dark;
88
93
 
89
- --kit-color-bg: hsl(240 3% 11%);
90
- --kit-color-bg-secondary: hsl(240 2% 17.5%);
91
- --kit-color-bg-tertiary: hsl(240 1.5% 23%);
92
- --kit-color-surface: hsl(240 2% 19%);
93
- --kit-color-surface-raised: hsl(240 1.5% 25%);
94
+ --kit-color-surface: hsl(240 3% 11%);
95
+ --kit-color-surface-1: hsl(240 2% 17.5%);
96
+ --kit-color-surface-2: hsl(240 1.5% 23%);
97
+ --kit-color-surface-3: hsl(240 1.5% 28%);
94
98
 
95
- --kit-color-label: hsl(0 0% 100%);
96
- --kit-color-label-secondary: hsl(240 3% 56%);
97
- --kit-color-label-tertiary: hsl(240 2.5% 38%);
98
- --kit-color-label-quaternary: hsl(240 1.5% 25%);
99
+ --kit-color-text: hsl(0 0% 100%);
100
+ --kit-color-text-muted: hsl(240 3% 56%);
101
+ --kit-color-text-subtle: hsl(240 2.5% 38%);
102
+ --kit-color-text-disabled: hsl(240 1.5% 25%);
99
103
 
100
- --kit-color-fill: hsl(240 2.5% 28%);
101
- --kit-color-fill-secondary: hsl(240 2.5% 24%);
102
- --kit-color-fill-tertiary: hsl(240 2% 20%);
104
+ --kit-color-fill: hsl(240 2.5% 24%);
105
+ --kit-color-fill-hover: hsl(240 2.5% 28%);
106
+ --kit-color-fill-active: hsl(240 2.5% 31%);
103
107
 
104
- --kit-color-separator: hsl(240 2% 26%);
108
+ --kit-color-border: hsl(240 2% 26%);
105
109
  --kit-color-shadow: hsl(240 3% 11%);
106
110
 
107
111
  --kit-color-accent: hsl(220 85% 65%);
112
+ --kit-color-on-accent: hsl(240 3% 11%);
108
113
  --kit-color-success: hsl(145 50% 50%);
114
+ --kit-color-on-success: hsl(240 3% 11%);
109
115
  --kit-color-warning: hsl(35 85% 58%);
116
+ --kit-color-on-warning: hsl(240 3% 11%);
110
117
  --kit-color-danger: hsl(5 70% 60%);
118
+ --kit-color-on-danger: hsl(240 3% 11%);
111
119
  --kit-color-info: hsl(205 65% 58%);
120
+ --kit-color-on-info: hsl(240 3% 11%);
112
121
  --kit-color-focus: hsl(35 90% 62%);
113
122
  }
114
123
 
package/dist/components/card/card.svelte CHANGED
@@ -102,6 +102,7 @@
102
102
  border-radius: var(--kit-card-radius);
103
103
  border: 0;
104
104
  box-sizing: border-box;
105
+ padding: calc(10px * var(--kit-card-density-scale));
105
106
  transition:
106
107
  background 140ms ease,
107
108
  color 140ms ease,
@@ -149,19 +150,19 @@
149
150
  * @link https://lapikit.dev/docs/components/card#density
150
151
  */
151
152
  .kit-card[data-density='none'] {
152
- padding: 0;
153
+ --kit-card-density-scale: 0;
153
154
  }
154
155
  .kit-card[data-density='compact'] {
155
156
  --kit-card-gap: var(--kit-space-compact);
156
- padding: var(--kit-space-compact);
157
+ --kit-card-density-scale: 0.8;
157
158
  }
158
159
  .kit-card[data-density='default'] {
159
160
  --kit-card-gap: var(--kit-space-default);
160
- padding: var(--kit-space-default);
161
+ --kit-card-density-scale: 1;
161
162
  }
162
163
  .kit-card[data-density='comfortable'] {
163
164
  --kit-card-gap: var(--kit-space-comfortable);
164
- padding: var(--kit-space-comfortable);
165
+ --kit-card-density-scale: 1.15;
165
166
  }
166
167
 
167
168
  /**
@@ -169,15 +170,15 @@
169
170
  * @link https://lapikit.dev/docs/components/card#variants
170
171
  */
171
172
  .kit-card[data-variant='filled'] {
172
- --kit-card-bg: var(--kit-color-surface);
173
- --kit-card-fg: var(--kit-color-label);
173
+ --kit-card-bg: var(--kit-color-surface-1);
174
+ --kit-card-fg: var(--kit-color-text);
174
175
 
175
176
  --kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), black 10%);
176
177
  --kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), black 16%);
177
178
  }
178
179
  .kit-card[data-variant='outline'] {
179
180
  --kit-card-bg: transparent;
180
- --kit-card-fg: var(--kit-color-label);
181
+ --kit-card-fg: var(--kit-color-text);
181
182
  --kit-card-bd: var(--kit-card-fg);
182
183
 
183
184
  --kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
@@ -185,7 +186,7 @@
185
186
  }
186
187
  .kit-card[data-variant='text'] {
187
188
  --kit-card-bg: transparent;
188
- --kit-card-fg: var(--kit-color-label);
189
+ --kit-card-fg: var(--kit-color-text);
189
190
 
190
191
  --kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
191
192
  --kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
@@ -198,7 +199,6 @@
198
199
  .kit-card[data-interactive='true'][data-disabled='false']:hover {
199
200
  translate: 0 -1px;
200
201
  background: var(--kit-card-hover-bg);
201
- /* box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12); */
202
202
  }
203
203
 
204
204
  .kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
@@ -209,7 +209,6 @@
209
209
  .kit-card[data-interactive='true'][data-disabled='false']:active {
210
210
  translate: 0 0;
211
211
  background: var(--kit-card-active-bg);
212
- /* box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1); */
213
212
  }
214
213
 
215
214
  .kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],
package/dist/components/list/list.svelte CHANGED
@@ -1,17 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { makeComponentProps } from '../../html-mapped';
3
3
  import { useClassName, useStyles } from '../../utils';
4
- import type { ListDensity, ListProps, ListVariant } from './list.types.js';
5
-
6
- function resolveVariant(value: ListVariant | undefined): ListVariant {
7
- return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
8
- }
9
-
10
- function resolveDensity(value: ListDensity | undefined): ListDensity {
11
- return value === 'compact' || value === 'comfortable' || value === 'default'
12
- ? value
13
- : 'default';
14
- }
4
+ import type { ListProps } from './list.types.js';
15
5
 
16
6
  let {
17
7
  ref = $bindable(),
@@ -26,8 +16,8 @@
26
16
  density = 'default',
27
17
  rounded = 'md',
28
18
  nav = false,
29
- color = undefined,
30
- background = undefined,
19
+ color,
20
+ background,
31
21
  ...rest
32
22
  }: ListProps = $props();
33
23
 
@@ -52,24 +42,7 @@
52
42
  })
53
43
  );
54
44
 
55
- let safeVariant = $derived(resolveVariant(variant));
56
- let safeDensity = $derived(resolveDensity(density));
57
- let safeSize = $derived(
58
- size === 'default'
59
- ? 'md'
60
- : size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
61
- ? size
62
- : 'md'
63
- );
64
- let mergedStyle = $derived(
65
- [
66
- componentStyle,
67
- color ? `--kit-list-fg:${color}` : '',
68
- background ? `--kit-list-bg:${background}` : ''
69
- ]
70
- .filter(Boolean)
71
- .join('; ')
72
- );
45
+ let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
73
46
  </script>
74
47
 
75
48
  <svelte:element
@@ -77,12 +50,14 @@
77
50
  bind:this={ref}
78
51
  class={componentClass}
79
52
  style={mergedStyle}
80
- data-size={safeSize}
81
- data-variant={safeVariant}
82
- data-density={safeDensity}
53
+ data-size={size}
54
+ data-variant={variant}
55
+ data-density={density}
83
56
  data-rounded={rounded}
84
57
  data-nav={nav}
85
58
  role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
59
+ style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
60
+ style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
86
61
  {...restProps}
87
62
  >
88
63
  {@render children?.()}
@@ -90,87 +65,145 @@
90
65
 
91
66
  <style>
92
67
  .kit-list {
93
- --kit-list-bg: var(--kit-surface-1);
94
- --kit-list-fg: var(--kit-fg);
95
- --kit-list-bd: var(--kit-border);
96
- --kit-list-radius: 10px;
97
- --kit-list-item-h-xs: 2.125rem;
98
- --kit-list-item-h-sm: 2.375rem;
99
- --kit-list-item-h-md: 2.75rem;
100
- --kit-list-item-h-lg: 3.125rem;
101
- --kit-list-item-h-xl: 3.5rem;
102
- --kit-list-item-px-xs: 0.625rem;
103
- --kit-list-item-px-sm: 0.75rem;
104
- --kit-list-item-px-md: 0.875rem;
105
- --kit-list-item-px-lg: 1rem;
106
- --kit-list-item-px-xl: 1.125rem;
107
- --kit-list-item-gap-xs: 0.5rem;
108
- --kit-list-item-gap-sm: 0.5rem;
109
- --kit-list-item-gap-md: 0.625rem;
110
- --kit-list-item-gap-lg: 0.75rem;
111
- --kit-list-item-gap-xl: 0.875rem;
112
- --kit-list-item-font-xs: 0.75rem;
113
- --kit-list-item-font-sm: 0.875rem;
114
- --kit-list-item-font-md: 0.9375rem;
115
- --kit-list-item-font-lg: 1rem;
116
- --kit-list-item-font-xl: 1.0625rem;
117
- --kit-list-item-h: var(--kit-list-item-h-md);
118
- --kit-list-item-px: var(--kit-list-item-px-md);
119
- --kit-list-item-gap: var(--kit-list-item-gap-md);
120
- --kit-list-item-font: var(--kit-list-item-font-md);
121
- --kit-list-density-offset: 0rem;
122
-
68
+ width: 100%;
123
69
  display: flex;
70
+ position: relative;
124
71
  flex-direction: column;
125
- width: 100%;
126
- padding: 0.25rem;
127
- gap: 0.125rem;
128
- color: var(--kit-list-fg);
129
- background: transparent;
130
- border-radius: var(--kit-list-radius);
72
+ gap: 0;
73
+ border: 0;
74
+ box-sizing: border-box;
75
+ transition:
76
+ background 140ms ease,
77
+ color 140ms ease,
78
+ box-shadow 140ms ease,
79
+ translate 140ms ease;
131
80
  }
132
81
 
133
- .kit-list[data-nav='true'] {
134
- padding: 0.5rem;
82
+ .kit-list[data-variant='text']
83
+ :global(.kit-list-item[data-interactive='true'][data-active='true'][data-disabled='false']),
84
+ .kit-list[data-variant='text']
85
+ :global(.kit-list-item[data-interactive='true'][data-disabled='false']:active) {
86
+ background: var(--kit-list-item-active-bg);
135
87
  }
136
88
 
89
+ /**
90
+ * density
91
+ * @link https://lapikit.dev/docs/components/list#density
92
+ */
93
+ .kit-list[data-density='none'] {
94
+ --kit-list-density-scale: 0;
95
+ --kit-list-density-h-scale: 0;
96
+ }
137
97
  .kit-list[data-density='compact'] {
138
- --kit-list-density-offset: -0.25rem;
98
+ --kit-list-density-scale: 0.9;
99
+ --kit-list-density-h-scale: 0.92;
100
+ }
101
+ .kit-list[data-density='default'] {
102
+ --kit-list-density-scale: 1;
103
+ --kit-list-density-h-scale: 1;
139
104
  }
140
-
141
105
  .kit-list[data-density='comfortable'] {
142
- --kit-list-density-offset: 0.25rem;
106
+ --kit-list-density-scale: 1.1;
107
+ --kit-list-density-h-scale: 1.15;
143
108
  }
144
109
 
145
- .kit-list[data-rounded='0'] {
146
- --kit-list-radius: 0;
110
+ /**
111
+ * rounded
112
+ * @link ...
113
+ */
114
+ .kit-list[data-rounded='0'] :global(.kit-list-item) {
115
+ --kit-list-item-radius: var(--kit-shape-none);
147
116
  }
148
-
149
- .kit-list[data-rounded='xs'] {
150
- --kit-list-radius: 2px;
117
+ .kit-list[data-rounded='xs'] :global(.kit-list-item) {
118
+ --kit-list-item-radius: var(--kit-shape-xs);
151
119
  }
152
-
153
- .kit-list[data-rounded='sm'] {
154
- --kit-list-radius: 6px;
120
+ .kit-list[data-rounded='sm'] :global(.kit-list-item) {
121
+ --kit-list-item-radius: var(--kit-shape-sm);
122
+ }
123
+ .kit-list[data-rounded='md'] :global(.kit-list-item) {
124
+ --kit-list-item-radius: var(--kit-shape-md);
125
+ }
126
+ .kit-list[data-rounded='lg'] :global(.kit-list-item) {
127
+ --kit-list-item-radius: var(--kit-shape-lg);
155
128
  }
129
+ .kit-list[data-rounded='xl'] :global(.kit-list-item) {
130
+ --kit-list-item-radius: var(--kit-shape-xl);
131
+ }
132
+ .kit-list[data-rounded='full'] :global(.kit-list-item) {
133
+ --kit-list-item-radius: var(--kit-shape-full);
134
+ }
135
+
136
+ /**
137
+ * variant
138
+ * @link https://lapikit.dev/docs/components/list#variants
139
+ */
140
+ .kit-list[data-variant='filled'] :global(.kit-list-item) {
141
+ --kit-list-item-bg: var(--kit-color-surface-2);
142
+ --kit-list-item-fg: var(--kit-color-text);
156
143
 
157
- .kit-list[data-rounded='md'] {
158
- --kit-list-radius: 10px;
144
+ --kit-list-item-hover-bg: color-mix(in oklab, var(---kit-list-item-bg), black 10%);
145
+ --kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-bg), black 16%);
159
146
  }
147
+ .kit-list[data-variant='outline'] :global(.kit-list-item) {
148
+ --kit-list-item-bg: transparent;
149
+ --kit-list-item-fg: var(--kit-color-text);
150
+ --kit-list-item-bd: var(--kit-list-item-fg);
160
151
 
161
- .kit-list[data-rounded='lg'] {
162
- --kit-list-radius: 16px;
152
+ --kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
153
+ --kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
163
154
  }
155
+ .kit-list[data-variant='text'] :global(.kit-list-item) {
156
+ --kit-list-item-bg: transparent;
157
+ --kit-list-item-fg: var(--kit-color-text);
164
158
 
165
- .kit-list[data-rounded='xl'] {
166
- --kit-list-radius: 9999px;
159
+ --kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
160
+ --kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
161
+ }
162
+ .kit-list[data-variant='text'] :global(.kit-list-item .outline),
163
+ .kit-list[data-variant='filled'] :global(.kit-list-item .outline) {
164
+ display: none;
167
165
  }
168
166
 
169
- .kit-list[data-variant='filled'] {
170
- background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
167
+ /**
168
+ * nav
169
+ * @link https://lapikit.dev/docs/components/list#nav
170
+ */
171
+ .kit-list[data-nav='true'] {
172
+ padding: 0.5rem;
171
173
  }
172
174
 
173
- .kit-list[data-variant='outline'] {
174
- border: 1px solid var(--kit-list-bd);
175
+ /**
176
+ * size
177
+ * @link nothing...
178
+ */
179
+ .kit-list[data-size='xs'] :global(.kit-list-item) {
180
+ --kit-list-item-h: 28px;
181
+ --kit-list-item-px: 10px;
182
+ --kit-list-item-gap: 4px;
183
+ --kit-list-item-font: 0.75rem;
184
+ }
185
+ .kit-list[data-size='sm'] :global(.kit-list-item) {
186
+ --kit-list-item-h: 32px;
187
+ --kit-list-item-px: 12px;
188
+ --kit-list-item-gap: 6px;
189
+ --kit-list-item-font: 0.875rem;
190
+ }
191
+ .kit-list[data-size='md'] :global(.kit-list-item) {
192
+ --kit-list-item-h: 40px;
193
+ --kit-list-item-px: 16px;
194
+ --kit-list-item-gap: 8px;
195
+ --kit-list-item-font: 1rem;
196
+ }
197
+ .kit-list[data-size='lg'] :global(.kit-list-item) {
198
+ --kit-list-item-h: 48px;
199
+ --kit-list-item-px: 20px;
200
+ --kit-list-item-gap: 10px;
201
+ --kit-list-item-font: 1.125rem;
202
+ }
203
+ .kit-list[data-size='xl'] :global(.kit-list-item) {
204
+ --kit-list-item-h: 56px;
205
+ --kit-list-item-px: 24px;
206
+ --kit-list-item-gap: 12px;
207
+ --kit-list-item-font: 1.25rem;
175
208
  }
176
209
  </style>
package/dist/components/list/list.types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { Snippet } from 'svelte';
2
- import type { Component, RoundedType, SizeType } from '../../@types';
2
+ import type { Component, DensityType, RoundedType, SizeType } from '../../@types';
3
3
  export type ListVariant = 'filled' | 'outline' | 'text';
4
- export type ListDensity = 'compact' | 'comfortable' | 'default';
5
4
  export type ListElement = 'div' | 'nav' | 'ul';
6
5
  export type ListItemElement = 'div' | 'a' | 'button' | 'li';
7
6
  export interface ListProps extends Component {
@@ -9,8 +8,8 @@ export interface ListProps extends Component {
9
8
  is?: ListElement;
10
9
  size?: SizeType;
11
10
  variant?: ListVariant;
12
- density?: ListDensity;
13
- rounded?: RoundedType;
11
+ density?: DensityType;
12
+ rounded?: RoundedType | 'full';
14
13
  nav?: boolean;
15
14
  color?: string;
16
15
  background?: string;
@@ -23,7 +22,7 @@ export interface ListItemProps extends Component {
23
22
  prepend?: Snippet;
24
23
  color?: string;
25
24
  background?: string;
26
- rounded?: RoundedType;
25
+ interactive?: boolean;
27
26
  active?: boolean;
28
27
  disabled?: boolean;
29
28
  noRipple?: boolean;
package/dist/components/list/modules/list-item.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { ripple } from '../../../animations';
3
3
  import { makeComponentProps } from '../../../html-mapped';
4
- import { useClassName, useStyles } from '../../../utils';
4
+ import { useClassName, useIsInteractive, useStyles } from '../../../utils';
5
5
  import type { ListItemProps } from '../list.types.js';
6
6
 
7
7
  let {
@@ -17,7 +17,7 @@
17
17
  href = undefined,
18
18
  color = undefined,
19
19
  background = undefined,
20
- rounded = 'sm',
20
+ interactive = false,
21
21
  active = false,
22
22
  disabled = false,
23
23
  noRipple = false,
@@ -29,7 +29,8 @@
29
29
  );
30
30
 
31
31
  let tag = $derived(href ? 'a' : is === 'div' && restProps.onclick ? 'button' : is);
32
- let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
32
+ // let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
33
+ let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
33
34
 
34
35
  let componentClass = $derived(
35
36
  useClassName({
@@ -48,15 +49,7 @@
48
49
  })
49
50
  );
50
51
 
51
- let mergedStyle = $derived(
52
- [
53
- componentStyle,
54
- color ? `--kit-list-item-fg:${color}` : '',
55
- background ? `--kit-list-item-bg:${background}` : ''
56
- ]
57
- .filter(Boolean)
58
- .join('; ')
59
- );
52
+ let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
60
53
  </script>
61
54
 
62
55
  <svelte:element
@@ -67,17 +60,22 @@
67
60
  href={href && !disabled ? href : undefined}
68
61
  data-active={active}
69
62
  data-disabled={disabled}
70
- data-rounded={rounded}
71
63
  aria-disabled={disabled || undefined}
72
64
  disabled={tag === 'button' ? disabled : undefined}
73
65
  tabindex={href && disabled ? -1 : undefined}
74
66
  role={tag === 'div' ? 'listitem' : undefined}
67
+ data-append={append && true}
68
+ data-prepend={prepend && true}
69
+ data-interactive={isInteractive}
70
+ style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
71
+ style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
75
72
  use:ripple={{
76
73
  component: 'list-item',
77
74
  disabled: noRipple || !isInteractive
78
75
  }}
79
76
  {...restProps}
80
77
  >
78
+ <span class="outline"></span>
81
79
  {#if prepend}
82
80
  <span class="kit-list-item__prepend">
83
81
  {@render prepend?.()}
@@ -97,104 +95,144 @@
97
95
 
98
96
  <style>
99
97
  .kit-list-item {
100
- --kit-list-item-bg: transparent;
101
- --kit-list-item-fg: inherit;
102
- --kit-list-item-radius: 8px;
103
-
98
+ width: 100%;
99
+ min-height: calc(var(--kit-list-item-h) * var(--kit-list-density-h-scale));
104
100
  position: relative;
105
101
  display: grid;
106
- grid-template-columns: auto minmax(0, 1fr) auto;
102
+ grid-template-columns: 1fr;
107
103
  align-items: center;
108
- gap: var(--kit-list-item-gap, 0.625rem);
109
- min-height: calc(var(--kit-list-item-h, 2.75rem) + var(--kit-list-density-offset, 0rem));
110
- padding-inline: var(--kit-list-item-px, 0.875rem);
111
- border: 0;
104
+ gap: var(--kit-list-item-gap);
112
105
  border-radius: var(--kit-list-item-radius);
106
+ border: 0;
113
107
  background: var(--kit-list-item-bg);
114
108
  color: var(--kit-list-item-fg);
115
109
  text-decoration: none;
110
+ font-size: var(--kit-list-item-font);
111
+ }
112
+
113
+ .kit-list-item .kit-list-item__prepend,
114
+ .kit-list-item:not([data-prepend='true']) .kit-list-item__content {
115
+ margin-left: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
116
+ }
117
+ .kit-list-item .kit-list-item__append,
118
+ .kit-list-item:not([data-append='true']) .kit-list-item__content {
119
+ margin-right: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
120
+ }
121
+ .kit-list-item:not([data-prepend='true']):not([data-append='true']) .kit-list-item__content {
122
+ margin-left: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
123
+ margin-right: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
124
+ }
125
+
126
+ .kit-list-item[data-prepend='true']:not([data-append='true']) {
127
+ grid-template-columns: auto minmax(0, 1fr);
128
+ }
129
+ .kit-list-item[data-append='true']:not([data-prepend='true']) {
130
+ grid-template-columns: minmax(0, 1fr) auto;
131
+ }
132
+ .kit-list-item[data-append='true'][data-prepend='true'] {
133
+ grid-template-columns: auto minmax(0, 1fr) auto;
134
+ }
135
+
136
+ a.kit-list-item {
137
+ text-decoration: none;
138
+ }
139
+
140
+ button.kit-list-item {
141
+ appearance: none;
142
+ border: 0;
116
143
  font: inherit;
117
- font-size: var(--kit-list-item-font, 0.9375rem);
118
- text-align: left;
144
+ text-align: inherit;
145
+ }
146
+
147
+ .kit-list-item[data-interactive='true'][data-disabled='false'] {
148
+ cursor: pointer;
149
+ }
150
+
151
+ .kit-list-item[data-interactive='true'][data-disabled='false']:hover {
152
+ translate: 0 -1px;
153
+ background: var(--kit-list-item-hover-bg);
154
+ }
155
+ .kit-list-item[data-active='true'][data-disabled='false'] {
156
+ translate: 0 0;
157
+ background: var(--kit-list-item-active-bg);
158
+ }
159
+ .kit-list-item[data-interactive='true'][data-disabled='false']:active {
160
+ translate: 0 0;
161
+ background: var(--kit-list-item-active-bg);
119
162
  }
120
163
 
121
- :global(.kit-list[data-size='xs']) .kit-list-item {
122
- --kit-list-item-h: var(--kit-list-item-h-xs, 2.125rem);
123
- --kit-list-item-px: var(--kit-list-item-px-xs, 0.625rem);
124
- --kit-list-item-gap: var(--kit-list-item-gap-xs, 0.5rem);
125
- --kit-list-item-font: var(--kit-list-item-font-xs, 0.75rem);
164
+ .kit-list-item[data-interactive='true'][data-disabled='false']:focus-visible {
165
+ outline: 2px solid var(--kit-focus);
166
+ outline-offset: 2px;
126
167
  }
127
168
 
128
- :global(.kit-list[data-size='sm']) .kit-list-item {
129
- --kit-list-item-h: var(--kit-list-item-h-sm, 2.375rem);
130
- --kit-list-item-px: var(--kit-list-item-px-sm, 0.75rem);
131
- --kit-list-item-gap: var(--kit-list-item-gap-sm, 0.5rem);
132
- --kit-list-item-font: var(--kit-list-item-font-sm, 0.875rem);
169
+ .kit-list-item[data-disabled='true'] {
170
+ opacity: var(--kit-disabled-opacity, 0.55);
171
+ pointer-events: none;
133
172
  }
134
173
 
135
- :global(.kit-list[data-size='md']) .kit-list-item {
136
- --kit-list-item-h: var(--kit-list-item-h-md, 2.75rem);
137
- --kit-list-item-px: var(--kit-list-item-px-md, 0.875rem);
138
- --kit-list-item-gap: var(--kit-list-item-gap-md, 0.625rem);
139
- --kit-list-item-font: var(--kit-list-item-font-md, 0.9375rem);
174
+ .kit-list-item__prepend,
175
+ .kit-list-item__append,
176
+ .kit-list-item__content {
177
+ display: inline-flex;
178
+ align-items: center;
179
+ min-width: 0;
140
180
  }
141
181
 
142
- :global(.kit-list[data-size='lg']) .kit-list-item {
143
- --kit-list-item-h: var(--kit-list-item-h-lg, 3.125rem);
144
- --kit-list-item-px: var(--kit-list-item-px-lg, 1rem);
145
- --kit-list-item-gap: var(--kit-list-item-gap-lg, 0.75rem);
146
- --kit-list-item-font: var(--kit-list-item-font-lg, 1rem);
182
+ .kit-list-item__content {
183
+ overflow: hidden;
184
+ text-overflow: ellipsis;
185
+ white-space: nowrap;
147
186
  }
148
187
 
149
- :global(.kit-list[data-size='xl']) .kit-list-item {
150
- --kit-list-item-h: var(--kit-list-item-h-xl, 3.5rem);
151
- --kit-list-item-px: var(--kit-list-item-px-xl, 1.125rem);
152
- --kit-list-item-gap: var(--kit-list-item-gap-xl, 0.875rem);
153
- --kit-list-item-font: var(--kit-list-item-font-xl, 1.0625rem);
188
+ .kit-list-item .outline {
189
+ --outline-color: var(--kit-list-item-bd);
154
190
  }
155
191
 
192
+ /**
193
+ * rounded
194
+ * @link ...
195
+ */
156
196
  .kit-list-item[data-rounded='0'] {
157
- --kit-list-item-radius: 0;
197
+ --kit-list-item-radius: var(--kit-shape-none);
158
198
  }
159
-
160
199
  .kit-list-item[data-rounded='xs'] {
161
- --kit-list-item-radius: 2px;
200
+ --kit-list-item-radius: var(--kit-shape-xs);
162
201
  }
163
-
164
202
  .kit-list-item[data-rounded='sm'] {
165
- --kit-list-item-radius: 8px;
203
+ --kit-list-item-radius: var(--kit-shape-sm);
166
204
  }
167
-
168
205
  .kit-list-item[data-rounded='md'] {
169
- --kit-list-item-radius: 12px;
206
+ --kit-list-item-radius: var(--kit-shape-md);
170
207
  }
171
-
172
208
  .kit-list-item[data-rounded='lg'] {
173
- --kit-list-item-radius: 16px;
209
+ --kit-list-item-radius: var(--kit-shape-lg);
174
210
  }
175
-
176
211
  .kit-list-item[data-rounded='xl'] {
177
- --kit-list-item-radius: 9999px;
212
+ --kit-list-item-radius: var(--kit-shape-xl);
213
+ }
214
+ .kit-list-item[data-rounded='full'] {
215
+ --kit-list-item-radius: var(--kit-shape-full);
178
216
  }
179
217
 
180
- :global(.kit-list[data-variant='filled']) .kit-list-item {
218
+ /* :global(.kit-list[data-variant='filled']) .kit-list-item {
181
219
  background: var(--kit-list-item-bg, transparent);
182
220
  }
183
221
 
184
222
  :global(.kit-list[data-variant='filled']) .kit-list-item[data-active='true'] {
185
223
  background: color-mix(in oklab, currentColor 12%, transparent);
186
- }
224
+ } */
187
225
 
188
- :global(.kit-list[data-variant='outline']) .kit-list-item::before {
226
+ /* :global(.kit-list[data-variant='outline']) .kit-list-item::before {
189
227
  content: '';
190
228
  position: absolute;
191
229
  inset: 0;
192
230
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
193
231
  border-radius: inherit;
194
232
  pointer-events: none;
195
- }
233
+ } */
196
234
 
197
- .kit-list-item[data-active='true'] {
235
+ /* .kit-list-item[data-active='true'] {
198
236
  background: color-mix(in oklab, currentColor 12%, transparent);
199
237
  }
200
238
 
@@ -230,5 +268,5 @@
230
268
  background: currentColor;
231
269
  opacity: 0.06;
232
270
  pointer-events: none;
233
- }
271
+ } */
234
272
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lapikit",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"