lapikit 0.6.1 → 0.6.3

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

@@ -2,3 +2,10 @@ 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/components/app/app.svelte

@@ -1,92 +1,43 @@
 <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 {
-		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;
-		--kit-h-danger: 5;
-		--kit-h-info: 205;
-
-		--kit-bg: hsl(0 0% 100%);
-		--kit-fg: hsl(222 20% 10%);
-		--kit-muted: hsl(220 10% 45%);
-
-		--kit-surface-1: hsl(0 0% 100%);
-		--kit-surface-2: hsl(220 20% 98%);
-		--kit-surface-3: hsl(220 18% 94%);
-
-		--kit-border: hsl(220 16% 88%);
-
-		--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-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;
@@ -94,72 +45,118 @@
 		--kit-shape-md: 10px;
 		--kit-shape-lg: 14px;
 		--kit-shape-xl: 18px;
+		--kit-shape-full: 9999px;
 
 		--kit-space-compact: 6px;
 		--kit-space-default: 10px;
 		--kit-space-comfortable: 14px;
+
+		--kit-shadow-opacity: 30%;
+		--kit-shadow-ambiant-opacity: 15%;
 	}
 
-	/* Light — explicit override (same values as defaults, forces color-scheme) */
-	.light {
+	.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-surface-1: hsl(240 15% 96.5%);
+		--kit-color-surface-2: hsl(240 10% 93%);
+		--kit-color-surface-3: 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-text: hsl(222 20% 10%);
+		--kit-color-text-muted: hsl(220 10% 40%);
+		--kit-color-text-subtle: hsl(220 8% 58%);
+		--kit-color-text-disabled: 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-fill: hsl(240 8% 93%);
+		--kit-color-fill-hover: hsl(240 4% 91%);
+		--kit-color-fill-active: hsl(240 4% 88%);
 
-		--kit-color-separator: hsl(220 16% 88%);
+		--kit-color-border: hsl(220 16% 88%);
+		--kit-color-shadow: hsl(240 3% 11%);
 
 		--kit-color-accent: hsl(220 90% 56%);
+		--kit-color-on-accent: hsl(0 0% 100%);
 		--kit-color-success: hsl(145 50% 38%);
+		--kit-color-on-success: hsl(0 0% 100%);
 		--kit-color-warning: hsl(35 80% 45%);
+		--kit-color-on-warning: hsl(222 20% 10%);
 		--kit-color-danger: hsl(5 65% 48%);
+		--kit-color-on-danger: hsl(0 0% 100%);
 		--kit-color-info: hsl(205 60% 42%);
+		--kit-color-on-info: hsl(0 0% 100%);
 		--kit-color-focus: hsl(35 90% 56%);
 	}
 
-	/* Dark */
-	.dark {
+	: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-surface: hsl(240 3% 11%);
+		--kit-color-surface-1: hsl(240 2% 17.5%);
+		--kit-color-surface-2: hsl(240 1.5% 23%);
+		--kit-color-surface-3: hsl(240 1.5% 28%);
 
-		--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-text: hsl(0 0% 100%);
+		--kit-color-text-muted: hsl(240 3% 56%);
+		--kit-color-text-subtle: hsl(240 2.5% 38%);
+		--kit-color-text-disabled: 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-fill: hsl(240 2.5% 24%);
+		--kit-color-fill-hover: hsl(240 2.5% 28%);
+		--kit-color-fill-active: hsl(240 2.5% 31%);
 
-		--kit-color-separator: hsl(240 2% 26%);
+		--kit-color-border: hsl(240 2% 26%);
+		--kit-color-shadow: hsl(240 3% 11%);
 
 		--kit-color-accent: hsl(220 85% 65%);
+		--kit-color-on-accent: hsl(240 3% 11%);
 		--kit-color-success: hsl(145 50% 50%);
+		--kit-color-on-success: hsl(240 3% 11%);
 		--kit-color-warning: hsl(35 85% 58%);
+		--kit-color-on-warning: hsl(240 3% 11%);
 		--kit-color-danger: hsl(5 70% 60%);
+		--kit-color-on-danger: hsl(240 3% 11%);
 		--kit-color-info: hsl(205 65% 58%);
+		--kit-color-on-info: hsl(240 3% 11%);
 		--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;
+		--kit-h-danger: 5;
+		--kit-h-info: 205;
+
+		--kit-bg: hsl(0 0% 100%);
+		--kit-fg: hsl(222 20% 10%);
+		--kit-muted: hsl(220 10% 45%);
+
+		--kit-surface-1: hsl(0 0% 100%);
+		--kit-surface-2: hsl(220 20% 98%);
+		--kit-surface-3: hsl(220 18% 94%);
+
+		--kit-border: hsl(220 16% 88%);
+
+		--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-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';
+	}
+
 	:global(.outline) {
 		position: absolute;
 		inset: 0;
@@ -201,6 +198,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, useIsInteractive, 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';
@@ -23,6 +23,7 @@
 		noRipple,
 		color,
 		background,
+		elevation,
 		...rest
 	}: CardProps = $props();
 
@@ -36,6 +37,8 @@
 
 	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-card',
@@ -66,6 +69,9 @@
 	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}
@@ -96,6 +102,7 @@
 		border-radius: var(--kit-card-radius);
 		border: 0;
 		box-sizing: border-box;
+		padding: calc(10px * var(--kit-card-density-scale));
 		transition:
 			background 140ms ease,
 			color 140ms ease,
@@ -143,19 +150,19 @@
 	 * @link https://lapikit.dev/docs/components/card#density 
 	 */
 	.kit-card[data-density='none'] {
-		padding: 0;
+		--kit-card-density-scale: 0;
 	}
 	.kit-card[data-density='compact'] {
 		--kit-card-gap: var(--kit-space-compact);
-		padding: var(--kit-space-compact);
+		--kit-card-density-scale: 0.8;
 	}
 	.kit-card[data-density='default'] {
 		--kit-card-gap: var(--kit-space-default);
-		padding: var(--kit-space-default);
+		--kit-card-density-scale: 1;
 	}
 	.kit-card[data-density='comfortable'] {
 		--kit-card-gap: var(--kit-space-comfortable);
-		padding: var(--kit-space-comfortable);
+		--kit-card-density-scale: 1.15;
 	}
 
 	/** 
@@ -163,15 +170,15 @@
 	 * @link https://lapikit.dev/docs/components/card#variants
 	 */
 	.kit-card[data-variant='filled'] {
-		--kit-card-bg: var(--kit-color-surface);
-		--kit-card-fg: var(--kit-color-label);
+		--kit-card-bg: var(--kit-color-surface-1);
+		--kit-card-fg: var(--kit-color-text);
 
 		--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-color-label);
+		--kit-card-fg: var(--kit-color-text);
 		--kit-card-bd: var(--kit-card-fg);
 
 		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
@@ -179,7 +186,7 @@
 	}
 	.kit-card[data-variant='text'] {
 		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-color-label);
+		--kit-card-fg: var(--kit-color-text);
 
 		--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%);
@@ -192,7 +199,6 @@
 	.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);
 	}
 
 	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
@@ -203,7 +209,6 @@
 	.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);
 	}
 
 	.kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],

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

@@ -1,4 +1,4 @@
-import type { Component, DensityType, 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';
@@ -7,6 +7,7 @@ export interface CardProps extends Component {
     variant?: 'filled' | 'outline' | 'text';
     density?: DensityType;
     rounded?: RoundedType;
+    elevation?: ElevationProps;
     interactive?: boolean;
     active?: boolean;
     disabled?: boolean;

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

@@ -46,6 +46,10 @@
 
 <style>
 	.kit-card-title {
+		display: flex;
+		align-items: center;
+		gap: var(--kit-card-gap);
+
 		font-weight: 600;
 		line-height: 1.3;
 	}