lapikit 0.4.13 → 0.4.14

package/dist/components/app/app.svelte

@@ -1,79 +1,146 @@
 <script lang="ts">
-	const BROWSER = typeof window !== 'undefined';
-	import { useTheme } from '../../actions/use-theme.js';
-	import { modalOpen, setOpenModal } from '../../stores/components.js';
-
-	import { viewport } from '../../stores/viewport.js';
-	import type { AppProps } from './types.js';
-
-	let {
-		ref = $bindable(),
-		children,
-		themes,
-		storageKey = '@lapikit/theme',
-		light,
-		dark,
-		...rest
-	}: AppProps = $props();
-
-	$effect.pre(() => {
-		if (!BROWSER) return;
-		const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-			? 'dark'
-			: 'light';
-		const localTheme = localStorage.getItem(storageKey);
-
-		if (localTheme) {
-			useTheme(localTheme);
-		} else if (colorScheme) {
-			if (typeof themes === 'string') {
-				useTheme(themes);
-			} else if (typeof themes === 'object' && Array.isArray(themes)) {
-				if (colorScheme === 'dark') useTheme(themes[1] ?? themes[0]);
-				else useTheme(themes[0]);
-			} else {
-				useTheme(colorScheme);
-			}
-		}
-
-		// Met à jour le store viewport à l'init et sur resize
-		function updateViewport() {
-			viewport.set({
-				innerWidth: window.innerWidth,
-				outerWidth: window.outerWidth,
-				innerHeight: window.innerHeight,
-				outerHeight: window.outerHeight
-			});
-		}
-		updateViewport();
-		window.addEventListener('resize', updateViewport);
-		return () => {
-			window.removeEventListener('resize', updateViewport);
-		};
-	});
+	let { ref = $bindable(), children, ...rest } = $props();
 </script>
 
-<div
-	id="kit-app"
-	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-application',
-		light && 'light',
-		dark && 'dark',
-		light && 'kit-theme--light',
-		dark && 'kit-theme--dark',
-		rest.class
-	]}
->
+<div id="kit-app" bind:this={ref} {...rest} class={['kit-application', rest.class]}>
 	{@render children?.()}
-
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	{#if $modalOpen}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div
-			class={['kit-overlay', $modalOpen === 'persistent' && 'kit-overlay--persistent']}
-			onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
-		></div>
-	{/if}
 </div>
+
+<style>
+	:root {
+		color-scheme: light;
+
+		--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-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';
+	}
+
+	:root {
+		--kit-neutral-bg: color-mix(in oklab, var(--kit-neutral), var(--kit-bg) 85%);
+		--kit-neutral-bd: color-mix(in oklab, var(--kit-neutral), var(--kit-border) 70%);
+		--kit-neutral-fg: var(--kit-fg);
+
+		--kit-success-bg: color-mix(in oklab, var(--kit-success), var(--kit-bg) 85%);
+		--kit-success-bd: color-mix(in oklab, var(--kit-success), var(--kit-border) 70%);
+		--kit-success-fg: var(--kit-fg);
+
+		--kit-warning-bg: color-mix(in oklab, var(--kit-warning), var(--kit-bg) 85%);
+		--kit-warning-bd: color-mix(in oklab, var(--kit-warning), var(--kit-border) 70%);
+		--kit-warning-fg: var(--kit-fg);
+
+		--kit-danger-bg: color-mix(in oklab, var(--kit-danger), var(--kit-bg) 85%);
+		--kit-danger-bd: color-mix(in oklab, var(--kit-danger), var(--kit-border) 70%);
+		--kit-danger-fg: var(--kit-fg);
+
+		--kit-info-bg: color-mix(in oklab, var(--kit-info), var(--kit-bg) 85%);
+		--kit-info-bd: color-mix(in oklab, var(--kit-info), var(--kit-border) 70%);
+		--kit-info-fg: var(--kit-fg);
+	}
+
+	:root {
+		--kit-outline-w: 1px;
+		--btn-radius: 8px;
+
+		--kit-btn-gap: 8px;
+
+		--bg: #111827;
+		--fg: #ffffff;
+		--bg-hover: #0b1220;
+		--border: rgba(255, 255, 255, 0.08);
+		--focus: blue;
+		--font:
+			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+			'Segoe UI Symbol', 'Noto Color Emoji';
+	}
+
+	:global(.outline) {
+		--container-shape-start-start: var(--btn-radius);
+		--container-shape-start-end: var(--btn-radius);
+		--container-shape-end-start: var(--btn-radius);
+		--container-shape-end-end: var(--btn-radius);
+
+		border-width: var(--kit-outline-w);
+		inset: 0;
+		border-style: solid;
+		position: absolute;
+		box-sizing: border-box;
+		border-color: var(--outline-color);
+		z-index: 1;
+		border-start-start-radius: var(--container-shape-start-start);
+		border-start-end-radius: var(--container-shape-start-end);
+		border-end-start-radius: var(--container-shape-end-start);
+		border-end-end-radius: var(--container-shape-end-end);
+	}
+
+	:global(.kit-ripple) {
+		background-color: currentColor;
+		opacity: 0.1;
+		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);
+	}
+
+	:global(.kit-ripple--center) {
+		top: 50% !important;
+		left: 50% !important;
+		translate: -50% -50% !important;
+	}
+
+	:global(.kit-ripple--effect) {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		overflow: hidden;
+		background: none;
+		pointer-events: none;
+		z-index: 999;
+		border-radius: var(--system-ripple-radius);
+	}
+
+	@keyframes -global-animation-l-ripple {
+		from {
+			scale: 0;
+		}
+
+		to {
+			scale: 1;
+		}
+	}
+</style>

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

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

package/dist/components/appbar/appbar.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AppbarProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { AppbarProps } from './appbar.types.js';
 
 	let {
-		children,
 		ref = $bindable(),
 		is = 'header',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		classContent,
-		light,
-		dark,
+		light = false,
+		dark = false,
+		variant = 'outline',
 		rounded,
 		background,
 		color,
@@ -16,25 +22,175 @@
 		...rest
 	}: AppbarProps = $props();
 
-	const assets = getAssets();
+	let safeVariant = $derived(
+		typeof variant === 'string' && (variant === 'outline' || variant === 'text')
+			? variant
+			: 'outline'
+	);
+
+	let safeDensity = $derived(
+		typeof density === 'string' &&
+			(density === 'compact' || density === 'comfortable' || density === 'default')
+			? density
+			: 'default'
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-appbar',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let normalizedClassContent = $derived(
+		Array.isArray(classContent) ? classContent.filter(Boolean).join(' ') : classContent
+	);
+
+	let wrapperClass = $derived(
+		useClassName({
+			baseClass: 'kit-appbar__wrapper',
+			className: normalizedClassContent
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-appbar-background:${background}` : '',
+			color ? `--kit-appbar-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-appbar-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-appbar',
-		light && 'light',
-		dark && 'dark',
-		density && assets.className('appbar', 'density', density),
-		rest.class
-	]}
-	style:--appbar-background={assets.color(background)}
-	style:--appbar-color={assets.color(color)}
-	style:--appbar-shape={assets.shape(rounded)}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	data-variant={safeVariant}
+	data-density={safeDensity}
+	data-light={light || undefined}
+	data-dark={dark || undefined}
+	data-rounded={rounded}
 >
-	<div class={['kit-appbar--wrapper', classContent]}>
+	{#if safeVariant === 'outline'}
+		<span class="outline"></span>
+	{/if}
+
+	<div class={wrapperClass}>
 		{@render children?.()}
 	</div>
 </svelte:element>
+
+<style>
+	.kit-appbar {
+		--kit-appbar-background: var(--kit-surface-2);
+		--kit-appbar-color: var(--kit-fg);
+		--kit-appbar-radius: 1rem;
+		--kit-appbar-size: 4rem;
+		--kit-appbar-padding-x: 1rem;
+		--kit-appbar-padding-wrapper: 0;
+		--kit-appbar-border: color-mix(in oklab, var(--kit-appbar-color), transparent 88%);
+
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		min-height: var(--kit-appbar-size);
+		padding-inline: var(--kit-appbar-padding-x);
+		border-radius: var(--kit-appbar-radius);
+		color: var(--kit-appbar-color);
+		background-color: var(--kit-appbar-background);
+		overflow: hidden;
+	}
+
+	.kit-appbar[data-variant='text'] {
+		--kit-appbar-border: transparent;
+	}
+
+	.kit-appbar[data-density='compact'] {
+		--kit-appbar-size: 3.5rem;
+		--kit-appbar-padding-x: 0.75rem;
+	}
+
+	.kit-appbar[data-density='default'] {
+		--kit-appbar-size: 4rem;
+		--kit-appbar-padding-x: 1rem;
+	}
+
+	.kit-appbar[data-density='comfortable'] {
+		--kit-appbar-size: 4.5rem;
+		--kit-appbar-padding-x: 1.5rem;
+	}
+
+	.kit-appbar[data-light='true'] {
+		--kit-appbar-background: color-mix(in oklab, white 88%, var(--kit-surface-1));
+		--kit-appbar-color: var(--kit-fg);
+	}
+
+	.kit-appbar[data-dark='true'] {
+		--kit-appbar-background: color-mix(in oklab, black 72%, var(--kit-surface-3));
+		--kit-appbar-color: white;
+		--kit-appbar-border: color-mix(in oklab, white, transparent 78%);
+	}
+
+	.kit-appbar[data-rounded='0'] {
+		--kit-appbar-radius: 0;
+	}
+
+	.kit-appbar[data-rounded='xs'] {
+		--kit-appbar-radius: 2px;
+	}
+
+	.kit-appbar[data-rounded='sm'] {
+		--kit-appbar-radius: 4px;
+	}
+
+	.kit-appbar[data-rounded='md'] {
+		--kit-appbar-radius: 8px;
+	}
+
+	.kit-appbar[data-rounded='lg'] {
+		--kit-appbar-radius: 16px;
+	}
+
+	.kit-appbar[data-rounded='xl'] {
+		--kit-appbar-radius: 99999px;
+	}
+
+	.kit-appbar__wrapper {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		gap: 0.75rem;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.kit-appbar .outline {
+		--outline-color: var(--kit-appbar-border);
+
+		pointer-events: none;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import type { AppbarProps } from './types.js';
+import type { AppbarProps } from './appbar.types.ts';
 declare const Appbar: import("svelte").Component<AppbarProps, {}, "ref">;
 type Appbar = ReturnType<typeof Appbar>;
 export default Appbar;

package/dist/{labs/components → components}/appbar/appbar.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, RoundedType } from '../../utils/types/index.js';
+import type { Component, RoundedType } from '../../utils/types';
 type Density = 'compact' | 'comfortable' | 'default';
 type Variant = 'outline' | 'text';
 export interface AppbarProps extends Component {

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -1,25 +1,130 @@
 <script lang="ts">
-	import type { AspectRationProps } from './types.js';
-	let { children, aspectRatio, inline, ...rest }: AspectRationProps = $props();
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { AspectRatioFit, AspectRatioProps, AspectRatioValue } from './aspect-ratio.types.js';
 
-	let paddingBottom = $state(0);
+	const FALLBACK_RATIO = 16 / 9;
+	const FALLBACK_FIT: AspectRatioFit = 'cover';
 
-	$effect.pre(() => {
-		if (aspectRatio) {
-			const [width, height] = aspectRatio.split('/').map(Number);
-			paddingBottom = (height / width) * 100;
+	function resolveRatio(value: AspectRatioValue | undefined): number {
+		if (typeof value === 'number') {
+			return Number.isFinite(value) && value > 0 ? value : FALLBACK_RATIO;
 		}
-	});
 
-	$effect(() => {
-		if (aspectRatio) {
-			const [width, height] = aspectRatio.split('/').map(Number);
-			paddingBottom = (height / width) * 100;
+		if (typeof value !== 'string') {
+			return FALLBACK_RATIO;
 		}
-	});
+
+		const normalized = value.trim();
+		if (!normalized) {
+			return FALLBACK_RATIO;
+		}
+
+		if (normalized.includes('/') || normalized.includes(':')) {
+			const separator = normalized.includes('/') ? '/' : ':';
+			const [w, h] = normalized.split(separator).map((part) => Number(part.trim()));
+
+			if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
+				return w / h;
+			}
+		}
+
+		const asNumber = Number(normalized);
+		return Number.isFinite(asNumber) && asNumber > 0 ? asNumber : FALLBACK_RATIO;
+	}
+
+	function resolveFit(value: AspectRatioFit | undefined): AspectRatioFit {
+		return value === 'cover' || value === 'contain' || value === 'fill' ? value : FALLBACK_FIT;
+	}
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		ratio = undefined,
+		aspectRatio = undefined,
+		fit = 'cover',
+		inline = false,
+		...rest
+	}: AspectRatioProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-aspect-ratio',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let resolvedRatio = $derived(resolveRatio(ratio ?? aspectRatio));
+	let resolvedFit = $derived(resolveFit(fit));
+	let mergedStyle = $derived(
+		[componentStyle, `--kit-aspect-ratio: ${resolvedRatio}`, `--kit-aspect-fit: ${resolvedFit}`]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
-<div {...rest} class={['kit-aspect-ratio', inline && 'kit-aspect-ratio--inline', rest.class]}>
-	<div class="kit-aspect-ratio--sizer" style={`padding-bottom: ${paddingBottom}%;`}></div>
-	{@render children?.()}
-</div>
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	data-inline={inline}
+	{...restProps}
+>
+	<div class="kit-aspect-ratio__inner">
+		{@render children?.()}
+	</div>
+</svelte:element>
+
+<style>
+	.kit-aspect-ratio {
+		display: block;
+		position: relative;
+		width: 100%;
+		max-width: 100%;
+		overflow: hidden;
+		aspect-ratio: var(--kit-aspect-ratio, 1.7777777778);
+	}
+
+	.kit-aspect-ratio[data-inline='true'] {
+		display: inline-block;
+		width: auto;
+	}
+
+	.kit-aspect-ratio__inner {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.kit-aspect-ratio :global(img),
+	.kit-aspect-ratio :global(video),
+	.kit-aspect-ratio :global(iframe),
+	.kit-aspect-ratio :global(canvas),
+	.kit-aspect-ratio :global(svg) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: var(--kit-aspect-fit, cover);
+	}
+</style>

package/dist/components/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AspectRationProps } from './types.js';
-declare const AspectRatio: import("svelte").Component<AspectRationProps, {}, "">;
+import type { AspectRatioProps } from './aspect-ratio.types.ts';
+declare const AspectRatio: import("svelte").Component<AspectRatioProps, {}, "ref">;
 type AspectRatio = ReturnType<typeof AspectRatio>;
 export default AspectRatio;

package/dist/{labs/components → components}/aspect-ratio/aspect-ratio.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from '../../utils/types/index.js';
+import type { Component } from '../../utils/types';
 export type AspectRatioValue = string | number;
 export type AspectRatioFit = 'cover' | 'contain' | 'fill';
 export interface AspectRatioProps extends Component {