lapikit 0.7.2 → 0.7.4

package/dist/components/alert/alert.svelte

@@ -1,96 +1,68 @@
 <script lang="ts">
-	import { useClassName, useElevation, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../utils';
 	import type { AlertProps } from './alert.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		open = $bindable(true),
 		closable,
+		multiline,
 		size = 'md',
 		variant = 'filled',
 		density = 'default',
 		rounded = 'md',
 		tone = 'default',
 		color,
-		background,
 		prepend,
 		append,
 		close,
-		multiline,
 		elevation,
 		...rest
 	}: AlertProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let resolvedColor = $derived(color ?? (tone === 'default' ? undefined : tone));
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-alert',
+			{ className, sClass, styleAttr, sStyle, color: resolvedColor },
+			rest
+		)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-alert',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-alert-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-alert-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
+	let role = $derived(tone === 'warning' || tone === 'error' ? 'alert' : 'status');
 </script>
 
-{#if !closable || (closable && open)}
+{#if !closable || open}
 	<svelte:element
 		this={is}
 		bind:this={ref}
-		class={componentClass}
-		style={resolvedStyle}
-		role="alert"
-		data-size={size}
+		class={attrs.class}
+		style={attrs.style}
+		{role}
 		data-variant={variant}
+		data-size={size}
 		data-density={density}
 		data-rounded={rounded}
 		data-tone={tone}
-		data-mutline={multiline}
-		data-append={append && true}
-		data-prepend={prepend && true}
-		data-closable={closable && true}
+		data-multiline={multiline}
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
-		{...restProps}
+		{...attrs.rest}
 	>
-		{#if variant === 'outline'}
+		{#if hasOutline}
 			<span class="outline"></span>
 		{/if}
 
 		{#if prepend}
-			<span class="kit-alert__prepend">
-				{@render prepend?.()}
-			</span>
+			<span class="kit-alert__prepend">{@render prepend()}</span>
 		{/if}
 
 		<div class="kit-alert__content">
@@ -98,20 +70,18 @@
 		</div>
 
 		{#if append}
-			<span class="kit-alert__append">
-				{@render append?.()}
-			</span>
+			<span class="kit-alert__append">{@render append()}</span>
 		{/if}
 
 		{#if closable}
 			<button
 				class="kit-alert__close"
 				type="button"
-				aria-label="close"
+				aria-label="Close"
 				onclick={() => (open = false)}
 			>
 				{#if close}
-					{@render close?.()}
+					{@render close()}
 				{:else}
 					<svg viewBox="0 0 24 24" aria-hidden="true">
 						<path
@@ -125,241 +95,224 @@
 	</svelte:element>
 {/if}
 
-<style>
-	.kit-alert {
-		position: relative;
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: var(--kit-alert-gap);
-		min-height: calc(var(--kit-alert-item-h) + var(--kit-alert-density-offset) / 2);
-		padding: calc(var(--kit-alert-p) + var(--kit-alert-density-offset) / 2);
-		border-radius: var(--kit-alert-radius);
-		color: var(--kit-alert-fg);
-		background: var(--kit-alert-bg);
-		font-size: var(--kit-alert-font);
-		border: 0;
-	}
-
-	.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: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__close svg {
-		width: 1.125rem;
-		height: 1.125rem;
-		display: block;
-	}
-
-	.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-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;
-	}
-
-	/** 
-	 * 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);
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-alert[data-density='compact'] {
-		--kit-alert-density-offset: var(--kit-density-compact);
-	}
-	.kit-alert[data-density='default'] {
-		--kit-alert-density-offset: var(--kit-density-default);
-	}
-	.kit-alert[data-density='comfortable'] {
-		--kit-alert-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * 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-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-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-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%);
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-alert[data-size='xs'] {
-		--kit-alert-h: 32px;
-		--kit-alert-p: 8px;
-		--kit-alert-gap: var(--kit-space-compact);
-		--kit-alert-font: var(--kit-font-xs);
-	}
-	.kit-alert[data-size='sm'] {
-		--kit-alert-h: 40px;
-		--kit-alert-p: 10px;
-		--kit-alert-gap: var(--kit-space-default);
-		--kit-alert-font: var(--kit-font-sm);
-	}
-	.kit-alert[data-size='md'] {
-		--kit-alert-h: 48px;
-		--kit-alert-p: 12px;
-		--kit-alert-gap: var(--kit-space-default);
-		--kit-alert-font: var(--kit-font-md);
-	}
-	.kit-alert[data-size='lg'] {
-		--kit-alert-h: 56px;
-		--kit-alert-p: 16px;
-		--kit-alert-gap: var(--kit-space-default);
-		--kit-alert-font: var(--kit-font-lg);
-	}
-	.kit-alert[data-size='xl'] {
-		--kit-alert-h: 64px;
-		--kit-alert-p: 20px;
-		--kit-alert-gap: var(--kit-space-comfortable);
-		--kit-alert-font: var(--kit-font-xl);
-	}
-
-	/**
-	* 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-tone='success'][data-variant='filled'] {
-		--kit-alert-bg: var(--kit-color-success);
-		--kit-alert-fg: var(--kit-color-on-success);
-	}
-	.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-tone='warning'][data-variant='filled'] {
-		--kit-alert-bg: var(--kit-color-warning);
-		--kit-alert-fg: var(--kit-color-on-warning);
-	}
-	.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-tone='error'][data-variant='filled'] {
-		--kit-alert-bg: var(--kit-color-error);
-		--kit-alert-fg: var(--kit-color-on-error);
-	}
-	.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,
-	.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 .outline {
-		--outline-color: var(--kit-alert-bd);
-	}
-
-	.kit-alert__close:hover {
-		background: color-mix(in oklab, currentColor 10%, transparent);
-		border-radius: 9999px;
-	}
-</style>
+<style>:where(.kit-alert) {
+  --kit-alert-color: initial;
+  --kit-alert-on-color: initial;
+  --kit-alert-active-fg: initial;
+  --kit-alert-active-shade: initial;
+  --kit-alert-hover-fg: initial;
+  --kit-alert-pressed-fg: initial;
+  --kit-alert-bg: var(--kit-alert-color, var(--kit-color-surface-2));
+  --kit-alert-fg: var(--kit-alert-on-color, var(--kit-alert-contrast, var(--kit-color-text)));
+  --kit-alert-ink: var(--kit-alert-color, var(--kit-color-text));
+  --kit-alert-hover: color-mix(in oklab, var(--kit-alert-bg), var(--kit-alert-fg) 8%);
+  --kit-alert-pressed: color-mix(in oklab, var(--kit-alert-bg), var(--kit-alert-fg) 14%);
+  --kit-alert-soft: color-mix(in oklab, var(--kit-alert-bg) 16%, transparent);
+  --kit-alert-border: color-mix(in oklab, var(--kit-alert-bg), var(--kit-alert-fg) 20%);
+  --kit-alert-active: color-mix(
+  	in oklab,
+  	var(--kit-alert-color),
+  	var(--kit-alert-fg) var(--kit-alert-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-alert) {
+    --kit-alert-contrast: color(from var(--kit-alert-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+
+.kit-alert {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--kit-alert-gap);
+  box-sizing: border-box;
+  min-height: calc(var(--kit-alert-h) + var(--kit-alert-density-offset) / 2);
+  padding: calc(var(--kit-alert-p) + var(--kit-alert-density-offset) / 2);
+  border: 0;
+  border-radius: var(--kit-alert-radius);
+  background-color: var(--kit-alert-bg);
+  color: var(--kit-alert-fg);
+  font-size: var(--kit-alert-font);
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-alert {
+    transition: none;
+  }
+}
+.kit-alert[data-multiline=true] {
+  align-items: flex-start;
+}
+.kit-alert__prepend, .kit-alert__append, .kit-alert__close {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.kit-alert__content {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+}
+.kit-alert__close {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--kit-shape-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.kit-alert__close:hover {
+  background-color: color-mix(in oklab, currentColor 10%, transparent);
+}
+.kit-alert__close:focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+.kit-alert__close svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/alert#size
+ */
+:where(.kit-alert[data-size=xs]) {
+  --kit-alert-h: 2rem;
+  --kit-alert-p: 0.5rem;
+  --kit-alert-gap: 0.375rem;
+  --kit-alert-font: var(--kit-font-xs);
+}
+
+:where(.kit-alert[data-size=sm]) {
+  --kit-alert-h: 2.5rem;
+  --kit-alert-p: 0.625rem;
+  --kit-alert-gap: 0.5rem;
+  --kit-alert-font: var(--kit-font-sm);
+}
+
+:where(.kit-alert[data-size=md]) {
+  --kit-alert-h: 3rem;
+  --kit-alert-p: 0.75rem;
+  --kit-alert-gap: 0.625rem;
+  --kit-alert-font: var(--kit-font-md);
+}
+
+:where(.kit-alert[data-size=lg]) {
+  --kit-alert-h: 3.5rem;
+  --kit-alert-p: 1rem;
+  --kit-alert-gap: 0.75rem;
+  --kit-alert-font: var(--kit-font-lg);
+}
+
+:where(.kit-alert[data-size=xl]) {
+  --kit-alert-h: 4rem;
+  --kit-alert-p: 1.25rem;
+  --kit-alert-gap: 0.875rem;
+  --kit-alert-font: var(--kit-font-xl);
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/alert#variants
+ */
+:where(.kit-alert[data-variant=tonal]) {
+  --kit-alert-bg: color-mix(in oklab, var(--kit-alert-ink) 16%, transparent);
+  --kit-alert-fg: var(--kit-alert-ink);
+  --kit-alert-border: transparent;
+  --kit-alert-active: color-mix(in oklab, var(--kit-alert-ink) 28%, transparent);
+  --kit-alert-active-fg: var(--kit-alert-ink);
+}
+
+:where(.kit-alert[data-variant=outline]) {
+  --kit-alert-bg: transparent;
+  --kit-alert-fg: var(--kit-alert-ink);
+  --kit-alert-border: var(--kit-alert-color, var(--kit-color-border));
+  --kit-alert-active: color-mix(in oklab, var(--kit-alert-ink) 14%, transparent);
+  --kit-alert-active-fg: var(--kit-alert-ink);
+}
+
+:where(.kit-alert[data-variant=surface]) {
+  --kit-alert-bg: color-mix(in oklab, var(--kit-alert-ink) 8%, transparent);
+  --kit-alert-fg: var(--kit-alert-ink);
+  --kit-alert-border: color-mix(in oklab, var(--kit-alert-ink) 35%, transparent);
+  --kit-alert-active: color-mix(in oklab, var(--kit-alert-ink) 18%, transparent);
+  --kit-alert-active-fg: var(--kit-alert-ink);
+}
+
+:where(.kit-alert[data-variant=text]) {
+  --kit-alert-bg: transparent;
+  --kit-alert-fg: var(--kit-alert-ink);
+  --kit-alert-border: transparent;
+  --kit-alert-active: color-mix(in oklab, var(--kit-alert-ink) 14%, transparent);
+  --kit-alert-active-fg: var(--kit-alert-ink);
+}
+
+:where(.kit-alert .outline) {
+  --outline-color: var(--kit-alert-border);
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-alert[data-rounded="0"]) {
+  --kit-alert-radius: var(--kit-shape-none);
+}
+
+:where(.kit-alert[data-rounded=xs]) {
+  --kit-alert-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-alert[data-rounded=sm]) {
+  --kit-alert-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-alert[data-rounded=md]) {
+  --kit-alert-radius: var(--kit-shape-md);
+}
+
+:where(.kit-alert[data-rounded=lg]) {
+  --kit-alert-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-alert[data-rounded=xl]) {
+  --kit-alert-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-alert[data-rounded=full]) {
+  --kit-alert-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/alert#density
+ */
+:where(.kit-alert[data-density=dense]) {
+  --kit-alert-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-alert[data-density=compact]) {
+  --kit-alert-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-alert[data-density=default]) {
+  --kit-alert-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-alert[data-density=comfortable]) {
+  --kit-alert-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-alert[data-density=spacious]) {
+  --kit-alert-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,19 +1,19 @@
 import type { Snippet } from 'svelte';
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
-type AlertVariant = 'filled' | 'outline' | 'text';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
+type AlertVariant = 'filled' | 'tonal' | 'outline' | 'surface' | '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;
+    multiline?: boolean;
     variant?: AlertVariant;
     size?: SizeType;
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType | 'full';
     tone?: AlertTone;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
     prepend?: Snippet;
     append?: Snippet;
     close?: Snippet;