lapikit 0.6.2 → 0.6.4

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,116 +95,82 @@
 
 <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: inherit;
-		font-size: var(--kit-list-item-font, 0.9375rem);
-		text-align: left;
+		font-size: var(--kit-list-item-font);
 	}
 
-	: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 .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));
 	}
-
-	: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);
-	}
-
-	: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 .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));
 	}
-
-	: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: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));
 	}
 
-	: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[data-prepend='true']:not([data-append='true']) {
+		grid-template-columns: auto minmax(0, 1fr);
 	}
-
-	.kit-list-item[data-rounded='0'] {
-		--kit-list-item-radius: 0;
+	.kit-list-item[data-append='true']:not([data-prepend='true']) {
+		grid-template-columns: minmax(0, 1fr) auto;
 	}
-
-	.kit-list-item[data-rounded='xs'] {
-		--kit-list-item-radius: 2px;
-	}
-
-	.kit-list-item[data-rounded='sm'] {
-		--kit-list-item-radius: 8px;
+	.kit-list-item[data-append='true'][data-prepend='true'] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
 	}
 
-	.kit-list-item[data-rounded='md'] {
-		--kit-list-item-radius: 12px;
+	a.kit-list-item {
+		text-decoration: none;
 	}
 
-	.kit-list-item[data-rounded='lg'] {
-		--kit-list-item-radius: 16px;
+	button.kit-list-item {
+		appearance: none;
+		border: 0;
+		font: inherit;
+		text-align: inherit;
 	}
 
-	.kit-list-item[data-rounded='xl'] {
-		--kit-list-item-radius: 9999px;
+	.kit-list-item[data-interactive='true'][data-disabled='false'] {
+		cursor: pointer;
 	}
 
-	:global(.kit-list[data-variant='filled']) .kit-list-item {
-		background: var(--kit-list-item-bg, transparent);
+	.kit-list-item[data-interactive='true'][data-disabled='false']:hover {
+		translate: 0 -1px;
+		background: var(--kit-list-item-hover-bg);
 	}
-
-	:global(.kit-list[data-variant='filled']) .kit-list-item[data-active='true'] {
-		background: color-mix(in oklab, currentColor 12%, transparent);
+	.kit-list-item[data-active='true'][data-disabled='false'] {
+		translate: 0 0;
+		background: var(--kit-list-item-active-bg);
 	}
-
-	: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-interactive='true'][data-disabled='false']:active {
+		translate: 0 0;
+		background: var(--kit-list-item-active-bg);
 	}
 
-	.kit-list-item[data-active='true'] {
-		background: color-mix(in oklab, currentColor 12%, transparent);
+	.kit-list-item[data-interactive='true'][data-disabled='false']:focus-visible {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
 	}
 
 	.kit-list-item[data-disabled='true'] {
-		opacity: 0.45;
+		opacity: var(--kit-disabled-opacity, 0.55);
 		pointer-events: none;
 	}
 
-	.kit-list-item:is(button, a) {
-		cursor: pointer;
-	}
-
 	.kit-list-item__prepend,
 	.kit-list-item__append,
 	.kit-list-item__content {
@@ -221,14 +185,33 @@
 		white-space: nowrap;
 	}
 
-	.kit-list-item:is(button, a):hover::after,
-	.kit-list-item:is(button, a):focus-visible::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background: currentColor;
-		opacity: 0.06;
-		pointer-events: none;
+	.kit-list-item .outline {
+		--outline-color: var(--kit-list-item-bd);
+	}
+
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-list-item[data-rounded='0'] {
+		--kit-list-item-radius: var(--kit-shape-none);
+	}
+	.kit-list-item[data-rounded='xs'] {
+		--kit-list-item-radius: var(--kit-shape-xs);
+	}
+	.kit-list-item[data-rounded='sm'] {
+		--kit-list-item-radius: var(--kit-shape-sm);
+	}
+	.kit-list-item[data-rounded='md'] {
+		--kit-list-item-radius: var(--kit-shape-md);
+	}
+	.kit-list-item[data-rounded='lg'] {
+		--kit-list-item-radius: var(--kit-shape-lg);
+	}
+	.kit-list-item[data-rounded='xl'] {
+		--kit-list-item-radius: var(--kit-shape-xl);
+	}
+	.kit-list-item[data-rounded='full'] {
+		--kit-list-item-radius: var(--kit-shape-full);
 	}
 </style>

package/dist/components/modal/modal.svelte

@@ -2,30 +2,9 @@
 	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
 	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useElevation, useStyles } from '../../utils';
 	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from './modal.js';
-	import type { ModalDensity, ModalPosition, ModalProps, ModalSize } from './modal.types.js';
-
-	function resolveSize(value: ModalSize | undefined): ModalSize {
-		return value === 'xs' ||
-			value === 'sm' ||
-			value === 'md' ||
-			value === 'lg' ||
-			value === 'xl' ||
-			value === 'full'
-			? value
-			: 'md';
-	}
-
-	function resolvePosition(value: ModalPosition | undefined): ModalPosition {
-		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
-	}
-
-	function resolveDensity(value: ModalDensity | undefined): ModalDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
+	import type { ModalProps } from './modal.types.js';
 
 	const modalId = crypto.randomUUID();
 	let wasPushed = $state(false);
@@ -48,6 +27,8 @@
 		color = undefined,
 		background = undefined,
 		closeWithEsc = true,
+		space,
+		elevation = '2',
 		...rest
 	}: ModalProps = $props();
 
@@ -55,6 +36,8 @@
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-modal',
@@ -78,18 +61,7 @@
 			: `${classContent ?? ''}`.trim()
 	);
 
-	let safeSize = $derived(resolveSize(size));
-	let safePosition = $derived(resolvePosition(position));
-	let safeDensity = $derived(resolveDensity(density));
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-modal-fg:${color}` : '',
-			background ? `--kit-modal-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	$effect(() => {
 		if (open && !wasPushed) {
@@ -151,18 +123,23 @@
 		data-contain={contain}
 	>
 		{#if contain}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div class="kit-modal__overlay" onclick={handleClose}></div>
+			<div class="kit-modal__overlay" role="presentation" onclick={handleClose}></div>
 		{/if}
 
 		<div
 			{...restProps}
 			class={['kit-modal__content', contentClass]}
-			data-size={safeSize}
-			data-position={safePosition}
-			data-density={safeDensity}
+			data-size={size}
+			data-position={position}
+			data-density={density}
 			data-rounded={rounded}
+			data-elevation={elevationState.base}
+			data-elevation-hover={elevationState.hover}
+			data-elevation-active={elevationState.active}
 			onclick={(event: MouseEvent) => event.stopPropagation()}
+			style:--kit-modal-fg={color && `var(--kit-color-${color})`}
+			style:--kit-modal-bg={background && `var(--kit-color-${background})`}
+			style:--kit-modal-space={space}
 		>
 			{@render children?.()}
 		</div>
@@ -171,16 +148,7 @@
 
 <style>
 	.kit-modal {
-		--kit-modal-bg: var(--kit-surface-1);
-		--kit-modal-fg: var(--kit-fg);
-		--kit-modal-bd: var(--kit-border);
-		--kit-modal-radius: 12px;
-		--kit-modal-px: 1rem;
-		--kit-modal-py: 1rem;
 		--kit-modal-max: min(32rem, calc(100vw - 2rem));
-		--kit-modal-top: 50%;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: -50%;
 
 		position: fixed;
 		inset: 0;
@@ -195,29 +163,30 @@
 	.kit-modal__overlay {
 		position: absolute;
 		inset: 0;
-		background: rgb(15 23 42 / 0.42);
+		background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
 		backdrop-filter: blur(2px);
 		pointer-events: auto;
 	}
 
 	.kit-modal__content {
+		--kit-modal-bg: var(--kit-color-surface-1);
+		--kit-modal-fg: var(--kit-color-text);
+
 		position: fixed;
-		left: 50%;
+		left: var(--kit-modal-left);
+		right: var(--kit-modal-right);
 		top: var(--kit-modal-top);
 		bottom: var(--kit-modal-bottom);
-		translate: -50% var(--kit-modal-translate-y);
+		translate: var(--kit-modal-translate-x) var(--kit-modal-translate-y);
 		box-sizing: border-box;
 		width: min(calc(100vw - 2rem), var(--kit-modal-max));
 		max-height: calc(100dvh - 2rem);
 		overflow: auto;
-		padding: var(--kit-modal-py) var(--kit-modal-px);
-		border: 1px solid var(--kit-modal-bd);
+		padding: calc(var(--kit-modal-px) * var(--kit-modal-density-scale));
+		border: 0;
 		border-radius: var(--kit-modal-radius);
 		background: var(--kit-modal-bg);
 		color: var(--kit-modal-fg);
-		box-shadow:
-			0 20px 50px rgb(15 23 42 / 0.18),
-			0 4px 16px rgb(15 23 42 / 0.1);
 		pointer-events: auto;
 	}
 
@@ -225,24 +194,33 @@
 		position: absolute;
 	}
 
+	/**
+	* size
+	* @link nothing...
+	*/
 	.kit-modal__content[data-size='xs'] {
-		--kit-modal-max: min(20rem, calc(100vw - 2rem));
+		--kit-modal-max: 20rem;
+		--kit-modal-px: 10px;
 	}
 
 	.kit-modal__content[data-size='sm'] {
-		--kit-modal-max: min(24rem, calc(100vw - 2rem));
+		--kit-modal-max: 24rem;
+		--kit-modal-px: 12px;
 	}
 
 	.kit-modal__content[data-size='md'] {
-		--kit-modal-max: min(32rem, calc(100vw - 2rem));
+		--kit-modal-max: 32rem;
+		--kit-modal-px: 16px;
 	}
 
 	.kit-modal__content[data-size='lg'] {
-		--kit-modal-max: min(42rem, calc(100vw - 2rem));
+		--kit-modal-max: 42rem;
+		--kit-modal-px: 20px;
 	}
 
 	.kit-modal__content[data-size='xl'] {
-		--kit-modal-max: min(56rem, calc(100vw - 2rem));
+		--kit-modal-max: 56rem;
+		--kit-modal-px: 24px;
 	}
 
 	.kit-modal__content[data-size='full'] {
@@ -258,60 +236,88 @@
 		border-bottom-right-radius: 0;
 	}
 
-	.kit-modal__content[data-position='top'] {
-		--kit-modal-top: 1rem;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: 0;
-	}
-
-	.kit-modal__content[data-position='center'] {
-		--kit-modal-top: 50%;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: -50%;
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-modal__content[data-density='none'] {
+		--kit-modal-density-scale: 0;
 	}
-
-	.kit-modal__content[data-position='bottom'] {
-		--kit-modal-top: auto;
-		--kit-modal-bottom: 1rem;
-		--kit-modal-translate-y: 0;
-	}
-
 	.kit-modal__content[data-density='compact'] {
-		--kit-modal-px: 0.75rem;
-		--kit-modal-py: 0.75rem;
+		--kit-modal-density-scale: 0.9;
 	}
-
 	.kit-modal__content[data-density='default'] {
-		--kit-modal-px: 1rem;
-		--kit-modal-py: 1rem;
+		--kit-modal-density-scale: 1;
 	}
-
 	.kit-modal__content[data-density='comfortable'] {
-		--kit-modal-px: 1.25rem;
-		--kit-modal-py: 1.25rem;
+		--kit-modal-density-scale: 1.1;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-modal__content[data-rounded='0'] {
-		--kit-modal-radius: 0;
+		--kit-modal-radius: var(--kit-shape-none);
 	}
-
 	.kit-modal__content[data-rounded='xs'] {
-		--kit-modal-radius: 2px;
+		--kit-modal-radius: var(--kit-shape-xs);
 	}
-
 	.kit-modal__content[data-rounded='sm'] {
-		--kit-modal-radius: 6px;
+		--kit-modal-radius: var(--kit-shape-sm);
 	}
-
 	.kit-modal__content[data-rounded='md'] {
-		--kit-modal-radius: 12px;
+		--kit-modal-radius: var(--kit-shape-md);
 	}
-
 	.kit-modal__content[data-rounded='lg'] {
-		--kit-modal-radius: 18px;
+		--kit-modal-radius: var(--kit-shape-lg);
 	}
-
 	.kit-modal__content[data-rounded='xl'] {
-		--kit-modal-radius: 9999px;
+		--kit-modal-radius: var(--kit-shape-xl);
+	}
+
+	/**
+	* position
+	* @link nothing...
+	*/
+
+	.kit-modal__content[data-position='top'],
+	.kit-modal__content[data-position='center'],
+	.kit-modal__content[data-position='bottom'] {
+		--kit-modal-translate-x: -50%;
+		--kit-modal-left: 50%;
+	}
+	.kit-modal__content[data-position='top'],
+	.kit-modal__content[data-position='top-left'],
+	.kit-modal__content[data-position='top-right'] {
+		--kit-modal-top: var(--kit-modal-space, 1rem);
+		--kit-modal-bottom: auto;
+		--kit-modal-translate-y: 0;
+	}
+	.kit-modal__content[data-position='center'],
+	.kit-modal__content[data-position='center-left'],
+	.kit-modal__content[data-position='center-right'] {
+		--kit-modal-top: 50%;
+		--kit-modal-bottom: auto;
+		--kit-modal-translate-y: -50%;
+	}
+
+	.kit-modal__content[data-position='bottom'],
+	.kit-modal__content[data-position='bottom-left'],
+	.kit-modal__content[data-position='bottom-right'] {
+		--kit-modal-top: auto;
+		--kit-modal-bottom: var(--kit-modal-space, 1rem);
+		--kit-modal-translate-y: 0;
+	}
+	.kit-modal__content[data-position='top-left'],
+	.kit-modal__content[data-position='center-left'],
+	.kit-modal__content[data-position='bottom-left'] {
+		--kit-modal-left: var(--kit-modal-space, 1rem);
+		--kit-modal-translate-x: 0;
+	}
+	.kit-modal__content[data-position='top-right'],
+	.kit-modal__content[data-position='center-right'],
+	.kit-modal__content[data-position='bottom-right'] {
+		--kit-modal-right: var(--kit-modal-space, 1rem);
 	}
 </style>

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

@@ -1,7 +1,6 @@
-import type { Component, RoundedType } from '../../@types';
-export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ModalPosition = 'top' | 'center' | 'bottom';
-export type ModalDensity = 'compact' | 'comfortable' | 'default';
+import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalPosition = 'top' | 'center' | 'bottom' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right';
 export interface ModalProps extends Component {
     ref?: HTMLDivElement | null;
     open?: boolean;
@@ -10,9 +9,12 @@ export interface ModalProps extends Component {
     persistent?: boolean;
     position?: ModalPosition;
     rounded?: RoundedType;
-    density?: ModalDensity;
+    density?: DensityType;
     classContent?: string | string[] | undefined;
     color?: string;
     background?: string;
     closeWithEsc?: boolean;
+    space?: string;
+    elevation?: ElevationProps;
 }
+export {};