lapikit 0.4.13 → 0.4.14

package/dist/components/icon/icon.svelte

@@ -1,49 +1,186 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { IconProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { IconProps } from './icon.types.js';
+
 	let {
-		children,
 		ref = $bindable(),
 		is = 'i',
-		light,
-		dark,
-		icon,
-		size = 'md',
-		error,
-		info,
-		success,
-		warning,
-		disabled,
-		alt,
-		color,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		name = undefined,
+		src = undefined,
+		icon = undefined,
+		size = 'default',
+		alt = '',
+		label = undefined,
+		decorative = true,
+		loading = 'eager',
+		decoding = 'async',
+		color = undefined,
+		colorMode = 'auto',
+		imgFilter = undefined,
 		...rest
 	}: IconProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-icon',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeSize = $derived(
+		size === 'default' || size === undefined
+			? undefined
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
+	);
+
+	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
+	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
+	let hasChildren = $derived(!!children);
+	let hasContent = $derived(hasChildren || !!resolvedSrc || !!resolvedName);
+	let classWithIconName = $derived(
+		!hasChildren && !resolvedSrc && resolvedName
+			? `${componentClass} ${resolvedName}`.trim()
+			: componentClass
+	);
+
+	let safeLoading = $derived(loading === 'lazy' || loading === 'eager' ? loading : 'eager');
+	let safeDecoding = $derived(
+		decoding === 'async' || decoding === 'sync' || decoding === 'auto' ? decoding : 'async'
+	);
+	let safeColorMode = $derived(
+		colorMode === 'auto' || colorMode === 'none' || colorMode === 'mask' || colorMode === 'filter'
+			? colorMode
+			: 'auto'
+	);
+
+	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
+	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
+	let iconAriaHidden = $derived(decorative ? true : undefined);
+	let imgAlt = $derived(decorative ? '' : alt || label || '');
+	let isSvgSrc = $derived(!!resolvedSrc && /\.svg($|\?)/i.test(resolvedSrc));
+	let useMaskMode = $derived(
+		!!resolvedSrc &&
+			(color ? safeColorMode === 'mask' || (safeColorMode === 'auto' && isSvgSrc) : false)
+	);
+	let useFilterMode = $derived(
+		!!resolvedSrc && !!imgFilter && (safeColorMode === 'filter' || safeColorMode === 'auto')
+	);
+	let mergedStyle = $derived(
+		[componentStyle, color ? `color:${color}` : '', color ? `--kit-icon-color:${color}` : '']
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
-<svelte:element
-	this={icon && icon.includes('/') ? 'div' : is}
-	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-icon',
-		icon && !icon.includes('/') && icon,
-		light && 'light',
-		dark && 'dark',
-		info && 'kit-icon--info',
-		success && 'kit-icon--success',
-		warning && 'kit-icon--warning',
-		error && 'kit-icon--error',
-		disabled && 'kit-icon--disabled',
-		size && assets.className('icon', 'size', size),
-		rest.class
-	]}
-	style:--icon-color={assets.color(color)}
->
-	{#if icon && icon.includes('/')}
-		<img src={icon} {alt} />
-	{:else}
-		{@render children?.()}
-	{/if}
-</svelte:element>
+{#if hasContent}
+	<svelte:element
+		this={is}
+		bind:this={ref}
+		class={classWithIconName}
+		style={mergedStyle}
+		data-size={safeSize}
+		role={iconRole}
+		aria-label={iconAriaLabel}
+		aria-hidden={iconAriaHidden}
+		{...restProps}
+	>
+		{#if hasChildren}
+			{@render children?.()}
+		{:else if resolvedSrc}
+			{#if useMaskMode}
+				<span
+					class="kit-icon__mask"
+					style={`--kit-icon-mask-image: url("${resolvedSrc}")`}
+					aria-hidden="true"
+				></span>
+			{:else}
+				<img
+					src={resolvedSrc}
+					alt={imgAlt}
+					loading={safeLoading}
+					decoding={safeDecoding}
+					style={useFilterMode ? `filter:${imgFilter}` : undefined}
+				/>
+			{/if}
+		{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	.kit-icon {
+		--kit-icon-size-xs: 0.875rem;
+		--kit-icon-size-sm: 1rem;
+		--kit-icon-size-md: 1.125rem;
+		--kit-icon-size-lg: 1.25rem;
+		--kit-icon-size-xl: 1.375rem;
+		--kit-icon-current-size: var(--kit-icon-size-md);
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-indent: 0;
+		line-height: 1;
+		font-size: var(--kit-icon-current-size);
+		vertical-align: middle;
+	}
+
+	.kit-icon[data-size='xs'] {
+		--kit-icon-current-size: var(--kit-icon-size-xs);
+	}
+	.kit-icon[data-size='sm'] {
+		--kit-icon-current-size: var(--kit-icon-size-sm);
+	}
+	.kit-icon[data-size='md'] {
+		--kit-icon-current-size: var(--kit-icon-size-md);
+	}
+	.kit-icon[data-size='lg'] {
+		--kit-icon-current-size: var(--kit-icon-size-lg);
+	}
+	.kit-icon[data-size='xl'] {
+		--kit-icon-current-size: var(--kit-icon-size-xl);
+	}
+
+	.kit-icon :global(svg),
+	.kit-icon img,
+	.kit-icon .kit-icon__mask {
+		width: var(--kit-icon-current-size);
+		height: var(--kit-icon-current-size);
+		flex-shrink: 0;
+		display: block;
+	}
+
+	.kit-icon .kit-icon__mask {
+		display: inline-block;
+		background-color: var(--kit-icon-color, currentColor);
+		mask-image: var(--kit-icon-mask-image);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		mask-position: center;
+		-webkit-mask-image: var(--kit-icon-mask-image);
+		-webkit-mask-repeat: no-repeat;
+		-webkit-mask-size: contain;
+		-webkit-mask-position: center;
+	}
+</style>

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

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

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

@@ -1,4 +1,4 @@
-import type { Component, SizeType } from '../../utils/types/index.js';
+import type { Component, SizeType } from '../../utils/types';
 export interface IconProps extends Component {
     ref?: HTMLElement | null;
     name?: string;

package/dist/components/index.d.ts

@@ -1,22 +1,23 @@
-export { default as App } from './app/app.svelte';
-export { default as Button } from './button/button.svelte';
-export { default as Icon } from './icon/icon.svelte';
-export { default as Dropdown } from './dropdown/dropdown.svelte';
-export { default as Popover } from './popover/popover.svelte';
-export { default as Tooltip } from './tooltip/tooltip.svelte';
-export { default as Dialog } from './dialog/dialog.svelte';
-export { default as Separator } from './separator/separator.svelte';
-export { default as Modal } from './modal/modal.svelte';
-export { default as List } from './list/list.svelte';
-export { default as ListItem } from './list/modules/list-item.svelte';
-export { default as Avatar } from './avatar/avatar.svelte';
-export { default as Accordion } from './accordion/accordion.svelte';
-export { default as AccordionItem } from './accordion/modules/accordion-item.svelte';
-export { default as AspectRatio } from './aspect-ratio/aspect-ratio.svelte';
-export { default as Alert } from './alert/alert.svelte';
-export { default as Chip } from './chip/chip.svelte';
-export { default as Card } from './card/card.svelte';
-export { default as Toolbar } from './toolbar/toolbar.svelte';
-export { default as Appbar } from './appbar/appbar.svelte';
-export { default as Spacer } from './spacer/spacer.svelte';
-export { default as Textfield } from './textfield/textfield.svelte';
+export { default as KitSheet } from './sheet/sheet.svelte';
+export { default as KitApp } from './app/app.svelte';
+export { default as KitAppbar } from './appbar/appbar.svelte';
+export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitIcon } from './icon/icon.svelte';
+export { default as KitCard } from './card/card.svelte';
+export { default as KitChip } from './chip/chip.svelte';
+export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitDropdown } from './dropdown/dropdown.svelte';
+export { default as KitPopover } from './popover/popover.svelte';
+export { default as KitTooltip } from './tooltip/tooltip.svelte';
+export { default as KitTextfield } from './textfield/textfield.svelte';
+export { default as KitToolbar } from './toolbar/toolbar.svelte';
+export { default as KitList } from './list/list.svelte';
+export { default as KitListItem } from './list/modules/list-item.svelte';
+export { default as KitDialog } from './dialog/dialog.svelte';
+export { default as KitModal } from './modal/modal.svelte';
+export { default as KitAccordion } from './accordion/accordion.svelte';
+export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
+export { default as KitAlert } from './alert/alert.svelte';
+export { default as KitAspectRatio } from './aspect-ratio/aspect-ratio.svelte';
+export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';

package/dist/components/index.js

@@ -1,23 +1,24 @@
 // components
-export { default as App } from './app/app.svelte';
-export { default as Button } from './button/button.svelte';
-export { default as Icon } from './icon/icon.svelte';
-export { default as Dropdown } from './dropdown/dropdown.svelte';
-export { default as Popover } from './popover/popover.svelte';
-export { default as Tooltip } from './tooltip/tooltip.svelte';
-export { default as Dialog } from './dialog/dialog.svelte';
-export { default as Separator } from './separator/separator.svelte';
-export { default as Modal } from './modal/modal.svelte';
-export { default as List } from './list/list.svelte';
-export { default as ListItem } from './list/modules/list-item.svelte';
-export { default as Avatar } from './avatar/avatar.svelte';
-export { default as Accordion } from './accordion/accordion.svelte';
-export { default as AccordionItem } from './accordion/modules/accordion-item.svelte';
-export { default as AspectRatio } from './aspect-ratio/aspect-ratio.svelte';
-export { default as Alert } from './alert/alert.svelte';
-export { default as Chip } from './chip/chip.svelte';
-export { default as Card } from './card/card.svelte';
-export { default as Toolbar } from './toolbar/toolbar.svelte';
-export { default as Appbar } from './appbar/appbar.svelte';
-export { default as Spacer } from './spacer/spacer.svelte';
-export { default as Textfield } from './textfield/textfield.svelte';
+export { default as KitSheet } from './sheet/sheet.svelte';
+export { default as KitApp } from './app/app.svelte';
+export { default as KitAppbar } from './appbar/appbar.svelte';
+export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitIcon } from './icon/icon.svelte';
+export { default as KitCard } from './card/card.svelte';
+export { default as KitChip } from './chip/chip.svelte';
+export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitDropdown } from './dropdown/dropdown.svelte';
+export { default as KitPopover } from './popover/popover.svelte';
+export { default as KitTooltip } from './tooltip/tooltip.svelte';
+export { default as KitTextfield } from './textfield/textfield.svelte';
+export { default as KitToolbar } from './toolbar/toolbar.svelte';
+export { default as KitList } from './list/list.svelte';
+export { default as KitListItem } from './list/modules/list-item.svelte';
+export { default as KitDialog } from './dialog/dialog.svelte';
+export { default as KitModal } from './modal/modal.svelte';
+export { default as KitAccordion } from './accordion/accordion.svelte';
+export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
+export { default as KitAlert } from './alert/alert.svelte';
+export { default as KitAspectRatio } from './aspect-ratio/aspect-ratio.svelte';
+export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';

package/dist/components/list/list.svelte

@@ -1,44 +1,190 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { ListProps } from './types.js';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { useClassName, useStyles } from '../../utils';
+	import type { ListDensity, ListProps, ListVariant } from './list.types.js';
+
+	function resolveVariant(value: ListVariant | undefined): ListVariant {
+		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
+	}
+
+	function resolveDensity(value: ListDensity | undefined): ListDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: 'default';
+	}
 
 	let {
-		children,
 		ref = $bindable(),
 		is = 'div',
-		dark,
-		light,
-		background,
-		color,
-		rounded,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		size = 'md',
-		density = 'default',
 		variant = 'filled',
-		nav,
+		density = 'default',
+		rounded = 'md',
+		nav = false,
+		color = undefined,
+		background = undefined,
 		...rest
 	}: ListProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-list',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeVariant = $derived(resolveVariant(variant));
+	let safeDensity = $derived(resolveDensity(density));
+	let safeSize = $derived(
+		size === 'default'
+			? 'md'
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
+	);
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-list-fg:${color}` : '',
+			background ? `--kit-list-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-list',
-		light && 'light',
-		dark && 'dark',
-		size && assets.className('list', 'size', size),
-		variant && assets.className('list', 'variant', variant),
-		density && assets.className('list', 'density', density),
-		nav && 'kit-list--nav',
-		rest.class
-	]}
-	role="listbox"
-	style:--list-background={assets.color(background)}
-	style:--list-color={assets.color(color)}
-	style:--list-shape={assets.shape(rounded)}
+	class={componentClass}
+	style={mergedStyle}
+	data-size={safeSize}
+	data-variant={safeVariant}
+	data-density={safeDensity}
+	data-rounded={rounded}
+	data-nav={nav}
+	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
+	{...restProps}
 >
 	{@render children?.()}
 </svelte:element>
+
+<style>
+	.kit-list {
+		--kit-list-bg: var(--kit-surface-1);
+		--kit-list-fg: var(--kit-fg);
+		--kit-list-bd: var(--kit-border);
+		--kit-list-radius: 10px;
+		--kit-list-item-h: 2.75rem;
+		--kit-list-item-px: 0.875rem;
+		--kit-list-item-gap: 0.625rem;
+		--kit-list-item-font: 0.9375rem;
+
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		padding: 0.25rem;
+		gap: 0.125rem;
+		color: var(--kit-list-fg);
+		background: transparent;
+		border-radius: var(--kit-list-radius);
+	}
+
+	.kit-list[data-nav='true'] {
+		padding: 0.5rem;
+	}
+
+	.kit-list[data-size='xs'] {
+		--kit-list-item-h: 2.125rem;
+		--kit-list-item-px: 0.625rem;
+		--kit-list-item-gap: 0.5rem;
+		--kit-list-item-font: 0.75rem;
+	}
+
+	.kit-list[data-size='sm'] {
+		--kit-list-item-h: 2.375rem;
+		--kit-list-item-px: 0.75rem;
+		--kit-list-item-gap: 0.5rem;
+		--kit-list-item-font: 0.875rem;
+	}
+
+	.kit-list[data-size='md'] {
+		--kit-list-item-h: 2.75rem;
+		--kit-list-item-px: 0.875rem;
+		--kit-list-item-gap: 0.625rem;
+		--kit-list-item-font: 0.9375rem;
+	}
+
+	.kit-list[data-size='lg'] {
+		--kit-list-item-h: 3.125rem;
+		--kit-list-item-px: 1rem;
+		--kit-list-item-gap: 0.75rem;
+		--kit-list-item-font: 1rem;
+	}
+
+	.kit-list[data-size='xl'] {
+		--kit-list-item-h: 3.5rem;
+		--kit-list-item-px: 1.125rem;
+		--kit-list-item-gap: 0.875rem;
+		--kit-list-item-font: 1.0625rem;
+	}
+
+	.kit-list[data-density='compact'] {
+		--kit-list-item-h: calc(var(--kit-list-item-h) - 0.25rem);
+	}
+
+	.kit-list[data-density='comfortable'] {
+		--kit-list-item-h: calc(var(--kit-list-item-h) + 0.25rem);
+	}
+
+	.kit-list[data-rounded='0'] {
+		--kit-list-radius: 0;
+	}
+
+	.kit-list[data-rounded='xs'] {
+		--kit-list-radius: 2px;
+	}
+
+	.kit-list[data-rounded='sm'] {
+		--kit-list-radius: 6px;
+	}
+
+	.kit-list[data-rounded='md'] {
+		--kit-list-radius: 10px;
+	}
+
+	.kit-list[data-rounded='lg'] {
+		--kit-list-radius: 16px;
+	}
+
+	.kit-list[data-rounded='xl'] {
+		--kit-list-radius: 9999px;
+	}
+
+	.kit-list[data-variant='filled'] {
+		background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
+	}
+
+	.kit-list[data-variant='outline'] {
+		border: 1px solid var(--kit-list-bd);
+	}
+</style>

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

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

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Component, RoundedType, SizeType } from '../../utils/types/index.js';
+import type { Component, RoundedType, SizeType } from '../../utils/types';
 export type ListVariant = 'filled' | 'outline' | 'text';
 export type ListDensity = 'compact' | 'comfortable' | 'default';
 export type ListElement = 'div' | 'nav' | 'ul';