lapikit 0.6.1 → 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

@@ -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;
@@ -98,16 +49,17 @@
 		--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%);
 
@@ -121,6 +73,7 @@
 		--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%);
@@ -130,14 +83,12 @@
 		--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%);
 
@@ -151,6 +102,7 @@
 		--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%);
@@ -160,6 +112,42 @@
 		--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 +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, 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}
@@ -192,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 {
@@ -203,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'],

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

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

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

package/dist/hooks/actions.d.ts

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

package/dist/hooks/actions.js

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

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

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

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.
@@ -17,3 +17,10 @@ export declare function useIsInteractive(props: Record<string, unknown>, tag: st
  * @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

@@ -106,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.1",
+	"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;
-    });
-}