lapikit 0.5.4 → 0.5.6

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

@@ -1,5 +1,8 @@
 import type { RoundedType, Component } from '../../@types';
 import type { Snippet } from 'svelte';
+export type ModelAccordionItemProps = {
+    open: boolean;
+};
 export interface AccordionProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';

package/dist/components/alert/alert.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { useClassName, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
-	import type { AlertDensity, AlertProps, AlertTone, AlertVariant } from './alert.types.js';
+	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';
@@ -13,25 +13,8 @@
 			: 'default';
 	}
 
-	function resolveTone({
-		tone,
-		info,
-		success,
-		warning,
-		error
-	}: {
-		tone?: AlertTone;
-		info?: boolean;
-		success?: boolean;
-		warning?: boolean;
-		error?: boolean;
-	}): AlertTone {
-		if (tone && ['default', 'info', 'success', 'warning', 'error'].includes(tone)) return tone;
-		if (error) return 'error';
-		if (warning) return 'warning';
-		if (success) return 'success';
-		if (info) return 'info';
-		return 'default';
+	function resolveTone(value: AlertTone | undefined): AlertTone {
+		return value && ['info', 'success', 'warning', 'error'].includes(value) ? value : 'default';
 	}
 
 	let {
@@ -48,10 +31,6 @@
 		density = 'default',
 		rounded = 'md',
 		tone = 'default',
-		info = false,
-		success = false,
-		warning = false,
-		error = false,
 		color = undefined,
 		background = undefined,
 		prepend = undefined,
@@ -83,7 +62,7 @@
 
 	let safeVariant = $derived(resolveVariant(variant));
 	let safeDensity = $derived(resolveDensity(density));
-	let safeTone = $derived(resolveTone({ tone, info, success, warning, error }));
+	let safeTone = $derived(resolveTone(tone));
 	let mergedStyle = $derived(
 		[
 			baseStyle,
@@ -171,7 +150,7 @@
 	.kit-alert[data-variant='outline'] {
 		background: transparent;
 		color: var(--kit-alert-fg);
-		border-color: transparent;
+		border-color: var(--kit-alert-bd);
 	}
 
 	.kit-alert[data-variant='text'] {
@@ -185,29 +164,48 @@
 	}
 
 	.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-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-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%);
 	}
 
 	.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%);
 	}
 
+	.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[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[data-density='compact'] {
 		--kit-alert-py: 0.5rem;
 		--kit-alert-px: 0.75rem;

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

@@ -12,10 +12,6 @@ export interface AlertProps extends Component {
     density?: AlertDensity;
     rounded?: RoundedType;
     tone?: AlertTone;
-    info?: boolean;
-    success?: boolean;
-    warning?: boolean;
-    error?: boolean;
     color?: string;
     background?: string;
     prepend?: Snippet;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export type { ModelDropdownProps } from './dropdown/dropdown.types';
+export type { ModelAccordionItemProps } from './accordion/accordion.types';
 export { default as KitApp } from './app/app.svelte';
 export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';

package/dist/components/list/list.svelte

@@ -118,6 +118,7 @@
 		--kit-list-item-px: var(--kit-list-item-px-md);
 		--kit-list-item-gap: var(--kit-list-item-gap-md);
 		--kit-list-item-font: var(--kit-list-item-font-md);
+		--kit-list-density-offset: 0rem;
 
 		display: flex;
 		flex-direction: column;
@@ -169,11 +170,11 @@
 	}
 
 	.kit-list[data-density='compact'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) - 0.25rem);
+		--kit-list-density-offset: -0.25rem;
 	}
 
 	.kit-list[data-density='comfortable'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) + 0.25rem);
+		--kit-list-density-offset: 0.25rem;
 	}
 
 	.kit-list[data-rounded='0'] {

package/dist/components/list/modules/list-item.svelte

@@ -106,7 +106,7 @@
 		grid-template-columns: auto minmax(0, 1fr) auto;
 		align-items: center;
 		gap: var(--kit-list-item-gap, 0.625rem);
-		min-height: var(--kit-list-item-h, 2.75rem);
+		min-height: calc(var(--kit-list-item-h, 2.75rem) + var(--kit-list-density-offset, 0rem));
 		padding-inline: var(--kit-list-item-px, 0.875rem);
 		border: 0;
 		border-radius: var(--kit-list-item-radius);
@@ -146,6 +146,10 @@
 		background: var(--kit-list-item-bg, transparent);
 	}
 
+	:global(.kit-list[data-variant='filled']) .kit-list-item[data-active='true'] {
+		background: color-mix(in oklab, currentColor 12%, transparent);
+	}
+
 	:global(.kit-list[data-variant='outline']) .kit-list-item::before {
 		content: '';
 		position: absolute;

package/dist/components/toolbar/toolbar.svelte

@@ -12,7 +12,7 @@
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
-		variant = 'text',
+		variant = 'filled',
 		rounded,
 		background,
 		color,
@@ -24,9 +24,9 @@
 
 	let safeVariant = $derived(
 		typeof variant === 'string' &&
-			(variant === 'outline' || variant === 'text' || variant === 'dash')
+			(variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'dash')
 			? variant
-			: 'text'
+			: 'filled'
 	);
 
 	let safeDensity = $derived(

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

@@ -1,5 +1,5 @@
 import type { Component, PropValue, RoundedType } from '../../@types';
-type Variant = 'outline' | 'text' | 'dash';
+type Variant = 'filled' | 'outline' | 'text' | 'dash';
 type Density = 'compact' | 'comfortable' | 'default';
 type Orientation = 'horizontal' | 'vertical';
 type Location = 'top' | 'bottom';

package/dist/constants.js

@@ -22,7 +22,7 @@ export const lapikitComponents = [
     'dialog',
     'modal',
     'accordion',
-    'accordionItem',
+    'accordion-item',
     'alert',
     'aspect-ratio',
     'spacer',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.5.4",
+	"version": "0.5.6",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"