lapikit 0.5.9 → 0.6.1

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

@@ -0,0 +1,6 @@
+export type AccordionOptions = {
+    multiple?: boolean;
+    readOnly?: boolean;
+};
+/**Modal */
+export type ModalState = boolean | 'persistent';

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

@@ -4,3 +4,4 @@ export * from './props.js';
 export * from './events.js';
 export * from './animations.js';
 export * from './core.js';
+export * from './actions.js';

package/dist/@types/index.js

@@ -4,3 +4,4 @@ export * from './props.js';
 export * from './events.js';
 export * from './animations.js';
 export * from './core.js';
+export * from './actions.js';

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

@@ -1,3 +1,4 @@
 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';

package/dist/actions.d.ts

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

package/dist/actions.js

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

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

@@ -10,6 +10,7 @@
 	.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,19 +29,135 @@
 
 		--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';
+
+		/* ─── Color tokens (light mode defaults) ─────────────────────────── */
+
+		/* Backgrounds */
+		--kit-color-bg: hsl(0 0% 100%);
+		--kit-color-bg-secondary: hsl(240 15% 96.5%);
+		--kit-color-bg-tertiary: hsl(240 10% 93%);
+
+		/* Surfaces — elevated layers (cards, sheets, popovers) */
+		--kit-color-surface: hsl(0 0% 100%);
+		--kit-color-surface-raised: hsl(0 0% 100%);
+
+		/* Labels — text hierarchy */
+		--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%);
+
+		/* Fills — control & input backgrounds */
+		--kit-color-fill: hsl(240 4% 91%);
+		--kit-color-fill-secondary: hsl(240 8% 93%);
+		--kit-color-fill-tertiary: hsl(240 11% 95%);
+
+		/* Separator */
+		--kit-color-separator: hsl(220 16% 88%);
+
+		/* Semantic */
+		--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%);
+
+		/* ─── Backward-compat aliases (removed once components are updated) ─ */
+		/* --kit-bg: var(--kit-color-bg);
+		--kit-fg: var(--kit-color-label);
+		--kit-muted: var(--kit-color-label-tertiary);
+		--kit-surface-1: var(--kit-color-surface);
+		--kit-surface-2: var(--kit-color-bg-secondary);
+		--kit-surface-3: var(--kit-color-bg-tertiary);
+		--kit-border: var(--kit-color-separator);
+		--kit-accent: var(--kit-color-accent);
+		--kit-focus: var(--kit-color-focus); */
+	}
+
+	.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;
+	}
+
+	/* Light — explicit override (same values as defaults, forces color-scheme) */
+	.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-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%);
+	}
+
+	/* Dark */
+	.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-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%);
 	}
 
 	:global(.outline) {
@@ -59,13 +176,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) {

package/dist/components/card/card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useIsInteractive, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
 	import { ripple } from '../../animations';
 	import type { CardProps } from './card.types.js';
@@ -21,45 +21,20 @@
 		active = false,
 		disabled = false,
 		noRipple,
+		color,
+		background,
 		...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 componentClass = $derived(
 		useClassName({
@@ -88,8 +63,8 @@
 	type={resolvedType}
 	disabled={resolvedDisabled}
 	tabindex={resolvedTabIndex}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	data-variant={variant}
+	data-density={density}
 	data-rounded={rounded}
 	data-interactive={isInteractive}
 	data-active={active}
@@ -99,9 +74,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 +87,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 +115,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%);
 	}
@@ -238,37 +224,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,34 @@
-import type { Component, RoundedType } from '../../@types';
+import type { Component, DensityType, 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;
     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;