lapikit 0.6.0 → 0.6.2

package/dist/@types/actions.d.ts

@@ -1,6 +1,19 @@
+import type { Action } from 'svelte/action';
+/** Accordion */
 export type AccordionOptions = {
     multiple?: boolean;
     readOnly?: boolean;
 };
 /**Modal */
 export type ModalState = boolean | 'persistent';
+/**Theme */
+export type ThemeOptions = {
+    name?: string;
+    key?: string;
+    overridden?: boolean;
+};
+export type ThemeAction = {
+    action: Action<HTMLElement, ThemeOptions | undefined>;
+    set: (name: string) => void;
+    readonly active: string;
+};

package/dist/@types/props.d.ts

@@ -1,3 +1,11 @@
 export type PropValue = string | boolean | number | null | undefined;
 export type SizeType = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RoundedType = 0 | '0' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DensityType = 'none' | 'compact' | 'default' | 'comfortable';
+export type ElevationType = '0' | '1' | '2' | '3' | '4' | '5';
+export interface ElevationState {
+    base?: ElevationType;
+    hover?: ElevationType;
+    active?: ElevationType;
+}
+export type ElevationProps = ElevationType | ElevationState;

package/dist/animations/ripple.d.ts

@@ -1,4 +1,4 @@
-import type { RippleProps } from '../utils/types';
+import type { RippleProps } from '../@types';
 export declare function ripple(el: HTMLElement, options?: RippleProps): {
     destroy(): void;
     update(newOptions: RippleProps): void;

package/dist/animations/ripple.js

@@ -1,7 +1,17 @@
 const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
 const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
+function resolveDuration(options) {
+    return options.duration && options.duration > 0 ? options.duration : undefined;
+}
+function getCoords(e) {
+    if (window.TouchEvent && e instanceof TouchEvent) {
+        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    }
+    return { x: e.clientX, y: e.clientY };
+}
 export function ripple(el, options = {}) {
     const rippleContainer = document.createElement('div');
+    const activeRipples = new Set();
     addClasses();
     setOptions(options);
     function isAriaDisabled() {
@@ -19,24 +29,22 @@ export function ripple(el, options = {}) {
             rippleContainer.classList.add('kit-ripple--center');
         }
     }
-    function setOptions(options) {
-        if (options.disabled || isAriaDisabled()) {
+    function setOptions(newOptions) {
+        if (newOptions.disabled || isAriaDisabled()) {
             rippleContainer.remove();
         }
         else {
             el.appendChild(rippleContainer);
         }
-        if (options.duration && options.duration < 0) {
-            options.duration = undefined;
+        if (newOptions.component) {
+            rippleContainer.style.setProperty('--system-ripple-radius', `var(--kit-${newOptions.component}-radius)`);
         }
-        if (options.component) {
-            rippleContainer.style.setProperty('--system-ripple-radius', `var(--${options.component}-shape)`);
+        if (newOptions.color) {
+            rippleContainer.style.setProperty('--system-ripple-color', newOptions.color);
         }
-        if (options.color) {
-            rippleContainer.style.setProperty('--system-ripple-color', options.color);
-        }
-        if (options.duration) {
-            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${options.duration}ms`);
+        const duration = resolveDuration(newOptions);
+        if (duration) {
+            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${duration}ms`);
         }
     }
     function createRipple(e, center) {
@@ -54,12 +62,7 @@ export function ripple(el, options = {}) {
         }
         addClasses(center);
         const rect = el.getBoundingClientRect();
-        const clientX = window.TouchEvent && e instanceof TouchEvent
-            ? e.touches[0].clientX
-            : e.clientX;
-        const clientY = window.TouchEvent && e instanceof TouchEvent
-            ? e.touches[0].clientY
-            : e.clientY;
+        const { x: clientX, y: clientY } = getCoords(e);
         const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
         const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
         const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
@@ -69,16 +72,23 @@ export function ripple(el, options = {}) {
         ripple.style.top = `${clientY - rect.top - radius}px`;
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
         rippleContainer.appendChild(ripple);
-        function removeRipple() {
-            if (ripple === null) {
-                return;
+        let timeoutId;
+        function cleanup() {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
             }
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+            ripple.remove();
+        }
+        function removeRipple() {
             ripple.style.opacity = '0';
-            setTimeout(() => {
-                ripple.remove();
-            }, options.duration || 1000);
             cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+            timeoutId = setTimeout(() => {
+                ripple.remove();
+                activeRipples.delete(cleanup);
+            }, resolveDuration(options) || 1000);
         }
+        activeRipples.add(cleanup);
         cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
     }
     triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
@@ -87,6 +97,9 @@ export function ripple(el, options = {}) {
             triggerEvents.forEach((event) => {
                 el.removeEventListener(event, createRipple);
             });
+            activeRipples.forEach((cleanup) => cleanup());
+            activeRipples.clear();
+            rippleContainer.remove();
         },
         update(newOptions) {
             options = newOptions;

package/dist/components/app/app.svelte

@@ -1,15 +1,121 @@
 <script lang="ts">
-	let { ref = $bindable(), children, ...rest } = $props();
+	import { makeComponentProps } from '../../html-mapped';
+	import { useClassName, useStyles } from '../../utils';
+	import type { AppProps } from './app.types';
+
+	let {
+		ref = $bindable(),
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: AppProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-application',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
 </script>
 
-<div id="kit-app" bind:this={ref} {...rest} class={['kit-application', rest.class]}>
+<div id="kit-app" bind:this={ref} class={componentClass} style={componentStyle} {...restProps}>
 	{@render children?.()}
 </div>
 
 <style>
+	.kit-application {
+		--kit-shape-none: 0;
+		--kit-shape-xs: 4px;
+		--kit-shape-sm: 6px;
+		--kit-shape-md: 10px;
+		--kit-shape-lg: 14px;
+		--kit-shape-xl: 18px;
+
+		--kit-space-compact: 6px;
+		--kit-space-default: 10px;
+		--kit-space-comfortable: 14px;
+
+		--kit-shadow-opacity: 30%;
+		--kit-shadow-ambiant-opacity: 15%;
+	}
+
+	.kit-application,
+	:global([data-kit-theme='light']) {
+		color-scheme: light;
+		--kit-color-bg: hsl(0 0% 100%);
+		--kit-color-bg-secondary: hsl(240 15% 96.5%);
+		--kit-color-bg-tertiary: hsl(240 10% 93%);
+		--kit-color-surface: hsl(0 0% 100%);
+		--kit-color-surface-raised: hsl(0 0% 100%);
+
+		--kit-color-label: hsl(222 20% 10%);
+		--kit-color-label-secondary: hsl(220 10% 40%);
+		--kit-color-label-tertiary: hsl(220 8% 58%);
+		--kit-color-label-quaternary: hsl(220 5% 76%);
+
+		--kit-color-fill: hsl(240 4% 91%);
+		--kit-color-fill-secondary: hsl(240 8% 93%);
+		--kit-color-fill-tertiary: hsl(240 11% 95%);
+
+		--kit-color-separator: hsl(220 16% 88%);
+		--kit-color-shadow: hsl(240 3% 11%);
+
+		--kit-color-accent: hsl(220 90% 56%);
+		--kit-color-success: hsl(145 50% 38%);
+		--kit-color-warning: hsl(35 80% 45%);
+		--kit-color-danger: hsl(5 65% 48%);
+		--kit-color-info: hsl(205 60% 42%);
+		--kit-color-focus: hsl(35 90% 56%);
+	}
+
+	:global([data-kit-theme='dark']) {
+		color-scheme: dark;
+
+		--kit-color-bg: hsl(240 3% 11%);
+		--kit-color-bg-secondary: hsl(240 2% 17.5%);
+		--kit-color-bg-tertiary: hsl(240 1.5% 23%);
+		--kit-color-surface: hsl(240 2% 19%);
+		--kit-color-surface-raised: hsl(240 1.5% 25%);
+
+		--kit-color-label: hsl(0 0% 100%);
+		--kit-color-label-secondary: hsl(240 3% 56%);
+		--kit-color-label-tertiary: hsl(240 2.5% 38%);
+		--kit-color-label-quaternary: hsl(240 1.5% 25%);
+
+		--kit-color-fill: hsl(240 2.5% 28%);
+		--kit-color-fill-secondary: hsl(240 2.5% 24%);
+		--kit-color-fill-tertiary: hsl(240 2% 20%);
+
+		--kit-color-separator: hsl(240 2% 26%);
+		--kit-color-shadow: hsl(240 3% 11%);
+
+		--kit-color-accent: hsl(220 85% 65%);
+		--kit-color-success: hsl(145 50% 50%);
+		--kit-color-warning: hsl(35 85% 58%);
+		--kit-color-danger: hsl(5 70% 60%);
+		--kit-color-info: hsl(205 65% 58%);
+		--kit-color-focus: hsl(35 90% 62%);
+	}
+
 	.kit-application {
 		color-scheme: light;
 
+		/* Hue vars — used by components for dynamic semantic color calculations */
 		--kit-h-neutral: 220;
 		--kit-h-success: 145;
 		--kit-h-warning: 35;
@@ -28,16 +134,15 @@
 
 		--kit-accent: hsl(220 90% 56%);
 
+		--kit-focus: hsl(35, 90%, 56%);
+
+		/* Layout */
 		--kit-radius-1: 8px;
 		--kit-radius-2: 12px;
 		--kit-space-1: 6px;
 		--kit-space-2: 10px;
 		--kit-space-3: 14px;
-
-		--kit-focus: hsl(35, 90%, 56%);
-
 		--kit-disabled-opacity: 0.55;
-
 		--kit-font:
 			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
 			'Segoe UI Symbol', 'Noto Color Emoji';
@@ -59,13 +164,10 @@
 		position: absolute;
 		border-radius: 50%;
 		pointer-events: none;
-		-webkit-transition: 0.6s;
 		transition: 0.6s;
-		-webkit-animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
-			cubic-bezier(0.4, 0, 0.2, 1);
 		animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
 			cubic-bezier(0.4, 0, 0.2, 1);
-		border-radius: var(--system-ripple-radius);
+		border-radius: 50%;
 	}
 
 	:global(.kit-ripple--center) {
@@ -87,6 +189,56 @@
 		border-radius: var(--system-ripple-radius);
 	}
 
+	:global([data-elevation='0']),
+	:global([data-elevation-hover='0']:hover),
+	:global([data-elevation-active='0']):active {
+		box-shadow: none;
+	}
+
+	:global([data-elevation='1']),
+	:global([data-elevation-hover='1']:hover),
+	:global([data-elevation-active='1']:active) {
+		box-shadow:
+			0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
+			0 3px 8px -2px
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+	}
+
+	:global([data-elevation='2']),
+	:global([data-elevation-hover='2']:hover),
+	:global([data-elevation-active='2']:active) {
+		box-shadow:
+			0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
+			0 5px 12px -3px
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+	}
+
+	:global([data-elevation='3']),
+	:global([data-elevation-hover='3']:hover),
+	:global([data-elevation-active='3']:active) {
+		box-shadow:
+			0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
+			0 8px 20px -4px
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+	}
+
+	:global([data-elevation='4']),
+	:global([data-elevation-hover='4']):hover,
+	:global([data-elevation-active='4']):active {
+		box-shadow:
+			0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
+			0 11px 26px -5px
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+	}
+
+	:global([data-elevation='5']),
+	:global([data-elevation-hover='5']:hover),
+	:global([data-elevation-active='5']:active) {
+		box-shadow:
+			0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
+			0 14px 32px -6px
+				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambiant-opacity), transparent);
+	}
 	@keyframes -global-animation-l-ripple {
 		from {
 			scale: 0;

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

@@ -1,6 +1,4 @@
-declare const App: import("svelte").Component<{
-    ref?: any;
-    children: any;
-} & Record<string, any>, {}, "ref">;
+import type { AppProps } from './app.types';
+declare const App: import("svelte").Component<AppProps, {}, "ref">;
 type App = ReturnType<typeof App>;
 export default App;

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

@@ -0,0 +1,4 @@
+import type { Component } from '../../@types';
+export interface AppProps extends Component {
+    ref?: HTMLElement | null;
+}

package/dist/components/app/app.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/card/card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useElevation, useIsInteractive, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
 	import { ripple } from '../../animations';
 	import type { CardProps } from './card.types.js';
@@ -21,45 +21,23 @@
 		active = false,
 		disabled = false,
 		noRipple,
+		color,
+		background,
+		elevation,
 		...rest
 	}: CardProps = $props();
 
-	let safeVariant = $derived(
-		variant === 'filled' || variant === 'outline' || variant === 'text' ? variant : 'filled'
-	);
-
-	let safeDensity = $derived(
-		density === 'compact' || density === 'default' || density === 'comfortable'
-			? density
-			: 'default'
-	);
-
-	let safeIs = $derived(
-		is === 'div' ||
-			is === 'article' ||
-			is === 'section' ||
-			is === 'aside' ||
-			is === 'a' ||
-			is === 'button'
-			? is
-			: 'article'
-	);
-	let tag = $derived((href && 'a') || safeIs || 'article');
-	let hasEventHandler = $derived(
-		typeof rest.onclick === 'function' ||
-			typeof rest.onpointerdown === 'function' ||
-			typeof rest.onkeydown === 'function'
-	);
-	let isInteractive = $derived(interactive || tag === 'a' || tag === 'button' || hasEventHandler);
+	let tag = $derived((href && 'a') || is);
+	let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
 	let isDisabled = $derived(!!disabled);
 	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
 	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
 	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
 	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let elevationState = $derived(useElevation(elevation));
 
 	let componentClass = $derived(
 		useClassName({
@@ -88,9 +66,12 @@
 	type={resolvedType}
 	disabled={resolvedDisabled}
 	tabindex={resolvedTabIndex}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	data-variant={variant}
+	data-density={density}
 	data-rounded={rounded}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
 	data-interactive={isInteractive}
 	data-active={active}
 	data-disabled={isDisabled}
@@ -99,9 +80,11 @@
 		component: 'card',
 		disabled: noRipple || disabled || !isInteractive
 	}}
+	style:--kit-card-fg={color && `var(--kit-color-${color})`}
+	style:--kit-card-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
-	{#if safeVariant === 'outline'}
+	{#if variant === 'outline'}
 		<span class="outline"></span>
 	{/if}
 
@@ -110,25 +93,15 @@
 
 <style>
 	.kit-card {
-		--kit-card-bg: var(--kit-surface-2);
-		--kit-card-fg: var(--kit-fg);
-		--kit-card-bd: var(--kit-border);
-		--kit-card-radius: var(--kit-radius-2);
-		--kit-card-padding-compact: var(--kit-space-1);
-		--kit-card-padding-default: var(--kit-space-2);
-		--kit-card-padding-comfortable: var(--kit-space-3);
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 6%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 10%);
-
 		display: flex;
+		position: relative;
 		flex-direction: column;
-		gap: var(--kit-space-2);
+		gap: var(--kit-card-gap);
 		background: var(--kit-card-bg);
 		color: var(--kit-card-fg);
-		border: 0;
 		border-radius: var(--kit-card-radius);
+		border: 0;
 		box-sizing: border-box;
-		position: relative;
 		transition:
 			background 140ms ease,
 			color 140ms ease,
@@ -148,53 +121,72 @@
 		text-align: inherit;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-card[data-rounded='0'] {
-		--kit-card-radius: 0;
+		--kit-card-radius: var(--kit-shape-none);
 	}
 	.kit-card[data-rounded='xs'] {
-		--kit-card-radius: 4px;
+		--kit-card-radius: var(--kit-shape-xs);
 	}
 	.kit-card[data-rounded='sm'] {
-		--kit-card-radius: 6px;
+		--kit-card-radius: var(--kit-shape-sm);
 	}
 	.kit-card[data-rounded='md'] {
-		--kit-card-radius: 10px;
+		--kit-card-radius: var(--kit-shape-md);
 	}
 	.kit-card[data-rounded='lg'] {
-		--kit-card-radius: 14px;
+		--kit-card-radius: var(--kit-shape-lg);
 	}
 	.kit-card[data-rounded='xl'] {
-		--kit-card-radius: 18px;
+		--kit-card-radius: var(--kit-shape-xl);
 	}
 
+	/** 
+	 * density
+	 * @link https://lapikit.dev/docs/components/card#density 
+	 */
+	.kit-card[data-density='none'] {
+		padding: 0;
+	}
 	.kit-card[data-density='compact'] {
-		padding: var(--kit-card-padding-compact);
+		--kit-card-gap: var(--kit-space-compact);
+		padding: var(--kit-space-compact);
 	}
 	.kit-card[data-density='default'] {
-		padding: var(--kit-card-padding-default);
+		--kit-card-gap: var(--kit-space-default);
+		padding: var(--kit-space-default);
 	}
 	.kit-card[data-density='comfortable'] {
-		padding: var(--kit-card-padding-comfortable);
+		--kit-card-gap: var(--kit-space-comfortable);
+		padding: var(--kit-space-comfortable);
 	}
 
+	/** 
+	 * variant
+	 * @link https://lapikit.dev/docs/components/card#variants
+	 */
 	.kit-card[data-variant='filled'] {
-		--kit-card-bg: var(--kit-accent);
-		--kit-card-fg: white;
+		--kit-card-bg: var(--kit-color-surface);
+		--kit-card-fg: var(--kit-color-label);
+
 		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), black 10%);
 		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), black 16%);
 	}
-
 	.kit-card[data-variant='outline'] {
 		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-accent);
-		--kit-card-bd: var(--kit-accent);
+		--kit-card-fg: var(--kit-color-label);
+		--kit-card-bd: var(--kit-card-fg);
+
 		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
 		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
 	}
-
 	.kit-card[data-variant='text'] {
 		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-accent);
+		--kit-card-fg: var(--kit-color-label);
+
 		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
 		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
 	}
@@ -206,7 +198,7 @@
 	.kit-card[data-interactive='true'][data-disabled='false']:hover {
 		translate: 0 -1px;
 		background: var(--kit-card-hover-bg);
-		box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12);
+		/* box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12); */
 	}
 
 	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
@@ -217,7 +209,7 @@
 	.kit-card[data-interactive='true'][data-disabled='false']:active {
 		translate: 0 0;
 		background: var(--kit-card-active-bg);
-		box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1);
+		/* box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1); */
 	}
 
 	.kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],
@@ -238,37 +230,4 @@
 	.kit-card .outline {
 		--outline-color: var(--kit-card-bd);
 	}
-
-	.kit-card__media {
-		overflow: hidden;
-		border-radius: calc(var(--kit-card-radius) - 2px);
-	}
-
-	.kit-card__header {
-		font-weight: 600;
-		line-height: 1.3;
-	}
-
-	.kit-card__body {
-		display: block;
-		line-height: 1.45;
-	}
-
-	.kit-card__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--kit-space-2);
-		flex-wrap: wrap;
-	}
-
-	.kit-card__footer-content {
-		color: var(--kit-muted);
-	}
-
-	.kit-card__actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--kit-space-1);
-	}
 </style>

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

@@ -1,14 +1,35 @@
-import type { Component, RoundedType } from '../../@types';
+import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
 export interface CardProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';
     href?: string;
     type?: 'button' | 'submit' | 'reset';
     variant?: 'filled' | 'outline' | 'text';
-    density?: 'compact' | 'default' | 'comfortable';
+    density?: DensityType;
     rounded?: RoundedType;
+    elevation?: ElevationProps;
     interactive?: boolean;
     active?: boolean;
     disabled?: boolean;
     noRipple?: boolean;
 }
+export interface CardTitleProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface CardContentProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface CardMediaProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'span';
+}
+export interface CardContainerProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'span';
+}
+export interface CardActionsProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'span';
+}

package/dist/components/card/modules/card-actions.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { CardActionsProps } from '../card.types';
+	import { makeComponentProps } from '../../../html-mapped';
+	import { useClassName, useStyles } from '../../../utils';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: CardActionsProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card-actions',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-card-actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--kit-space-1);
+	}
+</style>

package/dist/components/card/modules/card-actions.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardActionsProps } from '../card.types';
+declare const CardActions: import("svelte").Component<CardActionsProps, {}, "ref">;
+type CardActions = ReturnType<typeof CardActions>;
+export default CardActions;

package/dist/components/card/modules/card-container.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { CardContainerProps } from '../card.types';
+	import { makeComponentProps } from '../../../html-mapped';
+	import { useClassName, useStyles } from '../../../utils';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: CardContainerProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card-container',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-card-container {
+		gap: var(--kit-card-gap);
+	}
+</style>

package/dist/components/card/modules/card-container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardContainerProps } from '../card.types';
+declare const CardContainer: import("svelte").Component<CardContainerProps, {}, "ref">;
+type CardContainer = ReturnType<typeof CardContainer>;
+export default CardContainer;

package/dist/components/card/modules/card-content.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { CardContentProps } from '../card.types';
+	import { makeComponentProps } from '../../../html-mapped';
+	import { useClassName, useStyles } from '../../../utils';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: CardContentProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-card-content {
+		display: block;
+		line-height: 1.45;
+	}
+
+	.kit-card-content > :global(*) {
+		margin: 0;
+	}
+</style>

package/dist/components/card/modules/card-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardContentProps } from '../card.types';
+declare const CardContent: import("svelte").Component<CardContentProps, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/components/card/modules/card-media.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { CardMediaProps } from '../card.types';
+	import { makeComponentProps } from '../../../html-mapped';
+	import { useClassName, useStyles } from '../../../utils';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: CardMediaProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card-media',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-card-media {
+		overflow: hidden;
+		border-radius: calc(var(--kit-card-radius) - 2px);
+	}
+</style>

package/dist/components/card/modules/card-media.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardMediaProps } from '../card.types';
+declare const CardMedia: import("svelte").Component<CardMediaProps, {}, "ref">;
+type CardMedia = ReturnType<typeof CardMedia>;
+export default CardMedia;

package/dist/components/card/modules/card-title.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { CardTitleProps } from '../card.types';
+	import { makeComponentProps } from '../../../html-mapped';
+	import { useClassName, useStyles } from '../../../utils';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: CardTitleProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card-title',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-card-title {
+		display: flex;
+		align-items: center;
+		gap: var(--kit-card-gap);
+
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.kit-card-title > :global(*) {
+		margin: 0;
+	}
+</style>

package/dist/components/card/modules/card-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardTitleProps } from '../card.types';
+declare const CardTitle: import("svelte").Component<CardTitleProps, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/index.d.ts

@@ -6,6 +6,11 @@ export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
+export { default as KitCardMedia } from './card/modules/card-media.svelte';
+export { default as KitCardTitle } from './card/modules/card-title.svelte';
+export { default as KitCardContent } from './card/modules/card-content.svelte';
+export { default as KitCardActions } from './card/modules/card-actions.svelte';
+export { default as KitCardContainer } from './card/modules/card-container.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitDropdown } from './dropdown/dropdown.svelte';

package/dist/components/index.js

@@ -4,6 +4,11 @@ export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
+export { default as KitCardMedia } from './card/modules/card-media.svelte';
+export { default as KitCardTitle } from './card/modules/card-title.svelte';
+export { default as KitCardContent } from './card/modules/card-content.svelte';
+export { default as KitCardActions } from './card/modules/card-actions.svelte';
+export { default as KitCardContainer } from './card/modules/card-container.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitDropdown } from './dropdown/dropdown.svelte';

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/constants.js

@@ -28,7 +28,12 @@ export const lapikitComponents = [
     'spacer',
     'separator',
     'chip',
-    'card'
+    'card',
+    'card-title',
+    'card-content',
+    'card-media',
+    'card-actions',
+    'card-container'
 ];
 export const lapikitLabsComponents = ['sheet'];
 export const lapikitPlugins = {

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>;

package/dist/hooks/themes.svelte.js

@@ -0,0 +1,125 @@
+// states
+const isBrowser = typeof window !== 'undefined';
+// presets
+const default_theme = 'light';
+const default_storage_key = '@lapikit/theme';
+function generateGlobalTheme() {
+    let active = $state(default_theme);
+    let key = default_storage_key;
+    let initialized = false;
+    function applyToHtml(name) {
+        if (!isBrowser)
+            return;
+        document.documentElement.setAttribute('data-kit-theme', name);
+        active = name;
+    }
+    function set(name) {
+        applyToHtml(name);
+        if (isBrowser) {
+            localStorage.setItem(key, name);
+        }
+    }
+    function init(params = {}) {
+        if (initialized)
+            return;
+        initialized = true;
+        key = params.key ?? default_storage_key;
+        const stored = isBrowser ? localStorage.getItem(key) : null;
+        applyToHtml(stored ?? params.name ?? default_theme);
+    }
+    return {
+        init,
+        set,
+        get active() {
+            return active;
+        }
+    };
+}
+const refGlobalTheme = generateGlobalTheme();
+export const useTheme = refGlobalTheme.set;
+export function createGlobalTheme(params) {
+    refGlobalTheme.init(params);
+    return {
+        get active() {
+            return refGlobalTheme.active;
+        }
+    };
+}
+export function createTheme() {
+    let active = $state(default_theme);
+    let node;
+    let key;
+    let overridden = $state(false);
+    function applyTheme(name) {
+        const target = node;
+        if (!target)
+            return;
+        target.setAttribute('data-kit-theme', name);
+        active = name;
+    }
+    function set(name) {
+        applyTheme(name);
+        if (isBrowser && key) {
+            localStorage.setItem(key, name);
+        }
+    }
+    // skip the effect's first automatic pass so the mount's own initial value (from
+    // `name`, storage or default) isn't immediately clobbered by the current global value
+    let firstRun = true;
+    // re-syncs to the global theme whenever it changes, unless this zone is overridden
+    $effect(() => {
+        const value = refGlobalTheme.active;
+        const isOverridden = overridden;
+        const skip = firstRun;
+        firstRun = false;
+        if (!skip && !isOverridden) {
+            applyTheme(value);
+        }
+    });
+    const action = (n, params = {}) => {
+        node = n;
+        key = params.key;
+        overridden = params.overridden ?? false;
+        const stored = isBrowser && key ? localStorage.getItem(key) : null;
+        applyTheme(stored ?? params.name ?? (overridden ? default_theme : refGlobalTheme.active));
+        return {
+            update(newParams = {}) {
+                key = newParams.key;
+                overridden = newParams.overridden ?? false;
+            },
+            destroy() {
+                node = undefined;
+            }
+        };
+    };
+    return {
+        action,
+        set,
+        get active() {
+            return active;
+        }
+    };
+}
+/** 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 { writable } from 'svelte/store';
+// presets
+const themeRef = 'light';
+export const theme = writable(themeRef);
+// export function useTheme(name: string, key: string = '@lapikit/theme') {
+// 	theme.update(() => {
+// 		if (isBrowser) {
+// 			const html = document.documentElement;
+// 			html.classList.forEach((cls) => {
+// 				if (cls.startsWith('kit-theme--')) {
+// 					html.classList.remove(cls);
+// 				}
+// 			});
+// 			html.classList.add(`kit-theme--${name}`);
+// 			localStorage.setItem(key, name);
+// 		}
+// 		return name;
+// 	});
+// }

package/dist/utils/components.d.ts

@@ -1,4 +1,4 @@
-import type { useClassNameProps, useStylesProps } from '../@types';
+import type { ElevationProps, ElevationState, useClassNameProps, useStylesProps } from '../@types';
 /**
  * useClassName - Utility to compute class names for a component.
  * @param baseClass - The base class name for the component.
@@ -8,6 +8,7 @@ import type { useClassNameProps, useStylesProps } from '../@types';
  * @returns A computed class string.
  */
 export declare function useClassName({ baseClass, className, sClass, classProps }?: useClassNameProps): string;
+export declare function useIsInteractive(props: Record<string, unknown>, tag: string, interactiveTags: readonly string[], interactive?: boolean): boolean;
 /**
  * useStyles - Utility to compute style declarations for a component (optimized pure function).
  * @param styleAttr - Inline style attribute as a string.
@@ -16,3 +17,10 @@ export declare function useClassName({ baseClass, className, sClass, classProps
  * @returns A computed style string.
  */
 export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesProps): string;
+/**
+ * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
+ * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * independent `base`, `hover` and `active` values (each key is optional).
+ * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
+ */
+export declare function useElevation(elevation?: ElevationProps | null): ElevationState;

package/dist/utils/components.js

@@ -54,6 +54,22 @@ export function useClassName({ baseClass = '', className, sClass, classProps } =
     }
     return classes.filter(Boolean).join(' ');
 }
+/**
+ * useIsInteractive - Utility to determine whether a component should behave as interactive:
+ * either explicitly flagged, rendered as an interactive tag (e.g. 'a', 'button'), or given
+ * one of the standard interactive event handlers (onclick, onpointerdown, onkeydown).
+ * @param props - The rest/spread props object of a component.
+ * @param tag - The resolved element tag the component renders as.
+ * @param interactiveTags - The tags considered interactive for this component (e.g. ['a', 'button']).
+ * @param interactive - Explicit interactive flag passed to the component.
+ * @returns True if the component should behave as interactive.
+ */
+const interactiveEventKeys = ['onclick', 'onpointerdown', 'onkeydown'];
+export function useIsInteractive(props, tag, interactiveTags, interactive = false) {
+    return (interactive ||
+        interactiveTags.includes(tag) ||
+        interactiveEventKeys.some((key) => typeof props[key] === 'function'));
+}
 /**
  * useStyles - Utility to compute style declarations for a component (optimized pure function).
  * @param styleAttr - Inline style attribute as a string.
@@ -90,3 +106,22 @@ export function useStyles({ styleAttr, sStyle, styleProps } = {}) {
     }
     return styles.filter(Boolean).join('; ');
 }
+/**
+ * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
+ * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * independent `base`, `hover` and `active` values (each key is optional).
+ * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
+ */
+export function useElevation(elevation) {
+    if (elevation === undefined || elevation === null) {
+        return { base: undefined, hover: undefined, active: undefined };
+    }
+    if (typeof elevation === 'string') {
+        return { base: elevation, hover: undefined, active: undefined };
+    }
+    return {
+        base: elevation.base,
+        hover: elevation.hover,
+        active: elevation.active
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -66,7 +66,7 @@
 			"default": "./dist/labs/index.js"
 		},
 		"./actions": {
-			"default": "./dist/actions.js"
+			"default": "./dist/hooks/actions.js"
 		}
 	},
 	"peerDependencies": {

package/dist/actions.d.ts

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

package/dist/actions.js

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

package/dist/utils/themes.d.ts

@@ -1,3 +0,0 @@
-import { type Writable } from 'svelte/store';
-export declare const theme: Writable<string>;
-export declare function useTheme(name: string, key?: string): void;

package/dist/utils/themes.js

@@ -1,21 +0,0 @@
-import { writable } from 'svelte/store';
-// states
-const isBrowser = typeof window !== 'undefined';
-// presets
-const themeRef = 'light';
-export const theme = writable(themeRef);
-export function useTheme(name, key = '@lapikit/theme') {
-    theme.update(() => {
-        if (isBrowser) {
-            const html = document.documentElement;
-            html.classList.forEach((cls) => {
-                if (cls.startsWith('kit-theme--')) {
-                    html.classList.remove(cls);
-                }
-            });
-            html.classList.add(`kit-theme--${name}`);
-            localStorage.setItem(key, name);
-        }
-        return name;
-    });
-}