lapikit 0.8.0 → 0.8.2

package/dist/components/field/field.svelte

@@ -214,7 +214,7 @@
 .kit-field__label {
   grid-area: label;
   display: block;
-  padding-block-end: 0.25rem;
+  padding-block-end: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.2;
 }
@@ -319,6 +319,7 @@
   gap: var(--kit-field-gap);
   align-items: start;
   min-height: 0.875rem;
+  padding-block-start: 0.5rem;
   padding-inline: var(--kit-field-padding);
   font-size: 0.75rem;
   line-height: 1.2;

package/dist/components/list/list.context.d.ts

@@ -0,0 +1,7 @@
+export type ListItemSemantics = 'li' | 'listitem' | undefined;
+interface ListContext {
+    readonly item: ListItemSemantics;
+}
+export declare const setListContext: (context: ListContext) => ListContext;
+export declare const getListContext: () => ListContext | undefined;
+export {};

package/dist/components/list/list.context.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const LIST_CONTEXT = Symbol('kit-list');
+export const setListContext = (context) => setContext(LIST_CONTEXT, context);
+export const getListContext = () => getContext(LIST_CONTEXT);

package/dist/components/list/list.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useComponentAttrs } from '../../utils';
+	import { setListContext } from './list.context.js';
 	import type { ListProps } from './list.types.js';
 
 	let {
@@ -22,6 +23,16 @@
 	let attrs = $derived(
 		useComponentAttrs('kit-list', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
+	let role = $derived(nav ? 'navigation' : is === 'ul' ? undefined : 'list');
+	let customRole = $derived(attrs.rest.role as string | undefined);
+
+	setListContext({
+		get item() {
+			if (customRole) return customRole === 'list' ? 'listitem' : undefined;
+			if (is === 'ul') return 'li';
+			return role === 'list' ? 'listitem' : undefined;
+		}
+	});
 </script>
 
 <svelte:element
@@ -34,7 +45,7 @@
 	data-density={density}
 	data-rounded={rounded}
 	data-nav={nav}
-	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
+	{role}
 	{...attrs.rest}
 >
 	{@render children?.()}
@@ -61,15 +72,18 @@
 .kit-list[data-nav=true] :global(.kit-list-item) {
   border-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:first-child) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:first-child:not(.kit-list-item-wrapper > *)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:first-child > .kit-list-item) {
   border-start-start-radius: var(--kit-list-item-radius);
   border-start-end-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:last-child) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:last-child:not(.kit-list-item-wrapper > *)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:last-child > .kit-list-item) {
   border-end-start-radius: var(--kit-list-item-radius);
   border-end-end-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:not(:first-child, :last-child) > .kit-list-item) {
   --kit-list-item-radius: 0;
 }
 .kit-list:is([data-variant=outline], [data-variant=surface]) :global(.kit-list-item::before) {

package/dist/components/list/modules/list-item.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { ripple } from '../../../animations';
 	import { useComponentAttrs, useIsInteractive } from '../../../utils';
+	import { getListContext } from '../list.context.js';
 	import type { ListItemProps } from '../list.types.js';
 
 	let {
 		ref = $bindable(),
-		is = 'div',
+		is,
 		children = undefined,
 		class: className,
 		style: styleAttr,
@@ -29,42 +30,67 @@
 			rest
 		)
 	);
+	const list = getListContext();
+
 	let tag = $derived(
-		href ? 'a' : is === 'div' && typeof attrs.rest.onclick === 'function' ? 'button' : is
+		href
+			? 'a'
+			: (is ?? 'div') === 'div' && typeof attrs.rest.onclick === 'function'
+				? 'button'
+				: (is ?? (list?.item === 'li' ? 'li' : 'div'))
 	);
 	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
+	let wrapperTag = $derived.by(() => {
+		if (list?.item === 'li') return tag === 'li' ? undefined : 'li';
+		if (list?.item === 'listitem') return tag === 'a' || tag === 'button' ? 'div' : undefined;
+		return undefined;
+	});
 </script>
 
-<svelte:element
-	this={tag}
-	bind:this={ref}
-	class={attrs.class}
-	style={attrs.style}
-	href={href && !disabled ? href : undefined}
-	type={tag === 'button' ? 'button' : undefined}
-	disabled={tag === 'button' ? disabled : undefined}
-	tabindex={href && disabled ? -1 : undefined}
-	role={tag === 'div' ? 'listitem' : undefined}
-	data-active={active}
-	data-disabled={disabled}
-	data-interactive={isInteractive}
-	aria-disabled={disabled || undefined}
-	use:ripple={{
-		component: 'list-item',
-		disabled: noRipple || disabled || !isInteractive
-	}}
-	{...attrs.rest}
->
-	{#if prepend}
-		<span class="kit-list-item__prepend">{@render prepend()}</span>
-	{/if}
-
-	<span class="kit-list-item__content">{@render children?.()}</span>
-
-	{#if append}
-		<span class="kit-list-item__append">{@render append()}</span>
-	{/if}
-</svelte:element>
+{#snippet item()}
+	<svelte:element
+		this={tag}
+		bind:this={ref}
+		class={attrs.class}
+		style={attrs.style}
+		href={href && !disabled ? href : undefined}
+		type={tag === 'button' ? 'button' : undefined}
+		disabled={tag === 'button' ? disabled : undefined}
+		tabindex={href && disabled ? -1 : undefined}
+		role={tag === 'div' && list?.item === 'listitem' ? 'listitem' : undefined}
+		data-active={active}
+		data-disabled={disabled}
+		data-interactive={isInteractive}
+		aria-disabled={disabled || undefined}
+		use:ripple={{
+			component: 'list-item',
+			disabled: noRipple || disabled || !isInteractive
+		}}
+		{...attrs.rest}
+	>
+		{#if prepend}
+			<span class="kit-list-item__prepend">{@render prepend()}</span>
+		{/if}
+
+		<span class="kit-list-item__content">{@render children?.()}</span>
+
+		{#if append}
+			<span class="kit-list-item__append">{@render append()}</span>
+		{/if}
+	</svelte:element>
+{/snippet}
+
+{#if wrapperTag}
+	<svelte:element
+		this={wrapperTag}
+		class="kit-list-item-wrapper"
+		role={wrapperTag === 'div' ? 'listitem' : undefined}
+	>
+		{@render item()}
+	</svelte:element>
+{:else}
+	{@render item()}
+{/if}
 
 <style>:where(.kit-list-item) {
   --kit-list-item-color: initial;
@@ -96,6 +122,10 @@
   --kit-list-item-on-color: var(--kit-list-on-color);
 }
 
+.kit-list-item-wrapper {
+  display: contents;
+}
+
 .kit-list-item {
   position: relative;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"