lapikit 0.7.2 → 0.7.4

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { Component, DensityType, RoundedType, SizeType } from '../../@types';
-export type ListVariant = 'filled' | 'outline' | 'text';
+import type { ColorProps, Component, RoundedType, SizeType } from '../../@types';
+export type ListVariant = 'filled' | 'tonal' | 'outline' | 'surface' | 'text' | 'plain';
 export type ListElement = 'div' | 'nav' | 'ul';
 export type ListItemElement = 'div' | 'a' | 'button' | 'li';
 export interface ListProps extends Component {
@@ -8,11 +8,10 @@ export interface ListProps extends Component {
     is?: ListElement;
     size?: SizeType;
     variant?: ListVariant;
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType | 'full';
     nav?: boolean;
-    color?: string;
-    background?: string;
+    color?: string | false;
 }
 export interface ListItemProps extends Component {
     ref?: HTMLElement | null;
@@ -20,8 +19,7 @@ export interface ListItemProps extends Component {
     href?: string;
     append?: Snippet;
     prepend?: Snippet;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
     interactive?: boolean;
     active?: boolean;
     disabled?: boolean;

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

@@ -1,191 +1,178 @@
 <script lang="ts">
 	import { ripple } from '../../../animations';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useIsInteractive, useStyles } from '../../../utils';
+	import { useComponentAttrs, useIsInteractive } from '../../../utils';
 	import type { ListItemProps } from '../list.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		append = undefined,
 		prepend = undefined,
 		href = undefined,
 		color = undefined,
-		background = undefined,
-		interactive = false,
+		interactive,
 		active = false,
 		disabled = false,
 		noRipple = false,
 		...rest
 	}: ListItemProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-list-item',
+			{ className, sClass, styleAttr, sStyle, color, active },
+			rest
+		)
 	);
-
-	let tag = $derived(href ? 'a' : is === 'div' && restProps.onclick ? 'button' : is);
-	// let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
-	let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-list-item',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-item-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-list-item-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let tag = $derived(
+		href ? 'a' : is === 'div' && typeof attrs.rest.onclick === 'function' ? 'button' : is
 	);
+	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	href={href && !disabled ? href : undefined}
-	data-active={active}
-	data-disabled={disabled}
-	aria-disabled={disabled || undefined}
+	type={tag === 'button' ? 'button' : undefined}
 	disabled={tag === 'button' ? disabled : undefined}
 	tabindex={href && disabled ? -1 : undefined}
 	role={tag === 'div' ? 'listitem' : undefined}
-	data-append={append && true}
-	data-prepend={prepend && true}
+	data-active={active}
+	data-disabled={disabled}
 	data-interactive={isInteractive}
+	aria-disabled={disabled || undefined}
 	use:ripple={{
 		component: 'list-item',
-		disabled: noRipple || !isInteractive
+		disabled: noRipple || disabled || !isInteractive
 	}}
-	{...restProps}
+	{...attrs.rest}
 >
 	{#if prepend}
-		<span class="kit-list-item__prepend">
-			{@render prepend?.()}
-		</span>
+		<span class="kit-list-item__prepend">{@render prepend()}</span>
 	{/if}
 
-	<span class="kit-list-item__content">
-		{@render children?.()}
-	</span>
+	<span class="kit-list-item__content">{@render children?.()}</span>
 
 	{#if append}
-		<span class="kit-list-item__append">
-			{@render append?.()}
-		</span>
+		<span class="kit-list-item__append">{@render append()}</span>
 	{/if}
 </svelte:element>
 
-<style>
-	.kit-list-item {
-		width: 100%;
-		min-height: calc(var(--kit-list-item-h) + var(--kit-list-density-offset) / 2);
-		position: relative;
-		display: grid;
-		grid-template-columns: 1fr;
-		align-items: center;
-		gap: var(--kit-list-item-gap);
-		/* border-radius: var(--kit-list-item-radius); */
-		border: 0;
-		background: var(--kit-list-item-bg);
-		color: var(--kit-list-item-fg);
-		text-decoration: none;
-		font-size: var(--kit-list-item-font);
-	}
-
-	.kit-list-item .kit-list-item__prepend,
-	.kit-list-item:not([data-prepend='true']) .kit-list-item__content {
-		margin-left: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
-	}
-	.kit-list-item .kit-list-item__append,
-	.kit-list-item:not([data-append='true']) .kit-list-item__content {
-		margin-right: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
-	}
-	.kit-list-item:not([data-prepend='true']):not([data-append='true']) .kit-list-item__content {
-		margin-left: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
-		margin-right: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
-	}
-
-	.kit-list-item[data-prepend='true']:not([data-append='true']) {
-		grid-template-columns: auto minmax(0, 1fr);
-	}
-	.kit-list-item[data-append='true']:not([data-prepend='true']) {
-		grid-template-columns: minmax(0, 1fr) auto;
-	}
-	.kit-list-item[data-append='true'][data-prepend='true'] {
-		grid-template-columns: auto minmax(0, 1fr) auto;
-	}
-
-	a.kit-list-item {
-		text-decoration: none;
-	}
-
-	button.kit-list-item {
-		appearance: none;
-		border: 0;
-		font: inherit;
-		text-align: inherit;
-	}
-
-	.kit-list-item[data-interactive='true'][data-disabled='false'] {
-		cursor: pointer;
-	}
-
-	.kit-list-item[data-interactive='true'][data-disabled='false']:hover {
-		background: var(--kit-list-item-hover-bg);
-	}
-	.kit-list-item[data-active='true'][data-disabled='false'] {
-		translate: 0 0;
-		background: var(--kit-list-item-active-bg);
-	}
-	.kit-list-item[data-interactive='true'][data-disabled='false']:active {
-		translate: 0 0;
-		background: var(--kit-list-item-active-bg);
-	}
-
-	.kit-list-item[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-list-item[data-disabled='true'] {
-		opacity: var(--kit-disabled-opacity, 0.55);
-		pointer-events: none;
-	}
-
-	.kit-list-item__prepend,
-	.kit-list-item__append,
-	.kit-list-item__content {
-		display: inline-flex;
-		align-items: center;
-		min-width: 0;
-	}
-
-	.kit-list-item__content {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-</style>
+<style>:where(.kit-list-item) {
+  --kit-list-item-color: initial;
+  --kit-list-item-on-color: initial;
+  --kit-list-item-active-fg: initial;
+  --kit-list-item-active-shade: initial;
+  --kit-list-item-hover-fg: initial;
+  --kit-list-item-pressed-fg: initial;
+  --kit-list-item-bg: var(--kit-list-item-color, var(--kit-color-surface-2));
+  --kit-list-item-fg: var(--kit-list-item-on-color, var(--kit-list-item-contrast, var(--kit-color-text)));
+  --kit-list-item-ink: var(--kit-list-item-color, var(--kit-color-text));
+  --kit-list-item-hover: color-mix(in oklab, var(--kit-list-item-bg), var(--kit-list-item-fg) 8%);
+  --kit-list-item-pressed: color-mix(in oklab, var(--kit-list-item-bg), var(--kit-list-item-fg) 14%);
+  --kit-list-item-soft: color-mix(in oklab, var(--kit-list-item-bg) 16%, transparent);
+  --kit-list-item-border: color-mix(in oklab, var(--kit-list-item-bg), var(--kit-list-item-fg) 20%);
+  --kit-list-item-active: color-mix(
+  	in oklab,
+  	var(--kit-list-item-color),
+  	var(--kit-list-item-fg) var(--kit-list-item-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-list-item) {
+    --kit-list-item-contrast: color(from var(--kit-list-item-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+:where(.kit-list-item) {
+  --kit-list-item-color: var(--kit-list-color);
+  --kit-list-item-on-color: var(--kit-list-on-color);
+}
+
+.kit-list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--kit-list-item-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--kit-list-item-h) + var(--kit-list-density-offset) / 2);
+  padding-inline: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
+  border: 0;
+  background-color: var(--kit-list-item-bg);
+  color: var(--kit-list-item-fg);
+  font-size: var(--kit-list-item-font);
+  text-decoration: none;
+  transition-property: background-color, color;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-list-item {
+    transition: none;
+  }
+}
+
+a.kit-list-item {
+  text-decoration: none;
+}
+
+button.kit-list-item {
+  appearance: none;
+  font: inherit;
+  text-align: inherit;
+}
+
+.kit-list-item__prepend,
+.kit-list-item__append,
+.kit-list-item__content {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  min-width: 0;
+}
+
+.kit-list-item__content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kit-list-item[data-active=true] {
+  --kit-list-item-bg: var(--kit-list-item-active, var(--kit-color-accent));
+  --kit-list-item-fg: var(
+  	--kit-list-item-active-fg,
+  	var(--kit-list-item-on-color, var(--kit-list-item-contrast, var(--kit-color-on-accent)))
+  );
+}
+
+.kit-list-item[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-list-item[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-list-item-hover);
+  color: var(--kit-list-item-hover-fg, var(--kit-list-item-fg));
+}
+.kit-list-item[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-list-item-pressed);
+  color: var(--kit-list-item-pressed-fg, var(--kit-list-item-fg));
+}
+
+.kit-list-item:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-list-item[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
+}</style>