lapikit 0.4.13 → 0.4.14

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

@@ -1,94 +1,241 @@
 <script lang="ts">
-	import { getAssets } from '../../../internal/core/actions/assets.svelte.js';
-	import type { AccordionItemProps, ModelAccordionItemProps } from '../types.js';
-
-	// components
-	import Icon from '../../icon/icon.svelte';
-
-	//  assets
-	import ArrowUp from '../../../assets/icons/arrow-up.svelte';
-	import ArrowDown from '../../../assets/icons/arrow-down.svelte';
+	import { useClassName, useStyles } from '../../../utils';
+	import { makeComponentProps } from '../../../compiler/mapped-code';
+	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
 
 	let {
-		activator,
-		children,
-		indicator,
 		ref = $bindable(),
-		text,
 		is = 'div',
-		dark,
-		light,
-		rounded,
-		color,
-		background,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		activator = undefined,
+		indicator = undefined,
+		text = undefined,
+		dark = false,
+		light = false,
+		rounded = undefined,
+		color = undefined,
+		background = undefined,
 		index,
-		open,
-		toggle,
-		disabled,
-		readOnly,
+		open = false,
+		toggle = undefined,
+		disabled = false,
+		readOnly = false,
 		...rest
 	}: AccordionItemProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-accordion-item',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
 
-	let model: ModelAccordionItemProps = {
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-item-color:${color}` : '',
+			background ? `--kit-accordion-item-background:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	let safeOpen = $derived(!!open);
+	let model: AccordionItemModelProps = {
 		get open() {
-			return open !== undefined ? open : false;
+			return safeOpen;
 		}
 	};
+
+	function handleToggle() {
+		if (readOnly || disabled || !toggle) return;
+		toggle(index);
+	}
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-accordion-item',
-		light && 'light',
-		dark && 'dark',
-		open && 'kit-accordion-item--active',
-		rest.class
-	]}
-	style:--accordion--item-shape={assets.shape(rounded)}
-	style:--accordion--item-background={assets.color(background)}
-	style:--accordion--item-color={assets.color(color)}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	data-open={safeOpen}
+	data-disabled={disabled}
+	data-dark={dark}
+	data-light={light}
+	data-rounded={rounded}
 >
 	<button
-		class={[
-			'kit-accordion-item--title',
-			disabled && 'kit-accordion-item--disabled',
-			dark && 'dark',
-			open && 'kit-accordion-item--active',
-			rest.class
-		]}
-		onclick={() => toggle && !readOnly && !disabled && toggle(index)}
-		aria-expanded={open}
+		class="kit-accordion-item__trigger"
 		type="button"
+		onclick={handleToggle}
+		aria-expanded={safeOpen}
+		aria-disabled={disabled || readOnly || undefined}
 		{disabled}
 	>
-		{#if activator}
-			{@render activator?.()}
-		{:else}
-			{text}
-		{/if}
+		<span class="kit-accordion-item__title">
+			{#if activator}
+				{@render activator?.()}
+			{:else}
+				{text}
+			{/if}
+		</span>
 
-		<span class="kit-accordion-item--icon">
+		<span class="kit-accordion-item__indicator">
 			{#if indicator}
 				{@render indicator?.(model)}
-			{:else if open}
-				<Icon>
-					<ArrowUp />
-				</Icon>
 			{:else}
-				<Icon>
-					<ArrowDown />
-				</Icon>
+				<svg viewBox="0 0 24 24" aria-hidden="true">
+					{#if safeOpen}
+						<path d="M7.41 14.59 12 10l4.59 4.59L18 13.17l-6-6-6 6z" fill="currentColor"></path>
+					{:else}
+						<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" fill="currentColor"></path>
+					{/if}
+				</svg>
 			{/if}
 		</span>
 	</button>
-	<div class="kit-accordion-item--text" style:display={!open ? 'none' : ''}>
-		<div class="kit-accordion-item--text-wrapper">
+
+	<div class="kit-accordion-item__content" hidden={!safeOpen}>
+		<div class="kit-accordion-item__content-inner">
 			{@render children?.()}
 		</div>
 	</div>
 </svelte:element>
+
+<style>
+	button {
+		appearance: none;
+		background: none;
+		border: none;
+		font: inherit;
+		color: inherit;
+	}
+
+	.kit-accordion-item {
+		--kit-accordion-item-radius: var(--kit-accordion-radius, 8px);
+		--kit-accordion-item-color: var(--kit-accordion-color, var(--kit-fg));
+		--kit-accordion-item-background: var(--kit-surface-2);
+		--kit-accordion-item-border: color-mix(
+			in oklab,
+			var(--kit-accordion-item-background),
+			var(--kit-fg) 12%
+		);
+		--kit-accordion-item-trigger-y: 1rem;
+		--kit-accordion-item-trigger-x: 1.25rem;
+
+		flex: 1 0 100%;
+		max-width: 100%;
+		position: relative;
+		border-radius: var(--kit-accordion-item-radius);
+		background: var(--kit-accordion-item-background);
+		color: var(--kit-accordion-item-color);
+		border: 1px solid var(--kit-accordion-item-border);
+		transition:
+			border-color 150ms ease,
+			background 150ms ease,
+			box-shadow 150ms ease;
+		overflow: clip;
+	}
+
+	.kit-accordion-item[data-rounded='0'] {
+		--kit-accordion-item-radius: 0;
+	}
+
+	.kit-accordion-item[data-rounded='xs'] {
+		--kit-accordion-item-radius: 2px;
+	}
+
+	.kit-accordion-item[data-rounded='sm'] {
+		--kit-accordion-item-radius: 4px;
+	}
+
+	.kit-accordion-item[data-rounded='md'] {
+		--kit-accordion-item-radius: 8px;
+	}
+
+	.kit-accordion-item[data-rounded='lg'] {
+		--kit-accordion-item-radius: 16px;
+	}
+
+	.kit-accordion-item[data-rounded='xl'] {
+		--kit-accordion-item-radius: 99999px;
+	}
+
+	.kit-accordion-item[data-open='true'] {
+		box-shadow: 0 10px 28px color-mix(in oklab, var(--kit-fg), transparent 90%);
+	}
+
+	.kit-accordion-item[data-dark='true'] {
+		--kit-accordion-item-background: var(--kit-surface-3);
+	}
+
+	.kit-accordion-item[data-light='true'] {
+		--kit-accordion-item-background: var(--kit-surface-1);
+	}
+
+	.kit-accordion-item__trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: var(--kit-accordion-item-trigger-y) var(--kit-accordion-item-trigger-x);
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.kit-accordion-item__trigger:disabled,
+	.kit-accordion-item[data-disabled='true'] .kit-accordion-item__trigger {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.kit-accordion-item__title {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.kit-accordion-item__indicator {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+	}
+
+	.kit-accordion-item__indicator svg {
+		width: 1.125rem;
+		height: 1.125rem;
+		display: block;
+	}
+
+	.kit-accordion-item__content {
+		display: block;
+	}
+
+	.kit-accordion-item__content[hidden] {
+		display: none;
+	}
+
+	.kit-accordion-item__content-inner {
+		padding: 0 1.25rem 1rem;
+	}
+</style>

package/dist/components/accordion/modules/accordion-item.svelte.d.ts

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

package/dist/components/alert/alert.svelte

@@ -1,77 +1,136 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AlertProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { AlertDensity, AlertProps, AlertTone, AlertVariant } from './alert.types.js';
 
-	// components
-	import Icon from '../icon/icon.svelte';
+	function resolveVariant(value: AlertVariant | undefined): AlertVariant {
+		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
+	}
 
-	//  assets
-	import Close from '../../assets/icons/close-fill.svelte';
+	function resolveDensity(value: AlertDensity | undefined): AlertDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: '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';
+	}
 
 	let {
-		children,
-		append,
-		prepend,
-		close,
 		ref = $bindable(),
-		open = $bindable(true),
 		is = 'div',
-		light,
-		dark,
-		variant,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		open = $bindable(true),
+		closable = false,
+		variant = 'filled',
 		density = 'default',
-		rounded,
-		warning,
-		info,
-		success,
-		error,
-		closable,
-		color,
-		background,
+		rounded = 'md',
+		tone = 'default',
+		info = false,
+		success = false,
+		warning = false,
+		error = false,
+		color = undefined,
+		background = undefined,
+		prepend = undefined,
+		append = undefined,
+		close = undefined,
 		...rest
 	}: AlertProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-alert',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let baseStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeVariant = $derived(resolveVariant(variant));
+	let safeDensity = $derived(resolveDensity(density));
+	let safeTone = $derived(resolveTone({ tone, info, success, warning, error }));
+	let mergedStyle = $derived(
+		[
+			baseStyle,
+			color ? `--kit-alert-fg:${color}` : '',
+			background ? `--kit-alert-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
-{#if !closable || (open && closable)}
+{#if !closable || (closable && open)}
 	<svelte:element
 		this={is}
-		{...rest}
-		class={[
-			'kit-alert',
-			light && 'light',
-			dark && 'dark',
-			variant && assets.className('alert', 'variant', variant),
-			density && assets.className('alert', 'density', density),
-			warning && 'kit-alert--warning',
-			info && 'kit-alert--info',
-			success && 'kit-alert--success',
-			error && 'kit-alert--error',
-			rest.class
-		]}
+		bind:this={ref}
+		class={componentClass}
+		style={mergedStyle}
 		role="alert"
-		style:--alert-background={assets.color(background)}
-		style:--alert-color={assets.color(color)}
-		style:--alert-shape={assets.shape(rounded)}
+		data-variant={safeVariant}
+		data-density={safeDensity}
+		data-rounded={rounded}
+		data-tone={safeTone}
+		{...restProps}
 	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+
 		{#if prepend}
-			<div class="kit-alert--prepend">
+			<span class="kit-alert__prepend">
 				{@render prepend?.()}
-			</div>
+			</span>
 		{/if}
-		<span class="kit-alert--content">
+
+		<div class="kit-alert__content">
 			{@render children?.()}
-		</span>
+		</div>
+
 		{#if append}
-			<div class="kit-alert--append">
+			<span class="kit-alert__append">
 				{@render append?.()}
-			</div>
+			</span>
 		{/if}
 
 		{#if closable}
 			<button
-				class="kit-alert--close"
+				class="kit-alert__close"
 				type="button"
 				aria-label="close"
 				onclick={() => (open = false)}
@@ -79,11 +138,149 @@
 				{#if close}
 					{@render close?.()}
 				{:else}
-					<Icon>
-						<Close />
-					</Icon>
+					<span aria-hidden="true">×</span>
 				{/if}
 			</button>
 		{/if}
 	</svelte:element>
 {/if}
+
+<style>
+	.kit-alert {
+		--kit-alert-bg: hsl(220 20% 96%);
+		--kit-alert-fg: hsl(222 20% 16%);
+		--kit-alert-bd: hsl(220 16% 85%);
+		--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);
+		--btn-radius: var(--kit-alert-radius);
+
+		position: relative;
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		gap: var(--kit-alert-gap);
+		align-items: start;
+		padding: var(--kit-alert-py) var(--kit-alert-px);
+		border-radius: var(--kit-alert-radius);
+		color: var(--kit-alert-fg);
+		background: var(--kit-alert-bg);
+		border: 1px solid var(--kit-alert-bd);
+	}
+
+	.kit-alert[data-variant='filled'] {
+		background: var(--kit-alert-bg);
+		color: var(--kit-alert-fg);
+		border-color: var(--kit-alert-bd);
+	}
+
+	.kit-alert[data-variant='outline'] {
+		background: transparent;
+		color: var(--kit-alert-fg);
+		border-color: transparent;
+	}
+
+	.kit-alert[data-variant='text'] {
+		background: transparent;
+		color: var(--kit-alert-fg);
+		border-color: transparent;
+	}
+
+	.kit-alert .outline {
+		pointer-events: none;
+	}
+
+	.kit-alert[data-tone='info'] {
+		--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-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-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-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-density='compact'] {
+		--kit-alert-py: 0.5rem;
+		--kit-alert-px: 0.75rem;
+		--kit-alert-gap: 0.5rem;
+	}
+
+	.kit-alert[data-density='default'] {
+		--kit-alert-py: 0.75rem;
+		--kit-alert-px: 0.875rem;
+		--kit-alert-gap: 0.625rem;
+	}
+
+	.kit-alert[data-density='comfortable'] {
+		--kit-alert-py: 0.95rem;
+		--kit-alert-px: 1rem;
+		--kit-alert-gap: 0.75rem;
+	}
+
+	.kit-alert[data-rounded='0'] {
+		--kit-alert-radius: 0;
+	}
+	.kit-alert[data-rounded='xs'] {
+		--kit-alert-radius: 2px;
+	}
+	.kit-alert[data-rounded='sm'] {
+		--kit-alert-radius: 4px;
+	}
+	.kit-alert[data-rounded='md'] {
+		--kit-alert-radius: 8px;
+	}
+	.kit-alert[data-rounded='lg'] {
+		--kit-alert-radius: 16px;
+	}
+	.kit-alert[data-rounded='xl'] {
+		--kit-alert-radius: 99999px;
+	}
+
+	.kit-alert__prepend,
+	.kit-alert__append {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.kit-alert__content {
+		min-width: 0;
+		line-height: 1.4;
+	}
+
+	.kit-alert__close {
+		appearance: none;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		padding: 0;
+		width: 1.25rem;
+		height: 1.25rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		border-radius: 6px;
+	}
+
+	.kit-alert__close:hover {
+		background: color-mix(in oklab, currentColor 10%, transparent);
+	}
+</style>

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

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

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Component, RoundedType } from '../../utils/types/index.js';
+import type { Component, RoundedType } from '../../utils/types';
 export type AlertVariant = 'filled' | 'outline' | 'text';
 export type AlertDensity = 'compact' | 'comfortable' | 'default';
 export type AlertTone = 'default' | 'info' | 'success' | 'warning' | 'error';