lapikit 0.7.3 → 0.7.5

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

@@ -1,13 +1,14 @@
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface ChipProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'a' | 'input' | 'button';
     input?: boolean;
     href?: string;
-    variant?: 'outline' | 'text' | 'filled';
-    density?: DensityType;
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType | 'full';
+    interactive?: boolean;
     active?: boolean;
     loading?: boolean;
     disabled?: boolean;
@@ -23,6 +24,5 @@ export interface ChipProps extends Component {
     append?: Snippet;
     prepend?: Snippet;
     elevation?: ElevationProps;
-    background?: string;
-    color?: string;
+    color?: ColorProps;
 }

package/dist/components/dialog/dialog.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles, disabledScroll, useElevation } from '../../utils';
+	import {
+		lockScroll,
+		splitAriaAttrs,
+		unlockScroll,
+		useComponentAttrs,
+		useElevation
+	} from '../../utils';
 	import type { DialogProps } from './dialog.types.js';
 
 	let {
 		ref = $bindable(),
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		open = $bindable(false),
@@ -16,42 +21,28 @@
 		position = 'center',
 		density = 'default',
 		rounded = 'md',
-		classContent = '',
+		classContent,
 		color,
-		background,
 		elevation = '2',
 		space,
 		...rest
 	}: DialogProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-dialog',
+			{
+				className,
+				sClass,
+				styleAttr,
+				sStyle: space ? { '--kit-dialog-space': space, ...sStyle } : sStyle,
+				color
+			},
+			rest
+		)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-dialog',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let contentClass = $derived(
-		Array.isArray(classContent)
-			? classContent.filter(Boolean).join(' ')
-			: `${classContent ?? ''}`.trim()
-	);
+	let split = $derived(splitAriaAttrs(attrs.rest));
 
 	$effect(() => {
 		if (!ref) return;
@@ -63,12 +54,12 @@
 		if (!open && ref.open) {
 			ref.close();
 		}
+	});
 
-		disabledScroll(open);
-
-		return () => {
-			disabledScroll(false);
-		};
+	$effect(() => {
+		if (!open) return;
+		lockScroll();
+		return unlockScroll;
 	});
 
 	function handleClose() {
@@ -95,35 +86,25 @@
 		if (event.target !== ref || persistent) return;
 		open = false;
 	}
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-dialog-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-dialog-bg:${background && `var(--kit-color-${background})`}` : '',
-			space ? `--kit-dialog-space:${space}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
 </script>
 
 <dialog
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-size={size}
 	data-position={position}
 	data-persistent={persistent}
+	data-density={density}
+	data-rounded={rounded}
+	{...split.aria}
 	onclose={handleClose}
 	oncancel={handleCancel}
 	onclick={handleBackdropClick}
 >
 	<div
-		{...restProps}
-		class={['kit-dialog__content', contentClass]}
-		data-density={density}
-		data-rounded={rounded}
+		{...split.others}
+		class={['kit-dialog__content', classContent]}
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
@@ -133,135 +114,163 @@
 	</div>
 </dialog>
 
-<style>
-	.kit-dialog {
-		border: 0;
-		padding: 0;
-		margin: auto;
-		width: 100%;
-		max-width: none;
-		background: transparent;
-		color: inherit;
-		overflow: visible;
-	}
+<style>:where(.kit-dialog) {
+  --kit-dialog-color: initial;
+  --kit-dialog-on-color: initial;
+  --kit-dialog-active-fg: initial;
+  --kit-dialog-active-shade: initial;
+  --kit-dialog-hover-fg: initial;
+  --kit-dialog-pressed-fg: initial;
+  --kit-dialog-bg: var(--kit-dialog-color, var(--kit-color-surface-1));
+  --kit-dialog-fg: var(--kit-dialog-on-color, var(--kit-dialog-contrast, var(--kit-color-text)));
+  --kit-dialog-ink: var(--kit-dialog-color, var(--kit-color-text));
+  --kit-dialog-hover: color-mix(in oklab, var(--kit-dialog-bg), var(--kit-dialog-fg) 8%);
+  --kit-dialog-pressed: color-mix(in oklab, var(--kit-dialog-bg), var(--kit-dialog-fg) 14%);
+  --kit-dialog-soft: color-mix(in oklab, var(--kit-dialog-bg) 16%, transparent);
+  --kit-dialog-border: color-mix(in oklab, var(--kit-dialog-bg), var(--kit-dialog-fg) 20%);
+  --kit-dialog-active: color-mix(
+  	in oklab,
+  	var(--kit-dialog-color),
+  	var(--kit-dialog-fg) var(--kit-dialog-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-dialog) {
+    --kit-dialog-contrast: color(from var(--kit-dialog-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);
+  }
+}
+:where(.kit-dialog) {
+  --kit-dialog-space: 1rem;
+}
 
-	.kit-dialog::backdrop {
-		background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
-		backdrop-filter: blur(2px);
-	}
+.kit-dialog {
+  width: 100%;
+  max-width: none;
+  margin: auto;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+.kit-dialog::backdrop {
+  background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
+  backdrop-filter: blur(2px);
+}
+.kit-dialog__content {
+  box-sizing: border-box;
+  width: min(100%, min(var(--kit-dialog-max), 100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
+  margin: 0 auto;
+  padding: calc(var(--kit-dialog-p) + var(--kit-dialog-density-offset) / 2);
+  overflow: auto;
+  border: 0;
+  border-radius: var(--kit-dialog-radius);
+  background-color: var(--kit-dialog-bg);
+  color: var(--kit-dialog-fg);
+}
+.kit-dialog {
+  /**
+   * position
+   * @link https://lapikit.dev/docs/components/dialog#position
+   */
+}
+.kit-dialog:is([data-position=top], [data-position=top-left], [data-position=top-right]) {
+  margin-top: var(--kit-dialog-space);
+  margin-bottom: auto;
+}
+.kit-dialog:is([data-position=bottom], [data-position=bottom-left], [data-position=bottom-right]) {
+  margin-top: auto;
+  margin-bottom: var(--kit-dialog-space);
+}
+.kit-dialog:is([data-position=top-left], [data-position=center-left], [data-position=bottom-left]) .kit-dialog__content {
+  margin-left: var(--kit-dialog-space);
+}
+.kit-dialog:is([data-position=top-right], [data-position=center-right], [data-position=bottom-right]) .kit-dialog__content {
+  margin-right: var(--kit-dialog-space);
+}
 
-	/**
-	* position
-	* @link nothing...
-	*/
-	.kit-dialog[data-position='top'],
-	.kit-dialog[data-position='top-left'],
-	.kit-dialog[data-position='top-right'] {
-		margin-top: var(--kit-dialog-space, 1rem);
-		margin-bottom: auto;
-	}
-	.kit-dialog[data-position='center'],
-	.kit-dialog[data-position='center-left'],
-	.kit-dialog[data-position='center-right'] {
-		margin-top: auto;
-		margin-bottom: auto;
-	}
-	.kit-dialog[data-position='bottom'],
-	.kit-dialog[data-position='bottom-left'],
-	.kit-dialog[data-position='bottom-right'] {
-		margin-top: auto;
-		margin-bottom: var(--kit-dialog-space, 1rem);
-	}
-	.kit-dialog[data-position='top-left'] .kit-dialog__content,
-	.kit-dialog[data-position='center-left'] .kit-dialog__content,
-	.kit-dialog[data-position='bottom-left'] .kit-dialog__content {
-		margin-left: var(--kit-dialog-space, 1rem);
-	}
-	.kit-dialog[data-position='top-right'] .kit-dialog__content,
-	.kit-dialog[data-position='center-right'] .kit-dialog__content,
-	.kit-dialog[data-position='bottom-right'] .kit-dialog__content {
-		margin-right: var(--kit-dialog-space, 1rem);
-	}
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/dialog#size
+ */
+:where(.kit-dialog[data-size=xs]) {
+  --kit-dialog-max: 20rem;
+  --kit-dialog-p: 0.75rem;
+}
 
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-dialog[data-size='xs'] {
-		--kit-dialog-max: 20rem;
-		--kit-dialog-p: 12px;
-	}
+:where(.kit-dialog[data-size=sm]) {
+  --kit-dialog-max: 24rem;
+  --kit-dialog-p: 0.875rem;
+}
 
-	.kit-dialog[data-size='sm'] {
-		--kit-dialog-max: 24rem;
-		--kit-dialog-p: 14px;
-	}
+:where(.kit-dialog[data-size=md]) {
+  --kit-dialog-max: 32rem;
+  --kit-dialog-p: 1rem;
+}
 
-	.kit-dialog[data-size='md'] {
-		--kit-dialog-max: 32rem;
-		--kit-dialog-p: 16px;
-	}
+:where(.kit-dialog[data-size=lg]) {
+  --kit-dialog-max: 42rem;
+  --kit-dialog-p: 1.25rem;
+}
 
-	.kit-dialog[data-size='lg'] {
-		--kit-dialog-max: 42rem;
-		--kit-dialog-p: 20px;
-	}
+:where(.kit-dialog[data-size=xl]) {
+  --kit-dialog-max: 56rem;
+  --kit-dialog-p: 1.5rem;
+}
 
-	.kit-dialog[data-size='xl'] {
-		--kit-dialog-max: 56rem;
-		--kit-dialog-p: 24px;
-	}
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-dialog[data-rounded="0"]) {
+  --kit-dialog-radius: var(--kit-shape-none);
+}
 
-	.kit-dialog__content {
-		--kit-dialog-fg: var(--kit-color-text);
-		--kit-dialog-bg: var(--kit-color-surface-1);
+:where(.kit-dialog[data-rounded=xs]) {
+  --kit-dialog-radius: var(--kit-shape-xs);
+}
 
-		box-sizing: border-box;
-		width: min(100%, min(var(--kit-dialog-max), calc(100vw - 2rem)));
-		max-height: calc(100dvh - 2rem);
-		overflow: auto;
-		padding: calc(var(--kit-dialog-p) + var(--kit-dialog-density-offset) / 2);
-		border: 0;
-		border-radius: var(--kit-dialog-radius);
-		background: var(--kit-dialog-bg);
-		color: var(--kit-dialog-fg);
-		margin: 0 auto;
-	}
+:where(.kit-dialog[data-rounded=sm]) {
+  --kit-dialog-radius: var(--kit-shape-sm);
+}
 
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-dialog__content[data-density='compact'] {
-		--kit-dialog-density-offset: var(--kit-density-compact);
-	}
-	.kit-dialog__content[data-density='default'] {
-		--kit-dialog-density-offset: var(--kit-density-default);
-	}
-	.kit-dialog__content[data-density='comfortable'] {
-		--kit-dialog-density-offset: var(--kit-density-comfortable);
-	}
+:where(.kit-dialog[data-rounded=md]) {
+  --kit-dialog-radius: var(--kit-shape-md);
+}
 
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-dialog__content[data-rounded='0'] {
-		--kit-dialog-radius: var(--kit-shape-none);
-	}
-	.kit-dialog__content[data-rounded='xs'] {
-		--kit-dialog-radius: var(--kit-shape-xs);
-	}
-	.kit-dialog__content[data-rounded='sm'] {
-		--kit-dialog-radius: var(--kit-shape-sm);
-	}
-	.kit-dialog__content[data-rounded='md'] {
-		--kit-dialog-radius: var(--kit-shape-md);
-	}
-	.kit-dialog__content[data-rounded='lg'] {
-		--kit-dialog-radius: var(--kit-shape-lg);
-	}
-	.kit-dialog__content[data-rounded='xl'] {
-		--kit-dialog-radius: var(--kit-shape-xl);
-	}
-</style>
+:where(.kit-dialog[data-rounded=lg]) {
+  --kit-dialog-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-dialog[data-rounded=xl]) {
+  --kit-dialog-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-dialog[data-rounded=full]) {
+  --kit-dialog-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/dialog#density
+ */
+:where(.kit-dialog[data-density=dense]) {
+  --kit-dialog-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-dialog[data-density=compact]) {
+  --kit-dialog-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-dialog[data-density=default]) {
+  --kit-dialog-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-dialog[data-density=comfortable]) {
+  --kit-dialog-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-dialog[data-density=spacious]) {
+  --kit-dialog-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,4 +1,5 @@
-import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+import type { ClassValue } from 'svelte/elements';
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
 type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type DialogPosition = 'top' | 'center' | 'bottom' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right';
 export interface DialogProps extends Component {
@@ -7,11 +8,10 @@ export interface DialogProps extends Component {
     persistent?: boolean;
     size?: DialogSize;
     position?: DialogPosition;
-    density?: DensityType;
-    rounded?: RoundedType;
-    classContent?: string | string[] | undefined;
-    color?: string;
-    background?: string;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    rounded?: RoundedType | 'full';
+    classContent?: ClassValue;
+    color?: ColorProps;
     elevation?: ElevationProps;
     space?: string;
 }