lapikit 0.6.3 → 0.6.5

package/dist/components/alert/alert.svelte

@@ -1,41 +1,30 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useElevation, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
-	import type { AlertProps, AlertTone, AlertVariant, AlertDensity } from './alert.types.js';
-
-	function resolveVariant(value: AlertVariant | undefined): AlertVariant {
-		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
-	}
-
-	function resolveDensity(value: AlertDensity | undefined): AlertDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
-
-	function resolveTone(value: AlertTone | undefined): AlertTone {
-		return value && ['info', 'success', 'warning', 'error'].includes(value) ? value : 'default';
-	}
+	import type { AlertProps } from './alert.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
-		children = undefined,
+		children,
 		class: className = '',
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
 		open = $bindable(true),
-		closable = false,
+		closable,
+		size = 'md',
 		variant = 'filled',
 		density = 'default',
 		rounded = 'md',
 		tone = 'default',
-		color = undefined,
-		background = undefined,
-		prepend = undefined,
-		append = undefined,
-		close = undefined,
+		color,
+		background,
+		prepend,
+		append,
+		close,
+		multiline,
+		elevation,
 		...rest
 	}: AlertProps = $props();
 
@@ -43,6 +32,8 @@
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-alert',
@@ -52,7 +43,7 @@
 		})
 	);
 
-	let baseStyle = $derived(
+	let componentStyle = $derived(
 		useStyles({
 			styleAttr,
 			sStyle,
@@ -60,14 +51,11 @@
 		})
 	);
 
-	let safeVariant = $derived(resolveVariant(variant));
-	let safeDensity = $derived(resolveDensity(density));
-	let safeTone = $derived(resolveTone(tone));
-	let mergedStyle = $derived(
+	let resolvedStyle = $derived(
 		[
-			baseStyle,
-			color ? `--kit-alert-fg:${color}` : '',
-			background ? `--kit-alert-bg:${background}` : ''
+			componentStyle,
+			color ? `--kit-alert-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-alert-bg:${background && `var(--kit-color-${background})`}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -79,15 +67,23 @@
 		this={is}
 		bind:this={ref}
 		class={componentClass}
-		style={mergedStyle}
+		style={resolvedStyle}
 		role="alert"
-		data-variant={safeVariant}
-		data-density={safeDensity}
+		data-size={size}
+		data-variant={variant}
+		data-density={density}
 		data-rounded={rounded}
-		data-tone={safeTone}
+		data-tone={tone}
+		data-mutline={multiline}
+		data-append={append && true}
+		data-prepend={prepend && true}
+		data-closable={closable && true}
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
 		{...restProps}
 	>
-		{#if safeVariant === 'outline'}
+		{#if variant === 'outline'}
 			<span class="outline"></span>
 		{/if}
 
@@ -117,7 +113,12 @@
 				{#if close}
 					{@render close?.()}
 				{:else}
-					<span aria-hidden="true">×</span>
+					<svg viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+							fill="currentColor"
+						></path>
+					</svg>
 				{/if}
 			</button>
 		{/if}
@@ -126,121 +127,204 @@
 
 <style>
 	.kit-alert {
-		--kit-alert-bg: var(--kit-surface-2);
-		--kit-alert-fg: var(--kit-fg);
-		--kit-alert-bd: var(--kit-border);
-		--kit-alert-radius: 8px;
-		--kit-alert-py: 0.75rem;
-		--kit-alert-px: 0.875rem;
-		--kit-alert-gap: 0.625rem;
-		--outline-color: var(--kit-alert-bd);
-
 		position: relative;
 		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-columns: minmax(0, 1fr);
 		gap: var(--kit-alert-gap);
-		align-items: start;
-		padding: var(--kit-alert-py) var(--kit-alert-px);
+		padding: calc(var(--kit-alert-px) * var(--kit-alert-density-scale));
 		border-radius: var(--kit-alert-radius);
 		color: var(--kit-alert-fg);
 		background: var(--kit-alert-bg);
-		border: 1px solid var(--kit-alert-bd);
+		font-size: var(--kit-alert-font);
+		border: 0;
 	}
 
-	.kit-alert[data-variant='outline'] {
-		background: transparent;
-		color: var(--kit-alert-fg);
-		border-color: var(--kit-alert-bd);
+	.kit-alert[data-mutline='true'] .kit-alert__prepend,
+	.kit-alert[data-mutline='true'] .kit-alert__content,
+	.kit-alert[data-mutline='true'] .kit-alert__append,
+	.kit-alert[data-mutline='true'] .kit-alert__close {
+		display: flex;
+		align-items: start;
 	}
 
-	.kit-alert[data-variant='text'] {
-		background: transparent;
-		color: var(--kit-alert-fg);
-		border-color: transparent;
+	.kit-alert:not([data-mutline='true']) .kit-alert__prepend,
+	.kit-alert:not([data-mutline='true']) .kit-alert__content,
+	.kit-alert:not([data-mutline='true']) .kit-alert__append,
+	.kit-alert:not([data-mutline='true']) .kit-alert__close {
+		display: flex;
+		align-items: center;
 	}
 
-	.kit-alert .outline {
-		pointer-events: none;
+	.kit-alert__close svg {
+		width: 1.125rem;
+		height: 1.125rem;
+		display: block;
 	}
 
-	.kit-alert[data-tone='info'] {
-		--kit-alert-tone-accent: hsl(var(--kit-h-info, 205) 60% 42%);
-		--kit-alert-bg: hsl(var(--kit-h-info, 205) 90% 95%);
-		--kit-alert-fg: hsl(var(--kit-h-info, 205) 36% 24%);
-		--kit-alert-bd: hsl(var(--kit-h-info, 205) 45% 78%);
+	.kit-alert[data-prepend='true']:not([data-append='true']):not([data-closable='true']) {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+	.kit-alert[data-append='true']:not([data-prepend='true']):not([data-closable='true']),
+	.kit-alert[data-closable='true']:not([data-prepend='true']):not([data-append='true']) {
+		grid-template-columns: minmax(0, 1fr) auto;
 	}
 
-	.kit-alert[data-tone='success'] {
-		--kit-alert-tone-accent: hsl(var(--kit-h-success, 145) 50% 38%);
-		--kit-alert-bg: hsl(var(--kit-h-success, 145) 58% 93%);
-		--kit-alert-fg: hsl(var(--kit-h-success, 145) 38% 23%);
-		--kit-alert-bd: hsl(var(--kit-h-success, 145) 30% 75%);
+	.kit-alert[data-append='true']:not([data-prepend='true']):not([data-closable='true']) {
+		grid-template-columns: minmax(0, 1fr) auto;
+	}
+	.kit-alert[data-prepend='true'][data-closable='true']:not([data-append='true']),
+	.kit-alert[data-prepend='true'][data-append='true']:not([data-closable='true']) {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+	}
+	.kit-alert[data-append='true'][data-closable='true']:not([data-prepend='true']) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+	}
+	.kit-alert[data-prepend='true'][data-append='true'][data-closable='true'] {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
 	}
 
-	.kit-alert[data-tone='warning'] {
-		--kit-alert-tone-accent: hsl(var(--kit-h-warning, 35) 80% 38%);
-		--kit-alert-bg: hsl(var(--kit-h-warning, 35) 95% 92%);
-		--kit-alert-fg: hsl(var(--kit-h-warning, 35) 55% 24%);
-		--kit-alert-bd: hsl(var(--kit-h-warning, 35) 55% 72%);
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-alert[data-rounded='0'] {
+		--kit-alert-radius: var(--kit-shape-none);
+	}
+	.kit-alert[data-rounded='xs'] {
+		--kit-alert-radius: var(--kit-shape-xs);
+	}
+	.kit-alert[data-rounded='sm'] {
+		--kit-alert-radius: var(--kit-shape-sm);
+	}
+	.kit-alert[data-rounded='md'] {
+		--kit-alert-radius: var(--kit-shape-md);
+	}
+	.kit-alert[data-rounded='lg'] {
+		--kit-alert-radius: var(--kit-shape-lg);
+	}
+	.kit-alert[data-rounded='xl'] {
+		--kit-alert-radius: var(--kit-shape-xl);
+	}
+	.kit-alert[data-rounded='full'] {
+		--kit-alert-radius: var(--kit-shape-full);
 	}
 
-	.kit-alert[data-tone='error'] {
-		--kit-alert-tone-accent: hsl(var(--kit-h-danger, 5) 65% 45%);
-		--kit-alert-bg: hsl(var(--kit-h-danger, 5) 90% 94%);
-		--kit-alert-fg: hsl(var(--kit-h-danger, 5) 48% 28%);
-		--kit-alert-bd: hsl(var(--kit-h-danger, 5) 55% 78%);
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-alert[data-density='none'] {
+		--kit-alert-density-scale: 0;
+		--kit-alert-density-h-scale: 0;
 	}
+	.kit-alert[data-density='compact'] {
+		--kit-alert-density-scale: 0.9;
+		--kit-alert-density-h-scale: 0.92;
+	}
+	.kit-alert[data-density='default'] {
+		--kit-alert-density-scale: 1;
+		--kit-alert-density-h-scale: 1;
+	}
+	.kit-alert[data-density='comfortable'] {
+		--kit-alert-density-scale: 1.1;
+		--kit-alert-density-h-scale: 1.15;
+	}
+
+	/** 
+	 * variant
+	 * @link no links...
+	 */
+	.kit-alert[data-variant='filled'] {
+		--kit-alert-bg: var(--kit-color-surface-2);
+		--kit-alert-fg: var(--kit-color-text);
 
-	.kit-alert[data-variant='outline'][data-tone='info'],
-	.kit-alert[data-variant='outline'][data-tone='success'],
-	.kit-alert[data-variant='outline'][data-tone='warning'],
-	.kit-alert[data-variant='outline'][data-tone='error'] {
-		--kit-alert-fg: var(--kit-alert-tone-accent);
-		--kit-alert-bd: var(--kit-alert-tone-accent);
+		--kit-alert-hover-bg: color-mix(in oklab, var(--kit-alert-bg), black 10%);
+		--kit-alert-active-bg: color-mix(in oklab, var(--kit-alert-bg), black 16%);
 	}
+	.kit-alert[data-variant='outline'] {
+		--kit-alert-bg: transparent;
+		--kit-alert-fg: var(--kit-color-text);
+		--kit-alert-bd: var(--kit-alert-fg);
 
-	.kit-alert[data-variant='text'][data-tone='info'],
-	.kit-alert[data-variant='text'][data-tone='success'],
-	.kit-alert[data-variant='text'][data-tone='warning'],
-	.kit-alert[data-variant='text'][data-tone='error'] {
-		--kit-alert-fg: var(--kit-alert-tone-accent);
+		--kit-alert-hover-bg: color-mix(in oklab, var(--kit-alert-fg), transparent 80%);
+		--kit-alert-active-bg: color-mix(in oklab, var(--kit-alert-fg), transparent 92%);
 	}
+	.kit-alert[data-variant='text'] {
+		--kit-alert-bg: transparent;
+		--kit-alert-fg: var(--kit-color-text);
 
-	.kit-alert[data-density='compact'] {
-		--kit-alert-py: 0.5rem;
-		--kit-alert-px: 0.75rem;
-		--kit-alert-gap: 0.5rem;
+		--kit-alert-hover-bg: color-mix(in oklab, var(--kit-alert-fg), transparent 80%);
+		--kit-alert-active-bg: color-mix(in oklab, var(--kit-alert-fg), transparent 92%);
 	}
 
-	.kit-alert[data-density='default'] {
-		--kit-alert-py: 0.75rem;
-		--kit-alert-px: 0.875rem;
-		--kit-alert-gap: 0.625rem;
+	/**
+	* size
+	* @link nothing...
+	*/
+	.kit-alert[data-size='xs'] {
+		--kit-alert-px: 10px;
+		--kit-alert-gap: 4px;
+		--kit-alert-font: 0.75rem;
+	}
+	.kit-alert[data-size='sm'] {
+		--kit-alert-px: 12px;
+		--kit-alert-gap: 6px;
+		--kit-alert-font: 0.875rem;
+	}
+	.kit-alert[data-size='md'] {
+		--kit-alert-px: 16px;
+		--kit-alert-gap: 8px;
+		--kit-alert-font: 1rem;
+	}
+	.kit-alert[data-size='lg'] {
+		--kit-alert-px: 20px;
+		--kit-alert-gap: 10px;
+		--kit-alert-font: 1.125rem;
+	}
+	.kit-alert[data-size='xl'] {
+		--kit-alert-px: 24px;
+		--kit-alert-gap: 12px;
+		--kit-alert-font: 1.25rem;
 	}
 
-	.kit-alert[data-density='comfortable'] {
-		--kit-alert-py: 0.95rem;
-		--kit-alert-px: 1rem;
-		--kit-alert-gap: 0.75rem;
+	/**
+	* tone
+	* @link nothing...
+	*/
+	.kit-alert[data-tone='info'][data-variant='filled'] {
+		--kit-alert-bg: var(--kit-color-info);
+		--kit-alert-fg: var(--kit-color-on-info);
+	}
+	.kit-alert[data-tone='info'][data-variant='outline'],
+	.kit-alert[data-tone='info'][data-variant='text'] {
+		--kit-alert-fg: var(--kit-color-info);
 	}
 
-	.kit-alert[data-rounded='0'] {
-		--kit-alert-radius: 0;
+	.kit-alert[data-tone='success'][data-variant='filled'] {
+		--kit-alert-bg: var(--kit-color-success);
+		--kit-alert-fg: var(--kit-color-on-success);
 	}
-	.kit-alert[data-rounded='xs'] {
-		--kit-alert-radius: 2px;
+	.kit-alert[data-tone='success'][data-variant='outline'],
+	.kit-alert[data-tone='success'][data-variant='text'] {
+		--kit-alert-fg: var(--kit-color-success);
 	}
-	.kit-alert[data-rounded='sm'] {
-		--kit-alert-radius: 4px;
+
+	.kit-alert[data-tone='warning'][data-variant='filled'] {
+		--kit-alert-bg: var(--kit-color-warning);
+		--kit-alert-fg: var(--kit-color-on-warning);
 	}
-	.kit-alert[data-rounded='md'] {
-		--kit-alert-radius: 8px;
+	.kit-alert[data-tone='warning'][data-variant='outline'],
+	.kit-alert[data-tone='warning'][data-variant='text'] {
+		--kit-alert-fg: var(--kit-color-warning);
 	}
-	.kit-alert[data-rounded='lg'] {
-		--kit-alert-radius: 16px;
+
+	.kit-alert[data-tone='error'][data-variant='filled'] {
+		--kit-alert-bg: var(--kit-color-error);
+		--kit-alert-fg: var(--kit-color-on-error);
 	}
-	.kit-alert[data-rounded='xl'] {
-		--kit-alert-radius: 99999px;
+	.kit-alert[data-tone='error'][data-variant='outline'],
+	.kit-alert[data-tone='error'][data-variant='text'] {
+		--kit-alert-fg: var(--kit-color-error);
 	}
 
 	.kit-alert__prepend,
@@ -271,7 +355,12 @@
 		border-radius: 6px;
 	}
 
+	.kit-alert .outline {
+		--outline-color: var(--kit-alert-bd);
+	}
+
 	.kit-alert__close:hover {
 		background: color-mix(in oklab, currentColor 10%, transparent);
+		border-radius: 9999px;
 	}
 </style>

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

@@ -1,20 +1,22 @@
 import type { Snippet } from 'svelte';
-import type { Component, RoundedType } from '../../@types';
-export type AlertVariant = 'filled' | 'outline' | 'text';
-export type AlertDensity = 'compact' | 'comfortable' | 'default';
-export type AlertTone = 'default' | 'info' | 'success' | 'warning' | 'error';
+import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
+type AlertVariant = 'filled' | 'outline' | 'text';
+type AlertTone = 'default' | 'info' | 'success' | 'warning' | 'error';
 export interface AlertProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'section' | 'aside' | 'article';
     open?: boolean;
     closable?: boolean;
     variant?: AlertVariant;
-    density?: AlertDensity;
-    rounded?: RoundedType;
+    size?: SizeType;
+    density?: DensityType;
+    rounded?: RoundedType | 'full';
     tone?: AlertTone;
     color?: string;
     background?: string;
     prepend?: Snippet;
     append?: Snippet;
     close?: Snippet;
+    elevation?: ElevationProps;
 }
+export {};

package/dist/components/app/app.svelte

@@ -53,6 +53,11 @@
 
 		--kit-shadow-opacity: 30%;
 		--kit-shadow-ambiant-opacity: 15%;
+
+		--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';
 	}
 
 	.kit-application,
@@ -81,8 +86,8 @@
 		--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-error: hsl(5 65% 48%);
+		--kit-color-on-error: 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%);
@@ -114,47 +119,81 @@
 		--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-error: hsl(5 70% 60%);
+		--kit-color-on-error: 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%);
+	@media (prefers-color-scheme: light) {
+		:global([data-kit-theme='system']) {
+			color-scheme: light;
+
+			--kit-color-surface: 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-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 8% 93%);
+			--kit-color-fill-hover: hsl(240 4% 91%);
+			--kit-color-fill-active: hsl(240 4% 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-error: hsl(5 65% 48%);
+			--kit-color-on-error: 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%);
+		}
+	}
 
-		/* 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';
+	@media (prefers-color-scheme: dark) {
+		:global([data-kit-theme='system']) {
+			color-scheme: dark;
+
+			--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-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% 24%);
+			--kit-color-fill-hover: hsl(240 2.5% 28%);
+			--kit-color-fill-active: hsl(240 2.5% 31%);
+
+			--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-error: hsl(5 70% 60%);
+			--kit-color-on-error: 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%);
+		}
 	}
 
 	:global(.outline) {