lapikit 0.6.1 → 0.6.3

package/dist/components/list/list.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
 	import { makeComponentProps } from '../../html-mapped';
 	import { useClassName, useStyles } from '../../utils';
-	import type { ListDensity, ListProps, ListVariant } from './list.types.js';
-
-	function resolveVariant(value: ListVariant | undefined): ListVariant {
-		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
-	}
-
-	function resolveDensity(value: ListDensity | undefined): ListDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
+	import type { ListProps } from './list.types.js';
 
 	let {
 		ref = $bindable(),
@@ -26,8 +16,8 @@
 		density = 'default',
 		rounded = 'md',
 		nav = false,
-		color = undefined,
-		background = undefined,
+		color,
+		background,
 		...rest
 	}: ListProps = $props();
 
@@ -52,24 +42,7 @@
 		})
 	);
 
-	let safeVariant = $derived(resolveVariant(variant));
-	let safeDensity = $derived(resolveDensity(density));
-	let safeSize = $derived(
-		size === 'default'
-			? 'md'
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-fg:${color}` : '',
-			background ? `--kit-list-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -77,12 +50,14 @@
 	bind:this={ref}
 	class={componentClass}
 	style={mergedStyle}
-	data-size={safeSize}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	data-size={size}
+	data-variant={variant}
+	data-density={density}
 	data-rounded={rounded}
 	data-nav={nav}
 	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
+	style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
+	style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{@render children?.()}
@@ -90,87 +65,145 @@
 
 <style>
 	.kit-list {
-		--kit-list-bg: var(--kit-surface-1);
-		--kit-list-fg: var(--kit-fg);
-		--kit-list-bd: var(--kit-border);
-		--kit-list-radius: 10px;
-		--kit-list-item-h-xs: 2.125rem;
-		--kit-list-item-h-sm: 2.375rem;
-		--kit-list-item-h-md: 2.75rem;
-		--kit-list-item-h-lg: 3.125rem;
-		--kit-list-item-h-xl: 3.5rem;
-		--kit-list-item-px-xs: 0.625rem;
-		--kit-list-item-px-sm: 0.75rem;
-		--kit-list-item-px-md: 0.875rem;
-		--kit-list-item-px-lg: 1rem;
-		--kit-list-item-px-xl: 1.125rem;
-		--kit-list-item-gap-xs: 0.5rem;
-		--kit-list-item-gap-sm: 0.5rem;
-		--kit-list-item-gap-md: 0.625rem;
-		--kit-list-item-gap-lg: 0.75rem;
-		--kit-list-item-gap-xl: 0.875rem;
-		--kit-list-item-font-xs: 0.75rem;
-		--kit-list-item-font-sm: 0.875rem;
-		--kit-list-item-font-md: 0.9375rem;
-		--kit-list-item-font-lg: 1rem;
-		--kit-list-item-font-xl: 1.0625rem;
-		--kit-list-item-h: var(--kit-list-item-h-md);
-		--kit-list-item-px: var(--kit-list-item-px-md);
-		--kit-list-item-gap: var(--kit-list-item-gap-md);
-		--kit-list-item-font: var(--kit-list-item-font-md);
-		--kit-list-density-offset: 0rem;
-
+		width: 100%;
 		display: flex;
+		position: relative;
 		flex-direction: column;
-		width: 100%;
-		padding: 0.25rem;
-		gap: 0.125rem;
-		color: var(--kit-list-fg);
-		background: transparent;
-		border-radius: var(--kit-list-radius);
+		gap: 0;
+		border: 0;
+		box-sizing: border-box;
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
 	}
 
-	.kit-list[data-nav='true'] {
-		padding: 0.5rem;
+	.kit-list[data-variant='text']
+		:global(.kit-list-item[data-interactive='true'][data-active='true'][data-disabled='false']),
+	.kit-list[data-variant='text']
+		:global(.kit-list-item[data-interactive='true'][data-disabled='false']:active) {
+		background: var(--kit-list-item-active-bg);
 	}
 
+	/** 
+	 * density
+	 * @link https://lapikit.dev/docs/components/list#density 
+	 */
+	.kit-list[data-density='none'] {
+		--kit-list-density-scale: 0;
+		--kit-list-density-h-scale: 0;
+	}
 	.kit-list[data-density='compact'] {
-		--kit-list-density-offset: -0.25rem;
+		--kit-list-density-scale: 0.9;
+		--kit-list-density-h-scale: 0.92;
+	}
+	.kit-list[data-density='default'] {
+		--kit-list-density-scale: 1;
+		--kit-list-density-h-scale: 1;
 	}
-
 	.kit-list[data-density='comfortable'] {
-		--kit-list-density-offset: 0.25rem;
+		--kit-list-density-scale: 1.1;
+		--kit-list-density-h-scale: 1.15;
 	}
 
-	.kit-list[data-rounded='0'] {
-		--kit-list-radius: 0;
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-list[data-rounded='0'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-none);
 	}
-
-	.kit-list[data-rounded='xs'] {
-		--kit-list-radius: 2px;
+	.kit-list[data-rounded='xs'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-xs);
 	}
-
-	.kit-list[data-rounded='sm'] {
-		--kit-list-radius: 6px;
+	.kit-list[data-rounded='sm'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-sm);
+	}
+	.kit-list[data-rounded='md'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-md);
+	}
+	.kit-list[data-rounded='lg'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-lg);
 	}
+	.kit-list[data-rounded='xl'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-xl);
+	}
+	.kit-list[data-rounded='full'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-full);
+	}
+
+	/** 
+	 * variant
+	 * @link https://lapikit.dev/docs/components/list#variants
+	 */
+	.kit-list[data-variant='filled'] :global(.kit-list-item) {
+		--kit-list-item-bg: var(--kit-color-surface-2);
+		--kit-list-item-fg: var(--kit-color-text);
 
-	.kit-list[data-rounded='md'] {
-		--kit-list-radius: 10px;
+		--kit-list-item-hover-bg: color-mix(in oklab, var(---kit-list-item-bg), black 10%);
+		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-bg), black 16%);
 	}
+	.kit-list[data-variant='outline'] :global(.kit-list-item) {
+		--kit-list-item-bg: transparent;
+		--kit-list-item-fg: var(--kit-color-text);
+		--kit-list-item-bd: var(--kit-list-item-fg);
 
-	.kit-list[data-rounded='lg'] {
-		--kit-list-radius: 16px;
+		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
+		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
 	}
+	.kit-list[data-variant='text'] :global(.kit-list-item) {
+		--kit-list-item-bg: transparent;
+		--kit-list-item-fg: var(--kit-color-text);
 
-	.kit-list[data-rounded='xl'] {
-		--kit-list-radius: 9999px;
+		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
+		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
+	}
+	.kit-list[data-variant='text'] :global(.kit-list-item .outline),
+	.kit-list[data-variant='filled'] :global(.kit-list-item .outline) {
+		display: none;
 	}
 
-	.kit-list[data-variant='filled'] {
-		background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
+	/** 
+	 * nav
+	 * @link https://lapikit.dev/docs/components/list#nav 
+	 */
+	.kit-list[data-nav='true'] {
+		padding: 0.5rem;
 	}
 
-	.kit-list[data-variant='outline'] {
-		border: 1px solid var(--kit-list-bd);
+	/**
+	* size
+	* @link nothing...
+	*/
+	.kit-list[data-size='xs'] :global(.kit-list-item) {
+		--kit-list-item-h: 28px;
+		--kit-list-item-px: 10px;
+		--kit-list-item-gap: 4px;
+		--kit-list-item-font: 0.75rem;
+	}
+	.kit-list[data-size='sm'] :global(.kit-list-item) {
+		--kit-list-item-h: 32px;
+		--kit-list-item-px: 12px;
+		--kit-list-item-gap: 6px;
+		--kit-list-item-font: 0.875rem;
+	}
+	.kit-list[data-size='md'] :global(.kit-list-item) {
+		--kit-list-item-h: 40px;
+		--kit-list-item-px: 16px;
+		--kit-list-item-gap: 8px;
+		--kit-list-item-font: 1rem;
+	}
+	.kit-list[data-size='lg'] :global(.kit-list-item) {
+		--kit-list-item-h: 48px;
+		--kit-list-item-px: 20px;
+		--kit-list-item-gap: 10px;
+		--kit-list-item-font: 1.125rem;
+	}
+	.kit-list[data-size='xl'] :global(.kit-list-item) {
+		--kit-list-item-h: 56px;
+		--kit-list-item-px: 24px;
+		--kit-list-item-gap: 12px;
+		--kit-list-item-font: 1.25rem;
 	}
 </style>

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

@@ -1,7 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { Component, RoundedType, SizeType } from '../../@types';
+import type { Component, DensityType, RoundedType, SizeType } from '../../@types';
 export type ListVariant = 'filled' | 'outline' | 'text';
-export type ListDensity = 'compact' | 'comfortable' | 'default';
 export type ListElement = 'div' | 'nav' | 'ul';
 export type ListItemElement = 'div' | 'a' | 'button' | 'li';
 export interface ListProps extends Component {
@@ -9,8 +8,8 @@ export interface ListProps extends Component {
     is?: ListElement;
     size?: SizeType;
     variant?: ListVariant;
-    density?: ListDensity;
-    rounded?: RoundedType;
+    density?: DensityType;
+    rounded?: RoundedType | 'full';
     nav?: boolean;
     color?: string;
     background?: string;
@@ -23,7 +22,7 @@ export interface ListItemProps extends Component {
     prepend?: Snippet;
     color?: string;
     background?: string;
-    rounded?: RoundedType;
+    interactive?: boolean;
     active?: boolean;
     disabled?: boolean;
     noRipple?: boolean;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ripple } from '../../../animations';
 	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useClassName, useIsInteractive, useStyles } from '../../../utils';
 	import type { ListItemProps } from '../list.types.js';
 
 	let {
@@ -17,7 +17,7 @@
 		href = undefined,
 		color = undefined,
 		background = undefined,
-		rounded = 'sm',
+		interactive = false,
 		active = false,
 		disabled = false,
 		noRipple = false,
@@ -29,7 +29,8 @@
 	);
 
 	let tag = $derived(href ? 'a' : is === 'div' && restProps.onclick ? 'button' : is);
-	let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
+	// let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
+	let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
 
 	let componentClass = $derived(
 		useClassName({
@@ -48,15 +49,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-item-fg:${color}` : '',
-			background ? `--kit-list-item-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -67,17 +60,22 @@
 	href={href && !disabled ? href : undefined}
 	data-active={active}
 	data-disabled={disabled}
-	data-rounded={rounded}
 	aria-disabled={disabled || 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-interactive={isInteractive}
+	style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
+	style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
 	use:ripple={{
 		component: 'list-item',
 		disabled: noRipple || !isInteractive
 	}}
 	{...restProps}
 >
+	<span class="outline"></span>
 	{#if prepend}
 		<span class="kit-list-item__prepend">
 			{@render prepend?.()}
@@ -97,104 +95,144 @@
 
 <style>
 	.kit-list-item {
-		--kit-list-item-bg: transparent;
-		--kit-list-item-fg: inherit;
-		--kit-list-item-radius: 8px;
-
+		width: 100%;
+		min-height: calc(var(--kit-list-item-h) * var(--kit-list-density-h-scale));
 		position: relative;
 		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-columns: 1fr;
 		align-items: center;
-		gap: var(--kit-list-item-gap, 0.625rem);
-		min-height: calc(var(--kit-list-item-h, 2.75rem) + var(--kit-list-density-offset, 0rem));
-		padding-inline: var(--kit-list-item-px, 0.875rem);
-		border: 0;
+		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-px) * var(--kit-list-density-scale));
+	}
+	.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-px) * var(--kit-list-density-scale));
+	}
+	.kit-list-item:not([data-prepend='true']):not([data-append='true']) .kit-list-item__content {
+		margin-left: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
+		margin-right: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
+	}
+
+	.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;
-		font-size: var(--kit-list-item-font, 0.9375rem);
-		text-align: left;
+		text-align: inherit;
+	}
+
+	.kit-list-item[data-interactive='true'][data-disabled='false'] {
+		cursor: pointer;
+	}
+
+	.kit-list-item[data-interactive='true'][data-disabled='false']:hover {
+		translate: 0 -1px;
+		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);
 	}
 
-	:global(.kit-list[data-size='xs']) .kit-list-item {
-		--kit-list-item-h: var(--kit-list-item-h-xs, 2.125rem);
-		--kit-list-item-px: var(--kit-list-item-px-xs, 0.625rem);
-		--kit-list-item-gap: var(--kit-list-item-gap-xs, 0.5rem);
-		--kit-list-item-font: var(--kit-list-item-font-xs, 0.75rem);
+	.kit-list-item[data-interactive='true'][data-disabled='false']:focus-visible {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
 	}
 
-	:global(.kit-list[data-size='sm']) .kit-list-item {
-		--kit-list-item-h: var(--kit-list-item-h-sm, 2.375rem);
-		--kit-list-item-px: var(--kit-list-item-px-sm, 0.75rem);
-		--kit-list-item-gap: var(--kit-list-item-gap-sm, 0.5rem);
-		--kit-list-item-font: var(--kit-list-item-font-sm, 0.875rem);
+	.kit-list-item[data-disabled='true'] {
+		opacity: var(--kit-disabled-opacity, 0.55);
+		pointer-events: none;
 	}
 
-	:global(.kit-list[data-size='md']) .kit-list-item {
-		--kit-list-item-h: var(--kit-list-item-h-md, 2.75rem);
-		--kit-list-item-px: var(--kit-list-item-px-md, 0.875rem);
-		--kit-list-item-gap: var(--kit-list-item-gap-md, 0.625rem);
-		--kit-list-item-font: var(--kit-list-item-font-md, 0.9375rem);
+	.kit-list-item__prepend,
+	.kit-list-item__append,
+	.kit-list-item__content {
+		display: inline-flex;
+		align-items: center;
+		min-width: 0;
 	}
 
-	:global(.kit-list[data-size='lg']) .kit-list-item {
-		--kit-list-item-h: var(--kit-list-item-h-lg, 3.125rem);
-		--kit-list-item-px: var(--kit-list-item-px-lg, 1rem);
-		--kit-list-item-gap: var(--kit-list-item-gap-lg, 0.75rem);
-		--kit-list-item-font: var(--kit-list-item-font-lg, 1rem);
+	.kit-list-item__content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	:global(.kit-list[data-size='xl']) .kit-list-item {
-		--kit-list-item-h: var(--kit-list-item-h-xl, 3.5rem);
-		--kit-list-item-px: var(--kit-list-item-px-xl, 1.125rem);
-		--kit-list-item-gap: var(--kit-list-item-gap-xl, 0.875rem);
-		--kit-list-item-font: var(--kit-list-item-font-xl, 1.0625rem);
+	.kit-list-item .outline {
+		--outline-color: var(--kit-list-item-bd);
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-list-item[data-rounded='0'] {
-		--kit-list-item-radius: 0;
+		--kit-list-item-radius: var(--kit-shape-none);
 	}
-
 	.kit-list-item[data-rounded='xs'] {
-		--kit-list-item-radius: 2px;
+		--kit-list-item-radius: var(--kit-shape-xs);
 	}
-
 	.kit-list-item[data-rounded='sm'] {
-		--kit-list-item-radius: 8px;
+		--kit-list-item-radius: var(--kit-shape-sm);
 	}
-
 	.kit-list-item[data-rounded='md'] {
-		--kit-list-item-radius: 12px;
+		--kit-list-item-radius: var(--kit-shape-md);
 	}
-
 	.kit-list-item[data-rounded='lg'] {
-		--kit-list-item-radius: 16px;
+		--kit-list-item-radius: var(--kit-shape-lg);
 	}
-
 	.kit-list-item[data-rounded='xl'] {
-		--kit-list-item-radius: 9999px;
+		--kit-list-item-radius: var(--kit-shape-xl);
+	}
+	.kit-list-item[data-rounded='full'] {
+		--kit-list-item-radius: var(--kit-shape-full);
 	}
 
-	:global(.kit-list[data-variant='filled']) .kit-list-item {
+	/* :global(.kit-list[data-variant='filled']) .kit-list-item {
 		background: var(--kit-list-item-bg, transparent);
 	}
 
 	:global(.kit-list[data-variant='filled']) .kit-list-item[data-active='true'] {
 		background: color-mix(in oklab, currentColor 12%, transparent);
-	}
+	} */
 
-	:global(.kit-list[data-variant='outline']) .kit-list-item::before {
+	/* :global(.kit-list[data-variant='outline']) .kit-list-item::before {
 		content: '';
 		position: absolute;
 		inset: 0;
 		border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
 		border-radius: inherit;
 		pointer-events: none;
-	}
+	} */
 
-	.kit-list-item[data-active='true'] {
+	/* .kit-list-item[data-active='true'] {
 		background: color-mix(in oklab, currentColor 12%, transparent);
 	}
 
@@ -230,5 +268,5 @@
 		background: currentColor;
 		opacity: 0.06;
 		pointer-events: none;
-	}
+	}  */
 </style>

package/dist/components/textfield/textfield.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextfieldProps } from './textfield.types.ts';
-declare const Textfield: import("svelte").Component<TextfieldProps, {}, "value" | "ref">;
+declare const Textfield: import("svelte").Component<TextfieldProps, {}, "ref" | "value">;
 type Textfield = ReturnType<typeof Textfield>;
 export default Textfield;

package/dist/hooks/actions.d.ts

@@ -0,0 +1,2 @@
+export * from './themes.svelte.js';
+export * from '../components/accordion/accordion.svelte.js';

package/dist/hooks/actions.js

@@ -0,0 +1,2 @@
+export * from './themes.svelte.js';
+export * from '../components/accordion/accordion.svelte.js';

package/dist/hooks/themes.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeOptions, ThemeAction } from '../@types';
+export declare const useTheme: (name: string) => void;
+export declare function createGlobalTheme(params?: ThemeOptions): {
+    readonly active: string;
+};
+export declare function createTheme(): ThemeAction;
+/** LEGACY CODE
+ * NEED UPDATE documentation with new theme system before removing this legacy code. The new theme system is designed to be more flexible and easier to use, allowing for better integration with Svelte's reactivity and component structure. It also provides a more consistent API for managing themes across different components and contexts.
+ * TODO: Remove this legacy code once the new theme system is fully implemented and tested. This code is kept for backward compatibility with existing components that rely on the old theme system.
+ */
+import { type Writable } from 'svelte/store';
+export declare const theme: Writable<string>;