lapikit 0.8.0 → 0.8.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 (5) hide show
  1. package/dist/components/list/list.context.d.ts +7 -0
  2. package/dist/components/list/list.context.js +4 -0
  3. package/dist/components/list/list.svelte +18 -4
  4. package/dist/components/list/modules/list-item.svelte +62 -32
  5. package/package.json +1 -1
package/dist/components/list/list.context.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export type ListItemSemantics = 'li' | 'listitem' | undefined;
2
+ interface ListContext {
3
+ readonly item: ListItemSemantics;
4
+ }
5
+ export declare const setListContext: (context: ListContext) => ListContext;
6
+ export declare const getListContext: () => ListContext | undefined;
7
+ export {};
package/dist/components/list/list.context.js ADDED
@@ -0,0 +1,4 @@
1
+ import { getContext, setContext } from 'svelte';
2
+ const LIST_CONTEXT = Symbol('kit-list');
3
+ export const setListContext = (context) => setContext(LIST_CONTEXT, context);
4
+ export const getListContext = () => getContext(LIST_CONTEXT);
package/dist/components/list/list.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { useComponentAttrs } from '../../utils';
3
+ import { setListContext } from './list.context.js';
3
4
  import type { ListProps } from './list.types.js';
4
5
 
5
6
  let {
@@ -22,6 +23,16 @@
22
23
  let attrs = $derived(
23
24
  useComponentAttrs('kit-list', { className, sClass, styleAttr, sStyle, color }, rest)
24
25
  );
26
+ let role = $derived(nav ? 'navigation' : is === 'ul' ? undefined : 'list');
27
+ let customRole = $derived(attrs.rest.role as string | undefined);
28
+
29
+ setListContext({
30
+ get item() {
31
+ if (customRole) return customRole === 'list' ? 'listitem' : undefined;
32
+ if (is === 'ul') return 'li';
33
+ return role === 'list' ? 'listitem' : undefined;
34
+ }
35
+ });
25
36
  </script>
26
37
 
27
38
  <svelte:element
@@ -34,7 +45,7 @@
34
45
  data-density={density}
35
46
  data-rounded={rounded}
36
47
  data-nav={nav}
37
- role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
48
+ {role}
38
49
  {...attrs.rest}
39
50
  >
40
51
  {@render children?.()}
@@ -61,15 +72,18 @@
61
72
  .kit-list[data-nav=true] :global(.kit-list-item) {
62
73
  border-radius: var(--kit-list-item-radius);
63
74
  }
64
- .kit-list:not([data-nav=true]) :global(.kit-list-item:first-child) {
75
+ .kit-list:not([data-nav=true]) :global(.kit-list-item:first-child:not(.kit-list-item-wrapper > *)),
76
+ .kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:first-child > .kit-list-item) {
65
77
  border-start-start-radius: var(--kit-list-item-radius);
66
78
  border-start-end-radius: var(--kit-list-item-radius);
67
79
  }
68
- .kit-list:not([data-nav=true]) :global(.kit-list-item:last-child) {
80
+ .kit-list:not([data-nav=true]) :global(.kit-list-item:last-child:not(.kit-list-item-wrapper > *)),
81
+ .kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:last-child > .kit-list-item) {
69
82
  border-end-start-radius: var(--kit-list-item-radius);
70
83
  border-end-end-radius: var(--kit-list-item-radius);
71
84
  }
72
- .kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)) {
85
+ .kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)),
86
+ .kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:not(:first-child, :last-child) > .kit-list-item) {
73
87
  --kit-list-item-radius: 0;
74
88
  }
75
89
  .kit-list:is([data-variant=outline], [data-variant=surface]) :global(.kit-list-item::before) {
package/dist/components/list/modules/list-item.svelte CHANGED
@@ -1,11 +1,12 @@
1
1
  <script lang="ts">
2
2
  import { ripple } from '../../../animations';
3
3
  import { useComponentAttrs, useIsInteractive } from '../../../utils';
4
+ import { getListContext } from '../list.context.js';
4
5
  import type { ListItemProps } from '../list.types.js';
5
6
 
6
7
  let {
7
8
  ref = $bindable(),
8
- is = 'div',
9
+ is,
9
10
  children = undefined,
10
11
  class: className,
11
12
  style: styleAttr,
@@ -29,42 +30,67 @@
29
30
  rest
30
31
  )
31
32
  );
33
+ const list = getListContext();
34
+
32
35
  let tag = $derived(
33
- href ? 'a' : is === 'div' && typeof attrs.rest.onclick === 'function' ? 'button' : is
36
+ href
37
+ ? 'a'
38
+ : (is ?? 'div') === 'div' && typeof attrs.rest.onclick === 'function'
39
+ ? 'button'
40
+ : (is ?? (list?.item === 'li' ? 'li' : 'div'))
34
41
  );
35
42
  let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
43
+ let wrapperTag = $derived.by(() => {
44
+ if (list?.item === 'li') return tag === 'li' ? undefined : 'li';
45
+ if (list?.item === 'listitem') return tag === 'a' || tag === 'button' ? 'div' : undefined;
46
+ return undefined;
47
+ });
36
48
  </script>
37
49
 
38
- <svelte:element
39
- this={tag}
40
- bind:this={ref}
41
- class={attrs.class}
42
- style={attrs.style}
43
- href={href && !disabled ? href : undefined}
44
- type={tag === 'button' ? 'button' : undefined}
45
- disabled={tag === 'button' ? disabled : undefined}
46
- tabindex={href && disabled ? -1 : undefined}
47
- role={tag === 'div' ? 'listitem' : undefined}
48
- data-active={active}
49
- data-disabled={disabled}
50
- data-interactive={isInteractive}
51
- aria-disabled={disabled || undefined}
52
- use:ripple={{
53
- component: 'list-item',
54
- disabled: noRipple || disabled || !isInteractive
55
- }}
56
- {...attrs.rest}
57
- >
58
- {#if prepend}
59
- <span class="kit-list-item__prepend">{@render prepend()}</span>
60
- {/if}
61
-
62
- <span class="kit-list-item__content">{@render children?.()}</span>
63
-
64
- {#if append}
65
- <span class="kit-list-item__append">{@render append()}</span>
66
- {/if}
67
- </svelte:element>
50
+ {#snippet item()}
51
+ <svelte:element
52
+ this={tag}
53
+ bind:this={ref}
54
+ class={attrs.class}
55
+ style={attrs.style}
56
+ href={href && !disabled ? href : undefined}
57
+ type={tag === 'button' ? 'button' : undefined}
58
+ disabled={tag === 'button' ? disabled : undefined}
59
+ tabindex={href && disabled ? -1 : undefined}
60
+ role={tag === 'div' && list?.item === 'listitem' ? 'listitem' : undefined}
61
+ data-active={active}
62
+ data-disabled={disabled}
63
+ data-interactive={isInteractive}
64
+ aria-disabled={disabled || undefined}
65
+ use:ripple={{
66
+ component: 'list-item',
67
+ disabled: noRipple || disabled || !isInteractive
68
+ }}
69
+ {...attrs.rest}
70
+ >
71
+ {#if prepend}
72
+ <span class="kit-list-item__prepend">{@render prepend()}</span>
73
+ {/if}
74
+
75
+ <span class="kit-list-item__content">{@render children?.()}</span>
76
+
77
+ {#if append}
78
+ <span class="kit-list-item__append">{@render append()}</span>
79
+ {/if}
80
+ </svelte:element>
81
+ {/snippet}
82
+
83
+ {#if wrapperTag}
84
+ <svelte:element
85
+ this={wrapperTag}
86
+ class="kit-list-item-wrapper"
87
+ role={wrapperTag === 'div' ? 'listitem' : undefined}
88
+ >
89
+ {@render item()}
90
+ </svelte:element>
91
+ {:else}
92
+ {@render item()}
93
+ {/if}
68
94
 
69
95
  <style>:where(.kit-list-item) {
70
96
  --kit-list-item-color: initial;
@@ -96,6 +122,10 @@
96
122
  --kit-list-item-on-color: var(--kit-list-on-color);
97
123
  }
98
124
 
125
+ .kit-list-item-wrapper {
126
+ display: contents;
127
+ }
128
+
99
129
  .kit-list-item {
100
130
  position: relative;
101
131
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lapikit",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"